@claudecollab/cli 0.1.2 → 0.2.0

package/packages/relay/public/client.js

@@ -24,6 +24,20 @@ const PASTE_START = '\x1b[200~';
 const PASTE_END = '\x1b[201~';
 export const NEW_DRAFT_BYTES = '\x0e'; // Ctrl+N — "start a fresh draft"
 
+// The shared-view floor (mirrors FLOOR_COLS/FLOOR_ROWS in brain/state.js). A tab
+// that measures below this is a phone-sized viewer: it reports the sentinel 0×0 so
+// the host scales the mirror onto it instead of shrinking the room or parking it.
+const FLOOR_COLS = 80;
+const FLOOR_ROWS = 24;
+
+// The bytes that answer Claude Code's permission ask, sent through the ordinary key
+// channel (the role gate still applies). Real Claude v2 shows a numbered select —
+// option 1 is always "Yes"; Esc is the "(esc)" No option, which denies regardless of
+// how many options the prompt has. (Do NOT use "2" for deny — that is "Yes, and
+// don't ask again", an APPROVE variant.) The fake-claude fixture accepts these too.
+export const ASK_APPROVE_BYTES = '1';
+export const ASK_DENY_BYTES = '\x1b';
+
 // ════════════════════════════════════════════════════════════════════════════
 // PURE HELPERS (exported; no DOM, no globals — safe to import in node)
 // ════════════════════════════════════════════════════════════════════════════
@@ -55,17 +69,17 @@ export function parseLocation(loc) {
 
 /**
  * Build the `/ws` query the web door expects. A host tab carries `host`; a guest
- * carries its browser `token` (returning identity), claimed `name`, and — for a
- * passworded room — the join password `pass` (host tabs never need one).
+ * carries its browser `token` (returning identity) and claimed `name`.
+ * The room password NEVER rides the URL — it is sent as the first WS message in
+ * reply to the relay's {t:'pass?'} challenge (proxy/access-log/history leak fix).
  * @returns {string} e.g. "/ws?room=brave-otter&name=sid&token=abc"
  */
-export function buildWsPath({ code, name, token, hostToken, pass, seat } = {}) {
+export function buildWsPath({ code, name, token, hostToken, 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.
@@ -346,6 +360,8 @@ export function overlayView(state, selfId) {
     if (b) claimed.add(b.id);
     return b || null;
   };
+  // Turn history (who typed what + Claude's response), attributed by author.
+  const allTurns = Array.isArray(s.history) ? s.history : [];
   const panels = prompters.map((p) => {
     const box = windowBoxFor(p.id);
     return {
@@ -359,6 +375,14 @@ export function overlayView(state, selfId) {
       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 })),
+      turns: allTurns
+        .filter((t) => t.author === p.id)
+        .map((t) => ({
+          id: t.id,
+          prompt: t.prompt ?? '',
+          response: t.response ?? '',
+          running: !!t.running,
+        })),
     };
   });
   const floatingDrafts = drafts.filter((d) => !claimed.has(d.id));
@@ -377,6 +401,11 @@ export function overlayView(state, selfId) {
     queue,
     claudeState: s.claudeState || 'idle',
     claude: claudeLabel(s.claudeState),
+    // What Claude is asking permission for (only present while claudeState==='ask').
+    ask:
+      s.ask && typeof s.ask === 'object'
+        ? { tool: String(s.ask.tool || 'tool'), summary: String(s.ask.summary || '') }
+        : null,
     paused: !!s.paused,
     knocks,
     // The latest addressed notice ({id, msg, seq}) — shown as a toast when it's mine.
@@ -500,6 +529,13 @@ function main() {
   const newDraftBtn = $('#new-draft');
   const hostControls = $('#host-controls');
   const knocksBox = $('#knocks');
+  const askCard = $('#ask-card');
+  const askTool = $('#ask-tool');
+  const askSummary = $('#ask-summary');
+  const askActions = $('#ask-actions');
+  const askApprove = $('#ask-approve');
+  const askDeny = $('#ask-deny');
+  const askViewnote = $('#ask-viewnote');
   const avatarsBox = $('#avatars');
   const popover = $('#popover');
   const copyInviteBtn = $('#copy-invite');
@@ -547,12 +583,14 @@ function main() {
     timeout: 'The host did not answer in time. Try again when they are around.',
     denied: 'The host declined your request.',
     closed: 'The connection closed before you were let in — try again.',
+    busy: 'Too many people are waiting to join — try again in a minute.',
     // password gets its own copy in fail(): the message depends on whether we
     // had one to send ("needs a password" vs "wrong password").
     password: 'This room is password-protected.',
   };
 
   let sentPass = null; // what the last attempt presented (drives the fail() copy)
+  let pendingPass = ''; // the password to send when the relay challenges with {t:'pass?'}
 
   function beginKnock() {
     const code = (loc.code || codeInput.value || '').trim();
@@ -578,6 +616,9 @@ function main() {
 
   // ── connection ───────────────────────────────────────────────────────────────
   function connect({ code, name, token, hostToken, pass, seat }) {
+    // Stash the password to answer the relay's {t:'pass?'} challenge — it rides the
+    // wire, never the URL. Host tabs never present one.
+    pendingPass = hostToken ? '' : pass || '';
     // 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.
@@ -595,7 +636,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, seat });
+    const url = proto + '//' + location.host + buildWsPath({ code, name, token, hostToken, seat });
     let sock;
     try {
       sock = new WebSocket(url);
@@ -638,6 +679,12 @@ function main() {
     }
     if (!msg || typeof msg !== 'object') return;
     switch (msg.t) {
+      case 'pass?':
+        // The relay is challenging for the room password over the wire (never the
+        // URL). Answer with the stored/typed value; a wrong/empty one comes back as
+        // an {t:'error',reason:'password'} that reveals the field.
+        if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ t: 'pass', pass: pendingPass }));
+        break;
       case 'joined':
         // A host tab IS the host (the brain maps it to HOST_ID and never adds it as a
         // second participant — finding 4), so adopt the host's roster identity: the
@@ -787,6 +834,19 @@ function main() {
     // as a dead mouse report (stdin is disabled). Capture it before xterm and mail
     // it to the brain, which types the real report into the pty.
     stage.addEventListener('wheel', onStageWheel, { passive: false, capture: true });
+    // Copy Claude's output: xterm owns selection inside the mirror (it suppresses
+    // the native DOM selection there), so on Cmd/Ctrl+C with no page-text selected,
+    // put xterm's selection on the clipboard. A real DOM selection — a prompt or
+    // response highlighted in a window box — copies natively and is left alone.
+    document.addEventListener('copy', (e) => {
+      if (phase !== 'live' || !term) return;
+      const domSel = window.getSelection();
+      if (domSel && !domSel.isCollapsed && String(domSel).trim()) return;
+      if (term.hasSelection?.()) {
+        e.clipboardData?.setData('text/plain', term.getSelection());
+        e.preventDefault();
+      }
+    });
   }
 
   let wheelAcc = 0;
@@ -839,7 +899,11 @@ function main() {
     const { cw, ch } = refCellSize();
     const cols = Math.max(2, Math.floor((rect.width - 24) / cw));
     const rows = Math.max(1, Math.floor((rect.height - 20) / ch));
-    sendMsg({ t: 'resize', cols, rows });
+    // Below the shared floor (a phone): report the sentinel 0×0 — "I scale, ignore my
+    // size" — so the host neither shrinks the room to us nor parks us on a hint. We
+    // keep rendering state.view zoomed (scaleTerm). Report real capacity otherwise.
+    const scaled = cols < FLOOR_COLS || rows < FLOOR_ROWS;
+    sendMsg({ t: 'resize', cols: scaled ? 0 : cols, rows: scaled ? 0 : rows });
     scaleTerm();
   }
 
@@ -1047,6 +1111,13 @@ function main() {
     setTimeout(() => composer.focus(), 0); // keys land in the new shared box
   });
 
+  // Approve / Deny a permission ask: exactly the keystrokes a person at the terminal
+  // would press, through the ordinary key channel — no new privileged action, so the
+  // host's role gate (prompter+) applies untouched. Real Claude answers a numbered
+  // select: "1" = Yes, Esc = the "(esc)" No option (see ASK_APPROVE/DENY_BYTES).
+  askApprove.addEventListener('click', () => sendKey(ASK_APPROVE_BYTES));
+  askDeny.addEventListener('click', () => sendKey(ASK_DENY_BYTES));
+
   // ── host controls ────────────────────────────────────────────────────────────
   // Copy the SAFE, token-free invite link — never this tab's own host URL (finding 1).
   copyInviteBtn?.addEventListener('click', async () => {
@@ -1105,18 +1176,18 @@ function main() {
       endConfirm.append(el('span', null, 'Save session.md?'));
       const save = el('button', 'kbtn yes', 'Save & end');
       const skip = el('button', 'kbtn no', 'Just end');
-      // The save choice is resolved by the host CLI's /end confirmation; the browser
-      // fires /end either way (the two-step gate lives here so the host never has to
-      // touch the terminal). Both buttons end the room.
-      save.onclick = () => finishEnd();
-      skip.onclick = () => finishEnd();
+      // The two-step gate lives here so the host never has to touch the terminal.
+      // "Save & end" writes session.md (/end); "Just end" writes nothing
+      // (/end nosave) so it can't overwrite an existing file. Both end the room.
+      save.onclick = () => finishEnd(true);
+      skip.onclick = () => finishEnd(false);
       endConfirm.append(save, skip);
     }
   }
-  function finishEnd() {
+  function finishEnd(save) {
     endStep = 0;
     renderEndConfirm();
-    sendCommand('/end');
+    sendCommand(save ? '/end' : '/end nosave');
   }
 
   // ── render ─────────────────────────────────────────────────────────────────
@@ -1158,6 +1229,7 @@ function main() {
     ghostHint(v);
     applyView(v);
     renderStatusbar(v);
+    renderAsk(v);
     renderClaudeChip(v);
     renderPaused(v);
     renderPanels(v);
@@ -1194,6 +1266,23 @@ function main() {
     sbRole.append(b);
   }
 
+  // The permission ask card — the touch-first approve/deny surface (all widths, the
+  // one thing a phone most needs). Approve/Deny are ORDINARY keystrokes sent through
+  // the key channel (the host's role gate applies); only people who may type see the
+  // buttons, viewers see the card without them. The old amber pulse stays; its
+  // "click to answer" pill is suppressed while the card is up (see .has-ask-card).
+  function renderAsk(v) {
+    const show = v.claudeState === 'ask' && !!v.ask;
+    askCard.hidden = !show;
+    stage.classList.toggle('has-ask-card', show);
+    if (!show) return;
+    askTool.textContent = v.ask.tool || 'tool';
+    askSummary.textContent = v.ask.summary || '';
+    askSummary.hidden = !v.ask.summary;
+    askActions.hidden = !v.canCompose; // buttons only for prompter+ (role gate mirrors this)
+    askViewnote.hidden = v.canCompose; // viewers see the card, but no buttons
+  }
+
   function renderClaudeChip(v) {
     claudeChip.className = 'chip claude ' + v.claude.kind;
     claudeChip.textContent = v.claude.text;
@@ -1229,9 +1318,11 @@ function main() {
 
   // ── 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.
+  // text, status, history) update in place so a focused input never loses focus.
   let panelsKey = '';
-  const panelEls = new Map(); // participant id -> { input, body, status }
+  const panelEls = new Map(); // participant id -> { input, body, status, bodyKey }
+  const expandedTurns = new Set(); // turn ids the viewer expanded to full response
+  const RESP_LIMIT = 280; // chars of a response shown before "show more"
   function renderPanels(v) {
     const key = v.panels.map((p) => `${p.id}:${p.name}:${p.color}:${p.canType}`).join('|');
     if (key !== panelsKey) {
@@ -1259,14 +1350,16 @@ function main() {
         wrap.append(input);
         win.append(head, body, wrap);
         panelsGrid.append(win);
-        panelEls.set(p.id, { input, body, status });
+        panelEls.set(p.id, { input, body, status, bodyKey: null });
       }
     }
     for (const p of v.panels) {
       const e = panelEls.get(p.id);
       if (!e) continue;
-      e.status.textContent = p.typing ? 'typing…' : 'idle';
+      const running = p.turns.some((t) => t.running);
+      e.status.textContent = p.typing ? 'typing…' : running ? 'waiting…' : 'idle';
       e.status.classList.toggle('typing', p.typing);
+      e.status.classList.toggle('waiting', !p.typing && running);
       // 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) {
@@ -1281,41 +1374,110 @@ function main() {
           }
         }
       }
-      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);
+      renderPanelBody(e, p);
+    }
+  }
+
+  // Render one window's body: attributed history (prompt + Claude's response, with
+  // a show-more toggle) then any still-queued prompts. Diff-guarded so an unrelated
+  // state frame (a pointer move) never rebuilds it mid-selection and kills a copy.
+  function renderPanelBody(e, p) {
+    const expandedHere = p.turns.filter((t) => expandedTurns.has(t.id)).map((t) => t.id);
+    const key = JSON.stringify({ turns: p.turns, pending: p.pending, expandedHere, self: p.isSelf });
+    if (key === e.bodyKey) return;
+    // Don't clobber an active selection inside this body (the viewer is copying).
+    const sel = window.getSelection();
+    if (e.bodyKey !== null && sel && !sel.isCollapsed && e.body.contains(sel.anchorNode)) return;
+    // "stick to bottom" only when already near the bottom before the rebuild.
+    const stick = e.bodyKey === null || e.body.scrollHeight - e.body.scrollTop - e.body.clientHeight < 40;
+    e.bodyKey = key;
+    e.body.innerHTML = '';
+
+    if (p.turns.length === 0 && p.pending.length === 0) {
+      e.body.append(
+        el('div', 'uw-empty', p.isSelf ? 'Your prompts and Claude’s replies show here. Enter to send.' : 'No prompts yet.'),
+      );
+      return;
+    }
+
+    for (const t of p.turns) {
+      const turn = el('div', 'uw-turn');
+      const promptLine = el('div', 'uw-line uw-prompt');
+      promptLine.append(el('span', 'uw-caret', '›'), document.createTextNode(' ' + t.prompt));
+      turn.append(promptLine);
+
+      if (t.running) {
+        turn.append(el('div', 'uw-resp running', 'Claude is working…'));
+      } else if (t.response) {
+        const resp = el('div', 'uw-resp');
+        const long = t.response.length > RESP_LIMIT;
+        const expanded = expandedTurns.has(t.id);
+        const shown = long && !expanded ? t.response.slice(0, RESP_LIMIT).trimEnd() + '…' : t.response;
+        resp.append(document.createTextNode(shown));
+        if (long) {
+          const more = el('button', 'uw-more', expanded ? 'show less' : 'show more');
+          more.type = 'button';
+          more.onclick = () => {
+            if (expandedTurns.has(t.id)) expandedTurns.delete(t.id);
+            else expandedTurns.add(t.id);
+            render();
+          };
+          resp.append(more);
         }
+        turn.append(resp);
       }
+      e.body.append(turn);
     }
+
+    for (const q of p.pending) {
+      const line = el('div', 'uw-line uw-queued');
+      line.append(el('span', 'uw-n', '#' + q.n), document.createTextNode(' ' + q.text));
+      line.append(el('span', 'uw-badge', 'queued'));
+      e.body.append(line);
+    }
+
+    if (stick) e.body.scrollTop = e.body.scrollHeight;
+  }
+
+  // The host routes a prompter's keys straight to Claude whenever they have no
+  // draft box open ("you're at the terminal"). A window input must therefore
+  // GUARANTEE a box exists before its keystrokes land, or the text leaks into
+  // Claude (and is never recorded as that person's turn). After each send the box
+  // is consumed, so we re-arm on the next keystroke. `draftArmed` bridges the state
+  // round-trip so we never spawn a second empty box while the first is in flight.
+  let draftArmed = false;
+  function myWindowBox(v) {
+    const mine = v?.panels.find((p) => p.isSelf);
+    if (!mine?.boxId) return null;
+    return v.drafts.find((d) => d.id === mine.boxId && !d.place) || null;
+  }
+  function ensureMyDraft() {
+    const v = lastState ? overlayView(lastState, selfId) : null;
+    const box = myWindowBox(v);
+    if (box) {
+      draftArmed = false;
+      // keep my caret in my own window box (not a floating box I also co-wrote)
+      if (!box.carets.some((c) => c.self)) {
+        sendMsg({ t: 'ui', action: { kind: 'caret', id: box.id, offset: box.text.length } });
+      }
+      return;
+    }
+    if (draftArmed) return; // already asked for one; it just hasn't echoed back yet
+    sendKey(NEW_DRAFT_BYTES);
+    draftArmed = true;
   }
 
   // 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('focus', () => ensureMyDraft());
     input.addEventListener('keydown', (e) => {
       const bytes = keyToBytes(e); // Enter → send, editing chords, printable chars
       if (bytes != null) {
         e.preventDefault();
+        // Ordered on the wire: the new-draft byte lands before this key, so the key
+        // always composes into my box instead of leaking to Claude.
+        if (e.key !== 'Escape') ensureMyDraft();
         sendKey(bytes);
         return;
       }
@@ -1325,7 +1487,10 @@ function main() {
     input.addEventListener('paste', (e) => {
       e.preventDefault();
       const text = (e.clipboardData || window.clipboardData)?.getData('text') || '';
-      if (text) sendKey(pasteBytes(text));
+      if (text) {
+        ensureMyDraft();
+        sendKey(pasteBytes(text));
+      }
     });
     // never let a local echo diverge from the brain's authoritative text
     input.addEventListener('input', () => {

package/packages/relay/public/index.html

@@ -85,6 +85,21 @@
       </div>
 
       <main class="workspace">
+        <!-- permission ask: the one thing a phone most needs to answer. Big Approve/
+             Deny buttons; on desktop it floats over the terminal, on narrow it leads
+             the column. Buttons send ordinary keystrokes (the role gate still applies). -->
+        <div id="ask-card" class="ask-card" hidden>
+          <div class="ask-head">
+            <span class="ask-badge">permission</span>
+            <span>Claude wants to use <b id="ask-tool">tool</b></span>
+          </div>
+          <div id="ask-summary" class="ask-summary" hidden></div>
+          <div id="ask-actions" class="ask-actions" hidden>
+            <button id="ask-approve" class="ask-btn yes" type="button">Approve</button>
+            <button id="ask-deny" class="ask-btn no" type="button">Deny</button>
+          </div>
+          <div id="ask-viewnote" class="ask-viewnote" hidden>waiting for someone who can type to answer</div>
+        </div>
         <!-- Claude's live session: the shared terminal everyone watches respond.
              Floating "+ draft" boxes (write a prompt TOGETHER) overlay it. -->
         <div id="stage">