crewforth 3.1.1 → 3.2.0-rc.10

package/kit/studio/web/models-plan.js

@@ -52,15 +52,25 @@ function stepOf(r, again) {
  * How the work went, as steps: the earlier calls of the same card, then this one. `row` is Crewforth's line for
  * the agent with `before` (see server/lib/model-outcomes.js), or null when it has none: it has not stopped, or it
  * is not a crew agent.
- * @returns { risk, steps: [{ text, verify, tone, escalated }], note }
+ * @returns { risk, riskWhy, steps: [{ text, verify, tone, escalated }], note }
  */
 export function workSteps(row) {
-  if (!row) return { risk: null, steps: [], note: 'Not recorded yet: the line is written when the agent stops.' };
+  if (!row) return { risk: null, riskWhy: null, steps: [], note: 'Not recorded yet: the line is written when the agent stops.' };
   const steps = [...(row.before ?? []).map((r) => stepOf(r, false)), stepOf(row, Boolean(row.escalatedFrom))];
   if (row.escalatedFrom && !(row.before ?? []).length) {
     steps.unshift({ text: `An earlier call on ${tierWord(row.escalatedFrom)} did not pass; its line is not in the record`, verify: null, tone: null, escalated: false });
   }
-  return { risk: row.risk ?? null, steps, note: row.escalatedFrom ? 'A re-run with the same or a lower model is refused by the gate.' : null };
+  // The reason is the gate's own sentence, kept as it wrote it; a line written before the gate kept one has none.
+  return { risk: row.risk ?? null, riskWhy: row.risk === 'critical' ? row.riskWhy ?? null : null, steps, note: row.escalatedFrom ? 'A re-run with the same or a lower model is refused by the gate.' : null };
+}
+
+/**
+ * What is said about an agent the model gate does not look at: one whose type is not crew-* (hooks/guard-agent-model.sh
+ * leaves it alone), so there is no card to read and no line in the record. Null for a crew agent or an unknown type.
+ */
+export function outsideRouting(agentType) {
+  if (typeof agentType !== 'string' || !agentType || agentType.startsWith('crew-')) return null;
+  return 'Outside model routing: not a crew agent, so the gate chose nothing for it and Crewforth kept no record of it. It ran on the model its call asked for, or else the session\u2019s.';
 }
 
 /**
@@ -85,17 +95,31 @@ export function floorWords(floor) {
  * ("\u2265$0.75 \u00b7 2/7"), because a sum of two calls must not be read as the cost of seven. None: a dash.
  */
 export function costCell(cost, runs) {
-  if (!cost) return { cost: '\u2026', costNote: 'Reading what this class cost\u2026', partial: false };
-  if (!cost.costed) return { cost: '\u2014', costNote: 'No agent of this class has a transcript on this machine that could be priced', partial: false };
+  if (!cost) return { cost: '\u2026', costNote: 'Reading what this class cost\u2026', partial: false, advisor: null };
+  if (!cost.costed) return { cost: '\u2014', costNote: 'No agent of this class has a transcript on this machine that could be priced', partial: false, advisor: null };
   const usd = fmtCost(cost.cost);
-  if (cost.costed >= runs) return { cost: usd, costNote: `All ${runs} ${runs === 1 ? 'task' : 'tasks'} priced, at API list price. An estimate: what a subscription is charged is not known here.`, partial: false };
+  const advisor = advisorWords(cost);
+  const tail = advisor ? `\n${advisor}` : '';
+  if (cost.costed >= runs) return { cost: usd, costNote: `All ${runs} ${runs === 1 ? 'task' : 'tasks'} priced, at API list price. An estimate: what a subscription is charged is not known here.${tail}`, partial: false, advisor };
   return {
     cost: `\u2265${usd.replace(/^~/, '')} \u00b7 ${cost.costed}/${runs}`,
-    costNote: `At least this much: ${cost.costed} of ${runs} tasks could be priced; the others have no transcript on this machine. At API list price.`,
+    costNote: `At least this much: ${cost.costed} of ${runs} tasks could be priced; the others have no transcript on this machine. At API list price.${tail}`,
     partial: true,
+    advisor,
   };
 }
 
+/**
+ * What of a class's cost was the advisor (a second model its agents consulted mid-task), or null when they consulted
+ * none: no call is no tag, not a zero. Its share is already in the class's cost; this only says how much it was.
+ */
+export function advisorWords(cost) {
+  const n = cost?.advisorCalls ?? 0;
+  if (!(n > 0)) return null;
+  const share = typeof cost.advisorCost === 'number' && cost.advisorCost > 0 ? `${fmtCost(cost.advisorCost)} of it` : 'its cost not priced';
+  return `Advisor: ${n} ${n === 1 ? 'call' : 'calls'}, ${share}. A second model the agents consulted, at that model's rates; included above.`;
+}
+
 /** One class as the view's row: who and what kind of change, how risky, what ran it, and how it went. */
 export function classRow(c, cost = null) {
   const models = Object.entries(c.models ?? {}).sort((a, b) => b[1].runs - a[1].runs).map(([t, m]) => `${tierWord(t)} ${m.runs}`).join(' \u00b7 ');
@@ -146,6 +170,36 @@ export function suggestionText(s) {
   };
 }
 
+/**
+ * Normal work that ran above the table's model, in words. The gate holds a floor, not a ceiling, so this is said
+ * and nothing is blocked. That the table's model would have done is said only from the record (`a.passed`); the
+ * cost beside it is the same tokens at that model's price, which is not what that model would have spent.
+ * @param a     one class of server/lib/model-outcomes.js `aboveTableOf`
+ * @param cost  { cost, atNormal, costed, runs } for it, or null while costs have not been read
+ */
+export function aboveText(a, cost = null) {
+  const to = tierWord(a.to);
+  const ran = Object.entries(a.models ?? {}).sort((x, y) => y[1] - x[1]).map(([t, n]) => `${n} on ${tierWord(t)}`).join(', ');
+  let costs = null;
+  if (cost?.costed) {
+    const some = cost.costed < cost.runs;
+    const usd = (v) => (some ? `\u2265${fmtCost(v).replace(/^~/, '')}` : fmtCost(v));
+    costs = `${usd(cost.cost)} as run; the same tokens at ${to}'s price ${usd(cost.atNormal)}${some ? ` (${cost.costed} of ${cost.runs} priced)` : ''}. API list price; another model would not spend the same tokens.`;
+  }
+  return {
+    title: `${roleName(a.agent)} \u00b7 ${a.change}`,
+    says: `normal risk, ${plural(a.runs, 'task')} above ${to}: ${ran}.`,
+    verdict: a.passed
+      ? `${to} is enough for this class: its latest ${a.passed} verified calls on ${to} all passed the first time.`
+      : `Whether ${to} would have done is not measured: this class does not have ${a.need ?? 'enough'} verified calls on ${to} that all passed the first time.`,
+    measured: Boolean(a.passed),
+    costs,
+  };
+}
+
+export const ABOVE_HEAD = 'Above the table \u00b7 nothing is blocked';
+export const ABOVE_RULE = 'The gate holds a floor, not a ceiling: which model runs normal work is yours to choose.';
+
 /** What the view says when there is nothing to list. */
 export function emptyNote(data) {
   if (!data) return 'Reading the record…';

package/kit/studio/web/models.js

@@ -3,8 +3,9 @@
 // A class is an agent, a kind of change and a risk. Each line says what ran it, how many tasks, how many of the
 // verified ones passed the first time, how many were repeated one model up, and what the agents' tokens come to.
 // Under the table: the holds the record could let go of. They are shown, not acted on: the one button copies
-// Crewforth's command for it and lowers nothing.
-import { classRow, suggestionText, emptyNote, totalsLine, costLine, SOURCE, LOWER_RULE } from './models-plan.js';
+// Crewforth's command for it and lowers nothing. Then the normal work that ran above the table's model: said, with
+// the record's evidence where there is some, and not acted on either.
+import { classRow, suggestionText, aboveText, emptyNote, totalsLine, costLine, SOURCE, LOWER_RULE, ABOVE_HEAD, ABOVE_RULE } from './models-plan.js';
 
 function mk(tag, cls, text) {
   const n = document.createElement(tag);
@@ -26,7 +27,7 @@ export class Models {
   }
 
   setData(data) { this.data = data; this.render(); }
-  /** What the classes cost, read apart and less often: { measured, costs: { classKey: { cost, costed, runs } } }. */
+  /** What the classes cost, read apart and less often: { measured, costs: { classKey: { cost, costed, runs } }, above }. */
   setCosts(costs) { this.costs = costs; this.render(); }
 
   render() {
@@ -88,6 +89,7 @@ export class Models {
       const cost = mk('td', 'mv-num', r.cost);
       cost.title = r.costNote;
       if (r.partial) cost.dataset.partial = 'true';
+      if (r.advisor) { const t = mk('span', 'mv-tag', 'advisor'); t.dataset.kind = 'advisor'; t.title = r.advisor; cost.append(t); }
       tr.append(who, risk, model, mk('td', 'mv-num', r.tasks), first, mk('td', 'mv-num', r.escalated), cost);
       tbody.append(tr);
     }
@@ -115,6 +117,20 @@ export class Models {
       }
       pane.append(box);
     }
+    if (d.above?.length) {
+      const box = mk('section', 'mv-above');
+      box.append(mk('h3', 'mv-suggest-h', ABOVE_HEAD));
+      for (const a of d.above) {
+        const t = aboveText(a, this.costs?.measured ? (this.costs.above?.[a.key] ?? null) : null);
+        box.append(mk('p', 'mv-suggest-text', `${t.title} ${t.says}`));
+        const v = mk('p', 'mv-above-verdict', t.verdict);
+        v.dataset.measured = String(t.measured);
+        box.append(v);
+        if (t.costs) box.append(mk('p', 'sub', t.costs));
+      }
+      box.append(mk('p', 'sub', ABOVE_RULE));
+      pane.append(box);
+    }
     for (const note of raisedNotes) {
       const row = mk('div', 'mv-raised');
       const tag = mk('span', 'mv-tag', note.tag);

package/kit/studio/web/qr.js

@@ -0,0 +1,200 @@
+// qr.js — a QR code for a viewer's link, made in the page: no dependency, no request.
+//
+// Byte mode, error correction level M (a phone reads it off a laptop screen at an angle), versions 1 to 10: up to
+// 213 bytes, which a Wi-Fi link with a token (about 70) fits in with room to spare. The construction is ISO/IEC
+// 18004's, in the order Project Nayuki's reference implementation lays it out: data and padding, Reed–Solomon error
+// correction per block, interleaving, the function patterns, the codewords in their zigzag, the eight masks scored by
+// the standard's four penalty rules, and the format (and, from version 7, version) bits. Checked against an
+// independent decoder (OpenCV's QRCodeDetector) on every version and mask; the self-check pins the result.
+
+const ECC_M = { perBlock: [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26], blocks: [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5], formatBits: 0 };
+const MAX_VERSION = 10;
+
+function rawModules(ver) {
+  let n = (16 * ver + 128) * ver + 64;
+  if (ver >= 2) {
+    const align = Math.floor(ver / 7) + 2;
+    n -= (25 * align - 10) * align - 55;
+    if (ver >= 7) n -= 36;
+  }
+  return n;
+}
+const dataCodewords = (ver) => Math.floor(rawModules(ver) / 8) - ECC_M.perBlock[ver] * ECC_M.blocks[ver];
+
+// GF(256) with the QR polynomial x^8 + x^4 + x^3 + x^2 + 1.
+function mul(x, y) {
+  let z = 0;
+  for (let i = 7; i >= 0; i--) { z = (z << 1) ^ ((z >>> 7) * 0x11d); z ^= ((y >>> i) & 1) * x; }
+  return z & 0xff;
+}
+function divisor(degree) {
+  const r = new Array(degree).fill(0); r[degree - 1] = 1;
+  let root = 1;
+  for (let i = 0; i < degree; i++) {
+    for (let j = 0; j < r.length; j++) { r[j] = mul(r[j], root); if (j + 1 < r.length) r[j] ^= r[j + 1]; }
+    root = mul(root, 0x02);
+  }
+  return r;
+}
+function remainder(data, div) {
+  const r = div.map(() => 0);
+  for (const b of data) {
+    const f = b ^ r.shift(); r.push(0);
+    div.forEach((c, i) => { r[i] ^= mul(c, f); });
+  }
+  return r;
+}
+
+function alignmentPositions(ver) {
+  if (ver === 1) return [];
+  const n = Math.floor(ver / 7) + 2;
+  const size = ver * 4 + 17;
+  const step = Math.ceil((ver * 4 + 4) / (n * 2 - 2)) * 2;
+  const out = [6];
+  for (let pos = size - 7; out.length < n; pos -= step) out.splice(1, 0, pos);
+  return out;
+}
+
+/** The bytes of `text` (UTF-8) as the codewords of the smallest version that holds them, error correction included. */
+function codewords(bytes) {
+  let ver = 1;
+  for (; ver <= MAX_VERSION; ver++) {
+    const cap = dataCodewords(ver) * 8;
+    if (4 + (ver < 10 ? 8 : 16) + bytes.length * 8 <= cap) break;
+  }
+  if (ver > MAX_VERSION) throw new Error(`qr: ${bytes.length} bytes do not fit version ${MAX_VERSION}`);
+  const bits = [];
+  const put = (v, n) => { for (let i = n - 1; i >= 0; i--) bits.push((v >>> i) & 1); };
+  put(0b0100, 4); put(bytes.length, ver < 10 ? 8 : 16);
+  for (const b of bytes) put(b, 8);
+  const cap = dataCodewords(ver) * 8;
+  put(0, Math.min(4, cap - bits.length));
+  put(0, (8 - (bits.length % 8)) % 8);
+  for (let pad = 0xec; bits.length < cap; pad ^= 0xec ^ 0x11) put(pad, 8);
+  const data = [];
+  for (let i = 0; i < bits.length; i += 8) data.push(bits.slice(i, i + 8).reduce((a, b) => (a << 1) | b, 0));
+
+  const nBlocks = ECC_M.blocks[ver]; const eccLen = ECC_M.perBlock[ver];
+  const raw = Math.floor(rawModules(ver) / 8);
+  const nShort = nBlocks - (raw % nBlocks); const shortLen = Math.floor(raw / nBlocks);
+  const div = divisor(eccLen);
+  const blocks = [];
+  for (let i = 0, k = 0; i < nBlocks; i++) {
+    const d = data.slice(k, k + shortLen - eccLen + (i < nShort ? 0 : 1)); k += d.length;
+    const e = remainder(d, div);
+    if (i < nShort) d.push(0);                   // a placeholder, skipped when interleaving
+    blocks.push(d.concat(e));
+  }
+  const out = [];
+  for (let i = 0; i < blocks[0].length; i++) {
+    blocks.forEach((b, j) => { if (i !== shortLen - eccLen || j >= nShort) out.push(b[i]); });
+  }
+  return { ver, out };
+}
+
+const MASKS = [
+  (x, y) => (x + y) % 2 === 0, (x, y) => y % 2 === 0, (x) => x % 3 === 0, (x, y) => (x + y) % 3 === 0,
+  (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0, (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+  (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0, (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+
+/**
+ * The QR code for `text`: { size, modules } where modules[y][x] is true for a dark module, quiet zone not included.
+ * `mask` forces one of the eight masks (the self-check reads every one); otherwise the one the penalty rules pick.
+ */
+export function qr(text, { mask = null } = {}) {
+  const bytes = [...new TextEncoder().encode(String(text))];
+  const { ver, out } = codewords(bytes);
+  const size = ver * 4 + 17;
+  const m = Array.from({ length: size }, () => new Array(size).fill(false));
+  const fn = Array.from({ length: size }, () => new Array(size).fill(false));
+  const set = (x, y, dark) => { m[y][x] = dark; fn[y][x] = true; };
+
+  for (let i = 0; i < size; i++) { set(6, i, i % 2 === 0); set(i, 6, i % 2 === 0); }
+  for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+    for (let dy = -4; dy <= 4; dy++) for (let dx = -4; dx <= 4; dx++) {
+      const x = cx + dx; const y = cy + dy;
+      if (x >= 0 && x < size && y >= 0 && y < size) { const d = Math.max(Math.abs(dx), Math.abs(dy)); set(x, y, d !== 2 && d !== 4); }
+    }
+  }
+  const al = alignmentPositions(ver);
+  al.forEach((ax, i) => al.forEach((ay, j) => {
+    if ((i === 0 && j === 0) || (i === 0 && j === al.length - 1) || (i === al.length - 1 && j === 0)) return;
+    for (let dy = -2; dy <= 2; dy++) for (let dx = -2; dx <= 2; dx++) set(ax + dx, ay + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+  }));
+  const format = (mk) => {
+    const d = (ECC_M.formatBits << 3) | mk;
+    let r = d; for (let i = 0; i < 10; i++) r = (r << 1) ^ ((r >>> 9) * 0x537);
+    const b = ((d << 10) | r) ^ 0x5412; const bit = (i) => ((b >>> i) & 1) === 1;
+    for (let i = 0; i <= 5; i++) set(8, i, bit(i));
+    set(8, 7, bit(6)); set(8, 8, bit(7)); set(7, 8, bit(8));
+    for (let i = 9; i < 15; i++) set(14 - i, 8, bit(i));
+    for (let i = 0; i < 8; i++) set(size - 1 - i, 8, bit(i));
+    for (let i = 8; i < 15; i++) set(8, size - 15 + i, bit(i));
+    set(8, size - 8, true);
+  };
+  format(0);                                       // reserves the format area before the data is drawn
+  if (ver >= 7) {
+    let r = ver; for (let i = 0; i < 12; i++) r = (r << 1) ^ ((r >>> 11) * 0x1f25);
+    const b = (ver << 12) | r;
+    for (let i = 0; i < 18; i++) { const dark = ((b >>> i) & 1) === 1; const a = size - 11 + (i % 3); const c = Math.floor(i / 3); set(a, c, dark); set(c, a, dark); }
+  }
+
+  let i = 0;
+  for (let right = size - 1; right >= 1; right -= 2) {
+    if (right === 6) right = 5;
+    for (let v = 0; v < size; v++) for (let j = 0; j < 2; j++) {
+      const x = right - j; const up = ((right + 1) & 2) === 0; const y = up ? size - 1 - v : v;
+      if (!fn[y][x] && i < out.length * 8) { m[y][x] = ((out[i >>> 3] >>> (7 - (i & 7))) & 1) === 1; i++; }
+    }
+  }
+
+  const apply = (mk) => { for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) if (!fn[y][x] && MASKS[mk](x, y)) m[y][x] = !m[y][x]; };
+  let chosen = mask;
+  if (chosen === null) {
+    let best = Infinity;
+    for (let mk = 0; mk < 8; mk++) {
+      apply(mk); format(mk);
+      const p = penalty(m, size);
+      if (p < best) { best = p; chosen = mk; }
+      apply(mk);
+    }
+  }
+  apply(chosen); format(chosen);
+  return { size, version: ver, mask: chosen, modules: m };
+}
+
+// The standard's four penalty rules: runs of five or more, 2x2 blocks, finder-like patterns, dark/light balance.
+function penalty(m, size) {
+  let p = 0;
+  const line = (get) => {
+    let run = 0; let prev = null; const hist = [];
+    for (let i = 0; i < size; i++) {
+      const c = get(i);
+      if (c === prev) { run++; if (run === 5) p += 3; else if (run > 5) p += 1; } else { run = 1; prev = c; }
+      hist.push(c ? 1 : 0);
+    }
+    const s = hist.join('');
+    for (const pat of ['10111010000', '00001011101']) { let k = s.indexOf(pat); while (k !== -1) { p += 40; k = s.indexOf(pat, k + 1); } }
+  };
+  for (let y = 0; y < size; y++) line((x) => m[y][x]);
+  for (let x = 0; x < size; x++) line((y) => m[y][x]);
+  let dark = 0;
+  for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+    if (m[y][x]) dark++;
+    if (x < size - 1 && y < size - 1 && m[y][x] === m[y][x + 1] && m[y][x] === m[y + 1][x] && m[y][x] === m[y + 1][x + 1]) p += 3;
+  }
+  const total = size * size;
+  p += Math.floor(Math.abs(dark * 20 - total * 10) / total) * 10;
+  return p;
+}
+
+/** The code as an SVG string: one path and a quiet zone of four modules. Its two colours are tokens.css's
+ *  --qr-dark and --qr-light, the same in both themes: a camera reads contrast, not the palette. */
+export function qrSvg(text, { px = 4 } = {}) {
+  const { size, modules } = qr(text);
+  const q = 4; const n = size + q * 2;
+  let d = '';
+  for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) if (modules[y][x]) d += `M${x + q} ${y + q}h1v1h-1z`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n} ${n}" width="${n * px}" height="${n * px}" shape-rendering="crispEdges" role="img" aria-label="QR code of the viewer link"><rect class="qr-light" width="${n}" height="${n}"/><path class="qr-dark" d="${d}"/></svg>`;
+}

package/kit/studio/web/style.css

@@ -402,6 +402,37 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 }
 .nav-foot-label:hover { color: var(--ink); }
 
+/* Remote viewers, under the machines: who holds a read-only link, and the way to take it back. */
+.rv { margin-top: var(--space-3); }
+.rv-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
+.rv-title {
+  font-size: 11px; line-height: var(--type-label-line); font-weight: var(--type-label-weight);
+  letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--ink-dim);
+}
+.rv-say { white-space: normal; padding: 0 var(--space-1); }
+.rv-give {
+  display: flex; flex-direction: column; gap: var(--space-2);
+  padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised);
+}
+.rv-give .rv-say { padding: 0; }
+.rv-url { font-size: 12px; line-height: 16px; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
+.rv-acts { display: flex; gap: var(--space-2); }
+/* The QR code is dark on white whatever the theme: a phone's camera reads contrast, not the palette. */
+.rv-qr { align-self: center; line-height: 0; border-radius: var(--radius-md); overflow: hidden; }
+.rv-qr svg { display: block; width: 168px; height: auto; max-width: 100%; }
+.rv-qr .qr-light { fill: var(--qr-light); }
+.rv-qr .qr-dark { fill: var(--qr-dark); }
+.rv-opt { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); font-size: 12px; color: var(--ink-dim); }
+/* A viewer link past its eight hours: the page is covered, with what happened and what to do. */
+.expired {
+  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2); padding: var(--space-4); text-align: center; background: var(--surface); color: var(--ink);
+}
+.expired h1 { margin: 0; font-size: 20px; }
+.expired p { margin: 0; max-width: 34ch; color: var(--ink-dim); }
+/* A viewer's page offers no way to start a session: the server refuses it, and a button that only fails is noise. */
+body[data-role="viewer"] #new-session { display: none; }
+
 /* ---- menu and toast ---- */
 .menu {
   position: fixed; z-index: 60; min-width: 190px; max-width: 272px;
@@ -525,6 +556,12 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
   border-bottom-color: color-mix(in srgb, var(--status-fail) 45%, var(--line));
 }
 .stage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* A server running older code than the page: the whole sentence is the instruction, so it wraps, not ellipsizes. */
+.stage-note[data-kind="restart"] {
+  color: var(--ink); background: color-mix(in srgb, var(--status-waiting) 12%, var(--surface));
+  border-bottom-color: color-mix(in srgb, var(--status-waiting) 45%, var(--line));
+}
+.stage-note[data-kind="restart"] .stage-note-text { white-space: normal; }
 /* The last picture stays while the server is away, and is drawn as what it is: old. */
 .stage[data-offline="true"] .canvas,
 .stage[data-offline="true"] .tl,
@@ -553,6 +590,126 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--ground); padding: var(--space-4); }
 .mv[hidden] { display: none; }
 .mv-empty { padding: var(--space-6); color: var(--ink-dim); font-size: 13px; }
