feat(web): redesign Overview as the homepage with a living graph backdrop

Overview replaces Tasks as the default route: a centered new-task entry
with live fleet metrics, a scrollable/filterable task table, and an
ambient canvas rendering of the real entity graph (autonomous camera
drift + mouse parallax) behind it. Tasks sidebar entry is removed;
its status-bucketing logic moves to lib/tasks.ts for reuse.

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

web/src/lib/components/GraphBackground.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, type Simulation } from 'd3-force'
+  import { fetchGraph, type Health } from '$lib/api'
+  import { mode } from 'mode-watcher'
+
+  // Ambient, non-interactive knowledge-graph backdrop. Purely decorative: the
+  // host places this behind the page with pointer-events:none, so it never
+  // steals clicks. The "alive" feeling comes entirely from the camera (slow
+  // autonomous drift + mouse parallax + per-node depth), NOT from a live force
+  // sim — we warm the layout up once, freeze it, then just pan a static field.
+
+  interface SimNode {
+    id: string
+    slug: string
+    degree: number
+    z: number // depth in [0,1] for parallax
+    x?: number
+    y?: number
+    fx?: number | null
+    fy?: number | null
+  }
+  interface SimLink {
+    source: string | SimNode
+    target: string | SimNode
+  }
+
+  let host = $state<HTMLDivElement | null>(null)
+  let canvas = $state<HTMLCanvasElement | null>(null)
+
+  let nodes: SimNode[] = []
+  let links: SimLink[] = []
+  let health: Record<string, Health> = {}
+
+  // World bounds the layout is centered in; camera pans within.
+  const WORLD = 1400
+  const MAX_NODES = 260
+
+  const healthColor: Record<Health, string> = {
+    healthy: '#3fb950',
+    degraded: '#d29922',
+    down: '#f85149',
+    unknown: '#8b949e'
+  }
+
+  function nodeRadius(n: SimNode): number {
+    return 3 + Math.min(Math.sqrt(n.degree) * 1.4, 7)
+  }
+
+  async function loadGraph() {
+    const graph = await fetchGraph({ depth: 3, includeStatus: true })
+    if (!graph) return
+    health = graph.health ?? {}
+
+    // degree by id, edges reference slugs
+    const idBySlug = new Map(graph.nodes.map((n) => [n.slug, n.id]))
+    const degree = new Map<string, number>()
+    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)
+    }
+
+    let all: SimNode[] = graph.nodes.map((n) => ({
+      id: n.id,
+      slug: n.slug,
+      degree: degree.get(n.id) ?? 0,
+      z: Math.random()
+    }))
+    // Cap to the most-connected nodes so large graphs stay cheap.
+    if (all.length > MAX_NODES) {
+      all = [...all].sort((a, b) => b.degree - a.degree).slice(0, MAX_NODES)
+    }
+    const keep = new Set(all.map((n) => n.id))
+    nodes = all
+    links = graph.edges
+      .map((e) => ({ source: idBySlug.get(e.source) ?? e.source, target: idBySlug.get(e.target) ?? e.target }))
+      .filter((l) => keep.has(l.source as string) && keep.has(l.target as string))
+
+    warmUpLayout()
+  }
+
+  // Run the sim to a settled state without rendering each tick, then freeze.
+  function warmUpLayout() {
+    const sim: Simulation<SimNode, SimLink> = forceSimulation(nodes)
+      .force('link', forceLink<SimNode, SimLink>(links).id((n) => n.id).distance(60).strength(0.5))
+      .force('charge', forceManyBody().strength(-140).distanceMax(360))
+      .force('center', forceCenter(0, 0))
+      .force('collide', forceCollide<SimNode>((n) => nodeRadius(n) + 6))
+      .stop()
+    const ticks = Math.min(400, Math.max(120, nodes.length * 2))
+    for (let i = 0; i < ticks; i++) sim.tick()
+    sim.stop()
+  }
+
+  // ─── camera + render loop ───────────────────────────────────────────────
+
+  let cam = { x: 0, y: 0 } // eased mouse-parallax offset
+  let targetCam = { x: 0, y: 0 }
+  let timer: ReturnType<typeof setTimeout> | 0 = 0
+  let dpr = 1
+  let w = 0
+  let h = 0
+
+  function onPointerMove(e: PointerEvent) {
+    if (!host) return
+    const rect = host.getBoundingClientRect()
+    const nx = (e.clientX - rect.left) / rect.width - 0.5 // -0.5..0.5
+    const ny = (e.clientY - rect.top) / rect.height - 0.5
+    targetCam = { x: -nx * 90, y: -ny * 90 } // small parallax nudge
+  }
+
+  function resize() {
+    if (!host || !canvas) return
+    dpr = Math.min(window.devicePixelRatio || 1, 2)
+    w = host.clientWidth
+    h = host.clientHeight
+    canvas.width = Math.round(w * dpr)
+    canvas.height = Math.round(h * dpr)
+  }
+
+  function colorForNode(n: SimNode): string {
+    return healthColor[health[n.id] ?? 'unknown']
+  }
+
+  // Driven by setTimeout rather than requestAnimationFrame: some embedding
+  // contexts (iframed previews, backgrounded-but-visible panes) report
+  // document.hidden = true and browsers fully suspend rAF callbacks there,
+  // which would freeze this canvas forever. setTimeout keeps ticking
+  // regardless, and ~30fps is plenty for a slow ambient drift.
+  function draw(t: number) {
+    timer = setTimeout(() => draw(performance.now()), 33)
+    if (!canvas) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    // ease parallax toward target
+    cam.x += (targetCam.x - cam.x) * 0.05
+    cam.y += (targetCam.y - cam.y) * 0.05
+
+    // autonomous drift (Lissajous pan + breathing zoom)
+    const ts = t / 1000
+    const driftX = Math.sin(ts * 0.05) * 70 + Math.sin(ts * 0.017) * 40
+    const driftY = Math.cos(ts * 0.043) * 60 + Math.sin(ts * 0.023) * 30
+    const zoom = 0.82 + Math.sin(ts * 0.03) * 0.03
+
+    const dark = mode.current !== 'light'
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    ctx.clearRect(0, 0, w, h)
+
+    const cx = w / 2
+    const cy = h / 2
+
+    // project a world point to screen, applying per-depth parallax
+    function project(px: number, py: number, z: number) {
+      const par = 0.5 + z // nearer nodes (higher z) move more
+      const ox = (driftX + cam.x) * par
+      const oy = (driftY + cam.y) * par
+      return { x: cx + (px + ox) * zoom, y: cy + (py + oy) * zoom }
+    }
+
+    // edges
+    ctx.lineWidth = 1
+    ctx.strokeStyle = dark ? 'rgba(140,175,230,0.28)' : 'rgba(60,90,140,0.22)'
+    ctx.beginPath()
+    for (const l of links) {
+      const s = l.source as SimNode
+      const tg = l.target as SimNode
+      if (s.x == null || tg.x == null) continue
+      const z = (s.z + tg.z) / 2
+      const a = project(s.x, s.y!, z)
+      const b = project(tg.x, tg.y!, z)
+      ctx.moveTo(a.x, a.y)
+      ctx.lineTo(b.x, b.y)
+    }
+    ctx.stroke()
+
+    // nodes (glow via radial gradient, cheap enough at this count)
+    for (const n of nodes) {
+      if (n.x == null || n.y == null) continue
+      const p = project(n.x, n.y, n.z)
+      const r = nodeRadius(n) * zoom * (0.7 + n.z * 0.6)
+      const col = colorForNode(n)
+      const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 3.2)
+      glow.addColorStop(0, hexA(col, dark ? 0.45 : 0.32))
+      glow.addColorStop(1, hexA(col, 0))
+      ctx.fillStyle = glow
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, r * 3.2, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.fillStyle = hexA(col, dark ? 0.7 : 0.55)
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, r, 0, Math.PI * 2)
+      ctx.fill()
+    }
+
+    // legibility scrim: dim only the center band where the UI sits, taper to
+    // ~nothing at the edges so the graph (and its connections) stay visible
+    // in the margins instead of being crushed everywhere equally.
+    const scrim = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.hypot(cx, cy))
+    const base = dark ? '13,17,23' : '255,255,255'
+    scrim.addColorStop(0, `rgba(${base},0.68)`)
+    scrim.addColorStop(0.45, `rgba(${base},0.32)`)
+    scrim.addColorStop(1, `rgba(${base},0.02)`)
+    ctx.fillStyle = scrim
+    ctx.fillRect(0, 0, w, h)
+  }
+
+  // "#rrggbb" + alpha -> rgba()
+  function hexA(hex: string, a: number): string {
+    const n = parseInt(hex.slice(1), 16)
+    return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`
+  }
+
+  onMount(() => {
+    loadGraph()
+    resize()
+    const ro = new ResizeObserver(resize)
+    if (host) ro.observe(host)
+    window.addEventListener('pointermove', onPointerMove)
+    timer = setTimeout(() => draw(performance.now()), 33)
+    return () => {
+      clearTimeout(timer)
+      ro.disconnect()
+      window.removeEventListener('pointermove', onPointerMove)
+    }
+  })
+</script>
+
+<div bind:this={host} class="pointer-events-none absolute inset-0 overflow-hidden">
+  <canvas bind:this={canvas} class="h-full w-full"></canvas>
+</div>