crewforth 3.1.0-rc.4 → 3.1.0-rc.6

package/kit/studio/web/app.js

@@ -23,9 +23,13 @@ import { NewSession } from './newsession.js';
 import { Timeline } from './timeline.js';
 import { List } from './list.js';
 import { defaultView, narrowWarning } from './list-plan.js';
+import { Models } from './models.js';
+import { cardOf, cardLines, workSteps } from './models-plan.js';
 import { fitLevel, runsOver } from './toolbar-fit.js';
-import { roleName, shownType } from './names.js';
-import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
+import { roleName, shownType, modelFamily } from './names.js';
+import { shortcutOf } from './keys.js';
+import { SESSION_MODES } from './convo.js';
+import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, modelLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
 
 const FLEET_POLL_MS = 2000;
 const SESSION_POLL_MS = 5000;
@@ -67,11 +71,14 @@ const el = {
   tbZoom: document.getElementById('tb-zoom'),
   tbZoomIn: document.getElementById('tb-zoom-in'),
   tbFit: document.getElementById('tb-fit'),
+  tbReset: document.getElementById('tb-reset'),
   canvasEl: document.getElementById('canvas'),
   timeline: document.getElementById('timeline'),
   viewGraph: document.getElementById('view-graph'),
   viewTimeline: document.getElementById('view-timeline'),
   viewList: document.getElementById('view-list'),
+  viewModels: document.getElementById('view-models'),
+  models: document.getElementById('models'),
   list: document.getElementById('list'),
   firstRun: document.getElementById('first-run'),
   stageNote: document.getElementById('stage-note'),
@@ -289,6 +296,10 @@ const chat = new Chat(el.chat, {
       (outcomes.get(sessionId) ?? []).some((o) => o.toolUseId === toolUseId && o.outcome.startsWith('allowed'))
       || (owned.get(sessionId)?.alwaysAllowed ?? []).includes(toolName),
     onContinue: (pane, button) => continueHere(button, pane.id),
+    // The mode in the strip: the three a session can be started in, and the one it is in now is marked.
+    onMode: (pane, button, now) => openMenu(button, SESSION_MODES.map((m) => ({
+      label: m.label, title: m.title, checked: m.mode === now, run: () => setSessionMode(pane.id, m.mode),
+    }))),
     onTerminal: (pane, button) => offerTerminal(button, pane.id),
   },
 });
@@ -438,17 +449,37 @@ function paintToolbar(st) {
   tbValue.group.textContent = GROUP_WORD[st.group] ?? st.group;
   // The grouping is one choice for both views: the Timeline's rows follow the graph's.
   timeline.setGroup(st.group);
-  tbValue.density.textContent = DENSITY_WORD[st.density] ?? st.density;
+  // When Auto has turned the cards into chips the button says so: the picture did not fit this pane as cards.
+  tbValue.density.textContent = st.density === 'auto' && st.drawnAs === 'compact' ? 'Auto \u00b7 compact' : (DENSITY_WORD[st.density] ?? st.density);
   // Auto is a choice the canvas makes; say which one it made, and why.
   el.tbDensity.title = st.density === 'auto' && st.drawnAs
     ? `Auto: ${st.drawnAs}${st.stacked ? ', agents of one type folded together' : ''}. `
-      + `Cards stay cards while the picture is no taller than ${AUTO.tallest}px.`
+      + `Cards stay cards while the picture fits this pane at ${Math.round(AUTO.readable * 100)}% or larger; choose Comfortable to keep them anyway.`
     : '';
   const pct = `${Math.round(st.zoom * 100)}%`;
   el.tbZoom.textContent = pct;
   el.tbZoom.setAttribute('aria-label', `Zoom ${pct}. Back to 100%`);
-  el.tbExpand.disabled = st.groups === 0;
-  el.tbFold.disabled = st.groups === 0;
+  // Enabled only while a card has been moved: with none there is nothing to reset.
+  if (el.tbReset) el.tbReset.disabled = !(st?.moved > 0);
+  paintFoldButtons();
+}
+
+/* Expand all and Fold all act on the view that is open: the graph's groups, the Timeline's, the List's sections.
+   Each is enabled only while it has something left to do there, so the pair always says what is true. */
+const foldTarget = () => (view === 'timeline' ? timeline : view === 'list' ? list : null);
+function foldState() {
+  const t = foldTarget();
+  if (t) return t.foldState();
+  const st = canvas.state();
+  return { groups: st.groups, canExpand: st.canExpand, canFold: st.canFold };
+}
+function paintFoldButtons() {
+  // The canvas reports its state while it is being built, before the view and the other two views exist; a
+  // `let` or `const` that has not been reached yet throws on any read, `typeof` included.
+  let s;
+  try { s = foldState(); } catch { return; }
+  el.tbExpand.disabled = !s.canExpand;
+  el.tbFold.disabled = !s.canFold;
 }
 
 // Made before the canvas: the canvas reports its state while it is being built, and the toolbar passes the
