209e38d8a6
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>
40 lines
2.1 KiB
Markdown
40 lines
2.1 KiB
Markdown
---
|
|
---
|
|
|
|
# Issue #15: Agent lineage visualization
|
|
|
|
**Status:** COMPLETED
|
|
**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/15
|
|
**Branch:** `feature/issue-15-agent-lineage`
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [x] Dedicated `/lineage` route
|
|
- [x] Tree/graph visualization of agent spawn chain
|
|
- [x] Each node displays: agent_id, agent_type, spawn_depth
|
|
- [x] Visual hierarchy reflecting parent-child agent relationships
|
|
- [x] Custom SVG-based rendering (no external graph library needed)
|
|
- [x] Updates as new agents appear in the stream (reactive via `$derived`)
|
|
- [x] 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
|