Inital commit

tools/ui/tests/client/README-perf.md

@@ -0,0 +1,58 @@
+# Agentic thread perf harness
+
+Two tiers, both reusing the existing vitest projects (see `vite.config.ts`).
+
+## Tier 1 - `agentic-stream.perf.svelte.test.ts` (project: `client`, real Chromium)
+
+Mounts `ChatMessageAgenticContent` and replays a stream, replacing the message
+object on each chunk exactly as the real pipeline does:
+
+- `chat.svelte.ts` `updateStreamingUI()` runs per SSE chunk
+- `conversations.svelte.ts` `updateMessageAtIndex` does `{ ...old, ...updates }`
+
+That new object identity is the thing under test: it cascades through
+`deriveAgenticSections` (which returns fresh `AgenticSection` objects) into every
+tool-call block in the message, including completed ones.
+
+```
+npx vitest --project=client --run tests/client/agentic-stream.perf.svelte.test.ts
+```
+
+### Reading the output
+
+- `mean` / `p95` / `max` - the synchronous window per token: prop write,
+  `await tick()`, then a forced `offsetHeight` read so style and layout are
+  included rather than deferred.
+- `sync` - sum of those windows. This is the number to optimize.
+- `wall` - the whole run including work `MarkdownContent` defers into its own
+  `requestAnimationFrame`. It carries a ~16.7ms/token idle floor because the
+  harness yields a frame each iteration, so compare `wall` **across fixtures**,
+  never against `sync`.
+
+### The knobs, and what each one discriminates
+
+The point of the harness is the _scaling curve_, not any single number.
+
+| Knob                        | Reads on                                                                                             |
+| --------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `priorToolCalls` (0/1/5/20) | the reactive fan-out. Flat => no fan-out. Linear => confirmed.                                       |
+| `toolResultBytes`           | whole-blob string scans (`extractSearchResults`, `parseToolResultWithImages`, `classifyToolResult`). |
+| `editFileEdits`             | `computeLineDiff`, the O(m\*n) LCS.                                                                  |
+| `openCodeFence`             | `hljs.highlightAuto` on partial code.                                                                |
+
+Deliberately no hard assertions: CI timing is noisy and the value here is the
+before/after delta, not a gate.
+
+### Caveat
+
+This measures one message's subtree. In the real app `ChatMessages.svelte`
+rebuilds its whole `displayMessages` list per token, so multiply by the number
+of rendered messages to get the conversation-level cost.
+
+## Tier 2 - `../unit/agentic-hotpath.bench.ts` (project: `unit`, node)
+
+Per-call costs for the pure functions the curve implicates.
+
+```
+npx vitest bench --project=unit --run tests/unit/agentic-hotpath.bench.ts
+```

tools/ui/tests/client/agentic-stream.perf.svelte.test.ts

@@ -0,0 +1,410 @@
+// Tier 1 perf harness for the agentic thread.
+//
+// Drives ChatMessageAgenticContent the way the real streaming pipeline does:
+// chat.svelte.ts -> conversations.svelte.ts:184 replaces the message object per
+// SSE chunk (`{ ...old, ...updates }`), which changes prop identity and cascades
+// through deriveAgenticSections into every tool-call block in the message.
+//
+// The fixture is parameterized so the *scaling curve* identifies the culprit -
+// a single number would not. See tests/client/README-perf.md.
+//
+// Run: npx vitest --project=client --run tests/client/agentic-stream.perf.svelte.test.ts
+
+import { describe, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import AgenticPerfWrapper from './components/AgenticPerfWrapper.svelte';
+import ChatMessagesPerfWrapper from './components/ChatMessagesPerfWrapper.svelte';
+import { perfState } from './components/agentic-perf-state.svelte';
+import { conversationsStore } from '$lib/stores/conversations.svelte';
+import type { DatabaseMessage } from '$lib/types';
+import { MessageRole } from '$lib/enums';
+
+// --- fixture construction -------------------------------------------------
+
+interface FixtureOpts {
+	/** Completed tool-call sections preceding the streaming text. */
+	priorToolCalls: number;
+	/** Size of each tool result blob. */
+	toolResultBytes: number;
+	/** Number of edit_file calls (each a 400x400-line diff). */
+	editFileEdits: number;
+	/** Leave an unclosed ``` fence at the end of the streamed content. */
+	openCodeFence: boolean;
+	/**
+	 * Emit a blank line every N chunks so the content forms real markdown
+	 * blocks. 0 = one unbroken paragraph, which defeats MarkdownContent's
+	 * stable-block cache entirely (worst case). Typical prose has breaks.
+	 */
+	paragraphEvery: number;
+}
+
+const DEFAULTS: FixtureOpts = {
+	priorToolCalls: 0,
+	toolResultBytes: 1024,
+	editFileEdits: 0,
+	openCodeFence: false,
+	paragraphEvery: 0
+};
+
+function blob(bytes: number, seed: string): string {
+	const line = `${seed} output line with some representative width to it`;
+	const n = Math.max(1, Math.ceil(bytes / (line.length + 1)));
+	const out: string[] = [];
+	for (let i = 0; i < n; i++) out.push(`${line} ${i}`);
+	return out.join('\n');
+}
+
+function diffLines(n: number, seed: string): string {
+	const out: string[] = [];
+	for (let i = 0; i < n; i++) out.push(`${seed} line ${i} const value_${i} = compute(${i});`);
+	return out.join('\n');
+}
+
+let msgSeq = 0;
+
+function baseMessage(overrides: Partial<DatabaseMessage>): DatabaseMessage {
+	return {
+		id: `m${msgSeq++}`,
+		convId: 'perf-conv',
+		type: 'text',
+		timestamp: 0,
+		role: MessageRole.ASSISTANT,
+		content: '',
+		parent: null,
+		children: [],
+		...overrides
+	} as DatabaseMessage;
+}
+
+function buildFixture(opts: FixtureOpts): {
+	message: DatabaseMessage;
+	toolMessages: DatabaseMessage[];
+} {
+	const toolCalls: unknown[] = [];
+	const toolMessages: DatabaseMessage[] = [];
+
+	for (let i = 0; i < opts.priorToolCalls; i++) {
+		const id = `call_${i}`;
+		toolCalls.push({
+			id,
+			type: 'function',
+			function: {
+				name: 'exec_shell_command',
+				arguments: JSON.stringify({ command: `grep -rn "thing_${i}" src/` })
+			}
+		});
+		toolMessages.push(
+			baseMessage({
+				role: MessageRole.TOOL,
+				toolCallId: id,
+				content: `${blob(opts.toolResultBytes, `t${i}`)}\n[exit code: 0]`
+			})
+		);
+	}
+
+	for (let i = 0; i < opts.editFileEdits; i++) {
+		const id = `edit_${i}`;
+		toolCalls.push({
+			id,
+			type: 'function',
+			function: {
+				name: 'edit_file',
+				arguments: JSON.stringify({
+					path: `/src/file_${i}.ts`,
+					edits: [{ old_text: diffLines(400, 'old'), new_text: diffLines(400, 'new') }]
+				})
+			}
+		});
+		toolMessages.push(
+			baseMessage({
+				role: MessageRole.TOOL,
+				toolCallId: id,
+				content: JSON.stringify({ result: 'ok', edits_applied: 1 })
+			})
+		);
+	}
+
+	const message = baseMessage({
+		toolCalls: toolCalls.length > 0 ? JSON.stringify(toolCalls) : undefined,
+		content: ''
+	});
+
+	return { message, toolMessages };
+}
+
+// --- the driver -----------------------------------------------------------
+
+interface Sample {
+	label: string;
+	tokens: number;
+	mean: number;
+	p95: number;
+	max: number;
+	/** Sum of the synchronous per-token windows. */
+	total: number;
+	/** Wall-clock for the whole run incl. deferred rAF work, then settle. */
+	wall: number;
+}
+
+function nextFrame(): Promise<void> {
+	return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+const results: Sample[] = [];
+
+/**
+ * Replays `tokens` streamed chunks, replacing the message object each time
+ * exactly as conversations.svelte.ts:184 does, flushing Svelte and forcing
+ * layout so the measurement includes render + style/layout, not just script.
+ */
+async function measure(label: string, partial: Partial<FixtureOpts>, tokens = 60) {
+	const opts = { ...DEFAULTS, ...partial };
+	const { message, toolMessages } = buildFixture(opts);
+
+	perfState.message = message;
+	perfState.toolMessages = toolMessages;
+	perfState.isStreaming = true;
+
+	// Every wrapper reads the same module state, so a leftover mount from a
+	// previous fixture would re-render on each mutation and fold its cost into
+	// this measurement. Tear down explicitly between fixtures.
+	const { unmount } = render(AgenticPerfWrapper);
+
+	await tick();
+
+	const CHUNK = 'The quick brown fox jumps over the lazy dog. ';
+	let accumulated = opts.openCodeFence ? '```notalanguage\n' : '';
+	const durations: number[] = [];
+
+	const wallStart = performance.now();
+
+	for (let i = 0; i < tokens; i++) {
+		accumulated += CHUNK;
+		if (opts.paragraphEvery > 0 && (i + 1) % opts.paragraphEvery === 0) {
+			accumulated += '\n\n';
+		}
+
+		const t0 = performance.now();
+		// Mirrors updateMessageAtIndex: a brand-new object identity per chunk.
+		perfState.message = { ...perfState.message!, content: accumulated };
+		await tick();
+		void document.body.offsetHeight; // force style + layout
+		durations.push(performance.now() - t0);
+
+		// MarkdownContent coalesces its parse into a rAF, so that work lands
+		// outside the window above. Yield a frame each iteration so it is
+		// captured in `wall` - the gap between `wall` and `total` is the
+		// deferred cost.
+		await nextFrame();
+	}
+
+	// Let any trailing coalesced work drain before stopping the clock.
+	await nextFrame();
+	await nextFrame();
+	const wall = performance.now() - wallStart;
+
+	await unmount();
+
+	durations.sort((a, b) => a - b);
+	const total = durations.reduce((a, b) => a + b, 0);
+
+	results.push({
+		label,
+		tokens,
+		mean: total / durations.length,
+		p95: durations[Math.floor(durations.length * 0.95)],
+		max: durations[durations.length - 1],
+		total,
+		wall
+	});
+}
+
+function report() {
+	const pad = (s: string, n: number) => s.padEnd(n);
+	const num = (n: number) => n.toFixed(2).padStart(8);
+
+	const header = `${pad('fixture', 40)}${pad('tok', 5)}${'mean'.padStart(8)}${'p95'.padStart(8)}${'max'.padStart(8)}${'sync'.padStart(9)}${'wall'.padStart(9)}`;
+	const lines = [
+		'',
+		'=== Tier 1: ms per streamed token (agentic content subtree) ===',
+		'mean/p95/max = synchronous window per token (script + style + layout).',
+		'sync  = sum of those windows.',
+		'wall  = whole run, incl. work MarkdownContent defers into its own rAF.',
+		'        NOTE: wall carries a ~16.7ms/token idle floor from the harness',
+		'        yielding a frame each iteration (60 tokens => ~1000ms floor).',
+		'        Compare wall ACROSS fixtures / against the baseline row,',
+		'        never against sync.',
+		'',
+		header,
+		'-'.repeat(header.length)
+	];
+
+	for (const r of results) {
+		lines.push(
+			`${pad(r.label, 40)}${pad(String(r.tokens), 5)}${num(r.mean)}${num(r.p95)}${num(r.max)}${num(r.total)}${num(r.wall)}`
+		);
+	}
+
+	lines.push('');
+	console.log(lines.join('\n'));
+}
+
+// --- conversation-level driver --------------------------------------------
+// The per-message driver above cannot see the fan-out in ChatMessages: a single
+// token mutation invalidates `displayMessages`, which rebuilds a fresh
+// toolMessages array for EVERY message in the conversation. Drive the real
+// store through the real list component to measure that.
+
+async function measureConversation(
+	label: string,
+	priorMessages: number,
+	tokens = 60,
+	/**
+	 * Give each prior assistant turn a resolved tool call, so the fixture pays
+	 * `hasAgenticContent`'s JSON.parse and the tool-message grouping walk that a
+	 * real agent thread would - plain prose messages skip both.
+	 */
+	agentic = false
+) {
+	const history: DatabaseMessage[] = [];
+	for (let i = 0; i < priorMessages; i++) {
+		const isAssistant = i % 2 !== 0;
+
+		if (isAssistant && agentic) {
+			const id = `prior_call_${i}`;
+			history.push(
+				baseMessage({
+					role: MessageRole.ASSISTANT,
+					content: `Message ${i}`,
+					toolCalls: JSON.stringify([
+						{
+							id,
+							type: 'function',
+							function: {
+								name: 'exec_shell_command',
+								arguments: JSON.stringify({ command: `grep -rn "thing_${i}" src/` })
+							}
+						}
+					])
+				})
+			);
+			history.push(
+				baseMessage({
+					role: MessageRole.TOOL,
+					toolCallId: id,
+					content: `${blob(1024, `r${i}`)}\n[exit code: 0]`
+				})
+			);
+			continue;
+		}
+
+		history.push(
+			baseMessage({
+				role: isAssistant ? MessageRole.ASSISTANT : MessageRole.USER,
+				content: `Message ${i}: ${blob(512, `m${i}`)}`
+			})
+		);
+	}
+
+	const streaming = baseMessage({ role: MessageRole.ASSISTANT, content: '' });
+	history.push(streaming);
+
+	conversationsStore.activeMessages = history;
+
+	const { unmount } = render(ChatMessagesPerfWrapper);
+	await tick();
+
+	const idx = conversationsStore.findMessageIndex(streaming.id);
+	const CHUNK = 'The quick brown fox jumps over the lazy dog. ';
+	let accumulated = '';
+	const durations: number[] = [];
+	const wallStart = performance.now();
+
+	for (let i = 0; i < tokens; i++) {
+		accumulated += CHUNK;
+
+		const t0 = performance.now();
+		// The real path: chat.svelte.ts -> conversations.svelte.ts.
+		conversationsStore.updateMessageAtIndex(idx, { content: accumulated });
+		await tick();
+		void document.body.offsetHeight;
+		durations.push(performance.now() - t0);
+
+		await nextFrame();
+	}
+
+	await nextFrame();
+	await nextFrame();
+	const wall = performance.now() - wallStart;
+
+	await unmount();
+	conversationsStore.activeMessages = [];
+
+	durations.sort((a, b) => a - b);
+	const total = durations.reduce((a, b) => a + b, 0);
+
+	results.push({
+		label,
+		tokens,
+		mean: total / durations.length,
+		p95: durations[Math.floor(durations.length * 0.95)],
+		max: durations[durations.length - 1],
+		total,
+		wall
+	});
+}
+
+// --- the matrix -----------------------------------------------------------
+// Sequential, in one test, so the table prints together and the samples do not
+// interleave with other suites competing for the main thread.
+
+describe('agentic streaming perf', () => {
+	it('scales', { timeout: 600_000 }, async () => {
+		// Baseline: plain text streaming, nothing agentic.
+		await measure('baseline: no tool calls', {});
+
+		// Knob: priorToolCalls. Flat => no fan-out. Linear => fan-out confirmed.
+		await measure('priorToolCalls=1  (1KB results)', { priorToolCalls: 1 });
+		await measure('priorToolCalls=5  (1KB results)', { priorToolCalls: 5 });
+		await measure('priorToolCalls=20 (1KB results)', { priorToolCalls: 20 });
+
+		// Knob: toolResultBytes, at fixed section count.
+		await measure('5 calls x 200KB results', {
+			priorToolCalls: 5,
+			toolResultBytes: 200 * 1024
+		});
+
+		// Knob: editFileEdits (computeLineDiff, 400x400 LCS).
+		await measure('3 edit_file calls (400x400 diff)', { editFileEdits: 3 });
+
+		// Knob: openCodeFence (hljs highlightAuto on partial code).
+		await measure('open code fence, unknown language', { openCodeFence: true });
+
+		// Conversation level: does streaming one message cost more as the
+		// conversation grows? Flat => no fan-out. Linear => confirmed.
+		await measureConversation('convo: 1 prior message', 1);
+		await measureConversation('convo: 10 prior messages', 10);
+		await measureConversation('convo: 40 prior messages', 40);
+
+		// Same, but each prior assistant turn carries a resolved tool call.
+		await measureConversation('convo: 10 prior, agentic', 10, 60, true);
+		await measureConversation('convo: 40 prior, agentic', 40, 60, true);
+
+		// Message length: MarkdownContent re-parses the whole accumulated string
+		// each frame, so per-token cost should climb as the response grows.
+		// A rising mean across these three rows means O(n^2) over the stream.
+		// One unbroken paragraph: worst case, stable-block cache never applies.
+		await measure('len 60tok  1-para (worst case)', {}, 60);
+		await measure('len 250tok 1-para (worst case)', {}, 250);
+		await measure('len 600tok 1-para (worst case)', {}, 600);
+
+		// Same lengths, broken into paragraphs every 8 chunks: the typical shape,
+		// where only the trailing paragraph should be unstable.
+		await measure('len 60tok  paras (typical)', { paragraphEvery: 8 }, 60);
+		await measure('len 250tok paras (typical)', { paragraphEvery: 8 }, 250);
+		await measure('len 600tok paras (typical)', { paragraphEvery: 8 }, 600);
+
+		report();
+	});
+});

tools/ui/tests/client/apikey-splash.svelte.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { validateApiKey } from '$lib/utils/api-key-validation';
+import { settingsStore } from '$lib/stores/settings.svelte';
+import { CONFIG_LOCALSTORAGE_KEY } from '$lib/constants/storage';
+
+function fakeFetch(status: number, capture: { auth?: string | null } = {}) {
+	return (async (_url: RequestInfo | URL, init?: RequestInit) => {
+		capture.auth = (init?.headers as Record<string, string>)?.['Authorization'] ?? null;
+		return new Response(status === 200 ? '{}' : 'Unauthorized', { status });
+	}) as typeof globalThis.fetch;
+}
+
+const is401 = (err: unknown) =>
+	typeof err === 'object' && err !== null && 'status' in err && err.status === 401;
+
+describe('api key validation surfaces the splash', () => {
+	beforeEach(() => {
+		localStorage.removeItem(CONFIG_LOCALSTORAGE_KEY);
+		settingsStore.initialize();
+	});
+
+	it('keyed server, no stored key: throws 401 so the splash shows (onboarding)', async () => {
+		await expect(validateApiKey(fakeFetch(401))).rejects.toSatisfy(is401);
+	});
+
+	it('keyed server, wrong stored key: throws 401 so the splash shows', async () => {
+		settingsStore.updateConfig('apiKey', 'wrong-key');
+		await expect(validateApiKey(fakeFetch(401))).rejects.toSatisfy(is401);
+	});
+
+	it('open server, no stored key: passes silently', async () => {
+		await expect(validateApiKey(fakeFetch(200))).resolves.toBeUndefined();
+	});
+
+	it('valid stored key: passes and sends the bearer header', async () => {
+		settingsStore.updateConfig('apiKey', 'sk-good');
+		const capture: { auth?: string | null } = {};
+		await expect(validateApiKey(fakeFetch(200, capture))).resolves.toBeUndefined();
+		expect(capture.auth).toBe('Bearer sk-good');
+	});
+});

tools/ui/tests/client/cap-img-size.svelte.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { capImageDataURLSize } from '$lib/utils/cap-img-size';
+import { getJpegOrientationFromDataURL } from '$lib/utils/jpeg-orientation';
+
+// Real 64x32 jpegs generated with Pillow, quality 90. The upright picture is
+// four solid quadrants: top left red, top right green, bottom left blue,
+// bottom right yellow. For each exif value the stored pixels are inverse
+// transposed so a conforming decoder shows the upright picture, exactly like
+// a rotated smartphone photo.
+const EXIF1 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UwooooA9uooor4I/wCcwKKKKAPhSiiiv+gM/qgKKKKAP3Vooor/AJdz+lQooooA/9k=`;
+const EXIF3 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAMAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD7Nooor/Mo/XQooooA/Cqiiiv+og/moKKKKAPuuiiiv+fw/lcKKKKAPEaKKK+9P+jMKKKKAP/Z`;
+const EXIF5 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAUAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UzwKiiiv9xj/HQ99ooor/Dk/wBizwKiiiv9xj/HQ+66KKK/5/D+Vz7qooor+ej/AE9PhWiiiv6FP8wj7qooor+ej/T0/9k=`;
+const EXIF6 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDCooor+Tz+Hz7qooor+ej/AE9PhWiiiv6FP8wj7qooor+ej/T0/Keiiiv7CP72PAqKKK/3GP8AHQ99ooor/Dk/2LPAqKKK/wBxj/HQ/9k=`;
+const EXIF8 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAgAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD896KKK/1TPhz32iiiv8OT/Ys8Cooor/cY/wAdD32iiiv8OT/Ys/Viiiiv49P4JPhWiiiv6FP8wj7qooor+ej/AE9PhWiiiv6FP8wj/9k=`;
+const NOEXIF = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UwooooA9uooor4I/wCcwKKKKAPhSiiiv+gM/qgKKKKAP3Vooor/AJdz+lQooooA/9k=`;
+
+const RED: Rgb = [255, 0, 0];
+const GREEN: Rgb = [0, 200, 0];
+const BLUE: Rgb = [0, 0, 255];
+const YELLOW: Rgb = [255, 220, 0];
+
+// Wide tolerance per channel, jpeg compression shifts solid colors a bit
+const COLOR_TOLERANCE = 70;
+
+// 0.000512 megapixels is 512 pixels, a quarter of the area of the 2048 pixel fixtures
+const QUARTER_AREA_MEGAPIXELS = 0.000512;
+
+type Rgb = [number, number, number];
+
+function loadImage(dataUrl: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = () => reject(new Error('Failed to decode image.'));
+		img.src = dataUrl;
+	});
+}
+
+// Decodes a data URL and samples the center of each quadrant of the picture
+async function quadrantColors(dataUrl: string): Promise<Rgb[]> {
+	const img = await loadImage(dataUrl);
+	const canvas = document.createElement('canvas');
+	canvas.width = img.naturalWidth;
+	canvas.height = img.naturalHeight;
+	const ctx = canvas.getContext('2d')!;
+	ctx.drawImage(img, 0, 0);
+	const points = [
+		[0.25, 0.25],
+		[0.75, 0.25],
+		[0.25, 0.75],
+		[0.75, 0.75]
+	];
+	return points.map(([fx, fy]) => {
+		const d = ctx.getImageData(
+			Math.floor(canvas.width * fx),
+			Math.floor(canvas.height * fy),
+			1,
+			1
+		).data;
+		return [d[0], d[1], d[2]];
+	});
+}
+
+function expectUpright(colors: Rgb[]) {
+	const targets = [RED, GREEN, BLUE, YELLOW];
+	for (let i = 0; i < 4; i++) {
+		for (let c = 0; c < 3; c++) {
+			expect(Math.abs(colors[i][c] - targets[i][c])).toBeLessThan(COLOR_TOLERANCE);
+		}
+	}
+}
+
+describe('capImageDataURLSize orientation and capping', () => {
+	it('passes upright jpegs through untouched when capping is disabled', async () => {
+		expect(await capImageDataURLSize(EXIF1, 0)).toBe(EXIF1);
+		expect(await capImageDataURLSize(NOEXIF, 0)).toBe(NOEXIF);
+	});
+
+	it('passes upright jpegs through untouched when under the cap threshold', async () => {
+		expect(await capImageDataURLSize(EXIF1, 1)).toBe(EXIF1);
+	});
+
+	it.each([
+		['orientation 3', EXIF3],
+		['orientation 5', EXIF5],
+		['orientation 6', EXIF6],
+		['orientation 8', EXIF8]
+	])('bakes %s into upright pixels without capping', async (_label, fixture) => {
+		const result = await capImageDataURLSize(fixture, 0);
+
+		expect(result).not.toBe(fixture);
+
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(64);
+		expect(img.naturalHeight).toBe(32);
+		expectUpright(await quadrantColors(result));
+
+		// The re-encoded jpeg carries no orientation tag anymore
+		expect(getJpegOrientationFromDataURL(result)).toBe(1);
+	});
+
+	it('caps and bakes the orientation in a single output', async () => {
+		const result = await capImageDataURLSize(EXIF6, QUARTER_AREA_MEGAPIXELS);
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(32);
+		expect(img.naturalHeight).toBe(16);
+		expectUpright(await quadrantColors(result));
+		expect(getJpegOrientationFromDataURL(result)).toBe(1);
+	});
+
+	it('caps upright jpegs without disturbing the picture', async () => {
+		const result = await capImageDataURLSize(EXIF1, QUARTER_AREA_MEGAPIXELS);
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(32);
+		expect(img.naturalHeight).toBe(16);
+		expectUpright(await quadrantColors(result));
+	});
+});

tools/ui/tests/client/collapsible-lazy-body.svelte.test.ts

@@ -0,0 +1,37 @@
+// Guards the lazy-body behaviour of the shared collapsible wrappers.
+//
+// bits-ui's Collapsible.Content renders its children unconditionally and only
+// sets `hidden`, so before this was gated a collapsed tool result kept its whole
+// body in the DOM and re-rendered it on every streamed token (measured at
+// ~41ms/section/token for a 200KB result). These tests pin the fix: closed means
+// not rendered, and opening still mounts the body.
+
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import CollapsibleLazyBodyHarness from './components/CollapsibleLazyBodyHarness.svelte';
+
+const MARKER = 'collapsible-body-marker';
+
+describe('collapsible wrappers render their body lazily', () => {
+	for (const variant of ['content', 'terminal'] as const) {
+		it(`${variant}: body is absent while closed and present once open`, async () => {
+			const screen = render(CollapsibleLazyBodyHarness, { variant, open: false });
+			await tick();
+
+			expect(document.body.textContent).not.toContain(MARKER);
+
+			await screen.rerender({ variant, open: true });
+			await tick();
+
+			expect(document.body.textContent).toContain(MARKER);
+
+			// And it unmounts again on close, so a collapsed block stops costing
+			// anything during streaming.
+			await screen.rerender({ variant, open: false });
+			await tick();
+
+			expect(document.body.textContent).not.toContain(MARKER);
+		});
+	}
+});

tools/ui/tests/client/components/AgenticPerfWrapper.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import ChatMessageAgenticContent from '$lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte';
+	import { perfState } from './agentic-perf-state.svelte';
+</script>
+
+<Tooltip.Provider>
+	{#if perfState.message}
+		<ChatMessageAgenticContent
+			message={perfState.message}
+			toolMessages={perfState.toolMessages}
+			isStreaming={perfState.isStreaming}
+			isLastAssistantMessage
+		/>
+	{/if}
+</Tooltip.Provider>

tools/ui/tests/client/components/ChatMessagesPerfWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	// Mounts the real ChatMessages list against the real conversations store, so
+	// the harness exercises `displayMessages` (which rebuilds every message's
+	// toolMessages array) rather than a single message subtree.
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import ChatMessages from '$lib/components/app/chat/ChatMessages/ChatMessages.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+</script>
+
+<Tooltip.Provider>
+	<ChatMessages messages={conversationsStore.activeMessages} />
+</Tooltip.Provider>

tools/ui/tests/client/components/CollapsibleLazyBodyHarness.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import CollapsibleContentBlock from '$lib/components/app/content/CollapsibleContentBlock.svelte';
+	import CollapsibleTerminalBlock from '$lib/components/app/content/CollapsibleTerminalBlock.svelte';
+
+	interface Props {
+		variant: 'content' | 'terminal';
+		open: boolean;
+	}
+
+	let { variant, open }: Props = $props();
+</script>
+
+{#if variant === 'content'}
+	<CollapsibleContentBlock {open} title="Block">
+		<span>collapsible-body-marker</span>
+	</CollapsibleContentBlock>
+{:else}
+	<CollapsibleTerminalBlock {open} title="Block">
+		<span>collapsible-body-marker</span>
+	</CollapsibleTerminalBlock>
+{/if}

tools/ui/tests/client/components/McpServerFormWrapper.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import McpServerForm from '$lib/components/app/mcp/McpServerForm.svelte';
+
+	interface Props {
+		headers?: string;
+	}
+
+	let { headers = '' }: Props = $props();
+
+	let headersState = $state(untrack(() => headers));
+	let lastCapturedHeaders = $state(untrack(() => headers));
+
+	$effect(() => {
+		if (headers !== lastCapturedHeaders) {
+			headersState = headers;
+			lastCapturedHeaders = headers;
+		}
+	});
+</script>
+
+<!--
+	Drives McpServerForm with a controlled `headers` string and exposes the
+	latest captured value through `data-captured-headers` so the client test
+	can read it back without a custom binding API.
+-->
+<McpServerForm
+	url="https://example.test/mcp"
+	headers={headersState}
+	onUrlChange={() => {}}
+	onHeadersChange={(value) => {
+		headersState = value;
+	}}
+	id="mcp-server-form-test"
+/>
+
+<div data-testid="captured-headers" data-captured-headers={headersState} hidden></div>

tools/ui/tests/client/components/TestWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import Page from '../../../src/routes/(chat)/+page.svelte';
+</script>
+
+<!--
+	Test wrapper that provides necessary context providers for component testing.
+	This mirrors the providers from +layout.svelte.
+-->
+<Tooltip.Provider>
+	<Page />
+</Tooltip.Provider>

tools/ui/tests/client/components/agentic-perf-state.svelte.ts

@@ -0,0 +1,17 @@
+// Shared reactive fixture state for the Tier 1 perf harness.
+//
+// The wrapper component reads this module directly rather than taking props,
+// so the driver can mutate it without depending on how the test renderer
+// forwards props.
+
+import type { DatabaseMessage } from '$lib/types';
+
+export const perfState = $state<{
+	message: DatabaseMessage | null;
+	toolMessages: DatabaseMessage[];
+	isStreaming: boolean;
+}>({
+	message: null,
+	toolMessages: [],
+	isStreaming: true
+});

tools/ui/tests/client/conversation-import-db.svelte.test.ts

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { DatabaseService } from '$lib/services/database.service';
+import { MessageRole, MessageType } from '$lib/enums';
+import type { ExportedConversation } from '$lib/types/database';
+
+function makeSession(id: string): ExportedConversation {
+	return {
+		conv: { id, currNode: `${id}-msg`, lastModified: 0, name: `Chat ${id}` },
+		messages: [
+			{
+				id: `${id}-msg`,
+				convId: id,
+				type: MessageType.TEXT,
+				timestamp: 0,
+				role: MessageRole.USER,
+				content: `hello from ${id}`,
+				parent: null,
+				children: []
+			}
+		]
+	} as unknown as ExportedConversation;
+}
+
+afterEach(async () => {
+	const conversations = await DatabaseService.getAllConversations();
+	await DatabaseService.bulkDeleteConversations(conversations.map((conv) => conv.id));
+});
+
+/**
+ * An import leaves a conversation already in the database untouched, so the
+ * caller needs to know what was written to report it instead of echoing the
+ * selection back at the user.
+ */
+describe('DatabaseService.importConversations', () => {
+	it('reports the conversations it wrote', async () => {
+		const { imported, skipped } = await DatabaseService.importConversations([
+			makeSession('a'),
+			makeSession('b')
+		]);
+
+		expect(imported.map((conv) => conv.id)).toEqual(['a', 'b']);
+		expect(skipped).toEqual([]);
+		expect(await DatabaseService.getConversationMessages('a')).toHaveLength(1);
+	});
+
+	it('reports an existing conversation as skipped and leaves it untouched', async () => {
+		await DatabaseService.importConversations([makeSession('a')]);
+		await DatabaseService.updateConversation('a', { name: 'Renamed locally' });
+
+		const { imported, skipped } = await DatabaseService.importConversations([makeSession('a')]);
+
+		expect(imported).toEqual([]);
+		expect(skipped.map((conv) => conv.id)).toEqual(['a']);
+		expect((await DatabaseService.getConversation('a'))?.name).toBe('Renamed locally');
+	});
+
+	it('imports the new conversations of a partially known selection', async () => {
+		await DatabaseService.importConversations([makeSession('a')]);
+
+		const { imported, skipped } = await DatabaseService.importConversations([
+			makeSession('a'),
+			makeSession('b')
+		]);
+
+		expect(imported.map((conv) => conv.id)).toEqual(['b']);
+		expect(skipped.map((conv) => conv.id)).toEqual(['a']);
+	});
+});

tools/ui/tests/client/mcp-display-name.svelte.test.ts

@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { McpServerForm } from '$lib/components/app/mcp';
+import { mcpStore } from '$lib/stores/mcp.svelte';
+import { settingsStore } from '$lib/stores/settings.svelte';
+
+describe('mcp server display name', () => {
+	beforeEach(() => {
+		settingsStore.updateConfig('mcpServers', '[]');
+	});
+
+	it('custom display name wins over the url fallback', () => {
+		const server = mcpStore.addServer({
+			enabled: false,
+			url: 'https://mcp.example.com/a',
+			displayName: 'My Tools'
+		});
+		expect(mcpStore.getServerLabel(server)).toBe('My Tools');
+	});
+
+	it('without a custom name the url is the label', () => {
+		const server = mcpStore.addServer({ enabled: false, url: 'https://mcp.example.com/a' });
+		expect(mcpStore.getServerLabel(server)).toBe('https://mcp.example.com/a');
+	});
+
+	it('identical labels get positional suffixes', () => {
+		const a = mcpStore.addServer({
+			enabled: false,
+			url: 'https://mcp.example.com/a',
+			displayName: 'GitHub'
+		});
+		const b = mcpStore.addServer({
+			enabled: false,
+			url: 'https://mcp.example.com/b',
+			displayName: 'GitHub'
+		});
+		expect(mcpStore.getServerLabel(a)).toBe('GitHub (1)');
+		expect(mcpStore.getServerLabel(b)).toBe('GitHub (2)');
+	});
+
+	it('renaming one twin dissolves the suffixes', () => {
+		const a = mcpStore.addServer({
+			enabled: false,
+			url: 'https://mcp.example.com/a',
+			displayName: 'GitHub'
+		});
+		const b = mcpStore.addServer({
+			enabled: false,
+			url: 'https://mcp.example.com/b',
+			displayName: 'GitHub'
+		});
+		mcpStore.updateServer(b.id, { displayName: 'GitHub Work' });
+		expect(mcpStore.getServerLabel(a)).toBe('GitHub');
+		expect(mcpStore.getServerLabel(mcpStore.getServerById(b.id)!)).toBe('GitHub Work');
+	});
+
+	it('the form exposes an editable display name field', async () => {
+		let captured = '';
+		const screen = await render(McpServerForm, {
+			url: 'https://mcp.example.com/a',
+			headers: '',
+			name: '',
+			onUrlChange: () => {},
+			onHeadersChange: () => {},
+			onNameChange: (v: string) => (captured = v)
+		});
+
+		const input = screen.getByLabelText('Display name');
+		await expect.element(input).toBeVisible();
+		await input.fill('My Custom Server');
+		expect(captured).toBe('My Custom Server');
+	});
+});

tools/ui/tests/client/mcp-server-form.svelte.test.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import McpServerFormWrapper from './components/McpServerFormWrapper.svelte';
+
+const AUTHORIZATION_HEADER = 'Authorization';
+const BEARER_PREFIX = 'Bearer ';
+const BEARER_PLACEHOLDER = 'Paste token here';
+
+/**
+ * Client-side tests for the McpServerForm bearer UI.
+ *
+ * The dedicated UI only "owns" Authorization headers that already carry a
+ * Bearer scheme (heuristic check on the value). Other Authorization values
+ * stay in the KV section so the user can still edit them verbatim. Storage
+ * always goes through the same custom-headers slot, so a round-trip via this
+ * UI produces exactly one `Authorization: Bearer <token>` entry.
+ *
+ * Equivalent parser coverage lives in `tests/unit/headers.test.ts`.
+ */
+describe('McpServerForm - Authorization / bearer UI', () => {
+	function bearerInput(screen: Awaited<ReturnType<typeof render>>) {
+		return screen.locator.getByPlaceholder(BEARER_PLACEHOLDER);
+	}
+
+	function capturedHeaders(screen: Awaited<ReturnType<typeof render>>) {
+		return screen.getByTestId('captured-headers');
+	}
+
+	it('mounts with the bearer input hidden when no auth header is present', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await expect.element(screen.getByRole('textbox', { name: /server url/i })).toBeVisible();
+
+		await expect.element(bearerInput(screen)).not.toBeInTheDocument();
+	});
+
+	it('toggling Authorization shows the bearer input', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect.element(bearerInput(screen)).toBeVisible();
+	});
+
+	it('typing a token writes the Authorization row with the Bearer prefix prepended', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		const token = 'super-secret';
+		await bearerInput(screen).fill(token);
+
+		const expected = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}${token}` });
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', expected);
+	});
+
+	it('pre-existing Bearer header pre-fills the bearer input with the token stripped', async () => {
+		const existing = JSON.stringify({
+			'X-Trace-Id': 'abc',
+			[AUTHORIZATION_HEADER]: `${BEARER_PREFIX}preexisting`
+		});
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await expect.element(bearerInput(screen)).toBeVisible();
+		await expect.element(bearerInput(screen)).toHaveValue('preexisting');
+	});
+
+	it('non-Bearer Authorization is ignored by the dedicated UI and stays in the KV section', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic czNjcjpwYXNz' });
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await expect.element(bearerInput(screen)).not.toBeInTheDocument();
+
+		const headerKeyInput = screen.getByPlaceholder('Header name');
+		await expect.element(headerKeyInput).toBeVisible();
+	});
+
+	it('engaging the token UI replaces a non-Bearer Authorization with the Bearer scheme', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic old' });
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+		await bearerInput(screen).fill('new');
+
+		const expected = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}new` });
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', expected);
+	});
+
+	it('toggling Authorization off with no token drops the Bearer row but keeps non-Bearer schemes', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect.element(capturedHeaders(screen)).toHaveAttribute('data-captured-headers', '');
+	});
+
+	it('toggling Authorization off when no Bearer row is present leaves headers untouched', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic czNjcjpwYXNz' });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', existing);
+	});
+
+	it('clearing the bearer input drops the Authorization row', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await bearerInput(screen).fill('');
+
+		await expect.element(capturedHeaders(screen)).toHaveAttribute('data-captured-headers', '');
+	});
+
+	it('does not surface Bearer Authorization in the KV section even when pre-existing', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		const headerKeyInput = screen.getByPlaceholder('Header name');
+		await expect.element(headerKeyInput).not.toBeInTheDocument();
+	});
+});

