@claudecollab/cli 0.1.0 → 0.1.1

package/README.md

@@ -1,53 +1,28 @@
-# claude-share
+# ✦ claudecollab
 
-**Make your Claude Code session multiplayer.** You run one command. Friends open a link — no install — and drive the same Claude with you: live cursors, shared drafts, a visible queue, roles.
+**Multiplayer for your Claude Code session.** You run one command. Friends open a link — no install — and drive the same Claude with you: live cursors, shared drafts, a visible queue, roles.
 
 Think **screen-share where they can type too**.
 
+<!-- demo gif goes here once captured: docs/demo.gif (host shares a session; a guest joins from a browser and types into the same Claude) -->
+
 ```mermaid
 flowchart LR
-    H["you (host)<br/>terminal runs Claude"] <--> R["relay<br/>forwards bytes, stores nothing"]
+    H["you (host)<br/>terminal runs Claude"] <--> R["relay<br/>forwards bytes, nothing to disk"]
     R <--> HT["your host tab<br/>(admit · roles · pause · end)"]
     R <--> G["friends' browsers"]
 ```
 
 Your terminal stays plain Claude plus one status line. Everything multiplayer happens in the browser.
 
-## Run it locally
-
-```bash
-npm install
-```
-
-**Terminal 1 — relay:**
-
-```bash
-node packages/relay/bin/serve.js
-```
-
-**Terminal 2 — host:**
+## Host a session
 
 ```bash
-node packages/cli/bin/claude-share.js --relay ssh://127.0.0.1:2222
+npm install -g @claudecollab/cli
+collab
 ```
 
-Open the link from the status line — that's your host tab. The invite link is on your clipboard.
-
-## Deploy the relay (permanent links)
-
-```bash
-fly launch --no-deploy      # keep the provided fly.toml
-fly secrets set HOST_KEY="$(node packages/relay/bin/serve.js --make-key)"
-fly secrets set ROOM_SECRET="$(openssl rand -hex 16)"
-fly deploy
-```
-
-Then host with `--relay ssh://your-app.fly.dev:2222`. Links print your public https origin automatically.
-
-Two protections kick in on a deployed relay:
-
-- **Room secret** — with `ROOM_SECRET` set, only hosts that present it (`CLAUDE_SHARE_SECRET` env or `--secret`) can create rooms; strangers who find your relay can't. Guests are unaffected — they enter with a room link.
-- **Identity pinning** — the CLI pins the relay's ssh key fingerprint on first connect (like ssh's `known_hosts`) and refuses to connect if it ever changes, so nobody can impersonate your relay. The relay prints its fingerprint at boot; pass it as `--fingerprint SHA256:…` to pin explicitly. Loopback relays are exempt (dev relays regenerate keys).
+That's it. `collab` wraps your normal `claude` and prints your room link on the status line — that's **your** tab (admit people, manage roles). The invite link lands on your clipboard — that's the one you share. Friends need nothing but a browser.
 
 ## Two links — don't mix them up
 
@@ -58,9 +33,7 @@ Two protections kick in on a deployed relay:
 
 The Invite button and your clipboard always hold the safe one.
 
-Want a lock in front of the knock? Host with `--room-password <pw>` — guests must
-enter it (browser field / ssh prompt) before their request ever reaches you.
-Admitting stays your call either way.
+Want a lock in front of the knock? Host with `collab --room-password <pw>` — guests must enter it before their request ever reaches you. Admitting stays your call either way.
 
 ## Roles
 
@@ -76,16 +49,54 @@ Admitting stays your call either way.
 - **+ draft** (or double-click) opens a floating glass box. Everyone's caret shows; Enter sends; Esc steps out; drag ⠿ to move, ◢ to resize, ✕ to delete.
 - Sent while Claude is busy? It waits in the **queue** chip — edit or delete before it fires.
 - Scroll the mirror like a real terminal. Scrolling is shared — one screen for everyone.
-- Reloaded guests glide straight back in. Kicked guests are out for good.
+- Reloaded guests glide straight back in. Kicked guests lose the room; a room password (below) is the real lock if you need one.
 
 ## The one thing to really understand
 
 A guest prompt **runs on your machine, as you**. Admitting someone = trusting them with your Claude under the current mode. The relay sees your screen — treat a room like a screen-share, not a vault. You have **Pause** and **End** (with an optional `session.md` receipt).
 
