Merge pull request 'refactor: code review improvements' (#41) from refactor/code-review-improvements into main

README.md

@@ -1,3 +1,98 @@
 # llm-multiverse-ui
 
-Web frontend for the llm-multiverse orchestration system
+Web frontend for the **llm-multiverse** orchestration system. Built with SvelteKit 5, TypeScript, Tailwind CSS v4, and gRPC-Web (Connect).
+
+## Prerequisites
+
+- Node.js 20+
+- A running llm-multiverse gRPC backend (the UI proxies requests through Vite/your production reverse proxy)
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Generate protobuf TypeScript definitions (only needed after .proto changes)
+npm run generate
+
+# Start the dev server
+npm run dev
+```
+
+The app starts at `http://localhost:5173` by default.
+
+## Scripts
+
+| Command             | Description                                      |
+| ------------------- | ------------------------------------------------ |
+| `npm run dev`       | Start Vite dev server with HMR                   |
+| `npm run build`     | Production build                                 |
+| `npm run preview`   | Preview the production build locally             |
+| `npm run check`     | Run svelte-check for TypeScript/Svelte errors    |
+| `npm run lint`      | Run ESLint                                       |
+| `npm run format`    | Format code with Prettier                        |
+| `npm run generate`  | Regenerate protobuf TypeScript from `.proto` files |
+
+## Using the UI
+
+### Landing Page
+
+The root page (`/`) links to every section of the app.
+
+### Chat (`/chat`)
+
+The main interface for interacting with the orchestrator.
+
+- **Sessions** are listed in the left sidebar. Click **+ New Chat** to start a session, or select an existing one. On mobile, tap the hamburger menu to open the sidebar.
+- Type a message and press **Enter** (or the **Send** button) to send it. While the orchestrator is processing, a progress indicator and thinking section show the current state.
+- **Session Config** (gear icon / "Config" button) opens a right sidebar where you can adjust the override level, disable specific tools, grant permissions, and save/load presets.
+- If a request fails, an error banner appears with a **Retry** button.
+- Navigation links to Lineage, Memory, and Audit are in the header (hidden on small screens).
+
+### Agent Lineage (`/lineage`)
+
+Visualizes the agent spawn tree as an interactive SVG diagram.
+
+- Click a node to view agent details (ID, type, depth, children) in a side panel.
+- A legend at the bottom shows agent type colors.
+- Supports dark mode with theme-aware SVG colors.
+
+### Memory Candidates (`/memory`)
+
+Lists memory candidates captured during orchestration, grouped by session.
+
+- **Source filter** — filter by Tool Output, Model Knowledge, or Web.
+- **Confidence slider** — set a minimum confidence threshold.
+- Each card shows the candidate content, source badge, and a confidence bar.
+
+### Audit Log (`/audit`)
+
+Timeline view of orchestration events for each session.
+
+- Select a session from the dropdown, then optionally filter by event type (State Change, Tool, Error, Message).
+- Events are displayed chronologically with date separators and color-coded badges.
+
+### Theme
+
+Use the theme toggle (sun/moon icon in any header) to cycle between **System**, **Light**, and **Dark** modes. The preference is persisted in localStorage.
+
+## Project Structure
+
+```
+src/
+  lib/
+    components/      Svelte components (Backdrop, PageHeader, MessageInput, ...)
+    composables/     Reactive composables (useOrchestration)
+    data/            Sample/demo data generators
+    proto/           Generated protobuf TypeScript
+    services/        gRPC client (orchestrator)
+    stores/          Svelte 5 reactive stores (sessions, audit, memory, theme, ...)
+    types/           TypeScript types and helpers (lineage, resultSource)
+    utils/           Shared utilities (date formatting, session config)
+  routes/
+    chat/            Chat page
+    lineage/         Agent lineage visualization
+    memory/          Memory candidates browser
+    audit/           Audit log timeline
+```

src/lib/components/AuditTimeline.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { AuditEvent } from '$lib/stores/audit.svelte';
+	import type { AuditEvent, AuditEventType } from '$lib/stores/audit.svelte';
+	import { formatShortDate } from '$lib/utils/date';
 
 	let { events }: { events: AuditEvent[] } = $props();
 
@@ -7,53 +8,33 @@
 		return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
 	}
 