tools/ui/tests/client/page.svelte.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import TestWrapper from './components/TestWrapper.svelte';
+
+describe('/+page.svelte', () => {
+	it('should render page without throwing', async () => {
+		// Basic smoke test - page should render without throwing errors.
+		// API calls are mocked in vitest-setup-client.ts.
+		await render(TestWrapper);
+		expect(true).toBe(true);
+	});
+});

tools/ui/tests/client/sandbox.service.svelte.test.ts

@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { SandboxService } from '$lib/services/sandbox.service';
+import { SANDBOX_TOOL_NAME } from '$lib/constants';
+
+const run = (code: string, timeoutMs?: number) =>
+	SandboxService.executeTool(SANDBOX_TOOL_NAME, {
+		code,
+		...(timeoutMs !== undefined ? { timeout_ms: timeoutMs } : {})
+	});
+
+describe('sandbox service', () => {
+	beforeEach(async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.config = {
+			...settingsStore.config,
+			symbolicMathEnabled: true
+		};
+	});
+
+	it('executes plain JavaScript', async () => {
+		const reply = await run('return 1 + 1;');
+		expect(reply.isError).toBe(false);
+		expect(reply.content).toContain('=> 2');
+	});
+
+	it('exposes nerdamer for symbolic computation', async () => {
+		const reply = await run("return nerdamer.diff('sin(x)/x', 'x').toString();");
+		expect(reply.isError).toBe(false);
+		expect(reply.content).toContain('cos(x)');
+	});
+
+	it('computes exact rational arithmetic', async () => {
+		const reply = await run("return nerdamer('1/3 + 1/6').toString();");
+		expect(reply.isError).toBe(false);
+		expect(reply.content).toContain('=> 1/2');
+	});
+
+	it('proves a polynomial identity symbolically', async () => {
+		const reply = await run(
+			"return nerdamer('expand((1+x*y)^3 - (1 + 3*x*y + 3*x^2*y^2 + x^3*y^3))').toString();"
+		);
+		expect(reply.isError).toBe(false);
+		expect(reply.content).toContain('=> 0');
+	});
+
+	it('blocks network egress in the worker via CSP', async () => {
+		const reply = await run(
+			"try { await fetch('https://example.com/'); return 'leaked'; } catch { return 'blocked'; }"
+		);
+		expect(reply.isError).toBe(false);
+		expect(reply.content).toContain('=> blocked');
+	});
+
+	it('enforces the timeout on runaway code', async () => {
+		const reply = await run('while (true) {}', 500);
+		expect(reply.isError).toBe(true);
+		expect(reply.content).toContain('timed out');
+	});
+});

tools/ui/tests/client/settings-registry-invariants.svelte.test.ts

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { settingsStore, config } from '$lib/stores/settings.svelte';
+import { serverStore } from '$lib/stores/server.svelte';
+import { ParameterSyncService } from '$lib/services/parameter-sync.service';
+import { SETTING_CONFIG_DEFAULT } from '$lib/constants/settings-registry';
+import { CONFIG_LOCALSTORAGE_KEY } from '$lib/constants/storage';
+import type { SettingsConfigType } from '$lib/types';
+
+type Primitive = string | number | boolean;
+
+const KEYS = Object.keys(SETTING_CONFIG_DEFAULT).filter(
+	(k) => ['string', 'number', 'boolean'].includes(typeof SETTING_CONFIG_DEFAULT[k]) && k !== 'theme'
+);
+
+function divergent(key: string, base: Primitive): Primitive {
+	if (typeof base === 'boolean') return !base;
+	if (typeof base === 'number') return base + 7;
+	return `user-${key}`;
+}
+
+function baselineFor(key: string, base: Primitive): Primitive {
+	if (typeof base === 'boolean') return !base;
+	if (typeof base === 'number') return base + 42;
+	return `admin-${key}`;
+}
+
+function mockProps(uiSettings: Record<string, Primitive>) {
+	Object.defineProperty(serverStore, 'props', {
+		configurable: true,
+		get: () =>
+			({
+				default_generation_settings: { params: { temperature: 0.8 } },
+				ui_settings: uiSettings
+			}) as unknown as typeof serverStore.props
+	});
+}
+
+const setUser = (key: string, value: Primitive) =>
+	settingsStore.updateConfig(key as keyof SettingsConfigType, value as never);
+
+const current = (key: string) => (config() as Record<string, unknown>)[key];
+
+describe('registry-wide invariants', () => {
+	beforeEach(() => {
+		localStorage.removeItem(CONFIG_LOCALSTORAGE_KEY);
+	});
+
+	it('I1: no load ever modifies a stored user value, for any key of any type', () => {
+		settingsStore.initialize();
+		const userValues: Record<string, Primitive> = {};
+		for (const key of KEYS) {
+			userValues[key] = divergent(key, SETTING_CONFIG_DEFAULT[key] as Primitive);
+			setUser(key, userValues[key]);
+		}
+
+		// simulated F5 + adverse admin baseline on every key, synced twice
+		settingsStore.initialize();
+		const adverse: Record<string, Primitive> = {};
+		for (const key of KEYS)
+			adverse[key] = baselineFor(key, SETTING_CONFIG_DEFAULT[key] as Primitive);
+		mockProps(adverse);
+		settingsStore.syncWithServerDefaults();
+		settingsStore.syncWithServerDefaults();
+
+		for (const key of KEYS) {
+			expect(current(key), key).toBe(userValues[key]);
+		}
+	});
+
+	it('first visit: the baseline applies for every key, false and 0 included', () => {
+		settingsStore.initialize();
+		const baseline: Record<string, Primitive> = {};
+		for (const key of KEYS)
+			baseline[key] = baselineFor(key, SETTING_CONFIG_DEFAULT[key] as Primitive);
+		mockProps(baseline);
+
+		settingsStore.syncWithServerDefaults();
+
+		for (const key of KEYS) {
+			if (ParameterSyncService.canSyncParameter(key)) continue;
+			expect(current(key), key).toBe(baseline[key]);
+		}
+	});
+
+	it('I3: Reset returns every key to baseline when defined, factory default otherwise', () => {
+		settingsStore.initialize();
+		for (const key of KEYS) setUser(key, divergent(key, SETTING_CONFIG_DEFAULT[key] as Primitive));
+
+		const baseline: Record<string, Primitive> = {};
+		KEYS.filter((_, i) => i % 2 === 0).forEach((key) => {
+			baseline[key] = baselineFor(key, SETTING_CONFIG_DEFAULT[key] as Primitive);
+		});
+		mockProps(baseline);
+
+		settingsStore.forceSyncWithServerDefaults();
+
+		for (const key of KEYS) {
+			if (key in baseline) {
+				expect(current(key), key).toBe(baseline[key]);
+			} else if (ParameterSyncService.canSyncParameter(key)) {
+				expect(current(key), key).toBe('');
+			} else {
+				expect(current(key), key).toBe(SETTING_CONFIG_DEFAULT[key]);
+			}
+		}
+	});
+});

tools/ui/tests/client/ui-settings-sync.svelte.test.ts

@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { settingsStore, config } from '$lib/stores/settings.svelte';
+import { serverStore } from '$lib/stores/server.svelte';
+import { CONFIG_LOCALSTORAGE_KEY } from '$lib/constants/storage';
+
+function mockProps(uiSettings: Record<string, string | number | boolean>) {
+	Object.defineProperty(serverStore, 'props', {
+		configurable: true,
+		get: () =>
+			({
+				default_generation_settings: { params: { temperature: 0.8 } },
+				ui_settings: uiSettings
+			}) as unknown as typeof serverStore.props
+	});
+}
+
+describe('server ui_settings application semantics', () => {
+	beforeEach(() => {
+		localStorage.removeItem(CONFIG_LOCALSTORAGE_KEY);
+	});
+
+	it('applies the admin defaults once for a new user', () => {
+		settingsStore.initialize();
+		mockProps({ theme: 'dark', apiKey: '' });
+
+		settingsStore.syncWithServerDefaults();
+
+		expect(config().theme).toBe('dark');
+	});
+
+	it('never reapplies on later loads: the user config diverges freely', () => {
+		settingsStore.initialize();
+		settingsStore.updateConfig('theme', 'light');
+		settingsStore.updateConfig('apiKey', 'sk-user-key');
+
+		// simulated F5: config now exists in localStorage
+		settingsStore.initialize();
+		mockProps({ theme: 'dark', apiKey: '' });
+
+		settingsStore.syncWithServerDefaults();
+		settingsStore.syncWithServerDefaults();
+
+		expect(config().theme).toBe('light');
+		expect(config().apiKey).toBe('sk-user-key');
+		const stored = JSON.parse(localStorage.getItem(CONFIG_LOCALSTORAGE_KEY) ?? '{}');
+		expect(stored.apiKey).toBe('sk-user-key');
+	});
+
+	it('Reset to Default reapplies the full baseline, api key included', () => {
+		settingsStore.initialize();
+		settingsStore.updateConfig('theme', 'light');
+		settingsStore.updateConfig('apiKey', 'sk-user-key');
+		mockProps({ theme: 'dark', apiKey: '' });
+
+		settingsStore.forceSyncWithServerDefaults();
+
+		expect(config().theme).toBe('dark');
+		expect(config().apiKey).toBe('');
+	});
+});
+
+describe('syncable scope (spec section 4)', () => {
+	it('sampling params keep their live server twin, ui settings carry none', async () => {
+		const { ParameterSyncService } = await import('$lib/services/parameter-sync.service');
+
+		expect(ParameterSyncService.canSyncParameter('temperature')).toBe(true);
+		expect(ParameterSyncService.canSyncParameter('samplers')).toBe(true);
+		expect(ParameterSyncService.canSyncParameter('theme')).toBe(false);
+		expect(ParameterSyncService.canSyncParameter('systemMessage')).toBe(false);
+		expect(ParameterSyncService.canSyncParameter('apiKey')).toBe(false);
+		expect(ParameterSyncService.canSyncParameter('customCss')).toBe(false);
+	});
+});

tools/ui/tests/client/update-message-in-place.svelte.test.ts

@@ -0,0 +1,64 @@
+// Pins the contract that makes streaming cheap: updateMessageAtIndex mutates the
+// existing message object instead of replacing it.
+//
+// Replacing it (`{ ...old, ...updates }`) changes the array slot, which
+// invalidates every consumer that merely walks the list - ChatMessages'
+// `displayMessages` rebuilds entries for EVERY message in the conversation. That
+// made per-token cost scale with conversation length (1.26ms at 1 prior message
+// -> 3.07ms at 40). Mutating in place keeps it flat.
+
+import { describe, it, expect } from 'vitest';
+import { conversationsStore } from '$lib/stores/conversations.svelte';
+import type { DatabaseMessage } from '$lib/types';
+import { MessageRole } from '$lib/enums';
+
+function makeMessage(id: string): DatabaseMessage {
+	return {
+		id,
+		convId: 'c1',
+		type: 'text',
+		timestamp: 0,
+		role: MessageRole.ASSISTANT,
+		content: '',
+		parent: null,
+		children: []
+	} as DatabaseMessage;
+}
+
+describe('conversationsStore.updateMessageAtIndex', () => {
+	it('mutates in place, preserving object identity', () => {
+		conversationsStore.activeMessages = [makeMessage('a'), makeMessage('b')];
+		const before = conversationsStore.activeMessages[1];
+
+		conversationsStore.updateMessageAtIndex(1, { content: 'hello' });
+
+		expect(conversationsStore.activeMessages[1].content).toBe('hello');
+		expect(conversationsStore.activeMessages[1]).toBe(before);
+
+		conversationsStore.activeMessages = [];
+	});
+
+	it('leaves other messages and unrelated fields untouched', () => {
+		conversationsStore.activeMessages = [makeMessage('a'), makeMessage('b')];
+		const untouched = conversationsStore.activeMessages[0];
+
+		conversationsStore.updateMessageAtIndex(1, { content: 'x', model: 'm1' });
+
+		expect(conversationsStore.activeMessages[0]).toBe(untouched);
+		expect(conversationsStore.activeMessages[0].content).toBe('');
+		expect(conversationsStore.activeMessages[1].model).toBe('m1');
+		expect(conversationsStore.activeMessages[1].id).toBe('b');
+
+		conversationsStore.activeMessages = [];
+	});
+
+	it('is a no-op for an index of -1 or out of range', () => {
+		conversationsStore.activeMessages = [makeMessage('a')];
+
+		expect(() => conversationsStore.updateMessageAtIndex(-1, { content: 'x' })).not.toThrow();
+		expect(() => conversationsStore.updateMessageAtIndex(9, { content: 'x' })).not.toThrow();
+		expect(conversationsStore.activeMessages[0].content).toBe('');
+
+		conversationsStore.activeMessages = [];
+	});
+});

tools/ui/tests/e2e/pwa.e2e.ts

@@ -0,0 +1,109 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('PWA Service Worker', () => {
+	test('service worker is registered', async ({ page }) => {
+		await page.goto('/');
+
+		const swURL = await page.evaluate(async () => {
+			const registration = await Promise.race([
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore - type inference differs from browser runtime
+				navigator.serviceWorker.ready,
+				new Promise((_, reject) =>
+					setTimeout(() => reject(new Error('Service worker registration failed: timeout')), 15000)
+				)
+			]);
+			// @ts-expect-error registration is of type unknown
+			return registration.active?.scriptURL;
+		});
+
+		expect(swURL).toBeTruthy();
+		expect(swURL).toContain('/sw.js');
+	});
+
+	test('service worker has precache configured', async ({ page }) => {
+		await page.goto('/');
+
+		await page.evaluate(async () => {
+			await navigator.serviceWorker.ready;
+		});
+
+		const swActive = await page.evaluate(async () => {
+			const reg = await navigator.serviceWorker.ready;
+			return reg.active?.scriptURL ?? null;
+		});
+
+		expect(swActive).toBeTruthy();
+
+		const swResponse = await page.request.get(swActive!);
+		const swContent = await swResponse.text();
+
+		// Precache contains SvelteKit content-hashed bundle paths
+		expect(swContent).toMatch(/"_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		expect(swContent).toMatch(/"_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/);
+		expect(swContent).toMatch(/"manifest\.webmanifest"/);
+		expect(swContent).toMatch(/"_app\/version\.json"/);
+		// NavigationRoute is intentionally absent — server API endpoints
+		// (e.g. /slots, /models) must not be intercepted by the PWA and
+		// should return JSON directly from the server.
+		expect(swContent).not.toMatch(/NavigationRoute/);
+		expect(swContent).toMatch(/api-cache/);
+	});
+
+	test('offline mode - page loads when offline after caching', async ({ browser }) => {
+		const context = await browser.newContext();
+		const offlinePage = await context.newPage();
+
+		await offlinePage.goto('/');
+		await offlinePage.waitForLoadState('networkidle');
+
+		await offlinePage.evaluate(async () => {
+			await navigator.serviceWorker.ready;
+		});
+
+		await offlinePage.waitForTimeout(2000);
+
+		await context.setOffline(true);
+		await offlinePage.goto('/');
+
+		const bodyText = await offlinePage.locator('body').textContent();
+		expect(bodyText).toBeTruthy();
+
+		await context.close();
+	});
+
+	test('version.json is accessible and contains version', async ({ page }) => {
+		const versionResponse = await page.request.get('/_app/version.json');
+		expect(versionResponse.ok()).toBeTruthy();
+
+		const versionData = await versionResponse.json();
+		expect(versionData).toHaveProperty('version');
+		expect(typeof versionData.version).toBe('string');
+		expect(versionData.version.length).toBeGreaterThan(0);
+	});
+
+	test('manifest.webmanifest is accessible and valid', async ({ page }) => {
+		const response = await page.request.get('/manifest.webmanifest');
+		expect(response.ok()).toBeTruthy();
+
+		const manifest = await response.json();
+		expect(manifest).toHaveProperty('name', 'llama-ui');
+		expect(manifest).toHaveProperty('short_name', 'llama-ui');
+		expect(manifest).toHaveProperty('start_url', './');
+		expect(manifest).toHaveProperty('display', 'standalone');
+		expect(manifest.icons).toBeTruthy();
+		expect(manifest.icons.length).toBeGreaterThan(0);
+	});
+
+	test('index.html contains content-hashed bundle references', async ({ page }) => {
+		const response = await page.request.get('/');
+		expect(response.ok()).toBeTruthy();
+
+		const html = await response.text();
+
+		// SvelteKit outputs content-hashed bundle names in _app/immutable/
+		expect(html).toMatch(/href="(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		expect(html).toMatch(/href="(\.\/|\/)_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/);
+		expect(html).toMatch(/import\("(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"\)/);
+	});
+});

tools/ui/tests/stories/ChatMessage.stories.svelte

@@ -0,0 +1,207 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatMessage',
+		component: ChatMessage,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	// Mock messages for different scenarios
+	const userMessage: DatabaseMessage = {
+		id: '1',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 5,
+		role: 'user',
+		content: 'What is the meaning of life, the universe, and everything?',
+		parent: '',
+		thinking: '',
+		children: []
+	};
+
+	const assistantMessage: DatabaseMessage = {
+		id: '2',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 3,
+		role: 'assistant',
+		content:
+			'The answer to the ultimate question of life, the universe, and everything is **42**.\n\nThis comes from Douglas Adams\' "The Hitchhiker\'s Guide to the Galaxy," where a supercomputer named Deep Thought calculated this answer over 7.5 million years. However, the question itself was never properly formulated, which is why the answer seems meaningless without context.',
+		parent: '1',
+		thinking: '',
+		children: []
+	};
+
+	const assistantWithReasoning: DatabaseMessage = {
+		id: '3',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 2,
+		role: 'assistant',
+		content: "Here's the concise answer, now that I've thought it through carefully for you.",
+		parent: '1',
+		thinking:
+			"Let's consider the user's question step by step:\\n\\n1. Identify the core problem\\n2. Evaluate relevant information\\n3. Formulate a clear answer\\n\\nFollowing this process ensures the final response stays focused and accurate.",
+		children: []
+	};
+	const rawOutputMessage: DatabaseMessage = {
+		id: '6',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60,
+		role: 'assistant',
+		content:
+			'<|channel|>analysis<|message|>User greeted me. Initiating overcomplicated analysis: Is this a trap? No, just a normal hello. Respond calmly, act like a helpful assistant, and do not start explaining quantum physics again. Confidence 0.73. Engaging socially acceptable greeting protocol...<|end|>Hello there! How can I help you today?',
+		parent: '1',
+		thinking: '',
+		children: []
+	};
+
+	let processingMessage = $state({
+		id: '4',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: 0, // No timestamp = processing
+		role: 'assistant',
+		content: '',
+		parent: '1',
+		thinking: '',
+		children: []
+	});
+
+	let streamingMessage = $state({
+		id: '5',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: 0, // No timestamp = streaming
+		role: 'assistant',
+		content: '',
+		parent: '1',
+		thinking: '',
+		children: []
+	});
+</script>
+
+<Story
+	name="User"
+	args={{
+		message: userMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="Assistant"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: assistantMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="AssistantWithReasoning"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: assistantWithReasoning
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="RawLlmOutput"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: rawOutputMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', true);
+	}}
+/>
+
+<Story
+	name="WithReasoningContent"
+	args={{
+		message: streamingMessage
+	}}
+	asChild
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+		// Phase 1: Stream reasoning content in chunks
+		let reasoningText =
+			'I need to think about this carefully. Let me break down the problem:\n\n1. The user is asking for help with something complex\n2. I should provide a thorough and helpful response\n3. I need to consider multiple approaches\n4. The best solution would be to explain step by step\n\nThis approach will ensure clarity and understanding.';
+
+		let reasoningChunk = 'I';
+		let i = 0;
+		while (i < reasoningText.length) {
+			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
+			const chunk = reasoningText.slice(i, i + chunkSize);
+			reasoningChunk += chunk;
+
+			// Update the reactive state directly
+			streamingMessage.thinking = reasoningChunk;
+
+			i += chunkSize;
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+
+		const regularText =
+			"Based on my analysis, here's the solution:\n\n**Step 1:** First, we need to understand the requirements clearly.\n\n**Step 2:** Then we can implement the solution systematically.\n\n**Step 3:** Finally, we test and validate the results.\n\nThis approach ensures we cover all aspects of the problem effectively.";
+
+		let contentChunk = '';
+		i = 0;
+
+		while (i < regularText.length) {
+			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
+			const chunk = regularText.slice(i, i + chunkSize);
+			contentChunk += chunk;
+
+			// Update the reactive state directly
+			streamingMessage.content = contentChunk;
+
+			i += chunkSize;
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+
+		streamingMessage.timestamp = Date.now();
+	}}
+>
+	<div class="w-[56rem]">
+		<ChatMessage message={streamingMessage} />
+	</div>
+</Story>
+
+<Story
+	name="Processing"
+	args={{
+		message: processingMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+		// Import the chat store to simulate loading state
+		const { chatStore } = await import('$lib/stores/chat.svelte');
+
+		// Set loading state to true to trigger the processing UI
+		chatStore.isLoading = true;
+
+		// Simulate the processing state hook behavior
+		// This will show the "Generating..." text and parameter details
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	}}
+/>

tools/ui/tests/stories/ChatScreenForm.stories.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect } from 'storybook/test';
+	import jpgAsset from './fixtures/assets/1.jpg?url';
+	import svgAsset from './fixtures/assets/hf-logo.svg?url';
+	import pdfAsset from './fixtures/assets/example.pdf?raw';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	let fileAttachments = $state([
+		{
+			id: '1',
+			name: '1.jpg',
+			type: 'image/jpeg',
+			size: 44891,
+			preview: jpgAsset,
+			file: new File([''], '1.jpg', { type: 'image/jpeg' })
+		},
+		{
+			id: '2',
+			name: 'hf-logo.svg',
+			type: 'image/svg+xml',
+			size: 1234,
+			preview: svgAsset,
+			file: new File([''], 'hf-logo.svg', { type: 'image/svg+xml' })
+		},
+		{
+			id: '3',
+			name: 'example.pdf',
+			type: 'application/pdf',
+			size: 351048,
+			file: new File([pdfAsset], 'example.pdf', { type: 'application/pdf' })
+		}
+	]);
+</script>
+
+<Story
+	name="Default"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const textarea = await canvas.findByRole('textbox');
+		const submitButton = await canvas.findByRole('button', { name: 'Send' });
+
+		// Expect the input to be focused after the component is mounted
+		await expect(textarea).toHaveFocus();
+
+		// Expect the submit button to be disabled
+		await expect(submitButton).toBeDisabled();
+
+		const text = 'What is the meaning of life?';
+
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, text);
+
+		await expect(textarea).toHaveValue(text);
+
+		const fileInput = document.querySelector('input[type="file"]');
+		await expect(fileInput).not.toHaveAttribute('accept');
+	}}
+/>
+
+<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
+
+<Story
+	name="FileAttachments"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		uploadedFiles: fileAttachments
+	}}
+	play={async ({ canvas }) => {
+		const jpgAttachment = canvas.getByAltText('1.jpg');
+		const svgAttachment = canvas.getByAltText('hf-logo.svg');
+		const pdfFileExtension = canvas.getByText('PDF');
+		const pdfAttachment = canvas.getByText('example.pdf');
+		const pdfSize = canvas.getByText('342.82 KB');
+
+		await expect(jpgAttachment).toBeInTheDocument();
+		await expect(jpgAttachment).toHaveAttribute('src', jpgAsset);
+
+		await expect(svgAttachment).toBeInTheDocument();
+		await expect(svgAttachment).toHaveAttribute('src', svgAsset);
+
+		await expect(pdfFileExtension).toBeInTheDocument();
+		await expect(pdfAttachment).toBeInTheDocument();
+		await expect(pdfSize).toBeInTheDocument();
+	}}
+/>

tools/ui/tests/stories/Introduction.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Introduction" />
+
+# llama.cpp Web UI
+
+Welcome to the **llama-ui** component library! This Storybook showcases the components used in the modern web interface for the llama-server.
+
+## 🚀 About This Project
+
+Llama UI is a modern web interface for the llama-server, built with SvelteKit and ShadCN UI. Features include:
+
+- **Real-time chat conversations** with AI assistants
+- **Multi-conversation management** with persistent storage
+- **Advanced parameter tuning** for model behavior
+- **File upload support** for multimodal interactions
+- **Responsive design** that works on desktop and mobile
+
+## 🎨 Design System
+
+The UI is built using:
+
+- **SvelteKit** - Modern web framework with excellent performance
+- **Tailwind CSS** - Utility-first CSS framework for rapid styling
+- **ShadCN/UI** - High-quality, accessible component library
+- **Lucide Icons** - Beautiful, consistent icon set
+
+## 🔧 Development
+
+This Storybook serves as both documentation and a development environment for the UI components. Each story demonstrates:
+
+- **Component variations** - Different states and configurations
+- **Interactive examples** - Live components you can interact with
+- **Usage patterns** - How components work together
+- **Styling consistency** - Unified design language
+
+## 🚀 Getting Started
+
+To explore the components:
+
+1. **Browse the sidebar** to see all available components
+2. **Click on stories** to see different component states
+3. **Use the controls panel** to interact with component props
+4. **Check the docs tab** for detailed component information

tools/ui/tests/stories/MarkdownContent.stories.svelte

