huddle-cli 0.1.1 → 0.1.3

package/dist/ui/narrator.js

@@ -0,0 +1,56 @@
+// One plain-English line on top of a live run: what's happening now, and
+// whether you're needed.
+//
+// Found live (0.1.2 test): with four agents' notes scrolling by, the user
+// couldn't tell what the team was doing, or whether it was waiting on them.
+// The narrator answers both, every second, with words, not engineering:
+//   Now: the agents are each sketching how they'd build it · nothing needed from you
+//   Now: building — 2 of 8 parts done · claude: argv parser · codex: conversion core 25%
+//   ⚑ claude has a question for you — answer below · picks option 1 in 41s
+import { fmtDuration } from "../adapters/usage.js";
+import { C, truncate } from "./term.js";
+const COUNCIL = {
+    1: "the agents are each sketching how they'd build it",
+    2: "they're reading each other's ideas: what to borrow, what could go wrong",
+    3: "one agent is writing the plan from the best ideas",
+    4: "the others are double-checking the plan before anyone writes code",
+};
+/** "Build strict positional argv parser with UsageError" → "strict positional argv parser". */
+function shortTitle(t, n = 32) {
+    const s = t.replace(/^(build|create|write|add|implement|make|set up)\s+(the\s+|a\s+|an\s+)?/i, "").replace(/\s+(with|and|for|that)\s.*$/i, "");
+    return s.length > n ? s.slice(0, n - 1) + "…" : s;
+}
+/** The narrator's words for the run as it stands (no colors), and whether it's waiting on you. */
+export function narration(stats, now = Date.now()) {
+    const ask = stats.ask;
+    if (ask && ask.until > now)
+        return { needsYou: true, text: `${ask.from} has a question for you — answer below · picks option 1 in ${fmtDuration(ask.until - now)}` };
+    const r = stats.run;
+    if (!r)
+        return { needsYou: false, text: "getting started" };
+    if (r.phase === "COUNCIL")
+        return { needsYou: false, text: COUNCIL[r.step ?? 1] ?? COUNCIL[1] };
+    if (r.phase === "PLAN")
+        return { needsYou: false, text: "splitting the work into parts" };
+    if (r.phase === "DONE")
+        return { needsYou: false, text: "done — the summary is below" };
+    const busy = [...stats.agents].filter(([, a]) => a.busySince && a.doing);
+    const who = busy.map(([id, a]) => `${id}: ${shortTitle(a.doing)}${a.pct ? ` ${a.pct}%` : ""}`);
+    if (r.phase === "QA")
+        return { needsYou: false, text: `testing the finished build: agents try to break parts they didn't write${r.round ? ` (round ${r.round})` : ""}${who.length ? " · " + who.join(" · ") : ""}` };
+    const done = r.total ? `${r.done} of ${r.total} parts done` : "starting";
+    return { needsYou: false, text: `building — ${done}${r.failed ? `, ${r.failed} stuck` : ""}${who.length ? " · " + who.join(" · ") : ""}` };
+}
+/** The narrator line, cut to `W` cells: "  Now: … · nothing needed from you". */
+export function narratorLine(stats, W, now = Date.now()) {
+    const n = narration(stats, now);
+    if (n.needsYou)
+        return truncate(`  ${C.yellow("⚑ " + n.text)}`, W);
+    const calm = C.faint(" · nothing needed from you");
+    const head = `  ${C.bold(C.violet("Now:"))} `;
+    // The reassurance stays; the detail gives way.
+    const room = W - 2 - 5 - 27;
+    const text = n.text.length > room && room > 12 ? n.text.slice(0, room - 1) + "…" : n.text;
+    return truncate(`${head}${text}${calm}`, W);
+}
+//# sourceMappingURL=narrator.js.map

package/dist/ui/story.js

@@ -17,7 +17,7 @@ import { C, dot, pad, truncate, AGENT_COLOR } from "./term.js";
 import { fmtDuration, fmtTokens } from "../adapters/usage.js";
 import { isHelpOffer } from "../room/progress.js";
 /** The scheduler's own event types, persisted as "run.<type>" (scheduler.ts). */
-const CORE_RUN = new Set(["start", "declined", "tokens", "review", "reviewed", "merged", "failed", "stuck", "conflict", "resolved", "handoff"]);
+export const CORE_RUN = new Set(["start", "declined", "tokens", "review", "reviewed", "merged", "failed", "stuck", "conflict", "resolved", "handoff"]);
 const NOT_AGENTS = new Set(["huddle", "room", "all", "you", "council", ""]);
 function parse(e) {
     let p = {};
@@ -40,9 +40,9 @@ function parse(e) {
         delete p.type;
     return { ts: e.ts, type, agent: e.agent_id, task: e.task_id, p };
 }
-const str = (v) => (v === undefined || v === null ? "" : typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v));
+export const str = (v) => (v === undefined || v === null ? "" : typeof v === "string" ? v : typeof v === "object" ? JSON.stringify(v) : String(v));
 /** First non-empty field among `keys`. */
