diff --git a/tools/ui/src/lib/components/app/index.ts b/tools/ui/src/lib/components/app/index.ts
index 4914c743a50d..d4dd716c0939 100644
--- a/tools/ui/src/lib/components/app/index.ts
+++ b/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';
diff --git a/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte b/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte
index da55abda0234..ba24095f5b47 100644
--- a/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte
+++ b/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}
diff --git a/tools/ui/src/lib/components/app/misc/ProcessingInfo.svelte b/tools/ui/src/lib/components/app/misc/ProcessingInfo.svelte
new file mode 100644
index 000000000000..c02b46163afc
--- /dev/null
+++ b/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>
diff --git a/tools/ui/src/lib/components/app/misc/ProcessingText.svelte b/tools/ui/src/lib/components/app/misc/ProcessingText.svelte
new file mode 100644
index 000000000000..386b2a4fcc7b
--- /dev/null
+++ b/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>
diff --git a/tools/ui/src/lib/components/app/misc/index.ts b/tools/ui/src/lib/components/app/misc/index.ts
index b550ae66a53c..8b1635fd98b6 100644
--- a/tools/ui/src/lib/components/app/misc/index.ts
+++ b/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)
  *
diff --git a/tools/ui/src/lib/components/app/notebook/NotebookScreen.svelte b/tools/ui/src/lib/components/app/notebook/NotebookScreen.svelte
new file mode 100644
index 000000000000..f34d79204c0c
--- /dev/null
+++ b/tools/ui/src/lib/components/app/notebook/NotebookScreen.svelte
@@ -0,0 +1,353 @@
+<script lang="ts">
+	import { notebookStore } from '$lib/stores/notebook.svelte';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import Textarea from '$lib/components/ui/textarea/textarea.svelte';
+	import { Play, Square, Undo, Redo, RulerDimensionLine } from '@lucide/svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import {
+		ChatMessageStatistics,
+		DialogChatError,
+		KeyboardShortcutInfo,
+		ModelsSelectorDropdown
+	} from '$lib/components/app';
+	import { ProcessingText, ProcessingInfo } from '$lib/components/app/misc';
+	import { ErrorDialogType } from '$lib/enums';
+
+	import { modelOptions, selectedModelId } from '$lib/stores/models.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+
+	import {
+		AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
+		AUTO_SCROLL_INTERVAL
+	} from '$lib/constants/auto-scroll';
+
+	// Note: this constant was previously in the constants/auto-scroll file above but was
+	// removed in the PR #20999
+	const INITIAL_SCROLL_DELAY = 50;
+
+	import { onMount } from 'svelte';
+
+	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll));
+	let showMessageStats = $derived(config().showMessageStats);
+	let autoScrollEnabled = $state(true);
+	let scrollContainer: HTMLTextAreaElement | null = $state(null);
+	let lastScrollTop = $state(0);
+	let scrollInterval: ReturnType<typeof setInterval> | undefined;
+	let scrollTimeout: ReturnType<typeof setTimeout> | undefined;
+	let userScrolledUp = $state(false);
+
+	let isRouter = $derived(isRouterMode());
+	let processingState = $derived(notebookStore.processingState);
+
+	let errorDialog = $derived(notebookStore.error);
+	let canUndo = $derived(notebookStore.previousContent !== null && !notebookStore.isGenerating);
+	let canRedo = $derived(notebookStore.undoneContent !== null && !notebookStore.isGenerating);
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLTextAreaElement;
+		notebookStore.content = target.value;
+		notebookStore.resetUndoRedo();
+		if (activeModelId || !isRouter) {
+			notebookStore.updateTokenCount(activeModelId);
+		}
+	}
+
+	function handleErrorDialogOpenChange(open: boolean) {
+		if (!open) {
+			notebookStore.dismissError();
+		}
+	}
+
+	async function handleGenerate() {
+		if (!disableAutoScroll) {
+			userScrolledUp = false;
+			autoScrollEnabled = true;
+			scrollToBottom();
+		}
+
+		if (activeModelId) {
+			await notebookStore.generate(activeModelId);
+		}
+	}
+
+	function handleUndo() {
+		notebookStore.undo();
+	}
+
+	function handleRedo() {
+		notebookStore.redo();
+	}
+
+	function handleStop() {
+		notebookStore.stop();
+	}
+
+	let activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	let hasModelSelected = $derived(!isRouter || !!selectedModelId());
+
+	let generateTooltip = $derived.by(() => {
+		if (!hasModelSelected) {
+			return 'Please select a model first';
+		}
+
+		if (notebookStore.content.length == 0) {
+			return 'Input some text first';
+		}
+
+		return '';
+	});
+
+	let canGenerate = $derived(notebookStore.content.length > 0 && hasModelSelected);
+	let isDisabled = $derived(!canGenerate);
+
+	function handleScroll() {
+		if (disableAutoScroll || !scrollContainer) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+		const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+		const isAtBottom = distanceFromBottom < AUTO_SCROLL_AT_BOTTOM_THRESHOLD;
+
+		if (scrollTop < lastScrollTop && !isAtBottom) {
+			userScrolledUp = true;
+			autoScrollEnabled = false;
+		} else if (isAtBottom && userScrolledUp) {
+			userScrolledUp = false;
+			autoScrollEnabled = true;
+		}
+
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+		}
+
+		scrollTimeout = setTimeout(() => {
+			if (isAtBottom) {
+				userScrolledUp = false;
+				autoScrollEnabled = true;
+			}
+		}, AUTO_SCROLL_INTERVAL);
+
+		lastScrollTop = scrollTop;
+	}
+
+	function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
+		if (disableAutoScroll) return;
+
+		scrollContainer?.scrollTo({
+			top: scrollContainer?.scrollHeight,
+			behavior
+		});
+	}
+
+	onMount(() => {
+		if (!disableAutoScroll) {
+			setTimeout(() => scrollToBottom('instant'), INITIAL_SCROLL_DELAY);
+		}
+	});
+
+	$effect(() => {
+		if (disableAutoScroll) {
+			autoScrollEnabled = false;
+			if (scrollInterval) {
+				clearInterval(scrollInterval);
+				scrollInterval = undefined;
+			}
+			return;
+		}
+
+		if (notebookStore.isGenerating && autoScrollEnabled) {
+			scrollInterval = setInterval(() => scrollToBottom(), AUTO_SCROLL_INTERVAL);
+		} else if (scrollInterval) {
+			clearInterval(scrollInterval);
+			scrollInterval = undefined;
+		}
+	});
+
+	function handleBeforeUnload(event: BeforeUnloadEvent) {
+		// This should prevent the browser from closing the tab if there is content in the notebook
+		if (notebookStore.content.length > 0) {
+			event.preventDefault();
+			event.returnValue = '';
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
+
+		if (event.shiftKey && event.key === 'Enter') {
+			event.preventDefault();
+			if (notebookStore.isGenerating) {
+				handleStop();
+			} else if (canGenerate) {
+				handleGenerate();
+			}
+		}
+
+		if (isCtrlOrCmd && event.key === 'z') {
+			event.preventDefault();
+			if (canUndo) {
+				handleUndo();
+			}
+		}
+
+		if (isCtrlOrCmd && event.key === 'y') {
+			event.preventDefault();
+			if (canRedo) {
+				handleRedo();
+			}
+		}
+	}
+</script>
+
+<svelte:window onbeforeunload={handleBeforeUnload} onkeydown={handleKeydown} />
+
+<div class="flex h-dvh flex-col">
+	<header
+		class="flex items-center justify-center border-b border-border/40 bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	>
+		<h1 class="text-lg font-semibold">Notebook</h1>
+	</header>
+
+	<div class="min-h-0 flex-1 overflow-hidden px-2 pt-2 pb-0 md:px-4 md:pt-4">
+		<Textarea
+			bind:ref={scrollContainer}
+			onscroll={handleScroll}
+			value={notebookStore.content}
+			oninput={handleInput}
+			class="h-full min-h-[100px] w-full resize-none rounded-xl border-none bg-muted p-4 text-base focus-visible:ring-0 md:p-6"
+			placeholder="Enter your text here..."
+		/>
+	</div>
+
+	{#if notebookStore.processingState?.status === 'preparing'}
+		<ProcessingText cls="px-4 md:px-6" processingText={notebookStore.getPromptProcessingText()} />
+	{:else if showMessageStats}
+		<ProcessingInfo
+			visible={notebookStore.processingState?.status === 'generating'}
+			processingDetails={notebookStore.getProcessingDetails()}
+		/>
+	{/if}
+
+	<div class="bg-background p-2 md:p-4">
+		<div class="flex flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between">
+			<div class="flex items-center gap-2">
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<Button variant="ghost" size="icon" disabled={!canUndo} onclick={handleUndo}>
+							<Undo class="h-4 w-4" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content>
+						<p>Undo last generation</p>
+						<KeyboardShortcutInfo keys={['cmd', 'z']} class="w-full justify-center opacity-100" />
+					</Tooltip.Content>
+				</Tooltip.Root>
+
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<Button variant="ghost" size="icon" disabled={!canRedo} onclick={handleRedo}>
+							<Redo class="h-4 w-4" />
+						</Button>
+					</Tooltip.Trigger>
+					<Tooltip.Content>
+						<p>Redo last generation</p>
+						<KeyboardShortcutInfo keys={['cmd', 'y']} class="w-full justify-center opacity-100" />
+					</Tooltip.Content>
+				</Tooltip.Root>
+
+				{#snippet generateButton()}
+					<Button
+						disabled={isDisabled}
+						onclick={notebookStore.isGenerating ? handleStop : handleGenerate}
+						size="sm"
+						variant={notebookStore.isGenerating ? 'destructive' : 'default'}
+						class="min-w-[120px] gap-2"
+					>
+						{#if notebookStore.isGenerating}
+							<Square class="h-4 w-4 fill-current" />
+							Stop
+						{:else}
+							<Play class="h-4 w-4 fill-current" />
+							Generate
+						{/if}
+					</Button>
+				{/snippet}
+
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{@render generateButton()}
+					</Tooltip.Trigger>
+
+					<Tooltip.Content>
+						{#if generateTooltip}
+							<p>{generateTooltip}</p>
+						{:else}
+							<div class="flex items-center justify-center py-1">
+								<KeyboardShortcutInfo keys={['shift', 'enter']} class="opacity-100" />
+							</div>
+						{/if}
+					</Tooltip.Content>
+				</Tooltip.Root>
+
+				<ModelsSelectorDropdown
+					forceForegroundText={true}
+					useGlobalSelection={true}
+					disabled={notebookStore.isGenerating}
+				/>
+			</div>
+
+			{#if showMessageStats}
+				<div class="flex min-h-[42px] w-full flex-col items-end justify-center gap-0.5 md:w-auto">
+					{#if notebookStore.totalTokens > 0}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<div class="flex items-center gap-1.5 pr-3.5 text-xs text-muted-foreground">
+									<RulerDimensionLine class="h-3.5 w-3.5" />
+									<span>{notebookStore.totalTokens} tokens</span>
+								</div>
+							</Tooltip.Trigger>
+							<Tooltip.Content>
+								<p>Total tokens</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+
+					{#if processingState?.promptTokens}
+						<ChatMessageStatistics
+							promptTokens={processingState.promptTokens}
+							promptMs={processingState.promptMs}
+							predictedTokens={processingState.tokensDecoded}
+							predictedMs={processingState.predictedMs}
+							isLive={notebookStore.isGenerating}
+							isProcessingPrompt={notebookStore.isGenerating && processingState.tokensDecoded === 0}
+						/>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<DialogChatError
+		message={errorDialog?.message ?? ''}
+		contextInfo={errorDialog?.contextInfo}
+		onOpenChange={handleErrorDialogOpenChange}
+		open={Boolean(errorDialog)}
+		type={errorDialog?.type ?? ErrorDialogType.SERVER}
+	/>
+</div>
diff --git a/tools/ui/src/lib/components/app/notebook/index.ts b/tools/ui/src/lib/components/app/notebook/index.ts
new file mode 100644
index 000000000000..5a4b6a6ce6ca
--- /dev/null
+++ b/tools/ui/src/lib/components/app/notebook/index.ts
@@ -0,0 +1,10 @@
+/**
+ *
+ * NOTEBOOK
+ *
+ * Notebook page for raw text completion
+ *
+ */
+
+/** Main Notebook page. */
+export { default as NotebookScreen } from './NotebookScreen.svelte';
diff --git a/tools/ui/src/lib/constants/routes.ts b/tools/ui/src/lib/constants/routes.ts
index 0d6b5942fcd6..8ca750f105c7 100644
--- a/tools/ui/src/lib/constants/routes.ts
+++ b/tools/ui/src/lib/constants/routes.ts
@@ -21,6 +21,8 @@ export const ROUTES = {
 	CHAT: '#/chat',
 	/** MCP servers. */
 	MCP_SERVERS: '#/mcp-servers',
+	/** Notebook page. */
+	NOTEBOOK: '#/notebook',
 	/** Settings base — for dynamic settings URLs use RouterService. */
 	SETTINGS: '#/settings',
 	/** Search — mobile-only full-page conversation search. */
diff --git a/tools/ui/src/lib/constants/settings-registry.ts b/tools/ui/src/lib/constants/settings-registry.ts
index b1404093c5b0..61913972c966 100644
--- a/tools/ui/src/lib/constants/settings-registry.ts
+++ b/tools/ui/src/lib/constants/settings-registry.ts
@@ -222,8 +222,8 @@ const SETTINGS_REGISTRY: Record<string, SettingsSectionEntry> = {
 			{
 				key: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
 				label: 'Show message generation statistics',
-				help: 'Display generation statistics (tokens/second, token count, duration) below each assistant message.',
-				defaultValue: false,
+				help: 'Display generation statistics (tokens/second, token count, duration).',
+				defaultValue: true,
 				type: SettingsFieldType.CHECKBOX,
 				section: SETTINGS_SECTION_SLUGS.DISPLAY,
 				sync: {
diff --git a/tools/ui/src/lib/constants/ui.ts b/tools/ui/src/lib/constants/ui.ts
index 98a074da0995..8ce6fe201660 100644
--- a/tools/ui/src/lib/constants/ui.ts
+++ b/tools/ui/src/lib/constants/ui.ts
@@ -1,4 +1,4 @@
-import { Search, Settings, SquarePen } from '@lucide/svelte';
+import { NotepadText, Search, Settings, SquarePen } from '@lucide/svelte';
 import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import type { Component } from 'svelte';
 import { ROUTES } from './routes';
@@ -24,6 +24,12 @@ export interface DesktopIconStripItem {
 
 export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 	{ icon: SquarePen, tooltip: 'New chat', route: ROUTES.NEW_CHAT, keys: ['shift', 'cmd', 'o'] },
+	{
+		icon: NotepadText,
+		tooltip: 'Notebook',
+		route: ROUTES.NOTEBOOK,
+		activeRouteId: '/notebook'
+	},
 	{ icon: Search, tooltip: 'Search', keys: ['cmd', 'k'] },
 	{
 		icon: McpLogo,
diff --git a/tools/ui/src/lib/hooks/use-processing-state.svelte.ts b/tools/ui/src/lib/hooks/use-processing-state.svelte.ts
index 9fbda75d6724..4f27f0177fcf 100644
--- a/tools/ui/src/lib/hooks/use-processing-state.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-processing-state.svelte.ts
@@ -15,6 +15,15 @@ export interface UseProcessingStateReturn {
 	stopMonitoring(): void;
 }
 
+export function getETASecs(done: number, total: number, elapsedMs: number): number | undefined {
+	const elapsedSecs = elapsedMs / 1000;
+	const progressETASecs =
+		done === 0 || elapsedSecs < 0.5
+			? undefined // can be the case for the 0% progress report
+			: elapsedSecs * (total / done - 1);
+	return progressETASecs;
+}
+
 /**
  * useProcessingState - Reactive processing state hook
  *
@@ -70,15 +79,6 @@ export function useProcessingState(): UseProcessingStateReturn {
 		}
 	});
 
-	function getETASecs(done: number, total: number, elapsedMs: number): number | undefined {
-		const elapsedSecs = elapsedMs / 1000;
-		const progressETASecs =
-			done === 0 || elapsedSecs < 0.5
-				? undefined // can be the case for the 0% progress report
-				: elapsedSecs * (total / done - 1);
-		return progressETASecs;
-	}
-
 	function startMonitoring(): void {
 		if (isMonitoring) return;
 		isMonitoring = true;
diff --git a/tools/ui/src/lib/services/chat.service.ts b/tools/ui/src/lib/services/chat.service.ts
index 15f4cc3b5f8b..7f07484796c7 100644
--- a/tools/ui/src/lib/services/chat.service.ts
+++ b/tools/ui/src/lib/services/chat.service.ts
@@ -1384,7 +1384,7 @@ export class ChatService {
 	 * @param response - HTTP response object
 	 * @returns Promise<Error> - Parsed error with context info if available
 	 */
-	private static async parseErrorResponse(
+	public static async parseErrorResponse(
 		response: Response
 	): Promise<Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }> {
 		try {
diff --git a/tools/ui/src/lib/services/completion.service.ts b/tools/ui/src/lib/services/completion.service.ts
new file mode 100644
index 000000000000..89fe346af844
--- /dev/null
+++ b/tools/ui/src/lib/services/completion.service.ts
@@ -0,0 +1,274 @@
+import { getJsonHeaders } from '$lib/utils';
+import { ChatService } from '$lib/services/chat.service';
+
+import type { ApiCompletionRequest, ApiCompletionStreamChunk } from '$lib/types/api';
+import type { ChatMessageTimings } from '$lib/types/chat';
+import type { CompletionServiceCallbacks, SettingsChatServiceOptions } from '$lib/types/settings';
+
+/**
+ * CompletionService - Low-level API communication layer for raw text completions.
+ * Used in the notebook page.
+ */
+export class CompletionService {
+	/**
+	 * Sends a completion request to the llama.cpp server.
+	 * Supports only streaming responses.
+	 *
+	 * @param prompt - The text prompt to complete
+	 * @param callbacks - Callbacks methods (onChunk, onComplete, ...)
+	 * @param options - Configuration options for the completion request
+	 * @returns {Promise<void>} that resolves to void
+	 * @throws {Error} if the request fails or is aborted
+	 */
+	static async sendCompletion(
+		prompt: string,
+		callbacks: CompletionServiceCallbacks,
+		options: SettingsChatServiceOptions = {},
+		signal?: AbortSignal
+	): Promise<string | void> {
+		const {
+			// Generation parameters
+			temperature,
+			max_tokens,
+			// Sampling parameters
+			dynatemp_range,
+			dynatemp_exponent,
+			top_k,
+			top_p,
+			min_p,
+			xtc_probability,
+			xtc_threshold,
+			typ_p,
+			// Penalty parameters
+			repeat_last_n,
+			repeat_penalty,
+			presence_penalty,
+			frequency_penalty,
+			dry_multiplier,
+			dry_base,
+			dry_allowed_length,
+			dry_penalty_last_n,
+			// Other parameters
+			samplers,
+			backend_sampling,
+			custom,
+			timings_per_token
+		} = options;
+
+		// We only support streaming responses
+		const stream: boolean = true;
+		const cache_prompt: boolean = true;
+		const return_progress: boolean = true;
+
+		const requestBody: ApiCompletionRequest = {
+			cache_prompt,
+			return_progress,
+			prompt,
+			stream
+		};
+
+		// Include model in request if provided
+		if (options.model) {
+			requestBody.model = options.model;
+		}
+
+		if (temperature !== undefined) requestBody.temperature = temperature;
+		if (max_tokens !== undefined) {
+			requestBody.max_tokens = max_tokens !== null && max_tokens !== 0 ? max_tokens : -1;
+		}
+
+		if (dynatemp_range !== undefined) requestBody.dynatemp_range = dynatemp_range;
+		if (dynatemp_exponent !== undefined) requestBody.dynatemp_exponent = dynatemp_exponent;
+		if (top_k !== undefined) requestBody.top_k = top_k;
+		if (top_p !== undefined) requestBody.top_p = top_p;
+		if (min_p !== undefined) requestBody.min_p = min_p;
+		if (xtc_probability !== undefined) requestBody.xtc_probability = xtc_probability;
+		if (xtc_threshold !== undefined) requestBody.xtc_threshold = xtc_threshold;
+		if (typ_p !== undefined) {
+			// On the completion endpoint, typ_p is called typical_p
+			requestBody.typical_p = typ_p;
+		}
+
+		if (repeat_last_n !== undefined) requestBody.repeat_last_n = repeat_last_n;
+		if (repeat_penalty !== undefined) requestBody.repeat_penalty = repeat_penalty;
+		if (presence_penalty !== undefined) requestBody.presence_penalty = presence_penalty;
+		if (frequency_penalty !== undefined) requestBody.frequency_penalty = frequency_penalty;
+		if (dry_multiplier !== undefined) requestBody.dry_multiplier = dry_multiplier;
+		if (dry_base !== undefined) requestBody.dry_base = dry_base;
+		if (dry_allowed_length !== undefined) requestBody.dry_allowed_length = dry_allowed_length;
+		if (dry_penalty_last_n !== undefined) requestBody.dry_penalty_last_n = dry_penalty_last_n;
+
+		if (samplers !== undefined) {
+			requestBody.samplers =
+				typeof samplers === 'string'
+					? samplers.split(';').filter((s: string) => s.trim())
+					: samplers;
+		}
+
+		if (backend_sampling !== undefined) requestBody.backend_sampling = backend_sampling;
+		if (timings_per_token !== undefined) requestBody.timings_per_token = timings_per_token;
+
+		if (custom) {
+			try {
+				const customParams = typeof custom === 'string' ? JSON.parse(custom) : custom;
+				Object.assign(requestBody, customParams);
+			} catch (error) {
+				console.warn('Failed to parse custom parameters:', error);
+			}
+		}
+
+		try {
+			const response = await fetch(`./completion`, {
+				method: 'POST',
+				headers: getJsonHeaders(),
+				body: JSON.stringify(requestBody),
+				signal
+			});
+
+			if (!response.ok) {
+				const error = await ChatService.parseErrorResponse(response);
+				callbacks.onError?.(error);
+				throw error;
+			}
+
+			await CompletionService.handleCompletionStreamResponse(response, callbacks, signal);
+			return;
+		} catch (error) {
+			if (error instanceof Error && error.name === 'AbortError') {
+				console.log('Completion request was aborted');
+				return;
+			}
+
+			let userFriendlyError: Error;
+
+			if (error instanceof Error) {
+				if (error.name === 'TypeError' && error.message.includes('fetch')) {
+					userFriendlyError = new Error(
+						'Unable to connect to server - please check if the server is running'
+					);
+					userFriendlyError.name = 'NetworkError';
+				} else if (error.message.includes('ECONNREFUSED')) {
+					userFriendlyError = new Error('Connection refused - server may be offline');
+					userFriendlyError.name = 'NetworkError';
+				} else if (error.message.includes('ETIMEDOUT')) {
+					userFriendlyError = new Error('Request timed out - the server took too long to respond');
+					userFriendlyError.name = 'TimeoutError';
+				} else {
+					userFriendlyError = error;
+				}
+			} else {
+				userFriendlyError = new Error('Unknown error occurred while sending completion');
+			}
+
+			console.error('Error in sendCompletion:', error);
+			callbacks.onError?.(userFriendlyError);
+			throw userFriendlyError;
+		}
+	}
+
+	/**
+	 * Handles streaming response from the completion API
+	 */
+	private static async handleCompletionStreamResponse(
+		response: Response,
+		callbacks: CompletionServiceCallbacks,
+		abortSignal?: AbortSignal
+	): Promise<void> {
+		const reader = response.body?.getReader();
+
+		if (!reader) {
+			throw new Error('No response body');
+		}
+
+		const decoder = new TextDecoder();
+		let aggregatedContent = '';
+		let lastTimings: ChatMessageTimings | undefined;
+		let streamFinished = false;
+		let modelEmitted = false;
+
+		try {
+			let chunk = '';
+			while (true) {
+				if (abortSignal?.aborted) {
+					break;
+				}
+
+				const { done, value } = await reader.read();
+				if (done) {
+					break;
+				}
+
+				if (abortSignal?.aborted) {
+					break;
+				}
+
+				chunk += decoder.decode(value, { stream: true });
+				const lines = chunk.split('\n');
+				chunk = lines.pop() || '';
+
+				for (const line of lines) {
+					if (abortSignal?.aborted) {
+						break;
+					}
+
+					if (line.startsWith('data: ')) {
+						const data = line.slice(6);
+
+						try {
+							const parsed: ApiCompletionStreamChunk = JSON.parse(data);
+							const content = parsed.content;
+							const timings = parsed.timings;
+							const model = parsed.model;
+							const promptProgress = parsed.prompt_progress;
+
+							if (parsed.stop) {
+								streamFinished = true;
+							}
+
+							if (model && !modelEmitted) {
+								modelEmitted = true;
+								callbacks.onModel?.(model);
+							}
+
+							if (promptProgress) {
+								callbacks.onTimings?.(undefined, promptProgress);
+							}
+
+							if (timings) {
+								callbacks.onTimings?.(timings, promptProgress);
+								lastTimings = timings;
+							}
+
+							if (content) {
+								aggregatedContent += content;
+								if (!abortSignal?.aborted) {
+									callbacks.onChunk?.(content);
+								}
+							}
+						} catch (e) {
+							console.error('Error parsing JSON chunk:', e);
+						}
+					}
+				}
+
+				if (streamFinished) {
+					break;
+				}
+			}
+
+			if (abortSignal?.aborted) {
+				return;
+			}
+
+			if (streamFinished) {
+				callbacks.onComplete?.(aggregatedContent, lastTimings);
+			}
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error('Stream error');
+			callbacks.onError?.(err);
+			throw err;
+		} finally {
+			reader.releaseLock();
+		}
+	}
+}
diff --git a/tools/ui/src/lib/services/tokenize.service.ts b/tools/ui/src/lib/services/tokenize.service.ts
new file mode 100644
index 000000000000..5de49fba9e26
--- /dev/null
+++ b/tools/ui/src/lib/services/tokenize.service.ts
@@ -0,0 +1,39 @@
+import { getJsonHeaders } from '$lib/utils';
+
+/**
+ * Tokenizes the provided text using the server's tokenizer.
+ *
+ * @param content - The text content to tokenize
+ * @param model - Optional model name to use for tokenization (required in router mode)
+ * @param signal - Optional AbortSignal
+ * @returns {Promise<number[]>} Promise that resolves to an array of token IDs
+ */
+export async function tokenize(
+	content: string,
+	model?: string,
+	signal?: AbortSignal
+): Promise<number[]> {
+	try {
+		const body: { content: string; model?: string } = { content };
+		if (model) {
+			body.model = model;
+		}
+
+		const response = await fetch('./tokenize', {
+			method: 'POST',
+			headers: getJsonHeaders(),
+			body: JSON.stringify(body),
+			signal
+		});
+
+		if (!response.ok) {
+			throw new Error(`Tokenize failed: ${response.statusText}`);
+		}
+
+		const data = await response.json();
+		return data.tokens;
+	} catch (error) {
+		console.error('Tokenize error:', error);
+		return [];
+	}
+}
diff --git a/tools/ui/src/lib/stores/chat.svelte.ts b/tools/ui/src/lib/stores/chat.svelte.ts
index 40c9cf71fac0..d3a60a8a212d 100644
--- a/tools/ui/src/lib/stores/chat.svelte.ts
+++ b/tools/ui/src/lib/stores/chat.svelte.ts
@@ -20,12 +20,8 @@ import { conversationsStore } from '$lib/stores/conversations.svelte';
 import { config } from '$lib/stores/settings.svelte';
 import { agenticStore } from '$lib/stores/agentic.svelte';
 import { mcpStore } from '$lib/stores/mcp.svelte';
-import { contextSize, isRouterMode } from '$lib/stores/server.svelte';
-import {
-	selectedModelName,
-	modelsStore,
-	selectedModelContextSize
-} from '$lib/stores/models.svelte';
+import { isRouterMode } from '$lib/stores/server.svelte';
+import { selectedModelName, modelsStore, getContextSize } from '$lib/stores/models.svelte';
 import {
 	normalizeModelName,
 	filterByLeafNodeId,
@@ -1182,16 +1178,12 @@ class ChatStore {
 				conversationsStore.updateMessageAtIndex(idx, { timings: intermediateTimings });
 			},
 			onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
-				const tokensPerSecond =
-					timings?.predicted_ms && timings?.predicted_n
-						? (timings.predicted_n / timings.predicted_ms) * 1000
-						: 0;
 				this.updateProcessingStateFromTimings(
 					{
 						prompt_n: timings?.prompt_n || 0,
 						prompt_ms: timings?.prompt_ms,
 						predicted_n: timings?.predicted_n || 0,
-						predicted_per_second: tokensPerSecond,
+						predicted_ms: timings?.predicted_ms,
 						cache_n: timings?.cache_n || 0,
 						prompt_progress: promptProgress
 					},
@@ -1938,16 +1930,12 @@ class ChatStore {
 						this.setChatReasoning(msg.convId, true);
 					},
 					onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
-						const tokensPerSecond =
-							timings?.predicted_ms && timings?.predicted_n
-								? (timings.predicted_n / timings.predicted_ms) * 1000
-								: 0;
 						this.updateProcessingStateFromTimings(
 							{
 								prompt_n: timings?.prompt_n || 0,
 								prompt_ms: timings?.prompt_ms,
 								predicted_n: timings?.predicted_n || 0,
-								predicted_per_second: tokensPerSecond,
+								predicted_ms: timings?.predicted_ms || 0,
 								cache_n: timings?.cache_n || 0,
 								prompt_progress: promptProgress
 							},
@@ -2244,21 +2232,7 @@ class ChatStore {
 		if (activeState && typeof activeState.contextTotal === 'number' && activeState.contextTotal > 0)
 			return activeState.contextTotal;
 
-		if (isRouterMode()) {
-			const modelContextSize = selectedModelContextSize();
-
-			if (typeof modelContextSize === 'number' && modelContextSize > 0) {
-				return modelContextSize;
-			}
-		} else {
-			const propsContextSize = contextSize();
-
-			if (typeof propsContextSize === 'number' && propsContextSize > 0) {
-				return propsContextSize;
-			}
-		}
-
-		return null;
+		return getContextSize();
 	}
 
 	updateProcessingStateFromTimings(
@@ -2266,7 +2240,7 @@ class ChatStore {
 			prompt_n: number;
 			prompt_ms?: number;
 			predicted_n: number;
-			predicted_per_second: number;
+			predicted_ms?: number;
 			cache_n: number;
 			prompt_progress?: ChatMessagePromptProgress;
 		},
@@ -2285,16 +2259,21 @@ class ChatStore {
 		}
 	}
 
-	private parseTimingData(timingData: Record<string, unknown>): ApiProcessingState | null {
+	parseTimingData(
+		timingData: Record<string, unknown>,
+		contextSize: number | null = null
+	): ApiProcessingState {
 		const promptTokens = (timingData.prompt_n as number) || 0,
 			promptMs = (timingData.prompt_ms as number) || undefined,
 			predictedTokens = (timingData.predicted_n as number) || 0,
-			tokensPerSecond = (timingData.predicted_per_second as number) || 0,
+			predictedMs = (timingData.predicted_ms as number) || undefined,
 			cacheTokens = (timingData.cache_n as number) || 0;
+		const tokensPerSecond =
+			predictedMs && predictedTokens ? (predictedTokens / predictedMs) * 1000 : 0;
 		const promptProgress = timingData.prompt_progress as
 			| { total: number; cache: number; processed: number; time_ms: number }
 			| undefined;
-		const contextTotal = this.getContextTotal();
+		const contextTotal = contextSize ?? this.getContextTotal();
 		const currentConfig = config();
 		const outputTokensMax = currentConfig.max_tokens || -1;
 		const contextUsed = promptTokens + cacheTokens + predictedTokens,
@@ -2315,6 +2294,7 @@ class ChatStore {
 			outputTokensMax,
 			hasNextToken: predictedTokens > 0,
 			tokensPerSecond,
+			predictedMs,
 			temperature: currentConfig.temperature ?? 0.8,
 			topP: currentConfig.top_p ?? 0.95,
 			speculative: false,
@@ -2334,10 +2314,7 @@ class ChatStore {
 					prompt_n: message.timings.prompt_n || 0,
 					prompt_ms: message.timings.prompt_ms,
 					predicted_n: message.timings.predicted_n || 0,
-					predicted_per_second:
-						message.timings.predicted_n && message.timings.predicted_ms
-							? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
-							: 0,
+					predicted_ms: message.timings.predicted_ms,
 					cache_n: message.timings.cache_n || 0
 				});
 				if (restoredState) {
diff --git a/tools/ui/src/lib/stores/models.svelte.ts b/tools/ui/src/lib/stores/models.svelte.ts
index 0b4d7b55d939..882fcd9b168a 100644
--- a/tools/ui/src/lib/stores/models.svelte.ts
+++ b/tools/ui/src/lib/stores/models.svelte.ts
@@ -197,6 +197,20 @@ class ModelsStore {
 		return typeof nCtx === 'number' ? nCtx : null;
 	}
 
+	/**
+	 * Get context size valid both in MODEL or ROUTER modes
+	 */
+	get contextSize(): number | null {
+		if (serverStore.isRouterMode) {
+			return this.selectedModelContextSize;
+		}
+
+		return serverStore.contextSize;
+	}
+
+	/**
+	 * Check if props are being fetched for a model
+	 */
 	isModelPropsFetching(modelId: string): boolean {
 		return this.modelPropsFetching.has(modelId);
 	}
@@ -1041,6 +1055,7 @@ export const loadingModelIds = () => modelsStore.loadingModelIds;
 export const propsCacheVersion = () => modelsStore.propsCacheVersion;
 export const singleModelName = () => modelsStore.singleModelName;
 export const selectedModelContextSize = () => modelsStore.selectedModelContextSize;
+export const getContextSize = () => modelsStore.contextSize;
 export const favoriteModelIds = () => modelsStore.favoriteModelIds;
 export const supportsThinking = () => modelsStore.supportsThinking;
 export const checkModelSupportsThinking = (modelId: string) =>
diff --git a/tools/ui/src/lib/stores/notebook.svelte.ts b/tools/ui/src/lib/stores/notebook.svelte.ts
new file mode 100644
index 000000000000..8bec79fcd264
--- /dev/null
+++ b/tools/ui/src/lib/stores/notebook.svelte.ts
@@ -0,0 +1,249 @@
+/**
+ * NotebookStore - Reactive State Store for Notebook Operations
+ *
+ */
+import { CompletionService } from '$lib/services/completion.service';
+import { config } from '$lib/stores/settings.svelte';
+import { tokenize } from '$lib/services/tokenize.service';
+import { STATS_UNITS } from '$lib/constants/processing-info';
+import { getContextSize } from '$lib/stores/models.svelte';
+import { ErrorDialogType } from '$lib/enums';
+import { getETASecs } from '$lib/hooks/use-processing-state.svelte';
+import { chatStore } from '$lib/stores/chat.svelte';
+
+import type {
+	ChatMessageTimings,
+	ChatMessagePromptProgress,
+	ErrorDialogState
+} from '$lib/types/chat';
+import type { ApiProcessingState } from '$lib/types';
+
+export class NotebookStore {
+	content = $state('');
+	isGenerating = $state(false);
+	abortController: AbortController | null = null;
+
+	processingState = $state<ApiProcessingState | null>(null);
+
+	totalTokens = $state(0);
+	generationStartTokens = $state(0);
+	generationEndTokens = $state(0);
+
+	tokenizeTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	error = $state<ErrorDialogState | null>(null);
+
+	previousContent = $state<string | null>(null);
+	undoneContent = $state<string | null>(null);
+
+	async generate(model?: string) {
+		if (this.isGenerating) return;
+
+		this.previousContent = this.content;
+		this.undoneContent = null;
+		this.isGenerating = true;
+		this.processingState = null;
+		this.abortController = new AbortController();
+		this.error = null;
+
+		// Save number of tokens before generation
+		this.generationStartTokens = this.totalTokens;
+
+		try {
+			const currentConfig = config();
+			const callbacks = {
+				onChunk: (chunk: string) => {
+					this.content += chunk;
+				},
+				onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
+					this.updateProcessingStateFromTimings({
+						prompt_n: timings?.prompt_n || 0,
+						prompt_ms: promptProgress?.time_ms ?? timings?.prompt_ms,
+						predicted_n: timings?.predicted_n || 0,
+						predicted_ms: timings?.predicted_ms,
+						cache_n: timings?.cache_n || 0,
+						prompt_progress: promptProgress
+					});
+				},
+				onComplete: () => {
+					this.resetState();
+				},
+				onError: (error: unknown) => {
+					if (error instanceof Error && error.name === 'AbortError') {
+						// aborted by user
+					} else {
+						console.error('Notebook generation error:', error);
+						this.error = {
+							message: error instanceof Error ? error.message : String(error),
+							type: ErrorDialogType.SERVER
+						};
+					}
+					this.resetState();
+				}
+			};
+			await CompletionService.sendCompletion(
+				this.content,
+				callbacks,
+				{
+					...currentConfig,
+					model,
+					timings_per_token: true
+				},
+				this.abortController.signal
+			);
+		} catch (error) {
+			console.error('Notebook generation failed:', error);
+			this.error = {
+				message: error instanceof Error ? error.message : String(error),
+				type: ErrorDialogType.SERVER
+			};
+			this.resetState();
+		}
+		// Save number of tokens after generation
+		this.generationEndTokens = this.totalTokens;
+	}
+
+	dismissError() {
+		this.error = null;
+	}
+
+	updateProcessingStateFromTimings(timingData: {
+		prompt_n: number;
+		prompt_ms?: number;
+		predicted_n: number;
+		predicted_ms?: number;
+		cache_n: number;
+		prompt_progress?: ChatMessagePromptProgress;
+	}): void {
+		this.processingState = chatStore.parseTimingData(timingData, getContextSize());
+		this.totalTokens = this.processingState?.contextUsed ?? 0;
+	}
+
+	undo() {
+		if (this.previousContent !== null) {
+			this.undoneContent = this.content;
+			this.content = this.previousContent;
+			this.previousContent = null;
+			this.totalTokens = this.generationStartTokens;
+		}
+	}
+
+	redo() {
+		if (this.undoneContent !== null) {
+			this.previousContent = this.content;
+			this.content = this.undoneContent;
+			this.undoneContent = null;
+			this.totalTokens = this.generationEndTokens;
+		}
+	}
+
+	resetUndoRedo() {
+		this.previousContent = null;
+		this.undoneContent = null;
+	}
+
+	stop() {
+		if (this.abortController) {
+			this.abortController.abort();
+			this.abortController = null;
+		}
+		this.resetState();
+	}
+
+	resetState() {
+		this.isGenerating = false;
+		if (this.processingState) {
+			this.processingState.status = 'idle';
+		}
+	}
+
+	updateTokenCount(model?: string) {
+		if (this.tokenizeTimeout) {
+			clearTimeout(this.tokenizeTimeout);
+		}
+
+		this.tokenizeTimeout = setTimeout(async () => {
+			if (this.content.length === 0) {
+				this.totalTokens = 0;
+				return;
+			}
+			const tokens = await tokenize(this.content, model);
+			this.totalTokens = tokens.length;
+		}, 500);
+	}
+
+	getPromptProcessingText(): string {
+		const state = this.processingState;
+		let processing_text = 'Processing...';
+
+		if (state?.promptProgress) {
+			const { processed, total, time_ms, cache } = state.promptProgress;
+			const actualProcessed = processed - cache;
+			const actualTotal = total - cache;
+
+			if (actualProcessed < actualTotal && actualProcessed > 0) {
+				const percent = Math.round((actualProcessed / actualTotal) * 100);
+				const eta = getETASecs(actualProcessed, actualTotal, time_ms);
+
+				if (eta !== undefined) {
+					const etaSecs = Math.ceil(eta);
+					processing_text = `Processing ${percent}% (ETA: ${etaSecs}s)`;
+				} else {
+					processing_text = `Processing ${percent}%`;
+				}
+			}
+		}
+
+		return processing_text;
+	}
+
+	getProcessingContextDetail(): string {
+		const state = this.processingState;
+		const contextUsed = state?.contextUsed;
+		const contextTotal = getContextSize();
+
+		if (
+			typeof contextUsed === 'number' &&
+			typeof contextTotal === 'number' &&
+			contextUsed >= 0 &&
+			contextTotal > 0
+		) {
+			const contextPercent = Math.round((contextUsed / contextTotal) * 100);
+			return `Context: ${contextUsed}/${contextTotal} (${contextPercent}%)`;
+		}
+
+		return '';
+	}
+
+	getProcessingDetails(): string[] {
+		const details: string[] = [];
+
+		const state = this.processingState;
+		if (!state) {
+			return [];
+		}
+
+		const contextDetail = this.getProcessingContextDetail();
+
+		if (contextDetail) {
+			details.push(contextDetail);
+		}
+
+		if (state.tokensDecoded > 0) {
+			if (state.outputTokensMax <= 0) {
+				details.push(`Output: ${state.tokensDecoded}/∞`);
+			} else {
+				const outputPercent = Math.round((state.tokensDecoded / state.outputTokensMax) * 100);
+				details.push(`Output: ${state.tokensDecoded}/${state.outputTokensMax} (${outputPercent}%)`);
+			}
+		}
+
+		if (state.tokensDecoded > 0 && state.tokensPerSecond && state.tokensPerSecond > 0) {
+			details.push(`${state.tokensPerSecond.toFixed(1)} ${STATS_UNITS.TOKENS_PER_SECOND}`);
+		}
+
+		return details;
+	}
+}
+
+export const notebookStore = new NotebookStore();
diff --git a/tools/ui/src/lib/types/api.d.ts b/tools/ui/src/lib/types/api.d.ts
index 5421f8b7f35c..28366da15f66 100644
--- a/tools/ui/src/lib/types/api.d.ts
+++ b/tools/ui/src/lib/types/api.d.ts
@@ -301,6 +301,64 @@ export interface ApiChatCompletionRequest {
 	continue_final_message?: boolean;
 }
 
+// Reference: https://github.com/ggml-org/llama.cpp/tree/master/tools/server#post-completion-given-a-prompt-it-returns-the-predicted-completion
+export interface ApiCompletionRequest {
+	prompt: string;
+	stream?: boolean;
+	model?: string;
+	// Configure return
+	return_progress?: boolean;
+	return_tokens?: boolean;
+	timings_per_token?: boolean;
+	post_sampling_probs?: boolean;
+	response_fields?: string[];
+	// Generation parameters
+	temperature?: number;
+	// Sampling parameters
+	dynatemp_range?: number;
+	dynatemp_exponent?: number;
+	top_k?: number;
+	top_p?: number;
+	min_p?: number;
+	// We can use either n_predict or max_tokens
+	max_tokens?: number;
+	n_indent?: number;
+	n_keep?: number;
+	n_cmpl?: number;
+	n_cache_reuse?: number;
+	stop?: string[];
+	typical_p?: number;
+	xtc_probability?: number;
+	xtc_threshold?: number;
+	// Penalty parameters
+	repeat_last_n?: number;
+	repeat_penalty?: number;
+	presence_penalty?: number;
+	frequency_penalty?: number;
+	dry_multiplier?: number;
+	dry_base?: number;
+	dry_allowed_length?: number;
+	dry_penalty_last_n?: number;
+	dry_sequence_breakers?: string[];
+	mirostat?: number;
+	mirostat_tau?: number;
+	mirostat_eta?: number;
+	grammar?: string;
+	json_schema?: string;
+	seed?: number;
+	ignore_eos?: boolean;
+	n_probs?: number;
+	min_keep?: number;
+	t_max_predict_ms?: number;
+	id_slot?: number;
+	cache_prompt?: boolean;
+	// Sampler configuration
+	samplers?: string[];
+	backend_sampling?: boolean;
+	// Custom parameters (JSON string)
+	custom?: Record<string, unknown>;
+}
+
 export interface ApiChatCompletionToolCallFunctionDelta {
 	name?: string;
 	arguments?: string;
@@ -342,6 +400,20 @@ export interface ApiChatCompletionStreamChunk {
 	prompt_progress?: ChatMessagePromptProgress;
 }
 
+export interface ApiCompletionStreamChunk {
+	content: string;
+	stop: boolean;
+	model: string;
+	timings?: {
+		prompt_n?: number;
+		prompt_ms?: number;
+		predicted_n?: number;
+		predicted_ms?: number;
+		cache_n?: number;
+	};
+	prompt_progress?: ChatMessagePromptProgress;
+}
+
 export interface ApiChatCompletionResponse {
 	model?: string;
 	choices: Array<{
@@ -428,6 +500,7 @@ export interface ApiProcessingState {
 	speculative: boolean;
 	hasNextToken: boolean;
 	tokensPerSecond?: number;
+	predictedMs?: number;
 	// Progress information from prompt_progress
 	progressPercent?: number;
 	promptProgress?: ChatMessagePromptProgress;
diff --git a/tools/ui/src/lib/types/settings.d.ts b/tools/ui/src/lib/types/settings.d.ts
index 9b4af4a58f7d..dd4bd00f40fd 100644
--- a/tools/ui/src/lib/types/settings.d.ts
+++ b/tools/ui/src/lib/types/settings.d.ts
@@ -55,6 +55,15 @@ export interface SettingsFieldConfig {
 	options?: Array<{ value: string; label: string; icon?: typeof Icon }>;
 }
 
+export interface CompletionServiceCallbacks {
+	// Callbacks
+	onChunk: (chunk: string) => void;
+	onModel?: (model: string) => void;
+	onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void;
+	onComplete: (response: string, timings?: ChatMessageTimings) => void;
+	onError: (error: Error) => void;
+}
+
 /** Re-exported for backward compatibility. */
 export interface SettingsSection {
 	fields?: SettingsFieldConfig[];
diff --git a/tools/ui/src/routes/+layout.svelte b/tools/ui/src/routes/+layout.svelte
index ba1c78fbb2ec..9c11f52e3e57 100644
--- a/tools/ui/src/routes/+layout.svelte
+++ b/tools/ui/src/routes/+layout.svelte
@@ -34,6 +34,11 @@
 	import { SETTINGS_KEYS } from '$lib/constants';
 
 	let { children } = $props();
+
+	let alwaysShowSidebarOnDesktop = $derived(config().alwaysShowSidebarOnDesktop);
+	let isDesktop = $derived(!isMobile.current);
+	let sidebarOpen = $state(false);
+	let mounted = $state(false);
 	let innerHeight = $state<number | undefined>();
 	let innerWidth = $state(browser ? window.innerWidth : 0);
 
diff --git a/tools/ui/src/routes/notebook/+page.svelte b/tools/ui/src/routes/notebook/+page.svelte
new file mode 100644
index 000000000000..d8417c8acc2e
--- /dev/null
+++ b/tools/ui/src/routes/notebook/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { NotebookScreen } from '$lib/components/app';
+</script>
+
+<svelte:head>
+	<title>Notebook - llama.cpp</title>
+</svelte:head>
+
+<NotebookScreen />