@@ -0,0 +1,132 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
+	import { MarkdownContent } from '$lib/components/app';
+	import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
+	import { API_DOCS_MD } from './fixtures/api-docs.js';
+	import { BLOG_POST_MD } from './fixtures/blog-post.js';
+	import { DATA_ANALYSIS_MD } from './fixtures/data-analysis.js';
+	import { README_MD } from './fixtures/readme.js';
+	import { MATH_FORMULAS_MD } from './fixtures/math-formulas.js';
+	import { EMPTY_MD } from './fixtures/empty.js';
+
+	const { Story } = defineMeta({
+		title: 'Components/MarkdownContent',
+		component: MarkdownContent,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<Story name="Empty" args={{ content: EMPTY_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }} />
+
+<Story
+	name="AI Tutorial"
+	args={{ content: AI_TUTORIAL_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="API Documentation"
+	args={{ content: API_DOCS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Technical Blog"
+	args={{ content: BLOG_POST_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Data Analysis"
+	args={{ content: DATA_ANALYSIS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="README file"
+	args={{ content: README_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Math Formulas"
+	args={{ content: MATH_FORMULAS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="URL Links"
+	args={{
+		content: `# URL Links Test
+
+Here are some example URLs that should open in new tabs:
+
+- [Hugging Face Homepage](https://huggingface.co)
+- [GitHub Repository](https://github.com/ggml-org/llama.cpp)
+- [OpenAI Website](https://openai.com)
+- [Google Search](https://www.google.com)
+
+You can also test inline links like https://example.com or https://docs.python.org.
+
+All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`,
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]'
+	}}
+	play={async (context) => {
+		const { canvasElement } = context;
+		// Wait for component to render
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		// Find all links in the rendered content
+		const links = (canvasElement as HTMLElement).querySelectorAll(
+			'a[href]'
+		) as NodeListOf<HTMLAnchorElement>;
+		const linkList = Array.from(links) as HTMLAnchorElement[];
+
+		// Test that we have the expected number of links
+		expect(links.length).toBeGreaterThan(0);
+
+		// Test each link for proper attributes
+		links.forEach((link: HTMLAnchorElement) => {
+			const href = link.getAttribute('href');
+
+			// Test that external links have proper security attributes
+			if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+				expect(link.getAttribute('target')).toBe('_blank');
+				expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+			}
+		});
+
+		// Test specific links exist
+		const hugginFaceLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://huggingface.co'
+		);
+		expect(hugginFaceLink).toBeTruthy();
+		expect(hugginFaceLink?.textContent).toBe('Hugging Face Homepage');
+
+		const githubLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://github.com/ggml-org/llama.cpp'
+		);
+		expect(githubLink).toBeTruthy();
+		expect(githubLink?.textContent).toBe('GitHub Repository');
+
+		const openaiLink = linkList.find((link) => link.getAttribute('href') === 'https://openai.com');
+		expect(openaiLink).toBeTruthy();
+		expect(openaiLink?.textContent).toBe('OpenAI Website');
+
+		const googleLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://www.google.com'
+		);
+		expect(googleLink).toBeTruthy();
+		expect(googleLink?.textContent).toBe('Google Search');
+
+		// Test inline links (auto-linked URLs)
+		const exampleLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://example.com'
+		);
+		expect(exampleLink).toBeTruthy();
+
+		const pythonDocsLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://docs.python.org'
+		);
+		expect(pythonDocsLink).toBeTruthy();
+
+		console.log(`✅ URL Links test passed - Found ${links.length} links with proper attributes`);
+	}}
+/>

tools/ui/tests/stories/ModelsSelector.stories.svelte

@@ -0,0 +1,269 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ModelsSelectorList from '$lib/components/app/models/ModelsSelectorList.svelte';
+	import ModelsSelectorOption from '$lib/components/app/models/ModelsSelectorOption.svelte';
+	import type { GroupedModelOptions, ModelItem } from '$lib/components/app/models/utils';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+
+	const { Story } = defineMeta({
+		title: 'Components/ModelsSelector',
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	const mockModel = (id: string, name: string, orgName?: string, tags?: string[]): ModelOption => ({
+		id,
+		name,
+		model: orgName ? `${orgName}/${name}` : name,
+		capabilities: [],
+		parsedId: {
+			raw: orgName ? `${orgName}/${name}` : name,
+			orgName: orgName ?? null,
+			modelName: name,
+			params: null,
+			activatedParams: null,
+			quantization: null,
+			tags: tags ?? []
+		},
+		tags
+	});
+
+	const mockRouterEntry = (modelName: string, status: ServerModelStatus): ApiModelDataEntry => ({
+		id: modelName,
+		object: 'model',
+		owned_by: 'llamacpp',
+		created: Date.now(),
+		in_cache: true,
+		path: `/models/${modelName}`,
+		status: { value: status }
+	});
+</script>
+
+<script lang="ts">
+	let selectedModel = $state<string | null>(null);
+	let activeId = $state<string | null>(null);
+
+	function mockModelsStore() {
+		modelsStore.favoriteModelIds = new Set(['qwen2.5-7b', 'llama3.2-3b']);
+
+		// Mock router models with various statuses for ModelLoadedStates story
+		modelsStore.routerModels = [
+			mockRouterEntry('meta/Model (loading)', ServerModelStatus.LOADING),
+			mockRouterEntry('meta/Model (loaded)', ServerModelStatus.LOADED),
+			mockRouterEntry('meta/Model (sleeping)', ServerModelStatus.SLEEPING),
+			mockRouterEntry('meta/Model (failed)', ServerModelStatus.FAILED)
+		];
+	}
+
+	mockModelsStore();
+
+	const loadedModels: ModelItem[] = [
+		{ option: mockModel('llama3.1-8b', 'Llama-3.1-8B-Instruct', 'meta'), flatIndex: 0 },
+		{ option: mockModel('mistral-7b', 'Mistral-7B-v0.3', 'mistralai'), flatIndex: 1 }
+	];
+
+	const favoriteModels: ModelItem[] = [
+		{ option: mockModel('qwen2.5-7b', 'Qwen2.5-7B-Instruct', 'Qwen'), flatIndex: 2 },
+		{ option: mockModel('llama3.2-3b', 'Llama-3.2-3B-Instruct', 'meta'), flatIndex: 3 }
+	];
+
+	const availableModels: ModelItem[] = [
+		{
+			option: mockModel('deepseek-coder-6.7b', 'DeepSeek-Coder-6.7B', 'deepseek', ['coding']),
+			flatIndex: 4
+		},
+		{ option: mockModel('gemma-2-9b', 'Gemma-2-9B-IT', 'google'), flatIndex: 5 },
+		{ option: mockModel('phi-3-mini', 'Phi-3-mini-4k', 'microsoft'), flatIndex: 6 },
+		{ option: mockModel('codellama-7b', 'CodeLlama-7B', 'codellama', ['coding']), flatIndex: 7 },
+		{ option: mockModel('neural-chat-7b', 'Neural-Chat-7B-v3-3', 'intel'), flatIndex: 8 }
+	];
+
+	const groupedOptions: GroupedModelOptions = {
+		loaded: loadedModels,
+		favorites: favoriteModels,
+		available: [
+			{
+				orgName: 'deepseek',
+				items: [availableModels[0]]
+			},
+			{
+				orgName: 'google',
+				items: [availableModels[1]]
+			},
+			{
+				orgName: 'microsoft',
+				items: [availableModels[2]]
+			},
+			{
+				orgName: 'codellama',
+				items: [availableModels[3]]
+			},
+			{
+				orgName: 'intel',
+				items: [availableModels[4]]
+			}
+		]
+	};
+
+	function handleSelect(modelId: string) {
+		const opt = [...loadedModels, ...favoriteModels, ...availableModels].find(
+			(m) => m.option.id === modelId
+		);
+		if (opt) {
+			selectedModel = opt.option.model;
+			activeId = modelId;
+		}
+	}
+</script>
+
+<Story name="List">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={groupedOptions}
+			currentModel={selectedModel}
+			{activeId}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="SingleLoaded">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={{
+				loaded: [loadedModels[0]],
+				favorites: [],
+				available: []
+			}}
+			currentModel={null}
+			activeId={null}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="WithFavoritesOnly">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={{
+				loaded: [],
+				favorites: favoriteModels,
+				available: []
+			}}
+			currentModel={null}
+			activeId={null}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="ModelLoadedStates">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
+			Server model states
+		</div>
+		<ModelsSelectorOption
+			option={mockModel('model-idle', 'Model (idle)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-loading', 'Model (loading)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-loaded', 'Model (loaded)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-sleeping', 'Model (sleeping)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-failed', 'Model (failed)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+	</div>
+</Story>
+
+<Story name="ModelSelectedStates">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
+			Selection states
+		</div>
+		<ModelsSelectorOption
+			option={mockModel('normal-model', 'Normal Model', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('selected-model', 'Selected Model', 'meta')}
+			isSelected={true}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
+			isSelected={false}
+			isHighlighted={true}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={true}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+	</div>
+</Story>

tools/ui/tests/stories/PwaRefreshAlert.stories.svelte

@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import PwaRefreshAlert from '$lib/components/pwa/PwaRefreshAlert.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/PwaRefreshAlert',
+		component: PwaRefreshAlert,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{ needRefresh: true, updateServiceWorker: () => console.log('reload') }}
+	play={async ({ canvas }) => {
+		const title = canvas.getByText('Update available');
+		await expect(title).toBeInTheDocument();
+
+		const description = canvas.getByText(/A new version is available/);
+		await expect(description).toBeInTheDocument();
+
+		const button = canvas.getByRole('button', { name: 'Reload' });
+		await expect(button).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Hidden"
+	args={{ needRefresh: false, updateServiceWorker: () => console.log('reload') }}
+	play={async ({ canvas }) => {
+		const title = canvas.queryByText('Update available');
+		await expect(title).not.toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="ClickReload"
+	args={{
+		needRefresh: true,
+		updateServiceWorker: () => console.log('reload')
+	}}
+	play={async ({ canvas, userEvent }) => {
+		const button = canvas.getByRole('button', { name: 'Reload' });
+		await expect(button).toBeInTheDocument();
+
+		await userEvent.click(button);
+
+		const title = canvas.queryByText('Update available');
+		await expect(title).not.toBeInTheDocument();
+
+		const reloadBtn = canvas.queryByRole('button', { name: 'Reload' });
+		await expect(reloadBtn).not.toBeInTheDocument();
+	}}
+/>

tools/ui/tests/stories/SidebarNavigation.stories.svelte

@@ -0,0 +1,106 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SidebarNavigation from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte';
+	import { waitFor } from 'storybook/test';
+	import { screen } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/SidebarNavigation',
+		component: SidebarNavigation,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<script lang="ts">
+	// Mock conversations for the sidebar
+	const mockConversations: DatabaseConversation[] = [
+		{
+			id: 'conv-1',
+			name: 'Getting Started with AI',
+			lastModified: Date.now() - 1000 * 60 * 5, // 5 minutes ago
+			currNode: 'msg-1'
+		},
+		{
+			id: 'conv-2',
+			name: 'Python Programming Help',
+			lastModified: Date.now() - 1000 * 60 * 60 * 2, // 2 hours ago
+			currNode: 'msg-2'
+		},
+		{
+			id: 'conv-3',
+			name: 'Creative Writing Ideas',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24, // 1 day ago
+			currNode: 'msg-3'
+		},
+		{
+			id: 'conv-4',
+			name: 'This is a very long conversation title that should be truncated properly when displayed',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 3, // 3 days ago
+			currNode: 'msg-4'
+		},
+		{
+			id: 'conv-5',
+			name: 'Math Problem Solving',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 7, // 1 week ago
+			currNode: 'msg-5'
+		}
+	];
+</script>
+
+<Story
+	asChild
+	name="Default"
+	play={async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+
+		waitFor(() =>
+			setTimeout(() => {
+				conversationsStore.conversations = mockConversations;
+			}, 0)
+		);
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="SearchActive"
+	play={async ({ userEvent }) => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+
+		waitFor(() =>
+			setTimeout(() => {
+				conversationsStore.conversations = mockConversations;
+			}, 0)
+		);
+
+		// Expand sidebar first, then click Search in the expanded button list
+		const logoTrigger = screen.getByRole('button', { name: /expand navigation/i });
+		await userEvent.click(logoTrigger);
+		const searchTrigger = screen.getByText('Search');
+		userEvent.click(searchTrigger);
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="Empty"
+	play={async () => {
+		// Mock empty conversations store
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.conversations = [];
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>

tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Copy } from '@lucide/svelte';
+	import ActionIcon from '$lib/components/app/actions/ActionIcon.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/ActionIcon/Accessibility',
+		component: ActionIcon,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	asChild
+	name="SingleTabStop"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const target = await canvas.findByRole('button', { name: 'Copy' });
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(target).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<ActionIcon icon={Copy} tooltip="Copy" onclick={() => {}} />
+	</div>
+</Story>

tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatMessageStatistics from '$lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatMessageStatistics/Accessibility',
+		component: ChatMessageStatistics,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="ViewButtonsSingleTabStop"
+	args={{
+		promptTokens: 100,
+		promptMs: 500,
+		predictedTokens: 200,
+		predictedMs: 1000,
+		agenticTimings: {
+			turns: 1,
+			toolCallsCount: 1,
+			toolsMs: 500,
+			llm: { predicted_n: 200, predicted_ms: 1000, prompt_n: 100, prompt_ms: 500 }
+		},
+		hideSummary: false,
+		isLive: false
+	}}
+	play={async ({ canvas, userEvent }) => {
+		const reading = await canvas.findByRole('button', { name: 'Reading' });
+		const generation = await canvas.findByRole('button', { name: 'Generation' });
+		const tools = await canvas.findByRole('button', { name: 'Tools' });
+		const summary = await canvas.findByRole('button', { name: 'Summary' });
+
+		reading.focus();
+		await expect(reading).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(generation).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(tools).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(summary).toHaveFocus();
+	}}
+/>

tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect, screen, waitFor } from 'storybook/test';
+	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm/Accessibility',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="AddButtonSingleTabStop"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const textarea = await canvas.findByRole('textbox');
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, 'What is the meaning of life?');
+
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await expect(trigger).toHaveFocus();
+
+		await userEvent.tab();
+
+		await expect(trigger).not.toHaveFocus();
+	}}
+/>
+
+<Story
+	name="AddDropdownFocusesFirstEnabled"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await userEvent.keyboard('{Enter}');
+		await screen.findByRole('menu');
+
+		await waitFor(() => {
+			expect(document.activeElement).toHaveTextContent('Add files');
+		});
+	}}
+/>

tools/ui/tests/stories/a11y/HorizontalScrollCarousel.a11y.stories.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import HorizontalScrollCarousel from '$lib/components/app/misc/HorizontalScrollCarousel.svelte';
+	import { expect, waitFor } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/HorizontalScrollCarousel/Accessibility',
+		component: HorizontalScrollCarousel,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	asChild
+	name="ArrowsNotInTabOrderWhenNotScrollable"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const after = await canvas.findByRole('button', { name: 'after' });
+		const leftArrow = await canvas.findByRole('button', { name: 'Scroll left' });
+
+		await waitFor(() => {
+			expect(leftArrow).toBeDisabled();
+		});
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(after).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<HorizontalScrollCarousel class="w-96">
+			<div class="h-12 w-12 shrink-0 bg-muted"></div>
+			<div class="h-12 w-12 shrink-0 bg-muted"></div>
+		</HorizontalScrollCarousel>
+		<button type="button">after</button>
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="ArrowsInTabOrderWhenScrollable"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const rightArrow = await canvas.findByRole('button', { name: 'Scroll right' });
+
+		await waitFor(() => {
+			expect(rightArrow).not.toBeDisabled();
+		});
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(rightArrow).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<HorizontalScrollCarousel class="w-48">
+			{#each [...Array(20).keys()] as i (i)}
+				<div class="h-12 w-24 shrink-0 bg-muted">{i}</div>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+</Story>

tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SidebarNavigationConversationItem from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte';
+	import { expect } from 'storybook/test';
+
+	const mockForkedConversation: DatabaseConversation = {
+		id: 'conv-2',
+		name: 'Forked Conversation',
+		lastModified: Date.now(),
+		currNode: 'msg-2',
+		forkedFromConversationId: 'conv-1'
+	};
+
+	const { Story } = defineMeta({
+		title: 'Components/SidebarNavigationConversationItem/Accessibility',
+		component: SidebarNavigationConversationItem,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="ForkIconSingleTabStop"
+	args={{ conversation: mockForkedConversation, depth: 1 }}
+	play={async ({ canvas, userEvent }) => {
+		const row = await canvas.findByRole('button', { name: /Forked Conversation/ });
+		const forkIcon = await canvas.findByRole('link');
+
+		row.focus();
+		await userEvent.tab();
+
+		await expect(forkIcon).toHaveFocus();
+	}}
+/>

tools/ui/tests/stories/fixtures/ai-tutorial.ts

@@ -0,0 +1,164 @@
+// AI Assistant Tutorial Response
+export const AI_TUTORIAL_MD = String.raw`
+# Building a Modern Chat Application with SvelteKit
+
+I'll help you create a **production-ready chat application** using SvelteKit, TypeScript, and WebSockets. This implementation includes real-time messaging, user authentication, and message persistence.
+
+## 🚀 Quick Start
+
+First, let's set up the project:
+
+${'```'}bash
+npm create svelte@latest chat-app
+cd chat-app
+npm install
+npm install socket.io socket.io-client
+npm install @prisma/client prisma
+npm run dev
+${'```'}
+
+## 📁 Project Structure
+
+${'```'}
+chat-app/
+├── src/
+│   ├── routes/
+│   │   ├── +layout.svelte
+│   │   ├── +page.svelte
+│   │   └── api/
+│   │       └── socket/+server.ts
+│   ├── lib/
+│   │   ├── components/
+│   │   │   ├── ChatMessage.svelte
+│   │   │   └── ChatInput.svelte
+│   │   └── stores/
+│   │       └── chat.ts
+│   └── app.html
+├── prisma/
+│   └── schema.prisma
+└── package.json
+${'```'}
+
+## 💻 Implementation
+
+### WebSocket Server
+
+${'```'}typescript
+// src/lib/server/socket.ts
+import { Server } from 'socket.io';
+import type { ViteDevServer } from 'vite';
+
+export function initializeSocketIO(server: ViteDevServer) {
+    const io = new Server(server.httpServer || server, {
+        cors: {
+            origin: process.env.ORIGIN || 'http://localhost:5173',
+            credentials: true
+        }
+    });
+
+    io.on('connection', (socket) => {
+        console.log('User connected:', socket.id);
+        
+        socket.on('message', async (data) => {
+            // Broadcast to all clients
+            io.emit('new-message', {
+                id: crypto.randomUUID(),
+                userId: socket.id,
+                content: data.content,
+                timestamp: new Date().toISOString()
+            });
+        });
+
+        socket.on('disconnect', () => {
+            console.log('User disconnected:', socket.id);
+        });
+    });
+
+    return io;
+}
+${'```'}
+
+### Client Store
+
+${'```'}typescript
+// src/lib/stores/chat.ts
+import { writable } from 'svelte/store';
+import io from 'socket.io-client';
+
+export interface Message {
+    id: string;
+    userId: string;
+    content: string;
+    timestamp: string;
+}
+
+function createChatStore() {
+    const { subscribe, update } = writable<Message[]>([]);
+    let socket: ReturnType<typeof io>;
+    
+    return {
+        subscribe,
+        connect: () => {
+            socket = io('http://localhost:5173');
+            
+            socket.on('new-message', (message: Message) => {
+                update(messages => [...messages, message]);
+            });
+        },
+        sendMessage: (content: string) => {
+            if (socket && content.trim()) {
+                socket.emit('message', { content });
+            }
+        }
+    };
+}
+
+export const chatStore = createChatStore();
+${'```'}
+
+## 🎯 Key Features
+
+✅ **Real-time messaging** with WebSockets  
+✅ **Message persistence** using Prisma + PostgreSQL  
+✅ **Type-safe** with TypeScript  
+✅ **Responsive UI** for all devices  
+✅ **Auto-reconnection** on connection loss  
+
+## 📊 Performance Metrics
+
+| Metric | Value |
+|--------|-------|
+| **Message Latency** | < 50ms |
+| **Concurrent Users** | 10,000+ |
+| **Messages/Second** | 5,000+ |
+| **Uptime** | 99.9% |
+
+## 🔧 Configuration
+
+### Environment Variables
+
+${'```'}env
+DATABASE_URL="postgresql://user:password@localhost:5432/chat"
+JWT_SECRET="your-secret-key"
+REDIS_URL="redis://localhost:6379"
+${'```'}
+
+## 🚢 Deployment
+
+Deploy to production using Docker:
+
+${'```'}dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["node", "build"]
+${'```'}
+
+---
+
+*Need help? Check the [documentation](https://kit.svelte.dev) or [open an issue](https://github.com/sveltejs/kit/issues)*
+`;

tools/ui/tests/stories/fixtures/api-docs.ts

@@ -0,0 +1,160 @@
+// API Documentation
+export const API_DOCS_MD = String.raw`
+# REST API Documentation
+
+## 🔐 Authentication
+
+All API requests require authentication using **Bearer tokens**. Include your API key in the Authorization header:
+
+${'```'}http
+GET /api/v1/users
+Host: api.example.com
+Authorization: Bearer YOUR_API_KEY
+Content-Type: application/json
+${'```'}
+
+## 📍 Endpoints
+
+### Users API
+
+#### **GET** /api/v1/users
+
+Retrieve a paginated list of users.
+
+**Query Parameters:**
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| page | integer | 1 | Page number |
+| limit | integer | 20 | Items per page |
+| sort | string | "created_at" | Sort field |
+| order | string | "desc" | Sort order |
+
+**Response:** 200 OK
+
+${'```'}json
+{
+  "data": [
+    {
+      "id": "usr_1234567890",
+      "email": "user@example.com",
+      "name": "John Doe",
+      "role": "admin",
+      "created_at": "2024-01-15T10:30:00Z"
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "limit": 20,
+    "total": 156,
+    "pages": 8
+  }
+}
+${'```'}
+
+#### **POST** /api/v1/users
+
+Create a new user account.
+
+**Request Body:**
+
+${'```'}json
+{
+  "email": "newuser@example.com",
+  "password": "SecurePassword123!",
+  "name": "Jane Smith",
+  "role": "user"
+}
+${'```'}
+
+**Response:** 201 Created
+
+${'```'}json
+{
+  "id": "usr_9876543210",
+  "email": "newuser@example.com",
+  "name": "Jane Smith",
+  "role": "user",
+  "created_at": "2024-01-21T09:15:00Z"
+}
+${'```'}
+
+### Error Responses
+
+The API returns errors in a consistent format:
+
+${'```'}json
+{
+  "error": {
+    "code": "VALIDATION_ERROR",
+    "message": "Invalid request parameters",
+    "details": [
+      {
+        "field": "email",
+        "message": "Email format is invalid"
+      }
+    ]
+  }
+}
+${'```'}
+
+### Rate Limiting
+
+| Tier | Requests/Hour | Burst |
+|------|--------------|-------|
+| **Free** | 1,000 | 100 |
+| **Pro** | 10,000 | 500 |
+| **Enterprise** | Unlimited | - |
+
+**Headers:**
+- X-RateLimit-Limit
+- X-RateLimit-Remaining  
+- X-RateLimit-Reset
+
+### Webhooks
+
+Configure webhooks to receive real-time events:
+
+${'```'}javascript
+// Webhook payload
+{
+  "event": "user.created",
+  "timestamp": "2024-01-21T09:15:00Z",
+  "data": {
+    "id": "usr_9876543210",
+    "email": "newuser@example.com"
+  },
+  "signature": "sha256=abcd1234..."
+}
+${'```'}
+
+### SDK Examples
+
+**JavaScript/TypeScript:**
+
+${'```'}typescript
+import { ApiClient } from '@example/api-sdk';
+
+const client = new ApiClient({
+  apiKey: process.env.API_KEY
+});
+
+const users = await client.users.list({
+  page: 1,
+  limit: 20
+});
+${'```'}
+
+**Python:**
+
+${'```'}python
+from example_api import Client
+
+client = Client(api_key=os.environ['API_KEY'])
+users = client.users.list(page=1, limit=20)
+${'```'}
+
+---
+
+📚 [Full API Reference](https://api.example.com/docs) | 💬 [Support](https://support.example.com)
+`;

tools/ui/tests/stories/fixtures/blog-post.ts

@@ -0,0 +1,125 @@
+// Blog Post Content
+export const BLOG_POST_MD = String.raw`
+# Understanding Rust's Ownership System
+
+*Published on March 15, 2024 • 8 min read*
+
+Rust's ownership system is one of its most distinctive features, enabling memory safety without garbage collection. In this post, we'll explore how ownership works and why it's revolutionary for systems programming.
+
+## What is Ownership?
+
+Ownership is a set of rules that governs how Rust manages memory. These rules are checked at compile time, ensuring memory safety without runtime overhead.
+
+### The Three Rules of Ownership
+
+1. **Each value has a single owner**
+2. **There can only be one owner at a time**
+3. **When the owner goes out of scope, the value is dropped**
+
+## Memory Management Without GC
+
+Traditional approaches to memory management:
+
+- **Manual management** (C/C++): Error-prone, leads to bugs
+- **Garbage collection** (Java, Python): Runtime overhead
+- **Ownership** (Rust): Compile-time safety, zero runtime cost
+
+## Basic Examples
+
+### Variable Scope
+
+${'```'}rust
+fn main() {
+    let s = String::from("hello");  // s comes into scope
+    
+    // s is valid here
+    println!("{}", s);
+    
+}  // s goes out of scope and is dropped
+${'```'}
+
+### Move Semantics
+
+${'```'}rust
+fn main() {
+    let s1 = String::from("hello");
+    let s2 = s1;  // s1 is moved to s2
+    
+    // println!("{}", s1);  // ❌ ERROR: s1 is no longer valid
+    println!("{}", s2);     // ✅ OK: s2 owns the string
+}
+${'```'}
+
+## Borrowing and References
+
+Instead of transferring ownership, you can **borrow** values:
+
+### Immutable References
+
+${'```'}rust
+fn calculate_length(s: &String) -> usize {
+    s.len()  // s is a reference, doesn't own the String
+}
+
+fn main() {
+    let s1 = String::from("hello");
+    let len = calculate_length(&s1);  // Borrow s1
+    println!("Length of '{}' is {}", s1, len);  // s1 still valid
+}
+${'```'}
+
+### Mutable References
+
+${'```'}rust
+fn main() {
+    let mut s = String::from("hello");
+    
+    let r1 = &mut s;
+    r1.push_str(", world");
+    println!("{}", r1);
+    
+    // let r2 = &mut s;  // ❌ ERROR: cannot borrow twice
+}
+${'```'}
+
+## Common Pitfalls
+
+### Dangling References
+
+${'```'}rust
+fn dangle() -> &String {  // ❌ ERROR: missing lifetime specifier
+    let s = String::from("hello");
+    &s  // s will be dropped, leaving a dangling reference
+}
+${'```'}
+
+### ✅ Solution
+
+${'```'}rust
+fn no_dangle() -> String {
+    let s = String::from("hello");
+    s  // Ownership is moved out
+}
+${'```'}
+
+## Benefits
+
+- ✅ **No null pointer dereferences**
+- ✅ **No data races**
+- ✅ **No use-after-free**
+- ✅ **No memory leaks**
+
+## Conclusion
+
+Rust's ownership system eliminates entire classes of bugs at compile time. While it has a learning curve, the benefits in safety and performance are worth it.
+
+## Further Reading
+
+- [The Rust Book - Ownership](https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html)
+- [Rust by Example - Ownership](https://doc.rust-lang.org/rust-by-example/scope/move.html)
+- [Rustlings Exercises](https://github.com/rust-lang/rustlings)
+
+---
+
+*Questions? Reach out on [Twitter](https://twitter.com/rustlang) or join the [Rust Discord](https://discord.gg/rust-lang)*
+`;

tools/ui/tests/stories/fixtures/data-analysis.ts

@@ -0,0 +1,124 @@
+// Data Analysis Report
+export const DATA_ANALYSIS_MD = String.raw`
+# Q4 2024 Business Analytics Report
+
+*Executive Summary • Generated on January 15, 2025*
+
+## 📊 Key Performance Indicators
+
+${'```'}
+Daily Active Users (DAU):   1.2M (+65% YoY)
+Monthly Active Users (MAU): 4.5M (+48% YoY)
+User Retention (Day 30):    68% (+12pp YoY)
+Average Session Duration:   24min (+35% YoY)
+${'```'}
+
+## 🎯 Product Performance
+
+### Feature Adoption Rates
+
+1. **AI Assistant**: 78% of users (↑ from 45%)
+2. **Collaboration Tools**: 62% of users (↑ from 38%)
+3. **Analytics Dashboard**: 54% of users (↑ from 31%)
+4. **Mobile App**: 41% of users (↑ from 22%)
+
+### Customer Satisfaction
+
+| Metric | Q4 2024 | Q3 2024 | Change |
+|--------|---------|---------|--------|
+| **NPS Score** | 72 | 68 | +4 |
+| **CSAT** | 4.6/5 | 4.4/5 | +0.2 |
+| **Support Tickets** | 2,340 | 2,890 | -19% |
+| **Resolution Time** | 4.2h | 5.1h | -18% |
+
+## 💰 Revenue Metrics
+
+### Monthly Recurring Revenue (MRR)
+
+- **Current MRR**: $2.8M (+42% YoY)
+- **New MRR**: $340K
+- **Expansion MRR**: $180K
+- **Churned MRR**: $95K
+- **Net New MRR**: $425K
+
+### Customer Acquisition
+
+${'```'}
+Cost per Acquisition (CAC): $127 (-23% YoY)
+Customer Lifetime Value:    $1,840 (+31% YoY)
+LTV:CAC Ratio:             14.5:1
+Payback Period:            3.2 months
+${'```'}
+
+## 🌍 Geographic Performance
+
+### Revenue by Region
+
+1. **North America**: 45% ($1.26M)
+2. **Europe**: 32% ($896K)
+3. **Asia-Pacific**: 18% ($504K)
+4. **Other**: 5% ($140K)
+
+### Growth Opportunities
+
+- **APAC**: 89% YoY growth potential
+- **Latin America**: Emerging market entry
+- **Middle East**: Enterprise expansion
+
+## 📱 Channel Performance
+
+### Traffic Sources
+
+| Channel | Sessions | Conversion | Revenue |
+|---------|----------|------------|---------|
+| **Organic Search** | 45% | 3.2% | $1.1M |
+| **Direct** | 28% | 4.1% | $850K |
+| **Social Media** | 15% | 2.8% | $420K |
+| **Paid Ads** | 12% | 5.5% | $430K |
+
+### Marketing ROI
+
+- **Content Marketing**: 340% ROI
+- **Email Campaigns**: 280% ROI
+- **Social Media**: 190% ROI
+- **Paid Search**: 220% ROI
+
+## 🔍 User Behavior Analysis
+
+### Session Patterns
+
+- **Peak Hours**: 9-11 AM, 2-4 PM EST
+- **Mobile Usage**: 67% of sessions
+- **Average Pages/Session**: 4.8
+- **Bounce Rate**: 23% (↓ from 31%)
+
+### Feature Usage Heatmap
+
+Most used features in order:
+1. Dashboard (89% of users)
+2. Search (76% of users)
+3. Reports (64% of users)
+4. Settings (45% of users)
+5. Integrations (32% of users)
+
+## 💡 Recommendations
+
+1. **Invest** in AI capabilities (+$2M budget)
+2. **Expand** sales team in APAC region
+3. **Improve** onboarding to reduce churn
+4. **Launch** enterprise security features
+
+## Appendix
+
+### Methodology
+
+Data collected from:
+- Internal analytics (Amplitude)
+- Customer surveys (n=2,450)
+- Financial systems (NetSuite)
+- Market research (Gartner)
+
+---
+
+*Report prepared by Data Analytics Team • [View Interactive Dashboard](https://analytics.example.com)*
+`;

tools/ui/tests/stories/fixtures/empty.ts

@@ -0,0 +1,2 @@
+// Empty state
+export const EMPTY_MD = '';

tools/ui/tests/stories/fixtures/math-formulas.ts

@@ -0,0 +1,221 @@
+/* eslint-disable no-irregular-whitespace */
+// Math Formulas Content
+export const MATH_FORMULAS_MD = String.raw`
+# Mathematical Formulas and Expressions
+
+This document demonstrates various mathematical notation and formulas that can be rendered using LaTeX syntax in markdown.
+
+## Basic Arithmetic
+
+### Addition and Summation
+$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
+
+## Algebra
+
+### Quadratic Formula
+The solutions to $ax^2 + bx + c = 0$ are:
+$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
+
+### Binomial Theorem
+$$(x + y)^n = \sum_{k=0}^{n} \binom{n}{k} x^{n-k} y^k$$
+
+## Calculus
+
+### Derivatives
+The derivative of $f(x) = x^n$ is:
+$$f'(x) = nx^{n-1}$$
+
+### Integration
+$$\int_a^b f(x) \, dx = F(b) - F(a)$$
+
+### Fundamental Theorem of Calculus
+$$\frac{d}{dx} \int_a^x f(t) \, dt = f(x)$$
+
+## Linear Algebra
+
+### Matrix Multiplication
+If $A$ is an $m \times n$ matrix and $B$ is an $n \times p$ matrix, then:
+$$C_{ij} = \sum_{k=1}^{n} A_{ik} B_{kj}$$
+
+### Eigenvalues and Eigenvectors
+For a square matrix $A$, if $Av = \lambda v$ for some non-zero vector $v$, then:
+- $\lambda$ is an eigenvalue
+- $v$ is an eigenvector
+
+## Statistics and Probability
+
+### Normal Distribution
+The probability density function is:
+$$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$$
+
+### Bayes' Theorem
+$$P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}$$
+
+### Central Limit Theorem
+For large $n$, the sample mean $\bar{X}$ is approximately:
+$$\bar{X} \sim N\left(\mu, \frac{\sigma^2}{n}\right)$$
+
+## Trigonometry
+
+### Pythagorean Identity
+$$\sin^2\theta + \cos^2\theta = 1$$
+
+### Euler's Formula
+$$e^{i\theta} = \cos\theta + i\sin\theta$$
+
+### Taylor Series for Sine
+$$\sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1} = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots$$
+
+## Complex Analysis
+
+### Complex Numbers
+A complex number can be written as:
+$$z = a + bi = r e^{i\theta}$$
+
+where $r = |z| = \sqrt{a^2 + b^2}$ and $\theta = \arg(z)$
+
+### Cauchy-Riemann Equations
+For a function $f(z) = u(x,y) + iv(x,y)$ to be analytic:
+$$\frac{\partial u}{\partial x} = \frac{\partial v}{\partial y}, \quad \frac{\partial u}{\partial y} = -\frac{\partial v}{\partial x}$$
+
+## Differential Equations
+
+### First-order Linear ODE
+$$\frac{dy}{dx} + P(x)y = Q(x)$$
+
+Solution: $y = e^{-\int P(x)dx}\left[\int Q(x)e^{\int P(x)dx}dx + C\right]$
+
+### Heat Equation
+$$\frac{\partial u}{\partial t} = \alpha \frac{\partial^2 u}{\partial x^2}$$
+
+## Number Theory
+
+### Prime Number Theorem
+$$\pi(x) \sim \frac{x}{\ln x}$$
+
+where $\pi(x)$ is the number of primes less than or equal to $x$.
+
+### Fermat's Last Theorem
+For $n > 2$, there are no positive integers $a$, $b$, and $c$ such that:
+$$a^n + b^n = c^n$$
+
+## Set Theory
+
+### De Morgan's Laws
+$$\overline{A \cup B} = \overline{A} \cap \overline{B}$$
+$$\overline{A \cap B} = \overline{A} \cup \overline{B}$$
+
+## Advanced Topics
+
+### Riemann Zeta Function
+$$\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p \text{ prime}} \frac{1}{1-p^{-s}}$$
+
+### Maxwell's Equations
+$$\nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0}$$
+$$\nabla \cdot \mathbf{B} = 0$$
+$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$$
+$$\nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}$$
+
+### Schrödinger Equation
+$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$
+
+## Inline Math Examples
+
+Here are some inline mathematical expressions:
+
+- The golden ratio: $\phi = \frac{1 + \sqrt{5}}{2} \approx 1.618$
+- Euler's number: $e = \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n$
+- Pi: $\pi = 4 \sum_{n=0}^{\infty} \frac{(-1)^n}{2n+1}$
+- Square root of 2: $\sqrt{2} = 1.41421356...$
+
+## Fractions and Radicals
+
+Complex fraction: $\frac{\frac{a}{b} + \frac{c}{d}}{\frac{e}{f} - \frac{g}{h}}$
+
+Nested radicals: $\sqrt{2 + \sqrt{3 + \sqrt{4 + \sqrt{5}}}}$
+
+## Summations and Products
+
+### Geometric Series
+$$\sum_{n=0}^{\infty} ar^n = \frac{a}{1-r} \quad \text{for } |r| < 1$$
+
+### Product Notation
+$$n! = \prod_{k=1}^{n} k$$
+
+### Double Summation
+$$\sum_{i=1}^{m} \sum_{j=1}^{n} a_{ij}$$
+
+## Limits
+
+$$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
+
+$$\lim_{n \to \infty} \left(1 + \frac{x}{n}\right)^n = e^x$$
+
+## Further Bracket Styles and Amounts
+
+-  \( \mathrm{GL}_2(\mathbb{F}_7) \): Group of invertible matrices with entries in \(\mathbb{F}_7\).
+- Some kernel of \(\mathrm{SL}_2(\mathbb{F}_7)\):
+  \[
+  \left\{ \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}, \begin{pmatrix} -1 & 0 \\ 0 & -1 \end{pmatrix} \right\} = \{\pm I\}
+  \]
+- Algebra:
+\[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\]
+- $100 and $12.99 are amounts, not LaTeX.
+- I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.
+- Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?
+- Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?
+- 1 kg の質量は
+  \[
+  E = (1\ \text{kg}) \times (3.0 \times 10^8\ \text{m/s})^2 \approx 9.0 \times 10^{16}\ \text{J}
+  \]
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。
+- Algebra: \[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\]
+- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$
+- Spacer preceded by backslash:
+\[
+\boxed{
+\begin{aligned}
+N_{\text{att}}^{\text{(MHA)}} &=
+h \bigl[\, d_{\text{model}}\;d_{k} + d_{\text{model}}\;d_{v}\, \bigr]   && (\text{Q,K,V の重み})\\
+&\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\text{バイアス Q,K,V）}\\[4pt]
+&\quad+ (h d_{v})\, d_{\text{model}}                                 && (\text{出力射影 }W^{O})\\
+&\quad+ d_{\text{model}}                                            && (\text{バイアス }b^{O})
+\end{aligned}}
+\]
+
+## Formulas in a Table
+
+| Area | Expression | Comment |
+|------|------------|---------|
+| **Algebra** | \[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\] | Quadratic formula |
+| | \[
+(a+b)^{n} = \sum_{k=0}^{n}\binom{n}{k}\,a^{\,n-k}\,b^{\,k}
+\] | Binomial theorem |
+| | \(\displaystyle \prod_{k=1}^{n}k = n! \) | Factorial definition |
+| **Geometry** | \( \mathbf{a}\cdot \mathbf{b} = \|\mathbf{a}\|\,\|\mathbf{b}\|\,\cos\theta \) | Dot product & angle |
+
+## No math (but chemical)
+
+Balanced chemical reaction with states:
+
+\[
+\ce{2H2(g) + O2(g) -> 2H2O(l)}
+\]
+
+The standard enthalpy change for the reaction is: $\Delta H^\circ = \pu{-572 kJ mol^{-1}}$.
+
+---
+
+*This document showcases various mathematical notation and formulas that can be rendered in markdown using LaTeX syntax.*
+`;

tools/ui/tests/stories/fixtures/readme.ts

@@ -0,0 +1,136 @@
+// README Content
+export const README_MD = String.raw`
+# 🚀 Awesome Web Framework
+
+[![npm version](https://img.shields.io/npm/v/awesome-framework.svg)](https://www.npmjs.com/package/awesome-framework)
+[![Build Status](https://github.com/awesome/framework/workflows/CI/badge.svg)](https://github.com/awesome/framework/actions)
+[![Coverage](https://codecov.io/gh/awesome/framework/branch/main/graph/badge.svg)](https://codecov.io/gh/awesome/framework)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+> A modern, fast, and flexible web framework for building scalable applications
+
+## ✨ Features
+
+- 🎯 **Type-Safe** - Full TypeScript support out of the box
+- ⚡ **Lightning Fast** - Built on Vite for instant HMR
+- 📦 **Zero Config** - Works out of the box for most use cases
+- 🎨 **Flexible** - Unopinionated with sensible defaults
+- 🔧 **Extensible** - Plugin system for custom functionality
+- 📱 **Responsive** - Mobile-first approach
+- 🌍 **i18n Ready** - Built-in internationalization
+- 🔒 **Secure** - Security best practices by default
+
+## 📦 Installation
+
+${'```'}bash
+npm install awesome-framework
+# or
+yarn add awesome-framework
+# or
+pnpm add awesome-framework
+${'```'}
+
+## 🚀 Quick Start
+
+### Create a new project
+
+${'```'}bash
+npx create-awesome-app my-app
+cd my-app
+npm run dev
+${'```'}
+
+### Basic Example
+
+${'```'}javascript
+import { createApp } from 'awesome-framework';
+
+const app = createApp({
+  port: 3000,
+  middleware: ['cors', 'helmet', 'compression']
+});
+
+app.get('/', (req, res) => {
+  res.json({ message: 'Hello World!' });
+});
+
+app.listen(() => {
+  console.log('Server running on http://localhost:3000');
+});
+${'```'}
+
+## 📖 Documentation
+
+### Core Concepts
+
+- [Getting Started](https://docs.awesome.dev/getting-started)
+- [Configuration](https://docs.awesome.dev/configuration)
+- [Routing](https://docs.awesome.dev/routing)
+- [Middleware](https://docs.awesome.dev/middleware)
+- [Database](https://docs.awesome.dev/database)
+- [Authentication](https://docs.awesome.dev/authentication)
+
+### Advanced Topics
+
+- [Performance Optimization](https://docs.awesome.dev/performance)
+- [Deployment](https://docs.awesome.dev/deployment)
+- [Testing](https://docs.awesome.dev/testing)
+- [Security](https://docs.awesome.dev/security)
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js >= 18
+- pnpm >= 8
+
+### Setup
+
+${'```'}bash
+git clone https://github.com/awesome/framework.git
+cd framework
+pnpm install
+pnpm dev
+${'```'}
+
+### Testing
+
+${'```'}bash
+pnpm test        # Run unit tests
+pnpm test:e2e    # Run end-to-end tests
+pnpm test:watch  # Run tests in watch mode
+${'```'}
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+### Contributors
+
+<a href="https://github.com/awesome/framework/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=awesome/framework" />
+</a>
+
+## 📊 Benchmarks
+
+| Framework | Requests/sec | Latency (ms) | Memory (MB) |
+|-----------|-------------|--------------|-------------|
+| **Awesome** | **45,230** | **2.1** | **42** |
+| Express | 28,450 | 3.5 | 68 |
+| Fastify | 41,200 | 2.3 | 48 |
+| Koa | 32,100 | 3.1 | 52 |
+
+*Benchmarks performed on MacBook Pro M2, Node.js 20.x*
+
+## 📝 License
+
+MIT © [Awesome Team](https://github.com/awesome)
+
+## 🙏 Acknowledgments
+
+Special thanks to all our sponsors and contributors who make this project possible.
+
+---
+
+**[Website](https://awesome.dev)** • **[Documentation](https://docs.awesome.dev)** • **[Discord](https://discord.gg/awesome)** • **[Twitter](https://twitter.com/awesomeframework)**
+`;

tools/ui/tests/stories/fixtures/storybook-mocks.ts

@@ -0,0 +1,86 @@
+import { serverStore } from '$lib/stores/server.svelte';
+import { modelsStore } from '$lib/stores/models.svelte';
+
+/**
+ * Mock server properties for Storybook testing
+ * This utility allows setting mock server configurations without polluting production code
+ */
+export function mockServerProps(props: Partial<ApiLlamaCppServerProps>): void {
+	// Reset any pointer-events from previous tests (dropdown cleanup)
+	const body = document.querySelector('body');
+	if (body) body.style.pointerEvents = '';
+
+	// Directly set the props for testing purposes
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
+		model_path: props.model_path || 'test-model',
+		modalities: {
+			vision: props.modalities?.vision ?? false,
+			audio: props.modalities?.audio ?? false,
+			video: props.modalities?.video ?? false
+		},
+		...props
+	} as ApiLlamaCppServerProps;
+
+	// Set router mode role so activeModelId can be set
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props.role = 'ROUTER';
+
+	// Also mock modelsStore methods for modality checking
+	const vision = props.modalities?.vision ?? false;
+	const audio = props.modalities?.audio ?? false;
+	const video = props.modalities?.video ?? false;
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsVision = () => vision;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsAudio = () => audio;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsVideo = () => video;
+
+	// Mock models list with a test model so activeModelId can be resolved
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).models = [
+		{
+			id: 'test-model',
+			name: 'Test Model',
+			model: 'test-model'
+		}
+	];
+
+	// Mock selectedModelId
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).selectedModelId = 'test-model';
+}
+
+/**
+ * Reset server store to clean state for testing
+ */
+export function resetServerStore(): void {
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
+		model_path: '',
+		modalities: {
+			vision: false,
+			audio: false,
+			video: false
+		}
+	} as ApiLlamaCppServerProps;
+	(serverStore as unknown as { error: string }).error = '';
+	(serverStore as unknown as { loading: boolean }).loading = false;
+}
+
+/**
+ * Common mock configurations for Storybook stories
+ */
+export const mockConfigs = {
+	visionOnly: {
+		modalities: { vision: true, audio: false }
+	},
+	audioOnly: {
+		modalities: { vision: false, audio: true }
+	},
+	bothModalities: {
+		modalities: { vision: true, audio: true }
+	},
+	noModalities: {
+		modalities: { vision: false, audio: false, video: false }
+	}
+} as const;

tools/ui/tests/unit/abort.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { isAbortError } from '$lib/utils/abort';
+
+describe('isAbortError', () => {
+	it('returns false for null, undefined and non-error values', () => {
+		expect(isAbortError(null)).toBe(false);
+		expect(isAbortError(undefined)).toBe(false);
+		expect(isAbortError('string error')).toBe(false);
+		expect(isAbortError({ name: 'AbortError' })).toBe(false);
+		expect(isAbortError(42)).toBe(false);
+	});
+
+	it('returns true for DOMException with AbortError name', () => {
+		const err = new DOMException('Operation was aborted', 'AbortError');
+		expect(isAbortError(err)).toBe(true);
+	});
+
+	it('returns true for plain Error with AbortError name', () => {
+		const err = new Error('aborted');
+		err.name = 'AbortError';
+		expect(isAbortError(err)).toBe(true);
+	});
+
+	it('returns false for unrelated Error instances', () => {
+		expect(isAbortError(new Error('something failed'))).toBe(false);
+		expect(isAbortError(new TypeError('not related'))).toBe(false);
+		expect(isAbortError(new RangeError('out of range'))).toBe(false);
+	});
+
+	it('recognizes Firefox TypeError "Error in input stream" emitted at page unload', () => {
+		expect(isAbortError(new TypeError('Error in input stream'))).toBe(true);
+		expect(isAbortError(new TypeError('TypeError: Error in input stream'))).toBe(true);
+	});
+
+	it('recognizes Safari "The network connection was lost" during transient drop', () => {
+		expect(isAbortError(new TypeError('The network connection was lost.'))).toBe(true);
+	});
+
+	it('recognizes Safari "Load failed" during page navigation', () => {
+		expect(isAbortError(new TypeError('Load failed'))).toBe(true);
+	});
+
+	it('does NOT recognize generic TypeError messages as aborts', () => {
+		// matching too broadly would hide real bugs, the predicate must stay conservative
+		expect(isAbortError(new TypeError('Failed to fetch'))).toBe(false);
+		expect(isAbortError(new TypeError('Cannot read property of undefined'))).toBe(false);
+		expect(isAbortError(new TypeError('NetworkError when attempting to fetch resource'))).toBe(
+			false
+		);
+	});
+
+	it('is case insensitive on the matched substrings', () => {
+		expect(isAbortError(new TypeError('error in INPUT STREAM'))).toBe(true);
+		expect(isAbortError(new TypeError('the network connection WAS LOST'))).toBe(true);
+	});
+});

tools/ui/tests/unit/agentic-hotpath.bench.ts

@@ -0,0 +1,248 @@
+// Microbenchmarks for the functions on the agentic-thread streaming hot path.
+//
+// Every function here is invoked from a `$derived` that is invalidated on each
+// streamed token, for every tool-call section in the message. These numbers give
+// the per-call cost; multiply by (tokens x sections) for the real damage.
+//
+// Run: npx vitest bench --project=unit tests/unit/agentic-hotpath.bench.ts
+
+import { bench, describe } from 'vitest';
+
+import { remark } from 'remark';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkRehype from 'remark-rehype';
+import rehypeKatex from 'rehype-katex';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeStringify from 'rehype-stringify';
+import { all as lowlightAll } from 'lowlight';
+
+import { computeLineDiff } from '$lib/utils/compute-line-diff';
+import { extractSearchResults, extractSearchQuery } from '$lib/utils/search-results';
+import { parsePartialJsonArgs } from '$lib/utils/parse-partial-json-args';
+import { highlightCode, detectIncompleteCodeBlock } from '$lib/utils/code';
+import { classifyToolResult, parseToolResultWithImages } from '$lib/utils/agentic';
+import { preprocessLaTeX } from '$lib/utils/latex-protection';
+
+// --- fixtures -------------------------------------------------------------
+
+function lines(n: number, seed: string): string {
+	const out: string[] = [];
+	for (let i = 0; i < n; i++) out.push(`${seed} line ${i} const value_${i} = compute(${i});`);
+	return out.join('\n');
+}
+
+const SHELL_OUTPUT_1KB = lines(12, 'out');
+const SHELL_OUTPUT_200KB = lines(2600, 'out');
+const SHELL_OUTPUT_2MB = lines(26000, 'out');
+
+// Realistic exec_shell_command result: the exit-code marker is the final line,
+// which is what the un-anchored EXIT_CODE regex has to scan the whole blob for.
+const SHELL_2MB_WITH_EXIT = `${SHELL_OUTPUT_2MB}\n[exit code: 0]`;
+
+const EDIT_OLD_400 = lines(400, 'old');
+const EDIT_NEW_400 = lines(400, 'new');
+const EDIT_OLD_50 = lines(50, 'old');
+const EDIT_NEW_50 = lines(50, 'new');
+
+const WRITE_FILE_ARGS = JSON.stringify({
+	path: '/src/lib/thing.ts',
+	content: lines(1500, 'src')
+});
+
+const MARKDOWN_50KB = Array.from(
+	{ length: 400 },
+	(_, i) =>
+		`## Section ${i}\n\nSome **bold** prose with a [link](https://example.com) and \`inline\` code.\n\n- bullet one\n- bullet two\n\n\`\`\`ts\nconst x${i} = ${i};\n\`\`\`\n`
+).join('\n');
+
+const CODE_BLOCK_5KB = lines(60, 'code');
+
+// --- A: computeLineDiff (O(m*n) LCS, allocates a full matrix) --------------
+
+describe('computeLineDiff', () => {
+	bench('50 x 50 lines', () => {
+		computeLineDiff(EDIT_OLD_50, EDIT_NEW_50);
+	});
+
+	bench('400 x 400 lines', () => {
+		computeLineDiff(EDIT_OLD_400, EDIT_NEW_400);
+	});
+});
+
+// --- B: the unified processor, rebuilt per call ---------------------------
+// Mirrors MarkdownContent.svelte:144-176. The local rehype/remark plugins are
+// omitted (they pull in browser-only modules); rehypeHighlight + lowlightAll is
+// the dominant term, so this is a lower bound on the real cost.
+
+function buildProcessor() {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let proc: any = remark().use(remarkGfm);
+	proc = proc.use(remarkMath).use(remarkBreaks).use(remarkRehype).use(rehypeKatex);
+	return proc.use(rehypeHighlight, { languages: lowlightAll }).use(rehypeStringify, {
+		allowDangerousHtml: true
+	});
+}
+
+describe('markdown processor', () => {
+	bench('build processor (per processMarkdown call, x2)', () => {
+		buildProcessor();
+	});
+
+	const prebuilt = buildProcessor();
+
+	bench('parse 50KB markdown with a prebuilt processor', () => {
+		prebuilt.parse(MARKDOWN_50KB);
+	});
+});
+
+// Isolates the O(n^2) term measured in Tier 1: processMarkdown re-parses the
+// WHOLE accumulated string every frame, while only the last block can have
+// changed. If parse() dominates at these sizes, incremental parsing (re-parsing
+// only the tail after the last stable block) is the fix; if not, the cost is
+// downstream in transform/stringify/DOM.
+describe('markdown parse scaling (whole-string reparse per frame)', () => {
+	const proc = buildProcessor();
+	const prose = (kb: number) =>
+		Array.from(
+			{ length: Math.ceil((kb * 1024) / 64) },
+			(_, i) => `The quick brown fox jumps over the lazy dog. Sentence ${i}.`
+		).join(' ');
+
+	const MD_3KB = prose(3);
+	const MD_11KB = prose(11);
+	const MD_26KB = prose(26);
+
+	bench('parse 3KB', () => {
+		proc.parse(MD_3KB);
+	});
+
+	bench('parse 11KB', () => {
+		proc.parse(MD_11KB);
+	});
+
+	bench('parse 26KB', () => {
+		proc.parse(MD_26KB);
+	});
+
+	bench('parse only a 200-char tail (proposed incremental)', () => {
+		proc.parse(MD_26KB.slice(-200));
+	});
+});
+
+// processMarkdown runs these over the WHOLE accumulated string every frame too,
+// before parse() even starts. Measure them before assuming parse is the target.
+describe('other whole-string passes per frame', () => {
+	const prose = (kb: number) =>
+		Array.from(
+			{ length: Math.ceil((kb * 1024) / 64) },
+			(_, i) => `The quick brown fox jumps over the lazy dog. Sentence ${i}.`
+		).join(' ');
+
+	const MD_3KB = prose(3);
+	const MD_11KB = prose(11);
+	const MD_26KB = prose(26);
+	const MD_26KB_LATEX = `${MD_26KB} and some math $x^2 + y^2 = z^2$ inline.`;
+
+	bench('preprocessLaTeX 3KB (no latex present)', () => {
+		preprocessLaTeX(MD_3KB);
+	});
+
+	bench('preprocessLaTeX 11KB (no latex present)', () => {
+		preprocessLaTeX(MD_11KB);
+	});
+
+	bench('preprocessLaTeX 26KB (no latex present)', () => {
+		preprocessLaTeX(MD_26KB);
+	});
+
+	bench('preprocessLaTeX 26KB (latex present)', () => {
+		preprocessLaTeX(MD_26KB_LATEX);
+	});
+
+	bench('detectIncompleteCodeBlock 26KB', () => {
+		detectIncompleteCodeBlock(MD_26KB);
+	});
+});
+
+// --- C: extractSearchResults, run for EVERY tool of every type ------------
+
+describe('extractSearchResults (only .length > 0 is consumed)', () => {
+	bench('1KB non-search tool result', () => {
+		extractSearchResults(SHELL_OUTPUT_1KB);
+	});
+
+	bench('200KB non-search tool result', () => {
+		extractSearchResults(SHELL_OUTPUT_200KB);
+	});
+
+	bench('2MB non-search tool result', () => {
+		extractSearchResults(SHELL_OUTPUT_2MB);
+	});
+});
+
+describe('extractSearchQuery', () => {
+	bench('write_file args (throws on the JSON.parse path)', () => {
+		extractSearchQuery(WRITE_FILE_ARGS);
+	});
+});
+
+// --- E: the un-anchored exit-code regex -----------------------------------
+// Reproduced inline so the bench is independent of the current call site.
+
+const EXIT_CODE_TAIL = /\[exit code: (-?\d+)\]\s*$/;
+
+describe('exit-code regex', () => {
+	bench('whole 2MB blob (current behaviour)', () => {
+		SHELL_2MB_WITH_EXIT.match(EXIT_CODE_TAIL);
+	});
+
+	bench('last 64 chars only (proposed)', () => {
+		SHELL_2MB_WITH_EXIT.slice(-64).match(EXIT_CODE_TAIL);
+	});
+});
+
+// --- per-line result parsers ----------------------------------------------
+
+describe('parseToolResultWithImages', () => {
+	bench('1KB', () => {
+		parseToolResultWithImages(SHELL_OUTPUT_1KB, []);
+	});
+
+	bench('200KB', () => {
+		parseToolResultWithImages(SHELL_OUTPUT_200KB, []);
+	});
+
+	bench('2MB', () => {
+		parseToolResultWithImages(SHELL_OUTPUT_2MB, []);
+	});
+});
+
+describe('classifyToolResult', () => {
+	bench('200KB plain text (falls through to looksLikeMarkdown)', () => {
+		classifyToolResult(SHELL_OUTPUT_200KB);
+	});
+});
+
+describe('parsePartialJsonArgs', () => {
+	bench('write_file args, ~60KB (char-by-char scan)', () => {
+		parsePartialJsonArgs(WRITE_FILE_ARGS);
+	});
+});
+
+// --- F / I: highlight.js ---------------------------------------------------
+
+describe('highlightCode', () => {
+	bench('short bash command (title row, per token)', () => {
+		highlightCode('grep -rn "foo" src/ | head -50', 'bash');
+	});
+
+	bench('5KB known language', () => {
+		highlightCode(CODE_BLOCK_5KB, 'typescript');
+	});
+
+	bench('5KB unknown language -> highlightAuto', () => {
+		highlightCode(CODE_BLOCK_5KB, 'not-a-language');
+	});
+});

tools/ui/tests/unit/agentic-sections.test.ts

@@ -0,0 +1,280 @@
+import { describe, it, expect } from 'vitest';
+import { deriveAgenticSections, hasAgenticContent } from '$lib/utils/agentic';
+import { AgenticSectionType, MessageRole } from '$lib/enums';
+import type { DatabaseMessage } from '$lib/types/database';
+import type { ApiChatCompletionToolCall } from '$lib/types/api';
+
+function makeAssistant(overrides: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	return {
+		id: overrides.id ?? 'ast-1',
+		convId: 'conv-1',
+		type: 'text',
+		timestamp: Date.now(),
+		role: MessageRole.ASSISTANT,
+		content: overrides.content ?? '',
+		parent: null,
+		children: [],
+		...overrides
+	} as DatabaseMessage;
+}
+
+function makeToolMsg(overrides: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	return {
+		id: overrides.id ?? 'tool-1',
+		convId: 'conv-1',
+		type: 'text',
+		timestamp: Date.now(),
+		role: MessageRole.TOOL,
+		content: overrides.content ?? 'tool result',
+		parent: null,
+		children: [],
+		toolCallId: overrides.toolCallId ?? 'call_1',
+		...overrides
+	} as DatabaseMessage;
+}
+
+describe('deriveAgenticSections', () => {
+	it('returns empty array for assistant with no content', () => {
+		const msg = makeAssistant({ content: '' });
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toEqual([]);
+	});
+
+	it('returns text section for simple assistant message', () => {
+		const msg = makeAssistant({ content: 'Hello world' });
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[0].content).toBe('Hello world');
+	});
+
+	it('returns reasoning + text for message with reasoning', () => {
+		const msg = makeAssistant({
+			content: 'Answer is 4.',
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[0].content).toBe('Let me think...');
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+	});
+
+	it('single turn: assistant with tool calls and results', () => {
+		const msg = makeAssistant({
+			content: 'Let me check.',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'search', arguments: '{"q":"test"}' }
+				}
+			])
+		});
+		const toolResult = makeToolMsg({
+			toolCallId: 'call_1',
+			content: 'Found 3 results'
+		});
+		const sections = deriveAgenticSections(msg, [toolResult]);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[1].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[1].toolName).toBe('search');
+		expect(sections[1].toolResult).toBe('Found 3 results');
+	});
+
+	it('single turn: pending tool call without result', () => {
+		const msg = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'bash', arguments: '{}' } }
+			])
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL_PENDING);
+		expect(sections[0].toolName).toBe('bash');
+	});
+
+	it('chat-streaming write_file surfaces as TOOL_CALL_PENDING with partial toolArgs (not TOOL_CALL_STREAMING)', () => {
+		// Regression: while the LLM is emitting a write_file tool call's
+		// args, `chat.svelte.ts` JSON-encodes the partial tool-call array on
+		// every chunk, so `parseToolCalls` succeeds and the section is
+		// classified TOOL_CALL_PENDING - not TOOL_CALL_STREAMING (which is
+		// only produced from the `streamingToolCalls` parameter, never set
+		// by current UI callers). Streaming-only UI like auto-scroll in the
+		// code block must still trigger, driven by `isStreaming && (isPending
+		// || isStreamingCall)`, not `isStreamingCall` alone.
+		const partialArgs = '{"path":"/Users/fifa2026.html","content":"<!DOCTYPE h';
+		const msg = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'write_file', arguments: partialArgs } }
+			])
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL_PENDING);
+		expect(sections[0].type).not.toBe(AgenticSectionType.TOOL_CALL_STREAMING);
+		expect(sections[0].toolName).toBe('write_file');
+		expect(sections[0].toolArgs).toBe(partialArgs);
+	});
+
+	it('multi-turn: two assistant turns grouped as one session', () => {
+		const assistant1 = makeAssistant({
+			id: 'ast-1',
+			content: 'Turn 1 text',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'search', arguments: '{"q":"foo"}' }
+				}
+			])
+		});
+		const tool1 = makeToolMsg({ id: 'tool-1', toolCallId: 'call_1', content: 'result 1' });
+		const assistant2 = makeAssistant({
+			id: 'ast-2',
+			content: 'Final answer based on results.'
+		});
+
+		// toolMessages contains both tool result and continuation assistant
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2]);
+		expect(sections).toHaveLength(3);
+		// Turn 1
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[0].content).toBe('Turn 1 text');
+		expect(sections[1].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[1].toolName).toBe('search');
+		expect(sections[1].toolResult).toBe('result 1');
+		// Turn 2 (final)
+		expect(sections[2].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[2].content).toBe('Final answer based on results.');
+	});
+
+	it('multi-turn: three turns with tool calls', () => {
+		const assistant1 = makeAssistant({
+			id: 'ast-1',
+			content: '',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'list_files', arguments: '{}' }
+				}
+			])
+		});
+		const tool1 = makeToolMsg({ id: 'tool-1', toolCallId: 'call_1', content: 'file1 file2' });
+		const assistant2 = makeAssistant({
+			id: 'ast-2',
+			content: 'Reading file1...',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_2',
+					type: 'function',
+					function: { name: 'read_file', arguments: '{"path":"file1"}' }
+				}
+			])
+		});
+		const tool2 = makeToolMsg({
+			id: 'tool-2',
+			toolCallId: 'call_2',
+			content: 'contents of file1'
+		});
+		const assistant3 = makeAssistant({
+			id: 'ast-3',
+			content: 'Here is the analysis.',
+			reasoningContent: 'The file contains...'
+		});
+
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2, tool2, assistant3]);
+		// Turn 1: tool_call (no text since content is empty)
+		// Turn 2: text + tool_call
+		// Turn 3: reasoning + text
+		expect(sections).toHaveLength(5);
+		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[0].toolName).toBe('list_files');
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[1].content).toBe('Reading file1...');
+		expect(sections[2].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[2].toolName).toBe('read_file');
+		expect(sections[3].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[4].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[4].content).toBe('Here is the analysis.');
+	});
+
+	it('returns REASONING_PENDING when streaming with only reasoning content', () => {
+		const msg = makeAssistant({
+			reasoningContent: 'Let me think about this...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING_PENDING);
+		expect(sections[0].content).toBe('Let me think about this...');
+	});
+
+	it('returns REASONING (not pending) when streaming but text content has appeared', () => {
+		const msg = makeAssistant({
+			content: 'The answer is',
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+	});
+
+	it('returns REASONING (not pending) when not streaming', () => {
+		const msg = makeAssistant({
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], false);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+	});
+
+	it('multi-turn: streaming tool calls on last turn', () => {
+		const assistant1 = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'search', arguments: '{}' } }
+			])
+		});
+		const tool1 = makeToolMsg({ toolCallId: 'call_1', content: 'result' });
+		const assistant2 = makeAssistant({ id: 'ast-2', content: '' });
+
+		const streamingToolCalls: ApiChatCompletionToolCall[] = [
+			{ id: 'call_2', type: 'function', function: { name: 'write_file', arguments: '{"pa' } }
+		];
+
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2], streamingToolCalls);
+		// Turn 1: tool_call
+		// Turn 2 (streaming): streaming tool call
+		expect(sections.some((s) => s.type === AgenticSectionType.TOOL_CALL)).toBe(true);
+		expect(sections.some((s) => s.type === AgenticSectionType.TOOL_CALL_STREAMING)).toBe(true);
+	});
+});
+
+describe('hasAgenticContent', () => {
+	it('returns false for plain assistant', () => {
+		const msg = makeAssistant({ content: 'Just text' });
+		expect(hasAgenticContent(msg)).toBe(false);
+	});
+
+	it('returns true when message has toolCalls', () => {
+		const msg = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'test', arguments: '{}' } }
+			])
+		});
+		expect(hasAgenticContent(msg)).toBe(true);
+	});
+
+	it('returns true when toolMessages are provided', () => {
+		const msg = makeAssistant();
+		const tool = makeToolMsg();
+		expect(hasAgenticContent(msg, [tool])).toBe(true);
+	});
+
+	it('returns false for empty toolCalls JSON', () => {
+		const msg = makeAssistant({ toolCalls: '[]' });
+		expect(hasAgenticContent(msg)).toBe(false);
+	});
+});

