# Clawmates Frontend — handoff package

Every Clawmates screen as a self-contained HTML file, plus a dependency-free real-time bridge that
makes them update live from the durable runner. No build step to view the screens.

```
handoff/
├── IMPLEMENTATION.md         ← READ THIS FIRST. Per-screen guide + full wiring to cm-api.
├── install.sh                ← one-shot installer (idempotent)
├── .env.example              ← copy → .env, edit for live mode
├── screens/                  ← the UI (open directly in a browser, no build step)
│   ├── Clawmates World.dc.html          · Large World: Hierarchy · Flat · Live (Gource)
│   ├── Clawmates Observe.dc.html        · Agent close-up + System mission-control
│   ├── Clawmates Dashboard.dc.html      · Tiered admin: org→company→team→claw + topology morph
│   ├── Clawmates Infrastructure.dc.html · Local & Tailscale first, then Cloud providers
│   ├── Clawmates Auth.dc.html           · Clerk-style sign-in / sign-up (Google · Apple · GitHub)
│   ├── Clawmates Landing.dc.html        · Marketing page
│   └── support.js                       · the .dc.html runtime (keep 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 (the contract)
```

## 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 ./screens --listen :8080      # or: npx serve ./screens -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 events from the bridge.

Then read **IMPLEMENTATION.md** for the per-screen integration seams, the event taxonomy, the
Infrastructure (Tailscale + daemon + cloud) wiring, and the cm-api hookup.