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]>
35 lines
1.8 KiB
Markdown
35 lines
1.8 KiB
Markdown
# 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)
|
|
|
|
```bash
|
|
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.
|