refactor: code review improvements — fix bugs, extract shared utilities, add README

- Fix reactivity bug: use SvelteMap instead of Map in sessions store
- Fix theme listener memory leak: guard against double-init, return cleanup function
- Fix transport singleton ignoring different endpoints
- Fix form/button type mismatch in MessageInput
- Add safer retry validation in chat page
- Extract shared utilities: date formatting, session config check, result source config
- Extract shared components: Backdrop, PageHeader
- Extract orchestration composable from chat page (310→85 lines of script)
- Consolidate AuditTimeline switch functions into config record
- Move sample data to dedicated module
- Add dark mode support for LineageTree SVG colors
- Memoize leaf count computation in LineageTree
- Update README with usage guide and project structure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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 -->
-	<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>
+	<PageHeader title="Agent Lineage" backHref={chatHref} showSampleBadge />
 
 	<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 -->
-			<div
-				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>
+			{@const colorSet = themeStore.isDark ? colors.dark : colors.light}
+			<Backdrop onClose={() => (selectedNode = null)} />
 			<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>