tumwater 0.2.0 → 0.3.0

package/dist/src/ui/gui/gui-client-drawer.js

@@ -1,25 +1,26 @@
-// vocabulary: plain
 /** The dashboard's detail drawer, browser-side: a sheet on the right that opens over the page
- * without losing it. For a loop it shows the state, the loop's controls (prompt, wake now or later,
+ * without losing it. For a role it shows the state, the role's controls (prompt, wake now or later,
  * pause/resume, abort), what it is working on, its last result, the metrics the team table
- * leaves out (tokens, context, cost, timings), its recent ticks (/api/history filtered to the
- * loop), and its live transcript (/api/transcript, re-fetched on the 1 s poll and kept pinned
- * to the bottom while the reader is there). For a backlog entry it shows the entry in full
- * (/api/backlog), rendered as Markdown, with a shortcut into the composer — answering a
+ * leaves out (tokens, context, cost, timings), its recent runs (/api/history filtered to the
+ * role), and its live transcript (/api/transcript, re-fetched on the 1 s poll and kept pinned
+ * to the bottom while the reader is there; a "Show prompts" button adds each agent run's prompt
+ * with `&prompt=1`; a search box narrows it with `&grep=`). For a backlog entry it shows the entry
+ * in full (/api/backlog), rendered as Markdown, with a shortcut into the composer — answering a
  * question, or asking the director about a plan or bug — and, for a plan or bug, a two-click
  * Cancel that removes the entry (/api/backlog-cancel). Esc, the close button, or clicking the
  * same row again closes it. Spliced into gui-client.ts's script, reaching its helpers through
  * that concatenation. */
-export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind: "loop", role } | { kind: "entry", file, index } while open
-  let drawerTicks = null; // the open loop's recent history rows (null until fetched)
-  let drawerTicksAt = 0;
-  let drawerChange = null; // the open loop's unmerged change: { role, state: "loading"|"ok"|"error", view, message }
-  let drawerRole = null; // the open loop's /api/role payload: { role, state: "loading"|"ok"|"error", view, message }
+export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind: "role", role } | { kind: "entry", file, index } while open
+  let drawerRuns = null; // the open role's recent history rows (null until fetched)
+  let drawerRunsAt = 0;
+  let drawerChangeStat = false;
+  let drawerChange = null; // the open role's unmerged change: { role, state: "loading"|"ok"|"error", view, message }
+  let drawerRole = null; // the open role's /api/role payload: { role, state: "loading"|"ok"|"error", view, message }
   const openEntryKey = () => (drawer && drawer.kind === "entry" ? drawer.file + ":" + drawer.index : null);
-  const openLoopRole = () => (drawer && drawer.kind === "loop" ? drawer.role : null); // vocabulary-ok: the drawer kind stays "loop"
-  // One key/value row builder shared by the loop-metrics table (renderLoopDrawer) and the
-  // Configuration section (drawerConfigHtml): identical markup, formerly copy-pasted into two
-  // local consts (kv and row) so the row shape could drift between the two sections.
+  const openRoleId = () => (drawer && drawer.kind === "role" ? drawer.role : null);
+  // One key/value row builder shared by the role-metrics table (renderRoleDrawer) and the
+  // Configuration section (drawerConfigHtml, in gui-client-drawer-config.ts): identical markup,
+  // formerly copy-pasted into two local consts (kv and row) so the row shape could drift.
   const kvRow = (k, v, title) => "<div><dt>" + esc(k) + "</dt><dd title='" + esc(title || v) + "'>" + esc(v) + "</dd></div>";
   // A diff block in the Change section (the committed change and the dirty-tree uncommitted
   // diff, drawerChangeHtml's two arms): trim the trailing newline the diff carriage-returned,
@@ -35,7 +36,7 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     $("scrim").hidden = false;
   }
   function closeDrawer() {
-    const wasLoop = openLoopRole();
+    const wasRole = openRoleId();
     drawer = null;
     entryEditing = null;
     noteEditing = null;
@@ -46,8 +47,8 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     instancesEditing = null;
     modelEditing = null;
     disarmNoteClear();
-    if (wasLoop && (location.hash.startsWith("#role/") || location.hash.startsWith("#loop/"))) history.replaceState(null, "", "#" + activeView); // vocabulary-ok: legacy dashboard hash, still routed
-    drawerTicks = null;
+    if (wasRole && (location.hash.startsWith("#role/") || location.hash.startsWith("#loop/"))) history.replaceState(null, "", "#" + activeView); // vocabulary-ok: legacy dashboard hash, still routed
+    drawerRuns = null;
     drawerChange = null;
     drawerRole = null;
     $("drawer").hidden = true;
@@ -58,29 +59,36 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     if (lastStatus) renderTeam(lastStatus); // drop the row highlight
   }
 
