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
2026-03-12 12:19:49 +01:00
parent 5624175ddd
commit 209e38d8a6
8 changed files with 692 additions and 0 deletions

View File

@@ -1,2 +1,15 @@
<script lang="ts">
import { resolveRoute } from '$app/paths';
const chatHref = resolveRoute('/chat');
const lineageHref = resolveRoute('/lineage');
</script>
<h1 class="text-3xl font-bold text-center mt-8">LLM Multiverse UI</h1>
<p class="text-center text-gray-600 mt-2">Orchestration interface</p>
<nav class="flex justify-center gap-4 mt-6">
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
<a href={chatHref} class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">Chat</a>
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
<a href={lineageHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Agent Lineage</a>
</nav>