llm-multiverse-ui/src/routes/lineage/+page.svelte

<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 PageHeader from '$lib/components/PageHeader.svelte';
	import Backdrop from '$lib/components/Backdrop.svelte';
	import type { LineageNode, SimpleAgentIdentifier } from '$lib/types/lineage';
	import {
		buildLineageTree,
		getSampleLineageData,
		agentTypeLabel,
		agentTypeColor
	} from '$lib/types/lineage';
	import { themeStore } from '$lib/stores/theme.svelte';

	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 overflow-hidden bg-gray-50 dark:bg-gray-900">
	<PageHeader title="Agent Lineage" backHref={chatHref} showSampleBadge />

	<div class="flex flex-1 flex-col md:flex-row overflow-hidden">
		<!-- Main tree area -->
		<main class="flex-1 overflow-auto p-4 md:p-6">
			<LineageTree nodes={treeNodes} onSelectNode={handleSelectNode} />

			<!-- Legend -->
			<div class="mt-4 flex flex-wrap items-center gap-2 md:gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 md:px-4 md:py-3">
				<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: {colorSet.stroke}"
						></span>
						{agentTypeLabel(type)}
					</span>
				{/each}
			</div>
		</main>

		<!-- Detail panel: overlay on mobile, side panel on desktop -->
		{#if selectedNode}
			{@const colors = agentTypeColor(selectedNode.agentType)}
			{@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"
			>
				<div class="mb-4 flex items-center justify-between">
					<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Agent Details</h2>
					<button
						type="button"
						onclick={() => (selectedNode = null)}
						class="rounded p-1 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300"
						aria-label="Close detail panel"
					>
						&#10005;
					</button>
				</div>

				<div class="space-y-3">
					<div>
						<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent ID</p>
						<p class="mt-0.5 break-all font-mono text-sm text-gray-900 dark:text-gray-100">{selectedNode.id}</p>
					</div>

					<div>
						<p class="text-xs font-medium text-gray-500 dark:text-gray-400">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: {colorSet.stroke}"
							></span>
							{agentTypeLabel(selectedNode.agentType)}
						</span>
					</div>

					<div>
						<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Spawn Depth</p>
						<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.spawnDepth}</p>
					</div>

					<div>
						<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Children</p>
						<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.children.length}</p>
					</div>

					{#if selectedNode.children.length > 0}
						<div>
							<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Child Agents</p>
							<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: {childColorSet.stroke}"
										></span>
										<span class="truncate font-mono text-xs text-gray-700 dark:text-gray-300">{child.id}</span>
									</li>
								{/each}
							</ul>
						</div>
					{/if}
				</div>
			</aside>
		{/if}
	</div>
</div>