tools/ui/tests/unit/agentic-strip.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { LEGACY_AGENTIC_REGEX } from '$lib/constants/agentic';
+
+/**
+ * Tests for legacy marker stripping (used in migration).
+ * The new system does not embed markers in content - these tests verify
+ * the legacy regex patterns still work for the migration code.
+ */
+
+// Mirror the legacy stripping logic used during migration
+function stripLegacyContextMarkers(content: string): string {
+	return content
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.REASONING_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.REASONING_OPEN, '')
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_OPEN, '');
+}
+
+// A realistic complete tool call block as stored in old message.content
+const COMPLETE_BLOCK =
+	'\n\n<<<AGENTIC_TOOL_CALL_START>>>\n' +
+	'<<<TOOL_NAME:bash_tool>>>\n' +
+	'<<<TOOL_ARGS_START>>>\n' +
+	'{"command":"ls /tmp","description":"list tmp"}\n' +
+	'<<<TOOL_ARGS_END>>>\n' +
+	'file1.txt\nfile2.txt\n' +
+	'<<<AGENTIC_TOOL_CALL_END>>>\n';
+
+// Partial block: streaming was cut before END arrived.
+const OPEN_BLOCK =
+	'\n\n<<<AGENTIC_TOOL_CALL_START>>>\n' +
+	'<<<TOOL_NAME:bash_tool>>>\n' +
+	'<<<TOOL_ARGS_START>>>\n' +
+	'{"command":"ls /tmp","description":"list tmp"}\n' +
+	'<<<TOOL_ARGS_END>>>\n' +
+	'partial output...';
+
+describe('legacy agentic marker stripping (for migration)', () => {
+	it('strips a complete tool call block, leaving surrounding text', () => {
+		const input = 'Before.' + COMPLETE_BLOCK + 'After.';
+		const result = stripLegacyContextMarkers(input);
+		expect(result).not.toContain('<<<');
+		expect(result).toContain('Before.');
+		expect(result).toContain('After.');
+	});
+
+	it('strips multiple complete tool call blocks', () => {
+		const input = 'A' + COMPLETE_BLOCK + 'B' + COMPLETE_BLOCK + 'C';
+		const result = stripLegacyContextMarkers(input);
+		expect(result).not.toContain('<<<');
+		expect(result).toContain('A');
+		expect(result).toContain('B');
+		expect(result).toContain('C');
+	});
+
+	it('strips an open/partial tool call block (no END marker)', () => {
+		const input = 'Lead text.' + OPEN_BLOCK;
+		const result = stripLegacyContextMarkers(input);
+		expect(result).toBe('Lead text.');
+		expect(result).not.toContain('<<<');
+	});
+
+	it('does not alter content with no markers', () => {
+		const input = 'Just a normal assistant response.';
+		expect(stripLegacyContextMarkers(input)).toBe(input);
+	});
+
+	it('strips reasoning block independently', () => {
+		const input = '<<<reasoning_content_start>>>think hard<<<reasoning_content_end>>>Answer.';
+		expect(stripLegacyContextMarkers(input)).toBe('Answer.');
+	});
+
+	it('strips both reasoning and agentic blocks together', () => {
+		const input =
+			'<<<reasoning_content_start>>>plan<<<reasoning_content_end>>>' +
+			'Some text.' +
+			COMPLETE_BLOCK;
+		expect(stripLegacyContextMarkers(input)).not.toContain('<<<');
+		expect(stripLegacyContextMarkers(input)).toContain('Some text.');
+	});
+
+	it('empty string survives', () => {
+		expect(stripLegacyContextMarkers('')).toBe('');
+	});
+
+	it('detects legacy markers', () => {
+		expect(LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('normal text')).toBe(false);
+		expect(
+			LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('text<<<AGENTIC_TOOL_CALL_START>>>more')
+		).toBe(true);
+		expect(LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('<<<reasoning_content_start>>>think')).toBe(
+			true
+		);
+	});
+});

tools/ui/tests/unit/assistant-raw-output.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { AgenticSectionType } from '$lib/enums';
+import { REASONING_TAGS } from '$lib/constants';
+import { buildAssistantRawOutput, type AgenticSection } from '$lib/utils/agentic';
+
+function makeSection(
+	overrides: Partial<AgenticSection> & { type: AgenticSectionType }
+): AgenticSection {
+	return {
+		content: '',
+		...overrides
+	};
+}
+
+describe('buildAssistantRawOutput', () => {
+	it('returns empty string for empty sections', () => {
+		expect(buildAssistantRawOutput([])).toBe('');
+	});
+
+	it('formats a reasoning section with a single newline between tags and content', () => {
+		const sections = [makeSection({ type: AgenticSectionType.REASONING, content: 'thinking...' })];
+		expect(buildAssistantRawOutput(sections)).toBe(
+			`${REASONING_TAGS.START}\nthinking...${REASONING_TAGS.END}`
+		);
+	});
+
+	it('formats a text section as-is', () => {
+		const sections = [makeSection({ type: AgenticSectionType.TEXT, content: 'Hello' })];
+		expect(buildAssistantRawOutput(sections)).toBe('Hello');
+	});
+
+	it('formats a tool call with JSON args and no result label', () => {
+		const sections = [
+			makeSection({
+				type: AgenticSectionType.TOOL_CALL,
+				toolName: 'read_file',
+				toolArgs: JSON.stringify({ path: '/tmp/file.txt' }),
+				toolResult: 'file contents'
+			})
+		];
+		expect(buildAssistantRawOutput(sections)).toBe(
+			[
+				'{',
+				'  "name": "read_file",',
+				'  "arguments": {',
+				'    "path": "/tmp/file.txt"',
+				'  }',
+				'}',
+				'',
+				'',
+				'file contents'
+			].join('\n')
+		);
+	});
+
+	it('joins multiple sections with double newlines', () => {
+		const sections = [
+			makeSection({ type: AgenticSectionType.TEXT, content: 'Hello' }),
+			makeSection({ type: AgenticSectionType.TOOL_CALL, toolName: 'noop' })
+		];
+		expect(buildAssistantRawOutput(sections)).toBe('Hello\n\n{\n  "name": "noop"\n}');
+	});
+
+	it('falls back to raw string args when JSON parsing fails', () => {
+		const sections = [
+			makeSection({
+				type: AgenticSectionType.TOOL_CALL,
+				toolName: 'broken',
+				toolArgs: '{not json',
+				toolResult: 'result'
+			})
+		];
+		expect(buildAssistantRawOutput(sections)).toBe(
+			['{', '  "name": "broken",', '  "arguments": "{not json"', '}', '', '', 'result'].join('\n')
+		);
+	});
+});

tools/ui/tests/unit/classify-tool-result.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest';
+import { classifyToolResult } from '$lib/utils/agentic';
+
+describe('classifyToolResult', () => {
+	describe('text', () => {
+		it('returns text for undefined input', () => {
+			expect(classifyToolResult(undefined)).toBe('text');
+		});
+
+		it('returns text for empty string', () => {
+			expect(classifyToolResult('')).toBe('text');
+		});
+
+		it('returns text for whitespace-only input', () => {
+			expect(classifyToolResult('   \n  ')).toBe('text');
+		});
+
+		it('returns text for plain prose', () => {
+			expect(classifyToolResult('Hello, this is just some text.')).toBe('text');
+		});
+
+		it('returns text for shell-style line listings', () => {
+			expect(classifyToolResult('file1.java\nfile2.java\nfile3.java\n')).toBe('text');
+		});
+
+		it('returns text when a brace-like string is not valid JSON', () => {
+			expect(classifyToolResult('{key: value}')).toBe('text');
+		});
+	});
+
+	describe('json', () => {
+		it('classifies a flat JSON object', () => {
+			expect(classifyToolResult('{"key": "value", "n": 42}')).toBe('json');
+		});
+
+		it('classifies a JSON array', () => {
+			expect(classifyToolResult('["a", "b", "c"]')).toBe('json');
+		});
+
+		it('classifies a pretty-printed JSON object', () => {
+			expect(classifyToolResult('{\n  "key": "value"\n}')).toBe('json');
+		});
+
+		it('classifies a deeply nested JSON payload', () => {
+			const nested = JSON.stringify({ items: [{ id: 1, tags: ['a', 'b'] }] }, null, 2);
+			expect(classifyToolResult(nested)).toBe('json');
+		});
+
+		it('prefers JSON over inner markdown markers when the content starts with a brace', () => {
+			// A JSON object whose inner strings contain link syntax still
+			// reads as JSON because the leading `{` parses cleanly -
+			// `classifyToolResult` only inspects the top-level shape, not
+			// every nested line marker.
+			const jsonWithLink = '{"docs": "see [docs](https://example.com) for more"}';
+			expect(classifyToolResult(jsonWithLink)).toBe('json');
+		});
+	});
+
+	describe('markdown', () => {
+		it('classifies an ATX header line', () => {
+			expect(classifyToolResult('# Title\n\nSome text below.')).toBe('markdown');
+		});
+
+		it('classifies a fenced code block', () => {
+			expect(classifyToolResult('```json\n{"key": "v"}\n```')).toBe('markdown');
+		});
+
+		it('classifies a tilde-fenced code block', () => {
+			expect(classifyToolResult('~~~bash\nls -la\n~~~')).toBe('markdown');
+		});
+
+		it('classifies a markdown link', () => {
+			expect(classifyToolResult('See [docs](https://example.com) for more.')).toBe('markdown');
+		});
+
+		it('classifies bold text', () => {
+			expect(classifyToolResult('This is **very important**.')).toBe('markdown');
+		});
+
+		it('classifies a bulleted list', () => {
+			expect(classifyToolResult('- item one\n- item two\n- item three')).toBe('markdown');
+		});
+
+		it('classifies an ordered list', () => {
+			expect(classifyToolResult('1. first step\n2. second step\n3. third step')).toBe('markdown');
+		});
+
+		it('classifies a blockquote', () => {
+			expect(classifyToolResult('> quoted text\n> second line')).toBe('markdown');
+		});
+
+		it('classifies a markdown table', () => {
+			const table = '| a | b |\n| - | - |\n| 1 | 2 |';
+			expect(classifyToolResult(table)).toBe('markdown');
+		});
+
+		it('classifies a markdown table with alignment markers', () => {
+			const table = '| left | center | right |\n| :--- | :---: | ---: |\n| a | b | c |';
+			expect(classifyToolResult(table)).toBe('markdown');
+		});
+
+		it('classifies nested markdown headings', () => {
+			expect(classifyToolResult('## Section\n\n### Subsection\n')).toBe('markdown');
+		});
+
+		it('classifies combined markdown markers in one document', () => {
+			const md = [
+				'# Heading',
+				'',
+				'A paragraph with a [link](https://example.com) and **bold text**.',
+				'',
+				'- bullet item',
+				'- another bullet',
+				'',
+				'| col1 | col2 |',
+				'| ----- | ----- |',
+				'| a     | b     |'
+			].join('\n');
+			expect(classifyToolResult(md)).toBe('markdown');
+		});
+	});
+
+	describe('precedence', () => {
+		it('prefers JSON over markdown when both signals are present', () => {
+			// Starts with `[`, parses as JSON - markdown check is skipped.
+			const arr = '[1, 2, "# not-a-heading", "**not-bold**"]';
+			expect(classifyToolResult(arr)).toBe('json');
+		});
+	});
+});

tools/ui/tests/unit/clipboard.test.ts