+
+/* The Map view: the project as its crew map shows it. Bands, cards, lines, the findings, the inspector. */
+.mp { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--ground); padding: var(--space-4); }
+.mp[hidden] { display: none; }
+.mp .sub { white-space: normal; flex: initial; min-width: 0; }
+.mp .lbl { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); }
+.mp-empty { padding: var(--space-6); color: var(--ink-dim); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
+.mp-empty p { margin: 0; }
+.mp-pane { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-height: 100%; }
+.mp-head, .mp-toolbar, .mp-source { display: flex; align-items: center; gap: var(--space-2); padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+.mp-title { margin: 0; font-size: 15px; font-weight: 700; }
+.mp-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
+.mp-pill[data-tone="behind"], .mp-pill[data-tone="missing"] { color: var(--status-bad); background: color-mix(in srgb, var(--status-bad) 14%, transparent); }
+.mp-tog { height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
+.mp-tog[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); }
+.mp-compare { height: 30px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; padding: 0 8px; max-width: 260px; }
+.mp-legend { position: relative; }
+.mp-legend-box { position: absolute; right: 0; top: 34px; z-index: 5; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); min-width: 220px; }
+.mp-legend-row { display: flex; align-items: center; gap: 8px; }
+.mp-legend-line { width: 28px; height: 0; border-top: 2px solid var(--ink-faint); flex: none; }
+.mp-legend-line[data-kind="inferred"] { border-top-style: dotted; }
+.mp-legend-line[data-kind="model"] { border-top-style: dashed; border-top-color: var(--studio-accent); opacity: 0.7; }
+.mp-legend-line[data-kind="lit"] { border-top-color: var(--studio-accent); }
+.mp-legend-card { width: 22px; height: 14px; border: 1px solid var(--ink-faint); border-radius: 4px; flex: none; }
+.mp-legend-card[data-kind="dashed"] { border-style: dashed; }
+.mp-file { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
+.mp-body { display: flex; min-height: 0; flex: 1; }
+.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+/* The pane pans and zooms (viewport.js): the layer is moved by one transform, so nothing inside restyles. */
+.mp-canvas-pane { position: relative; flex: 1; min-height: 380px; overflow: hidden; cursor: grab; background-color: var(--ground); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 20px 20px; touch-action: none; }
+.mp-canvas-pane.cv-panning { cursor: grabbing; }
+.mp-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
+.mp-band { position: absolute; left: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; box-sizing: border-box; }
+.mp-group { position: absolute; border: 1px dashed var(--line); border-radius: var(--radius-md); box-sizing: border-box; }
+.mp-group-fold { position: absolute; left: 8px; top: 3px; border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); cursor: pointer; }
+.mp-group-fold:hover { color: var(--ink); }
+.mp-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
+.mp-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
+.mp-line[data-line="inferred"] { stroke-dasharray: 2 4; }
+.mp-line[data-line="model"] { stroke-dasharray: 7 4; stroke: var(--studio-accent); opacity: 0.7; }
+.mp-line[data-lit="false"] { opacity: 0.35; }
+.mp-line[data-lit="true"] { stroke: var(--studio-accent); stroke-width: 2.2; }
+.mp-elab { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 4px; z-index: 2; }
+.mp-mod, .mp-ext { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-md); z-index: 1; overflow: hidden; }
+.mp-mod { background: var(--surface); padding: 10px 14px; }
+.mp-mod[data-kind="client"] { border-style: dashed; }
+.mp-mod[data-kind="group"] { background: var(--surface-raised); }
+.mp-ext[data-inferred="true"] { border-style: dashed; }
+.mp-card.cv-dragging { cursor: grabbing; z-index: 3; }
+.mp-ext { background: var(--ground); padding: 6px 10px; justify-content: center; }
+.mp-card:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
+.mp-mod[data-selected="true"], .mp-ext[data-selected="true"] { border-color: var(--studio-accent); box-shadow: 0 0 0 1px var(--studio-accent); }
+.mp-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.mp-name { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mp-ename { font-family: var(--font-mono); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mp-kind { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); flex: none; }
+.mp-fb { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--status-bad) 18%, transparent); color: var(--status-bad); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.mp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.mp-chip { font-family: var(--font-mono); font-size: 11px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--surface-raised); display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.mp-findings { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
+.mp-flist { max-height: 132px; overflow: auto; display: flex; flex-direction: column; }
+.mp-frow { display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
+.mp-frow:hover { background: var(--surface-raised); }
+.mp-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; box-sizing: border-box; border: 1.5px solid var(--status-bad); }
+.mp-dot[data-proven="true"] { background: var(--status-bad); }
+.mp-ftitle { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
+.mp-fcard .mp-ftitle { white-space: normal; }
+.mp-fwhere { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 2 auto; }
+.mp-badge { font-family: var(--font-mono); font-size: 11px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-dim); display: inline-flex; align-items: center; flex: none; }
+.mp-inspect { width: 340px; flex: none; border-left: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
+.mp-inspect p { margin: 0; font-size: 13px; line-height: 19px; }
+.mp-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--line); }
+.mp-tab { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; cursor: pointer; }
+.mp-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
+.mp-isec { display: flex; flex-direction: column; gap: 8px; }
+.mp-overview { white-space: pre-wrap; margin: 4px 0 10px; line-height: 1.5; }
+.mp-cites { font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
+.mp-conn { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); }
+.mp-ev { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
+.mp-fcard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
+.mp-fcard[data-proven="false"] { border-style: dashed; }
+.mp-notmeasured { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
+/* The navigator's Map entry under a project, and its count of findings (spec §11). */
+.map-row .map-word { font-size: 13px; font-weight: 600; }
+.map-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--status-bad) 18%, transparent); color: var(--status-bad); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.mp-cite { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
+.mp-cite:hover { color: var(--ink); text-decoration: underline; }
+.mp-pill[data-tone="model"] { color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 14%, transparent); }
+/* A phone shows the findings and a list of the modules in place of the pane (spec §11). */
+/* CM3: a module card names itself in full (the kind line gives way), carries what it is built with, and folds the
+   outside services it calls into one line under it. A search dims what it does not name; the tour sits over the
+   bottom of the pane. */
+.mp-mod { gap: 6px; }
+.mp-mod .mp-row .mp-name { flex: none; overflow: visible; }
+.mp-mod .mp-row .mp-kind { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mp-fold { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mp-fold.none { color: var(--ink-faint); }
+.mp-card[data-match="false"] { opacity: 0.3; }
+.mp-card[data-match="true"] { border-color: var(--studio-accent); }
+.mp-search { height: 30px; min-width: 200px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
+.mp-search::placeholder { color: var(--ink-dim); }
+.mp-tour { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 6; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--studio-accent); border-radius: var(--radius-md); background: var(--surface-raised); cursor: default; }
+.mp-tour p { margin: 0; font-size: 14px; line-height: 21px; }
+.mp-tour[hidden] { display: none; }
+.mp-inside { flex-direction: row; align-items: center; gap: 10px; }
+.mp-inside .mp-ev { margin-left: auto; }
+.mp-inside .mp-cite, .mp-inside .mp-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mp-inside .mp-ev:last-child { flex: none; }
+.mp-modlist { display: none; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--line); }
+.mp-mrow { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
+.mp-mrow:hover { background: var(--surface-raised); }
+@media (max-width: 1023px) {
+  .mp-body { flex-direction: column; }
+  .mp-inspect { width: auto; border-left: 0; border-top: 1px solid var(--line); }
+}
+@media (max-width: 639px) {
+  .mp-canvas-pane, .mp-hint { display: none; }
+  .mp-modlist { display: flex; }
+  .mp-flist { max-height: none; }
+}
 .mv-pane { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
 .mv-head { display: flex; align-items: center; gap: var(--space-2); padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
 .mv-title { margin: 0; font-size: 15px; font-weight: 700; }
@@ -571,6 +728,7 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv-raised .mv-tag[data-kind="lowered"] { margin-left: 0; }
 .mv-tag[data-tone="pass"] { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 14%, transparent); }
 .mv-tag[data-tone="fail"] { color: var(--status-fail); background: color-mix(in srgb, var(--status-fail) 14%, transparent); }
+.mv-tag[data-kind="advisor"] { margin-left: 6px; color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
 .mv-tag[data-kind="escalated"] { color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
 .mv-table td[data-partial="true"] { color: var(--ink-dim); }
 .mv-meter { display: inline-block; width: 72px; height: 6px; margin-left: 8px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; vertical-align: middle; }
@@ -581,6 +739,11 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 .mv-suggest-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--studio-accent); }
 .mv-suggest-text { margin: 0; font-size: 14px; line-height: 21px; }
 .mv-suggest-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.mv-above { margin: 16px 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
+.mv-above .mv-suggest-h { color: var(--ink-dim); }
+.mv-above p { margin: 0; }
+.mv-above-verdict { font-size: 13px; line-height: 19px; }
+.mv-above-verdict[data-measured="false"] { color: var(--ink-dim); }
 .mv-cmd { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 12px; user-select: all; }
 .mv-raised { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 18px 16px; }
 .mv-raised .mv-tag { margin-left: 0; flex: none; }
@@ -1079,6 +1242,8 @@ button.tl-lab { cursor: pointer; }
    and do not shrink. */
 .cv-sub { font-size: 12px; line-height: 16px; color: var(--ink-dim); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .cv-sub[hidden] { display: none; }
+/* Agent calls the model gate refused: no agent started, so this line is the only trace on the canvas. */
+.cv-refused { color: var(--status-waiting); }
 .cv-node > .cv-row, .cv-node > .cv-under, .cv-node > .cv-name, .cv-node > .cv-sub { max-width: 100%; }
 .cv-word { font-size: 11px; color: var(--ink-dim); white-space: nowrap; flex: none; }
 

package/kit/studio/web/tokens.css

@@ -10,6 +10,8 @@
   --ink: #e6e9f0;
   --ink-dim: #9aa7cc;
   --ink-faint: #5c6472;
+  --qr-dark: #000000;
+  --qr-light: #ffffff;
   --accent: #A78BFA;
   --on-accent: #0B1020;
   --wordmark-ink: #FFFFFF;
@@ -86,6 +88,8 @@
     --ink: #1a1d24;
     --ink-dim: #5c6472;
     --ink-faint: #8d95a3;
+    --qr-dark: #000000;
+    --qr-light: #ffffff;
     --accent: #6D28D9;
     --on-accent: #ffffff;
     --wordmark-ink: #0F172A;
@@ -113,6 +117,8 @@
   --ink: #1a1d24;
   --ink-dim: #5c6472;
   --ink-faint: #8d95a3;
+  --qr-dark: #000000;
+  --qr-light: #ffffff;
   --accent: #6D28D9;
   --on-accent: #ffffff;
   --wordmark-ink: #0F172A;

package/kit/studio/web/usage.js

@@ -111,6 +111,18 @@ export function summaryRows(u, { live = false, now = null } = {}) {
   };
   part('Session', u.parts?.session, 'The session\'s own transcript');
   part('Agents', u.parts?.agents, 'Everything its agents did');
+  // The advisor: a second model the main one consulted mid-response. Its tokens are in the rows above already; this
+  // says how much of them it was. No call recorded, no row: a session that never consulted it shows no zero.
+  if (u.advisor?.calls) {
+    const a = u.advisor;
+    const who = Object.keys(u.advisorModels ?? {}).map(modelName).join(', ');
+    rows.push({
+      label: 'Advisor',
+      value: `${a.calls} ${a.calls === 1 ? 'call' : 'calls'} \u00b7 ${fmtCount(a.tokens.fresh)} \u00b7 ${fmtCost(a.cost)}`,
+      note: `Advice the main model asked a second model for${who ? ` (${who})` : ''}, priced at that model's rates. Included in the totals above; the API's own token count leaves it out\n${costNote(a)}`,
+      detail: kinds(a.tokens),
+    });
+  }
   // Behind the cost: each model's new tokens and what they come to. A model with no price says so with a dash.
   const perModel = Object.entries(u.byModel ?? {}).map(([model, t]) => [modelName(model), `${fmtCount(t.tokens.fresh)} \u00b7 ${fmtCost(t.cost)}`]);
   rows.push({ label: 'Cost', value: k.total ? fmtCost(u.cost) : NO_COST, note: costNote(u), detail: perModel.length ? perModel : undefined });