huddle-cli 0.1.0 → 0.1.3

package/dist/app/page.js

@@ -0,0 +1,701 @@
+// The dashboard page: one self-contained HTML document, no build step and
+// nothing fetched from the internet. The client code below avoids template
+// literals (the page itself is one) and builds every node with textContent
+// or createElementNS, so nothing an agent wrote can run as HTML.
+//
+// What it shows, top to bottom: the run's name; what you'll get (or got), in
+// prose; the live status (a sentence, the four steps, one chip per agent);
+// a question waiting on you; then the run as a story: the design ideas, the
+// plan, and the build grouped by part, each part with who built it and what
+// teammates and reviewers said about it. The raw log is its own tab.
+import { AGENT_COLOR } from "../ui/term.js";
+const CSS = String.raw `
+:root{
+  --bg:#faf9f5;--side:#f3f1ea;--panel:#ffffff;--raise:#fdfcf9;--hover:#ebe8df;
+  --line:#e7e3d9;--line2:#d9d4c7;--fg:#1f1e1b;--mute:#6e6b63;--faint:#a29e94;
+  --accent:#5b4bdb;--accent-soft:#eeebfd;--ok:#2f7d4f;--ok-soft:#e6f2ea;--warn:#a86a00;--warn-soft:#fbf0d9;--bad:#b9382a;--bad-soft:#f9e5e1;
+  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;
+  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
+  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
+  --shadow:0 1px 1px rgba(31,30,27,.04),0 2px 10px rgba(31,30,27,.05);
+  --shadow-lg:0 2px 4px rgba(31,30,27,.04),0 12px 32px rgba(31,30,27,.09);
+  color-scheme:light
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
+  --bg:#1c1b19;--side:#161513;--panel:#252420;--raise:#22211e;--hover:#2e2c28;
+  --line:#33312c;--line2:#403d37;--fg:#ecebe6;--mute:#a7a39a;--faint:#77736b;
+  --accent:#9b90ff;--accent-soft:#2b2846;--ok:#5cc489;--ok-soft:#1f3328;--warn:#e3ac43;--warn-soft:#3a2f18;--bad:#ef7564;--bad-soft:#3d221d;
+  --shadow:none;--shadow-lg:0 12px 32px rgba(0,0,0,.35);color-scheme:dark}}
+*{box-sizing:border-box}
+html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
+button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
+svg{flex:none}
+code{font:12.5px/1.4 var(--mono);background:var(--hover);padding:1px 5px;border-radius:5px}
+.app{display:grid;grid-template-columns:264px minmax(0,1fr);height:100%}
+
+aside{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
+.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 10px}
+.mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(140deg,#7a6cf5,#4c3cc9);display:grid;place-items:center;color:#fff;box-shadow:0 1px 2px rgba(76,60,201,.35);flex:none}
+.brand .nm{font:600 15px/1.1 var(--sans);letter-spacing:-.01em}.brand .repo{color:var(--mute);font-size:12.5px;margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.new{display:flex;align-items:center;gap:9px;margin:6px 12px 10px;padding:8px 10px;border-radius:10px;color:var(--fg);font-weight:550}
+.new:hover{background:var(--hover)}.new .plus{width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center}
+.label{padding:12px 20px 6px;color:var(--faint);font-size:11.5px;font-weight:600;letter-spacing:.02em}
+.runs{overflow:auto;flex:1;min-height:0;padding:0 10px 10px}
+.run{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;border-radius:9px;padding:7px 10px;color:var(--fg)}
+.run:hover{background:var(--hover)}.run.sel{background:var(--panel);box-shadow:var(--shadow)}
+.run .ti{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
+.run .when{color:var(--faint);font-size:11.5px;white-space:nowrap;padding-top:1px}
+.st{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:var(--line2)}
+.st.ok{background:var(--ok)}.st.warn{background:var(--warn)}.st.live{background:var(--accent);animation:pulse 1.6s infinite}
+@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(91,75,219,.45)}70%{box-shadow:0 0 0 6px rgba(91,75,219,0)}100%{box-shadow:0 0 0 0 rgba(91,75,219,0)}}
+.crew{border-top:1px solid var(--line);padding:12px 14px 14px}
+.crew .row{display:flex;align-items:center;justify-content:space-between;color:var(--faint);font-size:11.5px;font-weight:600;padding:0 6px 8px}
+.crew .row button{color:var(--faint);display:grid;place-items:center;width:22px;height:22px;border-radius:6px}.crew .row button:hover{background:var(--hover);color:var(--fg)}
+.people{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
+.who{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:12.5px}
+.who.off{opacity:.5}
+.av{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:700 10.5px/1 var(--sans);flex:none}
+
+main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
+.scroll{flex:1;overflow:auto;min-height:0}
+.col{max-width:780px;margin:0 auto;padding:40px 32px 170px}
+.top{display:flex;gap:14px;align-items:flex-start}
+.top .grow{flex:1;min-width:0}
+h1{font:500 28px/1.25 var(--serif);letter-spacing:-.015em;margin:0}
+.sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--mute);font-size:13px;margin-top:9px}
+.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:600;background:var(--hover);color:var(--mute);white-space:nowrap}
+.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.live{background:var(--accent-soft);color:var(--accent)}
+.ghost{display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:6px 10px;color:var(--mute);font-size:13px;font-weight:550}
+.ghost:hover{background:var(--hover);color:var(--fg)}.ghost.stop:hover{color:var(--bad)}
+.menu{position:relative}.pop{position:absolute;right:0;top:38px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:5;width:250px;display:none}
+.menu.open .pop{display:block}.pop a{display:block;padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:13.5px}.pop a:hover{background:var(--hover)}.pop a span{display:block;color:var(--mute);font-size:12px}
+
+.prose{font:17.5px/1.6 var(--serif);margin:28px 0 0;color:var(--fg)}
+.k{display:block;font:600 11.5px/1 var(--sans);color:var(--faint);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
+.example{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;font:14px var(--sans);color:var(--mute)}
+.example code{font-size:13px;padding:4px 9px;background:var(--panel);border:1px solid var(--line)}
+.report{margin-top:28px;padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);font-size:15px}
+
+.status{margin-top:28px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
+.now{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
+.now .dotlive{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:8px;animation:pulse 1.6s infinite;flex:none}
+.now .calm{color:var(--ok);font-size:12.5px;white-space:nowrap;margin-left:auto;padding-top:3px;font-weight:550}
+.now.need .dotlive{background:var(--warn)}.now.need{color:var(--warn)}
+.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
+.step .bar{height:4px;border-radius:99px;background:var(--hover);overflow:hidden}.step .bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s ease}
+.step .nm{font-size:12px;color:var(--faint);margin-top:6px;display:flex;justify-content:space-between}.step.on .nm{color:var(--fg);font-weight:600}.step.done .nm{color:var(--mute)}
+.team{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
+.mate{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;border:1px solid var(--line);background:var(--raise);max-width:100%}
+.mate .what{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.mate b{font-size:12.5px;font-weight:600}
+.ring{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
+.mate .tk{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
+
+.ask{margin-top:18px;padding:18px 20px;border-radius:14px;border:1px solid var(--warn);background:var(--panel);box-shadow:0 0 0 4px var(--warn-soft)}
+.ask .h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}.ask .h b{color:var(--fg)}.ask .h .pill{margin-left:auto}
+.ask .q{font:500 19px/1.35 var(--serif);margin:10px 0 4px}.ask .why{color:var(--mute);font-size:13.5px}
+.opts{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px}
+.opt{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--raise);border-radius:11px;padding:11px 13px;font-size:14.5px}
+.opt:hover{border-color:var(--accent);background:var(--accent-soft)}.opt .n{width:22px;height:22px;border-radius:7px;border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;font-weight:650;color:var(--mute);flex:none}
+.opt .rec{margin-left:auto;font-size:11.5px;color:var(--accent);font-weight:650}
+.own{display:flex;gap:8px}.own input{flex:1;border:1px solid var(--line);background:var(--raise);color:var(--fg);border-radius:10px;padding:9px 12px;font:inherit;outline:0}.own input:focus{border-color:var(--accent)}
+.btn{border-radius:10px;padding:8px 14px;background:var(--fg);color:var(--bg);font-weight:600;font-size:13.5px}
+
+.tabs{display:flex;gap:2px;margin:40px 0 4px;padding:3px;background:var(--hover);border-radius:11px;width:max-content;max-width:100%}
+.tab{padding:5px 13px;border-radius:8px;color:var(--mute);font-weight:550;font-size:13px}.tab.on{background:var(--panel);color:var(--fg);box-shadow:var(--shadow)}
+
+.sec{margin-top:32px}
+.sec>.hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
+.sec>.hd h2{font:500 19px/1.3 var(--serif);margin:0}.sec>.hd span{color:var(--faint);font-size:12.5px}
+.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
+.idea{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:7px}
+.idea:hover{border-color:var(--line2)}
+.idea .by{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px}.idea .by .rd{margin-left:auto;color:var(--faint);font-weight:500;font-size:11.5px}
+.idea .tx{font-size:13.5px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
+.idea.open{grid-column:1/-1;font-size:14px}
+.notes{margin-top:14px;display:flex;flex-direction:column;gap:2px}
+.note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;padding:5px 2px;color:var(--mute)}
+.note b{color:var(--fg);font-weight:600}.note .ic{margin-top:3px}
+.more{color:var(--accent);font-size:13px;font-weight:550;padding:4px 0;text-align:left}.more:hover{text-decoration:underline}
+
+.card{border:1px solid var(--line);background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
+.task{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);text-align:left;width:100%}
+.task:first-child{border-top:0}
+button.task:hover{background:var(--raise)}
+.task .num{width:24px;height:24px;border-radius:7px;background:var(--hover);display:grid;place-items:center;font-size:12px;font-weight:650;color:var(--mute)}
+.task.done .num{background:var(--ok-soft);color:var(--ok)}.task.bad .num{background:var(--bad-soft);color:var(--bad)}.task.going .num{background:var(--accent-soft);color:var(--accent)}
+.task .t{font-size:14px}.task .m{color:var(--faint);font-size:12px;margin-top:2px;display:flex;align-items:center;gap:6px}.task .m .av{width:16px;height:16px;font-size:9px}
+.part{margin-top:10px}
+.part>.task{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
+.part.openp>.task{border-radius:14px 14px 0 0}
+.thread{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--raise);padding:4px 16px 8px 52px}
+.ev{display:flex;gap:10px;padding:8px 0;font-size:13.5px;align-items:flex-start}
+.ev .body{flex:1;min-width:0}.ev .line{color:var(--mute)}.ev .line b{color:var(--fg);font-weight:600}
+.ev .said{margin-top:4px;color:var(--fg);white-space:pre-wrap;word-wrap:break-word}
+.ev .t{color:var(--faint);font-size:11.5px;white-space:nowrap;padding-top:2px}
+.ev.you .said{background:var(--accent-soft);padding:7px 11px;border-radius:10px;display:inline-block}
+
+.md p{margin:0 0 8px}.md p:last-child{margin-bottom:0}.md ul{margin:4px 0 10px;padding-left:20px}.md li{margin:3px 0}.md h4{font:600 13.5px/1.3 var(--sans);margin:14px 0 4px}.md .lbl{font-weight:650}
+
+.log{margin-top:16px}
+.lg{display:grid;grid-template-columns:64px 20px minmax(0,1fr);gap:9px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
+.lg .t{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px;padding-top:1px}.lg .x{color:var(--mute)}.lg .x b{color:var(--fg);font-weight:600}
+.lg .full{white-space:pre-wrap;color:var(--fg);margin-top:3px;word-wrap:break-word}
+.cost .row{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:13.5px}.cost .row:first-child{border-top:0}
+.cost .bar{height:6px;border-radius:99px;background:var(--hover);overflow:hidden}.cost .bar i{display:block;height:100%;border-radius:99px}
+.cost .num{font-variant-numeric:tabular-nums;color:var(--mute);font-size:12.5px;text-align:right;min-width:110px}
+.big{font:500 36px/1.1 var(--serif);letter-spacing:-.02em}.big span{font:500 14px var(--sans);color:var(--mute);margin-left:8px;letter-spacing:0}
+pre.contract{font:12.5px/1.6 var(--mono);white-space:pre-wrap;margin:0;padding:16px 18px;max-height:460px;overflow:auto}
+.empty{color:var(--mute);padding:28px 0;font-size:14px}
+
+.dock{position:absolute;left:0;right:0;bottom:0;padding:0 32px 18px;background:linear-gradient(to bottom,rgba(250,249,245,0),var(--bg) 38%);pointer-events:none}
+@media (prefers-color-scheme:dark){.dock{background:linear-gradient(to bottom,rgba(28,27,25,0),var(--bg) 38%)}}
+.dock .in{max-width:780px;margin:0 auto;padding-top:28px;pointer-events:auto}
+.box{background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow-lg);padding:12px 12px 10px 16px;transition:border-color .15s}
+.box:focus-within{border-color:var(--accent)}
+.box textarea{display:block;width:100%;border:0;outline:0;background:none;color:var(--fg);font:15px/1.5 var(--sans);resize:none;max-height:200px;min-height:24px;padding:2px 0}
+.box textarea::placeholder{color:var(--faint)}
+.bar2{display:flex;align-items:center;gap:6px;margin-top:8px}
+.bar2 .hint{color:var(--faint);font-size:12px;flex:1}
+.ib{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--mute)}
+.ib:hover{background:var(--hover);color:var(--fg)}
+.ib.send{background:var(--accent);color:#fff}.ib.send:hover{background:var(--accent);color:#fff;filter:brightness(1.08)}.ib.send:disabled{opacity:.3;cursor:default;filter:none}
+.ib.rec{background:var(--bad);color:#fff;animation:pulse 1.4s infinite}
+.listening{display:none;align-items:center;gap:8px;color:var(--bad);font-size:12.5px;font-weight:600}.listening.on{display:flex}
+
+.hero{max-width:640px;margin:0 auto;padding:17vh 32px 0;text-align:center}
+.hero .mark{width:46px;height:46px;border-radius:14px;margin:0 auto 24px}
+.hero h2{font:500 34px/1.2 var(--serif);letter-spacing:-.02em;margin:0 0 12px}.hero p{color:var(--mute);margin:0 auto;max-width:470px;font-size:15px}
+.ex{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
+.ex button{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:7px 14px;font-size:13.5px;color:var(--mute);box-shadow:var(--shadow)}
+.ex button:hover{color:var(--fg);border-color:var(--line2)}
+
+.toast{position:fixed;bottom:124px;left:calc(50% + 132px);transform:translate(-50%,6px);background:var(--fg);color:var(--bg);padding:9px 15px;border-radius:11px;font-size:13px;opacity:0;transition:all .2s;pointer-events:none;box-shadow:var(--shadow-lg)}.toast.on{opacity:1;transform:translate(-50%,0)}
+.side-toggle{display:none}
+@media (max-width:860px){.app{grid-template-columns:1fr}aside{position:fixed;inset:0 auto 0 0;width:280px;z-index:9;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}aside.open{transform:none}
+.side-toggle{display:grid}.col{padding:22px 16px 170px}.dock{padding:0 16px 14px}.toast{left:50%}.steps{grid-template-columns:repeat(2,1fr)}h1{font-size:24px}}
+`;
+const JS = String.raw `
+"use strict";
+var TOKEN = window.__HUDDLE_TOKEN__, COLORS = window.__HUDDLE_COLORS__;
+var S = { state: null, doc: null, docKey: "", sel: null, tab: "story", open: {}, fresh: false };
+var $ = function (sel) { return document.querySelector(sel); };
+
+// ---- a tiny DOM kit ----------------------------------------------------------------
+function h(tag, attrs) {
+  var el = document.createElement(tag);
+  if (attrs) for (var k in attrs) {
+    var v = attrs[k];
+    if (v == null || v === false) continue;
+    if (k === "class") el.className = v;
+    else if (k === "text") el.textContent = v;
+    else if (k.slice(0, 2) === "on") el.addEventListener(k.slice(2), v);
+    else el.setAttribute(k, v === true ? "" : v);
+  }
+  for (var i = 2; i < arguments.length; i++) add(el, arguments[i]);
+  return el;
+}
+function add(el, c) {
+  if (c == null || c === false) return;
+  if (Array.isArray(c)) { c.forEach(function (x) { add(el, x); }); return; }
+  el.appendChild(typeof c === "string" || typeof c === "number" ? document.createTextNode(String(c)) : c);
+}
+var ICONS = {
+  plus: "M12 5v14M5 12h14",
+  mic: "M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM19 11a7 7 0 0 1-14 0M12 18v3",
+  up: "M12 19V5M5 12l7-7 7 7",
+  stop: "M7 7h10v10H7z",
+  down: "M12 5v14M5 12l7 7 7-7",
+  refresh: "M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7",
+  menu: "M4 6h16M4 12h16M4 18h16",
+  check: "M5 12.5l4.5 4.5L19 7.5",
+  x: "M6 6l12 12M18 6L6 18",
+  bulb: "M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z",
+  alert: "M12 9v4M12 17h.01M10.3 3.9L2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z",
+  msg: "M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z",
+  merge: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9",
+  bug: "M8 9V7a4 4 0 0 1 8 0v2M12 9v12M6 9h12v5a6 6 0 0 1-12 0V9zM3 13h3M18 13h3",
+  flag: "M5 21V4M5 4h11l-2 4 2 4H5"
+};
+function icon(name, size, color) {
+  var NS = "http://www.w3.org/2000/svg", s = document.createElementNS(NS, "svg");
+  s.setAttribute("viewBox", "0 0 24 24"); s.setAttribute("width", size || 16); s.setAttribute("height", size || 16);
+  s.setAttribute("fill", "none"); s.setAttribute("stroke", color || "currentColor"); s.setAttribute("stroke-width", "1.8");
+  s.setAttribute("stroke-linecap", "round"); s.setAttribute("stroke-linejoin", "round"); s.setAttribute("class", "ic");
+  var p = document.createElementNS(NS, "path"); p.setAttribute("d", ICONS[name]); s.appendChild(p);
+  return s;
+}
+function logo(size) { var m = h("div", { class: "mark" }); m.appendChild(icon("msg", size || 15, "#fff")); return m; }
+function color(id) { if (!id) return "#8a857c"; if (id === "you") return "#5b4bdb"; return COLORS[String(id).split("#")[0]] || "#8a857c"; }
+function av(id) { var n = id === "you" ? "Y" : id === "huddle" ? "h" : String(id || "?").charAt(0).toUpperCase(); return h("span", { class: "av", style: "background:" + color(id), title: id, text: n }); }
+function name(id) { return id === "you" ? "You" : id === "huddle" ? "Huddle" : id; }
+function cap(s) { s = String(s || ""); return s.charAt(0).toUpperCase() + s.slice(1); }
+
+/** Agents write light Markdown: headings, bullets, LABEL lines, code spans, bold. Built as DOM, never parsed as HTML. */
+function md(text) {
+  var root = h("div", { class: "md" }), list = null;
+  String(text || "").split("\n").forEach(function (raw) {
+    var line = raw.replace(/\s+$/, ""), m;
+    if (!line.trim()) { list = null; return; }
+    if ((m = /^\s*#{1,6}\s+(.*)$/.exec(line))) { list = null; root.appendChild(inline(h("h4"), m[1])); return; }
+    if ((m = /^\s*(?:[-*•]|\d+[.)])\s+(.*)$/.exec(line))) { if (!list) { list = h("ul"); root.appendChild(list); } list.appendChild(inline(h("li"), m[1])); return; }
+    list = null;
+    if ((m = /^([A-Z][A-Z /&-]{2,30}):\s*(.*)$/.exec(line))) { var p = h("p"); p.appendChild(h("span", { class: "lbl", text: cap(m[1].toLowerCase()) + (m[2] ? ": " : "") })); inline(p, m[2]); root.appendChild(p); return; }
+    root.appendChild(inline(h("p"), line));
+  });
+  return root;
+}
+function inline(el, s) {
+  var re = /(\x60[^\x60]+\x60|\*\*[^*]+\*\*)/g, last = 0, m;
+  while ((m = re.exec(s))) {
+    if (m.index > last) el.appendChild(document.createTextNode(s.slice(last, m.index)));
+    var t = m[0];
+    el.appendChild(t.charAt(0) === "\x60" ? h("code", { text: t.slice(1, -1) }) : h("b", { text: t.slice(2, -2) }));
+    last = m.index + t.length;
+  }
+  if (last < s.length) el.appendChild(document.createTextNode(s.slice(last)));
+  return el;
+}
+/** The first sentence of an idea, without its "ARCHITECTURE:" label or code ticks. */
+function gist(text, n) {
+  n = n || 220;
+  var t = String(text || "").replace(/^\s*[A-Z][A-Z /&-]{2,30}:\s*/, "").replace(/\x60/g, "").replace(/\s+/g, " ").trim();
+  var cut = t.search(/[.!?](\s|$)/);
+  if (cut > 30 && cut < n) return t.slice(0, cut + 1);
+  return t.length > n ? t.slice(0, n - 1).replace(/\s+\S*$/, "") + "…" : t;
+}
+
+function api(path, body) {
+  return fetch(path, { method: body ? "POST" : "GET", headers: { "content-type": "application/json", "x-huddle-token": TOKEN }, body: body ? JSON.stringify(body) : undefined })
+    .then(function (r) { return r.json().then(function (j) { if (!r.ok) throw new Error(j.error || r.statusText); return j; }); });
+}
+function tok(n) { n = n || 0; return n >= 1e6 ? (n / 1e6).toFixed(n >= 1e7 ? 0 : 1) + "M" : n >= 1e3 ? Math.round(n / 1e3) + "k" : String(n); }
+function dur(ms) { var s = Math.max(0, Math.round((ms || 0) / 1000)); if (s < 60) return s + "s"; var m = Math.floor(s / 60); if (m < 60) return m + "m" + (s % 60 ? " " + (s % 60) + "s" : ""); return Math.floor(m / 60) + "h " + (m % 60) + "m"; }
+function ago(ts) { var d = Date.now() - ts; if (d < 60e3) return "now"; if (d < 3600e3) return Math.round(d / 60e3) + "m"; if (d < 86400e3) return Math.round(d / 3600e3) + "h"; return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric" }); }
+function clock(ts) { return new Date(ts).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); }
+var toastT;
+function toast(t) { var el = $(".toast"); el.textContent = t; el.classList.add("on"); clearTimeout(toastT); toastT = setTimeout(function () { el.classList.remove("on"); }, 2600); }
+
+// ---- data ----------------------------------------------------------------------
+var busy = false, again = false;
+function refresh() {
+  if (busy) { again = true; return; }
+  busy = true;
+  api("/api/state").then(function (st) {
+    S.state = st;
+    var live = st.live;
+    if (S.sel === null && !S.fresh) S.sel = live ? "live" : st.runs[0] ? st.runs[0].index : null;
+    if (S.sel === "live" && !live) S.sel = st.runs[0] ? st.runs[0].index : null;
+    var n = viewRunIndex();
+    if (n == null) { S.doc = null; S.docKey = ""; return null; }
+    var row = st.runs.find(function (r) { return r.index === n; }) || {};
+    var key = n + ":" + row.tokens + ":" + row.merged + ":" + (S.sel === "live" && live ? Math.floor(live.updatedAt / 3000) : "");
+    if (key === S.docKey) return null;
+    return api("/api/run?n=" + n).then(function (d) { S.doc = d; S.docKey = key; });
+  }).catch(function (e) { toast(e.message); }).then(function () {
+    busy = false; render();
+    if (again) { again = false; refresh(); }
+  });
+}
+function viewRunIndex() {
+  var st = S.state; if (!st || S.sel == null) return null;
+  if (S.sel === "live") {
+    var l = st.live; if (!l || !l.session) return null;
+    var r = st.runs.find(function (x) { return x.id === l.session; });
+    return r ? r.index : null;
+  }
+  return S.sel;
+}
+
+// ---- render --------------------------------------------------------------------
+function render() {
+  var st = S.state; if (!st) return;
+  renderSide(st);
+  var main = $("#main"), keep = main.scrollTop;
+  main.textContent = "";
+  var live = S.sel === "live" ? st.live : null;
+  if (!live && !S.doc) { main.appendChild(hero()); setComposer(false); return; }
+  var c = h("div", { class: "col" });
+  c.appendChild(header(live));
+  var plain = live ? live.plain : S.doc && S.doc.plain;
+  var report = !live && S.doc && S.doc.report;
+  if (plain && plain.what && !report) c.appendChild(h("div", { class: "prose" }, h("span", { class: "k", text: "What you'll get" }), plain.what,
+    plain.example ? h("div", { class: "example" }, "For example", h("code", { text: plain.example })) : null));
+  if (report) c.appendChild(h("div", { class: "report" }, h("span", { class: "k", text: "What you got" }), md(report)));
+  if (live) { c.appendChild(status(live)); if (live.ask) c.appendChild(askCard(live.ask)); }
+  c.appendChild(tabs());
+  if (S.tab === "story") story(c, live); else if (S.tab === "plan") planTab(c); else if (S.tab === "cost") costTab(c, live); else logTab(c, live);
+  main.appendChild(c);
+  main.scrollTop = keep;
+  setComposer(!!live);
+}
+
+function renderSide(st) {
+  $("#repo").textContent = st.repo.name;
+  var runs = $("#runs"); runs.textContent = "";
+  if (st.live) runs.appendChild(runBtn("live", st.live.goal, "live", "live"));
+  st.runs.forEach(function (r) {
+    if (st.live && st.live.session && r.id === st.live.session) return;
+    runs.appendChild(runBtn(r.index, r.goal, ago(r.start), r.failed ? "warn" : r.merged ? "ok" : ""));
+  });
+  if (!st.live && !st.runs.length) runs.appendChild(h("div", { class: "empty", style: "padding:6px 10px;font-size:13px", text: "Your runs will show up here." }));
+  var ppl = $("#people"); ppl.textContent = "";
+  if (st.probing) ppl.appendChild(h("span", { class: "who off", text: "checking…" }));
+  st.agents.forEach(function (a) {
+    var ready = a.state === "ready";
+    ppl.appendChild(h("span", { class: "who" + (ready ? "" : " off"), title: ready ? a.id + " is ready" : a.id + ": " + (a.state === "not_installed" ? "not installed" : a.state === "skipped" ? "skipped" : "not signed in") }, av(a.id), a.id));
+  });
+}
+function runBtn(key, goal, when, tone) {
+  return h("button", { class: "run" + (S.sel === key ? " sel" : ""), title: goal, onclick: function () { S.sel = key; S.fresh = false; S.docKey = ""; S.tab = "story"; $("aside").classList.remove("open"); $("#main").scrollTop = 0; refresh(); } },
+    h("span", { class: "st " + tone }), h("span", { class: "ti", text: goal }), h("span", { class: "when", text: when }));
+}
+
+function header(live) {
+  var d = S.doc, title = live ? live.goal : d.run.title, sub = [];
+  if (live) {
+    sub.push(h("span", { class: "pill live", text: "Live" }), h("span", { text: "started " + clock(live.startedAt) }), h("span", { text: tok(live.tokens) + " tokens" + (live.budget ? " of " + tok(live.budget.limit) : "") }));
+  } else {
+    var r = d.summary.result;
+    sub.push(h("span", { class: "pill " + (r.failed ? "warn" : r.merged ? "ok" : ""), text: r.merged + " merged" + (r.failed ? " · " + r.failed + " failed" : "") }),
+      h("span", { text: new Date(d.run.start).toLocaleString(undefined, { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) }),
+      h("span", { text: dur(d.run.ms) }), h("span", { text: tok(r.tokens) + " tokens" }));
+    if (r.qa) sub.push(h("span", { class: "pill " + r.qa.tone, text: r.qa.text }));
+  }
+  var right = h("div", { style: "display:flex;gap:2px" });
+  if (live) right.appendChild(h("button", { class: "ghost stop", onclick: stop }, icon("stop", 14), "Stop"));
+  var n = viewRunIndex();
+  if (n != null) right.appendChild(exportMenu(n));
+  return h("div", { class: "top" }, h("button", { class: "ib side-toggle", onclick: function () { $("aside").classList.add("open"); }, "aria-label": "Runs" }, icon("menu", 18)),
+    h("div", { class: "grow" }, h("h1", { text: title }), h("div", { class: "sub" }, sub)), right);
+}
+function exportMenu(n) {
+  var m = h("div", { class: "menu" });
+  function link(label, sub, q) { return h("a", { href: "/api/export?t=" + encodeURIComponent(TOKEN) + "&n=" + n + "&" + q }, label, h("span", { text: sub })); }
+  m.appendChild(h("button", { class: "ghost", onclick: function (e) { e.stopPropagation(); m.classList.toggle("open"); } }, icon("down", 14), "Export"));
+  m.appendChild(h("div", { class: "pop" },
+    link("Conversation", "a web page you can share", "format=html&level=chat"),
+    link("Markdown", "for notes or a pull request", "format=md&level=chat"),
+    link("Summary", "result, decisions, cost", "format=md&level=summary"),
+    link("Everything", "with each agent's own session", "format=html&level=full"),
+    link("JSON", "for tools", "format=json&level=chat")));
+  return m;
+}
+
+var STEPS = [["COUNCIL", "Design"], ["PLAN", "Plan"], ["BUILD", "Build"], ["QA", "Test"]];
+function status(l) {
+  var n = l.narrator || { text: "", needsYou: false };
+  var r = l.run || { phase: "WAITING", done: 0, total: 0 };
+  var at = STEPS.findIndex(function (s) { return s[0] === r.phase; });
+  if (r.phase === "DONE") at = 4;
+  var steps = h("div", { class: "steps" }, STEPS.map(function (s, i) {
+    var pct = i < at ? 100 : i > at ? 0 : s[0] === "COUNCIL" ? ((r.step || 1) - 0.5) / 4 * 100 : s[0] === "BUILD" ? (r.total ? Math.max(4, r.done / r.total * 100) : 4) : 50;
+    var note = i === at && s[0] === "BUILD" && r.total ? r.done + " of " + r.total : i === at && s[0] === "COUNCIL" ? (r.step || 1) + " of 4" : "";
+    return h("div", { class: "step" + (i === at ? " on" : i < at ? " done" : "") }, h("div", { class: "bar" }, h("i", { style: "width:" + Math.round(pct) + "%" })),
+      h("div", { class: "nm" }, h("span", { text: s[1] }), h("span", { text: note })));
+  }));
+  var team = h("div", { class: "team" }, l.agents.map(function (a) {
+    var p = a.busy ? Math.max(6, a.pct || 0) : a.tasks ? 100 : 0;
+    return h("div", { class: "mate", title: a.doing || "" },
+      h("span", { class: "ring", style: "background:conic-gradient(" + color(a.id) + " " + p + "%, var(--line) 0)" }, av(a.id)),
+      h("b", { text: a.id }), h("span", { class: "what", text: a.busy ? (a.doing || "working") : a.tasks ? "done · " + a.tasks + " merged" : "waiting" }),
+      a.tokens ? h("span", { class: "tk", text: tok(a.tokens) }) : null);
+  }));
+  return h("div", { class: "status" },
+    h("div", { class: "now" + (n.needsYou ? " need" : "") }, h("span", { class: "dotlive" }), h("span", { text: cap(n.text || "getting started") }),
+      n.needsYou ? null : h("span", { class: "calm", text: "Nothing needed from you" })),
+    steps, team);
+}
+
+function askCard(q) {
+  var own = h("input", { placeholder: "Or answer in your own words…", onkeydown: function (e) { if (e.key === "Enter" && own.value.trim()) answer(q, own.value.trim()); } });
+  return h("div", { class: "ask" },
+    h("div", { class: "h" }, av(q.from), h("b", { text: q.from }), "has a question for you", h("span", { class: "pill warn", text: "picks 1 in " + dur(q.until - Date.now()) })),
+    h("div", { class: "q", text: q.question }), q.why ? h("div", { class: "why", text: q.why }) : null,
+    h("div", { class: "opts" }, q.options.map(function (o, i) {
+      return h("button", { class: "opt", onclick: function () { answer(q, String(i + 1)); } }, h("span", { class: "n", text: String(i + 1) }), h("span", { text: o }), i === 0 ? h("span", { class: "rec", text: "Recommended" }) : null);
+    })),
+    h("div", { class: "own" }, own, h("button", { class: "btn", text: "Send", onclick: function () { if (own.value.trim()) answer(q, own.value.trim()); } })));
+}
+
+function tabs() {
+  function t(k, label) { return h("button", { class: "tab" + (S.tab === k ? " on" : ""), text: label, onclick: function () { S.tab = k; render(); } }); }
+  return h("div", { class: "tabs" }, t("story", "Story"), t("plan", "Plan"), t("cost", "Cost"), t("log", "Full log"));
+}
+function sec(title, sub) { return h("div", { class: "sec" }, h("div", { class: "hd" }, h("h2", { text: title }), sub ? h("span", { text: sub }) : null)); }
+function toggle(key) { S.open[key] = !S.open[key]; render(); }
+
+// ---- the story -------------------------------------------------------------------
+function story(c, live) {
+  var msgs = S.doc ? S.doc.messages : live ? councilMessages(live) : [];
+  if (!msgs.length) { c.appendChild(h("div", { class: "empty", text: "The agents are getting started…" })); return; }
+  var by = function (k) { return msgs.filter(function (m) { return m.kind === k; }); };
+
+  // 1. Designing together: each agent's idea, then what they took from and found wrong in each other's.
+  var props = by("proposal");
+  if (props.length) {
+    var s = sec("They designed it together", props.length + " ideas · " + by("adopt").length + " borrowed · " + by("flaw").length + " problems spotted");
+    s.appendChild(h("div", { class: "ideas" }, props.map(function (m) {
+      var k = "idea" + m.i, open = S.open[k];
+      return h("button", { class: "idea" + (open ? " open" : ""), onclick: function () { toggle(k); } },
+        h("div", { class: "by" }, av(m.from), m.from, h("span", { class: "rd", text: open ? "Show less" : "Read" })),
+        open ? md(m.text) : h("div", { class: "tx", text: gist(m.text, 260) }));
+    })));
+    var notes = by("adopt").concat(by("flaw"), by("ratify")).sort(function (a, b) { return a.i - b.i; });
+    if (notes.length) {
+      var all = S.open.notes, list = h("div", { class: "notes" });
+      (all ? notes : notes.slice(0, 4)).forEach(function (m) {
+        var adopt = m.kind === "adopt", flaw = m.kind === "flaw", who = m.to && m.to[0];
+        list.appendChild(h("div", { class: "note" }, icon(adopt ? "bulb" : flaw ? "alert" : "flag", 15, adopt ? "var(--ok)" : "var(--warn)"),
+          h("div", null, h("b", { text: m.from }), adopt ? " took " + who + "'s idea: " : flaw ? " spotted a problem in " + who + "'s: " : " " + m.label + ": ", gist(m.text, 200))));
+      });
+      if (notes.length > 4) list.appendChild(h("button", { class: "more", text: all ? "Show less" : "Show all " + notes.length, onclick: function () { toggle("notes"); } }));
+      s.appendChild(list);
+    }
+    c.appendChild(s);
+  }
+
+  // 2. The plan, built one part at a time: who built each part and what was said about it.
+  var tasks = S.doc ? S.doc.summary.plan.tasks : [];
+  var parts = buildParts(msgs, tasks);
+  if (parts.length) {
+    var planner = S.doc.summary.plan.by.split("→").pop().trim();
+    var bs = sec("The plan, part by part", parts.filter(function (p) { return p.task.status === "merged"; }).length + " of " + parts.length + " merged" + (planner ? " · planned by " + planner : "") + " · open a part to see what was said");
+    parts.forEach(function (p) {
+      var k = "part" + p.id, open = S.open[k] !== undefined ? S.open[k] : !!live && p.task.status !== "merged";
+      var wrap = h("div", { class: "part" + (open && p.events.length ? " openp" : "") });
+      wrap.appendChild(taskRow(p.task, p.n, true, function () { S.open[k] = !open; render(); }, p.events.length));
+      if (open && p.events.length) wrap.appendChild(h("div", { class: "thread" }, p.events.map(evRow)));
+      bs.appendChild(wrap);
+    });
+    c.appendChild(bs);
+  }
+
+  // 4. Testing.
+  var bugs = by("bug").concat(by("qa"));
+  if (bugs.length) {
+    var qs = sec("Then they tested it", by("bug").length + " bug" + (by("bug").length === 1 ? "" : "s") + " found");
+    qs.appendChild(h("div", { class: "card", style: "padding:4px 16px" }, bugs.map(evRow)));
+    c.appendChild(qs);
+  }
+}
+
+var STATUS = { merged: ["done", "Merged"], failed: ["bad", "Failed"], in_progress: ["going", "Building"], claimed: ["going", "Starting"], review: ["going", "In review"], backlog: ["", "Waiting"], needs_you: ["bad", "Needs you"] };
+function taskRow(t, i, clickable, onclick, count) {
+  var s = STATUS[t.status] || ["", t.status ? cap(t.status) : "Not started"];
+  var who = t.doneBy || "";
+  var meta = [];
+  if (who) meta.push(av(who), who);
+  if (count) meta.push((who ? " · " : "") + count + " update" + (count === 1 ? "" : "s"));
+  return h(clickable ? "button" : "div", { class: "task " + s[0], onclick: clickable ? onclick : null },
+    h("span", { class: "num" }, s[0] === "done" ? icon("check", 13) : s[0] === "bad" ? icon("x", 13) : String(i + 1)),
+    h("div", null, h("div", { class: "t", text: t.title }), meta.length ? h("div", { class: "m" }, meta) : null),
+    h("span", { class: "pill " + (s[0] === "done" ? "ok" : s[0] === "bad" ? "bad" : s[0] === "going" ? "live" : ""), text: s[1] }));
+}
+
+/** The build's messages, grouped by the part they're about (an untagged message goes with its sender's current part). */
+function buildParts(msgs, tasks) {
+  var parts = [], byId = {}, current = {};
+  var SHOW = { progress: 1, buddy: 1, review: 1, message: 1, question: 1, answer: 1, merge: 1, fail: 1, radar: 1, done: 1 };
+  function part(id, title) {
+    if (!byId[id]) {
+      var n = tasks.findIndex(function (t) { return t.id === id; });
+      var t = n >= 0 ? tasks[n] : { id: id, title: title, status: "" };
+      byId[id] = { id: id, n: n >= 0 ? n : 99 + parts.length, task: t, events: [] };
+      parts.push(byId[id]);
+    }
+    return byId[id];
+  }
+  tasks.forEach(function (t) { part(t.id, t.title); });
+  msgs.forEach(function (m) {
+    if (m.phase !== "build" && m.phase !== "qa") return;
+    var p = null;
+    if (m.task) { p = part(m.task.id, m.task.title); if (m.kind === "announce" || m.kind === "progress") current[m.from] = p; }
+    else if (current[m.from]) p = current[m.from];
+    if (!p || !SHOW[m.kind]) return;
+    p.events.push(m);
+  });
+  parts.forEach(function (p) {
+    // Only a part's newest progress note: the others are on the way there.
+    var prog = p.events.filter(function (m) { return m.kind === "progress"; });
+    if (prog.length > 1) p.events = p.events.filter(function (m) { return m.kind !== "progress" || m === prog[prog.length - 1]; });
+  });
+  return parts.sort(function (a, b) { return a.n - b.n; });
+}
+function evRow(m) {
+  var IC = { merge: "merge", fail: "x", bug: "bug" };
+  var tone = m.kind === "merge" ? "var(--ok)" : "var(--bad)";
+  var head = m.kind === "merge" ? [h("b", { text: "Merged" }), " · " + m.text] : [h("b", { text: name(m.from) }), " " + plainLabel(m)];
+  var said = m.kind === "merge" ? "" : m.text || "", k = "ev" + m.i, long = said.length > 600 && !S.open[k];
+  return h("div", { class: "ev" + (m.from === "you" ? " you" : "") }, IC[m.kind] ? icon(IC[m.kind], 18, tone) : av(m.from),
+    h("div", { class: "body" }, h("div", { class: "line" }, head),
+      said ? h("div", { class: "said", text: long ? said.slice(0, 520).replace(/\s+\S*$/, "") + "…" : said }) : null,
+      long ? h("button", { class: "more", text: "Show all", onclick: function () { toggle(k); } }) : null),
+    h("span", { class: "t", text: m.ts ? clock(m.ts) : "" }));
+}
+/** In a part's thread the part is already named, so labels say what happened, not to what. */
+function plainLabel(m) {
+  var to = m.to && m.to[0] && m.to[0] !== "room" && m.to[0] !== "all" ? m.to[0] : "";
+  switch (m.kind) {
+    case "progress": return "is " + ((/^(\d+)%/.exec(m.label) || ["", "?"])[1]) + "% done";
+    case "review": return /approv/i.test(m.label) ? "reviewed it and approved" : /chang/i.test(m.label) ? "reviewed it and asked for changes" : m.label;
+    case "buddy": return "took a look mid-way" + (/looks good/i.test(m.label) ? ": looks good" : "");
+    case "message": return to ? "wrote to " + to : "said";
+    case "question": return to === "you" ? "asked you" : "asked" + (to ? " " + to : "");
+    case "answer": return "answered" + (to ? " " + to : "");
+    case "done": return "finished it";
+    default: return m.label;
+  }
+}
+function councilMessages(l) {
+  return l.council.map(function (c, i) {
+    var kind = c.kind === "ok" || c.kind === "object" || c.kind === "skipped" ? "ratify" : c.kind;
+    return { i: i + 1, ts: l.startedAt, phase: "council", kind: kind, from: c.agent, to: c.of ? [c.of] : [], label: c.kind === "ok" ? "approved the plan" : c.kind === "object" ? "objected to the plan" : c.kind === "skipped" ? "didn't answer in time" : c.kind, text: c.text };
+  });
+}
+
+// ---- plan, cost, log ------------------------------------------------------------------
+function planTab(c) {
+  var d = S.doc;
+  if (!d) { c.appendChild(h("div", { class: "empty", text: "The plan appears once the agents agree on it." })); return; }
+  var s = sec("Who does what", "planned by " + d.summary.plan.by);
+  s.appendChild(h("div", { class: "card" }, d.summary.plan.tasks.map(function (t, i) { return taskRow(t, i, false); })));
+  c.appendChild(s);
+  var dec = d.summary.decisions;
+  if (dec.length) {
+    var a = sec("What they agreed", "every agent builds to these");
+    a.appendChild(h("div", { class: "card", style: "padding:6px 16px" }, dec.map(function (x) {
+      return h("div", { class: "note" }, icon(x.risk ? "alert" : "check", 15, x.risk ? "var(--warn)" : "var(--ok)"), h("div", null, x.risk ? h("b", { text: "Risk" + (x.by ? " (" + x.by + ")" : "") + ": " }) : null, inline(h("span"), x.body)));
+    })));
+    c.appendChild(a);
+  }
+  var k = d.summary.contract;
+  if (k && k.text) { var cs = sec("The contract", "the exact names every part uses · by " + k.by); cs.appendChild(h("div", { class: "card" }, h("pre", { class: "contract", text: k.text }))); c.appendChild(cs); }
+}
+function costTab(c, live) {
+  var rows = live ? live.agents.map(function (a) { return { agent: a.id, tokens: a.tokens, ms: 0 }; }) : S.doc ? S.doc.summary.cost : [];
+  var max = Math.max.apply(null, rows.map(function (r) { return r.tokens; }).concat([1]));
+  var total = rows.reduce(function (n, r) { return n + r.tokens; }, 0);
+  var s = sec("What it cost", "each agent bills its own account");
+  s.appendChild(h("div", { class: "big", style: "margin:2px 0 16px" }, tok(total), h("span", { text: "tokens" + (live && live.budget ? " of a " + tok(live.budget.limit) + " budget" : "") })));
+  s.appendChild(h("div", { class: "card cost" }, rows.map(function (r) {
+    return h("div", { class: "row" }, h("span", { style: "display:flex;align-items:center;gap:8px" }, av(r.agent), r.agent),
+      h("div", { class: "bar" }, h("i", { style: "width:" + Math.max(2, Math.round(r.tokens / max * 100)) + "%;background:" + color(r.agent) })),
+      h("span", { class: "num", text: tok(r.tokens) + (r.ms ? " · " + dur(r.ms) : "") }));
+  })));
+  c.appendChild(s);
+}
+function logTab(c, live) {
+  var msgs = S.doc ? S.doc.messages : live ? councilMessages(live) : [];
+  var box = h("div", { class: "log" });
+  msgs.forEach(function (m) {
+    var k = "lg" + m.i, open = S.open[k], long = m.text && m.text.length > 160;
+    box.appendChild(h("div", { class: "lg", onclick: long ? function () { toggle(k); } : null, style: long ? "cursor:pointer" : null },
+      h("span", { class: "t", text: m.ts ? clock(m.ts) : "" }), av(m.from),
+      h("div", { class: "x" }, h("b", { text: name(m.from) }), " " + m.label + (m.to && m.to.length && m.label.indexOf(m.to[0]) < 0 ? " → " + m.to.join(", ") : ""),
+        m.text ? h("div", { class: "full", text: open || !long ? m.text : m.text.slice(0, 160).replace(/\s+\S*$/, "") + "…" }) : null)));
+  });
+  c.appendChild(box);
+}
+
+function hero() {
+  var ex = ["A todo app with a REST API and tests", "A CLI that converts temperatures", "Fix the failing tests in this repo"];
+  return h("div", { class: "hero" }, logo(22),
+    h("h2", { text: "What should the team build?" }),
+    h("p", { text: "Describe it in plain words. Your agents design it together, split the work, review each other, and merge only what passes the tests." }),
+    h("div", { class: "ex" }, ex.map(function (x) { return h("button", { text: x, onclick: function () { var t = $("#say"); t.value = x; grow(); t.focus(); } }); })));
+}
+
+// ---- actions -------------------------------------------------------------------
+function setComposer(live) {
+  $("#say").placeholder = live ? "Tell the agents something…  (@codex for just one)" : "Describe what to build…";
+  $("#hint").textContent = live ? "Goes to every agent working now" : "Enter to start · Shift+Enter for a new line";
+  $("#send").disabled = !$("#say").value.trim();
+}
+function send() {
+  var t = $("#say"), text = t.value.trim(); if (!text) return;
+  var live = S.state && S.state.live;
+  var p = live ? api("/api/say", { text: text }) : api("/api/goal", { goal: text });
+  p.then(function () { t.value = ""; grow(); toast(live ? "Sent to the agents" : "Starting — your agents are connecting"); if (!live) { S.sel = "live"; S.fresh = false; setTimeout(refresh, 1500); } }).catch(function (e) { toast(e.message); });
+}
+function answer(q, line) { api("/api/answer", { id: q.id, line: line }).then(function () { toast("Sent to " + q.from); }).catch(function (e) { toast(e.message); }); }
+function stop() { api("/api/stop", {}).then(function () { toast("Stopping — what's merged stays"); }).catch(function (e) { toast(e.message); }); }
+function grow() { var t = $("#say"); t.style.height = "auto"; t.style.height = Math.min(200, t.scrollHeight) + "px"; $("#send").disabled = !t.value.trim(); }
+
+// ---- voice: hold the mic (or Space when you're not typing) and talk ---------------
+var Rec = window.SpeechRecognition || window.webkitSpeechRecognition, rec = null, base = "";
+function listen(on) {
+  if (!Rec) return;
+  var t = $("#say"), b = $("#mic");
+  if (on && !rec) {
+    rec = new Rec(); rec.interimResults = true; rec.continuous = true; rec.lang = navigator.language || "en-US";
+    base = t.value ? t.value.replace(/\s*$/, " ") : "";
+    rec.onresult = function (e) { var s = ""; for (var i = 0; i < e.results.length; i++) s += e.results[i][0].transcript; t.value = base + s; grow(); };
+    rec.onerror = function (e) { if (e.error === "not-allowed" || e.error === "service-not-allowed") toast("Allow the microphone to talk to Huddle"); };
+    rec.onend = function () { rec = null; b.classList.remove("rec"); $(".listening").classList.remove("on"); t.focus(); };
+    try { rec.start(); b.classList.add("rec"); $(".listening").classList.add("on"); } catch (e) { rec = null; }
+  } else if (!on && rec) rec.stop();
+}
+
+window.addEventListener("load", function () {
+  var t = $("#say");
+  if (/[?&]native=1/.test(location.search)) document.body.classList.add("native");
+  $(".brand").insertBefore(logo(), $(".brand").firstChild);
+  $("#new .plus").appendChild(icon("plus", 14, "#fff"));
+  $("#mic").appendChild(icon("mic", 17)); $("#send").appendChild(icon("up", 17, "#fff")); $("#refresh").appendChild(icon("refresh", 13));
+  t.addEventListener("input", grow);
+  t.addEventListener("keydown", function (e) { if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); } });
+  $("#send").addEventListener("click", send);
+  $("#new").addEventListener("click", function () { $("aside").classList.remove("open"); if (S.state && S.state.live) { S.sel = "live"; render(); } else { S.sel = null; S.fresh = true; S.doc = null; render(); } t.focus(); });
+  $("#refresh").addEventListener("click", function () { api("/api/agents", {}).then(function (st) { S.state = st; render(); }); });
+  var mic = $("#mic");
+  if (!Rec) mic.style.display = "none";
+  mic.addEventListener("pointerdown", function (e) { e.preventDefault(); listen(true); });
+  window.addEventListener("pointerup", function () { listen(false); });
+  document.addEventListener("keydown", function (e) {
+    var typing = /^(INPUT|TEXTAREA)$/.test(document.activeElement && document.activeElement.tagName);
+    if (e.code === "Space" && !typing && !e.repeat && Rec) { e.preventDefault(); listen(true); }
+  });
+  document.addEventListener("keyup", function (e) { if (e.code === "Space" && rec) listen(false); });
+  document.addEventListener("click", function () { document.querySelectorAll(".menu.open").forEach(function (m) { m.classList.remove("open"); }); });
+  var es = new EventSource("/api/events?t=" + encodeURIComponent(TOKEN));
+  es.onmessage = refresh;
+  setInterval(function () { if (S.state && S.state.live && S.sel === "live") render(); }, 1000);
+  grow();
+  refresh();
+});
+`;
+export function appPage(token) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Huddle</title>
+<style>${CSS}</style>
+</head>
+<body>
+<div class="app">
+  <aside>
+    <div class="brand"><div><div class="nm">Huddle</div><div class="repo" id="repo"></div></div></div>
+    <button class="new" id="new"><span class="plus"></span>New build</button>
+    <div class="label">Recent</div>
+    <div class="runs" id="runs"></div>
+    <div class="crew"><div class="row"><span>Your agents</span><button id="refresh" title="Check again" aria-label="Check your agents again"></button></div><div class="people" id="people"></div></div>
+  </aside>
+  <main>
+    <div class="scroll" id="main"></div>
+    <div class="dock"><div class="in"><div class="box">
+      <textarea id="say" rows="1" placeholder="Describe what to build…"></textarea>
+      <div class="bar2"><span class="hint" id="hint"></span><span class="listening">Listening… release to stop</span>
+        <button class="ib" id="mic" title="Hold to talk (or hold Space)" aria-label="Hold to talk"></button>
+        <button class="ib send" id="send" aria-label="Send"></button></div>
+    </div></div></div>
+  </main>
+</div>
+<div class="toast"></div>
+<script>window.__HUDDLE_TOKEN__=${JSON.stringify(token)};window.__HUDDLE_COLORS__=${JSON.stringify(AGENT_COLOR)};</script>
+<script>${JS}</script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=page.js.map