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>
This commit is contained in:
shahondin1624
145
src/routes/lineage/+page.svelte
Normal file
145
src/routes/lineage/+page.svelte
Normal file
@@ -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"
|
||||
>
|
||||
← 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"
|
||||
>
|
||||
✕
|
||||
</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>
|
||||
Reference in New Issue
Block a user