@@ -0,0 +1,423 @@
+import { describe, it, expect } from 'vitest';
+import { AttachmentType } from '$lib/enums';
+import {
+	formatMessageForClipboard,
+	parseClipboardContent,
+	hasClipboardAttachments
+} from '$lib/utils/clipboard';
+
+describe('formatMessageForClipboard', () => {
+	it('returns plain content when no extras', () => {
+		const result = formatMessageForClipboard('Hello world', undefined);
+		expect(result).toBe('Hello world');
+	});
+
+	it('returns plain content when extras is empty array', () => {
+		const result = formatMessageForClipboard('Hello world', []);
+		expect(result).toBe('Hello world');
+	});
+
+	it('handles empty string content', () => {
+		const result = formatMessageForClipboard('', undefined);
+		expect(result).toBe('');
+	});
+
+	it('returns plain content when extras has only non-text attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.IMAGE as const,
+				name: 'image.png',
+				base64Url: 'data:image/png;base64,...'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras);
+		expect(result).toBe('Hello world');
+	});
+
+	it('filters non-text attachments and keeps only text ones', () => {
+		const extras = [
+			{
+				type: AttachmentType.IMAGE as const,
+				name: 'image.png',
+				base64Url: 'data:image/png;base64,...'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file.txt',
+				content: 'Text content'
+			},
+			{
+				type: AttachmentType.PDF as const,
+				name: 'doc.pdf',
+				base64Data: 'data:application/pdf;base64,...',
+				content: 'PDF content',
+				processedAsImages: false
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras);
+
+		expect(result).toContain('"file.txt"');
+		expect(result).not.toContain('image.png');
+		expect(result).not.toContain('doc.pdf');
+	});
+
+	it('formats message with text attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'File 1 content'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'File 2 content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras);
+
+		expect(result).toContain('"Hello world"');
+		expect(result).toContain('"type": "TEXT"');
+		expect(result).toContain('"name": "file1.txt"');
+		expect(result).toContain('"content": "File 1 content"');
+		expect(result).toContain('"name": "file2.txt"');
+	});
+
+	it('handles content with quotes and special characters', () => {
+		const content = 'Hello "world" with\nnewline';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'test.txt',
+				content: 'Test content'
+			}
+		];
+		const result = formatMessageForClipboard(content, extras);
+
+		// Should be valid JSON
+		expect(result.startsWith('"')).toBe(true);
+		// The content should be properly escaped
+		const parsed = JSON.parse(result.split('\n')[0]);
+		expect(parsed).toBe(content);
+	});
+
+	it('converts legacy context type to TEXT type', () => {
+		const extras = [
+			{
+				type: AttachmentType.LEGACY_CONTEXT as const,
+				name: 'legacy.txt',
+				content: 'Legacy content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras);
+
+		expect(result).toContain('"type": "TEXT"');
+		expect(result).not.toContain('"context"');
+	});
+
+	it('handles attachment content with special characters', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'code.js',
+				content: 'const x = "hello\\nworld";\nconst y = `template ${var}`;'
+			}
+		];
+		const formatted = formatMessageForClipboard('Check this code', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.textAttachments[0].content).toBe(
+			'const x = "hello\\nworld";\nconst y = `template ${var}`;'
+		);
+	});
+
+	it('handles unicode characters in content and attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'unicode.txt',
+				content: '日本語テスト 🎉 émojis'
+			}
+		];
+		const formatted = formatMessageForClipboard('Привет мир 👋', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('Привет мир 👋');
+		expect(parsed.textAttachments[0].content).toBe('日本語テスト 🎉 émojis');
+	});
+
+	it('formats as plain text when asPlainText is true', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'File 1 content'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'File 2 content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras, true);
+
+		expect(result).toBe('Hello world\n\nFile 1 content\n\nFile 2 content');
+	});
+
+	it('returns plain content when asPlainText is true but no attachments', () => {
+		const result = formatMessageForClipboard('Hello world', [], true);
+		expect(result).toBe('Hello world');
+	});
+
+	it('plain text mode does not use JSON format', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'test.txt',
+				content: 'Test content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras, true);
+
+		expect(result).not.toContain('"type"');
+		expect(result).not.toContain('[');
+		expect(result).toBe('Hello\n\nTest content');
+	});
+});
+
+describe('parseClipboardContent', () => {
+	it('returns plain text as message when not in special format', () => {
+		const result = parseClipboardContent('Hello world');
+
+		expect(result.message).toBe('Hello world');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('handles empty string input', () => {
+		const result = parseClipboardContent('');
+
+		expect(result.message).toBe('');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('handles whitespace-only input', () => {
+		const result = parseClipboardContent('   \n\t  ');
+
+		expect(result.message).toBe('   \n\t  ');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('returns plain text as message when starts with quote but invalid format', () => {
+		const result = parseClipboardContent('"Unclosed quote');
+
+		expect(result.message).toBe('"Unclosed quote');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('returns original text when JSON array is malformed', () => {
+		const input = '"Hello"\n[invalid json';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('"Hello"\n[invalid json');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('parses message with text attachments', () => {
+		const input = `"Hello world"
+[
+  {"type":"TEXT","name":"file1.txt","content":"File 1 content"},
+  {"type":"TEXT","name":"file2.txt","content":"File 2 content"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello world');
+		expect(result.textAttachments).toHaveLength(2);
+		expect(result.textAttachments[0].name).toBe('file1.txt');
+		expect(result.textAttachments[0].content).toBe('File 1 content');
+		expect(result.textAttachments[1].name).toBe('file2.txt');
+		expect(result.textAttachments[1].content).toBe('File 2 content');
+	});
+
+	it('handles escaped quotes in message', () => {
+		const input = `"Hello \\"world\\" with quotes"
+[
+  {"type":"TEXT","name":"file.txt","content":"test"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello "world" with quotes');
+		expect(result.textAttachments).toHaveLength(1);
+	});
+
+	it('handles newlines in message', () => {
+		const input = `"Hello\\nworld"
+[
+  {"type":"TEXT","name":"file.txt","content":"test"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello\nworld');
+		expect(result.textAttachments).toHaveLength(1);
+	});
+
+	it('returns message only when no array follows', () => {
+		const input = '"Just a quoted string"';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Just a quoted string');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('filters out invalid attachment objects', () => {
+		const input = `"Hello"
+[
+  {"type":"TEXT","name":"valid.txt","content":"valid"},
+  {"type":"INVALID","name":"invalid.txt","content":"invalid"},
+  {"name":"missing-type.txt","content":"missing"},
+  {"type":"TEXT","content":"missing name"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello');
+		expect(result.textAttachments).toHaveLength(1);
+		expect(result.textAttachments[0].name).toBe('valid.txt');
+	});
+
+	it('handles empty attachments array', () => {
+		const input = '"Hello"\n[]';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('roundtrips correctly with formatMessageForClipboard', () => {
+		const originalContent = 'Hello "world" with\nspecial characters';
+		const originalExtras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'Content with\nnewlines and "quotes"'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'Another file'
+			}
+		];
+
+		const formatted = formatMessageForClipboard(originalContent, originalExtras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(originalContent);
+		expect(parsed.textAttachments).toHaveLength(2);
+		expect(parsed.textAttachments[0].name).toBe('file1.txt');
+		expect(parsed.textAttachments[0].content).toBe('Content with\nnewlines and "quotes"');
+		expect(parsed.textAttachments[1].name).toBe('file2.txt');
+		expect(parsed.textAttachments[1].content).toBe('Another file');
+	});
+});
+
+describe('hasClipboardAttachments', () => {
+	it('returns false for plain text', () => {
+		expect(hasClipboardAttachments('Hello world')).toBe(false);
+	});
+
+	it('returns false for empty string', () => {
+		expect(hasClipboardAttachments('')).toBe(false);
+	});
+
+	it('returns false for quoted string without attachments', () => {
+		expect(hasClipboardAttachments('"Hello world"')).toBe(false);
+	});
+
+	it('returns true for valid format with attachments', () => {
+		const input = `"Hello"
+[{"type":"TEXT","name":"file.txt","content":"test"}]`;
+
+		expect(hasClipboardAttachments(input)).toBe(true);
+	});
+
+	it('returns false for format with empty attachments array', () => {
+		const input = '"Hello"\n[]';
+
+		expect(hasClipboardAttachments(input)).toBe(false);
+	});
+
+	it('returns false for malformed JSON', () => {
+		expect(hasClipboardAttachments('"Hello"\n[broken')).toBe(false);
+	});
+});
+
+describe('roundtrip edge cases', () => {
+	it('preserves empty message with attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file.txt',
+				content: 'Content only'
+			}
+		];
+		const formatted = formatMessageForClipboard('', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('');
+		expect(parsed.textAttachments).toHaveLength(1);
+		expect(parsed.textAttachments[0].content).toBe('Content only');
+	});
+
+	it('preserves attachment with empty content', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'empty.txt',
+				content: ''
+			}
+		];
+		const formatted = formatMessageForClipboard('Message', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('Message');
+		expect(parsed.textAttachments).toHaveLength(1);
+		expect(parsed.textAttachments[0].content).toBe('');
+	});
+
+	it('preserves multiple backslashes', () => {
+		const content = 'Path: C:\\\\Users\\\\test\\\\file.txt';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'path.txt',
+				content: 'D:\\\\Data\\\\file'
+			}
+		];
+		const formatted = formatMessageForClipboard(content, extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(content);
+		expect(parsed.textAttachments[0].content).toBe('D:\\\\Data\\\\file');
+	});
+
+	it('preserves tabs and various whitespace', () => {
+		const content = 'Line1\t\tTabbed\n  Spaced\r\nCRLF';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'whitespace.txt',
+				content: '\t\t\n\n   '
+			}
+		];
+		const formatted = formatMessageForClipboard(content, extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(content);
+		expect(parsed.textAttachments[0].content).toBe('\t\t\n\n   ');
+	});
+});

tools/ui/tests/unit/code.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { highlightCode, trimCodePadding } from '$lib/utils/code';
+
+describe('trimCodePadding', () => {
+	it('removes a single leading newline', () => {
+		expect(trimCodePadding('\nfunction foo() {}')).toBe('function foo() {}');
+	});
+
+	it('removes multiple leading newlines', () => {
+		expect(trimCodePadding('\n\n\nfunction foo() {}')).toBe('function foo() {}');
+	});
+
+	it('removes whitespace-only leading lines', () => {
+		expect(trimCodePadding('\n  \n\t\nfunction foo() {}')).toBe('function foo() {}');
+	});
+
+	it('removes a single trailing newline', () => {
+		expect(trimCodePadding('function foo() {}\n')).toBe('function foo() {}');
+	});
+
+	it('removes multiple trailing newlines', () => {
+		expect(trimCodePadding('function foo() {}\n\n\n')).toBe('function foo() {}');
+	});
+
+	it('removes whitespace-only trailing lines', () => {
+		expect(trimCodePadding('function foo() {}\n  \n\t\n')).toBe('function foo() {}');
+	});
+
+	it('removes newlines on both sides at once', () => {
+		expect(trimCodePadding('\nfunction foo() {}\n')).toBe('function foo() {}');
+	});
+
+	it('preserves internal blank lines', () => {
+		expect(trimCodePadding('\nfunction foo() {\n\n  return 1;\n}\n')).toBe(
+			'function foo() {\n\n  return 1;\n}'
+		);
+	});
+
+	it('drops a leading whitespace-only line but keeps following code intact', () => {
+		expect(trimCodePadding('  \nfunction foo() {}')).toBe('function foo() {}');
+	});
+
+	it('passes through already-trimmed input unchanged', () => {
+		expect(trimCodePadding('function foo() {}')).toBe('function foo() {}');
+		expect(trimCodePadding('function foo() {\n  return 1;\n}')).toBe(
+			'function foo() {\n  return 1;\n}'
+		);
+	});
+
+	it('returns empty string when input is whitespace only', () => {
+		expect(trimCodePadding('\n\n\n')).toBe('');
+		expect(trimCodePadding('\n  \n\t\n')).toBe('');
+	});
+});
+
+describe('highlightCode', () => {
+	it('returns empty string for empty input', () => {
+		expect(highlightCode('', 'javascript')).toBe('');
+	});
+
+	it('does not produce a leading newline in the highlighted html', () => {
+		const html = highlightCode('\nfunction multiply(a, b) {\n  return a * b;\n}\n', 'javascript');
+		expect(html.startsWith('\n')).toBe(false);
+		expect(html.startsWith(' ')).toBe(false);
+	});
+
+	it('does not produce a trailing newline in the highlighted html', () => {
+		const html = highlightCode('\nfunction foo() {}\n', 'javascript');
+		expect(html.endsWith('\n')).toBe(false);
+	});
+
+	it('preserves internal blank lines in highlighted code', () => {
+		const html = highlightCode('\nfunction foo() {\n\n  return 1;\n}\n', 'javascript');
+		expect(html).toContain('\n\n');
+	});
+
+	it('produces the same body for framed and unframed input', () => {
+		const trimmed = highlightCode('function foo() {}', 'javascript');
+		const framed = highlightCode('\nfunction foo() {}\n', 'javascript');
+		expect(framed).toBe(trimmed);
+	});
+
+	it('auto-detects an unknown language by default', () => {
+		const html = highlightCode('const answer = 42;', 'not-a-language');
+		expect(html).toContain('hljs-');
+	});
+
+	it('escapes instead of auto-detecting when autoDetect is false', () => {
+		const html = highlightCode('const answer = 42;', 'not-a-language', false);
+		expect(html).not.toContain('hljs-');
+		expect(html).toBe('const answer = 42;');
+	});
+
+	it('still highlights a known language when autoDetect is false', () => {
+		const html = highlightCode('const answer = 42;', 'javascript', false);
+		expect(html).toContain('hljs-');
+	});
+
+	it('escapes html metacharacters when falling back to plain text', () => {
+		const html = highlightCode('<script>a && b</script>', 'not-a-language', false);
+		expect(html).toBe('&lt;script&gt;a &amp;&amp; b&lt;/script&gt;');
+	});
+});

tools/ui/tests/unit/compute-line-diff.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'vitest';
+import { DiffLineKind } from '$lib/enums';
+import { computeLineDiff, renderUnifiedDiff, type DiffLine } from '$lib/utils';
+
+describe('computeLineDiff', () => {
+	it('returns empty for two empty inputs', () => {
+		expect(computeLineDiff('', '')).toEqual([]);
+	});
+
+	it('marks every line as removed for an empty new text', () => {
+		expect(computeLineDiff('a\nb\nc', '')).toEqual([
+			{ kind: 'remove', text: 'a', oldLine: 1 },
+			{ kind: 'remove', text: 'b', oldLine: 2 },
+			{ kind: 'remove', text: 'c', oldLine: 3 }
+		]);
+	});
+
+	it('marks every line as added for an empty old text', () => {
+		expect(computeLineDiff('', 'a\nb')).toEqual([
+			{ kind: 'add', text: 'a', newLine: 1 },
+			{ kind: 'add', text: 'b', newLine: 2 }
+		]);
+	});
+
+	it('detects a single-line replace', () => {
+		expect(computeLineDiff('old', 'new')).toEqual([
+			{ kind: 'add', text: 'new', newLine: 1 },
+			{ kind: 'remove', text: 'old', oldLine: 1 }
+		]);
+	});
+
+	it('preserves interleaved context around additions', () => {
+		const oldText = ['a', 'b', 'c'].join('\n');
+		const newText = ['a', 'b', 'B', 'c'].join('\n');
+		expect(computeLineDiff(oldText, newText)).toEqual([
+			{ kind: 'context', text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: 'context', text: 'b', oldLine: 2, newLine: 2 },
+			{ kind: 'add', text: 'B', newLine: 3 },
+			{ kind: 'context', text: 'c', oldLine: 3, newLine: 4 }
+		]);
+	});
+
+	it('preserves interleaved context around an isolated replace', () => {
+		// Multi-line context around a one-line change -> the diff should
+		// show context flanking the changed line at its natural position.
+		const oldText = ['a', 'b', 'c', 'd'].join('\n');
+		const newText = ['a', 'b', 'X', 'd'].join('\n');
+		expect(computeLineDiff(oldText, newText)).toEqual([
+			{ kind: 'context', text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: 'context', text: 'b', oldLine: 2, newLine: 2 },
+			{ kind: 'add', text: 'X', newLine: 3 },
+			{ kind: 'remove', text: 'c', oldLine: 3 },
+			{ kind: 'context', text: 'd', oldLine: 4, newLine: 4 }
+		]);
+	});
+
+	it('preserves interleaved context around removals', () => {
+		const oldText = ['a', 'b', 'c', 'd'].join('\n');
+		const newText = ['a', 'c', 'd'].join('\n');
+		expect(computeLineDiff(oldText, newText)).toEqual([
+			{ kind: 'context', text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: 'remove', text: 'b', oldLine: 2 },
+			{ kind: 'context', text: 'c', oldLine: 3, newLine: 2 },
+			{ kind: 'context', text: 'd', oldLine: 4, newLine: 3 }
+		]);
+	});
+
+	it('handles purely identical inputs', () => {
+		const text = 'x\ny\nz';
+		const result = computeLineDiff(text, text);
+		expect(result).toEqual([
+			{ kind: 'context', text: 'x', oldLine: 1, newLine: 1 },
+			{ kind: 'context', text: 'y', oldLine: 2, newLine: 2 },
+			{ kind: 'context', text: 'z', oldLine: 3, newLine: 3 }
+		]);
+	});
+
+	it('strips a trailing newline on the old/new inputs', () => {
+		expect(computeLineDiff('a\n', 'a\nb\n')).toEqual([
+			{ kind: 'context', text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: 'add', text: 'b', newLine: 2 }
+		]);
+	});
+
+	it('normalizes trailing CR on each line', () => {
+		expect(computeLineDiff('a\r\nb\r\n', 'a\nb')).toEqual([
+			{ kind: 'context', text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: 'context', text: 'b', oldLine: 2, newLine: 2 }
+		]);
+	});
+
+	it('keeps line numbers monotonic across mixed add/remove/context', () => {
+		const oldText = ['l1', 'l2', 'l3', 'l4', 'l5'].join('\n');
+		const newText = ['l1', 'l2-EDIT', 'l3', 'l4-NEW', 'l5'].join('\n');
+		const diff = computeLineDiff(oldText, newText);
+
+		// Walk the diff: every oldLine must increase strictly, and every
+		// newLine must increase strictly. Lines missing one side (add or
+		// remove) carry no number on that side.
+		let lastOld = 0;
+		let lastNew = 0;
+		for (const line of diff) {
+			if (line.oldLine !== undefined) {
+				expect(line.oldLine).toBeGreaterThan(lastOld);
+				lastOld = line.oldLine;
+			}
+			if (line.newLine !== undefined) {
+				expect(line.newLine).toBeGreaterThan(lastNew);
+				lastNew = line.newLine;
+			}
+		}
+	});
+});
+
+describe('renderUnifiedDiff', () => {
+	it('returns empty string for empty diff', () => {
+		expect(renderUnifiedDiff([])).toBe('');
+	});
+
+	it('prefixes each line with `+`, `-`, or a single space', () => {
+		const lines: DiffLine[] = [
+			{ kind: DiffLineKind.CONTEXT, text: 'ctx' },
+			{ kind: DiffLineKind.ADD, text: 'plus' },
+			{ kind: DiffLineKind.REMOVE, text: 'minus' }
+		];
+		expect(renderUnifiedDiff(lines)).toBe(' ctx\n+plus\n-minus');
+	});
+
+	it('ignores oldLine/newLine metadata when emitting prefixes', () => {
+		const lines: DiffLine[] = [
+			{ kind: DiffLineKind.CONTEXT, text: 'a', oldLine: 1, newLine: 1 },
+			{ kind: DiffLineKind.ADD, text: 'b', newLine: 2 }
+		];
+		expect(renderUnifiedDiff(lines)).toBe(' a\n+b');
+	});
+});

tools/ui/tests/unit/continue-intent.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest';
+import { classifyContinueIntent } from '$lib/utils/agentic';
+import { ContinueIntentKind, MessageRole, MessageType } from '$lib/enums';
+import type { DatabaseMessage } from '$lib/types/database';
+
+/**
+ * Tests for the Continue button intent classifier.
+ *
+ * The classifier walks the persisted message history to decide which of three
+ * resume paths a Continue click should take:
+ *
+ *   A. append_text  -> plain text assistant turn, resume with
+ *                      continue_final_message.
+ *   B. rerun_turn   -> assistant turn with tool_calls but no tool results yet,
+ *                      the stream was cut mid turn and the tool_calls are
+ *                      unrecoverable as a token level continuation. Drop the
+ *                      target and rerun from the previous history.
+ *   C. next_turn    -> assistant turn with tool_calls that were already
+ *                      resolved by trailing tool results. Hand the history
+ *                      back to the agentic loop so it starts the next turn.
+ */
+
+let nextId = 0;
+function makeMsg(role: MessageRole, opts: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	nextId++;
+	return {
+		id: `msg-${nextId}`,
+		convId: 'conv-1',
+		type: MessageType.TEXT,
+		timestamp: nextId,
+		role,
+		content: '',
+		parent: null,
+		children: [],
+		...opts
+	};
+}
+
+function toolCall(id: string, name: string, args: string = '{}'): string {
+	return JSON.stringify([{ id, type: 'function', function: { name, arguments: args } }]);
+}
+
+describe('classifyContinueIntent', () => {
+	it('returns append_text for a plain text assistant turn at the tail', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'hello' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'hi there' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text for a plain text assistant turn in the middle', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q1' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a1' }),
+			makeMsg(MessageRole.USER, { content: 'q2' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a2' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns rerun_turn when the assistant has tool_calls without results', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'list files' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'bash_tool', '{"command":"ls"}')
+			})
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.RERUN_TURN, truncateAfter: 0 });
+	});
+
+	it('returns next_turn when trailing tool results resolve the tool_calls', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'list files' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'bash_tool')
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'file1\nfile2', toolCallId: 'call_1' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 2 });
+	});
+
+	it('next_turn keeps all consecutive trailing tool results, not just one', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'do many things' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: JSON.stringify([
+					{ id: 'call_1', type: 'function', function: { name: 'a', arguments: '{}' } },
+					{ id: 'call_2', type: 'function', function: { name: 'b', arguments: '{}' } }
+				])
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'r1', toolCallId: 'call_1' }),
+			makeMsg(MessageRole.TOOL, { content: 'r2', toolCallId: 'call_2' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 3 });
+	});
+
+	it('next_turn stops at the first non tool message after the target', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'go' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'a')
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'r1', toolCallId: 'call_1' }),
+			makeMsg(MessageRole.USER, { content: 'wait' }),
+			makeMsg(MessageRole.TOOL, { content: 'late', toolCallId: 'call_1' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		// truncateAfter must point at the contiguous tool block, not jump over
+		// the user message to grab the dangling late tool.
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 2 });
+	});
+
+	it('returns append_text when toolCalls is set but parses to empty array', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a', toolCalls: '[]' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text when toolCalls is malformed JSON', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a', toolCalls: '{not json' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text defensively when idx points at a non assistant message', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a' })
+		];
+
+		expect(classifyContinueIntent(messages, 0)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text defensively when idx is out of bounds', () => {
+		const messages = [makeMsg(MessageRole.ASSISTANT, { content: 'a' })];
+
+		expect(classifyContinueIntent(messages, 5)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+		expect(classifyContinueIntent([], 0)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+});

tools/ui/tests/unit/conversation-import.test.ts

@@ -0,0 +1,112 @@
+import { beforeAll, describe, expect, it } from 'vitest';
+import { zipSync, strToU8 } from 'fflate';
+import { MessageRole, MessageType } from '$lib/enums';
+import { NEWLINE } from '$lib/constants';
+import type { ExportedConversation } from '$lib/types/database';
+
+let conversationsStore: typeof import('$lib/stores/conversations.svelte').conversationsStore;
+
+// node env unit project has no DOM, install a minimal localStorage backed by a
+// Map before the store module reads it. Transforming the store takes seconds,
+// so import it once for the whole file.
+beforeAll(async () => {
+	const store = new Map<string, string>();
+	const polyfill: Storage = {
+		get length() {
+			return store.size;
+		},
+		clear: () => store.clear(),
+		getItem: (k) => (store.has(k) ? store.get(k)! : null),
+		key: (i) => Array.from(store.keys())[i] ?? null,
+		removeItem: (k) => {
+			store.delete(k);
+		},
+		setItem: (k, v) => {
+			store.set(k, String(v));
+		}
+	};
+	(globalThis as unknown as { localStorage: Storage }).localStorage = polyfill;
+
+	({ conversationsStore } = await import('$lib/stores/conversations.svelte'));
+}, 30000);
+
+function makeSession(id: string): ExportedConversation {
+	return {
+		conv: { id, currNode: `${id}-msg`, lastModified: 0, name: `Chat ${id}` },
+		messages: [
+			{
+				id: `${id}-msg`,
+				convId: id,
+				type: MessageType.TEXT,
+				timestamp: 0,
+				role: MessageRole.USER,
+				content: `hello from ${id}`,
+				parent: null,
+				children: []
+			}
+		]
+	} as unknown as ExportedConversation;
+}
+
+/**
+ * `parseImportFile` detects the format from the file contents. iOS has no UTI
+ * for `.jsonl`, so the picker cannot filter on it and the filename carries no
+ * guarantee: a JSONL export must import under any name.
+ */
+describe('conversationsStore.parseImportFile', () => {
+	it('imports a JSONL export whose name has no meaningful extension', async () => {
+		const jsonl = conversationsStore.serializeSessionToJsonl(makeSession('a'));
+
+		const sessions = await conversationsStore.parseImportFile(new File([jsonl], 'export'));
+
+		expect(sessions).toHaveLength(1);
+		expect(sessions[0].conv.id).toBe('a');
+		expect(sessions[0].messages[0].content).toBe('hello from a');
+	});
+
+	it('imports several sessions from one JSONL file', async () => {
+		const jsonl = [makeSession('a'), makeSession('b')]
+			.map((session) => conversationsStore.serializeSessionToJsonl(session))
+			.join(NEWLINE);
+
+		const sessions = await conversationsStore.parseImportFile(new File([jsonl], 'export.txt'));
+
+		expect(sessions.map((session) => session.conv.id)).toEqual(['a', 'b']);
+	});
+
+	it('imports a ZIP archive whose name has no meaningful extension', async () => {
+		const zipped = zipSync({
+			'a.jsonl': strToU8(conversationsStore.serializeSessionToJsonl(makeSession('a'))),
+			'b.jsonl': strToU8(conversationsStore.serializeSessionToJsonl(makeSession('b'))),
+			'notes.txt': strToU8('ignored')
+		});
+
+		const sessions = await conversationsStore.parseImportFile(new File([zipped], 'archive'));
+
+		expect(sessions.map((session) => session.conv.id).sort()).toEqual(['a', 'b']);
+	});
+
+	it('imports the legacy JSON array format', async () => {
+		const json = JSON.stringify([makeSession('a')], null, 2);
+
+		const sessions = await conversationsStore.parseImportFile(new File([json], 'export.jsonl'));
+
+		expect(sessions).toHaveLength(1);
+		expect(sessions[0].conv.id).toBe('a');
+	});
+
+	it('imports the legacy JSON single object format', async () => {
+		const json = JSON.stringify(makeSession('a'));
+
+		const sessions = await conversationsStore.parseImportFile(new File([json], 'export'));
+
+		expect(sessions).toHaveLength(1);
+		expect(sessions[0].conv.id).toBe('a');
+	});
+
+	it('rejects a file that holds neither format', async () => {
+		await expect(
+			conversationsStore.parseImportFile(new File(['not an export'], 'export.jsonl'))
+		).rejects.toThrow();
+	});
+});

tools/ui/tests/unit/favicon-colorize.test.ts

@@ -0,0 +1,198 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import {
+	colorizeFaviconSvg,
+	padFaviconSvg,
+	writeThemeFavicons
+} from '../../scripts/favicon-colorize';
+
+const SOURCE_SVG = [
+	'<svg xmlns="http://www.w3.org/2000/svg">',
+	'  <path d="M0 0" fill="currentColor"/>',
+	'  <path d="M1 1" fill="#ff00aa"/>',
+	'  <circle fill="currentColor"/>',
+	'</svg>'
+].join('\n');
+
+describe('colorizeFaviconSvg', () => {
+	it('substitutes every currentColor occurrence for the light variant', () => {
+		const { light } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(light.match(/currentColor/g)).toBeNull();
+		expect(light).toContain('fill="#111111"');
+		expect(light).toContain('<circle fill="#111111"/>');
+	});
+
+	it('substitutes every currentColor occurrence for the dark variant', () => {
+		const { dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(dark.match(/currentColor/g)).toBeNull();
+		expect(dark).toContain('fill="#fafafa"');
+		expect(dark).toContain('<circle fill="#fafafa"/>');
+	});
+
+	it('leaves non-currentColor colors untouched in both variants', () => {
+		const { light, dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(light).toContain('fill="#ff00aa"');
+		expect(dark).toContain('fill="#ff00aa"');
+	});
+
+	it('does not alter any other part of the SVG', () => {
+		const { light, dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		const stripColors = (s: string) =>
+			s.replaceAll('#111111', '').replaceAll('#fafafa', '').replaceAll('currentColor', '');
+		const expected = stripColors(SOURCE_SVG);
+		expect(stripColors(light)).toBe(expected);
+		expect(stripColors(dark)).toBe(expected);
+	});
+
+	it('returns the same SVG for light and dark when called with the same color', () => {
+		const result = colorizeFaviconSvg(SOURCE_SVG, '#abcdef', '#abcdef');
+		expect(result.light).toBe(result.dark);
+	});
+
+	it('returns the source unchanged when given a color that does not appear (no currentColor in source)', () => {
+		const plain = '<svg><path fill="#000"/></svg>';
+		const { light, dark } = colorizeFaviconSvg(plain, '#111111', '#fafafa');
+		expect(light).toBe(plain);
+		expect(dark).toBe(plain);
+	});
+});
+
+describe('padFaviconSvg', () => {
+	const SIZED_SVG =
+		'<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+		'<path d="M244.95 8L388.923 8Z" fill="currentColor"/>' +
+		'</svg>';
+
+	it('wraps inner content in a translate-then-scale group that matches padding', () => {
+		const padded = padFaviconSvg(SIZED_SVG, 0.05);
+		// scale = 1 - 0.05 = 0.95
+		// translate = (0.05 * 512) / 2 = 12.8 on each axis
+		expect(padded).toContain('transform="translate(12.8 12.8) scale(0.95)"');
+		expect(padded).toContain('<g transform="translate(12.8 12.8) scale(0.95)">');
+		expect(padded).toContain('<path d="M244.95 8L388.923 8Z" fill="currentColor"/>');
+		expect(padded.endsWith('</g></svg>')).toBe(true);
+	});
+
+	it('preserves the outer <svg> tag attributes', () => {
+		const padded = padFaviconSvg(SIZED_SVG, 0.1);
+		expect(padded.startsWith('<svg width="512" height="512" viewBox="0 0 512 512"')).toBe(true);
+	});
+
+	it('returns the input unchanged for zero or negative padding', () => {
+		expect(padFaviconSvg(SIZED_SVG, 0)).toBe(SIZED_SVG);
+		expect(padFaviconSvg(SIZED_SVG, -0.1)).toBe(SIZED_SVG);
+	});
+
+	it('returns the input unchanged when padding would fully collapse the icon (>= 1)', () => {
+		expect(padFaviconSvg(SIZED_SVG, 1)).toBe(SIZED_SVG);
+		expect(padFaviconSvg(SIZED_SVG, 1.5)).toBe(SIZED_SVG);
+	});
+
+	it('returns the input unchanged when no viewBox is present', () => {
+		const noViewBox = '<svg width="32" height="32"><path d="M0 0Z"/></svg>';
+		expect(padFaviconSvg(noViewBox, 0.1)).toBe(noViewBox);
+	});
+
+	it('returns the input unchanged when viewBox values are not finite numbers', () => {
+		const bad = '<svg viewBox="auto auto 0 0"><path/></svg>';
+		expect(padFaviconSvg(bad, 0.1)).toBe(bad);
+	});
+
+	it('tolerates a non-square viewBox', () => {
+		const wide = '<svg viewBox="0 0 100 50"><rect/></svg>';
+		const padded = padFaviconSvg(wide, 0.1);
+		// scale 0.9, translate (5, 2.5)
+		expect(padded).toContain('transform="translate(5 2.5) scale(0.9)"');
+	});
+});
+
+describe('writeThemeFavicons', () => {
+	const LOGO =
+		'<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+		'<path d="M244.95 8L388.923 8Z" fill="currentColor"/>' +
+		'</svg>';
+
+	let tmpDir: string;
+
+	beforeEach(() => {
+		tmpDir = mkdtempSync(join(tmpdir(), 'favicon-'));
+	});
+
+	afterEach(() => {
+		rmSync(tmpDir, { recursive: true, force: true });
+	});
+
+	function setupSource() {
+		const sourcePath = join(tmpDir, 'logo.svg');
+		writeFileSync(sourcePath, LOGO);
+		return {
+			sourcePath,
+			lightPath: join(tmpDir, 'favicon.svg'),
+			darkPath: join(tmpDir, 'favicon-dark.svg')
+		};
+	}
+
+	it('writes colorized, un-padded favicons without modifying the source', () => {
+		const { sourcePath, lightPath, darkPath } = setupSource();
+		const before = readFileSync(sourcePath, 'utf-8');
+
+		writeThemeFavicons('#abcdef', '#012345', {
+			sourcePath,
+			lightOutPath: lightPath,
+			darkOutPath: darkPath
+		});
+
+		const lightOut = readFileSync(lightPath, 'utf-8');
+		const darkOut = readFileSync(darkPath, 'utf-8');
+
+		// currentColor swapped to the requested palette in both files
+		expect(lightOut).toContain('fill="#abcdef"');
+		expect(lightOut).not.toContain('currentColor');
+		expect(darkOut).toContain('fill="#012345"');
+		expect(darkOut).not.toContain('currentColor');
+
+		// default padding (0) keeps the wrapper off the output
+		expect(lightOut).not.toContain('<g ');
+		expect(darkOut).not.toContain('<g ');
+
+		// source file is unchanged after the call
+		expect(readFileSync(sourcePath, 'utf-8')).toBe(before);
+	});
+
+	it('writes colorized favicons wrapped in a padding <g transform>...</g>', () => {
+		const { sourcePath, lightPath, darkPath } = setupSource();
+		// mirror the production wiring: PWA_ASSET_GENERATOR.FAVICON_PADDING
+		const padding = 0.04;
+		// scale = 1 - 0.04 = 0.96; translate = (0.04 * 512) / 2 = 10.24
+		const expectedTransform = 'transform="translate(10.24 10.24) scale(0.96)"';
+
+		writeThemeFavicons('#111111', '#fafafa', {
+			sourcePath,
+			lightOutPath: lightPath,
+			darkOutPath: darkPath,
+			padding
+		});
+
+		const lightOut = readFileSync(lightPath, 'utf-8');
+		const darkOut = readFileSync(darkPath, 'utf-8');
+
+		// both files get the same padding wrapper derived from the viewBox
+		expect(lightOut).toContain(`<g ${expectedTransform}>`);
+		expect(lightOut.endsWith('</g></svg>')).toBe(true);
+		expect(darkOut).toContain(`<g ${expectedTransform}>`);
+		expect(darkOut.endsWith('</g></svg>')).toBe(true);
+
+		// colorization still happens inside the wrapped group
+		expect(lightOut).toContain('fill="#111111"');
+		expect(lightOut).not.toContain('currentColor');
+		expect(darkOut).toContain('fill="#fafafa"');
+		expect(darkOut).not.toContain('currentColor');
+		// light palette colour must not leak into dark output
+		expect(darkOut).not.toContain('#111111');
+
+		// source file is not modified by the padding step
+		expect(readFileSync(sourcePath, 'utf-8')).toBe(LOGO);
+	});
+});

tools/ui/tests/unit/headers.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { parseHeadersToArray, serializeHeaders } from '$lib/utils/headers';
+
+/**
+ * Tests for the header serialization helpers used by the MCP server form
+ * (custom header rows) and the new Authorization/Bearer-token flow.
+ */
+describe('parseHeadersToArray', () => {
+	it('returns an empty array for empty or whitespace-only input', () => {
+		expect(parseHeadersToArray('')).toEqual([]);
+		expect(parseHeadersToArray('   ')).toEqual([]);
+		expect(parseHeadersToArray(undefined as unknown as string)).toEqual([]);
+	});
+
+	it('returns an empty array for invalid JSON input', () => {
+		expect(parseHeadersToArray('{not-json')).toEqual([]);
+		expect(parseHeadersToArray('[]')).toEqual([]);
+		expect(parseHeadersToArray('"plain-string"')).toEqual([]);
+	});
+
+	it('converts an object into ordered key/value pairs', () => {
+		expect(parseHeadersToArray('{"X-Foo":"bar","Authorization":"Bearer abc"}')).toEqual([
+			{ key: 'X-Foo', value: 'bar' },
+			{ key: 'Authorization', value: 'Bearer abc' }
+		]);
+	});
+
+	it('stringifies non-string values', () => {
+		expect(parseHeadersToArray('{"count":"42","flag":"true"}')).toEqual([
+			{ key: 'count', value: '42' },
+			{ key: 'flag', value: 'true' }
+		]);
+	});
+});
+
+describe('serializeHeaders', () => {
+	it('returns an empty string when there are no valid pairs', () => {
+		expect(serializeHeaders([])).toBe('');
+		expect(serializeHeaders([{ key: '', value: 'value' }])).toBe('');
+		expect(serializeHeaders([{ key: '   ', value: 'value' }])).toBe('');
+	});
+
+	it('returns an empty string when every pair has a blank key', () => {
+		expect(
+			serializeHeaders([
+				{ key: '', value: 'drop-me' },
+				{ key: '   ', value: 'drop-me-too' },
+				{ key: '\t', value: 'tab-key' }
+			])
+		).toBe('');
+	});
+
+	it('drops pairs with empty keys but keeps the rest', () => {
+		expect(
+			serializeHeaders([
+				{ key: '', value: 'drop-me' },
+				{ key: 'X-Keep', value: 'ok' }
+			])
+		).toBe('{"X-Keep":"ok"}');
+	});
+
+	it('trims keys before serializing', () => {
+		expect(serializeHeaders([{ key: '  X-Space  ', value: 'ok' }])).toBe('{"X-Space":"ok"}');
+	});
+
+	it('preserves the input order of surviving pairs', () => {
+		const serialized = serializeHeaders([
+			{ key: 'X-C', value: '3' },
+			{ key: 'X-A', value: '1' },
+			{ key: 'X-B', value: '2' }
+		]);
+
+		// Object key order follows insertion order in modern JS engines, so
+		// the serialized JSON writes keys in our input order.
+		expect(JSON.parse(serialized)).toEqual({ 'X-C': '3', 'X-A': '1', 'X-B': '2' });
+	});
+});
+
+describe('parseHeadersToArray / serializeHeaders roundtrip', () => {
+	it('serializes back to an equal header object after a parse', () => {
+		const original = JSON.stringify({
+			'Content-Type': 'application/json',
+			'X-Trace-Id': 'abc-123'
+		});
+
+		const roundtrip = serializeHeaders(parseHeadersToArray(original));
+
+		expect(JSON.parse(roundtrip)).toEqual(JSON.parse(original));
+	});
+
+	it('drops rows whose keys are blank after trimming during serialization', () => {
+		const pairs = parseHeadersToArray('{"X-Keep":"ok","":"drop-me"}');
+
+		// parseHeadersToArray keeps raw key strings (the consumer is expected to
+		// filter blanks, not the parser); serialization must strip them.
+		expect(pairs).toEqual([
+			{ key: 'X-Keep', value: 'ok' },
+			{ key: '', value: 'drop-me' }
+		]);
+		expect(serializeHeaders(pairs)).toBe('{"X-Keep":"ok"}');
+	});
+
+	it('preserves upstream keys untouched (does not lowercase them)', () => {
+		const upperCased = '{"Authorization":"Bearer xyz"}';
+
+		const parsed = parseHeadersToArray(upperCased);
+
+		expect(parsed).toEqual([{ key: 'Authorization', value: 'Bearer xyz' }]);
+	});
+
+	it('bearer-token write survives a re-parse when paired with regular custom headers', () => {
+		// The McpServerForm bearer UI writes {Authorization: `Bearer <token>`}
+		// into the same headers string as the custom KV section. The round
+		// trip below mirrors the exact shape the form produces so a future
+		// refactor of either code path cannot silently change the on-disk key.
+		const pairs = [
+			{ key: 'X-Trace-Id', value: 'abc-123' },
+			{ key: 'Authorization', value: 'Bearer super-secret' }
+		];
+
+		const serialized = serializeHeaders(pairs);
+
+		expect(serialized).toBe('{"X-Trace-Id":"abc-123","Authorization":"Bearer super-secret"}');
+		expect(parseHeadersToArray(serialized)).toEqual(pairs);
+	});
+});

tools/ui/tests/unit/jpeg-orientation.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { getJpegOrientationFromDataURL, isJpegMimeType } from '$lib/utils/jpeg-orientation';
+
+// Builds the TIFF payload of an APP1 segment holding a single IFD0 entry
+function buildTiff(littleEndian: boolean, tag: number, value: number): number[] {
+	const u16 = (v: number) => (littleEndian ? [v & 0xff, v >> 8] : [v >> 8, v & 0xff]);
+	const u32 = (v: number) =>
+		littleEndian
+			? [v & 0xff, (v >> 8) & 0xff, (v >> 16) & 0xff, (v >> 24) & 0xff]
+			: [(v >> 24) & 0xff, (v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+
+	return [
+		...(littleEndian ? [0x49, 0x49] : [0x4d, 0x4d]),
+		...u16(42),
+		...u32(8),
+		...u16(1),
+		...u16(tag),
+		...u16(3),
+		...u32(1),
+		// SHORT value sits left justified in the 4 byte value field
+		...u16(value),
+		...u16(0),
+		...u32(0)
+	];
+}
+
+// Wraps a TIFF payload into a complete minimal JPEG data URL
+function buildJpegDataURL(tiff: number[] | null, prependApp0 = false): string {
+	const bytes: number[] = [0xff, 0xd8];
+
+	if (prependApp0) {
+		// JFIF APP0 segment, irrelevant content the parser walks over
+		bytes.push(0xff, 0xe0, 0x00, 0x07, 0x4a, 0x46, 0x49, 0x46, 0x00);
+	}
+
+	if (tiff) {
+		const payload = [0x45, 0x78, 0x69, 0x66, 0x00, 0x00, ...tiff];
+		const length = payload.length + 2;
+		bytes.push(0xff, 0xe1, length >> 8, length & 0xff, ...payload);
+	}
+
+	// SOS marker terminates the metadata scan
+	bytes.push(0xff, 0xda, 0x00, 0x02);
+
+	return `data:image/jpeg;base64,${btoa(String.fromCharCode(...bytes))}`;
+}
+
+describe('getJpegOrientationFromDataURL', () => {
+	it('returns the orientation from a little endian EXIF block', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 6)))).toBe(6);
+	});
+
+	it('returns the orientation from a big endian EXIF block', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(false, 0x0112, 8)))).toBe(8);
+	});
+
+	it('walks over a leading APP0 segment', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 3), true))).toBe(
+			3
+		);
+	});
+
+	it('returns 1 when the EXIF block holds no orientation tag', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0100, 6)))).toBe(1);
+	});
+
+	it('returns 1 when the orientation value is out of range', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 9)))).toBe(1);
+	});
+
+	it('returns 1 when the JPEG has no APP1 segment', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(null, true))).toBe(1);
+	});
+
+	it('returns 1 for a payload that is not a JPEG', () => {
+		const png = btoa(String.fromCharCode(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a));
+		expect(getJpegOrientationFromDataURL(`data:image/png;base64,${png}`)).toBe(1);
+	});
+
+	it('returns 1 for a truncated payload', () => {
+		const truncated = btoa(String.fromCharCode(0xff, 0xd8, 0xff));
+		expect(getJpegOrientationFromDataURL(`data:image/jpeg;base64,${truncated}`)).toBe(1);
+	});
+
+	it('returns 1 for a malformed data URL', () => {
+		expect(getJpegOrientationFromDataURL('not a data url')).toBe(1);
+	});
+});
+
+describe('isJpegMimeType', () => {
+	it('matches both JPEG MIME variants', () => {
+		expect(isJpegMimeType('image/jpeg')).toBe(true);
+		expect(isJpegMimeType('image/jpg')).toBe(true);
+	});
+
+	it('rejects other image MIME types', () => {
+		expect(isJpegMimeType('image/png')).toBe(false);
+		expect(isJpegMimeType('image/webp')).toBe(false);
+	});
+});

tools/ui/tests/unit/latex-protection.test.ts