-## Tests
+## Self-host the relay
+
+`collab` defaults to the community relay at claudecollab.org. Rather run your own? The same package ships the server:
+
+```bash
+collab-relay                              # local: ssh :2222 · web :8787
+collab --relay ssh://127.0.0.1:2222       # host through it
+```
+
+For a permanent public relay (Fly.io, any VPS — see `fly.toml` in this repo):
+
+```bash
+fly launch --no-deploy
+fly secrets set HOST_KEY="$(collab-relay --make-key)"
+fly secrets set ROOM_SECRET="$(openssl rand -hex 16)"   # optional: gate room creation
+fly deploy
+```
+
+Two protections are built in:
+
+- **Room secret** — with `ROOM_SECRET` set, only hosts that present it (`CLAUDE_SHARE_SECRET` env or `--secret`) can create rooms. Guests are unaffected — they enter with a room link.
+- **Identity pinning** — the CLI pins the relay's ssh key fingerprint on first connect (like ssh's `known_hosts`) and refuses to connect if it ever changes. The relay prints its fingerprint at boot; pin explicitly with `--fingerprint SHA256:…`.
+
+## Flags
+
+| Flag | What it does |
+|---|---|
+| `--relay <url>` | relay to use (`ssh://host:port`); default is the community relay |
+| `--no-relay` | solo mode — no room, no relay, just Claude with the band |
+| `--room-password <pw>` | guests must present this before they can knock |
+| `--guests <role>` | role given to newly admitted guests (default `prompter`) |
+| `--secret <s>` | room-creation credential for a `ROOM_SECRET`-gated relay (or `CLAUDE_SHARE_SECRET` env) |
+| `--fingerprint <fp>` | pin the relay's ssh key explicitly (default: trust-on-first-use) |
+| `--cmd <program>` | wrap something other than `claude` |
+| `-- <args…>` | everything after `--` passes through to the wrapped program |
+
+## Develop
 
 ```bash
-npm test
+npm install
+npm test           # full suite: protocol, relay, brain, e2e
+scripts/rig.sh     # local relay + host wrapping a fake claude (UI work)
 ```
 
 <details>
@@ -102,8 +113,12 @@ test/              end-to-end: host + host tab + guest on localhost
 
 - The CLI wraps Claude in a PTY one row short — the bottom row is the status line.
 - State (busy/idle/ask) comes from injected Claude Code hooks, never screen-scraping. Ambiguity fails closed.
-- The relay stores nothing: kill it and the host reconnects; kill the host and the room is over.
+- The relay persists nothing to disk — rooms, names, and any room password live only in process memory (kill it and the host reconnects; kill the host and the room is over). It does relay your screen bytes in transit, so treat it like a screen-share, not a vault — or self-host your own.
 
 </details>
 
-**TL;DR:** relay up → `claude-share` → open your link, share the invite. Guests need nothing. Roles keep control; prompts are real — admit people you trust.
+## License
+
+[MIT](LICENSE). claudecollab is an independent open-source project — not affiliated with or endorsed by Anthropic. *Claude* is a trademark of Anthropic, PBC; this tool wraps the official Claude Code client you already have installed.
+
+**TL;DR:** `npm i -g @claudecollab/cli` → `collab` → share the invite link. Guests need nothing. Roles keep control; prompts are real — admit people you trust.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudecollab/cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/packages/cli/bin/claude-share.js

