Omar SobhandClaude Opus 4.8
39bacbd1d2
Replaces the static React-Flow world forest with a real-time WebGL view of the swarm working, plus the live event contract that feeds it. Phase A — the live contract + feed: - frontend/src/lib/live/taxonomy.ts — the 13-event Clawmates Event Taxonomy as typed TS (the shared World/Observe contract). - frontend/src/lib/live/useClawmatesLive.ts — native shared-singleton live client (EventSource to /api/world/live, typed fan-out, replay-of-last-state to late subscribers, refcounted, synthetic fallback so views are always alive). - crates/cm-api/src/routes/world.rs — GET /api/world/live, authed + workspace- scoped SSE emitting the taxonomy (real agent.status from live-container state, a topology.update of the workspace's agents, telemetry with real doorsPending), mirroring run_events_sse. normalize() seam documented for run_events->world.touch. Phase B — the WebGL engine: - frontend/src/components/world/engine.ts — Gource-inspired force-directed model: org/company/team tree (sibling repulsion + parent spring + friction), agent pawns that converge on the touched node and beam it, world nodes that glow with heat and fade when idle. Framework-agnostic (renderer-independent) state+math. - frontend/src/components/world/WorldCanvas.tsx — three.js scene (ortho cam, UnrealBloom), render loop syncing engine state, camera auto-fit, HTML labels, raycast click->select, Hierarchy/Flat/Live formation switch. - Dashboard.tsx: swap <WorldFlow/> -> <WorldCanvas/> at the world-tier seam (shared claw-tier pieces untouched; WorldFlow.tsx kept for now). - Adds three (+ @types/three). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Clawmates Visualization Layer — install package
A seamless, self-contained drop for a Linux node. It serves the three Clawmates visualizations and feeds them live from the durable runner.
handoff/
├── AGENT_HANDOFF.md ← READ THIS FIRST. Deep setup + real-time wiring guide for the agent.
├── install.sh ← one-shot installer (idempotent)
├── .env.example ← copy → .env, edit for live mode
├── visualizations/ ← the UI (open directly in a browser, no build step)
│ ├── Clawmates World.dc.html · Large World: Hierarchy · Flat · Live (Gource) formations
│ ├── Clawmates Observe.dc.html · Agent close-up + System mission-control
│ ├── Clawmates Dashboard.dc.html · Tiered admin: org→company→team→claw + topology morph
│ └── support.js · the .dc.html runtime (required next to the html)
└── realtime/ ← the live bridge (dependency-free Node ≥20)
├── server.mjs · demo + live SSE bridge
├── clawmates-live.js · browser client adapter (window.ClawmatesLive)
├── events.schema.json · the Clawmates Event Taxonomy (JSON Schema)
└── package.json
60-second start (demo, no backend)
chmod +x install.sh && ./install.sh
(cd realtime && CLAWMATES_MODE=demo node server.mjs) &
caddy file-server --root ./visualizations --listen :8080 # or: npx serve ./visualizations -l 8080
Open http://localhost:8080/Clawmates%20World.dc.html?live=http://localhost:8420/live, switch to the Live formation, and watch the agents converge on real events from the bridge.
Then read AGENT_HANDOFF.md to wire it to cm-api for production.