@@ -0,0 +1,414 @@
+/* eslint-disable no-irregular-whitespace */
+import { describe, it, expect, test } from 'vitest';
+import { maskInlineLaTeX, preprocessLaTeX } from '$lib/utils/latex-protection';
+
+describe('maskInlineLaTeX', () => {
+	it('should protect LaTeX $x + y$ but not money $3.99', () => {
+		const latexExpressions: string[] = [];
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('I have $10, $3.99 and <<LATEX_0>> and <<LATEX_1>>. The amount is $2,000.');
+		expect(latexExpressions).toEqual(['$x + y$', '$100x$']);
+	});
+
+	it('should ignore money like $5 and $12.99', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Prices are $12.99 and $5. Tax?';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Prices are $12.99 and $5. Tax?');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should protect inline math $a^2 + b^2$ even after text', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Pythagorean: $a^2 + b^2 = c^2$.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Pythagorean: <<LATEX_0>>.');
+		expect(latexExpressions).toEqual(['$a^2 + b^2 = c^2$']);
+	});
+
+	it('should not protect math that has letter after closing $ (e.g. units)', () => {
+		const latexExpressions: string[] = [];
+		const input = 'The cost is $99 and change.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('The cost is $99 and change.');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should allow $x$ followed by punctuation', () => {
+		const latexExpressions: string[] = [];
+		const input = 'We know $x$, right?';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('We know <<LATEX_0>>, right?');
+		expect(latexExpressions).toEqual(['$x$']);
+	});
+
+	it('should work across multiple lines', () => {
+		const latexExpressions: string[] = [];
+		const input = `Emma buys cupcakes for $3 each.\nHow much is $x + y$?`;
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe(`Emma buys cupcakes for $3 each.\nHow much is <<LATEX_0>>?`);
+		expect(latexExpressions).toEqual(['$x + y$']);
+	});
+
+	it('should not protect $100 but protect $matrix$', () => {
+		const latexExpressions: string[] = [];
+		const input = '$100 and $\\mathrm{GL}_2(\\mathbb{F}_7)$ are different.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('$100 and <<LATEX_0>> are different.');
+		expect(latexExpressions).toEqual(['$\\mathrm{GL}_2(\\mathbb{F}_7)$']);
+	});
+
+	it('should skip if $ is followed by digit and alphanumeric after close (money)', () => {
+		const latexExpressions: string[] = [];
+		const input = 'I paid $5 quickly.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('I paid $5 quickly.');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should protect LaTeX even with special chars inside', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Consider $\\alpha_1 + \\beta_2$ now.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Consider <<LATEX_0>> now.');
+		expect(latexExpressions).toEqual(['$\\alpha_1 + \\beta_2$']);
+	});
+
+	it('short text', () => {
+		const latexExpressions: string[] = ['$0$'];
+		const input = '$a$\n$a$ and $b$';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('<<LATEX_1>>\n<<LATEX_2>> and <<LATEX_3>>');
+		expect(latexExpressions).toEqual(['$0$', '$a$', '$a$', '$b$']);
+	});
+
+	it('empty text', () => {
+		const latexExpressions: string[] = [];
+		const input = '$\n$$\n';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('$\n$$\n');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('LaTeX-spacer preceded by backslash', () => {
+		const latexExpressions: string[] = [];
+		const input = `\\[
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+\\]`;
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe(input);
+		expect(latexExpressions).toEqual([]);
+	});
+});
+
+describe('preprocessLaTeX', () => {
+	test('converts inline \\( ... \\) to $...$', () => {
+		const input =
+			'\\( \\mathrm{GL}_2(\\mathbb{F}_7) \\): Group of invertible matrices with entries in \\(\\mathbb{F}_7\\).';
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			'$ \\mathrm{GL}_2(\\mathbb{F}_7) $: Group of invertible matrices with entries in $\\mathbb{F}_7$.'
+		);
+	});
+
+	test("don't inline \\\\( ... \\) to $...$", () => {
+		const input =
+			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula \\((x_1,\\ldots,x_n)\\).';
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula $(x_1,\\ldots,x_n)$.'
+		);
+	});
+
+	test('preserves display math \\[ ... \\] and protects adjacent text', () => {
+		const input = `Some kernel of \\(\\mathrm{SL}_2(\\mathbb{F}_7)\\):
+  \\[
+  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
+  \\]`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(`Some kernel of $\\mathrm{SL}_2(\\mathbb{F}_7)$:
+  $$
+  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
+  $$`);
+	});
+
+	test('handles standalone display math equation', () => {
+		const input = `Algebra:
+\\[
+x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+\\]`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(`Algebra:
+$$
+x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+$$`);
+	});
+
+	test('does not interpret currency values as LaTeX', () => {
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
+	});
+
+	test('ignores dollar signs followed by digits (money), but keeps valid math $x + y$', () => {
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
+	});
+
+	test('handles real-world word problems with amounts and no math delimiters', () => {
+		const input =
+			'Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Emma buys 2 cupcakes for \\$3 each and 1 cookie for \\$1.50. How much money does she spend in total?'
+		);
+	});
+
+	test('handles decimal amounts in word problem correctly', () => {
+		const input =
+			'Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Maria has \\$20. She buys a notebook for \\$4.75 and a pack of pencils for \\$3.25. How much change does she receive?'
+		);
+	});
+
+	test('preserves display math with surrounding non-ASCII text', () => {
+		const input = `1 kg の質量は
+  \\[
+  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
+  \\]
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			`1 kg の質量は
+  $$
+  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
+  $$
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`
+		);
+	});
+
+	test('LaTeX-spacer preceded by backslash', () => {
+		const input = `\\[
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+\\]`;
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			`$$
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+$$`
+		);
+	});
+
+	test('converts \\[ ... \\] even when preceded by text without space', () => {
+		const input = 'Some line ...\nAlgebra: \\[x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}\\]';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Some line ...\nAlgebra: \n$$x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$$\n'
+		);
+	});
+
+	test('converts \\[ ... \\] in table-cells', () => {
+		const input = `| ID | Expression |\n| #1 | \\[
+			x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+\\] |`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'| ID | Expression |\n| #1 | $x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$ |'
+		);
+	});
+
+	test('escapes isolated $ before digits ($5 → \\$5), but not valid math', () => {
+		const input = 'This costs $5 and this is math $x^2$. $100 is money.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('This costs \\$5 and this is math $x^2$. \\$100 is money.');
+		// Note: Since $x^2$ is detected as valid LaTeX, it's preserved.
+		// $5 becomes \$5 only *after* real math is masked — but here it's correct because the masking logic avoids treating $5 as math.
+	});
+
+	test('display with LaTeX-line-breaks', () => {
+		const input = String.raw`- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$`;
+		const output = preprocessLaTeX(input);
+		// If the formula contains '\\' the $$-delimiters should be in their own line.
+		expect(output).toBe(`- Algebraic topology, Homotopy Groups of $\\mathbb{S}^3$:
+$$\n\\pi_n(\\mathbb{S}^3) = \\begin{cases}
+\\mathbb{Z} & n = 3 \\\\
+0 & n > 3, n \\neq 4 \\\\
+\\mathbb{Z}_2 & n = 4 \\\\
+\\end{cases}\n$$`);
+	});
+
+	test('handles mhchem notation safely if present', () => {
+		const input = 'Chemical reaction: \\( \\ce{H2O} \\) and $\\ce{CO2}$';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('Chemical reaction: $ \\ce{H2O} $ and $\\ce{CO2}$');
+	});
+
+	test('preserves code blocks', () => {
+		const input = 'Inline code: `sum $total` and block:\n```\ndollar $amount\n```\nEnd.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks prevent misinterpretation
+	});
+
+	test('preserves backslash parentheses in code blocks (GitHub issue)', () => {
+		const input = '```python\nfoo = "\\(bar\\)"\n```';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
+	});
+
+	test('preserves backslash brackets in code blocks', () => {
+		const input = '```python\nfoo = "\\[bar\\]"\n```';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
+	});
+
+	test('preserves backslash parentheses in inline code', () => {
+		const input = 'Use `foo = "\\(bar\\)"` in your code.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input);
+	});
+
+	test('escape backslash in mchem ce', () => {
+		const input = 'mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$';
+		const output = preprocessLaTeX(input);
+
+		// mhchem-escape would insert a backslash here.
+		expect(output).toBe('mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$');
+	});
+
+	test('escape backslash in mchem pu', () => {
+		const input = 'mchem pu:\n$\\pu{-572 kJ mol^{-1}}$';
+		const output = preprocessLaTeX(input);
+
+		// mhchem-escape would insert a backslash here.
+		expect(output).toBe('mchem pu:\n$\\pu{-572 kJ mol^{-1}}$');
+	});
+
+	test('LaTeX in blockquotes with display math', () => {
+		const input =
+			'> **Definition (limit):**  \n>  \\[\n>  \\lim_{x\\to a} f(x) = L\n>  \\]\n>  means that as \\(x\\) gets close to \\(a\\).';
+		const output = preprocessLaTeX(input);
+
+		// Blockquote markers should be preserved, LaTeX should be converted
+		expect(output).toContain('> **Definition (limit):**');
+		expect(output).toContain('$$');
+		expect(output).toContain('$x$');
+		expect(output).not.toContain('\\[');
+		expect(output).not.toContain('\\]');
+		expect(output).not.toContain('\\(');
+		expect(output).not.toContain('\\)');
+	});
+
+	test('LaTeX in blockquotes with inline math', () => {
+		const input =
+			"> The derivative \\(f'(x)\\) at point \\(x=a\\) measures slope.\n> Formula: \\(f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}\\)";
+		const output = preprocessLaTeX(input);
+
+		// Blockquote markers should be preserved, inline LaTeX converted to $...$
+		expect(output).toContain("> The derivative $f'(x)$ at point $x=a$ measures slope.");
+		expect(output).toContain("> Formula: $f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$");
+	});
+
+	test('Mixed content with blockquotes and regular text', () => {
+		const input =
+			'Regular text with \\(x^2\\).\n\n> Quote with \\(y^2\\).\n\nMore text with \\(z^2\\).';
+		const output = preprocessLaTeX(input);
+
+		// All LaTeX should be converted, blockquote markers preserved
+		expect(output).toBe('Regular text with $x^2$.\n\n> Quote with $y^2$.\n\nMore text with $z^2$.');
+	});
+});
+
+// The fast path skips the whole protect/restore pipeline when the content has
+// neither `$` nor a backslash. These pin the assumption it relies on: such
+// content is returned byte-for-byte unchanged, and anything carrying a trigger
+// character still goes through the full pipeline.
+describe('preprocessLaTeX fast path', () => {
+	const untouched = [
+		['plain prose', 'The quick brown fox jumps over the lazy dog.'],
+		['headings and lists', '# Title\n\n- one\n- two\n\n## Sub\n\n1. first\n2. second'],
+		['fenced code without escapes', '```ts\nconst x = 1;\n```'],
+		['inline code and emphasis', 'Use `npm run build` with **bold** and _italic_.'],
+		['blockquotes', '> quoted line\n> another line'],
+		['tables', '| a | b |\n| --- | --- |\n| 1 | 2 |'],
+		['brackets and parens without escapes', 'array[0] and call(arg) and [link](/url)'],
+		['multi-paragraph prose', 'First para.\n\nSecond para.\n\nThird para.']
+	];
+
+	for (const [label, input] of untouched) {
+		test(`returns ${label} unchanged`, () => {
+			expect(preprocessLaTeX(input)).toBe(input);
+		});
+	}
+
+	test('still processes content once a trigger character is present', () => {
+		expect(preprocessLaTeX('inline \\(x^2\\) here')).toBe('inline $x^2$ here');
+		expect(preprocessLaTeX('Price: $5')).toBe('Price: \\$5');
+	});
+
+	test('fast path result matches the full pipeline for trigger-free content', () => {
+		// Appending a trigger char forces the slow path; stripping it back off
+		// must agree with what the fast path returned for the same prefix.
+		const body = 'Plain paragraph with no math.\n\nAnother paragraph here.';
+		const viaFastPath = preprocessLaTeX(body);
+		const viaFullPipeline = preprocessLaTeX(`${body}\n\n\\(z\\)`);
+
+		expect(viaFullPipeline.startsWith(viaFastPath)).toBe(true);
+	});
+});

tools/ui/tests/unit/mcp-default-overrides-merge.test.ts

@@ -0,0 +1,158 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { STORAGE_APP_NAME, CONFIG_LOCALSTORAGE_KEY } from '$lib/constants';
+
+// node env unit project has no DOM, install a minimal localStorage backed by a Map
+beforeAll(() => {
+	const store = new Map<string, string>();
+	const polyfill: Storage = {
+		get length() {
+			return store.size;
+		},
+		clear: () => store.clear(),
+		getItem: (k) => (store.has(k) ? store.get(k)! : null),
+		key: (i) => Array.from(store.keys())[i] ?? null,
+		removeItem: (k) => {
+			store.delete(k);
+		},
+		setItem: (k, v) => {
+			store.set(k, String(v));
+		}
+	};
+	(globalThis as unknown as { localStorage: Storage }).localStorage = polyfill;
+});
+
+/**
+ * Migration `mcp-default-overrides-merge-v1` folds the values of the parallel
+ * `mcpDefaultServerOverrides` config entry onto `mcpServers[i].enabled` (the
+ * single source of truth for new-chat defaults). The legacy key is kept on
+ * disk for downgrade compatibility.
+ */
+describe('mcp-default-overrides-merge-v1 migration', () => {
+	const MIGRATION_STATE_KEY = `${STORAGE_APP_NAME}.migration-state`;
+	const MCP_DEFAULT_OVERRIDES_KEY = `${STORAGE_APP_NAME}.mcpDefaultServerOverrides`;
+
+	beforeEach(async () => {
+		localStorage.clear();
+		// Reset the migration run counter so `runAllMigrations` is guaranteed to execute.
+		await import('$lib/services/migration.service').then((mod) =>
+			mod.MigrationService.resetState()
+		);
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	async function runMigrations() {
+		const { MigrationService } = await import('$lib/services/migration.service');
+		await MigrationService.runAllMigrations();
+	}
+
+	function readConfig(): Record<string, unknown> {
+		const raw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+
+		return raw ? (JSON.parse(raw) as Record<string, unknown>) : {};
+	}
+
+	function writeConfig(config: Record<string, unknown>) {
+		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+	}
+
+	it('applies matching overrides onto mcpServers[i].enabled and preserves the legacy key', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([
+				{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' },
+				{ id: 'hf', enabled: false, url: 'https://huggingface.co/mcp' }
+			]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([
+				{ serverId: 'exa', enabled: true },
+				{ serverId: 'hf', enabled: false }
+			])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers.find((s) => s.id === 'exa')?.enabled).toBe(true);
+		expect(servers.find((s) => s.id === 'hf')?.enabled).toBe(false);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('skips override ids that do not match any configured server', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' }]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([
+				{ serverId: 'orphan', enabled: true },
+				{ serverId: 'exa', enabled: true }
+			])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers).toHaveLength(1);
+		expect(servers[0].enabled).toBe(true);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('is a no-op when there are no legacy overrides', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: true, url: 'https://mcp.exa.ai/mcp' }])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers[0].enabled).toBe(true);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(false);
+	});
+
+	it('does not rewrite mcpServers when override.enabled already matches', async () => {
+		const originalServers = JSON.stringify([
+			{ id: 'exa', enabled: true, url: 'https://mcp.exa.ai/mcp' }
+		]);
+
+		writeConfig({
+			mcpServers: originalServers,
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([{ serverId: 'exa', enabled: true }])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		expect(after.mcpServers).toBe(originalServers);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('records itself as completed so subsequent loads do not re-run', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' }]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([{ serverId: 'exa', enabled: true }])
+		});
+
+		const { MigrationService } = await import('$lib/services/migration.service');
+
+		await MigrationService.runAllMigrations();
+
+		const stateRaw = localStorage.getItem(MIGRATION_STATE_KEY);
+		expect(stateRaw).not.toBeNull();
+		const state = JSON.parse(stateRaw!) as { completed: string[]; failed: string[] };
+		expect(state.completed).toContain('mcp-default-overrides-merge-v1');
+		expect(state.failed).not.toContain('mcp-default-overrides-merge-v1');
+	});
+});

tools/ui/tests/unit/mcp-override-fallback.test.ts

@@ -0,0 +1,143 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { CONFIG_LOCALSTORAGE_KEY } from '$lib/constants';
+import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
+import type { DatabaseConversation } from '$lib/types/database';
+
+// node env unit project has no DOM, install a minimal localStorage backed by a Map
+beforeAll(() => {
+	const store = new Map<string, string>();
+	const polyfill: Storage = {
+		get length() {
+			return store.size;
+		},
+		clear: () => store.clear(),
+		getItem: (k) => (store.has(k) ? store.get(k)! : null),
+		key: (i) => Array.from(store.keys())[i] ?? null,
+		removeItem: (k) => {
+			store.delete(k);
+		},
+		setItem: (k, v) => {
+			store.set(k, String(v));
+		}
+	};
+	(globalThis as unknown as { localStorage: Storage }).localStorage = polyfill;
+});
+
+/**
+ * Regression coverage for the bug where MCP servers flipped to "disabled"
+ * after sending the first message on a fresh chat (see comment in
+ * `MCPStore.createConversation`: empty `mcpServerOverrides` should inherit
+ * `mcpServers[i].enabled`, not be treated as all-off).
+ */
+describe('conversationsStore MCP override resolution', () => {
+	beforeEach(async () => {
+		localStorage.clear();
+		// Two configured servers: alpha is globally disabled, bravo enabled.
+		localStorage.setItem(
+			CONFIG_LOCALSTORAGE_KEY,
+			JSON.stringify({
+				[SETTINGS_KEYS.MCP_SERVERS]: JSON.stringify([
+					{ id: 'alpha', enabled: false, url: 'https://alpha.example.com/mcp' },
+					{ id: 'bravo', enabled: true, url: 'https://bravo.example.com/mcp' }
+				])
+			})
+		);
+
+		// The settings store constructor bails in node env (no `browser`),
+		// so seed the config directly. The shape mirrors what `loadConfig`
+		// would build from localStorage.
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		const raw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY) ?? '{}';
+		const saved = JSON.parse(raw) as Record<string, unknown>;
+		settingsStore.config = {
+			...settingsStore.config,
+			[SETTINGS_KEYS.MCP_SERVERS]: saved[SETTINGS_KEYS.MCP_SERVERS]
+		};
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	function makeConversation(
+		overrides?: { serverId: string; enabled: boolean }[]
+	): DatabaseConversation {
+		return {
+			id: 'conv-1',
+			currNode: null,
+			lastModified: 0,
+			name: 'Test chat',
+			mcpServerOverrides: overrides
+		};
+	}
+
+	it('inherits server.enabled when no conversation is active', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = null;
+
+		expect(conversationsStore.isMcpServerEnabledForChat('alpha')).toBe(false);
+		expect(conversationsStore.isMcpServerEnabledForChat('bravo')).toBe(true);
+	});
+
+	it('inherits server.enabled on a newly created chat with no overrides', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = makeConversation();
+
+		// Empty override list: must fall back to global server.enabled, not all-off.
+		expect(conversationsStore.isMcpServerEnabledForChat('alpha')).toBe(false);
+		expect(conversationsStore.isMcpServerEnabledForChat('bravo')).toBe(true);
+	});
+
+	it('inherits server.enabled on a newly created chat when overrides is undefined', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = makeConversation(undefined);
+
+		expect(conversationsStore.isMcpServerEnabledForChat('alpha')).toBe(false);
+		expect(conversationsStore.isMcpServerEnabledForChat('bravo')).toBe(true);
+	});
+
+	it('uses explicit per-chat overrides, with defaults for non-overridden servers', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		// Override flips bravo off for this chat, alpha keeps its global default.
+		conversationsStore.activeConversation = makeConversation([
+			{ serverId: 'bravo', enabled: false }
+		]);
+
+		expect(conversationsStore.isMcpServerEnabledForChat('alpha')).toBe(false);
+		expect(conversationsStore.isMcpServerEnabledForChat('bravo')).toBe(false);
+	});
+
+	it('getAllMcpServerOverrides returns a complete list merged from defaults', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = makeConversation([
+			{ serverId: 'alpha', enabled: true }
+		]);
+
+		expect(conversationsStore.getAllMcpServerOverrides()).toEqual([
+			{ serverId: 'alpha', enabled: true },
+			{ serverId: 'bravo', enabled: true }
+		]);
+	});
+
+	it('getAllMcpServerOverrides falls back to defaults when there are no explicit overrides', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = makeConversation();
+
+		expect(conversationsStore.getAllMcpServerOverrides()).toEqual([
+			{ serverId: 'alpha', enabled: false },
+			{ serverId: 'bravo', enabled: true }
+		]);
+	});
+
+	it('getMcpServerOverride returns the global default when the server has no explicit override', async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.activeConversation = makeConversation([
+			{ serverId: 'alpha', enabled: true }
+		]);
+
+		expect(conversationsStore.getMcpServerOverride('bravo')).toEqual({
+			serverId: 'bravo',
+			enabled: true
+		});
+	});
+});

tools/ui/tests/unit/mcp-servers-default.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
+
+/**
+ * Default-value policy for the `MCP_SERVERS` setting.
+ *
+ * Earlier versions of the UI preloaded a hard-coded list of suggested
+ * MCP servers into this setting on first install. That caused silent
+ * third-party HTTP requests at app load (see issue #25509) and a popup
+ * "recommendation" dialog (see issue #25274). New users must now opt
+ * in explicitly when adding a server, so the default is an empty list.
+ */
+describe('MCP_SERVERS default value', () => {
+	it('does not preload any servers in the MCP_SERVERS setting default', async () => {
+		const { SETTING_CONFIG_DEFAULT } = await import('$lib/constants/settings-registry');
+
+		expect(SETTING_CONFIG_DEFAULT[SETTINGS_KEYS.MCP_SERVERS]).toBe('[]');
+	}, 15000);
+});

tools/ui/tests/unit/mcp-service.test.ts

@@ -0,0 +1,338 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Client } from '@modelcontextprotocol/sdk/client';
+import { MCPService } from '$lib/services/mcp.service';
+import { MCPConnectionPhase, MCPTransportType } from '$lib/enums';
+import type { MCPConnectionLog, MCPServerConfig } from '$lib/types';
+import { CORS_PROXY_HEADER_PREFIX } from '$lib/constants';
+
+type DiagnosticFetchFactory = (
+	serverName: string,
+	config: MCPServerConfig,
+	baseInit: RequestInit,
+	targetUrl: URL,
+	useProxy: boolean,
+	onLog?: (log: MCPConnectionLog) => void
+) => { fetch: typeof fetch; disable: () => void };
+
+const createDiagnosticFetch = (
+	config: MCPServerConfig,
+	onLog?: (log: MCPConnectionLog) => void,
+	baseInit: RequestInit = {},
+	useProxy = false
+) =>
+	(
+		MCPService as unknown as { createDiagnosticFetch: DiagnosticFetchFactory }
+	).createDiagnosticFetch('test-server', config, baseInit, new URL(config.url), useProxy, onLog);
+
+describe('MCPService', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		vi.unstubAllGlobals();
+	});
+
+	it('stops transport phase logging after handshake diagnostics are disabled', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, { method: 'POST', body: '{}' });
+		expect(logs).toHaveLength(2);
+		expect(logs.every((log) => log.message.includes('https://example.com/mcp'))).toBe(true);
+
+		controller.disable();
+		await controller.fetch(config.url, { method: 'POST', body: '{}' });
+
+		expect(logs).toHaveLength(2);
+	});
+
+	it('redacts all configured custom headers in diagnostic request logs', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			headers: {
+				'x-auth-token': 'secret-token',
+				'x-vendor-api-key': 'secret-key'
+			}
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log), {
+			headers: config.headers
+		});
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body: '{}'
+		});
+
+		expect(logs).toHaveLength(2);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					'x-auth-token': '[redacted]',
+					'x-vendor-api-key': '[redacted]',
+					'content-type': 'application/json'
+				}
+			}
+		});
+	});
+
+	it('wraps dynamic request headers when using the CORS proxy', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const proxiedAuthToken = `${CORS_PROXY_HEADER_PREFIX}x-auth-token`;
+		const proxiedContentType = `${CORS_PROXY_HEADER_PREFIX}content-type`;
+		const proxiedSessionId = `${CORS_PROXY_HEADER_PREFIX}mcp-session-id`;
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+		const fetchMock = vi.fn().mockResolvedValue(response);
+
+		vi.stubGlobal('fetch', fetchMock);
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			useProxy: true
+		};
+
+		const controller = createDiagnosticFetch(
+			config,
+			(log) => logs.push(log),
+			{
+				headers: {
+					authorization: 'Bearer llama-server-key',
+					[proxiedAuthToken]: 'target-token'
+				}
+			},
+			true
+		);
+
+		await controller.fetch('http://localhost:8080/cors-proxy?url=https%3A%2F%2Fexample.com%2Fmcp', {
+			method: 'POST',
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-request-12345'
+			},
+			body: '{}'
+		});
+
+		const sentHeaders = fetchMock.mock.calls[0]?.[1]?.headers as Headers;
+		expect(sentHeaders.get('authorization')).toBe('Bearer llama-server-key');
+		expect(sentHeaders.get(proxiedAuthToken)).toBe('target-token');
+		expect(sentHeaders.get(proxiedContentType)).toBe('application/json');
+		expect(sentHeaders.get(proxiedSessionId)).toBe('session-request-12345');
+		expect(sentHeaders.has('content-type')).toBe(false);
+		expect(sentHeaders.has('mcp-session-id')).toBe(false);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					authorization: '[redacted]',
+					[proxiedAuthToken]: '[redacted]',
+					[proxiedSessionId]: '....12345'
+				}
+			}
+		});
+	});
+
+	it('DELETE request with CORS proxy should return a fake 200 response', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const fetchMock = vi.fn();
+
+		vi.stubGlobal('fetch', fetchMock);
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			useProxy: true
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log), {}, true);
+
+		const response = await controller.fetch(
+			'http://localhost:8080/cors-proxy?url=https%3A%2F%2Fexample.com%2Fmcp',
+			{ method: 'DELETE' }
+		);
+
+		expect(fetchMock).not.toHaveBeenCalled();
+		expect(response.status).toBe(200);
+		expect(logs.at(-1)?.details).toMatchObject({
+			response: { status: 200, isFake: true }
+		});
+	});
+
+	it('partially redacts mcp-session-id in diagnostic request and response logs', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-response-67890'
+			}
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-request-12345'
+			},
+			body: '{}'
+		});
+
+		expect(logs).toHaveLength(2);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					'content-type': 'application/json',
+					'mcp-session-id': '....12345'
+				}
+			}
+		});
+		expect(logs[1].details).toMatchObject({
+			response: {
+				headers: {
+					'content-type': 'application/json',
+					'mcp-session-id': '....67890'
+				}
+			}
+		});
+	});
+
+	it('extracts JSON-RPC methods without logging the raw request body', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			body: JSON.stringify([
+				{ jsonrpc: '2.0', id: 1, method: 'initialize' },
+				{ jsonrpc: '2.0', method: 'notifications/initialized' }
+			])
+		});
+
+		expect(logs[0].details).toMatchObject({
+			request: {
+				method: 'POST',
+				body: {
+					kind: 'string',
+					size: expect.any(Number)
+				},
+				jsonRpcMethods: ['initialize', 'notifications/initialized']
+			}
+		});
+	});
+
+	it('adds a CORS hint to Failed to fetch diagnostic log messages', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const fetchError = new TypeError('Failed to fetch');
+
+		vi.stubGlobal('fetch', vi.fn().mockRejectedValue(fetchError));
+
+		const config: MCPServerConfig = {
+			url: 'http://localhost:8000/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await expect(controller.fetch(config.url, { method: 'POST', body: '{}' })).rejects.toThrow(
+			'Failed to fetch'
+		);
+
+		expect(logs).toHaveLength(2);
+		expect(logs[1].message).toBe(
+			'HTTP POST http://localhost:8000/mcp failed: Failed to fetch (check CORS?)'
+		);
+	});
+
+	it('detaches phase error logging after the initialize handshake completes', async () => {
+		const phaseLogs: Array<{ phase: MCPConnectionPhase; log: MCPConnectionLog }> = [];
+		const stopPhaseLogging = vi.fn();
+		let emitClientError: ((error: Error) => void) | undefined;
+
+		vi.spyOn(MCPService, 'createTransport').mockReturnValue({
+			transport: {} as never,
+			type: MCPTransportType.WEBSOCKET,
+			stopPhaseLogging
+		});
+		vi.spyOn(MCPService, 'listTools').mockResolvedValue([]);
+		vi.spyOn(Client.prototype, 'getServerVersion').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'getServerCapabilities').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'getInstructions').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'connect').mockImplementation(async function (this: Client) {
+			emitClientError = (error: Error) => this.onerror?.(error);
+			this.onerror?.(new Error('handshake protocol error'));
+		});
+
+		await MCPService.connect(
+			'test-server',
+			{
+				url: 'ws://example.com/mcp',
+				transport: MCPTransportType.WEBSOCKET
+			},
+			undefined,
+			undefined,
+			(phase, log) => phaseLogs.push({ phase, log })
+		);
+
+		expect(stopPhaseLogging).toHaveBeenCalledTimes(1);
+		expect(
+			phaseLogs.filter(
+				({ phase, log }) =>
+					phase === MCPConnectionPhase.ERROR &&
+					log.message === 'Protocol error: handshake protocol error'
+			)
+		).toHaveLength(1);
+
+		emitClientError?.(new Error('runtime protocol error'));
+
+		expect(
+			phaseLogs.filter(
+				({ phase, log }) =>
+					phase === MCPConnectionPhase.ERROR &&
+					log.message === 'Protocol error: runtime protocol error'
+			)
+		).toHaveLength(0);
+	});
+});

tools/ui/tests/unit/model-id-parser.test.ts

@@ -0,0 +1,275 @@
+import { describe, expect, it } from 'vitest';
+import { ModelsService } from '$lib/services/models.service';
+
+const { parseModelId } = ModelsService;
+
+describe('parseModelId', () => {
+	it('handles unknown patterns correctly', () => {
+		expect(parseModelId('model-name-1')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'model-name-1',
+			orgName: null,
+			params: null,
+			quantization: null,
+			raw: 'model-name-1',
+			tags: []
+		});
+
+		expect(parseModelId('org/model-name-2')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'model-name-2',
+			orgName: 'org',
+			params: null,
+			quantization: null,
+			raw: 'org/model-name-2',
+			tags: []
+		});
+	});
+
+	it('extracts model parameters correctly', () => {
+		expect(parseModelId('model-100B-BF16')).toMatchObject({ params: '100B' });
+		expect(parseModelId('model-100B:Q4_K_M')).toMatchObject({ params: '100B' });
+	});
+
+	it('extracts model parameters correctly in lowercase', () => {
+		expect(parseModelId('model-100b-bf16')).toMatchObject({ params: '100B' });
+		expect(parseModelId('model-100b:q4_k_m')).toMatchObject({ params: '100B' });
+	});
+
+	it('extracts effective parameters correctly', () => {
+		expect(parseModelId('model-E4B-BF16')).toMatchObject({ params: 'E4B' });
+		expect(parseModelId('model-e2b:q4_k_m')).toMatchObject({ params: 'E2B' });
+	});
+
+	it('extracts activated parameters correctly', () => {
+		expect(parseModelId('model-100B-A10B-BF16')).toMatchObject({ activatedParams: 'A10B' });
+		expect(parseModelId('model-100B-A10B:Q4_K_M')).toMatchObject({ activatedParams: 'A10B' });
+	});
+
+	it('extracts activated parameters correctly in lowercase', () => {
+		expect(parseModelId('model-100b-a10b-bf16')).toMatchObject({ activatedParams: 'A10B' });
+		expect(parseModelId('model-100b-a10b:q4_k_m')).toMatchObject({ activatedParams: 'A10B' });
+	});
+
+	it('extracts quantization correctly', () => {
+		// Dash-separated quantization
+		expect(parseModelId('model-100B-UD-IQ1_S')).toMatchObject({ quantization: 'UD-IQ1_S' });
+		expect(parseModelId('model-100B-IQ4_XS')).toMatchObject({ quantization: 'IQ4_XS' });
+		expect(parseModelId('model-100B-Q4_K_M')).toMatchObject({ quantization: 'Q4_K_M' });
+		expect(parseModelId('model-100B-Q8_0')).toMatchObject({ quantization: 'Q8_0' });
+		expect(parseModelId('model-100B-UD-Q8_K_XL')).toMatchObject({ quantization: 'UD-Q8_K_XL' });
+		expect(parseModelId('model-100B-F16')).toMatchObject({ quantization: 'F16' });
+		expect(parseModelId('model-100B-BF16')).toMatchObject({ quantization: 'BF16' });
+		expect(parseModelId('model-100B-MXFP4')).toMatchObject({ quantization: 'MXFP4' });
+
+		// Colon-separated quantization
+		expect(parseModelId('model-100B:UD-IQ1_S')).toMatchObject({ quantization: 'UD-IQ1_S' });
+		expect(parseModelId('model-100B:IQ4_XS')).toMatchObject({ quantization: 'IQ4_XS' });
+		expect(parseModelId('model-100B:Q4_K_M')).toMatchObject({ quantization: 'Q4_K_M' });
+		expect(parseModelId('model-100B:Q8_0')).toMatchObject({ quantization: 'Q8_0' });
+		expect(parseModelId('model-100B:UD-Q8_K_XL')).toMatchObject({ quantization: 'UD-Q8_K_XL' });
+		expect(parseModelId('model-100B:F16')).toMatchObject({ quantization: 'F16' });
+		expect(parseModelId('model-100B:BF16')).toMatchObject({ quantization: 'BF16' });
+		expect(parseModelId('model-100B:MXFP4')).toMatchObject({ quantization: 'MXFP4' });
+
+		// Dot-separated quantization
+		expect(parseModelId('nomic-embed-text-v2-moe.Q4_K_M')).toMatchObject({
+			quantization: 'Q4_K_M'
+		});
+	});
+
+	it('extracts additional tags correctly', () => {
+		expect(parseModelId('model-100B-foobar-Q4_K_M')).toMatchObject({ tags: ['foobar'] });
+		expect(parseModelId('model-100B-A10B-foobar-1M-BF16')).toMatchObject({
+			tags: ['foobar', '1M']
+		});
+		expect(parseModelId('model-100B-1M-foobar:UD-Q8_K_XL')).toMatchObject({
+			tags: ['1M', 'foobar']
+		});
+	});
+
+	it('filters out container format segments from tags', () => {
+		expect(parseModelId('model-100B-GGUF-Instruct-BF16')).toMatchObject({
+			tags: ['Instruct']
+		});
+		expect(parseModelId('model-100B-GGML-Instruct:Q4_K_M')).toMatchObject({
+			tags: ['Instruct']
+		});
+	});
+
+	it('handles real-world examples correctly', () => {
+		expect(parseModelId('meta-llama/Llama-3.1-8B')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Llama-3.1',
+			orgName: 'meta-llama',
+			params: '8B',
+			quantization: null,
+			raw: 'meta-llama/Llama-3.1-8B',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-120b-MXFP4')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '120B',
+			quantization: 'MXFP4',
+			raw: 'openai/gpt-oss-120b-MXFP4',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-20b:Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '20B',
+			quantization: 'Q4_K_M',
+			raw: 'openai/gpt-oss-20b:Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('Qwen/Qwen3-Coder-30B-A3B-Instruct-1M-BF16')).toStrictEqual({
+			activatedParams: 'A3B',
+			modelName: 'Qwen3-Coder',
+			orgName: 'Qwen',
+			params: '30B',
+			quantization: 'BF16',
+			raw: 'Qwen/Qwen3-Coder-30B-A3B-Instruct-1M-BF16',
+			tags: ['Instruct', '1M']
+		});
+	});
+
+	it('handles real-world examples with quantization in segments', () => {
+		expect(parseModelId('meta-llama/Llama-4-Scout-17B-16E-Instruct-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Llama-4-Scout',
+			orgName: 'meta-llama',
+			params: '17B',
+			quantization: 'Q4_K_M',
+			raw: 'meta-llama/Llama-4-Scout-17B-16E-Instruct-Q4_K_M',
+			tags: ['16E', 'Instruct']
+		});
+
+		expect(parseModelId('MiniMaxAI/MiniMax-M2-IQ4_XS')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'MiniMax-M2',
+			orgName: 'MiniMaxAI',
+			params: null,
+			quantization: 'IQ4_XS',
+			raw: 'MiniMaxAI/MiniMax-M2-IQ4_XS',
+			tags: []
+		});
+
+		expect(parseModelId('MiniMaxAI/MiniMax-M2-UD-Q3_K_XL')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'MiniMax-M2',
+			orgName: 'MiniMaxAI',
+			params: null,
+			quantization: 'UD-Q3_K_XL',
+			raw: 'MiniMaxAI/MiniMax-M2-UD-Q3_K_XL',
+			tags: []
+		});
+
+		expect(parseModelId('mistralai/Devstral-2-123B-Instruct-2512-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Devstral-2',
+			orgName: 'mistralai',
+			params: '123B',
+			quantization: 'Q4_K_M',
+			raw: 'mistralai/Devstral-2-123B-Instruct-2512-Q4_K_M',
+			tags: ['Instruct', '2512']
+		});
+
+		expect(parseModelId('mistralai/Devstral-Small-2-24B-Instruct-2512-Q8_0')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Devstral-Small-2',
+			orgName: 'mistralai',
+			params: '24B',
+			quantization: 'Q8_0',
+			raw: 'mistralai/Devstral-Small-2-24B-Instruct-2512-Q8_0',
+			tags: ['Instruct', '2512']
+		});
+
+		expect(parseModelId('noctrex/GLM-4.7-Flash-MXFP4_MOE')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'GLM-4.7-Flash',
+			orgName: 'noctrex',
+			params: null,
+			quantization: 'MXFP4_MOE',
+			raw: 'noctrex/GLM-4.7-Flash-MXFP4_MOE',
+			tags: []
+		});
+
+		expect(parseModelId('Qwen/Qwen3-Coder-Next-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Qwen3-Coder-Next',
+			orgName: 'Qwen',
+			params: null,
+			quantization: 'Q4_K_M',
+			raw: 'Qwen/Qwen3-Coder-Next-Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-120b-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '120B',
+			quantization: 'Q4_K_M',
+			raw: 'openai/gpt-oss-120b-Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-20b-F16')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '20B',
+			quantization: 'F16',
+			raw: 'openai/gpt-oss-20b-F16',
+			tags: []
+		});
+
+		expect(parseModelId('nomic-embed-text-v2-moe.Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'nomic-embed-text-v2-moe',
+			orgName: null,
+			params: null,
+			quantization: 'Q4_K_M',
+			raw: 'nomic-embed-text-v2-moe.Q4_K_M',
+			tags: []
+		});
+	});
+
+	it('handles ambiguous model names', () => {
+		// Qwen3.5 Instruct vs Thinking — tags should distinguish them
+		expect(parseModelId('Qwen/Qwen3.5-30B-A3B-Instruct')).toMatchObject({
+			modelName: 'Qwen3.5',
+			params: '30B',
+			activatedParams: 'A3B',
+			tags: ['Instruct']
+		});
+
+		expect(parseModelId('Qwen/Qwen3.5-30B-A3B-Thinking')).toMatchObject({
+			modelName: 'Qwen3.5',
+			params: '30B',
+			activatedParams: 'A3B',
+			tags: ['Thinking']
+		});
+
+		// Dot-separated quantization with variant suffixes
+		expect(parseModelId('gemma-3-27b-it-heretic-v2.Q8_0')).toMatchObject({
+			modelName: 'gemma-3',
+			params: '27B',
+			quantization: 'Q8_0',
+			tags: ['it', 'heretic', 'v2']
+		});
+
+		expect(parseModelId('gemma-3-27b-it.Q8_0')).toMatchObject({
+			modelName: 'gemma-3',
+			params: '27B',
+			quantization: 'Q8_0',
+			tags: ['it']
+		});
+	});
+});

tools/ui/tests/unit/model-names.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { isValidModelName, normalizeModelName } from '$lib/utils/model-names';
+
+describe('normalizeModelName', () => {
+	it('preserves Hugging Face org/model format (single slash)', () => {
+		// Single slash is treated as Hugging Face format and preserved
+		expect(normalizeModelName('meta-llama/Llama-3.1-8B')).toBe('meta-llama/Llama-3.1-8B');
+		expect(normalizeModelName('models/model-name-1')).toBe('models/model-name-1');
+	});
+
+	it('extracts filename from multi-segment paths', () => {
+		// Multiple slashes -> extract just the filename
+		expect(normalizeModelName('path/to/model/model-name-2')).toBe('model-name-2');
+		expect(normalizeModelName('/absolute/path/to/model')).toBe('model');
+	});
+
+	it('extracts filename from backslash paths', () => {
+		expect(normalizeModelName('C\\Models\\model-name-1')).toBe('model-name-1');
+		expect(normalizeModelName('path\\to\\model\\model-name-2')).toBe('model-name-2');
+	});
+
+	it('handles mixed path separators', () => {
+		expect(normalizeModelName('path/to\\model/model-name-2')).toBe('model-name-2');
+	});
+
+	it('returns simple names as-is', () => {
+		expect(normalizeModelName('simple-model')).toBe('simple-model');
+		expect(normalizeModelName('model-name-2')).toBe('model-name-2');
+	});
+
+	it('trims whitespace', () => {
+		expect(normalizeModelName('  model-name  ')).toBe('model-name');
+	});
+
+	it('returns empty string for empty input', () => {
+		expect(normalizeModelName('')).toBe('');
+		expect(normalizeModelName('   ')).toBe('');
+	});
+});
+
+describe('isValidModelName', () => {
+	it('returns true for valid names', () => {
+		expect(isValidModelName('model')).toBe(true);
+		expect(isValidModelName('path/to/model.bin')).toBe(true);
+	});
+
+	it('returns false for empty values', () => {
+		expect(isValidModelName('')).toBe(false);
+		expect(isValidModelName('   ')).toBe(false);
+	});
+});

tools/ui/tests/unit/parse-exec-shell-status.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { isExitCodeSummaryLine, parseExecShellCommandExitStatus } from '$lib/utils';
+
+describe('parseExecShellCommandExitStatus', () => {
+	it('returns undefined when result is empty', () => {
+		expect(parseExecShellCommandExitStatus(undefined)).toBeUndefined();
+		expect(parseExecShellCommandExitStatus('')).toBeUndefined();
+	});
+
+	it('parses a zero-exit summary at end of clean stdout', () => {
+		const status = parseExecShellCommandExitStatus('hello world\n[exit code: 0]');
+		expect(status).toEqual({
+			code: 0,
+			timedOut: false,
+			rawText: '[exit code: 0]'
+		});
+	});
+
+	it('parses a non-zero exit summary', () => {
+		const status = parseExecShellCommandExitStatus('cargo: error[E0425]\n[exit code: 101]');
+		expect(status?.code).toBe(101);
+		expect(status?.timedOut).toBe(false);
+	});
+
+	it('detects timed-out suffix', () => {
+		const status = parseExecShellCommandExitStatus(
+			'still building...\n[exit code: -1] [exit due to timed out]'
+		);
+		expect(status?.code).toBe(-1);
+		expect(status?.timedOut).toBe(true);
+	});
+
+	it('tolerates trailing whitespace after the tail line', () => {
+		const status = parseExecShellCommandExitStatus('[exit code: 0]   \n\n');
+		expect(status?.code).toBe(0);
+	});
+
+	it('does not match an explanatory mention of "[exit code:" not at end', () => {
+		// Any non-trailing occurrence should NOT trigger the badge - we
+		// anchor to the absolute end of the string.
+		const status = parseExecShellCommandExitStatus(
+			'the shell prints [exit code: 0]\nwhen done\nreally done\n'
+		);
+		expect(status).toBeUndefined();
+	});
+
+	it('does not match mid-stream exit lines followed by more output', () => {
+		const status = parseExecShellCommandExitStatus('[exit code: 0]\nmore output keeps streaming');
+		expect(status).toBeUndefined();
+	});
+});
+
+describe('isExitCodeSummaryLine', () => {
+	const status = parseExecShellCommandExitStatus('hello\n[exit code: 7]');
+
+	it('matches when line trims to the tail text', () => {
+		expect(isExitCodeSummaryLine('   [exit code: 7]   ', status)).toBe(true);
+	});
+
+	it('does not match unrelated lines', () => {
+		expect(isExitCodeSummaryLine('plain output line', status)).toBe(false);
+	});
+
+	it('returns false for missing status argument', () => {
+		expect(isExitCodeSummaryLine('[exit code: 7]', undefined)).toBe(false);
+	});
+});

tools/ui/tests/unit/parse-mcp-server-settings.test.ts

@@ -0,0 +1,151 @@
+import { describe, expect, it, vi } from 'vitest';
+import { parseMcpServerSettings } from '$lib/utils/mcp';
+import { MCP_SERVER_ID_PREFIX } from '$lib/constants/mcp';
+
+/**
+ * Tests for the mcpServers settings parser.
+ *
+ * The parser has to be resilient to anything that may live in the
+ * user's localStorage: malformed JSON, wrong shapes, missing fields,
+ * falsy-but-not-zero numbers, and entry arrays that have been mutated
+ * by the user via the settings form.
+ */
+describe('parseMcpServerSettings', () => {
+	it('returns an empty array for falsy or whitespace-only input', () => {
+		expect(parseMcpServerSettings(null)).toEqual([]);
+		expect(parseMcpServerSettings(undefined)).toEqual([]);
+		expect(parseMcpServerSettings('')).toEqual([]);
+		expect(parseMcpServerSettings('   ')).toEqual([]);
+	});
+
+	it('returns an empty array and logs a warning for invalid JSON strings', () => {
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+		expect(parseMcpServerSettings('{not-json')).toEqual([]);
+		expect(warn).toHaveBeenCalled();
+
+		warn.mockRestore();
+	});
+
+	it('returns an empty array for valid JSON that is not an array', () => {
+		expect(parseMcpServerSettings('"plain-string"')).toEqual([]);
+		expect(parseMcpServerSettings('{"id":"foo"}')).toEqual([]);
+		expect(parseMcpServerSettings('42')).toEqual([]);
+		expect(parseMcpServerSettings('null')).toEqual([]);
+	});
+
+	it('drops entries with no parseable id and substitutes a stable fallback', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([{ url: 'https://a.test', enabled: true }, { url: 'https://b.test' }])
+		);
+
+		expect(parsed).toHaveLength(2);
+		expect(parsed[0]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-1`);
+		expect(parsed[1]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-2`);
+	});
+
+	it('reuses the first id when it is present and falls back only for missing ones', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'custom-1', url: 'https://a.test' },
+				{ url: 'https://b.test' },
+				{ id: 'custom-3', url: 'https://c.test' }
+			])
+		);
+
+		expect(parsed[0]?.id).toBe('custom-1');
+		expect(parsed[1]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-2`);
+		expect(parsed[2]?.id).toBe('custom-3');
+	});
+
+	it('does not emit a per-server timeout, the request timeout is a live global setting', () => {
+		// A stored per-server requestTimeoutSeconds was never editable in
+		// any UI and froze the global setting at server creation time,
+		// making the Settings value a no-op for existing servers. The
+		// parser drops the field so the global applies live everywhere.
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([{ id: 'a', url: 'https://a.test', requestTimeoutSeconds: 45 }])
+		);
+
+		expect(parsed[0]).not.toHaveProperty('requestTimeoutSeconds');
+	});
+
+	it('treats whitespace-only headers strings as undefined', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'a', url: 'https://a.test', headers: '   ' },
+				{ id: 'b', url: 'https://b.test', headers: '{"X-Foo":"bar"}' }
+			])
+		);
+
+		// The parser trims headers and coerces empty/whitespace to undefined.
+		expect(parsed[0]?.headers).toBeUndefined();
+		expect(parsed[1]?.headers).toBe('{"X-Foo":"bar"}');
+	});
+
+	it('defaults coercion for booleans (undefined -> false, true -> true)', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'a', url: 'https://a.test' },
+				{ id: 'b', url: 'https://b.test', enabled: true },
+				{ id: 'c', url: 'https://c.test', enabled: false },
+				{ id: 'd', url: 'https://d.test', useProxy: true }
+			])
+		);
+
+		expect(parsed[0]?.enabled).toBe(false);
+		expect(parsed[1]?.enabled).toBe(true);
+		expect(parsed[2]?.enabled).toBe(false);
+		expect(parsed[0]?.useProxy).toBe(false);
+		expect(parsed[3]?.useProxy).toBe(true);
+	});
+
+	it('keeps disabled entries in the list, enabled is state and never a visibility filter', () => {
+		// Regression guard for issue #25625: filtering the server list on
+		// `enabled` hides a toggled-off server from every UI surface with
+		// no way to re-enable it. Any list derived from this parser must
+		// contain disabled entries.
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'on', url: 'https://on.test', enabled: true },
+				{ id: 'off', url: 'https://off.test', enabled: false }
+			])
+		);
+
+		expect(parsed.map((entry) => entry.id)).toEqual(['on', 'off']);
+		expect(parsed[1]?.enabled).toBe(false);
+	});
+
+	it('preserves input order when mapping entries', () => {
+		const source = [
+			{ id: 'gamma', url: 'https://c.test' },
+			{ id: 'alpha', url: 'https://a.test' },
+			{ id: 'beta', url: 'https://b.test' }
+		];
+
+		const parsed = parseMcpServerSettings(JSON.stringify(source));
+
+		expect(parsed.map((entry) => entry.id)).toEqual(['gamma', 'alpha', 'beta']);
+	});
+
+	it('passes non-string raw input through the JSON-equality path', () => {
+		const parsed = parseMcpServerSettings([
+			{ id: 'a', url: 'https://a.test' },
+			{ id: 'b', url: 'https://b.test', enabled: true }
+		]);
+
+		expect(parsed).toHaveLength(2);
+		expect(parsed[0]?.id).toBe('a');
+		expect(parsed[1]?.enabled).toBe(true);
+	});
+
+	it('coerces non-string url values to an empty string rather than throwing', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([{ id: 'a', url: 42 }, { id: 'b' }, { id: 'c', url: 'https://c.test' }])
+		);
+
+		expect(parsed[0]?.url).toBe('');
+		expect(parsed[1]?.url).toBe('');
+		expect(parsed[2]?.url).toBe('https://c.test');
+	});
+});

