Skip to content

UX: add AgentTopologyMap — interactive SVG topology visualization M2 (#313)#90

Merged
dgarson merged 1 commit intofeat/horizon-ui-completefrom
wes/horizon-m2-topology-map
Feb 23, 2026
Merged

UX: add AgentTopologyMap — interactive SVG topology visualization M2 (#313)#90
dgarson merged 1 commit intofeat/horizon-ui-completefrom
wes/horizon-m2-topology-map

Conversation

@dgarson
Copy link
Owner

@dgarson dgarson commented Feb 23, 2026

Summary

Adds AgentTopologyMap.tsx — Horizon M2 View openclaw#313: Agent Relationship Topology.

New Component: AgentTopologyMap.tsx

  • Pure SVG + React state — zero external graph libs (no d3, no react-flow)
  • Static concentric layout (deterministic, no physics): principals ring (r=210), crons inner ring (r=115), workers clustered near spawner (r=65)
  • Node types: Principal (violet circle, r=28), Worker (blue circle, r=17), Cron (amber rotated-rect diamond)
  • Edges: indigo lines for spawn edges, amber dashed lines for cron connections
  • Interactions: click-to-inspect detail panel (280px), hover scale animation via CSS transform
  • Selected node glow: SVG filter with feGaussianBlur + violet feFlood
  • Toolbar: title, 4-type legend, session count badge, Live/Paused toggle, Reset View
  • Detail panel: agent name, session type, model, token count, active/idle status, last message preview, token load bar

Mock Data

  • 6 principal agents: Luis, Xavier, Amadeus, Tim, Merlin, Julia
  • 4 active workers (subagents from Luis): reed-view-290, piper-view-288, quinn-horizon-m1, wes-topology
  • 2 cron nodes: Julia Org Health Check, Xavier Instruction Triage
  • Edges: Luis→workers (×4), Julia→cron1, Xavier→cron2

Pre-existing Build Fixes (0 TS errors required)

Also fixed pre-existing TypeScript errors on feat/horizon-ui-complete to get a clean build:

  • AgentOutputDiffViewer: removed invalid lucide icons + syntax error
  • APICredentialHealthDashboard: fixed Badge/Alert variants, removed unsupported indicatorClassName prop
  • AgentSkillHeatmap, AgentSoulEditor, DiscoveryRunReplayControls, FindingTrendChart, ModelComparisonMatrix: pre-existing type fixes
  • Added missing ui/alert, ui/badge, ui/card, ui/progress components

Build

✓ 1865 modules transformed. 0 TS errors.

Closes openclaw#313

…penclaw#313)

- New AgentTopologyMap.tsx: pure SVG + React state, no external graph libs
- Static concentric layout: principals (r=210), crons (r=115), workers (r=65 from spawner)
- Node types: Principal (violet circle), Worker (blue circle), Cron (amber diamond)
- Interactive: click-to-inspect detail panel (280px), hover scale effect
- Toolbar: Live/Paused toggle, Reset View, session count badge, legend
- Mock data: 6 principals, 4 workers (from Luis), 2 crons
- Also fix pre-existing TS build errors to get 0-error build:
  - AgentOutputDiffViewer: remove invalid lucide icons + syntax error
  - APICredentialHealthDashboard: fix Badge/Alert variants, remove indicatorClassName
  - AgentSkillHeatmap, AgentSoulEditor, DiscoveryRunReplayControls,
    FindingTrendChart, ModelComparisonMatrix: pre-existing fixes
  - Add missing ui/alert badge card progress components
@dgarson dgarson force-pushed the wes/horizon-m2-topology-map branch from edff9e9 to 43093a9 Compare February 23, 2026 08:06
@dgarson dgarson merged commit bd91ae6 into feat/horizon-ui-complete Feb 23, 2026
1 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant