crewforth 3.0.4 → 3.1.0-rc.2

package/kit/studio/web/chat.js

@@ -1,4 +1,4 @@
-// Conversations with sessions the panel owns.
+// Conversations with sessions the panel owns, and readings of the ones it does not.
 //
 // Each session gets a pane that keeps its own stream open whether or not it is
 // on screen, so a session working in the background is still working when you
@@ -8,8 +8,14 @@
 // while it is being written, and the complete `assistant` record once it is
 // done. Rendering both would double every message, so deltas only ever feed a
 // provisional bubble that the authoritative record replaces.
+//
+// What a message is made of — a delegation, a tool row and its summary, the
+// strip above the conversation — is decided in convo.js. This file draws it.
 
 import { renderMarkdown } from './md.js';
+import {
+  toolBlock, resultsIn, isDelegation, summaryOf, outputOf, delegationCard, reminderOf, headerOf, refusals,
+} from './convo.js';
 
 const el = (tag, cls, text) => {
   const n = document.createElement(tag);
@@ -45,10 +51,14 @@ export function quickReplies(text) {
 /* ========================================================== one session === */
 
 class Pane {
-  constructor(session, { api, headers, onChange, readOnly = false }) {
+  constructor(session, { api, headers, onChange, onPermissions, hooks = {}, readOnly = false }) {
     this.api = api;
     this.headers = headers;
     this.onChange = onChange;
+    this.onPermissions = onPermissions ?? (() => {});
+    // What the page lends a pane: who an agent is on the graph, and what the two ways out of a read-only
+    // conversation do. A pane does not know the canvas or the navigator.
+    this.hooks = hooks;
     this.readOnly = readOnly;
     this.session = session;
     this.id = session.sessionId;
@@ -57,28 +67,41 @@ class Pane {
     this.streaming = null;
     this.permissions = [];
     this.unread = 0;
+    this.contextTokens = null;
+    this.toolRows = new Map();     // tool_use id -> { block, row, sum, out }
+    this.cards = [];               // { block, node } for every delegation drawn
+    this.refused = new Set();      // tool_use ids already said to have been refused after an allowance
 
     this.root = el('div', 'pane');
-    this.root.innerHTML = `
-      <div class="chat-log"></div>
-      <div class="perm-queue" hidden></div>
-      <form class="chat-form">
-        <textarea class="chat-input" rows="2"
-          placeholder="Message this session…  (Enter to send, Shift+Enter for a newline)"></textarea>
-        <button class="chat-send" type="submit">send</button>
-      </form>
-      <div class="chat-ro" hidden>
-        <strong>Read-only.</strong> This session belongs to a terminal, and a Claude Code session
-        takes input from the process that owns it — the panel has no way in, and two writers on one
-        transcript would corrupt it. <strong>⑂ fork &amp; continue</strong> makes a copy the panel
-        <em>does</em> own; messages there stay there and never reach your terminal.
-      </div>`;
-
-    this.logEl = this.root.querySelector('.chat-log');
-    this.permEl = this.root.querySelector('.perm-queue');
-    this.formEl = this.root.querySelector('.chat-form');
-    this.inputEl = this.root.querySelector('.chat-input');
-    this.roEl = this.root.querySelector('.chat-ro');
+
+    this.headEl = el('div', 'pane-head');
+    this.logEl = el('div', 'chat-log');
+
+    // A request waiting in this session, said where the conversation is being read.
+    this.remindEl = el('div', 'chat-remind');
+    this.remindEl.hidden = true;
+    this.remindText = el('span', 'chat-remind-text');
+    const review = el('button', 'chat-review', 'Review');
+    review.type = 'button';
+    review.addEventListener('click', () => this.hooks.onReview?.(this));
+    this.remindEl.append(el('span', 'dot'), this.remindText, review);
+    this.remindEl.firstChild.dataset.tone = 'waiting';
+
+    this.formEl = el('form', 'chat-form');
+    this.inputEl = el('textarea', 'chat-input');
+    this.inputEl.rows = 3;
+    this.inputEl.placeholder = 'Message this session';
+    this.inputEl.setAttribute('aria-label', 'Message this session');
+    const formFoot = el('div', 'chat-form-foot');
+    const send = el('button', 'btn sm primary chat-send', 'Send');
+    send.type = 'submit';
+    formFoot.append(el('span', 'sub', 'Enter to send · Shift+Enter for a new line'), el('span', 'row-fill'), send);
+    this.formEl.append(this.inputEl, formFoot);
+
+    this.roEl = el('div', 'chat-ro');
+    this.roEl.hidden = true;
+
+    this.root.append(this.headEl, this.logEl, this.remindEl, this.formEl, this.roEl);
 
     this.formEl.addEventListener('submit', (e) => { e.preventDefault(); this.send(); });
     this.inputEl.addEventListener('keydown', (e) => {
@@ -89,9 +112,11 @@ class Pane {
       this.formEl.hidden = true;
       this.roEl.hidden = false;
       this.root.classList.add('pane-readonly');
+      this.paintReadOnly();
     } else {
       this.connect();
     }
+    this.paintHead();
     this.loadHistory();
   }
 
@@ -122,7 +147,7 @@ class Pane {
     if (conv.truncated) {
       frag.append(el('div', 'chat-note', `${conv.total - conv.messages.length} earlier message(s) not shown`));
     }
-    for (const m of conv.messages ?? []) frag.append(this.renderMessage(m));
+    for (const m of conv.messages ?? []) frag.append(this.renderMessage(m, { quick: false }));
     if (!this.readOnly) {
       // A visible seam, so nobody reads the history as part of this run — and
       // named for which of the two things actually happened. A fork that calls
@@ -179,16 +204,20 @@ class Pane {
     if (rec.parent_tool_use_id) return;
 
     if (rec.type === 'permissions') {
+      // The requests themselves are drawn by the approval dock, under the canvas: one place for every session,
+      // whichever conversation is in front. This pane keeps the count for its tab.
       this.permissions = rec.pending ?? [];
-      this.paintPermissions();
+      this.onPermissions(this, rec);
       this.onChange(this);
       return;
     }
 
     if (rec.type === 'user' && rec.message?.content) {
-      const text = typeof rec.message.content === 'string'
-        ? rec.message.content
-        : rec.message.content.filter((c) => c?.type === 'text').map((c) => c.text).join('');
+      const c = rec.message.content;
+      // What a tool came back with arrives as a user record. It is not something the viewer said: it goes to
+      // the row of the call it answers.
+      for (const [id, result] of resultsIn(c)) this.setResult(id, result);
+      const text = typeof c === 'string' ? c : c.filter((x) => x?.type === 'text').map((x) => x.text).join('');
       if (text.trim()) { this.clearPending(); this.push({ role: 'user', text }); }
       return;
     }
@@ -198,14 +227,7 @@ class Pane {
       const blocks = [];
       for (const c of rec.message.content) {
         if (c?.type === 'text' && c.text?.trim()) blocks.push({ kind: 'text', text: c.text });
-        else if (c?.type === 'tool_use') {
-          const i = c.input ?? {};
-          blocks.push({
-            kind: 'tool',
-            name: c.name ?? 'tool',
-            label: i.description ?? i.file_path ?? i.command ?? i.pattern ?? i.query ?? null,
-          });
-        }
+        else if (c?.type === 'tool_use') blocks.push(toolBlock(c));
       }
       if (blocks.length) {
         this.push({ role: 'assistant', blocks });
@@ -214,7 +236,12 @@ class Pane {
       return;
     }
 
-    if (rec.type === 'result') { this.streaming = null; this.paintStreaming(); return; }
+    if (rec.type === 'result') {
+      this.streaming = null;
+      this.paintStreaming();
+      this.noteRefusals(rec.permission_denials);
+      return;
+    }
     if (rec.type === 'fault' || rec.type === 'stderr') this.note(rec.reason ?? rec.text, 'bad');
   }
 
@@ -228,52 +255,166 @@ class Pane {
 
   /* --------------------------------------------------------- rendering */
 
-  renderMessage(msg) {
+  renderMessage(msg, { quick = true } = {}) {
     const wrap = el('div', `msg msg-${msg.role}`);
-    wrap.append(el('div', 'msg-role', msg.role === 'user' ? 'you' : 'claude'));
 
-    const body = el('div', 'msg-body');
     if (msg.role === 'user') {
-      body.append(el('div', 'msg-text', msg.text));
-    } else {
-      for (const b of msg.blocks) {
-        if (b.kind === 'text') {
-          const md = el('div', 'md');
-          md.innerHTML = renderMarkdown(b.text);
-          body.append(md);
-        } else {
-          const card = el('div', 'tool-card');
-          card.append(el('span', 'tool-name', b.name));
-          if (b.label) card.append(el('span', 'tool-label', String(b.label).slice(0, 200)));
-          body.append(card);
-        }
+      wrap.append(el('div', 'msg-body msg-text', msg.text));
+      return wrap;
+    }
+
+    wrap.append(el('div', 'msg-role', 'Session'));
+    const body = el('div', 'msg-body');
+    for (const b of msg.blocks) {
+      if (b.kind === 'text') {
+        const md = el('div', 'md');
+        md.innerHTML = renderMarkdown(b.text);
+        body.append(md);
+      } else if (isDelegation(b)) {
+        body.append(this.renderDelegation(b));
+      } else {
+        body.append(this.renderTool(b));
       }
     }
     wrap.append(body);
 
-    if (msg.role === 'assistant') {
+    // Options are offered on the reply that is waiting for an answer, not on every list in the history.
+    if (quick && !this.readOnly) {
       const last = msg.blocks?.filter((b) => b.kind === 'text').pop();
       const opts = quickReplies(last?.text);
       if (opts.length) {
         const row = el('div', 'quick');
-        row.append(el('span', 'quick-hint', 'reply with'));
         for (const o of opts) {
-          const b = el('button', 'quick-btn', o);
-          b.addEventListener('click', () => { row.remove(); this.inputEl.value = o; this.send(); });
+          const b = el('button', 'btn sm quick-btn', o);
+          b.type = 'button';
+          b.addEventListener('click', () => { row.remove(); this.sendText(o); });
           row.append(b);
         }
+        row.append(el('span', 'sub quick-hint', 'Clicking an option sends it as your reply.'));
         wrap.append(row);
       }
     }
     return wrap;
   }
 
+  /** A tool call on one line: the tool, what it was run on, and how it ended. The output opens under it. */
+  renderTool(block) {
+    const box = el('div', 'tool');
+    const row = el('button', 'tool-row');
+    row.type = 'button';
+    row.setAttribute('aria-expanded', 'false');
+    const sum = el('span', 'tool-sum');
+    row.append(el('span', 'tool-name', block.name));
+    if (block.label) row.append(el('span', 'tool-label', String(block.label).slice(0, 200)));
+    row.append(sum);
+    const out = el('pre', 'tool-out');
+    out.hidden = true;
+    row.addEventListener('click', () => {
+      const text = outputOf(block);
+      // A call that has not come back has nothing to open, and says which it is rather than opening an empty box.
+      out.textContent = text ?? (this.readOnly ? 'Output not read from the transcript.' : 'Not returned yet.');
+      out.hidden = !out.hidden;
+      row.setAttribute('aria-expanded', String(!out.hidden));
+    });
+    box.append(row, out);
+    const entry = { block, row, sum, out };
+    if (block.id) this.toolRows.set(block.id, entry);
+    this.paintTool(entry);
+    return box;
+  }
+
+  paintTool({ block, row, sum, out }) {
+    const s = summaryOf(block);
+    row.dataset.state = s.state;
+    sum.textContent = s.text ?? '';
+    sum.hidden = s.text == null;
+    if (!out.hidden) out.textContent = outputOf(block) ?? '';
+  }
+
+  /** Say which calls were allowed in the dock and refused by Claude Code after it. Each is said once. */
+  noteRefusals(denials) {
+    const list = refusals(
+      denials,
+      (toolUseId, toolName) => !this.refused.has(toolUseId) && Boolean(this.hooks.wasAllowed?.(this.id, toolUseId, toolName)),
+      (toolUseId) => this.toolRows.get(toolUseId)?.block.result ?? null,
+    );
+    for (const r of list) {
+      this.refused.add(r.id);
+      const row = this.toolRows.get(r.id)?.row;
+      if (row) row.dataset.state = 'refused';
+      this.note(r.text, 'bad');
+    }
+  }
+
+  /** A tool's result has arrived for a call already on screen. */
+  setResult(id, result) {
+    const entry = this.toolRows.get(id);
+    if (!entry) return;
+    entry.block.result = result;
+    this.paintTool(entry);
+  }
+
+  /** The session handing work to an agent: a card that goes to that agent on the graph. */
+  renderDelegation(block) {
+    const node = el('button', 'deleg');
+    node.type = 'button';
+    node.addEventListener('click', () => {
+      const card = delegationCard(block, this.hooks.agentsOf?.(this.id));
+      if (card.agentId) this.hooks.onAgent?.(this, card.agentId);
+    });
+    const entry = { block, node };
+    this.cards.push(entry);
+    this.paintCard(entry);
+    return node;
+  }
+
+  paintCard({ block, node }) {
+    const card = delegationCard(block, this.hooks.agentsOf?.(this.id));
+    const sig = `${card.type}|${card.task}|${card.agentId}|${card.status}`;
+    if (node.sig === sig) return;
+    node.sig = sig;
+    const text = el('span', 'deleg-text');
+    text.append(el('span', 'deleg-type', card.type), el('span', 'deleg-task', card.task));
+    const parts = [];
+    const tile = card.agentId ? this.hooks.tileOf?.(this.id, card.agentId) : null;
+    if (tile) parts.push(tile);
+    parts.push(text);
+    // The agent's state is the graph's. Before the graph has seen the agent there is none to show.
+    const st = card.agentId ? this.hooks.statusOf?.(this.id, card.agentId) : null;
+    if (st?.word) {
+      const pill = el('span', 'pill');
+      const d = el('span', 'dot');
+      d.dataset.tone = st.tone ?? 'none';
+      pill.append(d, el('span', null, st.word));
+      parts.push(pill);
+    }
+    node.replaceChildren(...parts);
+    node.disabled = !card.agentId;
+    node.title = card.agentId ? 'Show this agent on the graph' : 'This agent is not on the graph being shown';
+  }
+
+  /** The graph moved: the cards say what their agents are doing now. */
+  refreshAgents() { for (const c of this.cards) this.paintCard(c); }
+
+  /** Which of this session's tool calls are waiting on the viewer. */
+  setWaiting(items) {
+    const text = reminderOf(items);
+    this.remindEl.hidden = !text;
+    this.remindText.textContent = text ?? '';
+  }
+
+  setContext(tokens) {
+    if (tokens === this.contextTokens) return;
+    this.contextTokens = tokens;
+    this.paintHead();
+  }
+
   paintStreaming() {
     let node = this.logEl.querySelector('.msg-streaming');
     if (!this.streaming) { node?.remove(); return; }
     if (!node) {
       node = el('div', 'msg msg-assistant msg-streaming');
-      node.append(el('div', 'msg-role', 'claude'));
+      node.append(el('div', 'msg-role', 'Session'));
       node.append(el('div', 'msg-body'));
       this.logEl.append(node);
     }
@@ -287,40 +428,75 @@ class Pane {
     this.scroll();
   }
 
-  paintPermissions() {
-    const list = this.permissions ?? [];
-    this.permEl.hidden = list.length === 0;
-    if (!list.length) { this.permEl.replaceChildren(); return; }
-
-    const wait = this.session?.gateWaitSeconds ?? null;
-    const frag = document.createDocumentFragment();
-    for (const r of list) {
-      const card = el('div', 'perm');
-      const head = el('div', 'perm-head');
-      head.append(el('span', 'perm-tool', r.toolName));
-      // The clock is part of the decision: silence becomes a denial, and the
-      // reader should see that coming rather than discover it.
-      if (wait) {
-        const left = Math.max(0, wait - Math.round((Date.now() - r.askedAt) / 1000));
-        head.append(el('span', 'perm-clock', `${left}s → deny`));
-      }
-      card.append(head);
-      if (r.detail) card.append(el('pre', 'perm-detail', String(r.detail).slice(0, 600)));
-
-      const acts = el('div', 'perm-acts');
-      for (const [verdict, label, cls] of [
-        ['allow', 'allow once', 'ok'],
-        ['always', `always allow ${r.toolName}`, ''],
-        ['deny', 'deny', 'bad'],
-      ]) {
-        const b = el('button', `perm-btn ${cls}`, label);
-        b.addEventListener('click', () => this.decide(r.toolUseId, verdict, card));
-        acts.append(b);
-      }
-      card.append(acts);
-      frag.append(card);
+  /** The strip above the conversation: started here or read only, the mode, how far it has gone, and Stop. */
+  paintHead() {
+    const s = this.session;
+    const h = headerOf(s, { readOnly: this.readOnly, contextTokens: this.contextTokens });
+    const badge = el('span', 'pill pane-badge');
+    const d = el('span', 'dot');
+    d.dataset.tone = h.tone;
+    badge.append(d, el('span', null, h.badge));
+    const parts = [badge];
+    for (const p of h.parts) parts.push(el('span', 'sub', p));
+    if (h.ungated) {
+      const warn = el('span', 'pill pane-ungated', 'No approval gate');
+      warn.title = 'This session was started without the approval gate: its tool calls do not wait for you.';
+      parts.push(warn);
     }
-    this.permEl.replaceChildren(frag);
+    parts.push(el('span', 'row-fill'));
+    if (!this.readOnly && s?.costUsd) {
+      const cost = el('span', 'sub pane-cost', `$${s.costUsd.toFixed(4)}`);
+      cost.title = 'What this session has cost, as the CLI reported it';
+      parts.push(cost);
+    }
+    // Stopping ends the process. It is offered for as long as there is one.
+    if (!this.readOnly && s && s.state !== 'exited' && s.state !== 'failed') {
+      const stop = el('button', 'btn sm chat-stop');
+      stop.type = 'button';
+      stop.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1.5"/></svg>';
+      stop.append(el('span', null, 'Stop'));
+      stop.addEventListener('click', () => this.stop());
+      parts.push(stop);
+    }
+    this.headEl.replaceChildren(...parts);
+  }
+
+  /**
+   * The foot of a conversation Studio only reads: why there is no message box, and the two ways on.
+   *
+   * What "Continue here" does depends on something this page learns only by doing it: a session nothing else
+   * holds is continued itself; one still open somewhere is copied. Both are said, because a copy that reads as
+   * "you are now typing into that session" is the one thing it is not.
+   */
+  paintReadOnly() {
+    const lead = el('p', 'chat-ro-lead');
+    lead.append(el('strong', null, 'This session was not started here.'),
+      ' Studio can read it but cannot write to it or answer its approvals.');
+
+    const cont = el('button', 'btn sm primary', 'Continue here');
+    cont.type = 'button';
+    cont.addEventListener('click', () => this.hooks.onContinue?.(this, cont));
+    const contRow = el('div', 'chat-ro-row');
+    contRow.append(cont, el('span', 'sub',
+      'Continues it in Studio. If it is still open somewhere else, Studio starts a copy instead: '
+      + 'the original does not see this, and messages here never reach your terminal.'));
+
+    const term = el('button', 'btn sm', 'Open in terminal');
+    term.type = 'button';
+    term.addEventListener('click', (e) => { e.stopPropagation(); this.hooks.onTerminal?.(this, term); });
+    const line = el('code', 'chat-ro-cmd');
+    const termText = el('span', 'sub');
+    termText.append('Shows the command first, then opens a terminal: ', line);
+    const termRow = el('div', 'chat-ro-row');
+    termRow.append(term, termText);
+
+    this.roEl.replaceChildren(lead, contRow, termRow);
+
+    // The command is the server's, read before anything runs. One that could not be worked out is said so.
+    fetch(this.api(`/api/session/${encodeURIComponent(this.id)}/terminal`), { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((r) => { line.textContent = r?.plan?.line ?? 'not measured — no working directory recorded'; })
+      .catch((e) => { line.textContent = `not read — ${e.message}`; });
   }
 
   paintState() {
@@ -328,6 +504,7 @@ class Pane {
     const dead = s.state === 'exited' || s.state === 'failed';
     this.formEl.hidden = false;
     this.inputEl.disabled = dead;
+    this.paintHead();
   }
 
   note(text, kind = '') { this.logEl.append(el('div', `chat-note ${kind}`, text)); this.scroll(); }
@@ -342,7 +519,6 @@ class Pane {
   pending(text) {
     this.clearPending();
     const wrap = el('div', 'msg msg-user msg-pending');
-    wrap.append(el('div', 'msg-role', 'you'));
     wrap.append(el('div', 'msg-body msg-text', text));
     this.logEl.append(wrap);
     this.scroll();
@@ -352,10 +528,14 @@ class Pane {
 
   /* ------------------------------------------------------------ actions */
 
-  async send() {
+  send() {
     const text = this.inputEl.value.trim();
-    if (!text) return;
+    if (!text) return null;
     this.inputEl.value = '';
+    return this.sendText(text);
+  }
+
+  async sendText(text) {
     // No optimistic bubble. The session is started with --replay-user-messages,
     // so it echoes what it actually received; drawing our own copy as well
     // printed every message twice.
@@ -369,18 +549,7 @@ class Pane {
 
     if (!res.ok) { this.clearPending(); this.note(`Not sent: ${res.reason}`, 'bad'); }
     else { this.session = res.session; this.paintState(); this.onChange(this); }
-  }
-
-  async decide(toolUseId, verdict, card) {
-    for (const b of card.querySelectorAll('button')) b.disabled = true;
-    const res = await fetch(
-      this.api(`/api/owned/${encodeURIComponent(this.id)}/permissions/${encodeURIComponent(toolUseId)}`),
-      { method: 'POST', headers: { 'content-type': 'application/json', ...this.headers }, body: JSON.stringify({ verdict }) },
-    ).then((r) => r.json()).catch((e) => ({ ok: false, reason: e.message }));
-    if (!res.ok) {
-      this.note(`Decision not recorded: ${res.reason}`, 'bad');
-      for (const b of card.querySelectorAll('button')) b.disabled = false;
-    }
+    return res;
   }
 
   async stop() {
@@ -393,36 +562,36 @@ class Pane {
 /* ============================================================== the tabs === */
 
 export class Chat {
-  constructor(root, { api, headers }) {
+  /**
+   * @param hooks what the page lends the conversation: `nameOf(sessionId)`, `agentsOf(sessionId)`,
+   *              `tileOf(sessionId, agentId)`, `statusOf(sessionId, agentId)`, `onAgent(pane, agentId)`,
+   *              `onReview(pane)`, `onContinue(pane, button)`, `onTerminal(pane, button)`
+   */
+  constructor(root, { api, headers, hooks = {} }) {
     this.root = root;
     this.api = api;
     this.headers = headers;
+    this.hooks = hooks;
     this.panes = new Map();
     this.activeId = null;
     this.onActivate = () => {};
+    // (pane, { pending }) — a session's waiting requests changed.
+    this.onPermissions = () => {};
 
     this.root.innerHTML = `
       <div class="chat-head">
-        <div class="tabs"></div>
-        <span class="chat-state"></span>
-        <span class="chat-cost"></span>
-        <button class="ghost pin chat-grow" type="button" title="Widen the conversation">⇤</button>
-        <button class="ghost chat-stop" type="button" hidden>stop</button>
+        <div class="tabs" role="tablist" aria-label="Conversations"></div>
+        <button class="btn icon sm ghost chat-grow" type="button" aria-label="Widen the conversation" title="Widen the conversation">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 4l-4 4 4 4M13 4l-4 4 4 4"/></svg>
+        </button>
       </div>
       <div class="panes"></div>`;
 
     this.tabsEl = this.root.querySelector('.tabs');
     this.panesEl = this.root.querySelector('.panes');
-    this.stateEl = this.root.querySelector('.chat-state');
-    this.costEl = this.root.querySelector('.chat-cost');
-    this.stopEl = this.root.querySelector('.chat-stop');
-    this.stopEl.addEventListener('click', () => this.active?.stop?.());
     this.growEl = this.root.querySelector('.chat-grow');
     this.onGrow = () => {};
     this.growEl.addEventListener('click', () => this.onGrow());
-
-    // Countdowns have to move on their own; nothing else re-renders them.
-    setInterval(() => { if (this.active?.permissions?.length) this.active.paintPermissions(); }, 1000);
   }
 
   get active() { return this.activeId ? this.panes.get(this.activeId) : null; }
@@ -446,7 +615,7 @@ export class Chat {
     if (!pane) {
       pane = new Pane(
         { sessionId, state: 'observed', permissionMode: 'read-only', gated: false, title },
-        { api: this.api, headers: this.headers, onChange: () => this.paintTabs(), readOnly: true },
+        { api: this.api, headers: this.headers, hooks: this.hooks, onChange: () => this.paintTabs(), readOnly: true },
       );
       this.panesEl.append(pane.root);
       this.panes.set(sessionId, pane);
@@ -457,8 +626,19 @@ export class Chat {
 
   open(session) {
     let pane = this.panes.get(session.sessionId);
+    // Continuing a session in place keeps its id. The pane that was only reading it has no stream and no way
+    // to send, so it is replaced: left as it was, the session would be owned and still say "read only".
+    if (pane?.readOnly) {
+      pane.disconnect();
+      pane.root.remove();
+      this.panes.delete(session.sessionId);
+      pane = null;
+    }
     if (!pane) {
-      pane = new Pane(session, { api: this.api, headers: this.headers, onChange: () => this.paintTabs() });
+      pane = new Pane(session, {
+        api: this.api, headers: this.headers, hooks: this.hooks, onChange: () => this.paintTabs(),
+        onPermissions: (p, rec) => this.onPermissions(p, rec),
+      });
       this.panesEl.append(pane.root);
       this.panes.set(session.sessionId, pane);
     }
@@ -474,8 +654,7 @@ export class Chat {
       if (pid === id) p.unread = 0;
     }
     this.paintTabs();
-    const a = this.active;
-    a?.inputEl?.focus();
+    this.active?.inputEl?.focus();
     this.onActivate(id);
   }
 
@@ -496,20 +675,35 @@ export class Chat {
     }
   }
 
+  /** The graph of one session moved: its pane's delegation cards and context figure follow. */
+  refresh(sessionId, { contextTokens = null } = {}) {
+    const pane = this.panes.get(sessionId);
+    if (!pane) return;
+    pane.refreshAgents();
+    if (contextTokens != null) pane.setContext(contextTokens);
+  }
+
+  /** What is waiting on the viewer, as the approval queue has it: each pane is told its own share. */
+  setWaiting(queue) {
+    for (const [id, pane] of this.panes) pane.setWaiting((queue ?? []).filter((r) => r.sessionId === id));
+  }
+
   paintTabs() {
     const frag = document.createDocumentFragment();
     for (const [id, p] of this.panes) {
-      const tab = el('button', `tab${id === this.activeId ? ' on' : ''}`);
+      const tab = el('button', 'tab');
       tab.type = 'button';
+      tab.setAttribute('role', 'tab');
+      tab.setAttribute('aria-selected', String(id === this.activeId));
       const dot = el('span', 'tab-dot');
       dot.dataset.state = p.session?.state ?? 'unknown';
       tab.append(dot);
-      const label = p.readOnly ? `👁 ${p.session?.title ? String(p.session.title).slice(0, 18) : shortId(id)}`
-          : (p.session?.resumedFrom ? `↩ ${shortId(p.session.resumedFrom)}` : shortId(id));
-      tab.append(el('span', 'tab-name', label));
+      // The name the navigator gives the session; its id only when it has none yet.
+      const name = this.hooks.nameOf?.(id) ?? p.session?.title ?? shortId(id);
+      tab.append(el('span', 'tab-name', String(name).slice(0, 28)));
       if (p.permissions?.length) tab.append(el('span', 'tab-badge warn', String(p.permissions.length)));
       else if (p.unread) tab.append(el('span', 'tab-badge', String(p.unread)));
-      tab.title = `${id}\n${p.session?.state ?? ''} · ${p.session?.permissionMode ?? ''}`;
+      tab.title = `${name}\n${id}\n${p.readOnly ? 'read only' : `${p.session?.state ?? ''} · ${p.session?.permissionMode ?? ''}`}`;
       tab.addEventListener('click', () => this.activate(id));
 
       const x = el('span', 'tab-x', '×');
@@ -519,24 +713,7 @@ export class Chat {
       frag.append(tab);
     }
     this.tabsEl.replaceChildren(frag);
-
-    const a = this.active;
-    const s = a?.session;
-    if (a?.readOnly) {
-      this.stateEl.textContent = 'observed · read-only';
-      this.stateEl.dataset.state = 'observed';
-      this.stateEl.classList.remove('ungated');
-      this.costEl.textContent = '';
-      this.stopEl.hidden = true;
-      return;
-    }
-    this.stateEl.textContent = s
-      ? `${s.state} · ${s.permissionMode}${s.gated ? '' : ' · NO GATE'}`
-      : 'no session';
-    this.stateEl.dataset.state = s?.state ?? 'none';
-    this.stateEl.classList.toggle('ungated', Boolean(s) && !s.gated);
-    this.costEl.textContent = s?.costUsd ? `$${s.costUsd.toFixed(4)}` : '';
-    this.stopEl.hidden = !s || s.state === 'exited' || s.state === 'failed';
+    for (const p of this.panes.values()) p.paintHead();
   }
 }