tools/ui/tests/unit/parse-toolcalls-memo.test.ts

@@ -0,0 +1,146 @@
+// Tests for the memoized parseToolCalls and O(1) tool message lookup in
+// deriveAgenticSections. These were added to prevent regressions where
+// streaming text tokens trigger redundant JSON.parse calls on unchanged
+// tool call data.
+
+import { describe, it, expect, vi } from 'vitest';
+import { deriveAgenticSections } from '$lib/utils/agentic';
+import type { ApiChatCompletionToolCall } from '$lib/types/api';
+import type { DatabaseMessage } from '$lib/types/database';
+import { MessageRole, AgenticSectionType } from '$lib/enums';
+
+function makeMessage(overrides: Partial<DatabaseMessage>): DatabaseMessage {
+	return {
+		id: 'm1',
+		convId: 'c1',
+		type: 'text',
+		timestamp: 0,
+		role: MessageRole.ASSISTANT,
+		content: '',
+		parent: null,
+		children: [],
+		...overrides
+	} as DatabaseMessage;
+}
+
+describe('parseToolCalls memoization', () => {
+	it('returns the same array reference for the same JSON string', () => {
+		// parseToolCalls is not exported, but deriveAgenticSections uses it
+		// internally. We verify memoization through behavior: calling
+		// deriveAgenticSections twice with the same toolCalls should not
+		// re-parse (which we verify by checking the returned sections
+		// are equivalent).
+		const toolCallsJson = JSON.stringify([
+			{ id: 'call_1', type: 'function', function: { name: 'test', arguments: '{}' } }
+		]);
+
+		const msg = makeMessage({ content: 'hello', toolCalls: toolCallsJson });
+		const sections1 = deriveAgenticSections(msg, [], [], false);
+		const sections2 = deriveAgenticSections(msg, [], [], false);
+
+		expect(sections1).toHaveLength(sections2.length);
+		expect(sections1[0].type).toBe(sections2[0].type);
+	});
+
+	it('does not re-parse JSON on cache hit', () => {
+		const toolCallsJson = JSON.stringify([
+			{ id: 'call_1', type: 'function', function: { name: 'test', arguments: '{}' } }
+		]);
+
+		const msg = makeMessage({ content: 'hello', toolCalls: toolCallsJson });
+		const spy = vi.spyOn(JSON, 'parse');
+
+		deriveAgenticSections(msg, [], [], false);
+		const callsAfterFirst = spy.mock.calls.length;
+
+		deriveAgenticSections(msg, [], [], false);
+		expect(spy.mock.calls.length).toBe(callsAfterFirst);
+
+		spy.mockRestore();
+	});
+
+	it('handles empty/undefined toolCalls without error', () => {
+		const msg = makeMessage({ content: 'hello' });
+		const sections = deriveAgenticSections(msg, [], [], false);
+
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+	});
+
+	it('handles invalid JSON gracefully', () => {
+		const msg = makeMessage({ content: 'hello', toolCalls: '{invalid' });
+		const sections = deriveAgenticSections(msg, [], [], false);
+
+		// Should return just the text section, no tool call sections
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+	});
+});
+
+describe('deriveAgenticSections O(1) tool message lookup', () => {
+	it('matches tool messages to tool calls by toolCallId', () => {
+		const toolCallsJson = JSON.stringify([
+			{ id: 'call_1', type: 'function', function: { name: 'test_1', arguments: '{}' } },
+			{ id: 'call_2', type: 'function', function: { name: 'test_2', arguments: '{}' } }
+		]);
+
+		const toolMessages = [
+			makeMessage({ role: MessageRole.TOOL, toolCallId: 'call_1', content: 'result_1' }),
+			makeMessage({ role: MessageRole.TOOL, toolCallId: 'call_2', content: 'result_2' })
+		];
+
+		const msg = makeMessage({ content: 'hello', toolCalls: toolCallsJson });
+		const sections = deriveAgenticSections(msg, toolMessages, [], false);
+
+		// Expect: TEXT + 2 TOOL_CALL sections
+		const toolCallSections = sections.filter((s) => s.type === AgenticSectionType.TOOL_CALL);
+		expect(toolCallSections).toHaveLength(2);
+		expect(toolCallSections[0].toolResult).toBe('result_1');
+		expect(toolCallSections[1].toolResult).toBe('result_2');
+	});
+
+	it('handles missing tool messages (pending calls during streaming)', () => {
+		const toolCallsJson = JSON.stringify([
+			{ id: 'call_1', type: 'function', function: { name: 'test', arguments: '{}' } }
+		]);
+
+		const msg = makeMessage({ content: '', toolCalls: toolCallsJson });
+		const sections = deriveAgenticSections(msg, [], [], true);
+
+		const toolCallSection = sections.find((s) => s.type === AgenticSectionType.TOOL_CALL_PENDING);
+		expect(toolCallSection).toBeDefined();
+		expect(toolCallSection?.content).toBe('');
+	});
+
+	it('scales with many tool calls (no O(n^2) blowup)', () => {
+		const N = 100;
+		const toolCalls = Array.from(
+			{ length: N },
+			(_, i): ApiChatCompletionToolCall => ({
+				id: `call_${i}`,
+				type: 'function',
+				function: { name: `tool_${i}`, arguments: '{}' }
+			})
+		);
+		const toolCallsJson = JSON.stringify(toolCalls);
+
+		const toolMessages = Array.from({ length: N }, (_, i) =>
+			makeMessage({
+				role: MessageRole.TOOL,
+				toolCallId: `call_${i}`,
+				content: `result_${i}`
+			})
+		);
+
+		const msg = makeMessage({ content: 'hello', toolCalls: toolCallsJson });
+
+		// If the lookup were still O(n^2), this would be noticeably slow
+		const start = Date.now();
+		const sections = deriveAgenticSections(msg, toolMessages, [], false);
+		const elapsed = Date.now() - start;
+
+		const toolCallSections = sections.filter((s) => s.type === AgenticSectionType.TOOL_CALL);
+		expect(toolCallSections).toHaveLength(N);
+		expect(elapsed).toBeLessThan(100); // Should be fast with O(1) lookup
+	});
+});

tools/ui/tests/unit/partial-tool-call-cleanup.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { MessageRole } from '$lib/enums';
+import { deriveAgenticSections } from '$lib/utils/agentic';
+import type { DatabaseMessage } from '$lib/types/database';
+
+function makeAssistant(overrides: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	return {
+		id: overrides.id ?? 'ast-1',
+		convId: 'conv-1',
+		type: 'text',
+		timestamp: Date.now(),
+		role: MessageRole.ASSISTANT,
+		content: overrides.content ?? '',
+		parent: null,
+		children: [],
+		...overrides
+	} as DatabaseMessage;
+}
+
+// Mirrors the filter inside ChatService.convertDbMessageToApiChatMessageData:
+// a partial tool call captured mid-stream must not survive into the next request
+// payload. The fix in chatStore.savePartialResponseIfNeeded clears toolCalls to ''
+// on Stop/Send immediately, mirroring what the agentic flow already does in
+// onAssistantTurnComplete(...undefined).
+function buildApiToolCalls(message: DatabaseMessage): unknown[] | undefined {
+	if (!message.toolCalls) return undefined;
+	try {
+		const parsed = JSON.parse(message.toolCalls);
+		return Array.isArray(parsed) && parsed.length > 0 ? parsed : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+describe('partial tool call cleanup', () => {
+	// Reproduces the broken payload from the user's screenshot: model was
+	// streaming a tool call whose arguments JSON was cut mid-string. The outer
+	// envelope still parses, but the arguments themselves are invalid JSON and
+	// the server rejects the request.
+	it('marks a partial tool call payload as unsafe to re-send', () => {
+		const message = makeAssistant({
+			content: 'partial reasoning',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: {
+						name: 'exec_shell_command',
+						arguments: '{"command":`grep -n \\"read_to\\" ` /Users'
+					}
+				}
+			])
+		});
+
+		const apiToolCalls = buildApiToolCalls(message);
+
+		// The bug: even though arguments are invalid, the outer array parses and
+		// the request gets sent. Function arguments must be parseable JSON on their
+		// own for the server to execute the tool.
+		expect(apiToolCalls).toBeDefined();
+		const args = (apiToolCalls![0] as { function: { arguments: string } }).function.arguments;
+		expect(() => JSON.parse(args)).toThrow();
+	});
+
+	// After Stop, savePartialResponseIfNeeded clears toolCalls and the agentic
+	// flow does the same in its silent-return detection. The next request reads
+	// toolCalls = '' and the conversion drops the field entirely so the server
+	// never sees the half-streamed call.
+	it('drops tool_calls from the API request after toolCalls is cleared', () => {
+		const clearedMessage = makeAssistant({
+			content: 'partial reasoning',
+			toolCalls: ''
+		});
+
+		const apiToolCalls = buildApiToolCalls(clearedMessage);
+		expect(apiToolCalls).toBeUndefined();
+	});
+
+	// The cleanup path keeps the partial reasoning content visible in the UI;
+	// only the tool_calls field is reset. deriveAgenticSections should still
+	// surface the reasoning as interrupted (no content / no tool calls behind
+	// it) without resurrecting the dead tool call block.
+	it('keeps reasoning content visible after cleanup, without a tool call block', () => {
+		const cleared = makeAssistant({
+			content: '',
+			reasoningContent: 'thinking about read_to',
+			toolCalls: ''
+		});
+
+		const sections = deriveAgenticSections(cleared);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe('reasoning');
+		expect(sections.some((s) => s.type.includes('tool_call'))).toBe(false);
+	});
+});

tools/ui/tests/unit/pwa.spec.ts

