Fleet Panel: SVG topology graph with clickable nodes

[jeonghun-jj-lee]

Important

Approach

Render an interactive SVG star-topology graph in the Fleet Panel's topology section.
Canonical server node at center, client nodes around it, connection lines between them.
Solid lines = connected, dotted = configured-but-offline. Nodes are clickable with
detail popovers. Extension host pushes node status via postMessage on a 10s health
probe timer + on fleet record changes.

---

Acceptance Criteria

• SVG graph renders in the topology section of the Fleet Panel
• Canonical server node positioned centrally, labeled with hostname
• Client nodes positioned around server (evenly spaced for N clients)
• Solid lines between connected nodes (tunnel up, recent heartbeat)
• Dotted lines between configured-but-offline nodes (known but unreachable)
• Node badges: healthy (green outline), degraded (yellow), unreachable (red)
• "This machine" marker on the node representing the current machine
• Standalone mode: single node, no edges, "Standalone — all local" label
• Click a node → popover appears showing: hostname, last-seen timestamp,
  health check results (guard/tunnel/settings), active session count on that node
• Extension host pushes {type:"topology", nodes:[...], edges:[...]} messages
  to the webview on: fleet record change (fs.watch), health probe tick (10s interval)
• Graph re-renders reactively on each topology message (no full DOM rebuild —
  update attributes on existing SVG elements)

---

Testing Decisions

• Unit test: fleet_topology.test.ts — given a topology message with N nodes and
  edges, the SVG builder produces correct element count, line styles (solid/dotted),
  node positions, and badge colors
• Unit test: popover content renders correct data from a node status payload
• Integration: postMessage round-trip — host sends topology → webview renders → verify
  DOM structure

---

Key Decisions

Decision	Rationale
Hand-positioned SVG (no layout library)	Fleet is always star topology with small N; d3/dagre is overkill
10s health probe interval	Balances responsiveness with CPU cost; session-lifecycle events are immediate via fs.watch
Attribute updates (not full rebuild)	SVG elements are stable (add/remove on topology change, update attrs on status change)

---

Constraints & Invariants

• SVG MUST use CSS custom properties from the host theme (--amc-success, --amc-warning,
  --amc-danger for node badges; --amc-border for lines; --amc-text for labels)
• Popover positioned relative to the clicked node; dismissed on click-outside or Escape
• Maximum tested node count: 10 (star topology, not a layout problem at this scale)

---

Source

Part of #350
Blocked by #352
ADR 0007: docs/adr/0007-fleet-panel-and-profile-ui.md