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:
@@ -16,3 +16,4 @@
|
||||
| #12 | Session history sidebar | COMPLETED | [issue-012.md](issue-012.md) |
|
||||
| #13 | Session config sidebar component | COMPLETED | [issue-013.md](issue-013.md) |
|
||||
| #14 | Preset configurations | COMPLETED | [issue-014.md](issue-014.md) |
|
||||
| #15 | Agent lineage visualization | COMPLETED | [issue-015.md](issue-015.md) |
|
||||
|
||||
39
implementation-plans/issue-015.md
Normal file
39
implementation-plans/issue-015.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
---
|
||||
|
||||
# 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
|
||||
Reference in New Issue
Block a user