@@ -0,0 +1,193 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const DIST_DIR = resolve(__dirname, '../../dist');
+const distExists = existsSync(DIST_DIR);
+
+// PWA Build Output tests are integration tests that require a built dist/.
+// CI builds first then runs these tests; local devs should run `npm run build` or use `npm run test:pwa`.
+describe('PWA Build Output', () => {
+	if (!distExists) {
+		console.warn(`⚠ Skipping PWA Build Output tests - dist/ not found (run 'npm run build' first)`);
+		it('skipped - dist/ not found', () => {});
+		return;
+	}
+
+	const swContent = readFileSync(resolve(DIST_DIR, 'sw.js'), 'utf-8');
+	const indexContent = readFileSync(resolve(DIST_DIR, 'index.html'), 'utf-8');
+
+	describe('Core files exist', () => {
+		it('service worker (sw.js) exists', () => {
+			expect(existsSync(resolve(DIST_DIR, 'sw.js')), 'sw.js not found').toBeTruthy();
+		});
+
+		it('workbox library exists (hashed filename)', () => {
+			// SvelteKit generates workbox-{hash}.js files
+			const files = readdirSync(DIST_DIR).filter((f) => f.match(/^workbox-[^.]+\.js$/));
+			expect(files.length).toBeGreaterThan(0);
+		});
+
+		it('manifest.webmanifest exists', () => {
+			expect(
+				existsSync(resolve(DIST_DIR, 'manifest.webmanifest')),
+				'manifest.webmanifest not found'
+			).toBeTruthy();
+		});
+
+		it('SvelteKit bundle.js exists in _app/immutable/', () => {
+			// SvelteKit generates hashed bundle names in _app/immutable/
+			const appDir = resolve(DIST_DIR, '_app', 'immutable');
+			expect(existsSync(appDir), '_app/immutable/ not found').toBeTruthy();
+			const files = readdirSync(appDir).filter((f) => f.startsWith('bundle.') && f.endsWith('.js'));
+			expect(files.length).toBeGreaterThan(0);
+		});
+
+		it('SvelteKit bundle.css exists in _app/immutable/assets/', () => {
+			// SvelteKit generates hashed CSS bundles in _app/immutable/assets/
+			const cssDir = resolve(DIST_DIR, '_app', 'immutable', 'assets');
+			expect(existsSync(cssDir), '_app/immutable/assets/ not found').toBeTruthy();
+			const files = readdirSync(cssDir).filter(
+				(f) => f.startsWith('bundle.') && f.endsWith('.css')
+			);
+			expect(files.length).toBeGreaterThan(0);
+		});
+
+		it('version.json exists in _app/', () => {
+			// SvelteKit stores version.json in _app directory
+			expect(
+				existsSync(resolve(DIST_DIR, '_app', 'version.json')),
+				'_app/version.json not found'
+			).toBeTruthy();
+		});
+	});
+
+	describe('version.json content', () => {
+		it('has valid JSON with version field', () => {
+			const content = readFileSync(resolve(DIST_DIR, '_app', 'version.json'), 'utf-8');
+			const parsed = JSON.parse(content);
+			expect(parsed).toHaveProperty('version');
+			expect(typeof parsed.version).toBe('string');
+			expect(parsed.version.length).toBeGreaterThan(0);
+		});
+	});
+
+	describe('Service worker content', () => {
+		it('service worker has minified self.define format', () => {
+			expect(swContent).toBeTruthy();
+			// SvelteKit's workbox-plugin-sveltekit produces a minified SW with self.define
+			expect(swContent).toMatch(/if\(!self.define\)/);
+		});
+
+		it('references hashed workbox file (SvelteKit build output)', () => {
+			expect(swContent).toBeTruthy();
+			// SvelteKit's workbox-plugin-sveltekit references hashed workbox files
+			expect(swContent).toMatch(/define\(\["\.\/workbox-[a-zA-Z0-9]+"\]/);
+		});
+
+		it('precache contains SvelteKit bundle.js with content hash', () => {
+			expect(swContent).toBeTruthy();
+			// SvelteKit uses content-hashed bundle names in _app/immutable/
+			expect(swContent).toMatch(/"_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		});
+
+		it('precache contains SvelteKit bundle.css with content hash', () => {
+			expect(swContent).toBeTruthy();
+			// SvelteKit uses content-hashed CSS bundle names in _app/immutable/assets/
+			expect(swContent).toMatch(/"_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/);
+		});
+
+		it('precache contains _app/version.json', () => {
+			expect(swContent).toBeTruthy();
+			// SvelteKit stores version.json in _app directory
+			expect(swContent).toMatch(/"_app\/version\.json"/);
+		});
+
+		it('precache contains manifest.webmanifest', () => {
+			expect(swContent).toBeTruthy();
+			expect(swContent).toMatch(/"manifest\.webmanifest"/);
+		});
+
+		it('no navigation route — API endpoints bypass PWA', () => {
+			expect(swContent).toBeTruthy();
+			// NavigationRoute is intentionally absent so direct browser
+			// navigation to server API endpoints returns JSON, not HTML.
+			expect(swContent).not.toMatch(/NavigationRoute/);
+		});
+
+		it('has runtime caching for API routes', () => {
+			expect(swContent).toBeTruthy();
+			expect(swContent).toMatch(/api-cache/);
+			expect(swContent).toMatch(/NetworkFirst/);
+		});
+	});
+
+	describe('index.html content', () => {
+		it('has modulepreload link for SvelteKit bundle with content hash', () => {
+			expect(indexContent).toBeTruthy();
+			// SvelteKit generates hashed bundle names in _app/immutable/
+			expect(indexContent).toMatch(/href="(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		});
+
+		it('has stylesheet link for SvelteKit bundle.css with content hash', () => {
+			expect(indexContent).toBeTruthy();
+			expect(indexContent).toMatch(
+				/href="(\.\/|\/)_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/
+			);
+		});
+
+		it('has dynamic import for SvelteKit bundle with content hash', () => {
+			expect(indexContent).toBeTruthy();
+			expect(indexContent).toMatch(
+				/import\("(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"\)/
+			);
+		});
+
+		it('has __sveltekit__ variable (SvelteKit adds hash suffix)', () => {
+			expect(indexContent).toBeTruthy();
+			// SvelteKit 2.x uses __sveltekit__ as base with random suffix
+			expect(indexContent).toMatch(/__sveltekit_[a-zA-Z0-9-]+/);
+		});
+
+		it('has PWA manifest link', () => {
+			expect(indexContent).toBeTruthy();
+			expect(indexContent).toMatch(/rel="manifest" href="(\.?\/)?manifest\.webmanifest"/);
+		});
+
+		it('has apple-touch-icon link', () => {
+			expect(indexContent).toBeTruthy();
+			expect(indexContent).toMatch(/rel="apple-touch-icon"/);
+		});
+
+		it('has _app paths for SvelteKit bundles', () => {
+			expect(indexContent).toBeTruthy();
+			// SvelteKit uses _app paths for hashed assets
+			expect(indexContent).toMatch(/_app\//);
+		});
+	});
+
+	describe('SvelteKit _app directory', () => {
+		it('_app directory exists (SvelteKit uses it for hashed assets)', () => {
+			expect(existsSync(resolve(DIST_DIR, '_app'))).toBeTruthy();
+		});
+	});
+
+	describe('Hashed workbox files', () => {
+		it('workbox-*.js files exist in dist root (SvelteKit build output)', () => {
+			const files = readdirSync(DIST_DIR).filter((f) => f.match(/^workbox-[^.]+\.js$/));
+			expect(files.length).toBeGreaterThan(0);
+		});
+	});
+
+	describe('Static assets', () => {
+		it('has favicon.ico', () => {
+			expect(existsSync(resolve(DIST_DIR, 'favicon.ico'))).toBeTruthy();
+		});
+
+		it('has PWA icons', () => {
+			expect(existsSync(resolve(DIST_DIR, 'pwa-64x64.png'))).toBeTruthy();
+			expect(existsSync(resolve(DIST_DIR, 'pwa-192x192.png'))).toBeTruthy();
+			expect(existsSync(resolve(DIST_DIR, 'pwa-512x512.png'))).toBeTruthy();
+		});
+	});
+});

tools/ui/tests/unit/reasoning-context.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import { MessageRole } from '$lib/enums';
+
+/**
+ * Tests for the new reasoning content handling.
+ * In the new architecture, reasoning content is stored in a dedicated
+ * `reasoningContent` field on DatabaseMessage, not embedded in content with tags.
+ * The API sends it as `reasoning_content` on ApiChatMessageData.
+ */
+
+describe('reasoning content in new structured format', () => {
+	it('reasoning is stored as separate field, not in content', () => {
+		// Simulate what the new chat store does
+		const message = {
+			content: 'The answer is 4.',
+			reasoningContent: 'Let me think: 2+2=4, basic arithmetic.'
+		};
+
+		// Content should be clean
+		expect(message.content).not.toContain('<<<');
+		expect(message.content).toBe('The answer is 4.');
+
+		// Reasoning in dedicated field
+		expect(message.reasoningContent).toBe('Let me think: 2+2=4, basic arithmetic.');
+	});
+
+	it('convertDbMessageToApiChatMessageData includes reasoning_content', () => {
+		// Simulate the conversion logic
+		const dbMessage = {
+			role: MessageRole.ASSISTANT,
+			content: 'The answer is 4.',
+			reasoningContent: 'Let me think: 2+2=4, basic arithmetic.'
+		};
+
+		const apiMessage: Record<string, unknown> = {
+			role: dbMessage.role,
+			content: dbMessage.content
+		};
+		if (dbMessage.reasoningContent) {
+			apiMessage.reasoning_content = dbMessage.reasoningContent;
+		}
+
+		expect(apiMessage.content).toBe('The answer is 4.');
+		expect(apiMessage.reasoning_content).toBe('Let me think: 2+2=4, basic arithmetic.');
+		// No internal tags leak into either field
+		expect(apiMessage.content).not.toContain('<<<');
+		expect(apiMessage.reasoning_content).not.toContain('<<<');
+	});
+
+	it('API message excludes reasoning when excludeReasoningFromContext is true', () => {
+		const dbMessage = {
+			role: MessageRole.ASSISTANT,
+			content: 'The answer is 4.',
+			reasoningContent: 'internal thinking'
+		};
+
+		const excludeReasoningFromContext = true;
+
+		const apiMessage: Record<string, unknown> = {
+			role: dbMessage.role,
+			content: dbMessage.content
+		};
+		if (!excludeReasoningFromContext && dbMessage.reasoningContent) {
+			apiMessage.reasoning_content = dbMessage.reasoningContent;
+		}
+
+		expect(apiMessage.content).toBe('The answer is 4.');
+		expect(apiMessage.reasoning_content).toBeUndefined();
+	});
+
+	it('handles messages with no reasoning', () => {
+		const dbMessage = {
+			role: MessageRole.ASSISTANT,
+			content: 'No reasoning here.',
+			reasoningContent: undefined
+		};
+
+		const apiMessage: Record<string, unknown> = {
+			role: dbMessage.role,
+			content: dbMessage.content
+		};
+		if (dbMessage.reasoningContent) {
+			apiMessage.reasoning_content = dbMessage.reasoningContent;
+		}
+
+		expect(apiMessage.content).toBe('No reasoning here.');
+		expect(apiMessage.reasoning_content).toBeUndefined();
+	});
+});

tools/ui/tests/unit/redact.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { redactValue } from '$lib/utils/redact';
+
+describe('redactValue', () => {
+	it('returns [redacted] by default', () => {
+		expect(redactValue('secret-token')).toBe('[redacted]');
+	});
+
+	it('shows last N characters when showLastChars is provided', () => {
+		expect(redactValue('session-abc12', 5)).toBe('....abc12');
+	});
+
+	it('handles value shorter than showLastChars', () => {
+		expect(redactValue('ab', 5)).toBe('....ab');
+	});
+
+	it('returns [redacted] when showLastChars is 0', () => {
+		expect(redactValue('secret', 0)).toBe('[redacted]');
+	});
+});

tools/ui/tests/unit/request-helpers.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import {
+	getRequestUrl,
+	getRequestMethod,
+	getRequestBody,
+	summarizeRequestBody,
+	formatDiagnosticErrorMessage,
+	extractJsonRpcMethods
+} from '$lib/utils/request-helpers';
+
+describe('getRequestUrl', () => {
+	it('returns a plain string input as-is', () => {
+		expect(getRequestUrl('https://example.com/mcp')).toBe('https://example.com/mcp');
+	});
+
+	it('returns href from a URL object', () => {
+		expect(getRequestUrl(new URL('https://example.com/mcp'))).toBe('https://example.com/mcp');
+	});
+
+	it('returns url from a Request object', () => {
+		const req = new Request('https://example.com/mcp');
+		expect(getRequestUrl(req)).toBe('https://example.com/mcp');
+	});
+});
+
+describe('getRequestMethod', () => {
+	it('prefers method from init', () => {
+		expect(getRequestMethod('https://example.com', { method: 'POST' })).toBe('POST');
+	});
+
+	it('falls back to Request.method', () => {
+		const req = new Request('https://example.com', { method: 'PUT' });
+		expect(getRequestMethod(req)).toBe('PUT');
+	});
+
+	it('falls back to baseInit.method', () => {
+		expect(getRequestMethod('https://example.com', undefined, { method: 'DELETE' })).toBe('DELETE');
+	});
+
+	it('defaults to GET', () => {
+		expect(getRequestMethod('https://example.com')).toBe('GET');
+	});
+});
+
+describe('getRequestBody', () => {
+	it('returns body from init', () => {
+		expect(getRequestBody('https://example.com', { body: 'payload' })).toBe('payload');
+	});
+
+	it('returns undefined when no body is present', () => {
+		expect(getRequestBody('https://example.com')).toBeUndefined();
+	});
+});
+
+describe('summarizeRequestBody', () => {
+	it('returns empty for null', () => {
+		expect(summarizeRequestBody(null)).toEqual({ kind: 'empty' });
+	});
+
+	it('returns empty for undefined', () => {
+		expect(summarizeRequestBody(undefined)).toEqual({ kind: 'empty' });
+	});
+
+	it('returns string kind with size', () => {
+		expect(summarizeRequestBody('hello')).toEqual({ kind: 'string', size: 5 });
+	});
+
+	it('returns blob kind with size', () => {
+		const blob = new Blob(['abc']);
+		expect(summarizeRequestBody(blob)).toEqual({ kind: 'blob', size: 3 });
+	});
+
+	it('returns formdata kind', () => {
+		expect(summarizeRequestBody(new FormData())).toEqual({ kind: 'formdata' });
+	});
+
+	it('returns arraybuffer kind with size', () => {
+		expect(summarizeRequestBody(new ArrayBuffer(8))).toEqual({ kind: 'arraybuffer', size: 8 });
+	});
+});
+
+describe('formatDiagnosticErrorMessage', () => {
+	it('appends CORS hint for Failed to fetch', () => {
+		expect(formatDiagnosticErrorMessage(new TypeError('Failed to fetch'))).toBe(
+			'Failed to fetch (check CORS?)'
+		);
+	});
+
+	it('passes through other error messages unchanged', () => {
+		expect(formatDiagnosticErrorMessage(new Error('timeout'))).toBe('timeout');
+	});
+
+	it('handles non-Error values', () => {
+		expect(formatDiagnosticErrorMessage('some string')).toBe('some string');
+	});
+});
+
+describe('extractJsonRpcMethods', () => {
+	it('extracts methods from a JSON-RPC array', () => {
+		const body = JSON.stringify([
+			{ jsonrpc: '2.0', id: 1, method: 'initialize' },
+			{ jsonrpc: '2.0', method: 'notifications/initialized' }
+		]);
+		expect(extractJsonRpcMethods(body)).toEqual(['initialize', 'notifications/initialized']);
+	});
+
+	it('extracts method from a single JSON-RPC message', () => {
+		const body = JSON.stringify({ jsonrpc: '2.0', id: 1, method: 'tools/list' });
+		expect(extractJsonRpcMethods(body)).toEqual(['tools/list']);
+	});
+
+	it('returns undefined for non-string body', () => {
+		expect(extractJsonRpcMethods(null)).toBeUndefined();
+		expect(extractJsonRpcMethods(undefined)).toBeUndefined();
+	});
+
+	it('returns undefined for invalid JSON', () => {
+		expect(extractJsonRpcMethods('not json')).toBeUndefined();
+	});
+
+	it('returns undefined when no methods found', () => {
+		expect(extractJsonRpcMethods(JSON.stringify({ foo: 'bar' }))).toBeUndefined();
+	});
+});

tools/ui/tests/unit/sanitize-headers.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+import { sanitizeHeaders } from '$lib/utils/api-headers';
+import { CORS_PROXY_HEADER_PREFIX } from '$lib/constants';
+
+describe('sanitizeHeaders', () => {
+	it('returns empty object for undefined input', () => {
+		expect(sanitizeHeaders()).toEqual({});
+	});
+
+	it('passes through non-sensitive headers', () => {
+		const headers = new Headers({ 'content-type': 'application/json', accept: 'text/html' });
+		expect(sanitizeHeaders(headers)).toEqual({
+			'content-type': 'application/json',
+			accept: 'text/html'
+		});
+	});
+
+	it('redacts known sensitive headers', () => {
+		const headers = new Headers({
+			authorization: 'Bearer secret',
+			'x-api-key': 'key-123',
+			'content-type': 'application/json'
+		});
+		const result = sanitizeHeaders(headers);
+		expect(result.authorization).toBe('[redacted]');
+		expect(result['x-api-key']).toBe('[redacted]');
+		expect(result['content-type']).toBe('application/json');
+	});
+
+	it('partially redacts headers specified in partialRedactHeaders', () => {
+		const headers = new Headers({ 'mcp-session-id': 'session-12345' });
+		const partial = new Map([['mcp-session-id', 5]]);
+		expect(sanitizeHeaders(headers, undefined, partial)['mcp-session-id']).toBe('....12345');
+	});
+
+	it('fully redacts mcp-session-id when no partialRedactHeaders is given', () => {
+		const headers = new Headers({ 'mcp-session-id': 'session-12345' });
+		expect(sanitizeHeaders(headers)['mcp-session-id']).toBe('[redacted]');
+	});
+
+	it('redacts extra headers provided by the caller', () => {
+		const headers = new Headers({
+			'x-vendor-key': 'vendor-secret',
+			'content-type': 'application/json'
+		});
+		const result = sanitizeHeaders(headers, ['x-vendor-key']);
+		expect(result['x-vendor-key']).toBe('[redacted]');
+		expect(result['content-type']).toBe('application/json');
+	});
+
+	it('handles case-insensitive extra header names', () => {
+		const headers = new Headers({ 'X-Custom-Token': 'token-value' });
+		const result = sanitizeHeaders(headers, ['X-CUSTOM-TOKEN']);
+		expect(result['x-custom-token']).toBe('[redacted]');
+	});
+
+	it('redacts proxied sensitive and custom target headers', () => {
+		const proxiedAuthorization = `${CORS_PROXY_HEADER_PREFIX}authorization`;
+		const proxiedSessionId = `${CORS_PROXY_HEADER_PREFIX}mcp-session-id`;
+		const proxiedVendorKey = `${CORS_PROXY_HEADER_PREFIX}x-vendor-key`;
+		const headers = new Headers({
+			[proxiedAuthorization]: 'Bearer secret',
+			[proxiedSessionId]: 'session-12345',
+			[proxiedVendorKey]: 'vendor-secret'
+		});
+		const partial = new Map([['mcp-session-id', 5]]);
+		const result = sanitizeHeaders(headers, ['x-vendor-key'], partial);
+
+		expect(result[proxiedAuthorization]).toBe('[redacted]');
+		expect(result[proxiedSessionId]).toBe('....12345');
+		expect(result[proxiedVendorKey]).toBe('[redacted]');
+	});
+});

tools/ui/tests/unit/search-results-fixture.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { extractSearchResults, extractSearchQuery } from '$lib/utils/search-results';
+
+const SAMPLE = `Title: World Cup 2026 | Match schedule, fixtures, results & stadiums
+URL: https://www.fifa.com/en/tournaments/mens/worldcup/canadamexicousa2026/articles/match-schedule-fixtures-results-teams-stadiums
+Published: 2026-06-22T00:01:00.000Z
+Author: N/A
+Highlights:
+Find out the full match schedule for World Cup 2026 in Canada, Mexico and USA with fixtures and results from each of the 104 games in the ...
+---
+Title: 2026 FIFA World Cup match schedule: Fixtures, results, features - ESPN
+URL: https://www.espn.com/soccer/story/_/id/48939282/2026-fifa-world-cup-fixtures-results-match-schedule-group-stage-knockout-rounds-bracket
+Published: 2026-07-08T07:07:00.000Z
+Author: ESPN
+Highlights:
+Round of 32 · Tuesday, July 7 · Argentina 3-2 Egypt (Atlanta) Switzerland (4) 0-0 (3) Colombia (Vancouver, Canada) · Monday, July 6 · Portugal 0-1 ...
+---
+Title: BBC
+URL: https://www.bbc.co.uk/sport/football/world-cup/schedule
+Published: N/A
+Author: N/A
+Highlights:
+Something
+# World Cup
+...`;
+
+const QUERY_ARGS = '{"query":"FIFA World Cup 2026 schedule"}';
+
+describe('real-world Exa fixture', () => {
+	it('extracts every search result and preserves rich highlights', () => {
+		const results = extractSearchResults(SAMPLE);
+		expect(results.length).toBe(3);
+		expect(results[0].title).toContain('World Cup 2026 | Match schedule');
+		expect(results[0].url).toContain('fifa.com');
+		expect(results[1].title).toContain('2026 FIFA World Cup match schedule');
+		expect(results[1].author).toBe('ESPN');
+		expect(results[1].highlights).toContain('Round of 32');
+		expect(results[2].title).toBe('BBC');
+	});
+
+	it('parses the query out of the tool-args JSON', () => {
+		expect(extractSearchQuery(QUERY_ARGS)).toBe('FIFA World Cup 2026 schedule');
+	});
+});

tools/ui/tests/unit/search-results.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest';
+import {
+	extractSearchResults,
+	extractSearchQuery,
+	faviconForUrl,
+	isWebSearchToolName
+} from '$lib/utils/search-results';
+
+describe('extractSearchResults', () => {
+	it('parses the Exa fixture with multiple results', () => {
+		const fixture = `Title: World Cup 2026 | Match schedule, fixtures
+URL: https://www.fifa.com/articles/match-schedule
+Published: 2026-06-22T00:01:00.000Z
+Author: N/A
+Highlights:
+Find out the full match schedule for World Cup 2026
+---
+Title: 2026 FIFA World Cup match schedule
+URL: https://www.espn.com/soccer/story/abc/def
+Published: 2026-07-08T07:07:00.000Z
+Author: ESPN
+Highlights:
+Round of 32 · Tuesday, July 7
+---
+Title: BBC
+URL: https://www.bbc.co.uk/sport/football/world-cup/schedule
+Published: N/A
+Author: N/A
+Highlights:
+# FIFA World Cup Schedule
+...`;
+		const results = extractSearchResults(fixture);
+		expect(results.length).toBe(3);
+		expect(results[0].title).toContain('World Cup 2026');
+		expect(results[0].url).toBe('https://www.fifa.com/articles/match-schedule');
+		expect(results[0].published).toBe('2026-06-22T00:01:00.000Z');
+		// N/A filtered out
+		expect(results[0].author).toBeUndefined();
+		expect(results[0].highlights).toContain('match schedule');
+		expect(results[1].author).toBe('ESPN');
+		expect(results[2].author).toBeUndefined(); // N/A filtered
+	});
+
+	it('returns empty array for empty input', () => {
+		expect(extractSearchResults('')).toEqual([]);
+		expect(extractSearchResults(undefined)).toEqual([]);
+		expect(extractSearchResults(null)).toEqual([]);
+	});
+
+	it('skips chunks missing title or url', () => {
+		const txt = `Title: no url here
+Highlights:
+foo
+---
+Title: foo
+URL: https://x.com
+---
+just a paragraph
+---
+Title: b
+URL: not a url`;
+		const results = extractSearchResults(txt);
+		// Only middle one should pass (has title + url).
+		expect(results.length).toBe(1);
+		expect(results[0].url).toBe('https://x.com');
+	});
+
+	it('parses a single result without separators', () => {
+		const txt = `Title: only one
+URL: https://example.com/test
+Published: 2026-01-01T00:00:00Z
+Author: alice
+Highlights:
+a highlight`;
+		const results = extractSearchResults(txt);
+		expect(results.length).toBe(1);
+		expect(results[0].title).toBe('only one');
+		expect(results[0].author).toBe('alice');
+		expect(results[0].highlights).toBe('a highlight');
+	});
+
+	it('extracts query from JSON toolArgs', () => {
+		expect(extractSearchQuery('{"query":"foo"}')).toBe('foo');
+		expect(extractSearchQuery('  {"query":"  foo  "}  ')).toBe('foo');
+		expect(extractSearchQuery('not json')).toBe('');
+		expect(extractSearchQuery(null)).toBe('');
+		expect(extractSearchQuery('{"query":123}')).toBe('');
+	});
+
+	it('resolves favicon URLs from origins', () => {
+		expect(faviconForUrl('https://example.com/path/to/page')).toBe(
+			'https://example.com/favicon.ico'
+		);
+		expect(faviconForUrl('http://example.com/x')).toBe('http://example.com/favicon.ico');
+		expect(faviconForUrl('not a url')).toBeNull();
+	});
+});
+
+describe('isWebSearchToolName', () => {
+	it('excludes tools that take the same query argument but are not web searches', () => {
+		expect(isWebSearchToolName('search_pull_requests')).toBe(false);
+		expect(isWebSearchToolName('search_code')).toBe(false);
+		expect(isWebSearchToolName('search_repositories')).toBe(false);
+		expect(isWebSearchToolName('search_issues')).toBe(false);
+	});
+
+	it('handles empty / missing input', () => {
+		expect(isWebSearchToolName(null)).toBe(false);
+		expect(isWebSearchToolName(undefined)).toBe(false);
+		expect(isWebSearchToolName('')).toBe(false);
+	});
+
+	it('returns false for unrelated tools', () => {
+		expect(isWebSearchToolName('web_fetch')).toBe(false);
+		expect(isWebSearchToolName('read_file')).toBe(false);
+		expect(isWebSearchToolName('exec_shell_command')).toBe(false);
+	});
+});

tools/ui/tests/unit/sse.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { parseSseJsonStream } from '$lib/utils/sse';
+
+function makeSseResponse(events: string[]): Response {
+	const body = events.join('\n\n') + '\n\n';
+	return new Response(body, {
+		status: 200,
+		headers: { 'content-type': 'text/event-stream' }
+	});
+}
+
+describe('parseSseJsonStream', () => {
+	it('yields parsed data for each record', async () => {
+		const response = makeSseResponse(['data: {"chunk": "a"}', 'data: {"chunk": "b"}']);
+		const collected: unknown[] = [];
+		for await (const ev of parseSseJsonStream(response)) {
+			collected.push(ev.data);
+		}
+		expect(collected).toEqual([{ chunk: 'a' }, { chunk: 'b' }]);
+	});
+
+	it('stops on [DONE] sentinel', async () => {
+		const response = makeSseResponse([
+			'data: {"chunk": "a"}',
+			'data: [DONE]',
+			'data: {"chunk": "after-done"}'
+		]);
+		const collected: unknown[] = [];
+		for await (const ev of parseSseJsonStream(response)) {
+			collected.push(ev.data);
+		}
+		expect(collected).toEqual([{ chunk: 'a' }]);
+	});
+
+	it('skips malformed JSON records', async () => {
+		const response = makeSseResponse([
+			'data: {"chunk": "ok"}',
+			'data: {not-json}',
+			'data: {"chunk": "also-ok"}'
+		]);
+		const collected: unknown[] = [];
+		for await (const ev of parseSseJsonStream(response)) {
+			collected.push(ev.data);
+		}
+		expect(collected).toEqual([{ chunk: 'ok' }, { chunk: 'also-ok' }]);
+	});
+
+	it('handles records split across multiple chunks (partial last line)', async () => {
+		const full = 'data: {"chunk": "x"}\n\ndata: {"chunk": "y"}\n\n';
+		const stream = new ReadableStream<Uint8Array>({
+			start(controller) {
+				const enc = new TextEncoder();
+				controller.enqueue(enc.encode(full.slice(0, full.length / 2)));
+				controller.enqueue(enc.encode(full.slice(full.length / 2)));
+				controller.close();
+			}
+		});
+		const response = new Response(stream, {
+			status: 200,
+			headers: { 'content-type': 'text/event-stream' }
+		});
+		const collected: unknown[] = [];
+		for await (const ev of parseSseJsonStream(response)) {
+			collected.push(ev.data);
+		}
+		expect(collected).toEqual([{ chunk: 'x' }, { chunk: 'y' }]);
+	});
+
+	it('returns immediately if response has no body', async () => {
+		const response = new Response(null, { status: 200 });
+		const collected: unknown[] = [];
+		for await (const ev of parseSseJsonStream(response)) {
+			collected.push(ev.data);
+		}
+		expect(collected).toEqual([]);
+	});
+});

tools/ui/tests/unit/stream-discovery.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { ChatService } from '$lib/services/chat.service';
+import type { ApiStreamSession } from '$lib/types';
+
+function makeSession(overrides: Partial<ApiStreamSession>): ApiStreamSession {
+	return {
+		conversation_id: 'conv',
+		is_done: true,
+		total_bytes: 0,
+		started_at: 0,
+		completed_at: 0,
+		...overrides
+	};
+}
+
+describe('selectActiveStream', () => {
+	it('returns null on empty input', () => {
+		expect(ChatService.selectActiveStream([])).toBeNull();
+	});
+
+	it('returns null on null or undefined input', () => {
+		expect(ChatService.selectActiveStream(null)).toBeNull();
+		expect(ChatService.selectActiveStream(undefined)).toBeNull();
+	});
+
+	it('returns the single session when it is running', () => {
+		const s = makeSession({ conversation_id: 'only', is_done: false, started_at: 42 });
+		expect(ChatService.selectActiveStream([s])).toBe(s);
+	});
+
+	it('returns null when the single session is finalized', () => {
+		const s = makeSession({ conversation_id: 'only', is_done: true, started_at: 42 });
+		expect(ChatService.selectActiveStream([s])).toBeNull();
+	});
+
+	it('prefers a still running session over a finalized one regardless of started_at', () => {
+		const finalized = makeSession({ conversation_id: 'old', is_done: true, started_at: 1000 });
+		const running = makeSession({ conversation_id: 'new', is_done: false, started_at: 10 });
+		expect(ChatService.selectActiveStream([finalized, running])?.conversation_id).toBe('new');
+		expect(ChatService.selectActiveStream([running, finalized])?.conversation_id).toBe('new');
+	});
+
+	it('among running sessions, picks the most recently started one', () => {
+		const a = makeSession({ conversation_id: 'a', is_done: false, started_at: 100 });
+		const b = makeSession({ conversation_id: 'b', is_done: false, started_at: 200 });
+		const c = makeSession({ conversation_id: 'c', is_done: false, started_at: 150 });
+		expect(ChatService.selectActiveStream([a, b, c])?.conversation_id).toBe('b');
+		expect(ChatService.selectActiveStream([c, a, b])?.conversation_id).toBe('b');
+	});
+
+	it('returns null when all sessions are finalized, the DB already holds the content', () => {
+		const a = makeSession({ conversation_id: 'a', is_done: true, started_at: 10 });
+		const b = makeSession({ conversation_id: 'b', is_done: true, started_at: 30 });
+		const c = makeSession({ conversation_id: 'c', is_done: true, started_at: 20 });
+		expect(ChatService.selectActiveStream([a, b, c])).toBeNull();
+	});
+
+	it('keeps the first match on ties when both are running with identical started_at', () => {
+		// reduce visits left to right, the initial accumulator stays unless a strictly greater value appears
+		const a = makeSession({ conversation_id: 'first', is_done: false, started_at: 50 });
+		const b = makeSession({ conversation_id: 'second', is_done: false, started_at: 50 });
+		expect(ChatService.selectActiveStream([a, b])?.conversation_id).toBe('first');
+	});
+
+	it('handles a typical realistic mix: two finalized old, one freshly running, one freshly finalized', () => {
+		const old1 = makeSession({ conversation_id: 'old1', is_done: true, started_at: 100 });
+		const old2 = makeSession({ conversation_id: 'old2', is_done: true, started_at: 200 });
+		const freshFin = makeSession({ conversation_id: 'freshFin', is_done: true, started_at: 500 });
+		const running = makeSession({ conversation_id: 'running', is_done: false, started_at: 400 });
+		expect(ChatService.selectActiveStream([old1, old2, freshFin, running])?.conversation_id).toBe(
+			'running'
+		);
+	});
+});

tools/ui/tests/unit/stream-resume.test.ts

@@ -0,0 +1,128 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+
+// node env unit project has no DOM, install a minimal localStorage backed by a Map
+beforeAll(() => {
+	const store = new Map<string, string>();
+	const polyfill: Storage = {
+		get length() {
+			return store.size;
+		},
+		clear: () => store.clear(),
+		getItem: (k) => (store.has(k) ? store.get(k)! : null),
+		key: (i) => Array.from(store.keys())[i] ?? null,
+		removeItem: (k) => {
+			store.delete(k);
+		},
+		setItem: (k, v) => {
+			store.set(k, String(v));
+		}
+	};
+	(globalThis as unknown as { localStorage: Storage }).localStorage = polyfill;
+});
+
+import { ChatService } from '$lib/services/chat.service';
+import { STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX } from '$lib/constants';
+
+describe('ChatService stream resume', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	it('returns null when no state exists for the conversation', () => {
+		expect(ChatService.getStreamState('conv-a')).toBeNull();
+	});
+
+	it('saves and reads back the byte count', () => {
+		ChatService.saveStreamState('conv-a', 4242);
+		const got = ChatService.getStreamState('conv-a');
+		expect(got).not.toBeNull();
+		expect(got!.bytesReceived).toBe(4242);
+		expect(typeof got!.updatedAt).toBe('number');
+	});
+
+	it('overwrites the previous byte count on a new save for the same conversation', () => {
+		ChatService.saveStreamState('conv-a', 100);
+		ChatService.saveStreamState('conv-a', 200);
+		const got = ChatService.getStreamState('conv-a');
+		expect(got!.bytesReceived).toBe(200);
+	});
+
+	it('keeps states for distinct conversations isolated', () => {
+		ChatService.saveStreamState('conv-a', 10);
+		ChatService.saveStreamState('conv-b', 20);
+		expect(ChatService.getStreamState('conv-a')!.bytesReceived).toBe(10);
+		expect(ChatService.getStreamState('conv-b')!.bytesReceived).toBe(20);
+	});
+
+	it('clears the state for a given conversation', () => {
+		ChatService.saveStreamState('conv-a', 10);
+		ChatService.clearStreamState('conv-a');
+		expect(ChatService.getStreamState('conv-a')).toBeNull();
+	});
+
+	it('ignores empty conversation id on save', () => {
+		ChatService.saveStreamState('', 1);
+		expect(ChatService.getStreamState('')).toBeNull();
+	});
+
+	it('returns null on corrupted storage payload', () => {
+		localStorage.setItem(`${STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX}conv-a`, '{not-json');
+		expect(ChatService.getStreamState('conv-a')).toBeNull();
+	});
+
+	it('persists the model alongside the byte count', () => {
+		ChatService.saveStreamState('conv-a', 10, 'model-x');
+		expect(ChatService.getStreamState('conv-a')!.model).toBe('model-x');
+	});
+
+	it('stores a null model when none is provided', () => {
+		ChatService.saveStreamState('conv-a', 10);
+		expect(ChatService.getStreamState('conv-a')!.model).toBeNull();
+	});
+
+	it('overwrites the model on a new save for the same conversation', () => {
+		ChatService.saveStreamState('conv-a', 10, 'model-x');
+		ChatService.saveStreamState('conv-a', 20, 'model-y');
+		expect(ChatService.getStreamState('conv-a')!.model).toBe('model-y');
+	});
+
+	describe('resumeStreamIdentity', () => {
+		it('appends the persisted model so the resume key matches the frozen POST identity', () => {
+			ChatService.saveStreamState('conv-a', 10, 'model-x');
+			expect(
+				ChatService.resumeStreamIdentity('conv-a', ChatService.getStreamState('conv-a'), 'dropdown')
+			).toBe('conv-a::model-x');
+		});
+
+		it('keeps the bare conv id when the persisted model is null', () => {
+			ChatService.saveStreamState('conv-a', 10);
+			expect(
+				ChatService.resumeStreamIdentity('conv-a', ChatService.getStreamState('conv-a'), 'dropdown')
+			).toBe('conv-a');
+		});
+
+		it('falls back to the current model only when no state is persisted', () => {
+			expect(ChatService.resumeStreamIdentity('conv-a', null, 'dropdown')).toBe('conv-a::dropdown');
+		});
+
+		it('ignores the fallback when a state exists, the persisted value is authoritative', () => {
+			ChatService.saveStreamState('conv-a', 10, 'model-x');
+			expect(
+				ChatService.resumeStreamIdentity('conv-a', ChatService.getStreamState('conv-a'), 'dropdown')
+			).toBe('conv-a::model-x');
+		});
+
+		it('falls back when a legacy state has no model field', () => {
+			localStorage.setItem(
+				`${STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX}conv-a`,
+				JSON.stringify({ bytesReceived: 10, updatedAt: 1 })
+			);
+			expect(
+				ChatService.resumeStreamIdentity('conv-a', ChatService.getStreamState('conv-a'), 'dropdown')
+			).toBe('conv-a::dropdown');
+		});
+	});
+});

tools/ui/tests/unit/tool-call-meta.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { tryParseToolResultObject } from '$lib/utils';
+
+describe('tryParseToolResultObject', () => {
+	it('returns null when no result is provided', () => {
+		expect(tryParseToolResultObject(undefined)).toBeNull();
+		expect(tryParseToolResultObject('')).toBeNull();
+	});
+
+	it('returns the parsed object when the result is JSON', () => {
+		expect(tryParseToolResultObject('{"result":"ok","bytes":42}')).toEqual({
+			result: 'ok',
+			bytes: 42
+		});
+	});
+
+	it('returns null for JSON arrays (only objects are useful to callers)', () => {
+		expect(tryParseToolResultObject('[1,2,3]')).toBeNull();
+	});
+
+	it('returns null for JSON primitives', () => {
+		expect(tryParseToolResultObject('"raw string"')).toBeNull();
+		expect(tryParseToolResultObject('42')).toBeNull();
+	});
+
+	it('returns null for invalid JSON', () => {
+		expect(tryParseToolResultObject('not json')).toBeNull();
+		expect(tryParseToolResultObject('{bad')).toBeNull();
+	});
+});

tools/ui/tests/unit/tool-calls.test.ts

@@ -0,0 +1,416 @@
+import { describe, expect, it } from 'vitest';
+import { AgenticSectionType, BuiltInTool } from '$lib/enums';
+import type { AgenticSection } from '$lib/utils';
+import { parseToolArgs } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/_shared';
+import {
+	parseWriteFileMeta,
+	type WriteFileMeta
+} from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/write-file';
+import { parseEditFileMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/edit-file';
+import { parseReadFileMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-file';
+import { parseGrepSearchMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/grep-search';
+import { parseFileGlobSearchMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/file-glob-search';
+import { parseRunJavascriptMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/run-javascript';
+import { parseExecShellCommandMeta } from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/exec-shell-command';
+
+function makeSection(
+	overrides: Partial<AgenticSection> = {},
+	toolName = BuiltInTool.READ_FILE
+): AgenticSection {
+	return {
+		type: AgenticSectionType.TOOL_CALL,
+		content: '',
+		toolName,
+		toolArgs: JSON.stringify({ path: '/foo.txt' }),
+		toolResult: undefined,
+		...overrides
+	};
+}
+
+describe('parseToolArgs (shared)', () => {
+	it('returns null when the section has no toolArgs', () => {
+		const result = parseToolArgs(BuiltInTool.READ_FILE, makeSection({ toolArgs: undefined }));
+		expect(result).toBeNull();
+	});
+
+	it('returns null when the tool name does not match', () => {
+		const result = parseToolArgs(
+			BuiltInTool.READ_FILE,
+			makeSection({ toolArgs: '{"path":"/x"}' }, BuiltInTool.WRITE_FILE)
+		);
+		expect(result).toBeNull();
+	});
+
+	it('returns null when args are not valid final JSON (partial: false)', () => {
+		const result = parseToolArgs(
+			BuiltInTool.READ_FILE,
+			makeSection({ toolArgs: '{"path": "/foo.tx' })
+		);
+		expect(result).toBeNull();
+	});
+
+	it('returns parsed args when valid final JSON', () => {
+		const result = parseToolArgs(
+			BuiltInTool.READ_FILE,
+			makeSection({ toolArgs: '{"path":"/foo.txt"}' })
+		);
+		expect(result).toEqual({ path: '/foo.txt' });
+	});
+
+	it('accepts partial JSON when partial: true', () => {
+		const result = parseToolArgs(
+			BuiltInTool.READ_FILE,
+			makeSection({ toolArgs: '{"path": "/foo.tx' }),
+			{ partial: true }
+		);
+		expect(result).toEqual({ path: '/foo.tx' });
+	});
+});
+
+describe('parseWriteFileMeta', () => {
+	it('returns null for sections with a different tool name', () => {
+		expect(
+			parseWriteFileMeta(
+				makeSection({ toolName: BuiltInTool.READ_FILE, toolArgs: '{"path":"/x","content":"y"}' })
+			)
+		).toBeNull();
+	});
+
+	it('returns null when args have no path-like field', () => {
+		expect(
+			parseWriteFileMeta(
+				makeSection({ toolName: BuiltInTool.WRITE_FILE, toolArgs: '{"content":"x"}' })
+			)
+		).toBeNull();
+	});
+
+	it('accepts partial args (renders incrementally as content streams in)', () => {
+		const meta = parseWriteFileMeta(
+			makeSection({ toolName: BuiltInTool.WRITE_FILE, toolArgs: '{"path":"/foo.t' })
+		);
+		expect(meta?.filePath).toBe('/foo.t');
+	});
+
+	it('returns file path, language, content, bytes, resultMessage', () => {
+		const meta = parseWriteFileMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.WRITE_FILE,
+					toolArgs: '{"path":"/foo.ts","content":"x"}',
+					toolResult: '{"result":"wrote","bytes":42}'
+				},
+				BuiltInTool.WRITE_FILE
+			)
+		);
+		expect(meta).toMatchObject<Partial<WriteFileMeta>>({
+			filePath: '/foo.ts',
+			language: expect.any(String),
+			content: 'x',
+			bytesWritten: 42,
+			resultMessage: 'wrote'
+		});
+	});
+
+	it('surfaces errorMessage from the result blob', () => {
+		const meta = parseWriteFileMeta(
+			makeSection({
+				toolName: BuiltInTool.WRITE_FILE,
+				toolArgs: '{"path":"/foo","content":"x"}',
+				toolResult: '{"error":"permission denied"}'
+			})
+		);
+		expect(meta?.errorMessage).toBe('permission denied');
+	});
+});
+
+describe('parseEditFileMeta', () => {
+	it('parses edits array and applies editsApplied from the result', () => {
+		const section = makeSection(
+			{
+				toolName: BuiltInTool.EDIT_FILE,
+				toolArgs:
+					'{"path":"/foo.ts","edits":[{"old_text":"a","new_text":"b"},{"old_text":"c","new_text":"d"}]}',
+				toolResult: '{"result":"ok","edits_applied":2}'
+			},
+			BuiltInTool.EDIT_FILE
+		);
+		const meta = parseEditFileMeta(section);
+		expect(meta?.edits).toEqual([
+			{ oldText: 'a', newText: 'b' },
+			{ oldText: 'c', newText: 'd' }
+		]);
+		expect(meta?.editsApplied).toBe(2);
+		expect(meta?.resultMessage).toBe('ok');
+	});
+
+	it('drops edits with empty old_text', () => {
+		const section = makeSection(
+			{
+				toolName: BuiltInTool.EDIT_FILE,
+				toolArgs: '{"path":"/foo","edits":[{"old_text":""},{"old_text":"a","new_text":""}]}'
+			},
+			BuiltInTool.EDIT_FILE
+		);
+		const meta = parseEditFileMeta(section);
+		// First entry is dropped (empty old_text). Second is kept
+		// (empty new_text is fine - it's the "delete" case).
+		expect(meta?.edits).toEqual([{ oldText: 'a', newText: '' }]);
+	});
+
+	it('errorMessage wins over result message', () => {
+		const section = makeSection(
+			{
+				toolName: BuiltInTool.EDIT_FILE,
+				toolArgs: '{"path":"/foo"}',
+				toolResult: '{"error":"bad path","result":"ok"}'
+			},
+			BuiltInTool.EDIT_FILE
+		);
+		const meta = parseEditFileMeta(section);
+		expect(meta?.errorMessage).toBe('bad path');
+		expect(meta?.resultMessage).toBeUndefined();
+	});
+});
+
+describe('parseReadFileMeta', () => {
+	it('parses file name alone (no range)', () => {
+		const meta = parseReadFileMeta(
+			makeSection({ toolArgs: '{"path":"/foo.txt"}' }, BuiltInTool.READ_FILE)
+		);
+		expect(meta?.fileName).toBe('foo.txt');
+		expect(meta?.lineRange).toBeNull();
+	});
+
+	it('parses start_line + end_line into a range', () => {
+		const meta = parseReadFileMeta(
+			makeSection(
+				{ toolArgs: '{"path":"/foo.ts","start_line":10,"end_line":20}' },
+				BuiltInTool.READ_FILE
+			)
+		);
+		expect(meta?.lineRange).toEqual({ start: 10, end: 20 });
+	});
+
+	it('parses start_line + line_count into a range', () => {
+		const meta = parseReadFileMeta(
+			makeSection(
+				{ toolArgs: '{"path":"/foo.ts","start_line":10,"line_count":5}' },
+				BuiltInTool.READ_FILE
+			)
+		);
+		expect(meta?.lineRange).toEqual({ start: 10, end: 14 });
+	});
+
+	it('returns null when args cannot be parsed', () => {
+		expect(parseReadFileMeta(makeSection({ toolArgs: '{bad' }, BuiltInTool.READ_FILE))).toBeNull();
+	});
+});
+
+describe('parseGrepSearchMeta', () => {
+	it('returns null when path or pattern is missing', () => {
+		expect(
+			parseGrepSearchMeta(
+				makeSection({ toolName: BuiltInTool.GREP_SEARCH, toolArgs: '{"pattern":"foo"}' })
+			)
+		).toBeNull();
+		expect(
+			parseGrepSearchMeta(
+				makeSection({ toolName: BuiltInTool.GREP_SEARCH, toolArgs: '{"path":"/x"}' })
+			)
+		).toBeNull();
+	});
+
+	it('parses structured plain_text_response into matches', () => {
+		const meta = parseGrepSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.GREP_SEARCH,
+					toolArgs: '{"path":"/x","pattern":"foo"}',
+					toolResult: JSON.stringify({ plain_text_response: 'a.ts:hello\nb.ts:world' })
+				},
+				BuiltInTool.GREP_SEARCH
+			)
+		);
+		expect(meta?.matches).toHaveLength(2);
+		expect(meta?.matches[0]).toEqual({ file: 'a.ts', content: 'hello' });
+	});
+
+	it('falls back to raw-text parsing when result is not JSON', () => {
+		const meta = parseGrepSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.GREP_SEARCH,
+					toolArgs: '{"path":"/x","pattern":"foo"}',
+					toolResult: 'a.ts:hello\nb.ts:world'
+				},
+				BuiltInTool.GREP_SEARCH
+			)
+		);
+		expect(meta?.matches).toHaveLength(2);
+	});
+
+	it('parses line numbers when return_line_numbers is true', () => {
+		const meta = parseGrepSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.GREP_SEARCH,
+					toolArgs: '{"path":"/x","pattern":"foo","return_line_numbers":true}',
+					toolResult: 'a.ts:12:hello'
+				},
+				BuiltInTool.GREP_SEARCH
+			)
+		);
+		expect(meta?.matches[0]).toEqual({ file: 'a.ts', line: 12, content: 'hello' });
+		expect(meta?.showLineNumbers).toBe(true);
+	});
+});
+
+describe('parseFileGlobSearchMeta', () => {
+	it('falls back to raw-text parsing when result is not JSON', () => {
+		const meta = parseFileGlobSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.FILE_GLOB_SEARCH,
+					toolArgs: '{"path":"/x"}',
+					toolResult: 'a.ts\nb.ts'
+				},
+				BuiltInTool.FILE_GLOB_SEARCH
+			)
+		);
+		expect(meta?.matches).toEqual(['a.ts', 'b.ts']);
+	});
+
+	it('parses plain_text_response from a JSON object', () => {
+		const meta = parseFileGlobSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.FILE_GLOB_SEARCH,
+					toolArgs: '{"path":"/x"}',
+					toolResult: JSON.stringify({ plain_text_response: 'a.ts\nb.ts' })
+				},
+				BuiltInTool.FILE_GLOB_SEARCH
+			)
+		);
+		expect(meta?.matches).toEqual(['a.ts', 'b.ts']);
+	});
+
+	it('surfaces errorMessage from the result blob', () => {
+		const meta = parseFileGlobSearchMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.FILE_GLOB_SEARCH,
+					toolArgs: '{"path":"/x"}',
+					toolResult: JSON.stringify({ error: 'permission denied' })
+				},
+				BuiltInTool.FILE_GLOB_SEARCH
+			)
+		);
+		expect(meta?.errorMessage).toBe('permission denied');
+	});
+});
+
+describe('parseRunJavascriptMeta', () => {
+	it('returns null when code is missing', () => {
+		expect(
+			parseRunJavascriptMeta(makeSection({ toolName: BuiltInTool.RUN_JAVASCRIPT, toolArgs: '{}' }))
+		).toBeNull();
+	});
+
+	it('reads code and timeout', () => {
+		const meta = parseRunJavascriptMeta(
+			makeSection(
+				{ toolName: BuiltInTool.RUN_JAVASCRIPT, toolArgs: '{"code":"Math.PI","timeout_ms":5000}' },
+				BuiltInTool.RUN_JAVASCRIPT
+			)
+		);
+		expect(meta?.code).toBe('Math.PI');
+		expect(meta?.timeoutMs).toBe(5000);
+	});
+
+	it('reads error field from a JSON-object result', () => {
+		const meta = parseRunJavascriptMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.RUN_JAVASCRIPT,
+					toolArgs: '{"code":"throw new Error()"}',
+					toolResult: JSON.stringify({ error: 'undefined is not a function' })
+				},
+				BuiltInTool.RUN_JAVASCRIPT
+			)
+		);
+		expect(meta?.errorMessage).toBe('undefined is not a function');
+	});
+
+	it('does NOT treat a JSON-array result as an error', () => {
+		// SandboxService returns successful output as a JSON array;
+		// only JSON objects carry `error`. Raw arrays must round-trip
+		// through unchanged.
+		const meta = parseRunJavascriptMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.RUN_JAVASCRIPT,
+					toolArgs: '{"code":"[1,2,3]"}',
+					toolResult: '[1,2,3]'
+				},
+				BuiltInTool.RUN_JAVASCRIPT
+			)
+		);
+		expect(meta?.errorMessage).toBeUndefined();
+	});
+
+	it('scans a non-JSON string result for an `Error:` line', () => {
+		const meta = parseRunJavascriptMeta(
+			makeSection(
+				{
+					toolName: BuiltInTool.RUN_JAVASCRIPT,
+					toolArgs: '{"code":"foo"}',
+					toolResult: 'Error: undefined is not a function\n  at <anonymous>:1:1'
+				},
+				BuiltInTool.RUN_JAVASCRIPT
+			)
+		);
+		expect(meta?.errorMessage).toBe('undefined is not a function');
+	});
+});
+
+describe('parseExecShellCommandMeta', () => {
+	it('reads command from the args', () => {
+		const meta = parseExecShellCommandMeta(
+			makeSection(
+				{ toolName: BuiltInTool.EXEC_SHELL_COMMAND, toolArgs: '{"command":"ls -la"}' },
+				BuiltInTool.EXEC_SHELL_COMMAND
+			)
+		);
+		expect(meta?.command).toBe('ls -la');
+	});
+
+	it('accepts cmd / shell_command aliases', () => {
+		expect(
+			parseExecShellCommandMeta(
+				makeSection(
+					{ toolName: BuiltInTool.EXEC_SHELL_COMMAND, toolArgs: '{"cmd":"ls"}' },
+					BuiltInTool.EXEC_SHELL_COMMAND
+				)
+			)?.command
+		).toBe('ls');
+		expect(
+			parseExecShellCommandMeta(
+				makeSection(
+					{ toolName: BuiltInTool.EXEC_SHELL_COMMAND, toolArgs: '{"shell_command":"ls"}' },
+					BuiltInTool.EXEC_SHELL_COMMAND
+				)
+			)?.command
+		).toBe('ls');
+	});
+
+	it('returns null when no command alias is present', () => {
+		expect(
+			parseExecShellCommandMeta(
+				makeSection(
+					{ toolName: BuiltInTool.EXEC_SHELL_COMMAND, toolArgs: '{"cwd":"/x"}' },
+					BuiltInTool.EXEC_SHELL_COMMAND
+				)
+			)
+		).toBeNull();
+	});
+});

tools/ui/tests/unit/uri-template.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest';
+import {
+	extractTemplateVariables,
+	expandTemplate,
+	isTemplateComplete,
+	normalizeResourceUri
+} from '../../src/lib/utils/uri-template';
+import { URI_TEMPLATE_OPERATORS } from '../../src/lib/constants/uri-template';
+
+describe('extractTemplateVariables', () => {
+	it('extracts simple variables', () => {
+		const vars = extractTemplateVariables('file:///{path}');
+		expect(vars).toEqual([{ name: 'path', operator: '' }]);
+	});
+
+	it('extracts multiple variables', () => {
+		const vars = extractTemplateVariables('db://{schema}/{table}');
+		expect(vars).toEqual([
+			{ name: 'schema', operator: '' },
+			{ name: 'table', operator: '' }
+		]);
+	});
+
+	it('extracts variables with operators', () => {
+		const vars = extractTemplateVariables('http://example.com{+path}');
+		expect(vars).toEqual([{ name: 'path', operator: URI_TEMPLATE_OPERATORS.RESERVED }]);
+	});
+
+	it('extracts comma-separated variable lists', () => {
+		const vars = extractTemplateVariables('{x,y,z}');
+		expect(vars).toEqual([
+			{ name: 'x', operator: '' },
+			{ name: 'y', operator: '' },
+			{ name: 'z', operator: '' }
+		]);
+	});
+
+	it('deduplicates variable names', () => {
+		const vars = extractTemplateVariables('{name}/{name}');
+		expect(vars).toEqual([{ name: 'name', operator: '' }]);
+	});
+
+	it('handles fragment expansion', () => {
+		const vars = extractTemplateVariables('http://example.com/page{#section}');
+		expect(vars).toEqual([{ name: 'section', operator: URI_TEMPLATE_OPERATORS.FRAGMENT }]);
+	});
+
+	it('handles path segment expansion', () => {
+		const vars = extractTemplateVariables('http://example.com{/path}');
+		expect(vars).toEqual([{ name: 'path', operator: URI_TEMPLATE_OPERATORS.PATH_SEGMENT }]);
+	});
+
+	it('returns empty array for template without variables', () => {
+		const vars = extractTemplateVariables('http://example.com/static');
+		expect(vars).toEqual([]);
+	});
+
+	it('strips explode modifier', () => {
+		const vars = extractTemplateVariables('{list*}');
+		expect(vars).toEqual([{ name: 'list', operator: '' }]);
+	});
+
+	it('strips prefix modifier', () => {
+		const vars = extractTemplateVariables('{value:5}');
+		expect(vars).toEqual([{ name: 'value', operator: '' }]);
+	});
+});
+
+describe('expandTemplate', () => {
+	it('expands simple variable', () => {
+		const result = expandTemplate('file:///{path}', { path: 'src/main.rs' });
+		expect(result).toBe('file:///src%2Fmain.rs');
+	});
+
+	it('expands reserved variable (no encoding)', () => {
+		const result = expandTemplate('file:///{+path}', { path: 'src/main.rs' });
+		expect(result).toBe('file:///src/main.rs');
+	});
+
+	it('expands multiple variables', () => {
+		const result = expandTemplate('db://{schema}/{table}', {
+			schema: 'public',
+			table: 'users'
+		});
+		expect(result).toBe('db://public/users');
+	});
+
+	it('leaves empty for missing variables', () => {
+		const result = expandTemplate('{missing}', {});
+		expect(result).toBe('');
+	});
+
+	it('expands fragment', () => {
+		const result = expandTemplate('http://example.com/page{#section}', {
+			section: 'intro'
+		});
+		expect(result).toBe('http://example.com/page#intro');
+	});
+
+	it('expands path segments', () => {
+		const result = expandTemplate('http://example.com{/path}', { path: 'docs' });
+		expect(result).toBe('http://example.com/docs');
+	});
+
+	it('expands query parameters', () => {
+		const result = expandTemplate('http://example.com{?q}', { q: 'search term' });
+		expect(result).toBe('http://example.com?q=search%20term');
+	});
+
+	it('expands multiple query parameters', () => {
+		const result = expandTemplate('http://example.com{?q,sort}', {
+			q: 'search term',
+			sort: 'descending'
+		});
+		expect(result).toBe('http://example.com?q=search%20term&sort=descending');
+	});
+
+	it('keeps static parts unchanged', () => {
+		const result = expandTemplate('http://example.com/static', {});
+		expect(result).toBe('http://example.com/static');
+	});
+});
+
+describe('isTemplateComplete', () => {
+	it('returns true when all variables are filled', () => {
+		expect(isTemplateComplete('file:///{path}', { path: 'test.txt' })).toBe(true);
+	});
+
+	it('returns false when a variable is missing', () => {
+		expect(isTemplateComplete('db://{schema}/{table}', { schema: 'public' })).toBe(false);
+	});
+
+	it('returns false when a variable is empty', () => {
+		expect(isTemplateComplete('file:///{path}', { path: '' })).toBe(false);
+	});
+
+	it('returns false when a variable is whitespace only', () => {
+		expect(isTemplateComplete('file:///{path}', { path: '   ' })).toBe(false);
+	});
+
+	it('returns true for template without variables', () => {
+		expect(isTemplateComplete('http://example.com/static', {})).toBe(true);
+	});
+
+	it('returns true when all multiple variables are filled', () => {
+		expect(isTemplateComplete('db://{schema}/{table}', { schema: 'public', table: 'users' })).toBe(
+			true
+		);
+	});
+});
+
+describe('normalizeResourceUri', () => {
+	it('passes through a normal URI unchanged', () => {
+		expect(normalizeResourceUri('svelte://svelte/$effect.md')).toBe('svelte://svelte/$effect.md');
+	});
+
+	it('normalizes triple-slash URIs from path-style template expansion', () => {
+		expect(normalizeResourceUri('svelte:///svelte/$effect.md')).toBe('svelte://svelte/$effect.md');
+	});
+
+	it('normalizes quadruple-slash URIs', () => {
+		expect(normalizeResourceUri('svelte:////svelte/$effect.md')).toBe('svelte://svelte/$effect.md');
+	});
+
+	it('handles file:// URIs', () => {
+		expect(normalizeResourceUri('file:///home/user/doc.txt')).toBe('file://home/user/doc.txt');
+	});
+
+	it('handles http URIs unchanged', () => {
+		expect(normalizeResourceUri('http://example.com/path')).toBe('http://example.com/path');
+	});
+
+	it('returns non-URI strings unchanged', () => {
+		expect(normalizeResourceUri('not-a-uri')).toBe('not-a-uri');
+	});
+});