Files

shahondin1624 209e38d8a6 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>

2026-03-12 12:19:49 +01:00

2.1 KiB

Raw Permalink Blame History

Issue #15: Agent lineage visualization

Status: COMPLETED Issue: #15 Branch: feature/issue-15-agent-lineage

Acceptance Criteria

Dedicated /lineage route
Tree/graph visualization of agent spawn chain
Each node displays: agent_id, agent_type, spawn_depth
Visual hierarchy reflecting parent-child agent relationships
Custom SVG-based rendering (no external graph library needed)
Updates as new agents appear in the stream (reactive via $derived)
Clickable nodes to show agent details

Implementation

New Files

src/lib/types/lineage.ts — lineage types (LineageNode, SimpleAgentIdentifier), tree builder, color/label helpers, sample data
src/lib/components/LineageTree.svelte — custom SVG tree visualization with horizontal layout, bezier edges, colored nodes by agent type, click selection
src/routes/lineage/+page.svelte — dedicated lineage route with tree, legend, and detail panel
src/routes/lineage/+page.ts — SSR disabled for this route

Modified Files

src/routes/+page.svelte — added navigation links to Chat and Agent Lineage
src/routes/chat/+page.svelte — added Lineage link in header alongside Config button

Key Decisions

Uses sample/demo data since the API does not yet expose lineage information (AuditService is write-only, ProcessRequestResponse does not include lineage)
SimpleAgentIdentifier type decouples the UI from protobuf Message dependency, making it easy to adapt when real data arrives
Horizontal tree layout: root on left, children branching right, computed via recursive leaf-counting algorithm
SVG bezier curves for edges, rounded rectangles for nodes
Agent type colors: Orchestrator=blue, Researcher=green, Coder=purple, SysAdmin=orange, Assistant=teal, Unspecified=gray
Detail panel slides in from right when a node is clicked, showing full agent info and child list
Tree layout is fully reactive via $derived runes — updating the agents array recomputes the tree automatically

2.1 KiB Raw Permalink Blame History

Issue #15: Agent lineage visualization

Acceptance Criteria

Implementation

New Files

Modified Files

Key Decisions

2.1 KiB

Raw Permalink Blame History