-  function openLoop(role) {
-    drawer = { kind: "loop", role }; // vocabulary-ok: the drawer kind stays "loop"
+  let transcriptPrompts = false;
+  let transcriptGrep = "";
+  function openRole(role) {
+    drawer = { kind: "role", role };
+    transcriptPrompts = false;
+    drawerChangeStat = false;
+    transcriptGrep = "";
     const hash = "#role/" + encodeURIComponent(role);
     if (location.hash !== hash) history.replaceState(null, "", hash);
-    drawerTicks = null;
-    drawerTicksAt = 0;
+    drawerRuns = null;
+    drawerRunsAt = 0;
     drawerChange = null;
     drawerRole = null;
     showDrawer("<div id='draweractions' class='drawer-actions'></div><div id='drawermeta'></div><div id='drawerrole'></div><section class='transcript-sec'><div class='sec-head'><h3>Live transcript</h3>" +
-      "<span class='muted' style='margin-left:auto;font-size:13px'>last 200 lines</span></div>" +
+      "<input type='search' id='transcriptgrep' class='field' placeholder='Search transcript' aria-label='Search transcript' autocomplete='off' style='margin-left:auto'>" +
+      "<button type='button' class='btn btn-sm' id='transcriptprompts' data-transcript-prompts style='margin-left:8px'>Show prompts</button>" +
+      "<span class='muted' style='margin-left:12px;font-size:13px'>last 200 lines</span></div>" +
       "<pre id='transcript' class='transcript'><span class='muted'>Loading…</span></pre></section>");
     if (lastStatus) {
-      renderLoopDrawer(lastStatus);
+      renderRoleDrawer(lastStatus);
       renderTeam(lastStatus);
     }
-    loadLoopTicks(true);
+    loadRoleRuns(true);
     loadDrawerChange(role);
     loadDrawerRole(role);
     refreshTranscript(true);
   }
-  function toggleLoop(role) {
-    if (openLoopRole() === role) closeDrawer();
-    else openLoop(role);
+  function toggleRole(role) {
+    if (openRoleId() === role) closeDrawer();
+    else openRole(role);
   }
   function openEntry(file, index) {
     drawer = { kind: "entry", file, index: Number(index) };
@@ -101,8 +109,8 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     return change && change.summary ? change.summary : "";
   }
 
-  function renderLoopDrawer(d) {
-    const role = openLoopRole();
+  function renderRoleDrawer(d) {
+    const role = openRoleId();
     if (!role) return;
     const l = (d.roles || []).find((x) => x.role === role);
     if (!l) {
@@ -114,7 +122,7 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
       return;
     }
     const info = phaseInfo(l.phase);
-    const paused = (d.pausedLoops || []).includes(l.role);
+    const paused = (d.pausedLoops || []).includes(l.role); // retired-name-ok: serialized /api key
     const detail = phaseDetail(l, info, d);
     paintPanel("drawerhead", "<div class='kicker'>Role" + (l.custom ? " · user-defined" : "") + "</div>" +
       "<h2 id='drawertitle' class='mono'>" + esc(roleLabel(l.role)) + "</h2><div class='chips'>" + pill(info) +
@@ -124,7 +132,7 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
       "' data-role='" + esc(l.role) + "'>" + icon(ic) + esc(label) + "</button>";
     let actions = btn("prompt", "chat", "Message this role");
     // The running set (info.live), not the permit-holder inFlight: the exempt running director
-    // has an abortable tick without holding a maxConcurrent permit (BUGS.md 2026-10-06).
+    // has an abortable run without holding a maxConcurrent permit (BUGS.md 2026-10-06).
     if (info.live) actions += abortConfirming(l.role) ? btn("abort", "stop", "Click again to stop", "btn-danger confirming") : btn("abort", "stop", "Stop this run", "btn-danger");
     else {
       actions += btn("wake", "bolt", "Wake now");
@@ -163,17 +171,17 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
       : next === "now" || next.startsWith("now ") ? next
       : next.startsWith("sleeping ") ? "in " + next.slice(9) + " (sleeping)"
       : "in " + next;
-    const tickWord = info.live ? "this run" : "last run";
+    const runWord = info.live ? "this run" : "last run";
     const stats = "<dl class='kv'>" + kvRow("Commits", String(l.commits)) + kvRow("Runs", String(l.runs)) +
-      kvRow("Tokens, " + tickWord, fmtTokens(l.generated)) + kvRow("Peak context, " + tickWord, fmtTokens(l.peakCtx)) +
+      kvRow("Tokens, " + runWord, fmtTokens(l.generated)) + kvRow("Peak context, " + runWord, fmtTokens(l.peakCtx)) +
       kvRow("Spent today", fmtUsd(l.todayUsd)) + kvRow("Spent in total", fmtUsd(l.costUsd)) +
-      kvRow("Last run ended", l.lastRunEndedAt ? fmtAgo(l.lastRunEndedAt) : "never", fmtLastTick(l.lastRunEndedAt)) +
+      kvRow("Last run ended", l.lastRunEndedAt ? fmtAgo(l.lastRunEndedAt) : "never", fmtLastRun(l.lastRunEndedAt)) +
       kvRow("Last merged", l.lastMergedAt ? fmtAgo(l.lastMergedAt) : "never") +
       kvRow("Next run", nextNote) + "</dl>";
-    const ticks = drawerTicks === null
+    const runs = drawerRuns === null
       ? "<p class='muted'>Loading…</p>"
-      : drawerTicks.length
-        ? "<ul class='ticks'>" + drawerTicks.map((t) => { // vocabulary-ok: the ticks class stays
+      : drawerRuns.length
+        ? "<ul class='run-list'>" + drawerRuns.map((t) => {
           const res = resultInfo(t.result);
           return "<li><span class='when' title='" + esc(t.time) + "'>#" + esc(t.run) + " · " + esc(fmtAgo(t.ts)) + "</span>" +
             "<span class='clamp1' title='" + esc(t.detail) + "'><span class='res t-" + res.tone + "'>" + esc(res.label) + "</span> " + esc(t.detail) + "</span>" +
@@ -181,16 +189,17 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
         }).join("") + "</ul>"
         : "<p class='muted'>No completed runs in the log yet.</p>";
     paintPanel("draweractions", actions);
-    paintPanel("drawermeta", now + last + stats +
-      "<section><div class='sec-head'><h3>Recent runs</h3></div>" + ticks + "</section>" + drawerChangeSection());
-    // The notebook/prompt live in their own panel, outside drawermeta: the poll rewrites
-    // drawermeta whenever its countdown or tick-age text changes, and an innerHTML rewrite
-    // would collapse an opened Next tick prompt. This panel's markup is stable while its
+    const queued = drawerQueueHtml(d.mergeQueue, l.role, Date.now(), d.mergeQueueLabels);
+    paintPanel("drawermeta", now + last + queued + stats +
+      "<section><div class='sec-head'><h3>Recent runs</h3></div>" + runs + "</section>" + drawerChangeSection());
+    // The notes/prompt live in their own panel, outside drawermeta: the poll rewrites
+    // drawermeta whenever its countdown or run-age text changes, and an innerHTML rewrite
+    // would collapse an opened Next run prompt. This panel's markup is stable while its
     // payload is unchanged, so paintPanel leaves it (and the disclosure's open state) alone.
     paintPanel("drawerrole", drawerRoleSection());
   }
 
-  // The open loop's unmerged change, as /api/diff?role serves it: the full patch the CLI's
+  // The open role's unmerged change, as /api/diff?role serves it: the full patch the CLI's
   // tumwater diff --role prints. Degrades like the collector — a missing worktree, a missing
   // base branch, or no work each get a plain statement, and an unreadable payload says so
   // rather than rendering a half-view. Pure of side effects; the view paints what it returns.
@@ -200,10 +209,15 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     const dirty = Array.isArray(view.dirtyFiles) ? view.dirtyFiles : [];
     if (view.state === "absent") return "<p class='muted'>No workspace yet — this role has not run.</p>";
     if (view.state === "no-base") return "<p class='muted'>Main branch " + esc(view.mainBranch) + " does not exist.</p>";
+    const scoped = typeof view.path === "string";
+    if (scoped && view.state === "ready" && commits.length === 0 && dirty.length === 0) {
+      return "<p class='muted'>No pending change to " + esc(view.path) + ".</p>";
+    }
     if (view.state !== "ready" || (view.ahead === 0 && dirty.length === 0)) return "<p class='muted'>No unlanded work.</p>";
     let html = "<p class='note'>" + esc(view.branch) + " · " + esc(plural(view.ahead, "commit")) +
       " ahead of " + esc(view.mainBranch) +
-      (dirty.length ? " · " + esc(plural(dirty.length, "uncommitted file")) : "") + "</p>";
+      (dirty.length ? " · " + esc(plural(dirty.length, "uncommitted file")) : "") +
+      (scoped ? " · limited to " + esc(view.path) : "") + "</p>";
     html += commitRowsHtml(commits);
     if (view.diff) html += diffPre(view.diff);
     if (dirty.length) {
@@ -218,37 +232,43 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     if (!c || c.state === "loading") body = "<p class='muted'>Loading…</p>";
     else if (c.state === "error") body = "<p class='muted'>" + esc(c.message || "Pending change unavailable") + "</p>";
     else body = drawerChangeHtml(c.view);
-    return "<section><div class='sec-head'><h3>Pending change</h3></div>" + body + "</section>";
+    return "<section><div class='sec-head'><h3>Pending change</h3>" +
+      "<button type='button' class='btn btn-sm' data-change-stat style='margin-left:auto'>" + (drawerChangeStat ? "Full patch" : "Stat only") + "</button></div>" + body + "</section>";
   }
   // Fetch one drawer section's payload once when the drawer opens, storing it in the
-  // caller's state cell. A stale answer (the drawer moved to another loop) is dropped;
+  // caller's state cell. A stale answer (the drawer moved to another role) is dropped;
   // later status polls repaint from the stored view. The assign callback writes that cell
   // (drawerChange / drawerRole), so the loading/ok/error contract lives here once for both
-  // the pending-change and notebook sections.
+  // the pending-change and notes sections.
   async function loadDrawerSection(role, url, fallbackMessage, assign) {
     if (!role) return;
     assign({ role, state: "loading" });
     try {
       const d = await getJson(url + encodeURIComponent(role), pollSignal());
-      if (openLoopRole() !== role) return;
+      if (openRoleId() !== role) return;
       assign({ role, state: "ok", view: d });
     } catch (err) {
-      if (openLoopRole() !== role) return;
+      if (openRoleId() !== role) return;
       assign({ role, state: "error", message: err && err.message ? err.message : fallbackMessage });
     }
-    if (lastStatus) renderLoopDrawer(lastStatus);
+    if (lastStatus) renderRoleDrawer(lastStatus);
   }
-  // The open loop's unmerged change, as /api/diff?role serves it.
+  // The open role's unmerged change, as /api/diff?role serves it.
   function loadDrawerChange(role) {
-    return loadDrawerSection(role, "/api/diff?role=", "Pending change unavailable", (v) => { drawerChange = v; });
+    return loadDrawerSection(role, "/api/diff?" + (drawerChangeStat ? "stat=1&" : "") + "role=", "Pending change unavailable", (v) => { drawerChange = v; });
+  }
+
+  function toggleDrawerChangeStat() {
+    drawerChangeStat = !drawerChangeStat;
+    return loadDrawerChange(openRoleId());
   }
 
-  // The open loop's notebook and next-tick prompt, as /api/role serves them (rolePayload):
+  // The open role's notes and next-run prompt, as /api/role serves them (rolePayload):
   // the same note and assembled prompt the CLI's role command shows, so the operator can
-  // diagnose a loop from the page. The note renders in a <pre>; the next prompt sits in a
+  // diagnose a role from the page. The note renders in a <pre>; the next prompt sits in a
   // <details> so it does not push the rest of the drawer down. Both empty cases say so in a
   // muted line. It paints into its own #drawerrole panel, not #drawermeta: the poll rewrites
-  // drawermeta whenever its countdown or tick-age text changes, and an innerHTML rewrite would
+  // drawermeta whenever its countdown or run-age text changes, and an innerHTML rewrite would
   // collapse an opened <details>. This panel's string is stable while the payload is unchanged,
   // so paintPanel skips it and the disclosure stays open.
   function drawerRoleSection() {
@@ -272,14 +292,14 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
         : note ? "<pre class='mono'>" + esc(note) + "</pre>" : "<p class='muted'>No notes yet.</p>";
       body = "<div class='sec-head'><h3>Notes</h3>" + (editing ? "" : buttons) + "</div>" + noteBody +
         "<details><summary>Next run's prompt</summary>" + (nextPrompt ? "<pre class='mono'>" + esc(nextPrompt) + "</pre>" : "<p class='muted'>Nothing to run (empty inbox).</p>") + "</details>" +
-        // The loop's recent tick outcomes (rolePayload's recentOutcomes, read from the event
-        // log), rendered like the Recent ticks list above: each with its relative age, result
-        // label, summary, and duration. Mirrors the Recent tick outcomes section of
+        // The role's recent run outcomes (rolePayload's recentOutcomes, read from the event
+        // log), rendered like the Recent runs list above: each with its relative age, result
+        // label, summary, and duration. Mirrors the Recent run outcomes section of
         // tumwater role <id> — no backticks allowed here (this whole script is one big
-        // String.raw template), so the page and the CLI read one loop's outcomes identically.
+        // String.raw template), so the page and the CLI read one role's outcomes identically.
         (outcomes.length ? "<section><div class='sec-head'><h3>Recent outcomes" +
           "<span class='muted' style='font-size:13px'>· " + outcomes.length + "</span></h3></div>" +
-          "<ul class='ticks'>" + outcomes.map((o) => { // vocabulary-ok: the ticks class stays
+          "<ul class='run-list'>" + outcomes.map((o) => {
             const info = resultInfo(o.result);
             const detail = typeof o.summary === "string" && o.summary.trim() !== "" ? o.summary : "";
             return "<li><span class='when' title='" + esc(new Date(Number(o.ts)).toLocaleString()) + "'>" + esc(fmtAgo(Number(o.ts))) + "</span>" +
@@ -290,211 +310,7 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     }
     return "<section>" + body + "</section>";
   }
-  // A Configuration section built from the same /api/role payload the CLI's tumwater role
-  // <id> renders (rolePayload), so the drawer's and the terminal's rows read one document and
-  // cannot drift: what the loop RUNS ON (model/tier, provider cap, image reading, the
-  // fallback pairs, billing, min tick interval) and CARRIES (queued prompts, the instructions
-  // override, find text). Each row is guarded by a present/own check so an absent field
-  // renders no row — a cap-less team shows no Provider row, no fallback shows no fallback
-  // rows, and a notes-only payload adds an empty (omitted) section. Labels and wording mirror
-  // role-render.ts's family; no backticks allowed here (this whole script is one big
-  // String.raw template).
-  function drawerConfigHtml(view, role) {
-    const pair = (p, m) => [p, m].filter(Boolean).join("/");
-    const singleLine = (s) => String(s).replace(/\s+/g, " ").trim();
-    // A verbatim value's single-line clamped rendering (80 chars + ellipsis) with the full
-    // text riding the title tooltip — the same clamp+tooltip idiom the tick summaries use.
-    const clamp = (t) => { const one = singleLine(t); return one.length > 80 ? one.slice(0, 80) + "…" : one; };
-    const rows = [];
-    // A role that runs on pi's own saved default carries no provider/model but a piDefault
-    // selector (rolePayload's resolvedModelFields leaves both undefined), and the CLI's
-    // Model line names that default (<agent> default (<selector>), agentDefault). Mirror
-    // that branch so the drawer names the model a default pi team actually runs on.
-    const defaultLine = typeof view.piDefault === "string"
-      ? (view.backend && view.backend !== "pi" ? view.backend : "pi") + " default (" + view.piDefault + ")"
-      : "";
-    const modelLine = defaultLine !== "" ? defaultLine : pair(view.provider, view.model);
-    if (modelLine !== "" || view.modelTier !== undefined) {
-      rows.push(kvRow("Model", (modelLine !== "" ? modelLine + " " : "") + (view.modelTier !== undefined ? "(" + view.modelTier + " tier)" : "").trim()));
-    }
-    // The per-role model triple (roles.<base>.provider/.model/.thinking, the file's own raw
-    // overrides rolePayload's providerOverride/modelOverride/thinkingOverride carry) — the
-    // one per-role write the Model row above still renders read-only, the dashboard half of
-    // the CLI's --provider/--model/--thinking. An always-shown row (every role, the director
-    // included, since the CLI writes its triple too) whose body names the payload's raw
-    // overrides, or no overrides, and whose control is a model-edit button (Edit/Set model);
-    // while the editor is open for this role, three text inputs prefilled with the raw
-    // overrides (empty when unset) plus Save/Discard replace the body, mirroring the interval
-    // editor's markup.
-    const rawTriple = [];
-    if (typeof view.providerOverride === "string" && view.providerOverride !== "") rawTriple.push("provider: " + view.providerOverride);
-    if (typeof view.modelOverride === "string" && view.modelOverride !== "") rawTriple.push("model: " + view.modelOverride);
-    if (typeof view.thinkingOverride === "string" && view.thinkingOverride !== "") rawTriple.push("thinking: " + view.thinkingOverride);
-    const modelBody = rawTriple.length ? rawTriple.join(" · ") : "no overrides";
-    const editModel = modelEditing && modelEditing.role === role;
-    const modelControl = editModel
-      ? "<input id='modeleditprovider' type='text' placeholder='provider' value='" + esc(modelEditing.provider) + "'>" +
-        "<input id='modeleditmodel' type='text' placeholder='model' value='" + esc(modelEditing.model) + "'>" +
-        "<input id='modeleditthinking' type='text' placeholder='thinking' value='" + esc(modelEditing.thinking) + "'>" +
-        "<div><button type='button' class='btn btn-sm btn-primary' data-act='model-save' data-arg='" + esc(role) + "'>Save</button> " +
-        "<button type='button' class='btn btn-sm' data-act='model-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-      : "<button type='button' class='btn btn-sm' data-act='model-edit' data-arg='" + esc(role) + "'>" + (rawTriple.length ? "Edit" : "Set model") + "</button>";
-    rows.push("<div><dt>Model overrides</dt><dd title='" + esc(modelBody) + "'>" + esc(modelBody) + modelControl + "</dd></div>");
-    // Context window: the resolved primary seam's declared window - the same seam '- Next run:'
-    // previews. Guard optional to keep an older payload that lacks the field rendering as before.
-    if (view.contextWindow !== undefined) {
-      rows.push(kvRow("Context window", view.contextWindow === null ? "unknown" : fmtTokens(view.contextWindow) + " tokens"));
-    }
-    if (view.providerKey !== undefined && view.providerCap !== undefined) {
-      rows.push(kvRow("Provider", view.providerKey + " (cap " + view.providerCap + ")"));
-    }
-    if (view.imageInput !== undefined) {
-      const images = view.imageInput === true ? "yes"
-        : view.imageInput === false ? (view.imageReroute ? "no — reruns on " + view.imageReroute : "no")
-        : "unknown";
-      rows.push(kvRow("Images", images));
-    }
-    if (view.modelFallback && typeof view.modelFallback === "object" && view.modelFallback.model !== undefined) {
-      const fb = view.modelFallback;
-      const when = typeof fb.since === "number" ? " since " + fmtAgo(fb.since) : "";
-      rows.push(kvRow("Model fallback", pair(fb.provider, fb.model) + " — on fallback" + when + " (primary failing: " + (fb.reason ?? "") + ")"));
-    }
-    if (view.fallback && typeof view.fallback === "object" && view.fallback.model !== undefined) {
-      rows.push(kvRow("Budget fallback", pair(view.fallback.provider, view.fallback.model) + " (" + (view.fallbackFree ? "free" : "priced") + ")"));
-    }
-    if (view.billing !== undefined) {
-      const window = view.billing === "subscription" && view.billingWindow ? " (" + view.billingWindow + " window)" : "";
-      rows.push(kvRow("Billing", (view.billing === "api" ? "API" : view.billing) + window));
-    }
-    // The min run interval (rolePayload's minRunIntervalSeconds), worded like role-render.ts's
-    // Min run interval line, plus a control to set/clear the per-role override — the last
-    // per-role hold the drawer edits. Shown whenever the payload names an interval (always —
-    // the effective value is the role's override or the team default); the body tags whether
-    // the shown value is the role's own override or the team default. While the editor is open
-    // for this role, an input prefilled with the override (empty when none) and Save/Discard
-    // replace the sentence, mirroring the daily-cap editor's markup; a role with no override
-    // still seeds an empty input, so an empty buffer on Save clears.
-    if (typeof view.minRunIntervalSeconds === "number") {
-      const editing = intervalEditing && intervalEditing.role === role;
-      const intervalBody = String(view.minRunIntervalSeconds) + "s" +
-        (typeof view.minRunIntervalOverride === "number" ? " (override)" : " (team default)");
-      const seed = intervalEditing ? intervalEditing.value : null;
-      const intervalControl = editing
-        ? "<input id='intervaleditinput' type='number' min='0' step='1' value='" + (seed === "" || seed == null ? "" : String(seed)) + "' placeholder='team default'>" +
-          "<div><button type='button' class='btn btn-sm btn-primary' data-act='interval-save' data-arg='" + esc(role) + "'>Save</button> " +
-          "<button type='button' class='btn btn-sm' data-act='interval-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-        : "<button type='button' class='btn btn-sm' data-act='interval-edit' data-arg='" + esc(role) + "'>" + (typeof view.minRunIntervalOverride === "number" ? "Edit" : "Set interval") + "</button>";
-      rows.push("<div><dt>Min run interval</dt><dd title='" + esc(intervalBody) + "'>" + esc(intervalBody) + intervalControl + "</dd></div>");
-    }
-    // The parallel-runner count (roles.<base>.instances), worded like role-render.ts's
-    // Instances line — the last per-role hold the drawer edits. Rendered only for a role that
-    // may split (its base, an instance strip, is feature or bugfix): the count is meaningless
-    // for any other role, which role-view never carries. The body reads the payload's numeric
-    // count (roles.<base>.instances) tagged (set) or falls back to 1 tagged (default) when the
-    // file leaves it unset — role-view carries instances only when the file sets it. While the
-    // editor is open for this role, an input prefilled with the count (empty when none) and
-    // Save/Discard
-    // replace the sentence, mirroring the interval editor's markup; a role with no count still
-    // seeds an empty input, so an empty buffer on Save clears.
-    const splitBase = role.replace(/-\d+$/, "");
-    if (splitBase === "feature" || splitBase === "bugfix") {
-      const hasInstances = typeof view.instances === "number";
-      const instCount = hasInstances ? view.instances : 1;
-      const instBody = String(instCount) + (hasInstances ? " (set)" : " (default)");
-      const editingInst = instancesEditing && instancesEditing.role === role;
-      const seed = instancesEditing ? instancesEditing.value : null;
-      const instControl = editingInst
-        ? "<input id='instanceseditinput' type='number' min='1' max='8' step='1' value='" + (seed === "" || seed == null ? "" : String(seed)) + "' placeholder='default 1'>" +
-          "<div><button type='button' class='btn btn-sm btn-primary' data-act='instances-save' data-arg='" + esc(role) + "'>Save</button> " +
-          "<button type='button' class='btn btn-sm' data-act='instances-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-        : "<button type='button' class='btn btn-sm' data-act='instances-edit' data-arg='" + esc(role) + "'>" + (hasInstances ? "Edit" : "Set instances") + "</button>";
-      rows.push("<div><dt>Instances</dt><dd title='" + esc(instBody) + "'>" + esc(instBody) + instControl + "</dd></div>");
-    }
-    // The windows governing the loop, worded like role-render.ts's Quiet hours line; the end time
-    // mirrors quietWindowEnd (browser code cannot import it). A non-director role's own window
-    // is an always-shown editable row (the Daily cap row's rationale: the control sits where
-    // the hold is shown) — including when the payload carries no role-scope window ("no own
-    // window"); any other window stays a read-only row worded exactly as before ("team window").
-    const own = Array.isArray(view.quietHours) ? view.quietHours.find(function (w) { return w && w.scope === "role"; }) : undefined;
-    const ownWindow = own && typeof own.window === "string" ? own.window : "";
-    if (role !== "director") {
-      const ownEnd = String(ownWindow).split("-")[1];
-      const ownState = own && own.inWindow
-        ? "holding now — quiet until " + (ownEnd ? ownEnd.trim() : "")
-        : "not holding now";
-      const editQuiet = quietEditing && quietEditing.role === role;
-      const quietBody = ownWindow !== "" ? ownWindow + " (own window; " + ownState + ")" : "no own window";
-      const quietControl = editQuiet
-        ? "<input id='quieteditinput' type='text' placeholder='23:00-07:00' value='" + esc(quietEditing.window) + "'>" +
-          "<div><button type='button' class='btn btn-sm btn-primary' data-act='quiet-save' data-arg='" + esc(role) + "'>Save</button> " +
-          "<button type='button' class='btn btn-sm' data-act='quiet-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-        : "<button type='button' class='btn btn-sm' data-act='quiet-edit' data-arg='" + esc(role) + "'>" + (ownWindow !== "" ? "Edit" : "Set quiet hours") + "</button>";
-      rows.push("<div><dt>Quiet hours</dt><dd title='" + esc(quietBody) + "'>" + esc(quietBody) + quietControl + "</dd></div>");
-    }
-    if (Array.isArray(view.quietHours)) view.quietHours.forEach(function (w) {
-      if (!w || w.scope === "role" || typeof w.window !== "string") return;
-      const end = String(w.window).split("-")[1];
-      const state = w.inWindow ? "holding now — quiet until " + (end ? end.trim() : "") : "not holding now";
-      rows.push(kvRow("Quiet hours", w.window + " (team window; " + state + ")"));
-    });
-    if (typeof view.inboxCount === "number") rows.push(kvRow("Queued prompts", String(view.inboxCount)));
-    // The loop's own spend over its retained event window (rolePayload's usage, summed from the
-    // same run_end events recentOutcomes reads): how much the loop burned on tokens and cost,
-    // with a notional suffix only when a claude-subscription seam burned non-zero notional spend
-    // — mirroring role-render.ts's Spend line, so the drawer and tumwater role <id> read one
-    // loop's spend identically. Each numeric field is coerced (foreign shapes read as 0) and an
-    // all-zero usage is absent on the payload, so this row never renders for a never-costly loop.
-    if (view.usage && typeof view.usage === "object") {
-      const u = view.usage;
-      const real = Number(u.costUsd) || 0;
-      const tokens = Number(u.tokens) || 0;
-      const notional = Number(u.notionalCostUsd) || 0;
-      let spend = fmtUsd(real) + " · " + fmtTokens(tokens) + " tokens";
-      if (notional !== 0) spend += " · " + fmtUsd(notional) + " notional";
-      rows.push(kvRow("Spend", spend));
-    }
-    // The per-role daily cap (rolePayload's dailyCap), worded like role-render.ts's Daily cap line.
-    // The per-role daily cap (rolePayload's dailyCap), worded like role-render.ts's Daily cap
-    // line. Shown for every non-director role — always, cap or not — because the "Set a cap"/
-    // "Edit cap" control is the end of the amber role-cap alert's path: the alert's remedy
-    // leads here. A director shows no row (role-view.ts's guard exempts it from a cap). While
-    // the cap editor is open for this role, an input prefilled with the current cap (empty for
-    // none) and Save/Discard replace the sentence, mirroring the notebook editor's markup.
-    if (role !== "director") {
-      const dc = view.dailyCap && typeof view.dailyCap === "object" ? view.dailyCap : null;
-      const editing = capEditing && capEditing.role === role;
-      const capBody = dc
-        ? fmtUsd(Number(dc.spentUsd) || 0) + " of " + fmtUsd(Number(dc.capUsd) || 0) + " spent today (" + (dc.over ? "holding now — no new runs until local midnight" : "not holding") + ")" +
-          (Array.isArray(dc.roleIds) && dc.roleIds.length > 1 ? " · shared by " + dc.roleIds.join(", ") : "")
-        : "no cap";
-      const capControl = editing
-        ? "<input id='capeditinput' type='number' min='0' step='0.01' value='" + (capEditing.value ? String(capEditing.value) : "") + "' placeholder='no cap'>" +
-          "<div><button type='button' class='btn btn-sm btn-primary' data-act='cap-save' data-arg='" + esc(role) + "'>Save</button> " +
-          "<button type='button' class='btn btn-sm' data-act='cap-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-        : "<button type='button' class='btn btn-sm' data-act='cap-edit' data-arg='" + esc(role) + "'>" + (dc ? "Edit cap" : "Set a cap") + "</button>";
-      rows.push("<div><dt>Daily cap</dt><dd title='" + esc(capBody) + "'>" + esc(capBody) + capControl + "</dd></div>");
-    }
-    // The standing instructions (roles.<base>.instructions, resolved through the base role),
-    // worded like role-render.ts's Instructions override. Shown for every role — always,
-    // override or not — because the Edit/Save control is how the director's and instance
-    // runs' instructions get written from the dashboard: the same always-shown rationale as
-    // the Daily cap row above. While the editor is open for this role, a textarea prefilled
-    // with the current text and Save/Discard replace the sentence, mirroring the notebook
-    // editor's markup; a role with no override still seeds an empty textarea, so an empty
-    // buffer on Save clears.
-    const instEditing = instructionsEditing && instructionsEditing.role === role;
-    const instText = typeof view.instructions === "string" ? view.instructions : "";
-    const instBody = instText.trim() !== "" ? clamp(instText) : "No standing instructions.";
-    const instControl = instEditing
-      ? "<textarea id='instructionsedittext' rows='10' class='mono' style='width:100%'>" + esc(instructionsEditing.text) + "</textarea>" +
-        "<div><button type='button' class='btn btn-sm btn-primary' data-act='instructions-save' data-arg='" + esc(role) + "'>Save</button> " +
-        "<button type='button' class='btn btn-sm' data-act='instructions-discard' data-arg='" + esc(role) + "'>Discard</button></div>"
-      : "<button type='button' class='btn btn-sm' data-act='instructions-edit' data-arg='" + esc(role) + "'>Edit</button>";
-    rows.push("<div><dt>Instructions override</dt><dd title='" + esc(instText) + "'>" + esc(instBody) + instControl + "</dd></div>");
-    if (typeof view.find === "string" && view.find.trim() !== "") rows.push(kvRow("Find text", clamp(view.find), view.find));
-    return rows.length ? "<section><div class='sec-head'><h3>Configuration</h3></div><dl class='kv'>" + rows.join("") + "</dl></section>" : "";
-  }
-  // An open notebook edit holds the draft's starting text, not the live payload, so a poll
+  // An open notes edit holds the draft's starting text, not the live payload, so a poll
   // refetch neither wipes the textarea nor changes the painted panel string. Clear waits for a
   // confirming click like entry cancel: the first click arms it for 5 s, the second posts.
   let noteEditing = null; // { role, text }
@@ -504,9 +320,9 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
   let intervalEditing = null; // { role, value } — value is the seeded override (number) or "" when none
   let instancesEditing = null; // { role, value } — value is the seeded count (number) or "" when none
   let modelEditing = null; // { role, provider, model, thinking } — the seeded raw overrides ("" when unset)
-  function repaintDrawerRole() { if (lastStatus) renderLoopDrawer(lastStatus); }
-  // The notebook clear and the backlog entry cancel each build a two-click confirm slot from
-  // the shared confirmSlot factory (defined in the loops splice, an earlier one), so the arm,
+  function repaintDrawerRole() { if (lastStatus) renderRoleDrawer(lastStatus); }
+  // The notes clear and the backlog entry cancel each build a two-click confirm slot from
+  // the shared confirmSlot factory (defined in the roles splice, an earlier one), so the arm,
   // guard, and disarm logic lives once.
   const noteClear = confirmSlot(repaintDrawerRole);
   const noteClearArmed = (role) => noteClear.armed(role);
@@ -526,24 +342,24 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
   function stopModelEdit() { modelEditing = null; repaintDrawerRole(); }
   function startQuietEdit(role, window) { quietEditing = { role, window: String(window ?? "") }; repaintDrawerRole(); }
   function stopQuietEdit() { quietEditing = null; repaintDrawerRole(); }
-  // The notebook fetch shares loadDrawerSection; closing the drawer clears drawerRole, so
+  // The notes fetch shares loadDrawerSection; closing the drawer clears drawerRole, so
   // reopening refetches.
   function loadDrawerRole(role) {
     return loadDrawerSection(role, "/api/role?role=", "Notes and prompt unavailable", (v) => { drawerRole = v; });
   }
 
-  async function loadLoopTicks(force) {
-    const role = openLoopRole();
-    if (!role || (!force && Date.now() - drawerTicksAt < 5000)) return;
-    drawerTicksAt = Date.now();
+  async function loadRoleRuns(force) {
+    const role = openRoleId();
+    if (!role || (!force && Date.now() - drawerRunsAt < 5000)) return;
+    drawerRunsAt = Date.now();
     try {
       const d = await getJson("/api/history?n=8&role=" + encodeURIComponent(role), pollSignal());
-      if (openLoopRole() !== role) return;
-      drawerTicks = d && Array.isArray(d.rows) ? d.rows : [];
+      if (openRoleId() !== role) return;
+      drawerRuns = d && Array.isArray(d.rows) ? d.rows : [];
     } catch {
-      if (drawerTicks === null) drawerTicks = [];
+      if (drawerRuns === null) drawerRuns = [];
     }
-    if (lastStatus) renderLoopDrawer(lastStatus);
+    if (lastStatus) renderRoleDrawer(lastStatus);
   }
 
   // Transcript lines by kind (transcript.ts's rendering): run separators, tool calls, thinking,
@@ -555,24 +371,38 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
     }).join("\n");
   }
   async function refreshTranscript(initial) {
-    const role = openLoopRole();
+    const role = openRoleId();
     if (!role) return;
+    const prompts = transcriptPrompts;
+    const grep = transcriptGrep;
     let d;
     try {
-      d = await getJson("/api/transcript?role=" + encodeURIComponent(role) + "&n=200", pollSignal());
+      d = await getJson("/api/transcript?role=" + encodeURIComponent(role) + "&n=200" + (prompts ? "&prompt=1" : "") + (grep ? "&grep=" + encodeURIComponent(grep) : ""), pollSignal());
     } catch {
       return; // keep the previous content on a failed poll
     }
     const pre = $("transcript");
-    if (openLoopRole() !== role || !pre) return;
+    if (openRoleId() !== role || !pre || transcriptPrompts !== prompts || transcriptGrep !== grep) return;
     const lines = Array.isArray(d.lines) ? d.lines : [];
-    const html = lines.length ? transcriptHtml(lines) : "<span class='muted'>No transcript yet — it fills in once this role's next run starts.</span>";
+    const html = lines.length ? transcriptHtml(lines) : grep ? "<span class='muted'>No transcript entries match \u201c" + esc(grep) + "\u201d.</span>" : "<span class='muted'>No transcript yet — it fills in once this role's next run starts.</span>";
     // Stay pinned to the newest line while the reader is at the bottom; leave them be if they
     // scrolled up to read.
     const atBottom = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 12;
     if (paintPanel("transcript", html) && (initial || atBottom)) pre.scrollTop = pre.scrollHeight;
   }
 
+  function toggleTranscriptPrompts() {
+    transcriptPrompts = !transcriptPrompts;
+    const b = $("transcriptprompts");
+    if (b) b.textContent = transcriptPrompts ? "Hide prompts" : "Show prompts";
+    refreshTranscript(true);
+  }
+
+  function setTranscriptGrep(value) {
+    transcriptGrep = String(value ?? "").trim();
+    refreshTranscript(true);
+  }
+
   // A plan/bug cancel waits for its confirming click, the confirmAbort shape: the first click
   // arms it for 5 s, a second inside the window fires, and a timeout disarms. The slot records
   // the title too: a list that shifted between the clicks must re-arm, not cancel whatever
@@ -621,7 +451,7 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
         "<button type='button' class='btn btn-sm btn-primary' data-act='answer-record' data-arg='" + index + "'>" + icon("chat") + "Record answer</button>" +
         "<button type='button' class='btn btn-sm' data-act='answer' data-arg='" + index + "'>Ask the director instead</button>"
       : "<button type='button' class='btn btn-sm' data-act='mention' data-arg='" + esc(file + ":" + index) + "'>" + icon("chat") + "Ask the director about this</button>" +
-        (d.refused || d.waiting ? "<button type='button' class='btn btn-sm btn-primary' data-act='entry-release' data-arg='" + esc(file + ":" + index) + "'>Release this entry</button>" : "") +
+        (d.refused || d.waiting || d.heldForOperator ? "<button type='button' class='btn btn-sm btn-primary' data-act='entry-release' data-arg='" + esc(file + ":" + index) + "'>Release this entry</button>" : "") +
         (index > 0 ? "<button type='button' class='btn btn-sm' data-act='entry-top' data-arg='" + esc(file + ":" + index) + "'>Move to top</button>" : "") +
         "<button type='button' class='btn btn-sm' data-act='entry-edit' data-arg='" + esc(file + ":" + index) + "'>Edit this entry</button>" +
         "<button type='button' class='btn btn-sm btn-danger' data-act='entry-cancel' data-arg='" + esc(file + ":" + index) + "'>" + (entryCancelArmed(file + ":" + index) ? "Click again to cancel" : "Cancel this entry") + "</button>";
@@ -632,15 +462,26 @@ export const GUI_CLIENT_DRAWER_JS = String.raw `  let drawer = null; // { kind:
 
   async function refreshDrawer() {
     if (!drawer) return;
-    if (drawer.kind === "loop") { // vocabulary-ok: the drawer kind stays "loop"
-      if (lastStatus) renderLoopDrawer(lastStatus);
+    if (drawer.kind === "role") {
+      if (lastStatus) renderRoleDrawer(lastStatus);
       await refreshTranscript(false);
     } else {
       await refreshEntry();
     }
   }
   $("scrim").addEventListener("click", closeDrawer);
+  $("drawer").addEventListener("input", (ev) => {
+    if (ev.target && ev.target.id === "transcriptgrep") setTranscriptGrep(ev.target.value);
+  });
   $("drawer").addEventListener("click", (ev) => {
+    if (clickClosest(ev, "button[data-transcript-prompts]")) {
+      toggleTranscriptPrompts();
+      return;
+    }
+    if (clickClosest(ev, "button[data-change-stat]")) {
+      toggleDrawerChangeStat();
+      return;
+    }
     const b = clickClosest(ev, "button.rowaction");
     if (b) rowAction(b.dataset.action, b.dataset.role, b.dataset.for === undefined ? undefined : Number(b.dataset.for));
   });