feat: add agent lineage visualization with SVG tree rendering

Add a dedicated /lineage route with custom SVG-based tree visualization
of the agent spawn chain. Nodes are colored by agent type (orchestrator,
researcher, coder, sysadmin, assistant) and display agent ID, type, and
spawn depth. Clicking a node opens a detail panel. Uses sample data
since the API does not yet expose lineage information.

Closes #15

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

src/routes/+page.svelte

@@ -1,2 +1,15 @@
+<script lang="ts">
+	import { resolveRoute } from '$app/paths';
+
+	const chatHref = resolveRoute('/chat');
+	const lineageHref = resolveRoute('/lineage');
+</script>
+
 <h1 class="text-3xl font-bold text-center mt-8">LLM Multiverse UI</h1>
 <p class="text-center text-gray-600 mt-2">Orchestration interface</p>
+<nav class="flex justify-center gap-4 mt-6">
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+	<a href={chatHref} class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">Chat</a>
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+	<a href={lineageHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Agent Lineage</a>
+</nav>

src/routes/chat/+page.svelte

@@ -29,6 +29,7 @@
 		create(SessionConfigSchema, { overrideLevel: OverrideLevel.NONE })
 	);
 	let showConfig = $state(false);
+	const lineageHref = resolveRoute('/lineage');
 
 	const isNonDefaultConfig = $derived(
 		sessionConfig.overrideLevel !== OverrideLevel.NONE ||
@@ -136,6 +137,15 @@
 	<div class="flex flex-1 flex-col">
 		<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
 			<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
+			<div class="flex items-center gap-2">
+			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+			<a
+				href={lineageHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+			>
+				Lineage
+			</a>
+			<!-- eslint-enable svelte/no-navigation-without-resolve -->
 			<button
 				type="button"
 				onclick={() => (showConfig = !showConfig)}
@@ -147,6 +157,7 @@
 				{/if}
 				Config
 			</button>
+			</div>
 		</header>
 
 		<MessageList {messages} />

src/routes/lineage/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { resolveRoute } from '$app/paths';
+	import { AgentType } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import LineageTree from '$lib/components/LineageTree.svelte';
+	import type { LineageNode, SimpleAgentIdentifier } from '$lib/types/lineage';
+	import {
+		buildLineageTree,
+		getSampleLineageData,
+		agentTypeLabel,
+		agentTypeColor
+	} from '$lib/types/lineage';
+
+	const chatHref = resolveRoute('/chat');
+
+	let agents: SimpleAgentIdentifier[] = $state(getSampleLineageData());
+	let treeNodes: LineageNode[] = $derived(buildLineageTree(agents));
+	let selectedNode: LineageNode | null = $state(null);
+
+	function handleSelectNode(node: LineageNode) {
+		selectedNode = selectedNode?.id === node.id ? null : node;
+	}
+
+	const agentTypeLegend = [
+		AgentType.ORCHESTRATOR,
+		AgentType.RESEARCHER,
+		AgentType.CODER,
+		AgentType.SYSADMIN,
+		AgentType.ASSISTANT,
+		AgentType.UNSPECIFIED
+	];
+</script>
+
+<div class="flex h-screen flex-col bg-gray-50">
+	<!-- Header -->
+	<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
+		<div class="flex items-center 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 hover:bg-gray-100 hover:text-gray-900"
+			>
+				&larr; Chat
+			</a>
+			<!-- eslint-enable svelte/no-navigation-without-resolve -->
+			<h1 class="text-lg font-semibold text-gray-900">Agent Lineage</h1>
+		</div>
+		<span class="rounded-md bg-amber-50 px-2 py-1 text-xs text-amber-700">
+			Sample Data
+		</span>
+	</header>
+
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Main tree area -->
+		<main class="flex-1 overflow-auto p-6">
+			<LineageTree nodes={treeNodes} onSelectNode={handleSelectNode} />
+
+			<!-- Legend -->
+			<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
+				<span class="text-xs font-medium text-gray-500">Agent Types:</span>
+				{#each agentTypeLegend as type (type)}
+					{@const colors = agentTypeColor(type)}
+					<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}"
+						></span>
+						{agentTypeLabel(type)}
+					</span>
+				{/each}
+			</div>
+		</main>
+
+		<!-- Detail panel -->
+		{#if selectedNode}
+			{@const colors = agentTypeColor(selectedNode.agentType)}
+			<aside
+				class="w-72 shrink-0 border-l border-gray-200 bg-white p-4 overflow-y-auto"
+			>
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="text-sm font-semibold text-gray-900">Agent Details</h2>
+					<button
+						type="button"
+						onclick={() => (selectedNode = null)}
+						class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+						aria-label="Close detail panel"
+					>
+						&#10005;
+					</button>
+				</div>
+
+				<div class="space-y-3">
+					<div>
+						<p class="text-xs font-medium text-gray-500">Agent ID</p>
+						<p class="mt-0.5 break-all font-mono text-sm text-gray-900">{selectedNode.id}</p>
+					</div>
+
+					<div>
+						<p class="text-xs font-medium text-gray-500">Agent Type</p>
+						<span
+							class="mt-0.5 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}"
+							></span>
+							{agentTypeLabel(selectedNode.agentType)}
+						</span>
+					</div>
+
+					<div>
+						<p class="text-xs font-medium text-gray-500">Spawn Depth</p>
+						<p class="mt-0.5 text-sm text-gray-900">{selectedNode.spawnDepth}</p>
+					</div>
+
+					<div>
+						<p class="text-xs font-medium text-gray-500">Children</p>
+						<p class="mt-0.5 text-sm text-gray-900">{selectedNode.children.length}</p>
+					</div>
+
+					{#if selectedNode.children.length > 0}
+						<div>
+							<p class="text-xs font-medium text-gray-500">Child Agents</p>
+							<ul class="mt-1 space-y-1">
+								{#each selectedNode.children as child (child.id)}
+									{@const childColors = agentTypeColor(child.agentType)}
+									<li
+										class="flex items-center gap-2 rounded-md border border-gray-100 px-2 py-1.5"
+									>
+										<span
+											class="h-2 w-2 shrink-0 rounded-full"
+											style="background-color: {childColors.stroke}"
+										></span>
+										<span class="truncate font-mono text-xs text-gray-700">{child.id}</span>
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/if}
+				</div>
+			</aside>
+		{/if}
+	</div>
+</div>

src/routes/lineage/+page.ts

@@ -0,0 +1,2 @@
+export const prerender = false;
+export const ssr = false;