-const pick = (p, ...keys) => {
+export const pick = (p, ...keys) => {
     for (const k of keys) {
         const v = p[k];
         if (v !== undefined && v !== null && str(v).trim())
@@ -50,7 +50,7 @@ const pick = (p, ...keys) => {
     }
     return "";
 };
-const oneLine = (s, n = 140) => {
+export const oneLine = (s, n = 140) => {
     const l = s.replace(/\s+/g, " ").trim();
     return l.length <= n ? l : l.slice(0, n - 1) + "…";
 };
@@ -74,7 +74,7 @@ function qaEyes(checkers, authors) {
         return "(didn't write it)";
     return mine.length === checkers.length ? "(wrote some of it too — checking anyway)" : `(${mine.join(", ")} wrote some of it too)`;
 }
-const list = (v) => {
+export const list = (v) => {
     if (Array.isArray(v))
         return v.map(str);
     if (typeof v === "string") {
@@ -373,6 +373,8 @@ export function buildStory(run, runs = 1) {
             case "memory.added": {
                 const author = pick(p, "author") || e.agent || "";
                 const body = pick(p, "body");
+                if (author === "you")
+                    break; // your words: already their message or answer
                 if (author === "huddle") {
                     // Mostly the scheduler restating what run.* says; the red gate is news.
                     if (/red test gate/.test(body))
@@ -452,6 +454,19 @@ export function buildStory(run, runs = 1) {
                     st(to).received++;
                 break;
             }
+            // An agent's question for the person at the keyboard (huddle_ask_user), and what came back.
+            case "user.ask": {
+                const from = pick(p, "from") || e.agent || "?";
+                const opts = list(p.options);
+                add({ ts, kind: "message", type: e.type, agent: from, to: "you", text: oneLine(pick(p, "question"), 400), detail: `question for you · ${opts.map((o, i) => `${i + 1}. ${o}`).join(" · ")}` });
+                break;
+            }
+            case "user.answer": {
+                const to = pick(p, "from") || e.agent || "?";
+                const mine = pick(p, "by") === "you";
+                add({ ts, kind: "message", type: e.type, agent: mine ? "you" : "huddle", to, text: oneLine(pick(p, "answer"), 400), detail: mine ? "your answer" : "no answer in time · went with option 1" });
+                break;
+            }
             case "handoff": {
                 const from = pick(p, "from") || e.agent;
                 const to = pick(p, "to");
@@ -562,6 +577,14 @@ export function buildStory(run, runs = 1) {
             case "run.stuck":
                 add({ ts, kind: "fail", type: e.type, agent: null, text: `! blocked by failures: ${list(p.blocked).join(" · ")}` });
                 break;
+            case "busy": // quiet past the silence window, but working: not taken over (busy.ts)
+                add({ ts, kind: "progress", type: e.type, agent: pick(p, "agent") || e.agent, text: `⧗ running a long command: quiet ${Math.round((Number(p.quietMs) || 0) / 60_000) || "<1"} min, but busy — not taken over`, detail: oneLine(pick(p, "why"), 200) || undefined });
+                break;
+            case "budget": {
+                const left = list(p.left);
+                add({ ts, kind: "fail", type: e.type, agent: null, text: `! token budget ${p.level === "hard" ? "ran over: agents stopped" : "nearly spent: no new work started"} (${Math.round(((Number(p.tokens) || 0) / (Number(p.limit) || 1)) * 100)}% of ${fmtTokens(Number(p.limit) || 0)})`, detail: left.length ? `left undone: ${left.join(" · ")}` : undefined });
+                break;
+            }
             case "run.conflict": {
                 const a = pick(p, "agent") || e.agent || "?";
                 const author = pick(p, "author");
@@ -922,7 +945,7 @@ export function collabLines(s) {
         out.push({ label: "credit", text: [...c.credit.entries()].sort((a, b) => b[1] - a[1]).map(([a, k]) => `${a} ${n(k, "task")}`).join(" · ") });
     return out;
 }
-function crewRows(s) {
+export function crewRows(s) {
     const done = s.items.filter((it) => it.type === "qa.done");
     return s.agents.map((a) => {
         const x = s.stats.get(a);
@@ -930,14 +953,14 @@ function crewRows(s) {
         return { agent: a, merged: x.merged, failed: x.failed, reviews: x.reviews, qa, ms: x.ms, tokens: x.tokens, cached: x.cached };
     });
 }
-const plural = (k, one, many = one + "s") => `${k} ${k === 1 ? one : many}`;
+export const plural = (k, one, many = one + "s") => `${k} ${k === 1 ? one : many}`;
 /** "5 merged · 3 reviews · 1 QA" — what an agent did, nothing for what it didn't. */
-function didLine(c) {
+export function didLine(c) {
     const parts = [`${c.merged} merged`, c.failed ? `${c.failed} failed` : "", c.reviews ? plural(c.reviews, "review") : "", c.qa ? `${c.qa} QA` : ""];
     return parts.filter(Boolean).join(" · ");
 }
 /** The run cut into its phases: the build, then QA (from the first QA round on). */
-function phases(s) {
+export function phases(s) {
     // The council's decisions and risks, written to shared memory as the build starts: part of the plan.
     const agreed = s.items.filter((it) => it.agent === "council" && it.type === "memory.added");
     const rest = s.items.filter((it) => !agreed.includes(it));
@@ -945,14 +968,14 @@ function phases(s) {
     return i < 0 ? { agreed, build: rest, qa: [] } : { agreed, build: rest.slice(0, i), qa: rest.slice(i) };
 }
 /** A council decision or risk from shared memory, as "decided" / "risk (by)". */
-function agreement(it) {
+export function agreement(it) {
     const risk = /^gotcha: council risk:/.test(it.text);
     return { risk, by: risk ? /flagged by (\S+)/.exec(it.detail ?? "")?.[1] : undefined, body: it.text.replace(/^\w+: council( risk)?:\s*/, "") };
 }
 /** The council is recorded in one go when it's done: its items share one instant, so they get no clock. */
 const councilInstant = (s) => s.design.length > 1 && s.design.at(-1).ts - s.design[0].ts < 2000;
 /** How the run ended: totals, merges gated on tests, QA's last word. */
-function outcome(s) {
+export function outcome(s) {
     const rows = crewRows(s);
     const tokens = rows.reduce((n, c) => n + c.tokens, 0);
     const cached = rows.reduce((n, c) => n + c.cached, 0);
@@ -964,7 +987,7 @@ function outcome(s) {
     return { tokens, cached, merges: merges.length, green, qa, rounds, ms: s.run.end - s.run.start };
 }
 /** The teamwork as numbers, for the summary line and the HTML tiles. Only what happened (or was looked for). */
-function tally(s) {
+export function tally(s) {
     const c = s.collab;
     const out = [];
     if (c.adopts.length || c.flaws.length) {
@@ -997,7 +1020,7 @@ function tally(s) {
     return out;
 }
 /** Each buddy note with how it ended: fixed in code, answered, ignored — or just sent. */
-function buddyNotes(s) {
+export function buddyNotes(s) {
     const left = s.collab.followups.filter((f) => f.kind !== "radar");
     return s.collab.buddy
         .filter((b) => b.notes)
@@ -1010,7 +1033,7 @@ function buddyNotes(s) {
     });
 }
 // ---- terminal -----------------------------------------------------------------
-const clock = (ms) => {
+export const clock = (ms) => {
     const s = Math.max(0, Math.round(ms / 1000));
     return `+${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
 };
@@ -1208,10 +1231,88 @@ export function renderRunList(runs) {
         .join("\n");
 }
 // ---- HTML (a static, self-contained report file) --------------------------------
-const esc = (s) => str(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-const colorOf = (a) => (a ? AGENT_COLOR[a.split("#")[0]] ?? "#8A857C" : "#7B6CF6");
+export const esc = (s) => str(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+export const colorOf = (a) => (a ? AGENT_COLOR[a.split("#")[0]] ?? "#8A857C" : "#7B6CF6");
 /** Lines that are the agents thinking out loud, hidden behind a toggle so the story reads first. */
 const NOISE = (it) => it.kind === "progress" || it.kind === "announce" || it.kind === "memory" || it.type === "memory.added";
+/** The story page's look — shared with `huddle export --format html` (src/ui/export.ts). */
+export const STORY_CSS = `:root{--bg:#f6f5f1;--fg:#1d1b18;--mute:#6f6a62;--line:#e4e0d8;--card:#fff;--soft:#efede7;--ok:#23864c;--bad:#c93f30;--warn:#a86f05;--brand:#6a5af0;color-scheme:light}
+@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#121117;--fg:#ece9e3;--mute:#9a948b;--line:#2b2932;--card:#1b1a21;--soft:#23222a;--ok:#4cc27c;--bad:#f06a5b;--warn:#e0a53a;--brand:#9488ff;color-scheme:dark}}
+:root[data-theme="dark"]{--bg:#121117;--fg:#ece9e3;--mute:#9a948b;--line:#2b2932;--card:#1b1a21;--soft:#23222a;--ok:#4cc27c;--bad:#f06a5b;--warn:#e0a53a;--brand:#9488ff;color-scheme:dark}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
+main{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
+h1{font-size:26px;line-height:1.25;margin:6px 0 4px;word-break:break-word}
+h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin:36px 0 12px}
+h2 small{text-transform:none;letter-spacing:0}
+h3{font-size:14px;margin:0 0 10px}
+.brand{font-weight:700;color:var(--brand);font-size:13px;letter-spacing:.04em}
+.sub,small,.detail,time,.meta,.none,.legend{color:var(--mute)}small{font-size:12px;margin-left:6px;font-weight:400}
+.none{font-size:13px;margin:6px 0}
+.who{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}.who i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
+.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
+.hero details{margin:8px 0}
+.kpis,.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px}
+.kpi,.tile{background:var(--soft);border-radius:12px;padding:10px 12px;min-width:0}
+.kpi b,.tile b{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
+.kpi span,.tile span{font-size:12px;color:var(--mute)}
+.kpi.ok b,.tile.ok b{color:var(--ok)}.kpi.bad b,.tile.bad b{color:var(--bad)}.kpi.warn b,.tile.warn b{color:var(--warn)}
+.verdict{margin:14px 0 0;font-weight:600}.verdict.ok{color:var(--ok)}.verdict.warn{color:var(--warn)}
+.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
+.agent{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:10px 14px;min-width:0}
+.agent .an{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px}.agent .an i{width:11px;height:11px;border-radius:50%;background:var(--c)}
+.agent .as{font-size:14px}.agent .am{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
+.cards{columns:320px 3;column-gap:12px;margin-top:12px}.cards .card{break-inside:avoid;margin-bottom:12px}
+.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
+.list li{font-size:14px;padding:7px 0;border-top:1px solid var(--line);word-break:break-word}.list li:first-child{border-top:0}
+.list li.mute{color:var(--mute)}
+.badge{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--mute);white-space:nowrap}
+.badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}.badge.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}.badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
+.grid td,.grid th{text-align:center}.grid th:first-child{text-align:left}
+.ad,.fl{display:inline-block;min-width:22px;padding:1px 6px;margin:1px;border-radius:6px;font-weight:700;font-size:12px}
+.ad{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}.fl{color:var(--warn);background:color-mix(in srgb,var(--warn) 17%,transparent)}.z{color:var(--line)}
+.legend{font-size:12px;margin:8px 0}
+.quote{font-size:13px;padding:6px 0 6px 10px;border-left:3px solid var(--line);margin-top:6px;word-break:break-word}
+.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
+.lanesbox{border:1px solid var(--line);border-radius:12px;background:var(--card)}
+.lanes{min-width:640px;padding:8px 12px 12px}
+.axis{position:relative;height:18px;margin-left:120px;font-size:11px;color:var(--mute)}.axis span{position:absolute;transform:translateX(-50%)}.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)}
+.lane{display:flex;align-items:center;height:38px;border-top:1px solid var(--line)}
+.lane .name{width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;font-size:13px}
+.track{position:relative;flex:1;height:26px}
+.bar{position:absolute;top:3px;height:20px;border-radius:5px;background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid var(--c);overflow:hidden;font-size:11px;line-height:18px;padding:0 4px;white-space:nowrap}
+.bar.review{border-style:dashed}.bar.conflict{border-color:var(--warn)}.bar.qa{border-style:dotted}
+.bar.ok{box-shadow:inset -3px 0 0 var(--ok)}.bar.bad{box-shadow:inset -3px 0 0 var(--bad)}.bar.warn{box-shadow:inset -3px 0 0 var(--warn)}
+.mark{position:absolute;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--brand)}
+.mark.merge{background:var(--ok)}.mark.fail{background:var(--bad)}.mark.qa,.mark.takeover{background:var(--warn)}
+ol,ul{padding:0;margin:0;list-style:none}
+.phase{margin-top:22px}
+.phase h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:400;color:var(--mute);font-size:13px}
+.tag{font-weight:800;letter-spacing:.08em;color:#fff;background:var(--brand);border-radius:6px;padding:2px 8px;font-size:12px}
+.timeline li{display:flex;gap:10px;padding:6px 0;font-size:14px;border-top:1px solid var(--line);min-width:0}
+.timeline li>div{min-width:0;word-break:break-word}
+.timeline time{flex:none;width:46px;font-variant-numeric:tabular-nums;font-size:13px}
+.timeline .merge .text{color:var(--ok);font-weight:600}.timeline .fail .text{color:var(--bad)}.timeline .conflict .text,.timeline .qa .text,.timeline .takeover .text{color:var(--warn)}
+.timeline .progress .text,.timeline .announce .text,.timeline .team .text,.timeline .other .text,.timeline .memory .text{color:var(--mute)}
+#noise{position:absolute;opacity:0;pointer-events:none}
+.toggle{display:inline-block;font-size:13px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer;user-select:none;margin-top:4px}
+.toggle::before{content:"○ "}#noise:checked~.toggle::before{content:"● "}
+#noise:focus-visible~.toggle{outline:2px solid var(--brand)}
+.timeline li.noise{display:none}#noise:checked~.phases .timeline li.noise{display:flex}
+.arrow{color:var(--mute)}.detail{font-size:13px;white-space:pre-wrap;word-break:break-word}
+.plan{counter-reset:n}.plan li{padding:6px 0;border-top:1px solid var(--line);word-break:break-word}.plan li::before{counter-increment:n;content:counter(n) ". ";color:var(--mute)}
+.contract{margin:10px 0 0}
+.result li{font-size:15px}.result li.ok{color:var(--ok)}.result li.warn{color:var(--warn)}
+details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:10px 0;padding:8px 12px}summary{cursor:pointer;font-weight:600}
+.thread{display:flex;flex-direction:column;gap:8px;margin-top:10px}
+.thread li{max-width:85%;padding:8px 10px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--c);word-break:break-word}
+.thread li.r{align-self:flex-end;border-left:1px solid var(--line);border-right:4px solid var(--c)}.thread .meta{font-size:12px}
+table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
+table.team td{white-space:normal;word-break:break-word}table.team th{color:var(--mute);font-weight:600;vertical-align:top}
+td.hot{font-weight:700;color:var(--brand)}td.self{color:var(--mute)}
+footer{margin-top:40px;font-size:12px;color:var(--mute);text-align:center}
+@media (max-width:520px){h1{font-size:21px}.hero{padding:16px}.kpi b,.tile b{font-size:20px}.kpis,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
+`;
 export function renderHtml(s) {
     const r = s.run;
     const c = s.collab;
@@ -1370,83 +1471,7 @@ export function renderHtml(s) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Huddle story</title>
 <style>
-:root{--bg:#f6f5f1;--fg:#1d1b18;--mute:#6f6a62;--line:#e4e0d8;--card:#fff;--soft:#efede7;--ok:#23864c;--bad:#c93f30;--warn:#a86f05;--brand:#6a5af0;color-scheme:light}
-@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#121117;--fg:#ece9e3;--mute:#9a948b;--line:#2b2932;--card:#1b1a21;--soft:#23222a;--ok:#4cc27c;--bad:#f06a5b;--warn:#e0a53a;--brand:#9488ff;color-scheme:dark}}
-:root[data-theme="dark"]{--bg:#121117;--fg:#ece9e3;--mute:#9a948b;--line:#2b2932;--card:#1b1a21;--soft:#23222a;--ok:#4cc27c;--bad:#f06a5b;--warn:#e0a53a;--brand:#9488ff;color-scheme:dark}
-*{box-sizing:border-box}
-body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
-main{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
-h1{font-size:26px;line-height:1.25;margin:6px 0 4px;word-break:break-word}
-h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin:36px 0 12px}
-h2 small{text-transform:none;letter-spacing:0}
-h3{font-size:14px;margin:0 0 10px}
-.brand{font-weight:700;color:var(--brand);font-size:13px;letter-spacing:.04em}
-.sub,small,.detail,time,.meta,.none,.legend{color:var(--mute)}small{font-size:12px;margin-left:6px;font-weight:400}
-.none{font-size:13px;margin:6px 0}
-.who{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}.who i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
-.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
-.hero details{margin:8px 0}
-.kpis,.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px}
-.kpi,.tile{background:var(--soft);border-radius:12px;padding:10px 12px;min-width:0}
-.kpi b,.tile b{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
-.kpi span,.tile span{font-size:12px;color:var(--mute)}
-.kpi.ok b,.tile.ok b{color:var(--ok)}.kpi.bad b,.tile.bad b{color:var(--bad)}.kpi.warn b,.tile.warn b{color:var(--warn)}
-.verdict{margin:14px 0 0;font-weight:600}.verdict.ok{color:var(--ok)}.verdict.warn{color:var(--warn)}
-.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
-.agent{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:10px 14px;min-width:0}
-.agent .an{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px}.agent .an i{width:11px;height:11px;border-radius:50%;background:var(--c)}
-.agent .as{font-size:14px}.agent .am{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
-.cards{columns:320px 3;column-gap:12px;margin-top:12px}.cards .card{break-inside:avoid;margin-bottom:12px}
-.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
-.list li{font-size:14px;padding:7px 0;border-top:1px solid var(--line);word-break:break-word}.list li:first-child{border-top:0}
-.list li.mute{color:var(--mute)}
-.badge{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--mute);white-space:nowrap}
-.badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}.badge.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}.badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
-.grid td,.grid th{text-align:center}.grid th:first-child{text-align:left}
-.ad,.fl{display:inline-block;min-width:22px;padding:1px 6px;margin:1px;border-radius:6px;font-weight:700;font-size:12px}
-.ad{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}.fl{color:var(--warn);background:color-mix(in srgb,var(--warn) 17%,transparent)}.z{color:var(--line)}
-.legend{font-size:12px;margin:8px 0}
-.quote{font-size:13px;padding:6px 0 6px 10px;border-left:3px solid var(--line);margin-top:6px;word-break:break-word}
-.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
-.lanesbox{border:1px solid var(--line);border-radius:12px;background:var(--card)}
-.lanes{min-width:640px;padding:8px 12px 12px}
-.axis{position:relative;height:18px;margin-left:120px;font-size:11px;color:var(--mute)}.axis span{position:absolute;transform:translateX(-50%)}.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)}
-.lane{display:flex;align-items:center;height:38px;border-top:1px solid var(--line)}
-.lane .name{width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;font-size:13px}
-.track{position:relative;flex:1;height:26px}
-.bar{position:absolute;top:3px;height:20px;border-radius:5px;background:color-mix(in srgb,var(--c) 30%,transparent);border:1px solid var(--c);overflow:hidden;font-size:11px;line-height:18px;padding:0 4px;white-space:nowrap}
-.bar.review{border-style:dashed}.bar.conflict{border-color:var(--warn)}.bar.qa{border-style:dotted}
-.bar.ok{box-shadow:inset -3px 0 0 var(--ok)}.bar.bad{box-shadow:inset -3px 0 0 var(--bad)}.bar.warn{box-shadow:inset -3px 0 0 var(--warn)}
-.mark{position:absolute;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--brand)}
-.mark.merge{background:var(--ok)}.mark.fail{background:var(--bad)}.mark.qa,.mark.takeover{background:var(--warn)}
-ol,ul{padding:0;margin:0;list-style:none}
-.phase{margin-top:22px}
-.phase h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:400;color:var(--mute);font-size:13px}
-.tag{font-weight:800;letter-spacing:.08em;color:#fff;background:var(--brand);border-radius:6px;padding:2px 8px;font-size:12px}
-.timeline li{display:flex;gap:10px;padding:6px 0;font-size:14px;border-top:1px solid var(--line);min-width:0}
-.timeline li>div{min-width:0;word-break:break-word}
-.timeline time{flex:none;width:46px;font-variant-numeric:tabular-nums;font-size:13px}
-.timeline .merge .text{color:var(--ok);font-weight:600}.timeline .fail .text{color:var(--bad)}.timeline .conflict .text,.timeline .qa .text,.timeline .takeover .text{color:var(--warn)}
-.timeline .progress .text,.timeline .announce .text,.timeline .team .text,.timeline .other .text,.timeline .memory .text{color:var(--mute)}
-#noise{position:absolute;opacity:0;pointer-events:none}
-.toggle{display:inline-block;font-size:13px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer;user-select:none;margin-top:4px}
-.toggle::before{content:"○ "}#noise:checked~.toggle::before{content:"● "}
-#noise:focus-visible~.toggle{outline:2px solid var(--brand)}
-.timeline li.noise{display:none}#noise:checked~.phases .timeline li.noise{display:flex}
-.arrow{color:var(--mute)}.detail{font-size:13px;white-space:pre-wrap;word-break:break-word}
-.plan{counter-reset:n}.plan li{padding:6px 0;border-top:1px solid var(--line);word-break:break-word}.plan li::before{counter-increment:n;content:counter(n) ". ";color:var(--mute)}
-.contract{margin:10px 0 0}
-.result li{font-size:15px}.result li.ok{color:var(--ok)}.result li.warn{color:var(--warn)}
-details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:10px 0;padding:8px 12px}summary{cursor:pointer;font-weight:600}
-.thread{display:flex;flex-direction:column;gap:8px;margin-top:10px}
-.thread li{max-width:85%;padding:8px 10px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--c);word-break:break-word}
-.thread li.r{align-self:flex-end;border-left:1px solid var(--line);border-right:4px solid var(--c)}.thread .meta{font-size:12px}
-table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
-table.team td{white-space:normal;word-break:break-word}table.team th{color:var(--mute);font-weight:600;vertical-align:top}
-td.hot{font-weight:700;color:var(--brand)}td.self{color:var(--mute)}
-footer{margin-top:40px;font-size:12px;color:var(--mute);text-align:center}
-@media (max-width:520px){h1{font-size:21px}.hero{padding:16px}.kpi b,.tile b{font-size:20px}.kpis,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
-</style>
+${STORY_CSS}</style>
 </head>
 <body>
 <main>

package/dist/ui/talk.js

@@ -0,0 +1,176 @@
+// You and the room, during a run: the agents' questions for you
+// (huddle_ask_user) and what you type to them.
+//
+// A question shows like the ones Claude Code, Codex and Cursor ask, with
+// numbered options, the agent's recommendation first:
+//
+//   ⚑ claude asks you · should it also convert Rankine?
+//     1. No, just C, F and K (recommended)
+//     2. Yes, add Rankine too
+//     type 1-2 · Enter = 1 · or answer in your own words · picks 1 in 90s
+//
+// Unanswered, it goes with option 1 when the time runs out: the run never
+// waits on someone who walked away. Anything else you type during a run goes
+// to every working agent, sent as "you" (room/user.ts); "@codex …" to one.
+import { fmtDuration } from "../adapters/usage.js";
+import { C } from "./term.js";
+export class Talk {
+    now;
+    queue = [];
+    /** A question is on screen (the first one asked; the rest wait their turn). */
+    onShow = () => { };
+    /** It was answered, by you or by the clock. */
+    onSettled = () => { };
+    /** Set by the run while it's on: what you typed for the agents, and `details`. */
+    say = null;
+    details = null;
+    constructor(now = () => Date.now()) {
+        this.now = now;
+    }
+    /** The question on screen and when it times out, if any. */
+    current() {
+        const p = this.queue[0];
+        return p ? { q: p.q, until: p.until } : null;
+    }
+    ask(q) {
+        return new Promise((resolve) => {
+            const p = { q, until: 0, settle: resolve, timer: undefined };
+            this.queue.push(p);
+            if (this.queue.length === 1)
+                this.show();
+        });
+    }
+    /** The time starts when a question reaches the screen, not when it was asked. */
+    show() {
+        const p = this.queue[0];
+        if (!p)
+            return;
+        p.until = this.now() + p.q.waitMs;
+        p.timer = setTimeout(() => this.settle({ choice: 1, text: "", by: "default" }), p.q.waitMs);
+        this.onShow(p.q, p.until);
+    }
+    settle(a) {
+        const p = this.queue.shift();
+        if (!p)
+            return;
+        clearTimeout(p.timer);
+        p.settle(a);
+        this.onSettled(p.q, a);
+        this.show();
+    }
+    /**
+     * A line you typed. With a question up, it's the answer: a number picks that
+     * option, Enter picks 1, anything else is your answer in your own words.
+     * Returns false when no question is up (the line is for someone else).
+     */
+    answer(line) {
+        const p = this.queue[0];
+        if (!p)
+            return false;
+        const t = line.trim();
+        const k = Number(t);
+        if (!t)
+            this.settle({ choice: 1, text: "", by: "you" });
+        else if (/^\d$/.test(t) && k >= 1 && k <= p.q.options.length)
+            this.settle({ choice: k, text: "", by: "you" });
+        else
+            this.settle({ choice: null, text: t, by: "you" });
+        return true;
+    }
+    /** Every open question goes with option 1 (the run ended or was stopped). */
+    close() {
+        while (this.queue.length)
+            this.settle({ choice: 1, text: "", by: "default" });
+    }
+}
+/** The question as it's printed. */
+export function questionLines(q, until, now = Date.now()) {
+    const out = [`  ${C.yellow("⚑")} ${C.bold(q.from)} ${C.yellow("asks you")} ${C.faint("·")} ${q.question}`];
+    if (q.why)
+        out.push(C.faint(`    ${q.why}`));
+    q.options.forEach((o, i) => out.push(`    ${C.bold(String(i + 1) + ".")} ${o}${i === 0 ? C.faint(" (recommended)") : ""}`));
+    out.push(C.faint(`    type 1-${q.options.length} · Enter = 1 · or answer in your own words · picks 1 in ${fmtDuration(Math.max(0, until - now))}`));
+    return out;
+}
+/** "  → you chose 2: Yes, add Rankine too" / "  → no answer in 1m30s: claude goes with 1: …" */
+export function settledLine(q, a) {
+    if (a.by === "default")
+        return C.faint(`    → no answer in ${fmtDuration(q.waitMs)}: ${q.from} goes with 1 · ${q.options[0]}`);
+    return `    ${C.green("→")} ${a.choice ? `you chose ${a.choice} · ${q.options[a.choice - 1]}` : `you said: ${a.text}`} ${C.faint(`· sent to ${q.from}`)}`;
+}
+/** "@codex use 2 decimals" → to codex; anything else → everyone working. */
+export function addressee(line) {
+    const m = /^@([\w#./-]+)[,:]?\s+([\s\S]+)$/.exec(line.trim());
+    return m ? { to: m[1], text: m[2].trim() } : { text: line.trim() };
+}
+/**
+ * A typing line under a one-shot run's pinned block (`huddle join` on a
+ * terminal), so you can answer questions and talk to the agents there too.
+ * Raw keys: Enter sends, Backspace and ctrl-u edit, ctrl-c stops the run.
+ */
+export class KeyLine {
+    onLine;
+    onChange;
+    onInterrupt;
+    input;
+    buf = "";
+    on = false;
+    onData = (d) => this.feed(String(d));
+    constructor(onLine, onChange, 
+    /** ctrl-c: raw mode keeps the terminal from sending SIGINT, so the run decides. */
+    onInterrupt = () => process.exit(130), input = process.stdin) {
+        this.onLine = onLine;
+        this.onChange = onChange;
+        this.onInterrupt = onInterrupt;
+        this.input = input;
+    }
+    start() {
+        if (this.on || !this.input.isTTY)
+            return this;
+        this.on = true;
+        this.input.setRawMode?.(true);
+        this.input.on("data", this.onData);
+        this.input.resume();
+        return this;
+    }
+    stop() {
+        if (!this.on)
+            return;
+        this.on = false;
+        this.input.off("data", this.onData);
+        this.input.setRawMode?.(false);
+        this.input.pause();
+    }
+    /** What the line shows: what you've typed so far, or how to use it. */
+    line() {
+        if (!this.on)
+            return "";
+        return this.buf
+            ? `  ${C.violet("›")} ${this.buf}${C.faint("▏")}`
+            : `  ${C.violet("›")} ${C.faint("type to talk to the agents (@claude for one) · details · ctrl-c stops")}`;
+    }
+    feed(s) {
+        // Arrows and other escape keys: not text.
+        for (const ch of s.replace(/\x1b\[[0-9;?]*[A-Za-z~]|\x1bO?./g, "")) {
+            if (ch === "\r" || ch === "\n") {
+                const l = this.buf;
+                this.buf = "";
+                this.onLine(l);
+            }
+            else if (ch === "\x7f" || ch === "\b")
+                this.buf = [...this.buf].slice(0, -1).join("");
+            else if (ch === "\x15")
+                this.buf = "";
+            else if (ch === "\x03") {
+                this.buf = "";
+                this.onInterrupt();
+                if (!this.on)
+                    return;
+            }
+            else if (ch >= " ")
+                this.buf += ch;
+        }
+        this.onChange();
+    }
+}
+//# sourceMappingURL=talk.js.map

package/dist/ui/term.js

@@ -137,6 +137,32 @@ export function fit(s, out = process.stdout) {
 export function pad(s, n) {
     return s + " ".repeat(Math.max(0, n - width(s)));
 }
+/**
+ * Whether progress bars draw block characters. Off when colors are (NO_COLOR,
+ * or output piped to a log): there a bar is just its label, "6/9 tasks".
+ * Tests and samples flip it to see the bars.
+ */
+export const BARS = { on: color, ascii: ASCII };
+/**
+ * A progress bar exactly `w` cells wide — "█████░░░" — or "" when bars are off
+ * or there's no room (under 2 cells). `frac` null = unknown: a faint dotted
+ * track, never a made-up 0%. Anything above 0 shows at least one block and
+ * anything below 1 leaves at least one empty, so 1% isn't nothing and 99%
+ * isn't done. Legacy consoles get "#####...".
+ */
+export function bar(frac, w, o = {}) {
+    w = Math.floor(w);
+    if (!(o.on ?? BARS.on) || !(w >= 2))
+        return "";
+    const ascii = o.ascii ?? BARS.ascii;
+    const [full, empty, unknown] = ascii ? ["#", ".", "-"] : ["█", "░", "·"];
+    if (frac === null || !Number.isFinite(frac))
+        return C.faint(unknown.repeat(w));
+    const f = o.tone === "done" ? 1 : Math.min(1, Math.max(0, frac));
+    const n = f <= 0 ? 0 : f >= 1 ? w : Math.min(w - 1, Math.max(1, Math.round(f * w)));
+    const fill = o.tone === "done" ? C.green : o.tone === "failed" ? C.red : C.violet;
+    return (n ? fill(full.repeat(n)) : "") + (n < w ? C.faint(empty.repeat(w - n)) : "");
+}
 /** Rounded box with a colored border, Claude-Code style. */
 export function box(lines, opts = {}) {
     const border = opts.border ?? C.violet;
@@ -232,6 +258,11 @@ export class Dock {
         this.timer.unref?.();
         return this;
     }
+    /** Repaint now (something it shows changed, e.g. a key was typed). */
+    redraw() {
+        if (this.up)
+            this.out.write(this.clear() + this.paint());
+    }
     log(line) {
         if (!this.up)
             return void this.out.write(line + "\n");