crewforth 3.1.0-rc.5 → 3.1.0-rc.6

package/kit/studio/web/app.js

@@ -23,8 +23,12 @@ 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, 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;
@@ -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);
   },
@@ -574,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. */
@@ -589,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();
 
@@ -621,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'));
@@ -635,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();
@@ -650,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);
@@ -666,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;
@@ -867,6 +970,36 @@ 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) {
@@ -1270,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) {
@@ -1987,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);
@@ -2075,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 */
 
@@ -2107,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);
   }
 });
@@ -2225,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) {
@@ -2315,6 +2485,7 @@ function paintStageNote() {
   // 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();
 }
 

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';

package/kit/studio/web/ask.js

@@ -0,0 +1,137 @@
+// The two requests that are not answered with allow or deny: a question the model asks, and a plan it wants
+// approved. This file draws the form for each and hands back what the viewer chose.
+//
+// A form is built once for a request and kept while the request waits. The dock and the List redraw around it every
+// second; a form rebuilt on each of those would lose what was picked, and what was being typed.
+import { answersOf, PLAN_CHOICES } from './approvals.js';
+
+function mk(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+export class AskForms {
+  /** @param onDecide (item, verdict, extra) => void — 'answer' with { answers }, 'plan' with { mode }, or 'deny' */
+  constructor(onDecide) {
+    this.onDecide = onDecide ?? (() => {});
+    this.forms = new Map();     // request key -> { el, sent(on) }
+  }
+
+  /** The form for a request, the same element every time it is asked for. Null for an ordinary tool call. */
+  get(item) {
+    if (!item?.ask) return null;
+    let f = this.forms.get(item.key);
+    if (!f) {
+      f = item.ask.kind === 'plan' ? this.#plan(item) : this.#questions(item);
+      this.forms.set(item.key, f);
+    }
+    return f.el;
+  }
+
+  /** An answer was sent, or could not be delivered: the form's controls go off, or come back. */
+  setSent(key, on) { this.forms.get(key)?.sent(on); }
+
+  /** Forget the forms of requests that are no longer waiting. */
+  keep(keys) {
+    const alive = new Set(keys);
+    for (const k of [...this.forms.keys()]) if (!alive.has(k)) this.forms.delete(k);
+  }
+
+  #questions(item) {
+    const el = mk('div', 'ask');
+    const picked = new Map();   // question -> Set of labels
+    const typed = new Map();    // question -> the viewer's own text
+    const controls = [];
+    const send = mk('button', 'btn sm primary', 'Send answers');
+    const refresh = () => { send.disabled = send.dataset.sent === '1' || answersOf(item.ask, picked, typed) === null; };
+
+    for (const q of item.ask.questions) {
+      picked.set(q.question, new Set());
+      const box = mk('div', 'ask-q');
+      const head = mk('div', 'ask-head');
+      if (q.header) head.append(mk('span', 'ask-tag', q.header));
+      head.append(mk('span', 'ask-text', q.question));
+      if (q.multiSelect) head.append(mk('span', 'sub', 'choose any'));
+      const opts = mk('div', 'ask-opts');
+      opts.setAttribute('role', q.multiSelect ? 'group' : 'radiogroup');
+      const buttons = [];
+      for (const o of q.options) {
+        const b = mk('button', 'ask-opt', o.label);
+        b.type = 'button';
+        b.title = o.description;
+        b.setAttribute('role', q.multiSelect ? 'checkbox' : 'radio');
+        b.setAttribute('aria-checked', 'false');
+        b.addEventListener('click', () => {
+          const set = picked.get(q.question);
+          if (q.multiSelect) { if (set.has(o.label)) set.delete(o.label); else set.add(o.label); } else {
+            // One answer: choosing an option takes the place of anything typed, and of the option chosen before.
+            set.clear(); set.add(o.label);
+            own.value = ''; typed.delete(q.question);
+          }
+          for (const x of buttons) x.el.setAttribute('aria-checked', String(set.has(x.label)));
+          refresh();
+        });
+        buttons.push({ el: b, label: o.label });
+        controls.push(b);
+        opts.append(b);
+      }
+      // The model's options do not always hold the answer: the viewer's own words are an answer too.
+      const own = mk('input', 'ask-own');
+      own.type = 'text';
+      own.placeholder = q.multiSelect ? 'Something else, as well…' : 'Something else…';
+      own.setAttribute('aria-label', `Your own answer to: ${q.question}`);
+      own.addEventListener('input', () => {
+        typed.set(q.question, own.value);
+        if (!q.multiSelect && own.value.trim()) {
+          picked.get(q.question).clear();
+          for (const x of buttons) x.el.setAttribute('aria-checked', 'false');
+        }
+        refresh();
+      });
+      controls.push(own);
+      box.append(head, opts, own);
+      el.append(box);
+    }
+
+    const acts = mk('div', 'ask-acts');
+    const dismiss = mk('button', 'btn sm', 'Dismiss');
+    dismiss.type = 'button';
+    dismiss.title = 'Refuse the question. The model is told nobody answered and may ask in words instead.';
+    send.type = 'button';
+    send.addEventListener('click', () => {
+      const answers = answersOf(item.ask, picked, typed);
+      if (answers) this.onDecide(item, 'answer', { answers });
+    });
+    dismiss.addEventListener('click', () => this.onDecide(item, 'deny', {}));
+    controls.push(dismiss);
+    acts.append(dismiss, send);
+    el.append(acts);
+    refresh();
+    return { el, sent: (on) => { send.dataset.sent = on ? '1' : '0'; for (const c of controls) c.disabled = on; refresh(); } };
+  }
+
+  #plan(item) {
+    const el = mk('div', 'ask');
+    const plan = mk('pre', 'ask-plan', item.ask.plan || 'The plan was not included in the request.');
+    plan.tabIndex = 0;
+    const acts = mk('div', 'ask-acts');
+    const keep = mk('button', 'btn sm', 'Keep planning');
+    keep.type = 'button';
+    keep.title = 'Refuse to leave plan mode. The model stays in it and goes on planning.';
+    keep.addEventListener('click', () => this.onDecide(item, 'deny', {}));
+    const controls = [keep];
+    acts.append(keep);
+    PLAN_CHOICES.forEach((c, i) => {
+      const b = mk('button', i === PLAN_CHOICES.length - 1 ? 'btn sm primary' : 'btn sm', c.label);
+      b.type = 'button';
+      b.title = c.title;
+      b.addEventListener('click', () => this.onDecide(item, 'plan', { mode: c.mode }));
+      controls.push(b);
+      acts.append(b);
+    });
+    el.append(plan, acts);
+    return { el, sent: (on) => { for (const c of controls) c.disabled = on; } };
+  }
+}