@@ -461,7 +492,8 @@ const timeline = new Timeline(el.timeline, {
   onSelect: (n) => { if (n?.kind === 'agent') loadDetail(n.id, n.status); },
   onShowOnGraph: (n) => { setView('graph', n.id); },
   onOpenConversation: () => { if (current) openConversation(current); },
-  onChange: paintTimelineBar,
+  // A group folded or opened by hand changes what Expand all and Fold all have left to do, at once.
+  onChange: (st) => { paintTimelineBar(st); paintFoldButtons(); },
   fmt: { duration: fmtDuration, tokens: fmtTokens },
 });
 // Bars are placed on the server's clock: the timestamps they are drawn from are that machine's.
@@ -480,7 +512,7 @@ const canvas = new Canvas(document.getElementById('canvas'), {
         : { label: 'Focus on this branch', run: () => canvas.setFocus(n.id) });
       items.push({ label: 'Copy agent id', run: () => copyText(n.id, 'Copied the agent id') });
     }
-    if (at.pinned) items.push({ label: 'Reset layout', run: () => canvas.resetLayout() });
+    if (at.pinned) items.push({ label: 'Reset layout', run: () => resetLayout() });
     if (!items.length) return;
     openMenu({ getBoundingClientRect: () => ({ left: at.x, bottom: at.y }) }, items);
   },