-	function formatDate(date: Date): string {
+	const eventTypeConfig: Record<AuditEventType, { badge: string; dot: string; label: string }> = {
-		return date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+		state_change: {
+			badge: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
+			dot: 'bg-blue-500',
+			label: 'State Change'
+		},
+		tool_invocation: {
+			badge: 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300',
+			dot: 'bg-green-500',
+			label: 'Tool'
+		},
+		error: {
+			badge: 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300',
+			dot: 'bg-red-500',
+			label: 'Error'
+		},
+		message: {
+			badge: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
+			dot: 'bg-gray-400',
+			label: 'Message'
 		}
+	};
 
-	function typeBadgeClasses(eventType: string): string {
+	const defaultEventConfig = { badge: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400', dot: 'bg-gray-400', label: 'Unknown' };
-		switch (eventType) {
-			case 'state_change':
-				return 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300';
-			case 'tool_invocation':
-				return 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300';
-			case 'error':
-				return 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300';
-			case 'message':
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
-			default:
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400';
-		}
-	}
 
-	function typeDotClasses(eventType: string): string {
+	function getEventConfig(eventType: string) {
-		switch (eventType) {
+		return eventTypeConfig[eventType as AuditEventType] ?? defaultEventConfig;
-			case 'state_change':
-				return 'bg-blue-500';
-			case 'tool_invocation':
-				return 'bg-green-500';
-			case 'error':
-				return 'bg-red-500';
-			case 'message':
-				return 'bg-gray-400';
-			default:
-				return 'bg-gray-400';
-		}
-	}
-
-	function typeLabel(eventType: string): string {
-		switch (eventType) {
-			case 'state_change':
-				return 'State Change';
-			case 'tool_invocation':
-				return 'Tool';
-			case 'error':
-				return 'Error';
-			case 'message':
-				return 'Message';
-			default:
-				return eventType;
-		}
 	}
 </script>
 
@@ -70,18 +51,19 @@
 
 		<ol class="space-y-4">
 			{#each events as event, i (event.id)}
-				{@const showDate = i === 0 || formatDate(event.timestamp) !== formatDate(events[i - 1].timestamp)}
+				{@const showDate = i === 0 || formatShortDate(event.timestamp) !== formatShortDate(events[i - 1].timestamp)}
+				{@const config = getEventConfig(event.eventType)}
 
 				{#if showDate}
 					<li class="relative pl-10 pt-2">
-						<span class="text-xs font-medium text-gray-400 dark:text-gray-500">{formatDate(event.timestamp)}</span>
+						<span class="text-xs font-medium text-gray-400 dark:text-gray-500">{formatShortDate(event.timestamp)}</span>
 					</li>
 				{/if}
 
 				<li class="group relative flex items-start pl-10">
 					<!-- Dot on the timeline -->
 					<div
-						class="absolute left-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-900 {typeDotClasses(event.eventType)}"
+						class="absolute left-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-900 {config.dot}"
 					></div>
 
 					<!-- Event card -->
@@ -91,9 +73,9 @@
 						<div class="flex flex-wrap items-center gap-2">
 							<span class="text-xs text-gray-400 dark:text-gray-500">{formatTimestamp(event.timestamp)}</span>
 							<span
-								class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {typeBadgeClasses(event.eventType)}"
+								class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {config.badge}"
 							>
-								{typeLabel(event.eventType)}
+								{config.label}
 							</span>
 							{#if event.state}
 								<span class="rounded-md bg-blue-50 dark:bg-blue-900/30 px-1.5 py-0.5 text-xs font-mono text-blue-600 dark:text-blue-400">

src/lib/components/Backdrop.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	let { onClose }: { onClose: () => void } = $props();
+</script>
+
+<div
+	class="fixed inset-0 z-40 bg-black/50 md:hidden"
+	role="button"
+	tabindex="-1"
+	onclick={onClose}
+	onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
+	aria-label="Close overlay"
+></div>

src/lib/components/ConfigSidebar.svelte

@@ -4,6 +4,8 @@
 	import { SessionConfigSchema } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { create } from '@bufbuild/protobuf';
 	import { presetStore } from '$lib/stores/presets.svelte';
+	import { isNonDefaultConfig } from '$lib/utils/sessionConfig';
+	import Backdrop from '$lib/components/Backdrop.svelte';
 
 	let {
 		config,
@@ -37,11 +39,7 @@
 		{ value: OverrideLevel.ALL, label: 'All', description: 'No enforcement' }
 	];
 
-	const isNonDefault = $derived(
+	const isNonDefault = $derived(isNonDefaultConfig(config));
-		config.overrideLevel !== OverrideLevel.NONE ||
-			config.disabledTools.length > 0 ||
-			config.grantedPermissions.length > 0
-	);
 
 	function setOverrideLevel(level: OverrideLevel) {
 		const updated = create(SessionConfigSchema, {
@@ -120,16 +118,8 @@
 	}
 </script>
 
-<!-- Mobile overlay backdrop -->
 {#if onClose}
-	<div
+	<Backdrop onClose={onClose} />
-		class="fixed inset-0 z-40 bg-black/50 md:hidden"
-		role="button"
-		tabindex="-1"
-		onclick={onClose}
-		onkeydown={(e) => { if (e.key === 'Escape') onClose?.(); }}
-		aria-label="Close config sidebar"
-	></div>
 {/if}
 
 <aside

src/lib/components/FinalResult.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { SubagentResult } from '$lib/proto/llm_multiverse/v1/common_pb';
-	import { ResultStatus, ResultQuality, ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import { ResultStatus, ResultQuality } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import { resultSourceConfig } from '$lib/types/resultSource';
 
 	let { result }: { result: SubagentResult } = $props();
 
@@ -26,14 +27,7 @@
 		}
 	});
 
-	const sourceLabel = $derived.by(() => {
+	const sourceBadge = $derived(resultSourceConfig(result.source));
-		switch (result.source) {
-			case ResultSource.TOOL_OUTPUT: return 'Tool Output';
-			case ResultSource.MODEL_KNOWLEDGE: return 'Model Knowledge';
-			case ResultSource.WEB: return 'Web';
-			default: return '';
-		}
-	});
 </script>
 
 <div class="mx-4 mb-3 rounded-xl border {statusConfig.border} {statusConfig.bg} p-4">
@@ -46,9 +40,9 @@
 				{qualityLabel}
 			</span>
 		{/if}
-		{#if sourceLabel}
+		{#if sourceBadge.label !== 'Unspecified'}
-			<span class="rounded-full bg-purple-100 dark:bg-purple-900/40 px-2.5 py-0.5 text-xs font-medium text-purple-800 dark:text-purple-300">
+			<span class="rounded-full {sourceBadge.bg} px-2.5 py-0.5 text-xs font-medium {sourceBadge.text}">
-				{sourceLabel}
+				{sourceBadge.label}
 			</span>
 		{/if}
 	</div>

src/lib/components/LineageTree.svelte

@@ -40,12 +40,23 @@
 	}
 
 	/**
-	 * Recursively counts the total number of leaf nodes in a subtree.
+	 * Computes leaf counts for every node in a single bottom-up pass.
-	 * A leaf is a node with no children; it counts as 1 vertical slot.
+	 * Stores results in a map keyed by node identity.
 	 */
-	function countLeaves(node: LineageNode): number {
+	function computeLeafCounts(roots: LineageNode[]): Map<LineageNode, number> {
-		if (node.children.length === 0) return 1;
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- internal computation map, not reactive state
-		return node.children.reduce((sum, child) => sum + countLeaves(child), 0);
+		const counts = new Map<LineageNode, number>();
+		function walk(node: LineageNode): number {
+			if (node.children.length === 0) {
+				counts.set(node, 1);
+				return 1;
+			}
+			const total = node.children.reduce((sum, child) => sum + walk(child), 0);
+			counts.set(node, total);
+			return total;
+		}
+		for (const root of roots) walk(root);
+		return counts;
 	}
 
 	/**
@@ -57,7 +68,8 @@
 		totalWidth: number;
 		totalHeight: number;
 	} {
-		const totalLeaves = roots.reduce((sum, r) => sum + countLeaves(r), 0);
+		const leafCounts = computeLeafCounts(roots);
+		const totalLeaves = roots.reduce((sum, r) => sum + (leafCounts.get(r) ?? 1), 0);
 		const totalHeight = totalLeaves * (NODE_HEIGHT + VERTICAL_GAP) - VERTICAL_GAP;
 
 		function positionNode(
@@ -73,7 +85,7 @@
 				return { node, x, y, children: [] };
 			}
 
-			const childLeafCounts = node.children.map(countLeaves);
+			const childLeafCounts = node.children.map((c) => leafCounts.get(c) ?? 1);
 			const totalChildLeaves = childLeafCounts.reduce((a, b) => a + b, 0);
 
 			let currentY = startY;
@@ -98,7 +110,7 @@
 		let currentY = 0;
 		const positioned: PositionedNode[] = [];
 		for (const root of roots) {
-			const rootLeaves = countLeaves(root);
+			const rootLeaves = leafCounts.get(root) ?? 1;
 			const rootHeight = (rootLeaves / totalLeaves) * totalHeight;
 			positioned.push(positionNode(root, 0, currentY, rootHeight));
 			currentY += rootHeight;
@@ -222,6 +234,7 @@
 				<!-- Nodes -->
 				{#each allNodes as pn (pn.node.id)}
 					{@const colors = agentTypeColor(pn.node.agentType)}
+					{@const colorSet = themeStore.isDark ? colors.dark : colors.light}
 					{@const isSelected = selectedNodeId === pn.node.id}
 
 					<g
@@ -241,8 +254,8 @@
 							height={NODE_HEIGHT}
 							rx="8"
 							ry="8"
-							fill={colors.fill}
+							fill={colorSet.fill}
-							stroke={isSelected ? colors.stroke : defaultStroke}
+							stroke={isSelected ? colorSet.stroke : defaultStroke}
 							stroke-width={isSelected ? 2.5 : 1.5}
 						/>
 
@@ -251,7 +264,7 @@
 							x={NODE_WIDTH / 2}
 							y="22"
 							text-anchor="middle"
-							fill={colors.text}
+							fill={colorSet.text}
 							font-size="12"
 							font-weight="600"
 						>

src/lib/components/MemoryCandidateCard.svelte

@@ -1,21 +1,10 @@
 <script lang="ts">
-	import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
 	import type { StoredMemoryCandidate } from '$lib/stores/memory.svelte';
+	import { resultSourceConfig } from '$lib/types/resultSource';
 
 	let { candidate }: { candidate: StoredMemoryCandidate } = $props();
 
-	const sourceBadge = $derived.by(() => {
+	const sourceBadge = $derived(resultSourceConfig(candidate.source));
-		switch (candidate.source) {
-			case ResultSource.TOOL_OUTPUT:
-				return { label: 'Tool Output', bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-800 dark:text-blue-300' };
-			case ResultSource.MODEL_KNOWLEDGE:
-				return { label: 'Model Knowledge', bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-800 dark:text-purple-300' };
-			case ResultSource.WEB:
-				return { label: 'Web', bg: 'bg-green-100 dark:bg-green-900/40', text: 'text-green-800 dark:text-green-300' };
-			default:
-				return { label: 'Unspecified', bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-800 dark:text-gray-300' };
-		}
-	});
 
 	const confidencePct = $derived(Math.round(candidate.confidence * 100));
 

src/lib/components/MessageInput.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-3 md:p-4">
-	<form onsubmit={handleSubmit} class="flex items-end gap-2">
+	<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="flex items-end gap-2">
 		<textarea
 			bind:this={textarea}
 			bind:value={input}
@@ -51,8 +51,7 @@
 				placeholder:text-gray-400 dark:placeholder:text-gray-500"
 		></textarea>
 		<button
-			type="button"
+			type="submit"
-			onclick={handleSubmit}
 			disabled={disabled || !input.trim()}
 			class="min-h-[44px] min-w-[44px] rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white
 				hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none

src/lib/components/PageHeader.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+
+	let {
+		title,
+		backHref,
+		backLabel = 'Chat',
+		showSampleBadge = false,
+		children
+	}: {
+		title: string;
+		backHref?: string;
+		backLabel?: string;
+		showSampleBadge?: boolean;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
+	<div class="flex items-center gap-2 md:gap-4">
+		{#if backHref}
+			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+			<a
+				href={backHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
+			>
+				&larr; {backLabel}
+			</a>
+			<!-- eslint-enable svelte/no-navigation-without-resolve -->
+		{/if}
+		<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h1>
+	</div>
+	<div class="flex items-center gap-2">
+		{#if children}
+			{@render children()}
+		{/if}
+		<ThemeToggle />
+		{#if showSampleBadge}
+			<span class="hidden sm:inline rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
+				Sample Data
+			</span>
+		{/if}
+	</div>
+</header>

src/lib/components/SessionSidebar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { sessionStore } from '$lib/stores/sessions.svelte';
+	import { formatRelativeDate } from '$lib/utils/date';
+	import Backdrop from '$lib/components/Backdrop.svelte';
 
 	let {
 		onSelectSession,
@@ -41,27 +43,11 @@
 		onClose?.();
 	}
 
-	function formatDate(date: Date): string {
+
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-		if (days === 0) return 'Today';
-		if (days === 1) return 'Yesterday';
-		if (days < 7) return `${days} days ago`;
-		return date.toLocaleDateString();
-	}
 </script>
 
-<!-- Mobile overlay backdrop -->
 {#if open}
-	<div
+	<Backdrop onClose={() => onClose?.()} />
-		class="fixed inset-0 z-40 bg-black/50 md:hidden"
-		role="button"
-		tabindex="-1"
-		onclick={onClose}
-		onkeydown={(e) => { if (e.key === 'Escape') onClose?.(); }}
-		aria-label="Close sidebar"
-	></div>
 {/if}
 
 <!-- Sidebar: always visible on md+, slide-in drawer on mobile when open -->
@@ -105,7 +91,7 @@
 				>
 					<div class="min-w-0 flex-1">
 						<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{session.title}</p>
-						<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{formatDate(session.createdAt)}</p>
+						<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{formatRelativeDate(session.createdAt)}</p>
 					</div>
 					<button
 						type="button"

src/lib/composables/useOrchestration.svelte.ts

@@ -0,0 +1,151 @@
+import type { ChatMessage } from '$lib/types';
+import type { SubagentResult } from '$lib/proto/llm_multiverse/v1/common_pb';
+import type { SessionConfig } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+import { processRequest, OrchestratorError, friendlyMessage } from '$lib/services/orchestrator';
+import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+import { sessionStore } from '$lib/stores/sessions.svelte';
+import { memoryStore } from '$lib/stores/memory.svelte';
+import { auditStore } from '$lib/stores/audit.svelte';
+import { toastStore } from '$lib/stores/toast.svelte';
+
+export function createOrchestration() {
+	let isStreaming = $state(false);
+	let error: string | null = $state(null);
+	let lastFailedContent: string | null = $state(null);
+	let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED);
+	let intermediateResult: string = $state('');
+	let finalResult: SubagentResult | null = $state(null);
+
+	async function send(
+		sessionId: string,
+		content: string,
+		config: SessionConfig,
+		messages: ChatMessage[]
+	): Promise<ChatMessage[]> {
+		error = null;
+		lastFailedContent = null;
+		orchestrationState = OrchestrationState.UNSPECIFIED;
+		intermediateResult = '';
+		finalResult = null;
+
+		let lastAuditState = OrchestrationState.UNSPECIFIED;
+
+		const userMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			role: 'user',
+			content,
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain data, not reactive state
+			timestamp: new Date()
+		};
+		messages.push(userMessage);
+
+		const assistantMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			role: 'assistant',
+			content: '',
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain data, not reactive state
+			timestamp: new Date()
+		};
+		messages.push(assistantMessage);
+
+		sessionStore.updateMessages(sessionId, messages);
+		isStreaming = true;
+
+		try {
+			for await (const response of processRequest(sessionId, content, config)) {
+				orchestrationState = response.state;
+
+				if (response.state !== lastAuditState) {
+					const stateLabel = OrchestrationState[response.state] ?? String(response.state);
+					auditStore.addEvent(sessionId, {
+						eventType: 'state_change',
+						details: response.message || `State changed to ${stateLabel}`,
+						state: stateLabel
+					});
+					lastAuditState = response.state;
+				}
+
+				if (response.intermediateResult) {
+					intermediateResult = response.intermediateResult;
+				}
+				if (response.finalResult) {
+					finalResult = response.finalResult;
+					if (response.finalResult.newMemoryCandidates.length > 0) {
+						memoryStore.addCandidates(
+							sessionId,
+							response.finalResult.newMemoryCandidates.map((mc) => ({
+								content: mc.content,
+								source: mc.source,
+								confidence: mc.confidence
+							}))
+						);
+					}
+				}
+				const idx = messages.length - 1;
+				messages[idx] = {
+					...messages[idx],
+					content: response.message
+				};
+			}
+		} catch (err) {
+			const friendlyMsg =
+				err instanceof OrchestratorError
+					? friendlyMessage(err.code)
+					: 'An unexpected error occurred';
+			error = friendlyMsg;
+			lastFailedContent = content;
+			toastStore.addToast({ message: friendlyMsg, type: 'error' });
+			auditStore.addEvent(sessionId, {
+				eventType: 'error',
+				details: friendlyMsg
+			});
+			const idx = messages.length - 1;
+			messages[idx] = {
+				...messages[idx],
+				content: `\u26A0 ${friendlyMsg}`
+			};
+		} finally {
+			isStreaming = false;
+			sessionStore.updateMessages(sessionId, messages);
+		}
+
+		return messages;
+	}
+
+	function retry(
+		sessionId: string,
+		config: SessionConfig,
+		messages: ChatMessage[]
+	): { messages: ChatMessage[]; sending: boolean } {
+		if (!lastFailedContent) return { messages, sending: false };
+		const content = lastFailedContent;
+		// Remove the failed user+assistant pair before retrying
+		if (
+			messages.length >= 2 &&
+			messages[messages.length - 2].role === 'user' &&
+			messages[messages.length - 1].role === 'assistant' &&
+			messages[messages.length - 1].content.startsWith('\u26A0')
+		) {
+			messages = messages.slice(0, -2);
+		}
+		send(sessionId, content, config, messages);
+		return { messages, sending: true };
+	}
+
+	function reset() {
+		error = null;
+		finalResult = null;
+	}
+
+	return {
+		get isStreaming() { return isStreaming; },
+		get error() { return error; },
+		get lastFailedContent() { return lastFailedContent; },
+		get orchestrationState() { return orchestrationState; },
+		get intermediateResult() { return intermediateResult; },
+		get finalResult() { return finalResult; },
+		send,
+		retry,
+		reset
+	};
+}

src/lib/data/sampleData.ts

@@ -0,0 +1,210 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+import type { AuditEvent } from '$lib/stores/audit.svelte';
+import type { StoredMemoryCandidate } from '$lib/stores/memory.svelte';
+
+export function getSampleAuditData(): SvelteMap<string, AuditEvent[]> {
+	const samples = new SvelteMap<string, AuditEvent[]>();
+	const now = Date.now();
+
+	samples.set('session-demo-alpha', [
+		{
+			id: 'evt-001',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 300_000),
+			eventType: 'state_change',
+			details: 'Orchestration started — decomposing user request',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-002',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 280_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked web_search tool for "SvelteKit best practices"',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-003',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 260_000),
+			eventType: 'state_change',
+			details: 'Dispatching subtasks to subagents',
+			state: 'DISPATCHING'
+		},
+		{
+			id: 'evt-004',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 240_000),
+			eventType: 'message',
+			details: 'Researcher agent assigned to subtask "Gather TypeScript patterns"'
+		},
+		{
+			id: 'evt-005',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 220_000),
+			eventType: 'state_change',
+			details: 'Subagents executing tasks',
+			state: 'EXECUTING'
+		},
+		{
+			id: 'evt-006',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 200_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked code_analysis tool on project source files'
+		},
+		{
+			id: 'evt-007',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 180_000),
+			eventType: 'error',
+			details: 'Timeout waiting for code_analysis response (retrying)'
+		},
+		{
+			id: 'evt-008',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 160_000),
+			eventType: 'tool_invocation',
+			details: 'Retry: code_analysis tool succeeded'
+		},
+		{
+			id: 'evt-009',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 140_000),
+			eventType: 'state_change',
+			details: 'Compacting results from subagents',
+			state: 'COMPACTING'
+		},
+		{
+			id: 'evt-010',
+			sessionId: 'session-demo-alpha',
+			timestamp: new Date(now - 120_000),
+			eventType: 'state_change',
+			details: 'Orchestration complete',
+			state: 'COMPLETE'
+		}
+	]);
+
+	samples.set('session-demo-beta', [
+		{
+			id: 'evt-011',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 600_000),
+			eventType: 'state_change',
+			details: 'Orchestration started — decomposing deployment request',
+			state: 'DECOMPOSING'
+		},
+		{
+			id: 'evt-012',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 580_000),
+			eventType: 'state_change',
+			details: 'Dispatching to sysadmin agent',
+			state: 'DISPATCHING'
+		},
+		{
+			id: 'evt-013',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 560_000),
+			eventType: 'state_change',
+			details: 'Executing deployment analysis',
+			state: 'EXECUTING'
+		},
+		{
+			id: 'evt-014',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 540_000),
+			eventType: 'tool_invocation',
+			details: 'Invoked kubectl_check tool for cluster status'
+		},
+		{
+			id: 'evt-015',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 520_000),
+			eventType: 'error',
+			details: 'Permission denied: kubectl access not granted for this session'
+		},
+		{
+			id: 'evt-016',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 500_000),
+			eventType: 'message',
+			details: 'Agent requested elevated permissions for cluster access'
+		},
+		{
+			id: 'evt-017',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 480_000),
+			eventType: 'state_change',
+			details: 'Compacting partial results',
+			state: 'COMPACTING'
+		},
+		{
+			id: 'evt-018',
+			sessionId: 'session-demo-beta',
+			timestamp: new Date(now - 460_000),
+			eventType: 'state_change',
+			details: 'Orchestration complete with warnings',
+			state: 'COMPLETE'
+		}
+	]);
+
+	return samples;
+}
+
+export function getSampleMemoryData(): SvelteMap<string, StoredMemoryCandidate[]> {
+	const samples = new SvelteMap<string, StoredMemoryCandidate[]>();
+	samples.set('session-demo-alpha', [
+		{
+			content: 'The user prefers TypeScript strict mode with no implicit any.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.92
+		},
+		{
+			content: 'Project uses SvelteKit with Tailwind CSS v4 and Svelte 5 runes.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.98
+		},
+		{
+			content: 'Preferred testing framework is Vitest with Playwright for e2e.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.75
+		},
+		{
+			content: 'The gRPC backend runs on port 50051 behind a Caddy reverse proxy.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.85
+		}
+	]);
+	samples.set('session-demo-beta', [
+		{
+			content: 'User asked about deploying to Kubernetes with Helm charts.',
+			source: ResultSource.WEB,
+			confidence: 0.67
+		},
+		{
+			content: 'The container registry is at registry.example.com.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.91
+		},
+		{
+			content: 'Deployment target is a 3-node k3s cluster running on ARM64.',
+			source: ResultSource.WEB,
+			confidence: 0.58
+		}
+	]);
+	samples.set('session-demo-gamma', [
+		{
+			content: 'Database schema uses PostgreSQL with pgvector extension for embeddings.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.95
+		},
+		{
+			content: 'The embedding model is all-MiniLM-L6-v2 with 384 dimensions.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.82
+		}
+	]);
+	return samples;
+}

src/lib/services/orchestrator.ts

@@ -79,15 +79,18 @@ function getTransport(endpoint?: string) {
 /**
  * Reset the transport (useful for reconfiguring the endpoint).
  */
-export function resetTransport(): void {
+export function resetTransport(newEndpoint?: string): void {
 	transport = null;
+	if (newEndpoint !== undefined) {
+		transport = createGrpcWebTransport({ baseUrl: newEndpoint });
+	}
 }
 
 /**
  * Create a configured orchestrator client.
  */
-function getClient(endpoint?: string) {
+function getClient() {
-	return createClient(OrchestratorService, getTransport(endpoint));
+	return createClient(OrchestratorService, getTransport());
 }
 
 /**
@@ -147,8 +150,7 @@ function toOrchestratorError(err: unknown): OrchestratorError {
 export async function* processRequest(
 	sessionId: string,
 	userMessage: string,
-	sessionConfig?: SessionConfig,
+	sessionConfig?: SessionConfig
-	endpoint?: string
 ): AsyncGenerator<ProcessRequestResponse> {
 	const request = create(ProcessRequestRequestSchema, {
 		sessionId,
@@ -166,7 +168,7 @@ export async function* processRequest(
 		}
 
 		try {
-			const client = getClient(endpoint);
+			const client = getClient();
 			for await (const response of client.processRequest(request)) {
 				connectionStore.reportSuccess();
 				yield response;

src/lib/stores/audit.svelte.ts

@@ -1,4 +1,5 @@
 import { SvelteMap } from 'svelte/reactivity';
+import { getSampleAuditData } from '$lib/data/sampleData';
 
 export type AuditEventType = 'state_change' | 'tool_invocation' | 'error' | 'message';
 
@@ -40,162 +41,12 @@ function saveEvents(events: SvelteMap<string, AuditEvent[]>) {
 	localStorage.setItem(STORAGE_KEY, JSON.stringify([...events.entries()]));
 }
 
-function getSampleData(): SvelteMap<string, AuditEvent[]> {
-	const samples = new SvelteMap<string, AuditEvent[]>();
-	const now = Date.now();
-
-	samples.set('session-demo-alpha', [
-		{
-			id: 'evt-001',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 300_000),
-			eventType: 'state_change',
-			details: 'Orchestration started — decomposing user request',
-			state: 'DECOMPOSING'
-		},
-		{
-			id: 'evt-002',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 280_000),
-			eventType: 'tool_invocation',
-			details: 'Invoked web_search tool for "SvelteKit best practices"',
-			state: 'DECOMPOSING'
-		},
-		{
-			id: 'evt-003',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 260_000),
-			eventType: 'state_change',
-			details: 'Dispatching subtasks to subagents',
-			state: 'DISPATCHING'
-		},
-		{
-			id: 'evt-004',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 240_000),
-			eventType: 'message',
-			details: 'Researcher agent assigned to subtask "Gather TypeScript patterns"'
-		},
-		{
-			id: 'evt-005',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 220_000),
-			eventType: 'state_change',
-			details: 'Subagents executing tasks',
-			state: 'EXECUTING'
-		},
-		{
-			id: 'evt-006',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 200_000),
-			eventType: 'tool_invocation',
-			details: 'Invoked code_analysis tool on project source files'
-		},
-		{
-			id: 'evt-007',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 180_000),
-			eventType: 'error',
-			details: 'Timeout waiting for code_analysis response (retrying)'
-		},
-		{
-			id: 'evt-008',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 160_000),
-			eventType: 'tool_invocation',
-			details: 'Retry: code_analysis tool succeeded'
-		},
-		{
-			id: 'evt-009',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 140_000),
-			eventType: 'state_change',
-			details: 'Compacting results from subagents',
-			state: 'COMPACTING'
-		},
-		{
-			id: 'evt-010',
-			sessionId: 'session-demo-alpha',
-			timestamp: new Date(now - 120_000),
-			eventType: 'state_change',
-			details: 'Orchestration complete',
-			state: 'COMPLETE'
-		}
-	]);
-
-	samples.set('session-demo-beta', [
-		{
-			id: 'evt-011',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 600_000),
-			eventType: 'state_change',
-			details: 'Orchestration started — decomposing deployment request',
-			state: 'DECOMPOSING'
-		},
-		{
-			id: 'evt-012',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 580_000),
-			eventType: 'state_change',
-			details: 'Dispatching to sysadmin agent',
-			state: 'DISPATCHING'
-		},
-		{
-			id: 'evt-013',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 560_000),
-			eventType: 'state_change',
-			details: 'Executing deployment analysis',
-			state: 'EXECUTING'
-		},
-		{
-			id: 'evt-014',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 540_000),
-			eventType: 'tool_invocation',
-			details: 'Invoked kubectl_check tool for cluster status'
-		},
-		{
-			id: 'evt-015',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 520_000),
-			eventType: 'error',
-			details: 'Permission denied: kubectl access not granted for this session'
-		},
-		{
-			id: 'evt-016',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 500_000),
-			eventType: 'message',
-			details: 'Agent requested elevated permissions for cluster access'
-		},
-		{
-			id: 'evt-017',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 480_000),
-			eventType: 'state_change',
-			details: 'Compacting partial results',
-			state: 'COMPACTING'
-		},
-		{
-			id: 'evt-018',
-			sessionId: 'session-demo-beta',
-			timestamp: new Date(now - 460_000),
-			eventType: 'state_change',
-			details: 'Orchestration complete with warnings',
-			state: 'COMPLETE'
-		}
-	]);
-
-	return samples;
-}
-
 function createAuditStore() {
 	const events = $state<SvelteMap<string, AuditEvent[]>>(loadEvents());
 
 	// Seed sample data if store is empty
 	if (events.size === 0) {
-		const samples = getSampleData();
+		const samples = getSampleAuditData();
 		for (const [id, evts] of samples) {
 			events.set(id, evts);
 		}

src/lib/stores/memory.svelte.ts

@@ -1,5 +1,6 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+import { getSampleMemoryData } from '$lib/data/sampleData';
 
 export interface StoredMemoryCandidate {
 	content: string;
@@ -31,68 +32,12 @@ function saveMemory(memory: SvelteMap<string, StoredMemoryCandidate[]>) {
 	localStorage.setItem(STORAGE_KEY, JSON.stringify([...memory.entries()]));
 }
 
-function getSampleData(): SvelteMap<string, StoredMemoryCandidate[]> {
-	const samples = new SvelteMap<string, StoredMemoryCandidate[]>();
-	samples.set('session-demo-alpha', [
-		{
-			content: 'The user prefers TypeScript strict mode with no implicit any.',
-			source: ResultSource.MODEL_KNOWLEDGE,
-			confidence: 0.92
-		},
-		{
-			content: 'Project uses SvelteKit with Tailwind CSS v4 and Svelte 5 runes.',
-			source: ResultSource.TOOL_OUTPUT,
-			confidence: 0.98
-		},
-		{
-			content: 'Preferred testing framework is Vitest with Playwright for e2e.',
-			source: ResultSource.MODEL_KNOWLEDGE,
-			confidence: 0.75
-		},
-		{
-			content: 'The gRPC backend runs on port 50051 behind a Caddy reverse proxy.',
-			source: ResultSource.TOOL_OUTPUT,
-			confidence: 0.85
-		}
-	]);
-	samples.set('session-demo-beta', [
-		{
-			content: 'User asked about deploying to Kubernetes with Helm charts.',
-			source: ResultSource.WEB,
-			confidence: 0.67
-		},
-		{
-			content: 'The container registry is at registry.example.com.',
-			source: ResultSource.TOOL_OUTPUT,
-			confidence: 0.91
-		},
-		{
-			content: 'Deployment target is a 3-node k3s cluster running on ARM64.',
-			source: ResultSource.WEB,
-			confidence: 0.58
-		}
-	]);
-	samples.set('session-demo-gamma', [
-		{
-			content: 'Database schema uses PostgreSQL with pgvector extension for embeddings.',
-			source: ResultSource.TOOL_OUTPUT,
-			confidence: 0.95
-		},
-		{
-			content: 'The embedding model is all-MiniLM-L6-v2 with 384 dimensions.',
-			source: ResultSource.MODEL_KNOWLEDGE,
-			confidence: 0.82
-		}
-	]);
-	return samples;
-}
-
 function createMemoryStore() {
 	const memory = $state<SvelteMap<string, StoredMemoryCandidate[]>>(loadMemory());
 
 	// Seed sample data if store is empty
 	if (memory.size === 0) {
-		const samples = getSampleData();
+		const samples = getSampleMemoryData();
 		for (const [id, candidates] of samples) {
 			memory.set(id, candidates);
 		}

src/lib/stores/sessions.svelte.ts

@@ -1,3 +1,4 @@
+import { SvelteMap } from 'svelte/reactivity';
 import type { ChatMessage } from '$lib/types';
 
 export interface Session {
@@ -10,24 +11,24 @@ export interface Session {
 const STORAGE_KEY = 'llm-multiverse-sessions';
 const ACTIVE_SESSION_KEY = 'llm-multiverse-active-session';
 
-function loadSessions(): Map<string, Session> {
+function loadSessions(): SvelteMap<string, Session> {
-	if (typeof localStorage === 'undefined') return new Map();
+	if (typeof localStorage === 'undefined') return new SvelteMap();
 	try {
 		const raw = localStorage.getItem(STORAGE_KEY);
-		if (!raw) return new Map();
+		if (!raw) return new SvelteMap();
 		const arr: [string, Session][] = JSON.parse(raw);
-		return new Map(
+		return new SvelteMap(
 			arr.map(([id, s]) => [
 				id,
 				{ ...s, createdAt: new Date(s.createdAt), messages: s.messages.map(m => ({ ...m, timestamp: new Date(m.timestamp) })) }
 			])
 		);
 	} catch {
-		return new Map();
+		return new SvelteMap();
 	}
 }
 
-function saveSessions(sessions: Map<string, Session>) {
+function saveSessions(sessions: SvelteMap<string, Session>) {
 	if (typeof localStorage === 'undefined') return;
 	localStorage.setItem(STORAGE_KEY, JSON.stringify([...sessions.entries()]));
 }
@@ -43,7 +44,7 @@ function saveActiveSessionId(id: string) {
 }
 
 function createSessionStore() {
-	const sessions = $state<Map<string, Session>>(loadSessions());
+	const sessions = $state<SvelteMap<string, Session>>(loadSessions());
 	let activeSessionId = $state<string | null>(loadActiveSessionId());
 
 	function createSession(id?: string): Session {

src/lib/stores/theme.svelte.ts

@@ -5,6 +5,9 @@ const STORAGE_KEY = 'llm-multiverse-theme';
 function createThemeStore() {
 	let mode: ThemeMode = $state('system');
 	let resolvedDark = $state(false);
+	let initialized = false;
+	let mediaQuery: MediaQueryList | null = null;
+	let mediaListener: ((e: MediaQueryListEvent) => void) | null = null;
 
 	function applyTheme(isDark: boolean) {
 		if (typeof document === 'undefined') return;
@@ -27,8 +30,10 @@ function createThemeStore() {
 		return window.matchMedia('(prefers-color-scheme: dark)').matches;
 	}
 
-	function init() {
+	function init(): (() => void) | undefined {
 		if (typeof window === 'undefined') return;
+		if (initialized) return;
+		initialized = true;
 
 		// Load saved preference
 		const saved = localStorage.getItem(STORAGE_KEY) as ThemeMode | null;
@@ -39,18 +44,26 @@ function createThemeStore() {
 		}
 
 		// Listen for system preference changes
-		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-		mediaQuery.addEventListener('change', (e) => {
+		mediaListener = (e: MediaQueryListEvent) => {
 			if (mode === 'system') {
 				resolvedDark = e.matches;
 				applyTheme(resolvedDark);
 			}
-		});
+		};
+		mediaQuery.addEventListener('change', mediaListener);
 
 		// Apply initial theme
 		resolvedDark =
 			mode === 'dark' ? true : mode === 'light' ? false : getSystemPreference();
 		applyTheme(resolvedDark);
+
+		return () => {
+			if (mediaQuery && mediaListener) {
+				mediaQuery.removeEventListener('change', mediaListener);
+			}
+			initialized = false;
+		};
 	}
 
 	function setMode(newMode: ThemeMode) {

src/lib/types/lineage.ts

@@ -42,57 +42,59 @@ export function agentTypeLabel(type: AgentType): string {
 	}
 }
 
-/**
+export interface AgentColorSet {
- * Maps AgentType enum values to Tailwind-friendly color tokens.
- */
-export function agentTypeColor(type: AgentType): {
 	fill: string;
 	stroke: string;
 	text: string;
+}
+
+export interface AgentColors {
+	light: AgentColorSet;
+	dark: AgentColorSet;
 	badge: string;
-} {
+}
+
+/**
+ * Maps AgentType enum values to light/dark color tokens for SVG rendering
+ * and Tailwind badge classes.
+ */
+export function agentTypeColor(type: AgentType): AgentColors {
 	switch (type) {
 		case AgentType.ORCHESTRATOR:
 			return {
-				fill: '#dbeafe',
+				light: { fill: '#dbeafe', stroke: '#3b82f6', text: '#1e40af' },
-				stroke: '#3b82f6',
+				dark: { fill: '#1e3a5f', stroke: '#60a5fa', text: '#93c5fd' },
-				text: '#1e40af',
+				badge: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300'
-				badge: 'bg-blue-100 text-blue-700'
 			};
 		case AgentType.RESEARCHER:
 			return {
-				fill: '#dcfce7',
+				light: { fill: '#dcfce7', stroke: '#22c55e', text: '#166534' },
-				stroke: '#22c55e',
+				dark: { fill: '#14532d', stroke: '#4ade80', text: '#86efac' },
-				text: '#166534',
+				badge: 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300'
-				badge: 'bg-green-100 text-green-700'
 			};
 		case AgentType.CODER:
 			return {
-				fill: '#f3e8ff',
+				light: { fill: '#f3e8ff', stroke: '#a855f7', text: '#6b21a8' },
-				stroke: '#a855f7',
+				dark: { fill: '#3b0764', stroke: '#c084fc', text: '#d8b4fe' },
-				text: '#6b21a8',
+				badge: 'bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300'
-				badge: 'bg-purple-100 text-purple-700'
 			};
 		case AgentType.SYSADMIN:
 			return {
-				fill: '#ffedd5',
+				light: { fill: '#ffedd5', stroke: '#f97316', text: '#9a3412' },
-				stroke: '#f97316',
+				dark: { fill: '#431407', stroke: '#fb923c', text: '#fdba74' },
-				text: '#9a3412',
+				badge: 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300'
-				badge: 'bg-orange-100 text-orange-700'
 			};
 		case AgentType.ASSISTANT:
 			return {
-				fill: '#ccfbf1',
+				light: { fill: '#ccfbf1', stroke: '#14b8a6', text: '#115e59' },
-				stroke: '#14b8a6',
+				dark: { fill: '#134e4a', stroke: '#2dd4bf', text: '#5eead4' },
-				text: '#115e59',
+				badge: 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
-				badge: 'bg-teal-100 text-teal-700'
 			};
 		default:
 			return {
-				fill: '#f3f4f6',
+				light: { fill: '#f3f4f6', stroke: '#9ca3af', text: '#374151' },
-				stroke: '#9ca3af',
+				dark: { fill: '#1f2937', stroke: '#6b7280', text: '#9ca3af' },
-				text: '#374151',
+				badge: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300'
-				badge: 'bg-gray-100 text-gray-700'
 			};
 	}
 }

src/lib/types/resultSource.ts

@@ -0,0 +1,23 @@
+import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+
+export interface ResultSourceStyle {
+	label: string;
+	bg: string;
+	text: string;
+}
+
+/**
+ * Returns label and badge classes for a ResultSource value.
+ */
+export function resultSourceConfig(source: ResultSource): ResultSourceStyle {
+	switch (source) {
+		case ResultSource.TOOL_OUTPUT:
+			return { label: 'Tool Output', bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-800 dark:text-blue-300' };
+		case ResultSource.MODEL_KNOWLEDGE:
+			return { label: 'Model Knowledge', bg: 'bg-purple-100 dark:bg-purple-900/40', text: 'text-purple-800 dark:text-purple-300' };
+		case ResultSource.WEB:
+			return { label: 'Web', bg: 'bg-green-100 dark:bg-green-900/40', text: 'text-green-800 dark:text-green-300' };
+		default:
+			return { label: 'Unspecified', bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-800 dark:text-gray-300' };
+	}
+}

src/lib/utils/date.ts

@@ -0,0 +1,19 @@
+/**
+ * Formats a date as a relative string: "Today", "Yesterday", "N days ago", or locale date.
+ */
+export function formatRelativeDate(date: Date): string {
+	const now = new Date();
+	const diff = now.getTime() - date.getTime();
+	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+	if (days === 0) return 'Today';
+	if (days === 1) return 'Yesterday';
+	if (days < 7) return `${days} days ago`;
+	return date.toLocaleDateString();
+}
+
+/**
+ * Formats a date as a short string like "Mar 12, 2026".
+ */
+export function formatShortDate(date: Date): string {
+	return date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+}

src/lib/utils/sessionConfig.ts

@@ -0,0 +1,13 @@
+import { OverrideLevel } from '$lib/proto/llm_multiverse/v1/common_pb';
+import type { SessionConfig } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+
+/**
+ * Returns true if the session config differs from defaults.
+ */
+export function isNonDefaultConfig(config: SessionConfig): boolean {
+	return (
+		config.overrideLevel !== OverrideLevel.NONE ||
+		config.disabledTools.length > 0 ||
+		config.grantedPermissions.length > 0
+	);
+}

src/routes/+layout.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
+	import { onMount } from 'svelte';
 	import { themeStore } from '$lib/stores/theme.svelte';
 	import ToastContainer from '$lib/components/ToastContainer.svelte';
 
 	let { children } = $props();
 
-	$effect(() => {
+	onMount(() => {
-		themeStore.init();
+		const cleanup = themeStore.init();
+		return cleanup;
 	});
 </script>
 

src/routes/audit/+page.svelte

@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { resolveRoute } from '$app/paths';
 	import AuditTimeline from '$lib/components/AuditTimeline.svelte';
-	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
 	import { auditStore } from '$lib/stores/audit.svelte';
 	import type { AuditEventType } from '$lib/stores/audit.svelte';
 
@@ -40,26 +40,7 @@
 </script>
 
 <div class="flex h-screen flex-col overflow-hidden bg-gray-50 dark:bg-gray-900">
-	<!-- Header -->
+	<PageHeader title="Audit Log" backHref={chatHref} showSampleBadge />
-	<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
-		<div class="flex items-center gap-2 md:gap-4">
-			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
-			<a
-				href={chatHref}
-				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
-			>
-				&larr; Chat
-			</a>
-			<!-- eslint-enable svelte/no-navigation-without-resolve -->
-			<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">Audit Log</h1>
-		</div>
-		<div class="flex items-center gap-2">
-			<ThemeToggle />
-			<span class="hidden sm:inline rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
-				Sample Data
-			</span>
-		</div>
-	</header>
 
 	<!-- Filters -->
 	<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">

src/routes/chat/+page.svelte

@@ -3,7 +3,6 @@
 	import { goto } from '$app/navigation';
 	import { resolveRoute } from '$app/paths';
 	import type { ChatMessage } from '$lib/types';
-	import type { SubagentResult } from '$lib/proto/llm_multiverse/v1/common_pb';
 	import { OverrideLevel } from '$lib/proto/llm_multiverse/v1/common_pb';
 	import type { SessionConfig } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { SessionConfigSchema } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
@@ -17,20 +16,11 @@
 	import ConfigSidebar from '$lib/components/ConfigSidebar.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 	import ConnectionStatus from '$lib/components/ConnectionStatus.svelte';
-	import { processRequest, OrchestratorError, friendlyMessage } from '$lib/services/orchestrator';
-	import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { sessionStore } from '$lib/stores/sessions.svelte';
-	import { memoryStore } from '$lib/stores/memory.svelte';
+	import { isNonDefaultConfig } from '$lib/utils/sessionConfig';
-	import { auditStore } from '$lib/stores/audit.svelte';
+	import { createOrchestration } from '$lib/composables/useOrchestration.svelte';
-	import { toastStore } from '$lib/stores/toast.svelte';
 
 	let messages: ChatMessage[] = $state([]);
-	let isStreaming = $state(false);
-	let error: string | null = $state(null);
-	let lastFailedContent: string | null = $state(null);
-	let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED);
-	let intermediateResult: string = $state('');
-	let finalResult: SubagentResult | null = $state(null);
 	let sessionConfig: SessionConfig = $state(
 		create(SessionConfigSchema, { overrideLevel: OverrideLevel.NONE })
 	);
@@ -40,11 +30,8 @@
 	const memoryHref = resolveRoute('/memory');
 	const auditHref = resolveRoute('/audit');
 
-	const isNonDefaultConfig = $derived(
+	const orchestration = createOrchestration();
-		sessionConfig.overrideLevel !== OverrideLevel.NONE ||
+	const hasNonDefaultConfig = $derived(isNonDefaultConfig(sessionConfig));
-			sessionConfig.disabledTools.length > 0 ||
-			sessionConfig.grantedPermissions.length > 0
-	);
 
 	function navigateToSession(sessionId: string, replace = false) {
 		const url = `${resolveRoute('/chat')}?session=${sessionId}`;
@@ -64,8 +51,7 @@
 	function handleNewChat() {
 		const session = sessionStore.createSession();
 		messages = [];
-		error = null;
+		orchestration.reset();
-		finalResult = null;
 		navigateToSession(session.id);
 	}
 
@@ -74,109 +60,20 @@
 		const session = sessionStore.activeSession;
 		if (session) {
 			messages = [...session.messages];
-			error = null;
+			orchestration.reset();
-			finalResult = null;
 			navigateToSession(id);
 		}
 	}
 
 	async function handleSend(content: string) {
-		error = null;
-		lastFailedContent = null;
-		orchestrationState = OrchestrationState.UNSPECIFIED;
-		intermediateResult = '';
-		finalResult = null;
-
 		const sessionId = sessionStore.activeSessionId!;
-		let lastAuditState = OrchestrationState.UNSPECIFIED;
+		messages = await orchestration.send(sessionId, content, sessionConfig, messages);
-
-		const userMessage: ChatMessage = {
-			id: crypto.randomUUID(),
-			role: 'user',
-			content,
-			timestamp: new Date()
-		};
-		messages.push(userMessage);
-
-		const assistantMessage: ChatMessage = {
-			id: crypto.randomUUID(),
-			role: 'assistant',
-			content: '',
-			timestamp: new Date()
-		};
-		messages.push(assistantMessage);
-
-		sessionStore.updateMessages(sessionId, messages);
-		isStreaming = true;
-
-		try {
-			for await (const response of processRequest(sessionId, content, sessionConfig)) {
-				orchestrationState = response.state;
-
-				// Capture state changes to the audit log
-				if (response.state !== lastAuditState) {
-					const stateLabel = OrchestrationState[response.state] ?? String(response.state);
-					auditStore.addEvent(sessionId, {
-						eventType: 'state_change',
-						details: response.message || `State changed to ${stateLabel}`,
-						state: stateLabel
-					});
-					lastAuditState = response.state;
-				}
-
-				if (response.intermediateResult) {
-					intermediateResult = response.intermediateResult;
-				}
-				if (response.finalResult) {
-					finalResult = response.finalResult;
-					if (response.finalResult.newMemoryCandidates.length > 0) {
-						memoryStore.addCandidates(
-							sessionId,
-							response.finalResult.newMemoryCandidates.map((mc) => ({
-								content: mc.content,
-								source: mc.source,
-								confidence: mc.confidence
-							}))
-						);
-					}
-				}
-				const idx = messages.length - 1;
-				messages[idx] = {
-					...messages[idx],
-					content: response.message
-				};
-			}
-		} catch (err) {
-			const friendlyMsg =
-				err instanceof OrchestratorError
-					? friendlyMessage(err.code)
-					: 'An unexpected error occurred';
-			error = friendlyMsg;
-			lastFailedContent = content;
-			toastStore.addToast({ message: friendlyMsg, type: 'error' });
-			auditStore.addEvent(sessionId, {
-				eventType: 'error',
-				details: friendlyMsg
-			});
-			const idx = messages.length - 1;
-			messages[idx] = {
-				...messages[idx],
-				content: `\u26A0 ${friendlyMsg}`
-			};
-		} finally {
-			isStreaming = false;
-			sessionStore.updateMessages(sessionId, messages);
-		}
 	}
 
 	function handleRetry() {
-		if (!lastFailedContent) return;
+		const sessionId = sessionStore.activeSessionId!;
-		const content = lastFailedContent;
+		const result = orchestration.retry(sessionId, sessionConfig, messages);
-		// Remove the failed assistant message before retrying
+		messages = result.messages;
-		if (messages.length >= 2) {
-			messages = messages.slice(0, -2);
-		}
-		handleSend(content);
 	}
 </script>
 
@@ -240,7 +137,7 @@
 				class="flex min-h-[44px] min-w-[44px] items-center justify-center gap-1 rounded-lg px-2.5 py-1.5 text-sm md:min-h-0 md:min-w-0
 					{showConfig ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
 			>
-				{#if isNonDefaultConfig}
+				{#if hasNonDefaultConfig}
 					<span class="h-2 w-2 rounded-full bg-amber-500"></span>
 				{/if}
 				<span class="hidden sm:inline">Config</span>
@@ -255,12 +152,12 @@
 
 		<MessageList {messages} />
 
-		{#if isStreaming}
+		{#if orchestration.isStreaming}
-			<OrchestrationProgress state={orchestrationState} />
+			<OrchestrationProgress state={orchestration.orchestrationState} />
-			<ThinkingSection content={intermediateResult} />
+			<ThinkingSection content={orchestration.intermediateResult} />
 		{/if}
 
-		{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
+		{#if orchestration.isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
 			<div class="flex justify-start px-4 pb-2">
 				<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 dark:bg-gray-700 px-4 py-2.5">
 					<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:0ms]"
@@ -275,18 +172,18 @@
 			</div>
 		{/if}
 
-		{#if finalResult && !isStreaming}
+		{#if orchestration.finalResult && !orchestration.isStreaming}
-			<FinalResult result={finalResult} />
+			<FinalResult result={orchestration.finalResult} />
 		{/if}
 
-		{#if error}
+		{#if orchestration.error}
 			<div class="mx-4 mb-2 flex items-center justify-between gap-3 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-2 text-sm text-red-600 dark:text-red-400">
-				<span>{error}</span>
+				<span>{orchestration.error}</span>
-				{#if lastFailedContent}
+				{#if orchestration.lastFailedContent}
 					<button
 						type="button"
 						onclick={handleRetry}
-						disabled={isStreaming}
+						disabled={orchestration.isStreaming}
 						class="shrink-0 rounded-md bg-red-100 px-3 py-1 text-xs font-medium text-red-700 hover:bg-red-200 dark:bg-red-800/50 dark:text-red-300 dark:hover:bg-red-800 disabled:opacity-50"
 					>
 						Retry
@@ -295,7 +192,7 @@
 			</div>
 		{/if}
 
-		<MessageInput onSend={handleSend} disabled={isStreaming} />
+		<MessageInput onSend={handleSend} disabled={orchestration.isStreaming} />
 	</div>
 
 	{#if showConfig}

src/routes/lineage/+page.svelte

@@ -2,7 +2,8 @@
 	import { resolveRoute } from '$app/paths';
 	import { AgentType } from '$lib/proto/llm_multiverse/v1/common_pb';
 	import LineageTree from '$lib/components/LineageTree.svelte';
-	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Backdrop from '$lib/components/Backdrop.svelte';
 	import type { LineageNode, SimpleAgentIdentifier } from '$lib/types/lineage';
 	import {
 		buildLineageTree,
@@ -10,6 +11,7 @@
 		agentTypeLabel,
 		agentTypeColor
 	} from '$lib/types/lineage';
+	import { themeStore } from '$lib/stores/theme.svelte';
 
 	const chatHref = resolveRoute('/chat');
 
@@ -32,26 +34,7 @@
 </script>
 
 <div class="flex h-screen flex-col overflow-hidden bg-gray-50 dark:bg-gray-900">
-	<!-- Header -->
+	<PageHeader title="Agent Lineage" backHref={chatHref} showSampleBadge />
-	<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
-		<div class="flex items-center gap-2 md:gap-4">
-			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
-			<a
-				href={chatHref}
-				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
-			>
-				&larr; Chat
-			</a>
-			<!-- eslint-enable svelte/no-navigation-without-resolve -->
-			<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">Agent Lineage</h1>
-		</div>
-		<div class="flex items-center gap-2">
-			<ThemeToggle />
-			<span class="hidden sm:inline rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
-				Sample Data
-			</span>
-		</div>
-	</header>
 
 	<div class="flex flex-1 flex-col md:flex-row overflow-hidden">
 		<!-- Main tree area -->
@@ -63,12 +46,13 @@
 				<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Types:</span>
 				{#each agentTypeLegend as type (type)}
 					{@const colors = agentTypeColor(type)}
+					{@const colorSet = themeStore.isDark ? colors.dark : colors.light}
 					<span
 						class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium {colors.badge}"
 					>
 						<span
 							class="h-2 w-2 rounded-full"
-							style="background-color: {colors.stroke}"
+							style="background-color: {colorSet.stroke}"
 						></span>
 						{agentTypeLabel(type)}
 					</span>
@@ -79,15 +63,8 @@
 		<!-- Detail panel: overlay on mobile, side panel on desktop -->
 		{#if selectedNode}
 			{@const colors = agentTypeColor(selectedNode.agentType)}
-			<!-- Mobile backdrop -->
+			{@const colorSet = themeStore.isDark ? colors.dark : colors.light}
-			<div
+			<Backdrop onClose={() => (selectedNode = null)} />
-				class="fixed inset-0 z-40 bg-black/50 md:hidden"
-				role="button"
-				tabindex="-1"
-				onclick={() => (selectedNode = null)}
-				onkeydown={(e) => { if (e.key === 'Escape') selectedNode = null; }}
-				aria-label="Close detail panel"
-			></div>
 			<aside
 				class="fixed inset-y-0 right-0 z-50 w-72 shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 overflow-y-auto
 					md:relative md:z-auto"
@@ -117,7 +94,7 @@
 						>
 							<span
 								class="h-2 w-2 rounded-full"
-								style="background-color: {colors.stroke}"
+								style="background-color: {colorSet.stroke}"
 							></span>
 							{agentTypeLabel(selectedNode.agentType)}
 						</span>
@@ -139,12 +116,13 @@
 							<ul class="mt-1 space-y-1">
 								{#each selectedNode.children as child (child.id)}
 									{@const childColors = agentTypeColor(child.agentType)}
+									{@const childColorSet = themeStore.isDark ? childColors.dark : childColors.light}
 									<li
 										class="flex items-center gap-2 rounded-md border border-gray-100 dark:border-gray-700 px-2 py-1.5"
 									>
 										<span
 											class="h-2 w-2 shrink-0 rounded-full"
-											style="background-color: {childColors.stroke}"
+											style="background-color: {childColorSet.stroke}"
 										></span>
 										<span class="truncate font-mono text-xs text-gray-700 dark:text-gray-300">{child.id}</span>
 									</li>

src/routes/memory/+page.svelte

@@ -2,7 +2,7 @@
 	import { resolveRoute } from '$app/paths';
 	import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
 	import MemoryCandidateCard from '$lib/components/MemoryCandidateCard.svelte';
-	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
 	import { memoryStore } from '$lib/stores/memory.svelte';
 
 	const chatHref = resolveRoute('/chat');
@@ -39,26 +39,7 @@
 </script>
 
 <div class="flex h-screen flex-col overflow-hidden bg-gray-50 dark:bg-gray-900">
-	<!-- Header -->
+	<PageHeader title="Memory Candidates" backHref={chatHref} showSampleBadge />
-	<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
-		<div class="flex items-center gap-2 md:gap-4">
-			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
-			<a
-				href={chatHref}
-				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
-			>
-				&larr; Chat
-			</a>
-			<!-- eslint-enable svelte/no-navigation-without-resolve -->
-			<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">Memory Candidates</h1>
-		</div>
-		<div class="flex items-center gap-2">
-			<ThemeToggle />
-			<span class="hidden sm:inline rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
-				Sample Data
-			</span>
-		</div>
-	</header>
 
 	<!-- Filters -->
 	<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">