ui: Notebook Page

tools/ui/src/lib/components/app/index.ts

@@ -9,4 +9,5 @@ export * from './misc';
 export * from './settings';
 export * from './models';
 export * from './navigation';
+export * from './notebook';
 export * from './server';

tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte

@@ -19,7 +19,7 @@
 <kbd class="{baseClasses} {variantClasses} {className}">
 	{#each keys as key, index (index)}
 		{#if key === 'shift'}
-			<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
+			<ArrowBigUp class="size-4 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
 		{:else if key === 'cmd'}
 			<span class={variant === 'destructive' ? 'text-destructive' : ''}>⌘</span>
 		{:else}

tools/ui/src/lib/components/app/misc/ProcessingInfo.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	let {
+		visible,
+		processingDetails
+	}: {
+		visible: boolean;
+		processingDetails: string[];
+	} = $props();
+</script>
+
+<div class="processing-info-container pointer-events-none" class:visible>
+	<div class="processing-info-content">
+		{#each processingDetails as detail (detail)}
+			<span class="processing-info-detail pointer-events-auto backdrop-blur-sm">{detail}</span>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.processing-info-container {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		padding: 0 1rem 0.75rem;
+		opacity: 0;
+		transform: translateY(50%);
+		transition:
+			opacity 300ms ease-out,
+			transform 300ms ease-out;
+	}
+
+	.processing-info-container.visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.processing-info-content {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1rem;
+		justify-content: center;
+		max-width: 48rem;
+		margin: 0 auto;
+	}
+
+	.processing-info-detail {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		padding: 0.25rem 0.75rem;
+		border-radius: 0.375rem;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 768px) {
+		.processing-info-content {
+			gap: 0.5rem;
+		}
+
+		.processing-info-detail {
+			font-size: 0.7rem;
+			padding: 0.2rem 0.5rem;
+		}
+	}
+</style>

tools/ui/src/lib/components/app/misc/ProcessingText.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	let {
+		processingText,
+		cls
+	}: {
+		processingText: string;
+		cls: string;
+	} = $props();
+</script>
+
+<div class="{cls} w-full max-w-[48rem]" in:fade>
+	<div class="processing-container">
+		<span class="processing-text">
+			{processingText}
+		</span>
+	</div>
+</div>
+
+<style>
+	.processing-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.processing-text {
+		background: linear-gradient(
+			90deg,
+			var(--muted-foreground),
+			var(--foreground),
+			var(--muted-foreground)
+		);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: shine 1s linear infinite;
+		font-weight: 500;
+		font-size: 0.875rem;
+	}
+
+	@keyframes shine {
+		to {
+			background-position: -200% 0;
+		}
+	}
+</style>

tools/ui/src/lib/components/app/misc/index.ts

@@ -44,6 +44,18 @@ export { default as TruncatedText } from './TruncatedText.svelte';
  */
 export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';
 
+/**
+ * **ProcessingText** - Display for simple processing text using shine animation
+ */
+export { default as ProcessingText } from './ProcessingText.svelte';
+
+/**
+ * **ProcessingInfo** - Display for generation/processing details
+ *
+ * Shows details like tokens/sec during parsing and generation.
+ */
+export { default as ProcessingInfo } from './ProcessingInfo.svelte';
+
 /**
  * **CodeBlockActions** - Actions bar for code blocks (copy, preview)
  *