feat(web): merge Entities + Graph into a single Knowledge Base page

Replaces the separate Entities/Graph nav items with one Knowledge Base
page that browses all entities as either a table or a force-graph,
scoped by ontology layer (Infrastructure/Governance/Cognition), with a
resizable browse/detail split instead of a slide-over sheet.

- New KnowledgeBase.svelte: layer tabs, view toggle, resizable
  browse/detail split (pattern from Chat.svelte's rail).
- EntityTable/EntityGraph extracted as presentational sub-components;
  their search/filter/root/depth toolbars live in the shared page
  toolbar (not the resizable pane) so they don't truncate when the
  divider is dragged narrow, and both views start flush with the
  detail pane for consistent height.
- EntityTable columns are sortable (slug/type/name/state/health).
- EntityDetailContent redesigned as a single-column list of
  collapsible sections (DetailSection.svelte), collapsed by default
  when empty; relation entries are clickable and select the entity in
  the browse pane + detail pane (and drill in-place in EntitySheet
  wherever it's used elsewhere in the app).
- api.ts: add layer filter to fetchEntities, add fetchEntityTypes for
  client-side graph layer scoping (the graph endpoint has no layer
  param).

Old hash routes (#/entities, #/graph) redirect to #/kb.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/lib/components/DetailSection.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import * as Collapsible from '$lib/components/ui/collapsible'
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+  import type { Snippet } from 'svelte'
+
+  let {
+    title,
+    count,
+    defaultOpen,
+    children
+  }: {
+    title: string
+    count?: number
+    defaultOpen: boolean
+    children: Snippet
+  } = $props()
+
+  let open = $state(defaultOpen)
+</script>
+
+<Collapsible.Root bind:open class="rounded-lg border bg-card">
+  <Collapsible.Trigger class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-3 py-2 text-left hover:bg-muted/50">
+    <span class="text-sm font-medium">{title}{count !== undefined ? ` (${count})` : ''}</span>
+    <ChevronDownIcon
+      class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 {open ? 'rotate-180' : ''}"
+      aria-hidden="true"
+    />
+  </Collapsible.Trigger>
+  <Collapsible.Content class="overflow-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:animate-in data-[state=open]:fade-in">
+    <div class="border-t px-3 py-2.5">
+      {@render children()}
+    </div>
+  </Collapsible.Content>
+</Collapsible.Root>

web/src/lib/components/EntityDetailContent.svelte

@@ -29,13 +29,13 @@
   } from '$lib/api'
   import { relativeTime } from '$lib/utils'
   import type { OikosEvent } from '$lib/stores/events'
-  import * as Card from '$lib/components/ui/card'
+  import DetailSection from '$lib/components/DetailSection.svelte'
   import { Badge } from '$lib/components/ui/badge'
   import { Button } from '$lib/components/ui/button'
   import { Skeleton } from '$lib/components/ui/skeleton'
   import { toast } from 'svelte-sonner'
 
-  let { slug }: { slug: string } = $props()
+  let { slug, onSelectEntity }: { slug: string; onSelectEntity?: (slug: string) => void } = $props()
 
   let entity = $state<Entity | null>(null)
   let relations = $state<Relationship[]>([])
@@ -176,13 +176,12 @@
   }
 </script>
 
-<div class="@container flex h-full flex-col gap-4 overflow-y-auto p-4 md:p-6">
+<div class="flex h-full flex-col gap-3 overflow-y-auto p-4 md:p-6">
   {#if loading}
     <Skeleton class="h-8 w-48" />
-    <div class="grid grid-cols-1 gap-4 @lg:grid-cols-2">
-      <Skeleton class="h-40 w-full" />
-      <Skeleton class="h-40 w-full" />
-    </div>
+    <Skeleton class="h-9 w-full" />
+    <Skeleton class="h-9 w-full" />
+    <Skeleton class="h-9 w-full" />
   {:else if !entity}
     <p class="text-sm text-muted-foreground">Entity "{slug}" not found.</p>
   {:else}
@@ -198,11 +197,8 @@
       {/if}
     </div>
 
-    <Card.Root>
-      <Card.Header>
-        <Card.Title class="text-sm">Monitoring ({checks.length})</Card.Title>
-      </Card.Header>
-      <Card.Content class="flex flex-col gap-1.5">
+    <DetailSection title="Monitoring" count={checks.length} defaultOpen={checks.length > 0}>
+      <div class="flex flex-col gap-1.5">
         {#each checks as check (check.id)}
           <div class="flex items-center justify-between gap-2 rounded-md border px-2.5 py-1.5 text-xs">
             <div class="flex items-center gap-2">
@@ -221,202 +217,175 @@
         {:else}
           <p class="text-xs text-muted-foreground">No checks configured for this entity.</p>
         {/each}
-      </Card.Content>
-    </Card.Root>
+      </div>
+    </DetailSection>
 
-    <div class="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Attributes</Card.Title>
-        </Card.Header>
-        <Card.Content>
-          {#if entity.attributes && Object.keys(entity.attributes).length}
-            <dl class="flex flex-col gap-1.5 text-xs">
-              {#each Object.entries(entity.attributes) as [key, value]}
-                <div class="flex items-start justify-between gap-3 border-b pb-1.5 last:border-0">
-                  <dt class="shrink-0 font-mono text-muted-foreground">{key}</dt>
-                  <dd class="min-w-0 flex-1 truncate text-right">
-                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}
-                  </dd>
-                </div>
-              {/each}
-            </dl>
-          {:else}
-            <p class="text-xs text-muted-foreground">No attributes.</p>
-          {/if}
-        </Card.Content>
-      </Card.Root>
+    <DetailSection title="Attributes" count={Object.keys(entity.attributes ?? {}).length} defaultOpen={!!entity.attributes && Object.keys(entity.attributes).length > 0}>
+      {#if entity.attributes && Object.keys(entity.attributes).length}
+        <dl class="flex flex-col gap-1.5 text-xs">
+          {#each Object.entries(entity.attributes) as [key, value]}
+            <div class="flex items-start justify-between gap-3 border-b pb-1.5 last:border-0">
+              <dt class="shrink-0 font-mono text-muted-foreground">{key}</dt>
+              <dd class="min-w-0 flex-1 truncate text-right">
+                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+              </dd>
+            </div>
+          {/each}
+        </dl>
+      {:else}
+        <p class="text-xs text-muted-foreground">No attributes.</p>
+      {/if}
+    </DetailSection>
 
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Relations ({relations.length})</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex flex-col gap-1">
-          {#each relations as rel}
-            <div class="flex items-center gap-1 font-mono text-xs">
+    <DetailSection title="Relations" count={relations.length} defaultOpen={relations.length > 0}>
+      <div class="flex flex-col gap-1">
+        {#each relations as rel}
+          <div class="flex items-center gap-1 font-mono text-xs">
+            {#if onSelectEntity}
+              <button type="button" class="hover:underline hover:text-foreground" onclick={() => onSelectEntity(rel.source)}>{rel.source}</button>
+              <span class="text-muted-foreground">—{rel.type}→</span>
+              <button type="button" class="hover:underline hover:text-foreground" onclick={() => onSelectEntity(rel.target)}>{rel.target}</button>
+            {:else}
               <span>{rel.source}</span>
               <span class="text-muted-foreground">—{rel.type}→</span>
               <span>{rel.target}</span>
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">No direct relations.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-    </div>
+            {/if}
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">No direct relations.</p>
+        {/each}
+      </div>
+    </DetailSection>
 
-    {#if metrics.length}
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Metrics</Card.Title>
-        </Card.Header>
-        <Card.Content class="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
+    <DetailSection title="Metrics" count={metrics.length} defaultOpen={metrics.length > 0}>
+      {#if metrics.length}
+        <div class="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
           {#each metrics as series (series.metric)}
             <div>
               <p class="mb-1 text-xs text-muted-foreground">{series.metric} ({series.rollup})</p>
               <div bind:this={chartContainers[series.metric]}></div>
             </div>
           {/each}
-        </Card.Content>
-      </Card.Root>
-    {/if}
+        </div>
+      {:else}
+        <p class="text-xs text-muted-foreground">No metrics tracked.</p>
+      {/if}
+    </DetailSection>
 
-    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-3">
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Signals</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex flex-col gap-2">
-          {#each signals as signal (signal.id)}
-            <div class="flex flex-col gap-1 border-b pb-2 text-xs last:border-0 last:pb-0">
-              <div class="flex items-center justify-between gap-2">
-                <span>{signal.kind}</span>
-                <div class="flex items-center gap-1">
-                  <Badge variant={severityVariant(signal.severity)}>{signal.severity}</Badge>
-                  <Badge variant="outline">{signal.state}</Badge>
-                </div>
+    <DetailSection title="Signals" count={signals.length} defaultOpen={signals.length > 0}>
+      <div class="flex flex-col gap-2">
+        {#each signals as signal (signal.id)}
+          <div class="flex flex-col gap-1 border-b pb-2 text-xs last:border-0 last:pb-0">
+            <div class="flex items-center justify-between gap-2">
+              <span>{signal.kind}</span>
+              <div class="flex items-center gap-1">
+                <Badge variant={severityVariant(signal.severity)}>{signal.severity}</Badge>
+                <Badge variant="outline">{signal.state}</Badge>
               </div>
-              {#if ['raised', 'acknowledged', 'acting'].includes(signal.state)}
-                <div class="flex justify-end gap-1.5">
-                  {#if signal.state === 'raised'}
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      class="h-6 px-2 text-xs"
-                      disabled={actingSignal === signal.id}
-                      onclick={() => ackOpenSignal(signal.id)}>Ack</Button
-                    >
-                  {/if}
+            </div>
+            {#if ['raised', 'acknowledged', 'acting'].includes(signal.state)}
+              <div class="flex justify-end gap-1.5">
+                {#if signal.state === 'raised'}
                   <Button
                     size="sm"
                     variant="outline"
                     class="h-6 px-2 text-xs"
                     disabled={actingSignal === signal.id}
-                    onclick={() => muteOpenSignal(signal.id)}>Mute 1h</Button
+                    onclick={() => ackOpenSignal(signal.id)}>Ack</Button
                   >
-                  <Button
-                    size="sm"
-                    class="h-6 px-2 text-xs"
-                    disabled={actingSignal === signal.id}
-                    onclick={() => resolveOpenSignal(signal.id)}>Resolve</Button
-                  >
-                </div>
-              {/if}
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">None.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Executions</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex flex-col gap-1">
-          {#each executions as execution (execution.id)}
-            <div class="flex items-center justify-between text-xs">
-              <span>{execution.action}</span>
-              <Badge variant="outline">{execution.status}</Badge>
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">None.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Knowledge</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex flex-col gap-1">
-          {#each knowledge as hit (hit.id)}
-            <div class="text-xs">
-              <Badge variant="outline" class="mr-1">{hit.type}</Badge>{hit.title}
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">None linked.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-3">
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Recent events</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
-          {#each events as ev (ev.id)}
-            <div class="flex items-center justify-between gap-2 text-xs">
-              <span class="font-mono text-muted-foreground">{new Date(ev.ts).toLocaleString()}</span>
-              <span class="truncate">{ev.type}</span>
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">No events yet.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Agent activity</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
-          {#each agentActivity as activity (activity.id)}
-            <div class="flex flex-col gap-0.5 border-b pb-1.5 text-xs last:border-0 last:pb-0">
-              <div class="flex items-center justify-between gap-2">
-                <span class="font-mono text-muted-foreground">{new Date(activity.ts).toLocaleString()}</span>
-                <Badge variant={activity.success === false ? 'destructive' : 'outline'}>{activity.activity_type}</Badge>
+                {/if}
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="h-6 px-2 text-xs"
+                  disabled={actingSignal === signal.id}
+                  onclick={() => muteOpenSignal(signal.id)}>Mute 1h</Button
+                >
+                <Button
+                  size="sm"
+                  class="h-6 px-2 text-xs"
+                  disabled={actingSignal === signal.id}
+                  onclick={() => resolveOpenSignal(signal.id)}>Resolve</Button
+                >
               </div>
-              <span class="truncate text-muted-foreground"
-                >{activity.agent_id}{activity.tool_name ? ` · ${activity.tool_name}` : ''}</span
-              >
-            </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">No agent activity.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
+            {/if}
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">None.</p>
+        {/each}
+      </div>
+    </DetailSection>
 
-      <Card.Root>
-        <Card.Header>
-          <Card.Title class="text-sm">Audit trail</Card.Title>
-        </Card.Header>
-        <Card.Content class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
-          {#each auditEntries as entry (entry.id)}
-            <div class="flex flex-col gap-0.5 border-b pb-1.5 text-xs last:border-0 last:pb-0">
-              <div class="flex items-center justify-between gap-2">
-                <span class="font-mono text-muted-foreground">{new Date(entry.ts).toLocaleString()}</span>
-                <Badge variant="outline">{entry.actor_type}</Badge>
-              </div>
-              <span class="truncate text-muted-foreground">{entry.actor_id ?? '—'} · {entry.action}</span>
+    <DetailSection title="Executions" count={executions.length} defaultOpen={executions.length > 0}>
+      <div class="flex flex-col gap-1">
+        {#each executions as execution (execution.id)}
+          <div class="flex items-center justify-between text-xs">
+            <span>{execution.action}</span>
+            <Badge variant="outline">{execution.status}</Badge>
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">None.</p>
+        {/each}
+      </div>
+    </DetailSection>
+
+    <DetailSection title="Knowledge" count={knowledge.length} defaultOpen={knowledge.length > 0}>
+      <div class="flex flex-col gap-1">
+        {#each knowledge as hit (hit.id)}
+          <div class="text-xs">
+            <Badge variant="outline" class="mr-1">{hit.type}</Badge>{hit.title}
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">None linked.</p>
+        {/each}
+      </div>
+    </DetailSection>
+
+    <DetailSection title="Recent events" count={events.length} defaultOpen={events.length > 0}>
+      <div class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
+        {#each events as ev (ev.id)}
+          <div class="flex items-center justify-between gap-2 text-xs">
+            <span class="font-mono text-muted-foreground">{new Date(ev.ts).toLocaleString()}</span>
+            <span class="truncate">{ev.type}</span>
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">No events yet.</p>
+        {/each}
+      </div>
+    </DetailSection>
+
+    <DetailSection title="Agent activity" count={agentActivity.length} defaultOpen={agentActivity.length > 0}>
+      <div class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
+        {#each agentActivity as activity (activity.id)}
+          <div class="flex flex-col gap-0.5 border-b pb-1.5 text-xs last:border-0 last:pb-0">
+            <div class="flex items-center justify-between gap-2">
+              <span class="font-mono text-muted-foreground">{new Date(activity.ts).toLocaleString()}</span>
+              <Badge variant={activity.success === false ? 'destructive' : 'outline'}>{activity.activity_type}</Badge>
             </div>
-          {:else}
-            <p class="text-xs text-muted-foreground">No audit entries.</p>
-          {/each}
-        </Card.Content>
-      </Card.Root>
-    </div>
+            <span class="truncate text-muted-foreground"
+              >{activity.agent_id}{activity.tool_name ? ` · ${activity.tool_name}` : ''}</span
+            >
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">No agent activity.</p>
+        {/each}
+      </div>
+    </DetailSection>
+
+    <DetailSection title="Audit trail" count={auditEntries.length} defaultOpen={auditEntries.length > 0}>
+      <div class="flex max-h-72 flex-col gap-1.5 overflow-y-auto">
+        {#each auditEntries as entry (entry.id)}
+          <div class="flex flex-col gap-0.5 border-b pb-1.5 text-xs last:border-0 last:pb-0">
+            <div class="flex items-center justify-between gap-2">
+              <span class="font-mono text-muted-foreground">{new Date(entry.ts).toLocaleString()}</span>
+              <Badge variant="outline">{entry.actor_type}</Badge>
+            </div>
+            <span class="truncate text-muted-foreground">{entry.actor_id ?? '—'} · {entry.action}</span>
+          </div>
+        {:else}
+          <p class="text-xs text-muted-foreground">No audit entries.</p>
+        {/each}
+      </div>
+    </DetailSection>
   {/if}
 </div>

web/src/lib/components/EntityGraph.svelte

@@ -0,0 +1,476 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY, type Simulation } from 'd3-force'
+  import { fetchGraph, fetchEntityTypes, type GraphView, type Entity, type Health } from '$lib/api'
+  import { liveEvents, subscribeEvents } from '$lib/stores/events'
+  import { Skeleton } from '$lib/components/ui/skeleton'
+
+  export interface GraphInfo {
+    allNodeTypes: string[]
+    allRelTypes: string[]
+    relColors: Map<string, string>
+    visibleCount: number
+    truncated: boolean
+    zoomPct: number
+  }
+
+  let {
+    layer,
+    selectedSlug = null,
+    onSelect,
+    root = $bindable(''),
+    depth,
+    search,
+    reloadToken,
+    resetToken,
+    activeNodeTypes = $bindable(new Set<string>()),
+    activeRelTypes = $bindable(new Set<string>()),
+    info = $bindable<GraphInfo>({ allNodeTypes: [], allRelTypes: [], relColors: new Map(), visibleCount: 0, truncated: false, zoomPct: 100 })
+  }: {
+    layer: string
+    selectedSlug?: string | null
+    onSelect: (slug: string) => void
+    root?: string
+    depth: number
+    search: string
+    // Bumped by the parent toolbar to request a data reload / view reset —
+    // these controls live in the shared page toolbar (not squeezed inside
+    // this resizable pane), so they can't call load()/resetView() directly.
+    reloadToken: number
+    resetToken: number
+    activeNodeTypes?: Set<string>
+    activeRelTypes?: Set<string>
+    info?: GraphInfo
+  } = $props()
+
+  interface Node extends Entity {
+    x?: number
+    y?: number
+    vx?: number
+    vy?: number
+    fx?: number | null
+    fy?: number | null
+    degree: number
+  }
+  interface Link {
+    source: string | Node
+    target: string | Node
+    type: string
+  }
+
+  let graph = $state<GraphView | null>(null)
+  let loading = $state(true)
+  let nodes = $state<Node[]>([])
+  let links = $state<Link[]>([])
+  let sim: Simulation<Node, Link> | null = null
+
+  // type → ontology layer, so the graph can be scoped client-side (the graph
+  // endpoint itself has no layer param).
+  let typeLayer = $state<Map<string, string>>(new Map())
+
+  let hoveredId = $state<string | null>(null)
+
+  // viewport transform: translate(x, y) scale(k)
+  let view = $state({ x: 0, y: 0, k: 1 })
+  let svgEl = $state<SVGSVGElement | null>(null)
+
+  const width = 1200
+  const height = 800
+
+  const healthColor: Record<Health, string> = {
+    healthy: '#3fb950',
+    degraded: '#d29922',
+    down: '#f85149',
+    unknown: '#8b949e'
+  }
+
+  const relPalette = ['#58a6ff', '#3fb950', '#d29922', '#f85149', '#bc8cff', '#39c5cf', '#f0883e', '#db61a2']
+  const relColorByType = $derived.by(() => {
+    const map = new Map<string, string>()
+    const types = Array.from(new Set(links.map((l) => l.type))).sort()
+    types.forEach((t, i) => map.set(t, relPalette[i % relPalette.length]))
+    return map
+  })
+
+  function relColor(type: string): string {
+    return relColorByType.get(type) ?? '#30363d'
+  }
+
+  function markerId(type: string): string {
+    return 'arrow-' + type.replace(/[^a-z0-9]/gi, '_')
+  }
+
+  function endpoint(end: string | Node): Node | undefined {
+    return typeof end === 'object' ? end : nodes.find((n) => n.id === end)
+  }
+  function endpointId(end: string | Node): string {
+    return typeof end === 'object' ? end.id : end
+  }
+
+  // Node belongs to the active layer? (Unknown types fall back to visible so a
+  // missing ontology entry never blanks the graph.)
+  function inLayer(type: string): boolean {
+    const l = typeLayer.get(type)
+    return l === undefined || l === layer
+  }
+
+  async function load() {
+    loading = true
+    graph = await fetchGraph({ root: root || undefined, depth, includeStatus: true })
+    loading = false
+    if (!graph) return
+
+    const byId = new Map(nodes.map((n) => [n.id, n]))
+    const degree = new Map<string, number>()
+    const idBySlug = new Map(graph.nodes.map((n) => [n.slug, n.id]))
+    for (const e of graph.edges) {
+      const s = idBySlug.get(e.source) ?? e.source
+      const t = idBySlug.get(e.target) ?? e.target
+      degree.set(s, (degree.get(s) ?? 0) + 1)
+      degree.set(t, (degree.get(t) ?? 0) + 1)
+    }
+
+    nodes = graph.nodes.map((n) => {
+      const prev = byId.get(n.id)
+      return { ...n, x: prev?.x, y: prev?.y, degree: degree.get(n.id) ?? 0 }
+    })
+    links = graph.edges.map((e) => ({
+      source: idBySlug.get(e.source) ?? e.source,
+      target: idBySlug.get(e.target) ?? e.target,
+      type: e.type
+    }))
+
+    // Default the node/edge-type toggles to the types present in the active layer.
+    activeNodeTypes = new Set(nodes.filter((n) => inLayer(n.type)).map((n) => n.type))
+    activeRelTypes = new Set(links.map((l) => l.type))
+
+    sim?.stop()
+    sim = forceSimulation(nodes)
+      .force('link', forceLink<Node, Link>(links).id((n) => n.id).distance(70).strength(0.6))
+      .force('charge', forceManyBody().strength(-240).distanceMax(400))
+      .force('center', forceCenter(width / 2, height / 2))
+      .force('collide', forceCollide<Node>((n) => nodeRadius(n) + 8))
+      .force('x', forceX(width / 2).strength(0.04))
+      .force('y', forceY(height / 2).strength(0.04))
+      .velocityDecay(0.32)
+      .alphaDecay(0.035)
+      .on('tick', () => {
+        nodes = [...nodes]
+      })
+  }
+
+  onMount(() => {
+    fetchEntityTypes().then((types) => {
+      typeLayer = new Map(types.map((t) => [t.name, t.layer]))
+      // Re-derive the active node types now that layer membership is known.
+      activeNodeTypes = new Set(nodes.filter((n) => inLayer(n.type)).map((n) => n.type))
+    })
+    load()
+    const unsubscribe = subscribeEvents()
+    return () => {
+      unsubscribe()
+      sim?.stop()
+    }
+  })
+
+  onDestroy(() => sim?.stop())
+
+  // When the layer perspective changes, reset the node-type toggles to that layer.
+  $effect(() => {
+    layer
+    activeNodeTypes = new Set(nodes.filter((n) => inLayer(n.type)).map((n) => n.type))
+  })
+
+  $effect(() => {
+    const ev = $liveEvents[0]
+    if (!ev) return
+    if (ev.type.startsWith('entity.') || ev.type.startsWith('relationship.') || ev.type === 'health.changed') {
+      load()
+    }
+  })
+
+  // Toolbar-driven reload/reset — mirrors the old onchange={load} behavior:
+  // typing freely doesn't refetch, only a committed change (Enter/blur in the
+  // parent's inputs, or the Reset button) bumps the token.
+  let lastReloadToken = $state(0)
+  $effect(() => {
+    if (reloadToken !== lastReloadToken) {
+      lastReloadToken = reloadToken
+      load()
+    }
+  })
+
+  let lastResetToken = $state(0)
+  $effect(() => {
+    if (resetToken !== lastResetToken) {
+      lastResetToken = resetToken
+      view = { x: 0, y: 0, k: 1 }
+      load()
+    }
+  })
+
+  function selectNode(node: Node) {
+    onSelect(node.slug)
+  }
+
+  function rerootTo(node: Node) {
+    root = node.slug
+    load()
+  }
+
+  function nodeColor(node: Node): string {
+    const h = graph?.health?.[node.id]
+    return h ? healthColor[h] : '#58a6ff'
+  }
+
+  function nodeRadius(node: Node): number {
+    return 5 + Math.min(Math.sqrt(node.degree) * 1.6, 7)
+  }
+
+  // Only offer node-type toggles that live in the active layer.
+  const allNodeTypes = $derived(Array.from(new Set(nodes.filter((n) => inLayer(n.type)).map((n) => n.type))).sort())
+  const allRelTypes = $derived(Array.from(new Set(links.map((l) => l.type))).sort())
+
+  // Publish status/legend info up to the parent toolbar.
+  $effect(() => {
+    info = {
+      allNodeTypes,
+      allRelTypes,
+      relColors: relColorByType,
+      visibleCount: visibleNodeIds.size,
+      truncated: !!graph?.truncated,
+      zoomPct: Math.round(view.k * 100)
+    }
+  })
+
+  const matchedIds = $derived.by(() => {
+    if (!search.trim()) return null
+    const q = search.trim().toLowerCase()
+    return new Set(nodes.filter((n) => n.slug.toLowerCase().includes(q) || n.name.toLowerCase().includes(q)).map((n) => n.id))
+  })
+
+  // Visible = in the active layer AND its node-type toggle is on.
+  const visibleNodeIds = $derived(new Set(nodes.filter((n) => inLayer(n.type) && activeNodeTypes.has(n.type)).map((n) => n.id)))
+
+  const selectedId = $derived(nodes.find((n) => n.slug === selectedSlug)?.id ?? null)
+
+  const adjacency = $derived.by(() => {
+    const adj = new Map<string, Set<string>>()
+    for (const l of links) {
+      const s = endpointId(l.source)
+      const t = endpointId(l.target)
+      if (!adj.has(s)) adj.set(s, new Set())
+      if (!adj.has(t)) adj.set(t, new Set())
+      adj.get(s)!.add(t)
+      adj.get(t)!.add(s)
+    }
+    return adj
+  })
+
+  const focusIds = $derived.by(() => {
+    const focus = hoveredId ?? selectedId
+    if (!focus) return null
+    const set = new Set<string>([focus])
+    for (const n of adjacency.get(focus) ?? []) set.add(n)
+    return set
+  })
+
+  function nodeOpacity(node: Node): number {
+    if (matchedIds !== null) return matchedIds.has(node.id) ? 1 : 0.15
+    if (focusIds !== null) return focusIds.has(node.id) ? 1 : 0.15
+    return 1
+  }
+
+  function linkVisualState(link: Link): { opacity: number; emphasized: boolean } {
+    const s = endpointId(link.source)
+    const t = endpointId(link.target)
+    const focus = hoveredId ?? selectedId
+    if (focus && (s === focus || t === focus)) return { opacity: 0.95, emphasized: true }
+    if (focusIds !== null || matchedIds !== null) return { opacity: 0.08, emphasized: false }
+    return { opacity: 0.45, emphasized: false }
+  }
+
+  // ─── pan / zoom / drag ───────────────────────────────────────────────
+
+  function toViewBox(clientX: number, clientY: number): { x: number; y: number } {
+    const rect = svgEl!.getBoundingClientRect()
+    return {
+      x: ((clientX - rect.left) / rect.width) * width,
+      y: ((clientY - rect.top) / rect.height) * height
+    }
+  }
+
+  function toWorld(clientX: number, clientY: number): { x: number; y: number } {
+    const p = toViewBox(clientX, clientY)
+    return { x: (p.x - view.x) / view.k, y: (p.y - view.y) / view.k }
+  }
+
+  function onWheel(e: WheelEvent) {
+    e.preventDefault()
+    const factor = e.deltaY < 0 ? 1.18 : 1 / 1.18
+    const k = Math.min(6, Math.max(0.25, view.k * factor))
+    const p = toViewBox(e.clientX, e.clientY)
+    const wx = (p.x - view.x) / view.k
+    const wy = (p.y - view.y) / view.k
+    view = { k, x: p.x - wx * k, y: p.y - wy * k }
+  }
+
+  let panState = $state<{ startX: number; startY: number; viewX: number; viewY: number } | null>(null)
+  let dragState: { node: Node; moved: boolean } | null = null
+
+  function onBackgroundPointerDown(e: PointerEvent) {
+    if (dragState) return
+    ;(e.currentTarget as Element).setPointerCapture(e.pointerId)
+    const p = toViewBox(e.clientX, e.clientY)
+    panState = { startX: p.x, startY: p.y, viewX: view.x, viewY: view.y }
+  }
+
+  function onNodePointerDown(e: PointerEvent, node: Node) {
+    e.stopPropagation()
+    ;(e.currentTarget as Element).setPointerCapture(e.pointerId)
+    dragState = { node, moved: false }
+    sim?.alphaTarget(0.25).restart()
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (dragState) {
+      const w = toWorld(e.clientX, e.clientY)
+      dragState.node.fx = w.x
+      dragState.node.fy = w.y
+      dragState.moved = true
+      return
+    }
+    if (panState) {
+      const p = toViewBox(e.clientX, e.clientY)
+      view = { ...view, x: panState.viewX + (p.x - panState.startX), y: panState.viewY + (p.y - panState.startY) }
+    }
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    if (dragState) {
+      const { node, moved } = dragState
+      node.fx = null
+      node.fy = null
+      sim?.alphaTarget(0)
+      dragState = null
+      if (!moved) selectNode(node)
+      return
+    }
+    panState = null
+  }
+</script>
+
+{#if loading && !nodes.length}
+  <Skeleton class="h-full min-h-0" />
+{:else}
+  <div class="relative h-full min-h-0 overflow-hidden rounded-lg border bg-[radial-gradient(ellipse_at_center,rgba(88,166,255,0.04),transparent_70%)]">
+    <svg
+      bind:this={svgEl}
+      viewBox="0 0 {width} {height}"
+      class="h-full w-full touch-none {panState ? 'cursor-grabbing' : 'cursor-grab'}"
+      role="application"
+      aria-label="Entity graph"
+      onwheel={onWheel}
+      onpointerdown={onBackgroundPointerDown}
+      onpointermove={onPointerMove}
+      onpointerup={onPointerUp}
+      onpointercancel={onPointerUp}
+    >
+      <defs>
+        {#each allRelTypes as type}
+          <marker id={markerId(type)} viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto">
+            <path d="M0,-3.5L8,0L0,3.5" fill={relColor(type)} />
+          </marker>
+        {/each}
+      </defs>
+      <g transform="translate({view.x},{view.y}) scale({view.k})">
+        <g>
+          {#each links as link}
+            {@const s = endpoint(link.source)}
+            {@const t = endpoint(link.target)}
+            {#if s?.x != null && t?.x != null && s?.y != null && t?.y != null && activeRelTypes.has(link.type) && visibleNodeIds.has(s.id) && visibleNodeIds.has(t.id)}
+              {@const vs = linkVisualState(link)}
+              {@const dx = t.x - s.x}
+              {@const dy = t.y - s.y}
+              {@const len = Math.max(Math.hypot(dx, dy), 1)}
+              {@const tr = nodeRadius(t) + 3}
+              {@const ex = t.x - (dx / len) * tr}
+              {@const ey = t.y - (dy / len) * tr}
+              <line
+                x1={s.x}
+                y1={s.y}
+                x2={ex}
+                y2={ey}
+                stroke={relColor(link.type)}
+                stroke-width={vs.emphasized ? 2 : 1.2}
+                opacity={vs.opacity}
+                marker-end="url(#{markerId(link.type)})"
+              >
+                <title>{link.type}</title>
+              </line>
+              {#if vs.emphasized && view.k >= 0.7}
+                <text
+                  x={(s.x + ex) / 2}
+                  y={(s.y + ey) / 2 - 4}
+                  text-anchor="middle"
+                  font-size={10 / view.k}
+                  fill={relColor(link.type)}
+                  opacity="0.95"
+                  paint-order="stroke"
+                  stroke="var(--background)"
+                  stroke-width={3 / view.k}
+                >
+                  {link.type}
+                </text>
+              {/if}
+            {/if}
+          {/each}
+        </g>
+        <g>
+          {#each nodes as node (node.id)}
+            {#if node.x != null && node.y != null && visibleNodeIds.has(node.id)}
+              {@const r = nodeRadius(node)}
+              {@const op = nodeOpacity(node)}
+              {@const isFocus = hoveredId === node.id || selectedId === node.id}
+              {@const isMatch = matchedIds !== null && matchedIds.has(node.id)}
+              <g
+                transform="translate({node.x},{node.y})"
+                opacity={op}
+                class="cursor-pointer"
+                role="button"
+                tabindex="0"
+                onpointerdown={(e) => onNodePointerDown(e, node)}
+                onpointerenter={() => (hoveredId = node.id)}
+                onpointerleave={() => (hoveredId = null)}
+                onkeydown={(e) => e.key === 'Enter' && selectNode(node)}
+                ondblclick={() => rerootTo(node)}
+              >
+                {#if isFocus || isMatch}
+                  <circle r={r + 5} fill={nodeColor(node)} opacity="0.25" />
+                {/if}
+                <circle r={r} fill={nodeColor(node)} stroke={isFocus || isMatch ? '#e6edf3' : '#0d1117'} stroke-width={isFocus || isMatch ? 2 : 1.25} />
+                {#if view.k >= 0.8 || isFocus || isMatch || op === 1 && focusIds !== null}
+                  <text
+                    y={r + 12}
+                    text-anchor="middle"
+                    font-size={isFocus ? 12 / view.k : 10 / Math.max(view.k, 1)}
+                    fill={isFocus ? '#e6edf3' : '#8b949e'}
+                    paint-order="stroke"
+                    stroke="#0d1117"
+                    stroke-width={3 / view.k}
+                    class="pointer-events-none select-none"
+                  >
+                    {node.slug}
+                  </text>
+                {/if}
+              </g>
+            {/if}
+          {/each}
+        </g>
+      </g>
+    </svg>
+    <div class="pointer-events-none absolute bottom-2 left-2 rounded bg-background/80 px-2 py-1 text-[10px] text-muted-foreground">
+      scroll to zoom · drag background to pan · drag nodes · click to inspect · double-click to re-root
+    </div>
+  </div>
+{/if}

web/src/lib/components/EntitySheet.svelte

@@ -3,16 +3,26 @@
   import * as Sheet from '$lib/components/ui/sheet'
 
   let { slug, open = $bindable(false) }: { slug: string | null; open?: boolean } = $props()
+
+  // Lets a relation click inside the sheet drill into that entity in place,
+  // without closing/reopening. Resets to the externally-requested slug
+  // whenever the caller opens the sheet on a different entity.
+  let currentSlug = $state(slug)
+  $effect(() => {
+    currentSlug = slug
+  })
 </script>
 
 <Sheet.Root bind:open>
   <Sheet.Content side="right" class="w-full p-0 sm:max-w-2xl">
     <Sheet.Header class="sr-only">
-      <Sheet.Title>{slug ?? 'Entity detail'}</Sheet.Title>
+      <Sheet.Title>{currentSlug ?? 'Entity detail'}</Sheet.Title>
       <Sheet.Description>Entity detail panel</Sheet.Description>
     </Sheet.Header>
-    {#if slug}
-      <EntityDetailContent {slug} />
+    {#if currentSlug}
+      {#key currentSlug}
+        <EntityDetailContent slug={currentSlug} onSelectEntity={(s) => (currentSlug = s)} />
+      {/key}
     {/if}
   </Sheet.Content>
 </Sheet.Root>

web/src/lib/components/EntityTable.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import type { Entity, EntityHealth } from '$lib/api'
+  import { relativeTime } from '$lib/utils'
+  import * as Table from '$lib/components/ui/table'
+  import { Badge } from '$lib/components/ui/badge'
+  import { Skeleton } from '$lib/components/ui/skeleton'
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
+  import ArrowDownIcon from '@lucide/svelte/icons/arrow-down'
+  import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down'
+
+  let {
+    entities,
+    loading,
+    selectedSlug = null,
+    onSelect
+  }: {
+    entities: Entity[]
+    loading: boolean
+    selectedSlug?: string | null
+    onSelect: (slug: string) => void
+  } = $props()
+
+  type SortKey = 'slug' | 'type' | 'name' | 'state' | 'health'
+  let sortKey = $state<SortKey>('slug')
+  let sortDir = $state<'asc' | 'desc'>('asc')
+
+  function sortBy(key: SortKey) {
+    if (sortKey === key) {
+      sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+    } else {
+      sortKey = key
+      sortDir = 'asc'
+    }
+  }
+
+  const healthRank: Record<EntityHealth, number> = { down: 0, degraded: 1, stale: 2, unknown: 3, healthy: 4 }
+
+  function sortValue(entity: Entity, key: SortKey): string | number {
+    if (key === 'health') return entity.health ? healthRank[entity.health] : -1
+    return (entity[key] ?? '').toString().toLowerCase()
+  }
+
+  const sortedEntities = $derived.by(() => {
+    const sorted = [...entities].sort((a, b) => {
+      const av = sortValue(a, sortKey)
+      const bv = sortValue(b, sortKey)
+      if (av < bv) return -1
+      if (av > bv) return 1
+      return 0
+    })
+    if (sortDir === 'desc') sorted.reverse()
+    return sorted
+  })
+
+  function stateVariant(state?: string | null): 'default' | 'secondary' | 'outline' {
+    if (!state) return 'outline'
+    if (state === 'active' || state === 'healthy') return 'default'
+    return 'secondary'
+  }
+
+  const healthDot: Record<EntityHealth, string> = {
+    healthy: 'bg-success',
+    degraded: 'bg-warning',
+    down: 'bg-destructive',
+    stale: 'bg-warning/50',
+    unknown: 'bg-muted-foreground/40'
+  }
+
+  function healthTitle(entity: Entity): string {
+    if (!entity.health) return 'not monitored'
+    if (entity.health === 'stale') return `stale — last checked ${relativeTime(entity.last_check_at)}`
+    return `${entity.health} — checked ${relativeTime(entity.last_check_at)}`
+  }
+
+  // Widths vary per row so the skeleton reads as text, not a stack of identical bars.
+  const skeletonSlugWidths = ['w-24', 'w-20', 'w-28', 'w-16', 'w-24', 'w-20', 'w-28', 'w-16']
+  const skeletonNameWidths = ['w-32', 'w-40', 'w-24', 'w-36', 'w-28', 'w-40', 'w-24', 'w-32']
+</script>
+
+{#if loading}
+  <div class="h-full min-h-0 overflow-hidden rounded-md border">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Slug</Table.Head>
+          <Table.Head>Type</Table.Head>
+          <Table.Head>Name</Table.Head>
+          <Table.Head>State</Table.Head>
+          <Table.Head>Health</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each skeletonSlugWidths as slugWidth, i}
+          <Table.Row class="hover:bg-transparent">
+            <Table.Cell><Skeleton class="h-4 {slugWidth}" /></Table.Cell>
+            <Table.Cell><Skeleton class="h-5 w-16 rounded-full" /></Table.Cell>
+            <Table.Cell><Skeleton class="h-4 {skeletonNameWidths[i]}" /></Table.Cell>
+            <Table.Cell><Skeleton class="h-5 w-14 rounded-full" /></Table.Cell>
+            <Table.Cell>
+              <div class="flex items-center gap-1.5">
+                <Skeleton class="size-2 shrink-0 rounded-full" />
+                <Skeleton class="h-4 w-12" />
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+{:else}
+  {#snippet sortHead(key: SortKey, label: string)}
+    <Table.Head>
+      <button type="button" class="flex items-center gap-1 hover:text-foreground" onclick={() => sortBy(key)}>
+        {label}
+        {#if sortKey === key}
+          {#if sortDir === 'asc'}
+            <ArrowUpIcon class="size-3" />
+          {:else}
+            <ArrowDownIcon class="size-3" />
+          {/if}
+        {:else}
+          <ArrowUpDownIcon class="size-3 text-muted-foreground/50" />
+        {/if}
+      </button>
+    </Table.Head>
+  {/snippet}
+  <div class="h-full min-h-0 overflow-auto rounded-md border">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          {@render sortHead('slug', 'Slug')}
+          {@render sortHead('type', 'Type')}
+          {@render sortHead('name', 'Name')}
+          {@render sortHead('state', 'State')}
+          {@render sortHead('health', 'Health')}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each sortedEntities as entity (entity.id)}
+          <Table.Row
+            class="cursor-pointer {entity.slug === selectedSlug ? 'bg-muted' : ''}"
+            role="button"
+            tabindex={0}
+            onclick={() => onSelect(entity.slug)}
+            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(entity.slug) } }}
+          >
+            <Table.Cell class="font-mono text-xs">{entity.slug}</Table.Cell>
+            <Table.Cell><Badge variant="outline">{entity.type}</Badge></Table.Cell>
+            <Table.Cell>{entity.name}</Table.Cell>
+            <Table.Cell>
+              {#if entity.state}
+                <Badge variant={stateVariant(entity.state)}>{entity.state}</Badge>
+              {:else}
+                <span class="text-muted-foreground">—</span>
+              {/if}
+            </Table.Cell>
+            <Table.Cell>
+              {#if entity.health}
+                <span class="flex items-center gap-1.5 text-xs" title={healthTitle(entity)}>
+                  <span class="size-2 shrink-0 rounded-full {healthDot[entity.health]}"></span>
+                  <span class="text-muted-foreground">{relativeTime(entity.last_check_at)}</span>
+                </span>
+              {:else}
+                <span class="text-xs text-muted-foreground">—</span>
+              {/if}
+            </Table.Cell>
+          </Table.Row>
+        {:else}
+          <Table.Row>
+            <Table.Cell colspan={5} class="text-center text-muted-foreground"
+              >No entities in this layer match the filter.</Table.Cell
+            >
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+{/if}