@claudecollab/cli 0.1.0 → 0.1.2

package/README.md

@@ -1,109 +1,111 @@
-# 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.
+**Use Claude Code with your friends.** You run one command. Your friends open a link and can collaborate with the same Claude as you.
 
-Think **screen-share where they can type too**.
-
-```mermaid
-flowchart LR
-    H["you (host)<br/>terminal runs Claude"] <--> R["relay<br/>forwards bytes, stores nothing"]
-    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
+   You                 a helper server            Your friends
+(you run Claude)  <-->  (passes messages)   <-->  (open a link)
 ```
 
-**Terminal 1 — relay:**
-
-```bash
-node packages/relay/bin/serve.js
-```
+Your terminal looks like normal Claude, just one extra line at the bottom. All the sharing happens in the web browser.
 
-**Terminal 2 — host:**
+## Start 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.
+That's it. Run `collab` instead of `claude`. It works the same, but now it makes two links:
 
-## Deploy the relay (permanent links)
+- A **private link** — that's your control panel (you let people in and manage them).
+- A **share link** — this one gets copied for you. Send it to your friends.
 
-```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).
+Your friends just open the share link in a browser. They don't install anything.
 
 ## Two links — don't mix them up
 
 | Link | Who it's for |
 |---|---|
-| `…/room?host=abc` | **you only** — opening it grants the host seat |
-| `…/room` | **share this** — friends land on the request-to-join flow |
+| the one ending in `?host=…` | **Just you.** Opening it makes you the boss of the room. |
+| the plain one | **Share this.** Friends use it to ask to join. |
 
-The Invite button and your clipboard always hold the safe one.
+The Invite button adds the plain one to your clipboard.
 
-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 an extra guardrail? Start with `collab --room-password <pw>`. Then friends have to type the password before they can even ask to join. You still choose who gets admitted.
 
 ## Roles
 
-| Role | See | Type · answer asks · slash/bash | Admit · kick · pause · end |
+| Role | Can watch | Can type | Can run the room |
 |---|---|---|---|
-| 👁 viewer | ✅ | ❌ | ❌ |
-| ✎ prompter *(default)* | ✅ | ✅ | ❌ |
-| ★ host | ✅ | ✅ | ✅ |
+| 👁 viewer | yes | no | no |
+| ✎ prompter *(normal)* | yes | yes | no |
+| ★ host *(you)* | yes | yes | yes |
+
+"Run the room" means let people in, remove them, pause, or end it.
 
-## How it feels
+## How it works
 
-- The whole page is the terminal. Type with no draft open → keys go **straight into Claude** — menus, asks, everything.
-- **+ 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.
+- Everyone who can type gets their own little box at the bottom to write in. Type there and press Enter to send. Your box stays open, so you can keep going. If Claude is busy, your message will get queued.
+- Want to write a message *together* with someone? Click **+ draft** to open a shared box you both type in.
+- To talk to Claude directly (to approve y/n questions, answer questions, etc) click Claude's CLI text line.
+- Everyone sees the same screen, and scrolling is shared.
 
-## The one thing to really understand
+## Important note
 
-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).
+When a friend types something, **it runs on your computer, as if you typed it.** So only let in people you trust. You can hit **Pause** anytime, or **End** to close the room.
 
-## Tests
+## Run your own server (optional)
+
+By default, `collab` uses our free server at claudecollab.org. Want to run your own instead? The same install includes it:
 
 ```bash
-npm test
+collab-relay                              # start your own server
+collab --relay ssh://127.0.0.1:2222       # use it
 ```
 
+To put your server online for good (on Fly.io or any host — see `fly.toml`):
+
+```bash
+fly launch --no-deploy
+fly secrets set HOST_KEY="$(collab-relay --make-key)"
+fly secrets set ROOM_SECRET="$(openssl rand -hex 16)"   # optional lock (see below)
+fly deploy
+```
+
+Two safety features come built in:
+
+- **Room password** (`ROOM_SECRET`) — if you set this, only people who know it can *start* rooms on your server. People *joining* a room don't need it.
+- **Server ID check** the first time you connect, the app remembers your server's ID. If it ever changes, it stops and warns you, so nobody can pretend to be your server.
+
+## All the options
+
+| Option | What it does |
+|---|---|
+| `--relay <url>` | which server to use; defaults to ours |
+| `--no-relay` | go solo — just Claude, no room, no sharing |
+| `--room-password <pw>` | friends must type this before they can ask to join |
+| `--guests <role>` | what new people can do when let in (default: prompter) |
+| `--secret <s>` | the password for a locked server (or use `CLAUDE_SHARE_SECRET`) |
+| `--fingerprint <fp>` | lock onto a specific server's ID |
+| `--cmd <program>` | run something other than `claude` |
+| `-- <args…>` | anything after `--` is passed to the program you're running |
+
 <details>
-<summary>Architecture</summary>
+<summary>How it's built</summary>
 
-Three packages, plain ESM JavaScript, Node 22, no build step.
+Three parts, plain JavaScript, no build step:
 
 ```
-packages/shared/   protocol.js — host↔relay wire messages
-packages/relay/    server.js (ssh door) · web.js (browser door) · public/ (client)
-packages/cli/      bin/claude-share.js — the "brain": drafts, queue, roles, gate
-test/              end-to-end: host + host tab + guest on localhost
+packages/shared/   the messages the app and server send each other
+packages/relay/    the server (one door for terminals, one for browsers)
+packages/cli/      the main program you run — the brain
 ```
 
-- 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.
-
 </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) — free to use and change. This is an independent project, not made or approved by Anthropic.
+
+Contributions are welcome! Please open a PR and add @ir272 as a reviewer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudecollab/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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.