@@ -506,7 +538,25 @@ pickFrom(el.tbGroup, GROUP_WORD, () => canvas.state().group, (g) => canvas.setGr
 canvas.setAside(!railBand.matches);
 railBand.addEventListener('change', () => canvas.setAside(!railBand.matches));
 pickFrom(el.tbDensity, DENSITY_WORD, () => canvas.state().density, (d) => canvas.setDensity(d));
-pickFrom(el.tbShow, SHOW, () => show, (key) => setShow(key));
+// Show: by state, and by the model the work ran on. The two are separate choices and both hold at once.
+let showModel = null;
+function setShowModel(family) {
+  showModel = family;
+  canvas.setModelFilter(family);
+  timeline.setModelFilter(family);
+  list.render?.();
+  tbValue.show.textContent = [SHOW[show].word, family ? `${family[0].toUpperCase()}${family.slice(1)}` : null].filter(Boolean).join(' \u00b7 ');
+}
+el.tbShow.addEventListener('click', (e) => {
+  e.stopPropagation();
+  const items = Object.entries(SHOW).map(([key, w]) => ({ label: w.word, checked: show === key, run: () => { setShow(key); setShowModel(showModel); } }));
+  const families = [...new Set((lastNodes ?? []).filter((n) => n.kind === 'agent').map((n) => modelFamily(n.model)).filter(Boolean))].sort();
+  if (families.length) {
+    items.push({ note: 'Model' }, { label: 'Every model', checked: showModel === null, run: () => setShowModel(null) },
+      ...families.map((f) => ({ label: `Only ${f[0].toUpperCase()}${f.slice(1)}`, checked: showModel === f, run: () => setShowModel(f) })));
+  }
+  openMenu(el.tbShow, items);
+});
 // The toolbar is measured, not assumed: it gives up a step at a time until what it shows fits (toolbar-fit.js).
 // Every step is tried from the first, so a toolbar that has room again takes its words back.
 function fitToolbar() {
@@ -556,13 +606,21 @@ el.tbOptions.addEventListener('click', (e) => {
   }
   openMenu(el.tbOptions, items);
 });
-el.tbExpand.addEventListener('click', () => canvas.expandAll());
-el.tbFold.addEventListener('click', () => canvas.foldAll());
+el.tbExpand.addEventListener('click', () => { (foldTarget() ?? canvas).expandAll(); paintFoldButtons(); });
+el.tbFold.addEventListener('click', () => { (foldTarget() ?? canvas).foldAll(); paintFoldButtons(); });
 el.tbZoomOut.addEventListener('click', () => canvas.zoomBy(1 / 1.2));
 el.tbZoomIn.addEventListener('click', () => canvas.zoomBy(1.2));
 el.tbZoom.addEventListener('click', () => canvas.zoomTo(1));
 el.tbFit.addEventListener('click', () => canvas.fit());
 
+/* Reset layout: the cards moved by hand go back where the layout puts them, and for a moment that can be undone. */
+function resetLayout() {
+  const was = canvas.resetLayout();
+  if (!was) return;
+  toast('Layout reset', { label: 'Undo', run: () => { if (canvas.restoreLayout(was)) toast('Layout restored'); } });
+}
+el.tbReset.addEventListener('click', resetLayout);
+
 /* --------------------------------------------------------------- views
    The same session two ways: where its agents are, and when they were. The choice of what is selected, how it is
    grouped and what is shown is one choice, kept across the switch. */
@@ -571,13 +629,65 @@ let view = 'graph';
 
 // The List: the same agents by what they need from the reader. A waiting request is a card with its own three
 // answers there, so the dock stands down while the List is the view.
+/* Which model did which class of work in this project (Crewforth's own record), and the holds that could be lowered.
+   Read only: lowering a hold is a Crewforth command the user runs in their own session, never a request from here. */
+let modelsData = null;
+let modelsFor = null;
+let modelsAt = 0;
+const models = new Models(el.models, {
+  onCopy: (text) => navigator.clipboard.writeText(text).then(() => toast('Copied — send it in your own session to lower the hold'), () => toast(`Not copied — select it: ${text}`)),
+});
+let modelsBusy = false;
+async function loadModels(force = false) {
+  if (!current) return;
+  // One request at a time: a slow answer is not asked for again by the next tick, and an answer for a session the
+  // viewer has left is dropped.
+  if (modelsBusy) return;
+  if (!force && modelsFor === current && Date.now() - modelsAt < MODELS_POLL_MS) return;
+  const asked = current;
+  modelsAt = Date.now();
+  modelsBusy = true;
+  let data;
+  try { data = await getJson(`/api/models?session=${encodeURIComponent(asked)}`); } catch (e) { data = { measured: false, reason: e.message, classes: [], suggestions: [], byAgent: {} }; }
+  finally { modelsBusy = false; }
+  if (asked !== current) return;
+  const changed = JSON.stringify(data) !== JSON.stringify(modelsData) || modelsFor !== asked;
+  modelsFor = asked;
+  modelsData = data;
+  if (!changed) return;
+  models.setData(data);
+  if (inspectorNode?.kind === 'agent') paintInspector();
+}
+/* What the classes cost is read from the project's transcripts, which is the slow part: asked for apart, once
+   when the view opens and then once a minute while it stays open, and never twice at once. */
+let costsBusy = false;
+let costsFor = null;
+let costsAt = 0;
+async function loadCosts(force = false) {
+  if (!current || costsBusy) return;
+  if (!force && costsFor === current && Date.now() - costsAt < COSTS_POLL_MS) return;
+  const asked = current;
+  costsAt = Date.now();
+  costsBusy = true;
+  let costs = null;
+  try { costs = await getJson(`/api/models/cost?session=${encodeURIComponent(asked)}`); } catch { /* the cells keep saying they are being read */ }
+  finally { costsBusy = false; }
+  if (asked !== current) return;
+  costsFor = asked;
+  models.setCosts(costs);
+}
+const COSTS_POLL_MS = 60000;
+const MODELS_POLL_MS = 5000;
+
 const list = new List(el.list, {
   tileOf: (n) => canvas.tileFor(n),
   dimmed: (n) => canvas.dimmed(n),
   // A row leads to the agent's detail: the inspector, which on a phone is a page of its own.
   onSelect: (n) => { list.select(n.id); canvas.select(n.id); },
-  onDecide: (item, verdict) => decideRequest(item, verdict),
+  onDecide: (item, verdict, extra) => decideRequest(item, verdict, extra),
   onLocate: (item) => { if (item.sessionId !== current) selectSession(item.sessionId); },
+  // A section folded or opened by hand changes what Expand all and Fold all have left to do, at once.
+  onFold: () => paintFoldButtons(),
 });
 list.now = () => serverNow();
 
@@ -603,13 +713,15 @@ function paintTimelineBar(st) {
  */
 function setView(next, select = null, remember = true) {
   const was = view;
-  view = ['graph', 'timeline', 'list'].includes(next) ? next : 'graph';
+  view = ['graph', 'timeline', 'list', 'models'].includes(next) ? next : 'graph';
   // A view the window opened on by default is not a choice, and is not remembered as one.
   if (remember) store.set('crewforth-studio-view', view);
   const carried = select ?? (was === 'timeline' ? timeline.selected : was === 'list' ? list.selected : canvas.selected) ?? null;
   el.canvasEl.hidden = view !== 'graph';
   el.timeline.hidden = view !== 'timeline';
   el.list.hidden = view !== 'list';
+  el.models.hidden = view !== 'models';
+  el.viewModels.setAttribute('aria-selected', String(view === 'models'));
   el.viewGraph.setAttribute('aria-selected', String(view === 'graph'));
   el.viewTimeline.setAttribute('aria-selected', String(view === 'timeline'));
   el.viewList.setAttribute('aria-selected', String(view === 'list'));
@@ -617,6 +729,7 @@ function setView(next, select = null, remember = true) {
   for (const c of document.querySelectorAll('.toolbar [data-view]')) c.hidden = !c.dataset.view.split(' ').includes(view);
   queueFit();
   el.stage.dataset.view = view;
+  paintFoldButtons();
   // The List's cards carry the answers; the dock would be the same requests a second time.
   dock.setSuppressed(view === 'list');
   measureDock();
@@ -632,6 +745,12 @@ function setView(next, select = null, remember = true) {
   } else if (view === 'list') {
     list.select(carried && canvas.nodes.get(carried)?.kind === 'agent' ? carried : null);
     list.render();
+  } else if (view === 'models') {
+    // The record is the project's, not the session's: it is read when the view opens and while it stays open.
+    models.render();
+    if (costsFor !== current) models.setCosts(null);
+    loadModels(true);
+    loadCosts(costsFor !== current);
   } else {
     canvas.fitIfUntouched();
     if (carried && canvas.nodes.has(carried)) canvas.focus(carried);
@@ -648,24 +767,26 @@ function goTo(agentId) {
 el.viewGraph.addEventListener('click', () => setView('graph'));
 el.viewTimeline.addEventListener('click', () => setView('timeline'));
 el.viewList.addEventListener('click', () => setView('list'));
+el.viewModels.addEventListener('click', () => setView('models'));
 el.tbFollow.addEventListener('click', () => timeline.setFollow(el.tbFollow.getAttribute('aria-checked') !== 'true'));
 // "Out" is more time on screen, "in" is less: the same way round as the graph's zoom.
 el.tbRangeOut.addEventListener('click', () => timeline.zoom(1));
 el.tbRangeIn.addEventListener('click', () => timeline.zoom(-1));
 if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnimationFrame(() => timeline.render())).observe(el.timeline);
+// The canvas's pane changing size changes what fits in it, and with that what Auto density draws.
+if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => requestAnimationFrame(() => canvas.fitIfUntouched())).observe(el.canvasEl);
 
 getJson('/api/palette')
   .then((p) => {
     canvas.setPalette(p);
-    // An unread palette makes every agent "unrecognised", and twelve of those
-    // read like twelve strangers. Which one it is has to be said out loud, or
-    // the panel is drawing "not measured" as a fact about the agents.
+    // With Crewforth's agents unread, a `crew-…` agent cannot be told from one that only carries the name. That has
+    // to be said out loud, or the panel is drawing "not measured" as a fact about the agents.
     if (p && p.measured === false) {
       document.body.dataset.paletteMeasured = 'false';
       el.foot.textContent = `agent identity Not measured — ${p.reason}`;
     }
   })
-  .catch(() => { /* every agent is drawn as unrecognised, which is what is known */ });
+  .catch(() => { /* every agent is drawn with the common mark, which is what is known */ });
 
 let inspectorTab = 'overview';
 let inspectorNode = null;
@@ -849,6 +970,54 @@ function paintAgentOverview(body, n, detail) {
   }
   body.append(grid);
 
+  // The task card the work started with, and how Crewforth recorded it going: the calls of this card, oldest
+  // first, each with what it ran on and what its verify command said; the last is this agent's.
+  if (n.kind === 'agent') {
+    if (modelsFor !== current) loadModels();
+    const row = modelsFor === current ? (modelsData?.byAgent?.[n.id] ?? null) : null;
+    const lines = cardLines(cardOf(detail?.prompt ?? null), row);
+    const work = workSteps(row);
+    if (lines.length) {
+      const dl = node('dl', 'icard');
+      for (const l of lines) dl.append(node('dt', null, l.label), node('dd', null, l.text));
+      const sec = isection('Task card', dl);
+      if (work.risk) { const tag = node('span', 'mv-tag', work.risk); tag.dataset.risk = work.risk; sec.children[0].append(tag); }
+      body.append(sec);
+    }
+    // No card and no line: an agent that is not a crew agent, and nothing is said about it here.
+    if (row || lines.length) {
+      const ol = node('ol', 'isteps');
+      work.steps.forEach((st, i) => {
+        const li = node('li');
+        const says = node('span', 'istep-says', st.text);
+        if (st.verify) { says.append(' \u00b7 verify'); const v = node('span', 'mv-tag', st.verify); v.dataset.tone = st.tone; says.append(v); }
+        if (st.escalated) { const e = node('span', 'mv-tag', 'escalated'); e.dataset.kind = 'escalated'; says.append(e); }
+        li.append(node('span', 'istep-n', String(i + 1)), says);
+        ol.append(li);
+      });
+      const sec = isection('Model and verify', ...(work.steps.length ? [ol] : []), ...(work.note ? [node('p', 'istep-note', work.note)] : []));
+      body.append(sec);
+    }
+  }
+
+  // What it ran on and what its call asked for, and what the model gate or a low-confidence report did to it.
+  const models = modelLines(n, lastNodes);
+  if (models.length) {
+    const dl = node('dl', 'imodel');
+    for (const m of models) {
+      const dd = node('dd', null, m.text);
+      if (m.note) dd.title = m.note;
+      if (m.goto) {
+        const go = node('button', 'ilink', 'show');
+        go.type = 'button';
+        go.addEventListener('click', () => goTo(m.goto));
+        dd.append(' ', go);
+      }
+      dl.append(node('dt', null, m.label), dd);
+    }
+    body.append(isection('Model', dl));
+  }
+
   const gap = n.kind === 'agent' ? detailGap(n, detail) : null;
   const read = n.kind === 'agent' && !gap ? detail : null;
 
@@ -1234,11 +1403,20 @@ function marked(text, cls) {
 /* A short line that says something happened and goes away. Not a dialog: it
    takes no focus and needs no answer. */
 let toastTimer = null;
-function toast(text) {
-  el.toast.textContent = text;
+function toast(text, action = null) {
+  el.toast.replaceChildren(document.createTextNode(text));
+  // One thing that can be done about what just happened, while the line is up: "Undo".
+  if (action) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'toast-act';
+    b.textContent = action.label;
+    b.addEventListener('click', () => { el.toast.hidden = true; action.run(); });
+    el.toast.append(' \u00b7 ', b);
+  }
   el.toast.hidden = false;
   clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { el.toast.hidden = true; }, 3200);
+  toastTimer = setTimeout(() => { el.toast.hidden = true; }, action ? 6000 : 3200);
 }
 
 async function copyText(text, said) {
@@ -1500,7 +1678,7 @@ function sessionRow(project, sn) {
   if (subText) row.append(marked(subText, 'sub srow-sub'));
   // What it spent, once the server has read it: time · tokens · ~cost. Asked for a few rows at a time.
   const spent = usageFor(sn);
-  const line = usageLine(spent);
+  const line = usageLine(spent, { live: sessionStatus(sn.sessionId, fleetData).known && sessionStatus(sn.sessionId, fleetData).key !== 'ended', now: serverNow() });
   if (line) {
     const u = node('span', 'sub srow-usage', line);
     u.title = costNote(spent);
@@ -1951,10 +2129,19 @@ function stepAttention(by) {
 // reading panel appear on every click there made choosing expensive. The
 // conversation is opened from the session node on the canvas, which is the
 // thing that represents it.
+// Where this session's agents are defined. Asked once per session; an answer for a session no longer shown is dropped.
+async function loadOrigins(sessionId) {
+  canvas.setOrigins(null);
+  let o = null;
+  try { o = await getJson(`/api/agents?session=${encodeURIComponent(sessionId)}`); } catch { /* the mark says whose it is without it */ }
+  if (current === sessionId) canvas.setOrigins(o?.measured ? o : null);
+}
+
 function selectSession(sessionId) {
   if (current === sessionId) return;
   current = sessionId;
   canvas.setSession(sessionId);
+  loadOrigins(sessionId);
   timeline.setSession(sessionId);
   list.setSession(sessionId);
   timeline.setFilter(null);
@@ -2039,7 +2226,7 @@ function paintPulse() {
   pulse.detail.textContent = l.detail ? `· ${l.detail}` : '';
 }
 paintPulse();
-setInterval(() => { paintPulse(); dock.tick(); timeline.tick(); list.tick(); paintStageNote(); }, 1000);
+setInterval(() => { paintPulse(); dock.tick(); timeline.tick(); list.tick(); paintStageNote(); if (view === 'models') { loadModels(); loadCosts(); } }, 1000);
 
 /* -------------------------------------------------------------- home, keys */
 
@@ -2071,28 +2258,33 @@ document.addEventListener('keydown', (e) => {
     if (!el.inspector.hidden) { canvas.clearSelection(); showInspector(null); }
     return;
   }
-  if (e.metaKey || e.ctrlKey) return;
-  const t = e.target;
-  if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
-  if (e.key === '/') {
+  // A letter is a shortcut only when it is not being typed into a field and no modifier is held: Cmd+R is the
+  // browser's reload, not "reset layout".
+  const key = shortcutOf(e);
+  if (key === null) return;
+  if (key === '/') {
     e.preventDefault();
     setSideHidden(false);
     el.filter.focus();
-  } else if (e.key === '[') {
+  } else if (key === '[') {
     setSideHidden(true);
-  } else if (e.key === ']') {
+  } else if (key === ']') {
     setSideHidden(false);
-  } else if (e.key === 'g') {
+  } else if (key === 'g') {
     setView('graph');
-  } else if (e.key === 't') {
+  } else if (key === 't') {
     setView('timeline');
-  } else if (e.key === 'l') {
+  } else if (key === 'l') {
     setView('list');
-  } else if (e.key === 'j') {
+  } else if (key === 'r') {
+    if (view === 'graph') resetLayout();
+  } else if (key === 'm') {
+    setView('models');
+  } else if (key === 'j') {
     stepAttention(1);
-  } else if (e.key === 'k') {
+  } else if (key === 'k') {
     stepAttention(-1);
-  } else if (e.key === '?') {
+  } else if (key === '?') {
     canvas.showLegend(true);
   }
 });
@@ -2189,13 +2381,27 @@ function paintApprovals() {
   if (inspectorNode && inspectorTab === 'gates') paintInspector();
 }
 
-async function decideRequest(item, verdict) {
+/** Ask for a session started here to be put in another mode. The strip changes when Claude Code says it has. */
+async function setSessionMode(sessionId, mode) {
+  let res;
+  try {
+    const r = await fetch(api(`/api/owned/${encodeURIComponent(sessionId)}/mode`),
+      { method: 'POST', headers: { 'content-type': 'application/json', ...writeHeaders }, body: JSON.stringify({ mode }) });
+    res = await r.json();
+  } catch (e) {
+    res = { ok: false, reason: e.message };
+  }
+  if (!res.ok) toast(`Mode not changed — ${res.reason ?? 'no reason given'}`);
+  else pollOwned();
+}
+
+async function decideRequest(item, verdict, extra = {}) {
   decided.set(item.key, verdict);
   let res;
   try {
     const r = await fetch(
       api(`/api/owned/${encodeURIComponent(item.sessionId)}/permissions/${encodeURIComponent(item.toolUseId)}`),
-      { method: 'POST', headers: { 'content-type': 'application/json', ...writeHeaders }, body: JSON.stringify({ verdict }) },
+      { method: 'POST', headers: { 'content-type': 'application/json', ...writeHeaders }, body: JSON.stringify({ verdict, ...extra }) },
     );
     res = await r.json();
   } catch (e) {
@@ -2278,6 +2484,8 @@ function paintStageNote() {
   stageNote.button.hidden = !off;
   // The fleet can say a session ended, or came back, with no transcript changing.
   if (lastGraph && sessionIsLive() !== lastLive) showGraph();
+  else if (lastLive === true) paintSpend();
+  paintFoldButtons();
   paintTerminalWait();
 }
 
@@ -2285,13 +2493,19 @@ function paintStageNote() {
  * Draw the graph the stream last sent. What the server read from files is settled against what the machine says
  * of the session first, so this is called again when that changes with no file changing.
  */
+/** The summary box, from the session on screen. A live session's time is counted to now, so this runs on the tick. */
+function paintSpend() {
+  const usage = lastNodes?.find((n) => n.kind === 'session')?.usage ?? null;
+  canvas.setSpend(summaryRows(usage, { live: lastLive === true, now: serverNow() }));
+}
+
 function showGraph() {
   if (!lastGraph) return;
   lastLive = sessionIsLive();
   const g = settle(lastGraph, lastLive);
   canvas.render(g);
-  canvas.setSpend(summaryRows(g.nodes.find((n) => n.kind === 'session')?.usage ?? null));
   lastNodes = g.nodes;
+  paintSpend();
   timeline.setNodes(g.nodes);
   list.setNodes(g.nodes);
   paintAttention(g.nodes);

package/kit/studio/web/approvals.js

@@ -23,6 +23,54 @@ export class ServerClock {
   now(localNow) { return localNow + this.offset; }
 }
 
+// A plan is approved into one of these; the words are the buttons'.
+export const PLAN_CHOICES = [
+  { mode: 'acceptEdits', label: 'Approve \u00b7 accept edits', title: 'Approve the plan and go on in acceptEdits: file edits in the project are accepted without asking; every call is still shown here first.' },
+  { mode: 'default', label: 'Approve \u00b7 ask each time', title: 'Approve the plan and go on in default: each call is asked about here.' },
+];
+
+/**
+ * What a request asks of the viewer when the answer is not allow-or-deny.
+ *   { kind: 'questions', questions: [{ question, header, options: [{ label, description }], multiSelect }] }
+ *   { kind: 'plan', plan }
+ * Null for an ordinary tool call. Only what the tool's own input holds; nothing is added to it.
+ */
+export function askOf(r) {
+  const input = r?.input && typeof r.input === 'object' ? r.input : {};
+  if (r?.toolName === 'AskUserQuestion' && Array.isArray(input.questions)) {
+    return {
+      kind: 'questions',
+      questions: input.questions.filter((q) => typeof q?.question === 'string').map((q) => ({
+        question: q.question,
+        header: typeof q.header === 'string' ? q.header : '',
+        multiSelect: q.multiSelect === true,
+        options: (Array.isArray(q.options) ? q.options : []).filter((o) => typeof o?.label === 'string')
+          .map((o) => ({ label: o.label, description: typeof o.description === 'string' ? o.description : '' })),
+      })),
+    };
+  }
+  if (r?.toolName === 'ExitPlanMode') return { kind: 'plan', plan: typeof input.plan === 'string' ? input.plan : '' };
+  return null;
+}
+
+/**
+ * The answers a form holds, as the tool takes them: question text -> the chosen label, a list of labels for a
+ * question that takes several, or the viewer's own text. Null while any question has no answer.
+ * @param picked Map question -> Set of labels · @param typed Map question -> free text
+ */
+export function answersOf(ask, picked, typed) {
+  const out = {};
+  for (const q of ask?.questions ?? []) {
+    const own = (typed?.get(q.question) ?? '').trim();
+    const labels = [...(picked?.get(q.question) ?? [])];
+    if (own && !q.multiSelect) out[q.question] = own;
+    else if (q.multiSelect && (labels.length || own)) out[q.question] = own ? [...labels, own] : labels;
+    else if (!q.multiSelect && labels.length) out[q.question] = labels[0];
+    else return null;
+  }
+  return out;
+}
+
 /**
  * Every request waiting in every session started here, oldest first: that is the order they will time out in.
  *
@@ -45,7 +93,10 @@ export function queue(sessions, nameOf = () => null) {
         agentType: r.agentType ?? null,
         askedAt: r.askedAt,
         // Null when the server did not say. The dock then shows no countdown rather than one it made up.
-        waitSeconds: typeof s.gateWaitSeconds === 'number' && s.gateWaitSeconds > 0 ? s.gateWaitSeconds : null,
+        waitSeconds: typeof r.waitSeconds === 'number' && r.waitSeconds > 0 ? r.waitSeconds
+          : (typeof s.gateWaitSeconds === 'number' && s.gateWaitSeconds > 0 ? s.gateWaitSeconds : null),
+        // What a question asks and what a plan says: the two requests that are not answered with allow or deny.
+        ask: askOf(r),
       });
     }
   }
@@ -125,7 +176,7 @@ export function settled(before, after, decided, serverNowMs, slackMs = 2500) {
     const verdict = decided?.get(r.key) ?? null;
     let outcome;
     if (verdict === 'deny') outcome = 'denied';
-    else if (verdict === 'allow') outcome = 'allowed';
+    else if (verdict === 'allow' || verdict === 'answer' || verdict === 'plan') outcome = 'allowed';
     else if (verdict === 'always') outcome = 'allowed-session';
     else if (r.waitSeconds != null && serverNowMs >= r.askedAt + r.waitSeconds * 1000 - slackMs) outcome = 'timed-out';
     else outcome = 'answered-elsewhere';