@@ -119,9 +119,38 @@ async function main() {
   const BAND_ROWS = 1;
   const multiplayer = opts.relay; // the guest composer/gate + mirror are active only when sharing
   // The host's browser tab authenticates with this token: it knocks with fingerprint
-  // `webhost:<token>`, and the brain auto-admits it as host (the one knock answered
-  // with no host already present). The token also goes in the room URL we print/copy.
+  // `webhost:<token>:<seat>`, and the brain auto-admits it as host. The token goes in
+  // the room URL we print/copy; the SEAT does not — the browser mints it locally, so
+  // possessing the (leak-prone) URL is not enough to take the host seat.
   const hostToken = randomBytes(16).toString('hex');
+  const HOST_FP_PREFIX = `webhost:${hostToken}`;
+  // The seat this session is bound to: the first host browser's seat secret claims
+  // it; later browsers presenting the token with a different/absent seat are refused
+  // (leaked-link defense). Reset by a host-terminal Ctrl-G handoff (see below).
+  let boundSeat = null;
+  // Parse a knock fingerprint: null ⇒ not a host tab; '' ⇒ host token but NO seat
+  // (a raw link opened without our client, or a forgery) ⇒ refused; else the seat.
+  const hostSeatOf = (fp) => {
+    if (typeof fp !== 'string' || !fp.startsWith(HOST_FP_PREFIX)) return null;
+    const rest = fp.slice(HOST_FP_PREFIX.length);
+    return rest.startsWith(':') ? rest.slice(1) : '';
+  };
+  // Is this fingerprint the bound host tab (or the first to claim the empty seat)?
+  const isBoundHost = (fp) => {
+    const seat = hostSeatOf(fp);
+    return seat !== null && seat !== '' && seat === boundSeat;
+  };
+  // Handoff window: after a mismatched host attempt is refused, pressing Ctrl-G in
+  // the host TERMINAL (which no remote participant can reach) releases the seat so
+  // the next device claims it. Armed briefly and only then; zero interception else.
+  let handoffTimer = null;
+  const armHandoff = () => {
+    clearTimeout(handoffTimer);
+    handoffTimer = setTimeout(() => {
+      handoffTimer = null;
+    }, 60_000);
+    handoffTimer.unref?.();
+  };
   // The current live Claude screen, cached so a joiner sees it instantly (finding 1).
   const snapshot = new ScreenSnapshot();
 
@@ -192,7 +221,10 @@ async function main() {
   } catch (err) {
     process.stderr.write(
       `collab: could not start "${opts.cmd}": ${err.message}\n` +
-        'If this is a native-module error, run `npm rebuild node-pty` where this package is installed.\n',
+        'A "posix_spawnp failed" here usually means node-pty\'s spawn-helper lost its execute bit\n' +
+          '(package managers that skip install scripts do this). Fix:\n' +
+          '  chmod +x "$(npm root -g)/@claudecollab/cli/node_modules/node-pty/prebuilds/"*/spawn-helper\n' +
+          'Otherwise check that the wrapped command exists on your PATH.\n',
     );
     process.exit(1);
   }
@@ -509,6 +541,17 @@ async function main() {
 
     if (cls.kind === 'command') return handleCommand(userId, text);
 
+    // Pause must freeze EVERY guest path to Claude, not just raw keystrokes
+    // (onKey already bails on pause). A crafted {ui,command} rides the one channel
+    // left open during pause — handleUi allows kind:'command' so the host can
+    // /resume — and those management commands returned above via handleCommand.
+    // Anything still here is Claude-bound (prompt / claude-slash / bash) and must
+    // be frozen, or a prompter could keep driving Claude while sharing reads paused.
+    if (state.paused) {
+      notify(userId, 'sharing is paused — the host will resume shortly');
+      return;
+    }
+
     if (!sendAllowed(cls.kind, role)) {
       const what = cls.kind === 'bash' ? 'run bash' : cls.kind === 'claude-slash' ? 'use slash commands' : 'send that';
       notify(userId, `you can't ${what} — ask the host for a role that can type`);
@@ -767,7 +810,7 @@ async function main() {
     r.admit(knock.id);
     // The host's own tab IS the host, not a room member (finding 4): no roster entry,
     // no context card. It still mirrors the live screen, so it does get the snapshot.
-    if (knock.fp === `webhost:${hostToken}`) {
+    if (isBoundHost(knock.fp)) {
       hostTabIds.add(knock.id);
       knockInfo.set(knock.id, { name: knock.name, fp: knock.fp, role: 'host' });
       if (!state.paused) {
@@ -1001,11 +1044,26 @@ async function main() {
       repaintBand();
     });
     r.onKnock((knock) => {
-      // The host's own browser tab knocks with fp `webhost:<token>`. Auto-admit it as
-      // host — it is the one knock answered with no explicit ui action, and it is how
-      // the host gets in to answer everyone else's knocks. It is never a pending knock.
-      if (knock.fp === `webhost:${hostToken}`) {
-        admitAndCatchUp(r, knock);
+      // The host's own browser tab knocks with fp `webhost:<token>:<seat>`. The seat
+      // binds the host seat to the FIRST browser to present one; later browsers with
+      // the token but a different/absent seat are refused (a leaked host LINK carries
+      // the token but not the seat). This is the one knock answered with no ui action.
+      const hostSeat = hostSeatOf(knock.fp);
+      if (hostSeat !== null) {
+        if (boundSeat === null && hostSeat !== '') {
+          boundSeat = hostSeat; // first claim wins
+          log.event('host seat claimed');
+        }
+        if (isBoundHost(knock.fp)) {
+          admitAndCatchUp(r, knock);
+          return;
+        }
+        // Token but wrong/empty seat: refuse host access. Arm a handoff so the real
+        // host — if it IS them on a new device — can release the seat with Ctrl-G.
+        r.deny(knock.id);
+        armHandoff();
+        showToast('⚠ a device opened your host link but is not your bound host — refused. If it is you, press Ctrl-G here to hand over the host seat.', 20000);
+        log.event('refused a host-link opener with the wrong seat');
         return;
       }
       // A guest admitted earlier this session (same browser token) walks straight
@@ -1293,6 +1351,20 @@ async function main() {
     const { chatter, human } = partitionHostInput(d);
     if (chatter) pty.write(Buffer.from(chatter, 'binary'));
     if (human) {
+      // Ctrl-G (BEL) releases the bound host seat — but ONLY while a handoff is
+      // armed (right after a blocked device tried to claim), so a stray BEL never
+      // gets eaten during normal use. This lives on host stdin, which no remote
+      // participant can reach — that is what makes the release host-only.
+      if (handoffTimer && human.includes('\x07')) {
+        clearTimeout(handoffTimer);
+        handoffTimer = null;
+        boundSeat = null;
+        showToast('host seat released — reload your other device to claim it', 12000);
+        log.event('host released the seat via Ctrl-G handoff');
+        const stripped = human.split('\x07').join('');
+        if (stripped) pty.write(Buffer.from(stripped, 'binary'));
+        return;
+      }
       sniffInterrupt(human); // the host's own Esc interrupt is hookless too
       pty.write(Buffer.from(human, 'binary'));
     }

package/packages/cli/src/brain/drafts.js

@@ -426,7 +426,16 @@ export class Drafts {
     const box = this.activeBox(userId);
     if (!box || box.atoms.length === 0) return { send: null, changed: false };
     const send = { text: expandedText(box), author: userId, authors: [...box.authors], boxId: box.id };
-    this.boxes = this.boxes.filter((b) => b !== box); // the sent draft vanishes, cursors and all
+    // A solo window box (unplaced, only its owner in it) is the per-user bottom-row
+    // composer: empty it but KEEP it so the owner can fire the next prompt right away
+    // (it queues behind the running one) instead of falling through to Claude. Placed
+    // or co-written boxes are one-shot and still vanish, cursors and all.
+    if (box.place == null && box.cursors.size === 1) {
+      box.atoms = [];
+      box.cursors.set(userId, 0);
+    } else {
+      this.boxes = this.boxes.filter((b) => b !== box);
+    }
     return { send, changed: true };
   }
 

package/packages/relay/public/client.js

@@ -59,13 +59,17 @@ export function parseLocation(loc) {
  * passworded room — the join password `pass` (host tabs never need one).
  * @returns {string} e.g. "/ws?room=brave-otter&name=sid&token=abc"
  */
-export function buildWsPath({ code, name, token, hostToken, pass } = {}) {
+export function buildWsPath({ code, name, token, hostToken, pass, seat } = {}) {
   const q = new URLSearchParams();
   if (code) q.set('room', code);
   if (name) q.set('name', name);
   if (hostToken) q.set('host', hostToken);
   else if (token) q.set('token', token);
   if (pass && !hostToken) q.set('pass', pass);
+  // The host-seat secret binds the host seat to THIS browser (leaked-link defense):
+  // it never rides the shareable URL — the browser mints it and keeps it locally —
+  // so a stolen host link opened elsewhere presents a different seat and is refused.
+  if (seat && hostToken) q.set('seat', seat);
   return '/ws?' + q.toString();
 }
 
@@ -328,6 +332,37 @@ export function overlayView(state, selfId) {
     seenLabel: seenLabel(k.seen),
   }));
 
+  // Two composing surfaces (the windows UI):
+  //   • PANELS — one per person who can type. A panel shows that user's PRIVATE
+  //     draft: a home (place==null) box only they occupy → their own space to type
+  //     a prompt SEPARATELY.
+  //   • FLOATING drafts — any box with a place (opened via "+ draft") or co-written
+  //     by 2+ people → floats over the columns for writing a prompt TOGETHER.
+  const prompters = participants.filter((p) => p.role !== 'viewer');
+  const claimed = new Set();
+  const windowBoxFor = (uid) => {
+    let b = drafts.find((d) => !d.place && !claimed.has(d.id) && d.carets.some((c) => c.id === uid));
+    if (!b) b = drafts.find((d) => !d.place && !claimed.has(d.id) && d.authors.length === 1 && d.authors[0].id === uid);
+    if (b) claimed.add(b.id);
+    return b || null;
+  };
+  const panels = prompters.map((p) => {
+    const box = windowBoxFor(p.id);
+    return {
+      id: p.id,
+      name: p.name,
+      color: p.color,
+      role: p.role,
+      isSelf: p.id === selfId,
+      canType: p.id === selfId && caps.canCompose,
+      boxId: box?.id ?? null,
+      text: box?.text ?? '',
+      typing: !!(box && (box.text || box.carets.some((c) => c.id === p.id))),
+      pending: queue.filter((q) => q.author === p.id).map((q) => ({ n: q.n, text: q.text })),
+    };
+  });
+  const floatingDrafts = drafts.filter((d) => !claimed.has(d.id));
+
   return {
     room: s.room || '',
     selfId: selfId || null,
@@ -337,6 +372,8 @@ export function overlayView(state, selfId) {
     participants: participants.map((p) => ({ ...p, isSelf: p.id === selfId })),
     othersPointers,
     drafts,
+    panels,
+    floatingDrafts,
     queue,
     claudeState: s.claudeState || 'idle',
     claude: claudeLabel(s.claudeState),
@@ -360,6 +397,12 @@ function main() {
   // Accepted room password, stored per room so a reload glides straight back in
   // (same promise as the token). Cleared the moment the relay rejects it.
   const passKey = (code) => 'claude-share:pass:' + code;
+  // Per-browser host-seat secret (leaked-link defense). Minted once and kept in
+  // this browser's storage; presented only when opening a host tab. A stolen host
+  // link opened in another browser mints a DIFFERENT one, so the host CLI (which
+  // binds the seat to the first it sees) refuses it. Reloads reuse it, so the real
+  // host glides back into the seat.
+  const SEAT_KEY = 'claude-share:seat';
   const POINTER_HZ = 30; // send own pointer ≤ 30/s (spec)
   const POINTER_MS = Math.ceil(1000 / POINTER_HZ);
 
@@ -394,6 +437,18 @@ function main() {
       return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
     });
 
+  // The per-browser host-seat secret: minted once, reused forever (so reloads keep
+  // the seat). Both host-tab entry points — the auto-connect on load and beginKnock
+  // — must send it, or the CLI (which requires a seat to grant host) refuses.
+  const mintSeat = () => {
+    let s = store.get(SEAT_KEY);
+    if (!s) {
+      s = uuid();
+      store.set(SEAT_KEY, s);
+    }
+    return s;
+  };
+
   // ── app state ───────────────────────────────────────────────────────────────
   const loc = parseLocation(window.location);
   let ws = null;
@@ -438,6 +493,7 @@ function main() {
   const pausedCard = $('#paused');
   const claudeChip = $('#claude-chip');
   const draftsLayer = $('#drafts');
+  const panelsGrid = $('#panels');
   const queueChip = $('#queue-chip');
   const queuePop = $('#queue-pop');
   const composer = $('#composer');
@@ -515,11 +571,13 @@ function main() {
     const pass = typed || store.get(passKey(code)) || '';
     sentPass = pass || null;
     if (typed) store.set(passKey(code), typed);
-    connect({ code, name, token, hostToken: loc.hostToken, pass });
+    // Host tabs carry the per-browser seat secret (minted once, kept locally).
+    const seat = loc.hostToken ? mintSeat() : null;
+    connect({ code, name, token, hostToken: loc.hostToken, pass, seat });
   }
 
   // ── connection ───────────────────────────────────────────────────────────────
-  function connect({ code, name, token, hostToken, pass }) {
+  function connect({ code, name, token, hostToken, pass, seat }) {
     // Supersede any previous socket COMPLETELY. A zombie from an earlier attempt
     // still has live handlers — when the brain dedupes its knock, its deny/close
     // would splash "declined" into a UI that belongs to the NEW attempt.
@@ -537,7 +595,7 @@ function main() {
       ? 'Opening your room…'
       : `Waiting for the host to let you in…`;
     const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const url = proto + '//' + location.host + buildWsPath({ code, name, token, hostToken, pass });
+    const url = proto + '//' + location.host + buildWsPath({ code, name, token, hostToken, pass, seat });
     let sock;
     try {
       sock = new WebSocket(url);
@@ -648,8 +706,12 @@ function main() {
     if (!term) createTerm();
     fit();
     render();
-    // Keep the composer ready to type the moment the room is live.
-    focusComposer();
+    // Drop the cursor into my own window so I can type a prompt right away.
+    setTimeout(() => {
+      const mine = panelEls.get(selfId);
+      if (mine && !mine.input.disabled) mine.input.focus();
+      else focusComposer();
+    }, 0);
   }
 
   function createTerm() {
@@ -925,13 +987,18 @@ function main() {
   // brain sees the Esc as "leave the box" (never an interrupt while composing);
   // the next keystroke is then raw to Claude.
   stage.addEventListener('mousedown', (e) => {
-    if (e.target.closest('.fdraft')) return;
+    if (e.target.closest('.fdraft, .user-window')) return;
+    // Clicking Claude's terminal means "talk to Claude": leave any draft I'm in
+    // (its text lives on) and hand my keys to Claude's live session.
+    const active = document.activeElement;
+    if (active?.classList?.contains('uw-input')) active.blur();
     const v = lastState ? overlayView(lastState, selfId) : null;
     if (v && v.drafts.some((d) => d.focusedBySelf)) sendKey('\x1b');
+    if (v?.canCompose && !composer.disabled) setTimeout(() => composer.focus(), 0);
   });
-  // Double-click an empty spot → a new draft spawns right there (explicit creation).
+  // Double-click empty space → a shared "write together" draft spawns right there.
   stage.addEventListener('dblclick', (e) => {
-    if (e.target.closest('.fdraft')) return;
+    if (e.target.closest('.fdraft, .user-window')) return;
     const v = lastState ? overlayView(lastState, selfId) : null;
     if (!v?.canCompose) return;
     const r = stage.getBoundingClientRect();
@@ -949,6 +1016,7 @@ function main() {
       // Straight to Claude. A key that landed on the still-focused catcher was
       // already mailed by its own handler — don't send it twice.
       if (e.target === composer) return;
+      if (e.target.classList?.contains('uw-input')) return; // a window owns its keys
       const b = directKeyBytes(e);
       if (b != null) {
         e.preventDefault();
@@ -971,8 +1039,12 @@ function main() {
     setTimeout(focusComposer, 0);
   });
   newDraftBtn.addEventListener('click', () => {
+    // "+ draft" opens a SHARED box to write a prompt together: spawn a draft and
+    // float it over the columns (a place != null box is the shared surface).
+    const n = draftsLayer.querySelectorAll('.fdraft').length;
+    pendingSpawn = { x: 0.24 + (n % 3) * 0.07, y: 0.22 + (n % 3) * 0.09 };
     sendKey(NEW_DRAFT_BYTES);
-    composer.focus(); // straight to the catcher — the new box is already yours
+    setTimeout(() => composer.focus(), 0); // keys land in the new shared box
   });
 
   // ── host controls ────────────────────────────────────────────────────────────
@@ -1051,24 +1123,44 @@ function main() {
   function render() {
     if (!lastState) return;
     const v = overlayView(lastState, selfId);
-    // Direct is derived: anyone who can prompt, with no draft focused, types
-    // straight into Claude.
+    // A just-spawned "+ draft" (or double-click) box: pin it to a floating spot so
+    // it becomes a shared "write together" box rather than a private window draft.
+    if (pendingSpawn) {
+      const fresh = v.drafts.find((d) => d.focusedBySelf && !d.place && d.text === '');
+      if (fresh) {
+        sendMsg({ t: 'ui', action: { kind: 'place', id: fresh.id, ...pendingSpawn } });
+        pendingSpawn = null;
+      }
+    }
+    // Direct-to-Claude: you can prompt, you're not composing in any draft, and your
+    // cursor isn't in a window input → keys go straight into Claude's terminal (so
+    // y/n permission prompts and the like still work, like before).
     const selfComposing = v.drafts.some((d) => d.focusedBySelf);
-    directOn = v.canCompose && !selfComposing;
-    // The "keys go into Claude" indicator is Claude's own blinking cursor in the
-    // mirror (forced filled+blinking via CSS) — no chip needed.
+    const inWindow = document.activeElement?.classList?.contains('uw-input');
+    directOn = v.canCompose && !selfComposing && !inWindow;
     stage.classList.toggle('direct', directOn);
-    // Composing → the key catcher must hold focus, so typing lands in the draft
-    // without a manual click (unless a drag-selection is standing).
-    if (selfComposing && !composer.disabled && document.activeElement !== composer) {
+    // Claude is waiting on a permission ask → nudge people to click the terminal to
+    // answer, so a stray y/n doesn't get composed into their own window instead.
+    stage.classList.toggle('ask', v.claudeState === 'ask');
+    // While co-writing a FLOATING box, the invisible key-catcher must hold focus so
+    // keys land in the shared box (unless a window input owns them).
+    const floatingFocused = v.floatingDrafts.some((d) => d.focusedBySelf);
+    if (floatingFocused && !inWindow && !composer.disabled && document.activeElement !== composer) {
       const sel = window.getSelection();
       if (!sel || sel.isCollapsed) composer.focus();
+    } else if (directOn && !composer.disabled && document.activeElement !== composer && !inWindow) {
+      // hand keys to Claude when nothing else owns focus
+      const ae = document.activeElement;
+      const typingElsewhere = ae && (ae.tagName === 'INPUT' || ae.tagName === 'TEXTAREA');
+      const sel = window.getSelection();
+      if (!typingElsewhere && (!sel || sel.isCollapsed)) composer.focus();
     }
     ghostHint(v);
     applyView(v);
     renderStatusbar(v);
     renderClaudeChip(v);
     renderPaused(v);
+    renderPanels(v);
     renderDrafts(v);
     renderQueue(v);
     renderComposer(v);
@@ -1118,7 +1210,7 @@ function main() {
     if (hinted) return;
     if (v.participants.filter((p) => p.role !== 'viewer').length < 2) return;
     hinted = true;
-    localToast('compose together: + draft, or double-click the terminal');
+    localToast('type your own prompt in your window — or press + draft to write one together');
   }
   function localToast(msg, ms = 6000) {
     toastEl.textContent = msg;
@@ -1132,6 +1224,115 @@ function main() {
   function renderPaused(v) {
     pausedCard.hidden = !v.paused;
     stage.classList.toggle('paused', v.paused);
+    panelsGrid.parentElement?.classList.toggle('paused', v.paused);
+  }
+
+  // ── per-user windows: everyone's own space to type a prompt SEPARATELY ────────
+  // The panel DOM is rebuilt only when the roster changes; the dynamic bits (draft
+  // text, status, sent prompts) update in place so a focused input never loses focus.
+  let panelsKey = '';
+  const panelEls = new Map(); // participant id -> { input, body, status }
+  function renderPanels(v) {
+    const key = v.panels.map((p) => `${p.id}:${p.name}:${p.color}:${p.canType}`).join('|');
+    if (key !== panelsKey) {
+      panelsKey = key;
+      panelsGrid.innerHTML = '';
+      panelEls.clear();
+      for (const p of v.panels) {
+        const win = el('div', 'user-window' + (p.isSelf ? ' self' : ''));
+        win.style.setProperty('--c', p.color);
+        const head = el('div', 'uw-header');
+        const dot = el('span', 'uw-dot');
+        dot.style.setProperty('--c', p.color);
+        head.append(dot, el('span', 'uw-name', p.isSelf ? `You (${p.name})` : p.name));
+        const status = el('span', 'uw-status');
+        head.append(status);
+        const body = el('div', 'uw-body');
+        const wrap = el('div', 'uw-input-wrap');
+        const input = el('input', 'uw-input');
+        input.type = 'text';
+        input.spellcheck = false;
+        input.autocomplete = 'off';
+        input.placeholder = p.isSelf ? 'Type your prompt…' : `${p.name}'s prompt…`;
+        input.disabled = !p.canType;
+        if (p.canType) wirePanelInput(input);
+        wrap.append(input);
+        win.append(head, body, wrap);
+        panelsGrid.append(win);
+        panelEls.set(p.id, { input, body, status });
+      }
+    }
+    for (const p of v.panels) {
+      const e = panelEls.get(p.id);
+      if (!e) continue;
+      e.status.textContent = p.typing ? 'typing…' : 'idle';
+      e.status.classList.toggle('typing', p.typing);
+      // mirror the live draft into the input — the brain is the authority, so we
+      // never echo locally; setting value keeps every tab showing the same text.
+      if (e.input.value !== p.text) {
+        const focused = document.activeElement === e.input;
+        e.input.value = p.text;
+        if (focused) {
+          const end = e.input.value.length;
+          try {
+            e.input.setSelectionRange(end, end);
+          } catch {
+            /* not a text input state */
+          }
+        }
+      }
+      e.body.innerHTML = '';
+      if (p.pending.length === 0) {
+        e.body.append(
+          el('div', 'uw-empty', p.isSelf ? 'Your sent prompts show here. Enter to send.' : 'No prompts yet.'),
+        );
+      } else {
+        for (const q of p.pending) {
+          const line = el('div', 'uw-line sent');
+          line.append(el('span', 'uw-n', '#' + q.n), document.createTextNode('> ' + q.text));
+          e.body.append(line);
+        }
+      }
+    }
+  }
+
+  // Wire a self window input: keys route to the brain (which owns the draft), so the
+  // input is a controlled mirror of my private box. Enter sends it into the queue.
+  function wirePanelInput(input) {
+    input.addEventListener('focus', () => {
+      const v = lastState ? overlayView(lastState, selfId) : null;
+      const mine = v?.panels.find((p) => p.isSelf);
+      if (!mine) return;
+      if (mine.boxId) {
+        // make sure my caret sits in my window box (not a floating box I co-wrote)
+        const box = v.drafts.find((d) => d.id === mine.boxId);
+        const caretHere = box?.carets.some((c) => c.self);
+        if (!caretHere) sendMsg({ t: 'ui', action: { kind: 'caret', id: mine.boxId, offset: mine.text.length } });
+      } else {
+        sendKey(NEW_DRAFT_BYTES); // no private draft yet → start one
+      }
+    });
+    input.addEventListener('keydown', (e) => {
+      const bytes = keyToBytes(e); // Enter → send, editing chords, printable chars
+      if (bytes != null) {
+        e.preventDefault();
+        sendKey(bytes);
+        return;
+      }
+      if (e.ctrlKey || e.metaKey) return; // browser shortcuts stay native
+      if (e.key.length === 1) e.preventDefault(); // unmapped printable: swallow
+    });
+    input.addEventListener('paste', (e) => {
+      e.preventDefault();
+      const text = (e.clipboardData || window.clipboardData)?.getData('text') || '';
+      if (text) sendKey(pasteBytes(text));
+    });
+    // never let a local echo diverge from the brain's authoritative text
+    input.addEventListener('input', () => {
+      const v = lastState ? overlayView(lastState, selfId) : null;
+      const mine = v?.panels.find((p) => p.isSelf);
+      if (mine && input.value !== mine.text) input.value = mine.text;
+    });
   }
 
   let lastDraftsJson = '';
@@ -1140,19 +1341,13 @@ function main() {
     // Rebuild only when the drafts actually changed: every rebuild would destroy a
     // native drag-selection, and state frames arrive for unrelated reasons
     // (pointers). Mid-drag renders are skipped too — pointerup re-syncs.
-    const json = JSON.stringify(v.drafts);
+    const json = JSON.stringify(v.floatingDrafts);
     if (json === lastDraftsJson || draggingDraft) return;
     lastDraftsJson = json;
     draftsLayer.innerHTML = '';
     const nextIds = new Set();
-    for (const [i, d] of v.drafts.entries()) {
+    for (const [i, d] of v.floatingDrafts.entries()) {
       nextIds.add(d.id);
-      // A box I just spawned by double-click lands where I clicked — for everyone.
-      if (pendingSpawn && d.focusedBySelf && !d.place && d.text === '') {
-        sendMsg({ t: 'ui', action: { kind: 'place', id: d.id, ...pendingSpawn } });
-        d.place = pendingSpawn; // optimistic, until the next state frame confirms
-        pendingSpawn = null;
-      }
       // Entrance animation only for a box that just APPEARED — this render runs on
       // every keystroke (full rebuild), and replaying it would strobe. Same idea
       // for the border beam: phase it by wall-clock so a rebuild never resets it.
@@ -1534,7 +1729,7 @@ function main() {
     // Host tab: no name prompt — connect straight to its own room (name comes from
     // the shared state once live).
     joinScreen.hidden = false;
-    connect({ code: loc.code, name: '', token: null, hostToken: loc.hostToken });
+    connect({ code: loc.code, name: '', token: null, hostToken: loc.hostToken, seat: mintSeat() });
     joinForm.hidden = true;
     waiting.hidden = false;
   } else {

package/packages/relay/public/index.html

@@ -65,7 +65,7 @@
         <button id="toast" class="notice-chip" type="button" title="dismiss" hidden></button>
         <span id="knocks" class="knocks"></span>
         <button id="queue-chip" class="ctrl qchip" type="button" title="Prompts waiting for Claude" hidden></button>
-        <button id="new-draft" class="ctrl" type="button" title="Start a draft (or double-click the terminal)">+ draft</button>
+        <button id="new-draft" class="ctrl" type="button" title="Open a shared draft to write a prompt together">+ draft</button>
         <span id="host-controls" class="host-controls" hidden>
           <button id="copy-invite" class="ctrl" type="button" title="Copy invite link"><span class="ico">⧉</span> Invite</button>
           <button id="pause-btn" class="ctrl" type="button" title="Pause sharing"><span class="ico">⏸</span></button>
@@ -85,10 +85,11 @@
       </div>
 
       <main class="workspace">
+        <!-- Claude's live session: the shared terminal everyone watches respond.
+             Floating "+ draft" boxes (write a prompt TOGETHER) overlay it. -->
         <div id="stage">
           <div id="term"></div>
           <div id="cursors" aria-hidden="true"></div>
-          <!-- floating draft boxes live INSIDE the terminal surface -->
           <div id="drafts" class="overlays"></div>
           <div id="paused" class="paused-card" hidden>
             <div class="paused-inner">
@@ -98,8 +99,9 @@
             </div>
           </div>
         </div>
-        <!-- invisible key catcher: keystrokes land here and are mailed to the
-             brain; the floating draft boxes are the only visible composer -->
+        <!-- one window per person: your own space to compose a prompt SEPARATELY -->
+        <div id="panels" class="panels-grid"></div>
+        <!-- invisible key catcher: routes direct + floating-draft keystrokes to the brain -->
         <textarea id="composer" class="composer" rows="1" spellcheck="false" autocomplete="off" aria-label="compose"></textarea>
       </main>
     </section>

package/packages/relay/public/style.css

@@ -527,6 +527,168 @@ body {
   box-shadow: 0 0 0 1px rgba(232, 163, 61, 0.4), 0 0 22px rgba(232, 163, 61, 0.14),
     0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
+/* Claude is waiting on a yes/no — pulse the frame and label it, so nobody answers
+   by typing into their own window. Clicking the terminal hands keys to Claude. */
+#stage.ask {
+  cursor: pointer;
+  animation: ask-pulse 1.6s ease-in-out infinite;
+}
+#stage.ask::after {
+  content: "⚠ Claude needs a yes / no — click here to answer";
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 8;
+  padding: 5px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: #1a1205;
+  background: rgba(232, 163, 61, 0.96);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+  white-space: nowrap;
+}
+@keyframes ask-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 1.5px rgba(232, 163, 61, 0.55), 0 0 18px rgba(232, 163, 61, 0.18),
+      0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+  50% {
+    box-shadow: 0 0 0 1.5px rgba(232, 163, 61, 0.9), 0 0 34px rgba(232, 163, 61, 0.42),
+      0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+}
+
+/* ── the per-user compose windows: a row beneath Claude's live terminal ──────
+   Each column is one person's own space to write a prompt SEPARATELY; the
+   "+ draft" floating boxes overlay the terminal when people write TOGETHER. */
+.panels-grid {
+  flex: 0 0 auto;
+  height: clamp(150px, 30vh, 240px);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  align-items: stretch;
+}
+.panels-grid:empty {
+  display: none;
+}
+.user-window {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-radius: 14px;
+  background: rgba(10, 12, 18, 0.62);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 0 0 1px var(--ring-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+  transition: box-shadow 0.18s ease;
+}
+.user-window.self {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, #9aa4b2) 42%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+.uw-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 13px;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  flex: 0 0 auto;
+}
+.uw-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c, #9aa4b2);
+  box-shadow: 0 0 10px var(--c, transparent);
+  flex: 0 0 auto;
+}
+.uw-name {
+  color: var(--text);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uw-status {
+  font-size: 10.5px;
+  font-weight: 500;
+  color: var(--text-faint);
+}
+.uw-status.typing {
+  color: var(--c, var(--amber));
+}
+.uw-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 13px;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-dim);
+}
+.uw-empty {
+  color: var(--text-faint);
+  font-style: italic;
+  opacity: 0.7;
+}
+.uw-line {
+  margin: 0 0 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.uw-line.sent {
+  color: var(--text-dim);
+}
+.uw-line .uw-n {
+  color: var(--text-faint);
+  margin-right: 6px;
+}
+.uw-input-wrap {
+  flex: 0 0 auto;
+  padding: 9px 11px 11px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+.uw-input {
+  width: 100%;
+  font: inherit;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--text);
+  background: rgba(0, 0, 0, 0.35);
+  border: none;
+  border-radius: 10px;
+  padding: 9px 12px;
+  box-shadow: 0 0 0 1px var(--ring-soft), inset 0 1px 2px rgba(0, 0, 0, 0.3);
+  outline: none;
+  transition: box-shadow 0.15s ease;
+}
+.uw-input::placeholder {
+  color: var(--text-faint);
+}
+.uw-input:focus {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--amber)) 55%, transparent),
+    inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+.uw-input:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.workspace.paused .panels-grid {
+  filter: blur(4px) brightness(0.6);
+  pointer-events: none;
+}
 #cursors {
   position: absolute;
   inset: 10px 12px;

package/packages/relay/web.js

@@ -206,7 +206,14 @@ export function startWebDoor(ctx) {
     const isHostTab = !!hostToken;
     // Identity: the host tab carries the host token; a guest carries its browser
     // token (session-only if absent). The relay makes no trust call — the brain does.
-    const fp = isHostTab ? 'webhost:' + hostToken : 'web:' + (q.get('token') || randomUUID());
+    // Host tabs carry a per-browser seat secret; fold it into the synthetic host
+    // fingerprint (`webhost:<token>:<seat>`) so the CLI can bind the host seat to
+    // the first browser it sees. Sanitize to a safe charset — it lands in the fp
+    // the CLI parses. The relay makes no trust call; the brain owns the binding.
+    const seat = (q.get('seat') || '').replace(/[^A-Za-z0-9._-]/g, '').slice(0, 64);
+    const fp = isHostTab
+      ? 'webhost:' + hostToken + (seat ? ':' + seat : '')
+      : 'web:' + (q.get('token') || randomUUID());
     // Printable-ASCII only, same as the ssh door: `?name=` is an untrusted URL param,
     // and the host writes it verbatim to its terminal / log / session.md and mirrors
     // it to every ssh guest — raw ESC/OSC/BEL bytes here would be escape injection.