@zenera/neo 1.1.19 → 1.1.20

package/dist/fork.d.ts

@@ -1,13 +1,7 @@
 import type { JsonSchema } from './types.ts';
 /**
- * Deliberately not a function of the agent list or the branch cap: both are
- * already on the tool schema, where the provider enforces them during decoding,
- * and naming them twice buys nothing but two places to drift.
- */
-export declare function forkInstructions(): string;
-/**
- * Mechanics only — the policy above is in the system prompt of every agent that
- * can call this, so repeating it here would cost tokens in two places at once.
+ * Mechanics only — the policy is in the system prompt of every agent that can
+ * call this, so repeating it here would cost tokens in two places at once.
  */
 export declare const FORK_DESCRIPTION: string;
 /**

package/dist/fork.js

@@ -4,61 +4,17 @@
 // The tool schema says what the arguments are; none of it says what survives a
 // join, that a branch cannot be corrected once it starts, or which `context`
 // mode fits which shape of work. That is policy, it is the same for every
-// agent, and it belongs in the system prompt — the only place it can be stated
-// once per run instead of once per call.
+// agent, and it belongs in the system prompt.
 //
-// It goes in through `composePrompt`'s `derived` array, so it sits in the
-// cacheable prefix and is recorded on the `system_prompt` node like every other
-// part of what the model read. The text is gated on the agent holding a fork
-// binding *and* being below the depth cap — the same condition that decides
-// whether the tool is offered at all, because a rule about a tool the model
-// does not have is a rule it can only be confused by.
+// It is not here. It is the project's own house rules, in
+// `agents/fork-instructions.md` under `requires: [fork]`, so the one document
+// is the only place it is written and a project can say something different.
+// An agent with the fork tool and no such file gets the schema and nothing
+// else - `zen check` refuses it, the runtime does not invent a replacement.
 // ---------------------------------------------------------------------------
 /**
- * Deliberately not a function of the agent list or the branch cap: both are
- * already on the tool schema, where the provider enforces them during decoding,
- * and naming them twice buys nothing but two places to drift.
- */
-export function forkInstructions() {
-    return FORKING;
-}
-const FORKING = `Forking runs work in separate conversations and brings back only the answers.
-
-A branch is a run of its own: its own conversation, its own tool calls, its own
-reasoning. None of that returns. What returns is each branch's final answer, as
-the result of your \`fork\` call — so whatever you will need afterwards has to be
-*in* that answer, and the branch only knows it if your instructions say so. Work
-whose value is the trace rather than the conclusion should not be forked at all.
-
-The instructions you write are the entire assignment. A branch cannot ask you a
-question, cannot see what its siblings are doing, and cannot be corrected once
-it starts. Say what it must do, what it must leave alone, and the exact shape of
-what it must hand back.
-
-**One branch is delegation**: the work happens elsewhere and you get the
-conclusion instead of the transcript. Use it when another agent is better suited
-to the job, or when the job would otherwise fill this conversation with material
-you have no use for afterwards — a long file survey, a noisy build loop, an
-exploration down a path that may go nowhere. **Several branches are a fan-out**:
-independent parts of one task, worked at the same time, merged by you. It is the
-same call either way; the number of branches is the only difference.
-
-Do not fork a sequence. Branches run at once and can exchange nothing, so a step
-that needs the step before it has to stay in this conversation.
-
-\`context\` decides what each branch starts from, and you choose it per call:
-- \`inherit\` — everything said here so far. For work that only makes sense
-  against the case as it stands.
-- \`compact\` — the same, without the tool traffic: what was decided, not how it
-  was found out. The usual choice for a wide fan-out.
-- \`none\` — nothing but its own instructions. The cheapest, and the honest one
-  when the assignment is self-contained.
-
-A branch can fail, or answer badly. Its row says which, and what the final
-answer is remains your decision, not the join's.`;
-/**
- * Mechanics only — the policy above is in the system prompt of every agent that
- * can call this, so repeating it here would cost tokens in two places at once.
+ * Mechanics only — the policy is in the system prompt of every agent that can
+ * call this, so repeating it here would cost tokens in two places at once.
  */
 export const FORK_DESCRIPTION = [
     'Run work in separate conversations and get back only the answers.',

package/dist/frontmatter.d.ts

@@ -0,0 +1,9 @@
+export interface Frontmatter {
+    data: Record<string, string>;
+    /** the document with the header removed, trimmed */
+    body: string;
+}
+export declare function frontmatter(raw: string): Frontmatter;
+export declare function toList(value: string | undefined): string[];
+export declare function unquote(value: string): string;
+//# sourceMappingURL=frontmatter.d.ts.map

package/dist/frontmatter.js

@@ -0,0 +1,40 @@
+// ---------------------------------------------------------------------------
+// Markdown frontmatter
+//
+// Deliberately not a YAML parser: `key: value` and flow lists cover what a
+// skill header or a house-rules condition needs, and a real dependency would
+// buy nothing. Shared so a document written for one reader parses the same way
+// for the other — and so the CLI's validator can mirror the loader exactly.
+// ---------------------------------------------------------------------------
+export function frontmatter(raw) {
+    const m = /^---\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(raw);
+    if (!m) {
+        return { data: {}, body: raw.trim() };
+    }
+    const data = {};
+    for (const line of m[1].split(/\r?\n/)) {
+        const i = line.indexOf(':');
+        const key = i < 0 ? '' : line.slice(0, i).trim();
+        if (!key || key.startsWith('#')) {
+            continue;
+        }
+        data[key] = unquote(line.slice(i + 1).trim());
+    }
+    return { data, body: raw.slice(m[0].length).trim() };
+}
+export function toList(value) {
+    if (!value) {
+        return [];
+    }
+    const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
+    return inner
+        .split(',')
+        .map((v) => unquote(v.trim()))
+        .filter(Boolean);
+}
+export function unquote(value) {
+    const quoted = (value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"));
+    return quoted && value.length > 1 ? value.slice(1, -1) : value;
+}
+//# sourceMappingURL=frontmatter.js.map

package/dist/index.d.ts

@@ -5,13 +5,13 @@ export * from './embeddings/index.ts';
 export * from './events.ts';
 export * from './failure.ts';
 export * from './fork.ts';
+export * from './frontmatter.ts';
 export * from './ids.ts';
 export * from './inspect/index.ts';
 export * as Kernel from './kernel.ts';
 export * from './memory/files.ts';
 export * from './memory/graph.ts';
 export * from './memory/index.ts';
-export * from './memory/instructions.ts';
 export * from './memory/page.ts';
 export * from './memory/recall.ts';
 export * from './memory/render.ts';

package/dist/index.js

@@ -5,13 +5,13 @@ export * from "./embeddings/index.js";
 export * from "./events.js";
 export * from "./failure.js";
 export * from "./fork.js";
+export * from "./frontmatter.js";
 export * from "./ids.js";
 export * from "./inspect/index.js";
 export * as Kernel from "./kernel.js";
 export * from "./memory/files.js";
 export * from "./memory/graph.js";
 export * from "./memory/index.js";
-export * from "./memory/instructions.js";
 export * from "./memory/page.js";
 export * from "./memory/recall.js";
 export * from "./memory/render.js";

package/dist/inspect/client.d.ts

@@ -1,2 +1,2 @@
-export declare const CLIENT = "\nconst DATA = JSON.parse(document.getElementById('run-data').textContent);\nconst STATE = DATA.state;\nconst BLOBS = DATA.blobs;\nconst MEDIA = DATA.media || [];\nconst CUT = new Set(DATA.truncated || []);\n\n// --- payload access -------------------------------------------------------\n\nfunction blob(ref) {\n  if (!ref || typeof ref.sha256 !== 'string') return '';\n  const v = BLOBS[ref.sha256];\n  if (v === undefined) return '[payload not resolved: ' + ref.sha256.slice(0, 12) + ']';\n  return CUT.has(ref.sha256) ? v + '\\n\\n[\u2026 truncated, ' + ref.size + ' bytes total]' : v;\n}\n\nfunction pretty(raw) {\n  try { return JSON.stringify(JSON.parse(raw), null, 2); } catch (e) { return raw; }\n}\n\n// --- flatten the trajectory ----------------------------------------------\n\nconst ENTRIES = [];\nconst BY_KEY = new Map();\n\nfunction covered(nodes) {\n  const out = new Set();\n  for (const n of nodes) if (n.type === 'compaction') for (const id of n.covers) out.add(id);\n  return out;\n}\n\nfunction flatten(nodes, depth, branch) {\n  const hidden = covered(nodes);\n  const level = [];\n  for (const node of nodes) {\n    const e = {\n      key: '', node: node, depth: depth, branch: branch,\n      covered: hidden.has(node.id), children: []\n    };\n    // A join's branches ran between the fork and the join, so they are\n    // numbered and listed there \u2014 which means recursing before this entry\n    // takes its own number.\n    if (node.type === 'join') {\n      for (const b of node.branches) e.children.push({ name: b.name, entries: flatten(b.nodes, depth + 1, b.name) });\n    }\n    e.key = 'n' + ENTRIES.length;\n    ENTRIES.push(e); BY_KEY.set(e.key, e); level.push(e);\n  }\n  return level;\n}\nconst ROOT = flatten(STATE.trajectory, 0, null);\n\n// --- labels ---------------------------------------------------------------\n\nfunction names(list) { return list.join(', '); }\n\n// The edges are what makes a recollection a subgraph rather than a hit list,\n// so they are shown even though the injected block already renders them.\nfunction edgeLines(edges) {\n  if (!edges || !edges.length) return '';\n  return '\\n\\n' + edges.map(function (e) {\n    return e.source + ' --' + e.relation + '--> ' + e.target;\n  }).join('\\n');\n}\n\nfunction base(path) { return path.split('/').pop() || path; }\n\nfunction label(n) {\n  switch (n.type) {\n    case 'user_input': return n.synthetic ? 'user input (synthetic)' : 'user input';\n    case 'system_prompt': return 'system prompt'\n      + (n.sources && n.sources.length ? ': ' + names(n.sources.map(function (s) { return base(s.path); })) : '');\n    case 'load_skills': return 'skills: ' + names(n.skills.map(function (s) { return s.name; }));\n    case 'memory_recall': return 'memory recall: ' + n.nodes.length + ' nodes';\n    case 'memory_op': return 'memory ' + n.op + ': ' + n.nodes.length + ' nodes';\n    case 'llm_call': return 'llm: ' + n.model + (n.toolCalls.length\n      ? ' -> ' + names(n.toolCalls.map(function (c) { return c.name; })) : '');\n    case 'tool_call': return 'call: ' + n.name;\n    case 'tool_result': return 'result: ' + n.name + (n.isError ? ' (error)' : '');\n    case 'handoff': return 'handoff: ' + n.from + ' -> ' + n.to;\n    case 'fork': return 'fork: ' + names(n.branches.map(function (b) { return b.name; }));\n    case 'join': return 'join: ' + names(n.branches.map(function (b) { return b.name + '=' + b.status; }));\n    case 'compaction': return 'compaction: ' + n.reason + ' (' + n.covers.length + ' nodes)';\n    case 'final_output': return 'final output';\n    default: return n.type;\n  }\n}\n\nfunction preview(n) {\n  switch (n.type) {\n    case 'user_input': {\n      const t = n.content.find(function (p) { return p.type === 'text'; });\n      return t ? blob(t.text) : '';\n    }\n    case 'system_prompt': return blob(n.prompt);\n    case 'llm_call': return blob(n.text);\n    case 'tool_call': return blob(n.args);\n    case 'tool_result': return blob(n.result);\n    case 'compaction': return blob(n.summary);\n    case 'final_output': return blob(n.output);\n    case 'memory_recall': return blob(n.content);\n    case 'load_skills': return blob(n.content);\n    default: return '';\n  }\n}\n\n// --- DOM helpers ----------------------------------------------------------\n\nfunction el(tag, cls, text) {\n  const e = document.createElement(tag);\n  if (cls) e.className = cls;\n  if (text !== undefined && text !== null) e.textContent = String(text);\n  return e;\n}\n\nfunction block(title, tag) {\n  const s = el('section', 'blk');\n  const h = el('h3', null, title);\n  if (tag) h.appendChild(el('span', 'tag', tag));\n  s.appendChild(h);\n  return s;\n}\n\nfunction textBlock(title, body, tag) {\n  const s = block(title, tag);\n  if (body) s.appendChild(el('pre', 'text', body));\n  else s.appendChild(el('div', 'empty', '(empty)'));\n  return s;\n}\n\nfunction foldBlock(title, body) {\n  const s = block(title);\n  const d = document.createElement('details');\n  d.appendChild(el('summary', null, 'show'));\n  d.appendChild(el('pre', null, body));\n  s.appendChild(d);\n  return s;\n}\n\n// An <img> never runs script, but the src is still pinned to shapes we\n// understand: a raster data: uri (svg is excluded on principle) or an http url.\nconst IMG_SUBTYPES = ['png', 'jpeg', 'jpg', 'gif', 'webp', 'avif', 'bmp'];\n\n/** Undoes the report's media hoisting; anything else passes through. */\nfunction mediaUrl(u) {\n  if (typeof u !== 'string' || u.indexOf('media:') !== 0) return u;\n  const v = MEDIA[Number(u.slice(6))];\n  return v === undefined ? u : v;\n}\n\nfunction imageSrc(p) {\n  if (p.type !== 'image') return null;\n  const u = mediaUrl(p.url);\n  if (typeof u !== 'string') return null;\n  if (u.indexOf('https://') === 0 || u.indexOf('http://') === 0) return u;\n  if (u.indexOf('data:image/') !== 0) return null;\n  const sub = u.slice(11).split(/[;,]/)[0].toLowerCase();\n  return IMG_SUBTYPES.indexOf(sub) < 0 ? null : u;\n}\n\n/** The rendered picture, or null when the part is not one we will inline. */\nfunction imageEl(p, thumb) {\n  const src = imageSrc(p);\n  if (!src) return null;\n  const img = el('img', thumb ? 'media thumb' : 'media');\n  img.src = src;\n  img.alt = p.type + (p.mimeType ? ' ' + p.mimeType : '');\n  img.loading = 'lazy';\n  if (thumb) {\n    img.title = 'click to enlarge';\n    img.addEventListener('click', function () { img.classList.toggle('thumb'); });\n  }\n  return img;\n}\n\nfunction mediaBlock(title, p) {\n  const tag = p.type + (p.mimeType ? ' \u00B7 ' + p.mimeType : '');\n  const src = imageSrc(p);\n  const img = imageEl(p, false);\n  if (!img) return textBlock(title, mediaUrl(p.url), tag);\n  const s = block(title, tag);\n  s.appendChild(img);\n  // The bytes stay reachable; they just no longer own the screen.\n  const d = document.createElement('details');\n  d.appendChild(el('summary', null, 'source'));\n  d.appendChild(el('pre', null, src));\n  s.appendChild(d);\n  return s;\n}\n\n// A titled container for several blocks. Returns the element to append and the\n// body to fill, so callers never have to know the internal structure.\nfunction group(title, kind, tag) {\n  const s = el('section', 'group ' + kind);\n  const h = el('div', 'ghdr', title);\n  if (tag) h.appendChild(el('span', 'tag', tag));\n  s.appendChild(h);\n  const body = el('div', 'body');\n  s.appendChild(body);\n  return { el: s, body: body };\n}\n\nfunction stat(key, value) {\n  const d = el('span', 'stat', key + ' ');\n  d.appendChild(el('b', null, value));\n  return d;\n}\n\n// --- header ---------------------------------------------------------------\n\nfunction kv(key, value) {\n  const d = el('div', 'kv');\n  d.appendChild(document.createTextNode(key + ' '));\n  d.appendChild(el('b', null, value));\n  return d;\n}\n\n(function head() {\n  const h = document.getElementById('head');\n  const u = STATE.usage || {};\n  const llm = ENTRIES.filter(function (e) { return e.node.type === 'llm_call'; }).length;\n  h.appendChild(el('h1', null, DATA.title));\n  h.appendChild(kv('run', STATE.runId));\n  h.appendChild(kv('agent', STATE.agentName));\n  h.appendChild(kv('phase', STATE.phase));\n  h.appendChild(kv('nodes', ENTRIES.length));\n  h.appendChild(kv('llm calls', llm));\n  h.appendChild(kv('tokens', (u.inputTokens || 0) + ' in / ' + (u.outputTokens || 0) + ' out'));\n  if (STATE.error) h.appendChild(kv('error', STATE.error));\n  h.appendChild(kv('generated', DATA.generatedAt));\n})();\n\n// --- timing ---------------------------------------------------------------\n//\n// A node is stamped when it is appended, which is when the work behind it\n// finished. So the interval between a node and the one before it in the same\n// lane *is* that work: an llm_call's interval is the model latency, a\n// tool_result's is the tool. That gives every node a start and a duration\n// without storing either.\n//\n// Offsets are counted from the start of the turn, not of the run: in a\n// follow-up the interesting question is \"how long did this answer take\", and\n// counting from a conversation that began an hour ago answers nothing. A trunk\n// user_input opens a new turn; a branch inherits the turn that forked it, so\n// ten branches starting at one offset still read as parallel.\n\nfunction stampOf(node) {\n  const t = Date.parse(node.ts);\n  return isNaN(t) ? null : t;\n}\n\n(function time(level, lanePrev, turnStart) {\n  let prev = lanePrev;\n  let t0 = turnStart;\n  level.forEach(function (e) {\n    const ts = stampOf(e.node);\n    // A real user turn resets the clock and starts at itself: the gap since\n    // the previous run is waiting, not work. Synthetic inputs (a branch seed,\n    // a re-injection) are not turns \u2014 same rule the kernel uses.\n    const opensTurn = !e.branch && e.node.type === 'user_input' && !e.node.synthetic;\n    if (opensTurn) t0 = ts;\n    e.turnStart = t0 === null ? ts : t0;\n    e.startMs = opensTurn || prev === null ? ts : prev;\n    e.endMs = ts;\n    // Branches run between the fork and the join, so they start where the\n    // trunk left off \u2014 and the join's own duration is the whole parallel\n    // section it waited on.\n    if (e.node.type === 'join') {\n      let slowest = null;\n      e.children.forEach(function (br) {\n        time(br.entries, prev, e.turnStart);\n        // The branch as a whole gets the same shape as a node \u2014 start, end,\n        // turn \u2014 so a reader sees how long *it* ran instead of having to\n        // subtract two offsets to find out that ten branches were parallel.\n        const last = br.entries[br.entries.length - 1];\n        br.turnStart = e.turnStart;\n        br.startMs = prev;\n        br.endMs = last ? last.endMs : prev;\n        if (br.entries.length) br.entries[0].branchSpan = br;\n        // The join costs exactly its slowest branch, so that branch is the\n        // only one worth optimizing: it gets marked and rendered lighter.\n        if (br.entries.length && (!slowest || br.endMs > slowest.endMs)) slowest = br;\n      });\n      if (slowest) slowest.slowest = true;\n    }\n    prev = ts;\n  });\n})(ROOT, null, null);\n\nfunction fmtSecs(ms) {\n  const s = ms / 1000;\n  if (s < 100) return s.toFixed(1) + 's';\n  const m = Math.floor(s / 60);\n  return m + 'm' + String(Math.floor(s - m * 60)).padStart(2, '0');\n}\n\n/** Offset of a node's start from the beginning of its turn. */\nfunction startedAt(e) {\n  if (e.startMs === null || e.turnStart === null) return '';\n  return fmtSecs(e.startMs - e.turnStart);\n}\n\n/** How long the work behind a node took. Blank when it is not worth a number. */\nfunction took(e) {\n  if (e.startMs === null || e.endMs === null) return '';\n  const ms = e.endMs - e.startMs;\n  if (ms < 10) return '';\n  return fmtDur(ms);\n}\n\nfunction fmtDur(ms) {\n  return ms < 1000 ? Math.round(ms) + 'ms' : fmtSecs(ms);\n}\n\nfunction spanMs(e) {\n  return e.startMs === null || e.endMs === null ? 0 : e.endMs - e.startMs;\n}\n\n// One colour per branch, stable for the life of the page. The trunk keeps the\n// neutral accent so branches are the thing that stands out.\nconst PALETTE = ['#6ea8fe', '#4ec9a0', '#e2b341', '#d1a6ff', '#f0776c',\n  '#5fd0d8', '#f09a5c', '#a3d160', '#ef8ec0', '#9aa4ff'];\nconst BRANCH_COLOR = new Map();\nfunction branchColor(name) {\n  if (!name) return null;\n  if (!BRANCH_COLOR.has(name)) BRANCH_COLOR.set(name, PALETTE[BRANCH_COLOR.size % PALETTE.length]);\n  return BRANCH_COLOR.get(name);\n}\n\n// --- timeline -------------------------------------------------------------\n\nconst listEl = document.getElementById('timeline');\nlet lastBranch = false;\nlet lastStamp = null;\n\nENTRIES.forEach(function (e, i) {\n  // Branch histories are contiguous in the flattened order, so a change of\n  // branch is a group boundary: label it and restart the elapsed column.\n  if (e.branch !== lastBranch) {\n    const sep = el('li', 'sep');\n    const color = branchColor(e.branch);\n    if (color) sep.style.setProperty('--bc', color);\n    sep.appendChild(el('span', 'dot'));\n    sep.appendChild(el('span', null, e.branch ? 'branch \u00B7 ' + e.branch : 'trunk'));\n    if (e.branchSpan) {\n      const bd = took(e.branchSpan);\n      if (e.branchSpan.slowest) sep.classList.add('slow');\n      if (bd) {\n        sep.appendChild(el('span', 'dur',\n          't+' + startedAt(e.branchSpan) + ' \u00B7 ' + bd + (e.branchSpan.slowest ? ' \u00B7 slowest' : '')));\n      }\n    }\n    listEl.appendChild(sep);\n    lastBranch = e.branch;\n    lastStamp = null;\n  }\n\n  const li = el('li', e.branch ? 'branch' : '');\n  if (e.covered) li.classList.add('covered');\n  const color = branchColor(e.branch);\n  if (color) li.style.setProperty('--bc', color);\n  li.dataset.key = e.key;\n\n  const row = el('div', 'row');\n  // Consecutive nodes often start at the same instant (a tool call is recorded\n  // the moment the response carrying it is applied). Repeating the offset\n  // would only bury the moments where time actually moved.\n  const at = startedAt(e);\n  row.appendChild(el('span', 't' + (at === lastStamp ? ' same' : ''), at === lastStamp ? '\u00B7' : at));\n  lastStamp = at;\n  row.appendChild(el('span', 'idx', '#' + (i + 1)));\n  const badge = el('span', 'type ' + e.node.type\n    + (e.node.type === 'tool_result' && e.node.isError ? ' err' : ''), e.node.type.replace(/_/g, ' '));\n  row.appendChild(badge);\n  const d = took(e);\n  if (d) row.appendChild(el('span', 'dur', d));\n  li.appendChild(row);\n  li.appendChild(el('div', 'prev', label(e.node)\n    + (preview(e.node) ? ' \u2014 ' + preview(e.node).slice(0, 90) : '')));\n  li.addEventListener('click', function () { select(e.key, true); });\n  listEl.appendChild(li);\n});\n\n// A group header is only worth showing while something in its group is.\nfunction applyFilter(q) {\n  const rows = Array.prototype.slice.call(listEl.children);\n  rows.forEach(function (li) {\n    if (li.classList.contains('sep')) return;\n    const e = BY_KEY.get(li.dataset.key);\n    const hay = (label(e.node) + ' ' + e.node.type + ' ' + (e.branch || '')\n      + ' ' + preview(e.node)).toLowerCase();\n    li.hidden = q.length > 0 && hay.indexOf(q) === -1;\n  });\n  let sep = null, kept = false;\n  rows.forEach(function (li) {\n    if (li.classList.contains('sep')) {\n      if (sep) sep.hidden = !kept;\n      sep = li; kept = false;\n    } else if (!li.hidden) kept = true;\n  });\n  if (sep) sep.hidden = !kept;\n}\n\ndocument.getElementById('filter').addEventListener('input', function (ev) {\n  applyFilter(ev.target.value.toLowerCase());\n});\n\n// --- detail ---------------------------------------------------------------\n\nfunction message(m) {\n  const wrap = el('div', 'msg ' + m.role + (m.isError ? ' err' : ''));\n  const role = el('div', 'role');\n  role.appendChild(el('span', null, m.role + (m.agent ? ' \u00B7 ' + m.agent : '')\n    + (m.name ? ' \u00B7 ' + m.name : '')));\n  if (m.callId) role.appendChild(el('span', 'badge', m.callId));\n  wrap.appendChild(role);\n\n  if (m.role === 'user' && Array.isArray(m.content)) {\n    m.content.forEach(function (p) {\n      if (p.type === 'text') { wrap.appendChild(el('pre', 'text', p.text)); return; }\n      const img = imageEl(p, true);\n      wrap.appendChild(img || el('pre', 'text', '[' + p.type + '] ' + mediaUrl(p.url)));\n    });\n  } else if (typeof m.content === 'string' && m.content) {\n    wrap.appendChild(el('pre', 'text', m.role === 'tool' ? pretty(m.content) : m.content));\n  } else if (!m.toolCalls) {\n    wrap.appendChild(el('div', 'empty', '(no content)'));\n  }\n\n  (m.toolCalls || []).forEach(function (c) {\n    const box = el('div', 'call');\n    box.appendChild(el('div', 'name', c.name + '(' + c.id + ')'));\n    box.appendChild(el('pre', null, pretty(c.args)));\n    wrap.appendChild(box);\n  });\n  return wrap;\n}\n\nfunction requestBlocks(raw, into) {\n  let req;\n  try { req = JSON.parse(raw); } catch (e) {\n    into.appendChild(textBlock('Request (unparsed)', raw));\n    return;\n  }\n  if (req.system) into.appendChild(textBlock('System prompt', req.system)).classList.add('sys');\n\n  const conv = block('Messages', (req.messages || []).length + ' messages');\n  (req.messages || []).forEach(function (m) { conv.appendChild(message(m)); });\n  if (!(req.messages || []).length) conv.appendChild(el('div', 'empty', '(none)'));\n  into.appendChild(conv);\n\n  const tools = block('Tools offered', (req.tools || []).length + ' tools');\n  (req.tools || []).forEach(function (t) {\n    const d = document.createElement('details');\n    d.appendChild(el('summary', null, t.name + (t.description ? ' \u2014 ' + t.description : '')));\n    d.appendChild(el('pre', null, JSON.stringify(t.parameters, null, 2)));\n    tools.appendChild(d);\n  });\n  if (!(req.tools || []).length) tools.appendChild(el('div', 'empty', '(none)'));\n  into.appendChild(tools);\n}\n\nfunction usageTag(u) {\n  if (!u) return '';\n  return (u.inputTokens || 0) + ' in (' + (u.cachedInputTokens || 0) + ' cached) / '\n    + (u.outputTokens || 0) + ' out (' + (u.reasoningTokens || 0) + ' reasoning)';\n}\n\nfunction detailFor(e) {\n  const n = e.node;\n  const out = document.createDocumentFragment();\n\n  const h = el('h2', 'dt');\n  h.appendChild(el('span', 'type ' + n.type, n.type.replace(/_/g, ' ')));\n  h.appendChild(el('span', null, label(n)));\n  out.appendChild(h);\n\n  const meta = el('div', 'meta');\n  meta.appendChild(el('span', null, 'id ' + n.id));\n  meta.appendChild(el('span', null, 'agent ' + n.agent));\n  meta.appendChild(el('span', null, n.ts));\n  meta.appendChild(el('span', null, 'started t+' + startedAt(e) + (took(e) ? ' \u00B7 took ' + took(e) : '')));\n  if (e.branch) {\n    const br = el('span', null, 'branch ' + e.branch);\n    br.style.color = branchColor(e.branch);\n    meta.appendChild(br);\n  }\n  if (e.covered) meta.appendChild(el('span', null, 'hidden by a later compaction'));\n  out.appendChild(meta);\n\n  switch (n.type) {\n    case 'system_prompt':\n      out.appendChild(textBlock('Prompt', blob(n.prompt)));\n      // The editable half: which file to open when the instruction is wrong.\n      (n.sources || []).forEach(function (s) {\n        out.appendChild(textBlock(s.path, blob(s.content), 'prompt file'));\n      });\n      break;\n\n    case 'user_input':\n      n.content.forEach(function (p, i) {\n        out.appendChild(p.type === 'text'\n          ? textBlock('Text part ' + (i + 1), blob(p.text))\n          : mediaBlock('Media part ' + (i + 1), p));\n      });\n      break;\n\n    case 'load_skills':\n      out.appendChild(textBlock('Skills', n.skills.map(function (s) {\n        return s.name + (s.version ? '@' + s.version : '') + '  ' + s.contentHash.slice(0, 12)\n          + (s.file ? '  ' + s.file : '');\n      }).join('\\n'), n.provider));\n      out.appendChild(textBlock('Injected instructions', blob(n.content)));\n      out.appendChild(textBlock('Tools unlocked', n.toolNames.join('\\n')));\n      break;\n\n    case 'memory_recall':\n      out.appendChild(textBlock('Query', JSON.stringify(n.query, null, 2),\n        n.seeds.length + ' seed(s)'));\n      out.appendChild(textBlock('Subgraph', n.nodes.map(function (m) {\n        return m.id + '  ' + m.kind\n          + (n.seeds.indexOf(m.id) >= 0 ? '  score=' + m.score.toFixed(3) : '  (stitched)');\n      }).join('\\n') + edgeLines(n.edges)));\n      out.appendChild(textBlock('Injected block', blob(n.content)));\n      break;\n\n    case 'memory_op':\n      out.appendChild(textBlock('Operation', n.nodes.map(function (m) {\n        return n.op + ' ' + m.id + '  ' + m.kind + '  rev ' + m.revision;\n      }).join('\\n') + edgeLines(n.edges),\n        n.files ? n.files + ' file(s)' : undefined));\n      break;\n\n    case 'llm_call': {\n      const u = n.usage || {};\n      const strip = el('div', 'stats');\n      strip.appendChild(stat('model', n.model));\n      strip.appendChild(stat('in', u.inputTokens || 0));\n      strip.appendChild(stat('cached', u.cachedInputTokens || 0));\n      strip.appendChild(stat('out', u.outputTokens || 0));\n      if (u.reasoningTokens) strip.appendChild(stat('reasoning', u.reasoningTokens));\n      strip.appendChild(stat('stop', n.stopReason || '?'));\n      out.appendChild(strip);\n\n      const req = group('Request', 'req', 'sent to ' + n.model);\n      if (n.request) requestBlocks(blob(n.request), req.body);\n      else {\n        req.body.appendChild(el('div', 'empty',\n          'not recorded \u2014 construct the runner with { recordRequests: true } to capture it'));\n      }\n      out.appendChild(req.el);\n\n      const res = group('Response', 'res', n.stopReason);\n      if (n.thinking) res.body.appendChild(textBlock('Reasoning', blob(n.thinking)));\n      res.body.appendChild(textBlock('Text', blob(n.text)));\n      n.toolCalls.forEach(function (c) {\n        res.body.appendChild(textBlock('Tool call \u00B7 ' + c.name, pretty(blob(c.args)), c.callId));\n      });\n      out.appendChild(res.el);\n\n      out.appendChild(textBlock('Request digest', n.requestDigest || '(not recorded)'));\n      break;\n    }\n\n    case 'tool_call':\n      out.appendChild(textBlock('Arguments', pretty(blob(n.args)), n.name + ' \u00B7 ' + n.callId));\n      break;\n\n    case 'tool_result':\n      out.appendChild(textBlock(n.isError ? 'Error result' : 'Result',\n        pretty(blob(n.result)),\n        n.name + (n.durationMs !== undefined ? ' \u00B7 ' + n.durationMs + 'ms' : '')));\n      break;\n\n    case 'handoff':\n      out.appendChild(textBlock('Handoff', n.from + '  ->  ' + n.to\n        + (n.reason ? '\\n\\nreason: ' + n.reason : '')));\n      break;\n\n    case 'fork':\n      n.branches.forEach(function (b) {\n        out.appendChild(textBlock('Branch \u00B7 ' + b.name, blob(b.instructions),\n          b.agent + ' \u00B7 ' + n.contextMode + ' \u00B7 ' + b.childRunId));\n      });\n      break;\n\n    case 'join':\n      n.branches.forEach(function (b, i) {\n        const br = e.children[i];\n        const bd = br ? took(br) : '';\n        out.appendChild(textBlock('Branch \u00B7 ' + b.name,\n          b.status === 'ok' ? blob(b.output) : (b.error || blob(b.output)),\n          b.status + ' \u00B7 ' + b.agent + ' \u00B7 ' + b.nodes.length + ' nodes'\n            + (bd ? ' \u00B7 ' + bd : '') + ' \u00B7 ' + usageTag(b.usage)));\n      });\n      break;\n\n    case 'compaction': {\n      out.appendChild(textBlock('Summary', blob(n.summary), n.reason));\n      const cov = block('Replaces', n.covers.length + ' nodes');\n      const line = el('div', 'empty', '');\n      line.textContent = '';\n      n.covers.forEach(function (id) {\n        const hit = ENTRIES.find(function (x) { return x.node.id === id; });\n        const b = el('button', 'link', hit ? label(hit.node) : id);\n        if (hit) b.addEventListener('click', function () { select(hit.key, true); });\n        line.appendChild(b);\n      });\n      cov.appendChild(line);\n      out.appendChild(cov);\n      out.appendChild(textBlock('Summarizer usage', usageTag(n.usage)));\n      break;\n    }\n\n    case 'final_output':\n      out.appendChild(textBlock('Output', blob(n.output)));\n      if (n.parsed !== undefined) out.appendChild(textBlock('Parsed', JSON.stringify(n.parsed, null, 2)));\n      break;\n  }\n\n  out.appendChild(foldBlock('Raw node', JSON.stringify(n, null, 2)));\n  return out;\n}\n\nconst detailEl = document.getElementById('detail');\nconst statsEl = document.getElementById('stats');\nlet selected = null;\n\nfunction select(key, focus) {\n  const e = BY_KEY.get(key);\n  if (!e) return;\n  selected = key;\n  detailEl.replaceChildren(detailFor(e));\n  Array.prototype.forEach.call(listEl.children, function (li) {\n    li.classList.toggle('sel', li.dataset.key === key);\n  });\n  const li = listEl.querySelector('li[data-key=\"' + key + '\"]');\n  if (li) li.scrollIntoView({ block: 'nearest' });\n  if (focus) show('detail');\n  detailEl.scrollTop = 0;\n}\n\n// --- stats ----------------------------------------------------------------\n//\n// Tokens are not fungible across models and seconds are not fungible across\n// lanes: a thousand tokens cost a different amount on a different model, and\n// branch time runs in parallel with other branch time. So every number here\n// is broken down by model and by agent, and the wall clock sits next to the\n// sums so the gap between them is visible instead of misleading.\n\nfunction bucket() {\n  return { calls: 0, errors: 0, ms: 0, in: 0, cached: 0, out: 0, reasoning: 0 };\n}\n\nfunction bucketOf(map, key) {\n  if (!map.has(key)) map.set(key, bucket());\n  return map.get(key);\n}\n\nfunction addUsage(into, u) {\n  if (!u) return;\n  into.in += u.inputTokens || 0;\n  into.cached += u.cachedInputTokens || 0;\n  into.out += u.outputTokens || 0;\n  into.reasoning += u.reasoningTokens || 0;\n}\n\nfunction num(n) { return n.toLocaleString('en-US'); }\n\nfunction table(cols, rows, foot) {\n  const t = el('table', 'st');\n  const head = document.createElement('thead');\n  const hr = document.createElement('tr');\n  cols.forEach(function (c) { hr.appendChild(el('th', null, c)); });\n  head.appendChild(hr);\n  t.appendChild(head);\n  const body = document.createElement('tbody');\n  rows.forEach(function (r) {\n    const tr = document.createElement('tr');\n    r.forEach(function (v) { tr.appendChild(el('td', null, v)); });\n    body.appendChild(tr);\n  });\n  t.appendChild(body);\n  if (foot) {\n    const tf = document.createElement('tfoot');\n    const fr = document.createElement('tr');\n    foot.forEach(function (v) { fr.appendChild(el('td', null, v)); });\n    tf.appendChild(fr);\n    t.appendChild(tf);\n  }\n  return t;\n}\n\nconst TOKEN_COLS = ['calls', 'in', 'cached', 'out', 'reasoning', 'time', 'avg'];\n\nfunction tokenRow(name, b) {\n  return [name, num(b.calls), num(b.in), num(b.cached), num(b.out), num(b.reasoning),\n    fmtDur(b.ms), b.calls ? fmtDur(b.ms / b.calls) : '\u2014'];\n}\n\nfunction byTokens(a, b) { return (b[1].in + b[1].out) - (a[1].in + a[1].out); }\n\nfunction buildStats() {\n  const byModel = new Map(), byAgent = new Map(), byTool = new Map(), byType = new Map();\n  const all = bucket();\n  let llmMs = 0, toolMs = 0, toolCalls = 0, from = null, to = null;\n\n  ENTRIES.forEach(function (e) {\n    const n = e.node;\n    byType.set(n.type, (byType.get(n.type) || 0) + 1);\n    if (e.startMs !== null && (from === null || e.startMs < from)) from = e.startMs;\n    if (e.endMs !== null && (to === null || e.endMs > to)) to = e.endMs;\n\n    // A join's usage is the sum of its branches, whose nodes are already in\n    // this list, so counting it too would double every branch token. A\n    // compaction has no model of its own but did burn a summarizer.\n    if (n.type === 'llm_call' || n.type === 'compaction') {\n      const ms = spanMs(e);\n      const model = n.type === 'compaction' ? 'summarizer' : n.model;\n      [bucketOf(byModel, model), bucketOf(byAgent, n.agent), all].forEach(function (b) {\n        addUsage(b, n.usage);\n        b.calls += 1;\n        b.ms += ms;\n      });\n      llmMs += ms;\n      return;\n    }\n    // The tool's own measurement when the runner took one; the gap to the\n    // previous node otherwise.\n    if (n.type === 'tool_result') {\n      const b = bucketOf(byTool, n.name);\n      const ms = n.durationMs !== undefined ? n.durationMs : spanMs(e);\n      b.calls += 1;\n      b.ms += ms;\n      if (n.isError) b.errors += 1;\n      toolCalls += 1;\n      toolMs += ms;\n    }\n  });\n\n  const pills = el('div', 'stats');\n  pills.appendChild(stat('wall clock', from === null ? '\u2014' : fmtDur(to - from)));\n  pills.appendChild(stat('in llm', fmtDur(llmMs)));\n  pills.appendChild(stat('in tools', fmtDur(toolMs)));\n  pills.appendChild(stat('llm calls', num(all.calls)));\n  pills.appendChild(stat('tool calls', num(toolCalls)));\n  pills.appendChild(stat('tokens', num(all.in) + ' in / ' + num(all.out) + ' out'));\n  pills.appendChild(stat('cached', num(all.cached)));\n  pills.appendChild(stat('nodes', num(ENTRIES.length)));\n  statsEl.replaceChildren(pills);\n\n  const note = el('div', 'hint', 'Branches run in parallel, so llm and tool time are sums '\n    + 'over every lane and add up to more than the wall clock.');\n  note.style.marginBottom = '14px';\n  statsEl.appendChild(note);\n\n  const models = Array.from(byModel.entries()).sort(byTokens);\n  const modelBlock = block('Tokens by model', models.length + (models.length === 1 ? ' model' : ' models'));\n  modelBlock.appendChild(table(['model'].concat(TOKEN_COLS),\n    models.map(function (m) { return tokenRow(m[0], m[1]); }), tokenRow('total', all)));\n  statsEl.appendChild(modelBlock);\n\n  const agents = Array.from(byAgent.entries()).sort(byTokens);\n  const agentBlock = block('Tokens by agent', agents.length + (agents.length === 1 ? ' agent' : ' agents'));\n  agentBlock.appendChild(table(['agent'].concat(TOKEN_COLS),\n    agents.map(function (a) { return tokenRow(a[0], a[1]); }), tokenRow('total', all)));\n  statsEl.appendChild(agentBlock);\n\n  const tools = Array.from(byTool.entries()).sort(function (a, b) { return b[1].ms - a[1].ms; });\n  const toolBlock = block('Tool calls', num(toolCalls) + ' calls \u00B7 ' + fmtDur(toolMs));\n  if (tools.length) {\n    toolBlock.appendChild(table(['tool', 'calls', 'errors', 'time', 'avg'],\n      tools.map(function (t) {\n        const b = t[1];\n        return [t[0], num(b.calls), b.errors ? num(b.errors) : '', fmtDur(b.ms),\n          b.calls ? fmtDur(b.ms / b.calls) : '\u2014'];\n      })));\n  } else {\n    toolBlock.appendChild(el('div', 'empty', '(none)'));\n  }\n  statsEl.appendChild(toolBlock);\n\n  const types = Array.from(byType.entries()).sort(function (a, b) { return b[1] - a[1]; });\n  const typeBlock = block('Nodes by type', num(ENTRIES.length) + ' nodes');\n  typeBlock.appendChild(table(['type', 'count'],\n    types.map(function (t) { return [t[0].replace(/_/g, ' '), num(t[1])]; })));\n  statsEl.appendChild(typeBlock);\n}\n\n// --- views ----------------------------------------------------------------\n\n// Panes that hold a zoomable diagram, by view name. A pane laid out while it\n// was hidden has no width to fit against, so becoming visible is the moment it\n// gets a second chance.\nconst PANES = {};\n\nfunction show(view) {\n  document.getElementById('graph').hidden = view !== 'graph';\n  document.getElementById('agents').hidden = view !== 'agents';\n  document.getElementById('memory').hidden = view !== 'memory';\n  detailEl.hidden = view !== 'detail';\n  statsEl.hidden = view !== 'stats';\n  Array.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {\n    b.classList.toggle('on', b.dataset.view === view);\n  });\n  // The memory graph is the one view that costs a render nobody asked for, so\n  // it waits until somebody asks.\n  if (view === 'memory' && !memDrawn) { memDrawn = true; drawMemory(); }\n  if (PANES[view]) PANES[view].refit();\n}\nArray.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {\n  b.addEventListener('click', function () { show(b.dataset.view); });\n});\n\n// --- zoom and pan ---------------------------------------------------------\n//\n// A diagram grows with what it describes, so a fixed scale is useless past a\n// dozen nodes. The canvas is moved with a CSS transform rather than scrolled:\n// that keeps zooming anchored on the pointer and costs no layout.\n//\n// Written as a factory because there are two of these \u2014 the run graph and the\n// architecture \u2014 and they must not share a scale, a pan or a drag.\n\nconst MIN_ZOOM = 0.1;\nconst MAX_ZOOM = 4;\n\nfunction panZoom(paneId) {\n  const pane = document.getElementById(paneId);\n  const viewportEl = pane.querySelector('.viewport');\n  const canvasEl = pane.querySelector('.canvas');\n  const zoomEl = pane.querySelector('.lvl');\n  let zoom = 1, panX = 0, panY = 0;\n  let natW = 0, natH = 0;\n  let pendingFit = false;\n\n  function applyView() {\n    canvasEl.style.transform = 'translate(' + panX + 'px,' + panY + 'px) scale(' + zoom + ')';\n    zoomEl.textContent = Math.round(zoom * 100) + '%';\n  }\n\n  function zoomAt(factor, cx, cy) {\n    const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom * factor));\n    const ratio = next / zoom;\n    // Keep the point under the cursor fixed while the scale changes.\n    panX = cx - (cx - panX) * ratio;\n    panY = cy - (cy - panY) * ratio;\n    zoom = next;\n    applyView();\n  }\n\n  function zoomCenter(factor) {\n    const r = viewportEl.getBoundingClientRect();\n    zoomAt(factor, r.width / 2, r.height / 2);\n  }\n\n  function fit() {\n    const r = viewportEl.getBoundingClientRect();\n    if (!r.width || !natW || !natH) { pendingFit = true; return; }\n    pendingFit = false;\n    zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM,\n      Math.min((r.width - 32) / natW, (r.height - 32) / natH)));\n    panX = (r.width - natW * zoom) / 2;\n    panY = Math.max(16, (r.height - natH * zoom) / 2);\n    applyView();\n  }\n\n  pane.querySelector('.gtools').addEventListener('click', function (ev) {\n    const what = ev.target.dataset ? ev.target.dataset.zoom : null;\n    if (what === 'in') zoomCenter(1.25);\n    else if (what === 'out') zoomCenter(1 / 1.25);\n    else if (what === 'fit') fit();\n    else if (what === 'reset') { zoom = 1; panX = 16; panY = 16; applyView(); }\n  });\n\n  viewportEl.addEventListener('wheel', function (ev) {\n    ev.preventDefault();\n    const r = viewportEl.getBoundingClientRect();\n    zoomAt(Math.exp(-ev.deltaY * 0.002), ev.clientX - r.left, ev.clientY - r.top);\n  }, { passive: false });\n\n  let dragging = false, dragMoved = false, startX = 0, startY = 0, baseX = 0, baseY = 0;\n\n  viewportEl.addEventListener('pointerdown', function (ev) {\n    if (ev.button !== 0) return;\n    dragging = true; dragMoved = false;\n    startX = ev.clientX; startY = ev.clientY; baseX = panX; baseY = panY;\n  });\n  viewportEl.addEventListener('pointermove', function (ev) {\n    if (!dragging) return;\n    const dx = ev.clientX - startX, dy = ev.clientY - startY;\n    if (!dragMoved) {\n      if (Math.abs(dx) + Math.abs(dy) <= 4) return;\n      dragMoved = true;\n      // Captured only once this is a drag: capturing on pointerdown would\n      // retarget the following click to the viewport and no node would ever\n      // receive it.\n      viewportEl.setPointerCapture(ev.pointerId);\n      viewportEl.classList.add('drag');\n    }\n    panX = baseX + dx; panY = baseY + dy;\n    applyView();\n  });\n  function endDrag(ev) {\n    if (!dragging) return;\n    dragging = false;\n    viewportEl.classList.remove('drag');\n    if (viewportEl.hasPointerCapture(ev.pointerId)) viewportEl.releasePointerCapture(ev.pointerId);\n  }\n  viewportEl.addEventListener('pointerup', endDrag);\n  viewportEl.addEventListener('pointercancel', endDrag);\n  viewportEl.addEventListener('dblclick', function () { fit(); });\n  window.addEventListener('resize', function () { if (pendingFit) fit(); });\n\n  return {\n    canvas: canvasEl,\n    setNatural: function (w, h) { natW = w; natH = h; fit(); },\n    refit: function () { if (pendingFit) fit(); },\n    // A pan that ends on a node must not be read as a click on it.\n    moved: function () { return dragMoved; }\n  };\n}\n\nPANES.graph = panZoom('graph');\nPANES.agents = panZoom('agents');\nPANES.memory = panZoom('memory');\n\n// --- diagram --------------------------------------------------------------\n\nconst CLASSES = {\n  llm_call: 'llm', tool_call: 'tool', tool_result: 'tool', compaction: 'comp',\n  fork: 'fork', join: 'fork', final_output: 'final', handoff: 'hand'\n};\n\n// A failed call is the one thing in a trace people look for, so it is coloured\n// by outcome rather than by type \u2014 the same red the sidebar badge uses.\nfunction nodeClass(n) {\n  if (n.type === 'tool_result' && n.isError) return 'err';\n  return CLASSES[n.type];\n}\n\n// Diagram labels are built from node types and identifiers only, and are\n// stripped to a conservative character set: nothing a model wrote can reach\n// the Mermaid parser, let alone the SVG.\nfunction safe(text) {\n  return String(text).replace(/[^\\w .:\\-\\/>+=()]/g, ' ').slice(0, 60).trim();\n}\n\nfunction shape(e, i) {\n  const n = e.node;\n  // The timing is ours, not the run's: digits and a unit, appended after\n  // sanitizing. It stays on one line because Mermaid's strict mode drops the\n  // <br/> that would break it.\n  const d = took(e);\n  const text = '\"' + (i + 1) + '. ' + safe(label(n))\n    + '   t+' + startedAt(e) + (d ? ' \u00B7 ' + d : '') + '\"';\n  if (n.type === 'fork' || n.type === 'join') return e.key + '{{' + text + '}}';\n  if (n.type === 'final_output') return e.key + '([' + text + '])';\n  if (n.type === 'user_input' || n.type === 'system_prompt') return e.key + '[/' + text + '/]';\n  return e.key + '[' + text + ']';\n}\n\nfunction chain(level, lines) {\n  let prev = null;\n  level.forEach(function (e) {\n    const i = ENTRIES.indexOf(e);\n    lines.push('  ' + shape(e, i));\n    const cls = nodeClass(e.node);\n    if (cls) lines.push('  class ' + e.key + ' ' + cls + ';');\n    if (e.covered) lines.push('  class ' + e.key + ' covered;');\n    if (prev) lines.push('  ' + prev.key + ' --> ' + e.key);\n\n    if (e.node.type === 'join' && e.children.length) {\n      // A branch hangs off the fork that opened it and rejoins at the join.\n      const fork = level.find(function (x) {\n        return x.node.type === 'fork' && x.node.callId === e.node.callId;\n      });\n      e.children.forEach(function (br, bi) {\n        if (!br.entries.length) return;\n        const bd = took(br);\n        const sg = 'sg_' + e.key + '_' + bi;\n        lines.push('  subgraph ' + sg + '[\"' + safe(br.name)\n          + '   t+' + startedAt(br) + (bd ? ' \u00B7 ' + bd : '')\n          + (br.slowest ? ' \u00B7 slowest' : '') + '\"]');\n        lines.push('  direction TB');\n        chain(br.entries, lines);\n        lines.push('  end');\n        // The one branch the join actually waited for, lifted out of the pack.\n        if (br.slowest) lines.push('  style ' + sg + ' fill:#5b6070,stroke:#a9b2c6,color:#f2f4f8;');\n        if (fork) lines.push('  ' + fork.key + ' -.-> ' + br.entries[0].key);\n        lines.push('  ' + br.entries[br.entries.length - 1].key + ' -.-> ' + e.key);\n      });\n    }\n    prev = e;\n  });\n}\n\nfunction diagram() {\n  const lines = ['flowchart TD'];\n  lines.push('  classDef llm fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef tool fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef comp fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef fork fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef final fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef hand fill:#3d2a1b,stroke:#7a5535,color:#f2d9c2;');\n  lines.push('  classDef err fill:#4a1f1c,stroke:#8a3a33,color:#f0776c;');\n  lines.push('  classDef covered opacity:0.45,stroke-dasharray:4 3;');\n  chain(ROOT, lines);\n  return lines.join('\\n');\n}\n\n// Mermaid refuses a diagram past either of these (defaults 500 edges and\n// 50000 characters, which a long run passes easily) and the pane then shows\n// only its error. Both are \"secure\" options, so initialize() is the one place\n// they can be raised from. The report is a file on disk, not a live page \u2014\n// a slow render beats a refused one.\nconst MAX_EDGES = 20000;\nconst MAX_TEXT_SIZE = 5000000;\n\n// One Mermaid, two diagrams. Loading it is the only network the page does, so\n// it happens once and both panes wait on the same promise.\nlet mermaidLib = null;\nfunction mermaid() {\n  if (!mermaidLib) {\n    mermaidLib = import(MERMAID_URL).then(function (m) {\n      m.default.initialize({\n        startOnLoad: false, theme: 'dark', securityLevel: 'strict',\n        maxEdges: MAX_EDGES, maxTextSize: MAX_TEXT_SIZE,\n        flowchart: { htmlLabels: false }\n      });\n      return m.default;\n    });\n  }\n  return mermaidLib;\n}\n\n/** Renders one diagram into a pane and wires its nodes. False when it failed. */\nasync function draw(pane, id, source, onNode) {\n  let lib;\n  try {\n    lib = await mermaid();\n  } catch (err) {\n    pane.canvas.replaceChildren(el('div', 'hint pad',\n      'Mermaid could not be loaded (offline?). The timeline on the left has the same nodes.'));\n    return false;\n  }\n  try {\n    const rendered = await lib.render(id, source);\n    // Mermaid produced this markup from labels we sanitized above; no payload\n    // text reaches it.\n    pane.canvas.innerHTML = rendered.svg;\n  } catch (err) {\n    pane.canvas.replaceChildren(el('pre', null, 'diagram failed: ' + err.message + '\\n\\n' + source));\n    return false;\n  }\n  const svg = pane.canvas.querySelector('svg');\n  if (svg) {\n    // Mermaid sizes the SVG to fit its container; we want its natural size so\n    // the transform above is the only thing deciding scale.\n    const box = svg.viewBox && svg.viewBox.baseVal;\n    const w = (box && box.width) || svg.getBoundingClientRect().width;\n    const h = (box && box.height) || svg.getBoundingClientRect().height;\n    svg.removeAttribute('width');\n    svg.removeAttribute('height');\n    svg.style.maxWidth = 'none';\n    svg.style.width = w + 'px';\n    svg.style.height = h + 'px';\n    pane.setNatural(w, h);\n  }\n  pane.canvas.querySelectorAll('.node').forEach(onNode);\n  return true;\n}\n\nasync function drawGraph() {\n  const ok = await draw(PANES.graph, 'run-graph', diagram(), function (g) {\n    // Mermaid ids are '<renderId>-flowchart-<ourKey>-<seq>'; only the key matters.\n    const m = /-(n\\d+)-\\d+$/.exec(g.id || '');\n    const key = m ? m[1] : null;\n    if (!key || !BY_KEY.has(key)) return;\n    g.addEventListener('click', function () { if (!PANES.graph.moved()) select(key, true); });\n  });\n  if (!ok) show('detail');\n}\n\n// --- architecture ---------------------------------------------------------\n//\n// The run graph answers \"what happened\". This one answers \"what was wired up\",\n// which is the question a trajectory structurally cannot: the agent nobody\n// handed off to and the tool nobody called leave no node behind. The declared\n// wiring arrives with the report when a runner was there to describe itself;\n// otherwise the run is read backwards into the same shape, which is smaller\n// but never wrong.\n\nconst SEP = '::';\n\nfunction bump(map, key, entryKey) {\n  const cur = map.get(key);\n  if (cur) { cur.count += 1; return; }\n  map.set(key, { count: 1, key: entryKey });\n}\n\n// What this run actually exercised, keyed the same way the diagram names\n// things \u2014 so drawing \"used\" is a lookup rather than a search.\nconst USED = {\n  agents: new Map(), models: new Map(), tools: new Map(),\n  skills: new Map(), handoffs: new Map(), memory: new Map(), forks: new Map()\n};\n\nENTRIES.forEach(function (e) {\n  const n = e.node;\n  bump(USED.agents, n.agent, e.key);\n  if (n.type === 'llm_call') {\n    if (!USED.models.has(n.agent)) USED.models.set(n.agent, n.model);\n  } else if (n.type === 'tool_call') {\n    bump(USED.tools, n.agent + SEP + n.name, e.key);\n  } else if (n.type === 'load_skills') {\n    n.skills.forEach(function (s) { bump(USED.skills, n.agent + SEP + s.name, e.key); });\n  } else if (n.type === 'handoff') {\n    bump(USED.handoffs, n.from + SEP + n.to, e.key);\n  } else if (n.type === 'memory_recall' || n.type === 'memory_op') {\n    bump(USED.memory, n.agent, e.key);\n  } else if (n.type === 'fork') {\n    n.branches.forEach(function (b) { bump(USED.forks, n.agent + SEP + b.agent, e.key); });\n  }\n});\n\nfunction has(list, name) {\n  return list.some(function (x) { return x.name === name; });\n}\n\n/** The run read backwards into the same shape. Used when none was supplied. */\nfunction observedArchitecture() {\n  const byName = new Map();\n  function agentOf(name) {\n    if (!byName.has(name)) {\n      byName.set(name, { name: name, tools: [], handoffs: [] });\n    }\n    return byName.get(name);\n  }\n  ENTRIES.forEach(function (e) {\n    const n = e.node;\n    const a = agentOf(n.agent);\n    if (n.type === 'llm_call') {\n      if (!a.model) a.model = n.model;\n    } else if (n.type === 'tool_call') {\n      // Handoff tools are drawn as edges between agents, never as tool nodes.\n      const handoff = n.name.indexOf('transfer_to_') === 0;\n      if (!handoff && !has(a.tools, n.name)) a.tools.push({ name: n.name });\n    } else if (n.type === 'load_skills') {\n      if (!a.skills) a.skills = { provider: n.provider, discovery: 'index', catalog: [] };\n      n.skills.forEach(function (s) {\n        if (has(a.skills.catalog, s.name)) return;\n        // The unlocked tools are recorded per activation, not per skill, so\n        // they can only be attributed when one skill loaded on its own.\n        a.skills.catalog.push({\n          name: s.name, version: s.version,\n          toolNames: n.skills.length === 1 ? n.toolNames : undefined\n        });\n      });\n    } else if (n.type === 'handoff') {\n      const from = agentOf(n.from);\n      agentOf(n.to);\n      if (from.handoffs.indexOf(n.to) < 0) from.handoffs.push(n.to);\n    } else if (n.type === 'memory_recall' || n.type === 'memory_op') {\n      // A run shows that an agent reached the memory, never how wide its mask\n      // was: nothing it did not read leaves a trace to read the mask off.\n      if (!a.memory) a.memory = { access: 'read', sees: [], writes: [] };\n      if (n.type === 'memory_op' && n.op !== 'load') a.memory.access = 'read-write';\n    } else if (n.type === 'fork') {\n      if (!a.fork) a.fork = { agents: [] };\n      n.branches.forEach(function (b) {\n        agentOf(b.agent);\n        if (a.fork.agents.indexOf(b.agent) < 0) a.fork.agents.push(b.agent);\n      });\n    }\n  });\n  return { source: 'observed', agents: Array.from(byName.values()) };\n}\n\nconst ARCH = DATA.architecture || observedArchitecture();\n\n// Diagram key -> the first trajectory node that exercised the thing it names,\n// or null when nothing did. Clicking is only offered for the former.\nconst ARCH_KEYS = new Map();\nlet archSeq = 0;\nfunction archKey(used) {\n  const k = 'x' + archSeq++;\n  ARCH_KEYS.set(k, used ? used.key : null);\n  return k;\n}\n\n/** An agent with more tools than this gets a \"+N more\" node instead of a wall. */\nconst MAX_TOOLS = 12;\n\nfunction times(used) {\n  return used ? ' x' + used.count : '';\n}\n\nfunction archDiagram() {\n  const lines = ['flowchart LR'];\n  lines.push('  classDef agent fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef start fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef tool fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef skill fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef mem fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef more fill:#1b202c,stroke:#39415a,color:#8a92a6;');\n  lines.push('  classDef idle opacity:0.4,stroke-dasharray:4 3;');\n\n  const startAgent = (STATE.spec && STATE.spec.startAgent) || STATE.agentName;\n  const selfKey = new Map();\n  // Minted up front so a hand-off can name an agent declared further down.\n  ARCH.agents.forEach(function (a) {\n    selfKey.set(a.name, archKey(USED.agents.get(a.name)));\n  });\n\n  ARCH.agents.forEach(function (a) {\n    const self = selfKey.get(a.name);\n    const live = USED.agents.get(a.name);\n    // The model on the node is the declared one, or \u2014 when the report carries\n    // no wiring \u2014 whatever this run was seen using.\n    const model = a.model || USED.models.get(a.name);\n    lines.push('  subgraph sg_' + self + '[\"' + safe(a.name)\n      + (a.description ? ' - ' + safe(a.description) : '') + '\"]');\n    lines.push('  direction LR');\n    lines.push('  ' + self + '[[\"' + safe(a.name)\n      + (model ? '   ' + safe(model) + (a.inheritedModel ? ' (inherited)' : '') : '')\n      + '\"]]');\n    lines.push('  class ' + self + ' ' + (a.name === startAgent ? 'start' : 'agent') + ';');\n    if (!live) lines.push('  class ' + self + ' idle;');\n\n    // Skills first: a skill owns tools, so its node has to exist before the\n    // tools it unlocks can point back at it.\n    const skillKey = new Map();\n    const catalog = (a.skills && a.skills.catalog) || [];\n    catalog.forEach(function (s) {\n      const used = USED.skills.get(a.name + SEP + s.name);\n      const k = archKey(used);\n      skillKey.set(s.name, k);\n      lines.push('  ' + k + '([\"' + safe(s.name) + (s.preload ? ' (preloaded)' : '')\n        + times(used) + '\"])');\n      lines.push('  class ' + k + ' skill;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    });\n    if (a.skills && a.skills.unresolved) {\n      const k = archKey(null);\n      lines.push('  ' + k + '([\"catalog unavailable: ' + safe(a.skills.provider) + '\"])');\n      lines.push('  class ' + k + ' skill;');\n      lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n\n    const shown = a.tools.slice(0, MAX_TOOLS);\n    shown.forEach(function (t) {\n      const used = USED.tools.get(a.name + SEP + t.name);\n      const k = archKey(used);\n      lines.push('  ' + k + '[\"' + safe(t.name) + times(used) + '\"]');\n      lines.push('  class ' + k + ' tool;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      // A skill-owned tool hangs off the skill that unlocks it, not off the\n      // agent: that edge is the whole point of a locked tool.\n      const owner = t.skill ? skillKey.get(t.skill) : null;\n      if (owner) lines.push('  ' + owner + ' -.-> ' + k);\n      else lines.push('  ' + self + ' --- ' + k);\n    });\n    if (a.tools.length > shown.length) {\n      const k = archKey(null);\n      lines.push('  ' + k + '[\"+' + (a.tools.length - shown.length) + ' more tools\"]');\n      lines.push('  class ' + k + ' more;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n\n    if (a.memory) {\n      const used = USED.memory.get(a.name);\n      const k = archKey(used);\n      const sees = Array.isArray(a.memory.sees) ? a.memory.sees : [a.memory.sees];\n      lines.push('  ' + k + '[(\"memory ' + (a.memory.access === 'read' ? '(ro)' : '(rw)')\n        + ' sees ' + safe(sees.join(' ') || '*') + '\")]');\n      lines.push('  class ' + k + ' mem;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n    lines.push('  end');\n    // Mermaid's default subgraph is a light box, which on a dark page reads as\n    // the foreground rather than as the container. An agent nobody entered is\n    // outlined rather than filled, so a dead corner of the wiring is visible\n    // from across the diagram.\n    lines.push('  style sg_' + self + ' fill:#12151d,color:#8a92a6,stroke:'\n      + (live ? '#39415a;' : '#2b3346,stroke-dasharray:5 4;'));\n  });\n\n  // Edges between agents live outside every subgraph, so Mermaid routes them\n  // between the boxes instead of trying to keep them inside one.\n  ARCH.agents.forEach(function (a) {\n    const self = selfKey.get(a.name);\n    a.handoffs.forEach(function (to) {\n      if (!selfKey.has(to)) return;\n      const used = USED.handoffs.get(a.name + SEP + to);\n      lines.push('  ' + self + (used ? ' -- \"handoff' + times(used) + '\" --> ' : ' -.-> ')\n        + selfKey.get(to));\n    });\n    ((a.fork && a.fork.agents) || []).forEach(function (to) {\n      if (!selfKey.has(to) || to === a.name) return;\n      const used = USED.forks.get(a.name + SEP + to);\n      lines.push('  ' + self + ' == \"fork' + times(used) + '\" ==> ' + selfKey.get(to));\n    });\n  });\n  return lines.join('\\n');\n}\n\nfunction archLegend() {\n  const agents = ARCH.agents.length;\n  const tools = ARCH.agents.reduce(function (n, a) { return n + a.tools.length; }, 0);\n  const skills = ARCH.agents.reduce(function (n, a) {\n    return n + ((a.skills && a.skills.catalog.length) || 0);\n  }, 0);\n  const idle = ARCH.agents.filter(function (a) { return !USED.agents.has(a.name); }).length;\n  return (ARCH.source === 'declared' ? 'declared' : 'observed only')\n    + ' \\u00b7 ' + agents + ' agents \\u00b7 ' + tools + ' tools \\u00b7 ' + skills + ' skills'\n    + (idle ? ' \\u00b7 ' + idle + ' idle' : '')\n    + ' \\u00b7 dimmed = unused \\u00b7 click to jump';\n}\n\nasync function drawArch() {\n  document.getElementById('alegend').textContent = archLegend();\n  if (!ARCH.agents.length) {\n    PANES.agents.canvas.replaceChildren(el('div', 'hint pad', 'No agents to draw.'));\n    return;\n  }\n  await draw(PANES.agents, 'arch-graph', archDiagram(), function (g) {\n    const m = /-(x\\d+)-\\d+$/.exec(g.id || '');\n    const key = m && ARCH_KEYS.get(m[1]);\n    if (!key) return;\n    g.addEventListener('click', function () { if (!PANES.agents.moved()) select(key, true); });\n  });\n}\n\n// --- memory ---------------------------------------------------------------\n//\n// Two questions in one picture: what the run took out of the memory, and what\n// it put back. The trajectory records ids, kinds and edges but no bodies, so\n// the text comes from the graph as the report was built \u2014 which is later than\n// the run, and the panel says so where it matters: a node can have moved on a\n// revision since, or be gone from the memory entirely.\n\nconst MEM = new Map();\nconst MEM_EDGES = [];\nconst MEM_EDGE_SEEN = new Set();\n\nfunction memOf(m) {\n  let x = MEM.get(m.id);\n  if (!x) {\n    x = { id: m.id, kind: m.kind, read: false, added: false, gone: false, full: false,\n      seed: false, score: null, revision: null, where: [] };\n    MEM.set(m.id, x);\n  }\n  return x;\n}\n\n// The same edge comes back with every recall that crossed it; drawing it once\n// is the difference between a graph and a bundle of parallel arrows.\nfunction memEdge(e) {\n  const k = e.source + '|' + e.relation + '|' + e.target;\n  if (MEM_EDGE_SEEN.has(k)) return;\n  MEM_EDGE_SEEN.add(k);\n  MEM_EDGES.push(e);\n}\n\nENTRIES.forEach(function (entry) {\n  const n = entry.node;\n  if (n.type !== 'memory_recall' && n.type !== 'memory_op') return;\n  n.nodes.forEach(function (m) {\n    const x = memOf(m);\n    if (x.where.indexOf(entry.key) < 0) x.where.push(entry.key);\n    if (n.type === 'memory_recall') {\n      x.read = true;\n      if (n.seeds.indexOf(m.id) >= 0) {\n        x.seed = true;\n        if (x.score === null || m.score > x.score) x.score = m.score;\n      }\n      return;\n    }\n    x.revision = m.revision;\n    if (n.op === 'commit') x.added = true;\n    else if (n.op === 'forget') x.gone = true;\n    else x.full = true;\n  });\n  (n.edges || []).forEach(memEdge);\n});\n\nconst MEM_SNAP = new Map();\n((DATA.memory && DATA.memory.nodes) || []).forEach(function (n) { MEM_SNAP.set(n.id, n); });\n// The graph knows joins the run never travelled \u2014 the edge between a task it\n// read and the artifact it then wrote is exactly the one worth seeing.\n((DATA.memory && DATA.memory.edges) || []).forEach(memEdge);\n\nconst MEM_ADJ = new Map();\nfunction memLink(id, other, rel, out) {\n  if (!MEM_ADJ.has(id)) MEM_ADJ.set(id, []);\n  MEM_ADJ.get(id).push({ other: other, rel: rel, out: out });\n}\nMEM_EDGES.forEach(function (e) {\n  memLink(e.source, e.target, e.relation, true);\n  memLink(e.target, e.source, e.relation, false);\n});\n\n// --- the memory diagram ---------------------------------------------------\n\nconst MEM_MAX = 300;\nconst MEM_SHAPES = { file: ['[/', '/]'], plan: ['{{', '}}'], operation: ['([', '])'] };\nconst MEM_PAINTED = new Set(\n  ['task', 'plan', 'fact', 'snippet', 'file', 'operation', 'preference']);\nconst MEM_KEY = new Map();\nconst MEM_ID = new Map();\n\nfunction shortId(id) {\n  return id.length > 12 ? id.slice(0, 4) + '\\u2026' + id.slice(-4) : id;\n}\n\nfunction clipText(text, n) {\n  const flat = String(text === undefined || text === null ? '' : text).replace(/\\s+/g, ' ').trim();\n  return flat.length > n ? flat.slice(0, n - 1) + '...' : flat;\n}\n\n/**\n * Text as at most 'max' lines of roughly 'width' characters. Mermaid will not\n * break a label, so a node is otherwise as wide as its sentence and the graph\n * is unreadable at any zoom that fits.\n */\nfunction memWrap(text, width, max) {\n  const words = String(text === undefined || text === null ? '' : text)\n    .replace(/\\s+/g, ' ').trim().split(' ');\n  const out = [];\n  let cur = '';\n  let i = 0;\n  for (; i < words.length; i++) {\n    const w = words[i].length > width ? words[i].slice(0, width - 1) + '...' : words[i];\n    if (!w) continue;\n    if (!cur) cur = w;\n    else if (cur.length + 1 + w.length <= width) cur += ' ' + w;\n    else if (out.length + 1 < max) { out.push(cur); cur = w; }\n    else break;\n  }\n  if (cur) out.push(cur);\n  const last = out.length - 1;\n  if (i < words.length && last >= 0 && out[last].slice(-3) !== '...') out[last] += '...';\n  return out;\n}\n\n// Built from a closed-vocabulary kind, an id and a clip of text put through the\n// same sanitizer the run graph uses: nothing a model wrote reaches Mermaid.\n// Shaped like the memory page's labels \u2014 what it is on the first line, what it\n// says underneath \u2014 because run together there is no telling the three apart.\nfunction memLabel(x) {\n  const snap = MEM_SNAP.get(x.id);\n  const head = safe(x.kind || 'node') + ' \\u00b7 ' + shortId(safe(x.id));\n  // Drawing the stored text under a node the model never opened would read as\n  // context it had.\n  if (memSaw(x) === 'id') return [head, '(id only)'].join('<br/>');\n  return [head].concat(snap ? memWrap(snap.text, 28, 3).map(safe) : []).join('<br/>');\n}\n\n// How much of the node reached the model: a recall block carries one clipped\n// line each, memory_load returns whole bodies, and what the run wrote it wrote\n// in its own words. A node it only forgot was named by id and nothing more.\nfunction memSaw(x) {\n  if (x.full || x.added) return 'full';\n  if (x.read) return 'summary';\n  return 'id';\n}\n\nconst MEM_SAW = {\n  full: 'the whole text',\n  summary: 'a clipped line, in the recall block',\n  id: 'the id only \\u2014 never the content'\n};\n\n// Fill says what the node IS, outline says what the run DID with it. Painting\n// the fill by role instead made the whole graph one colour: nearly every node\n// in a run was read.\nfunction memRole(x, withAdded) {\n  if (x.gone) return 'gone';\n  if (x.added && withAdded) return 'added';\n  return x.seed ? 'seed' : '';\n}\n\n/** A node the run only wrote is not part of \"what it read\", so it waits. */\nfunction memShown(withAdded) {\n  const out = [];\n  MEM.forEach(function (x) {\n    if (!withAdded && x.added && !x.read && !x.gone) return;\n    out.push(x);\n  });\n  return out;\n}\n\nfunction memDiagram(shown, withAdded) {\n  const lines = ['flowchart LR'];\n  lines.push('  classDef task fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef plan fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef fact fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef snippet fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef file fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef operation fill:#3d2a1b,stroke:#7a5535,color:#f2d9c2;');\n  lines.push('  classDef preference fill:#3d1f2c,stroke:#7a3b56,color:#f5b8cd;');\n  // Defined last so the outline wins over the kind's own stroke.\n  lines.push('  classDef seed stroke:#6ea8fe,stroke-width:3px;');\n  lines.push('  classDef added stroke:#4ec9a0,stroke-width:3px;');\n  lines.push('  classDef gone stroke:#f0776c,stroke-width:2px,stroke-dasharray:4 3,opacity:0.6;');\n  MEM_KEY.clear();\n  MEM_ID.clear();\n  shown.forEach(function (x, i) {\n    const key = 'm' + i;\n    MEM_KEY.set(x.id, key);\n    MEM_ID.set(key, x.id);\n    const shape = MEM_SHAPES[x.kind] || ['(', ')'];\n    lines.push('  ' + key + shape[0] + '\"' + memLabel(x) + '\"' + shape[1]);\n    // Kinds are configurable, so naming a class that was never defined would\n    // fail the whole render.\n    if (MEM_PAINTED.has(x.kind)) lines.push('  class ' + key + ' ' + x.kind + ';');\n    const role = memRole(x, withAdded);\n    if (role) lines.push('  class ' + key + ' ' + role + ';');\n  });\n  MEM_EDGES.forEach(function (e) {\n    const a = MEM_KEY.get(e.source), b = MEM_KEY.get(e.target);\n    if (a && b) lines.push('  ' + a + ' -->|' + safe(e.relation.toLowerCase()) + '| ' + b);\n  });\n  return lines.join('\\n');\n}\n\n// The two counts that have an outline colour in the graph wear it here too.\nfunction memLegend(drawn) {\n  let read = 0, added = 0, gone = 0;\n  MEM.forEach(function (x) {\n    if (x.read) read++;\n    if (x.added) added++;\n    if (x.gone) gone++;\n  });\n  const dot = ' \\u00b7 ';\n  const out = [el('span', null, read + ' read'), document.createTextNode(dot),\n    el('span', 'ok', added + ' written'), document.createTextNode(dot),\n    el('span', 'bad', gone + ' forgotten')];\n  if (drawn < MEM.size) out.push(document.createTextNode(dot + drawn + ' drawn'));\n  if (!DATA.memory) out.push(document.createTextNode(dot + 'no memory attached: ids only'));\n  return out;\n}\n\nconst memAddedEl = document.getElementById('madded');\nconst mdetailEl = document.getElementById('mdetail');\nconst memTab = document.querySelector('#viewtabs button[data-view=\"memory\"]');\nlet memDrawn = false;\nlet memSeq = 0;\nlet memSel = null;\n\nif (MEM.size) memTab.hidden = false;\nmemAddedEl.addEventListener('change', function () { drawMemory(); });\n\nfunction memKeyOf(g) {\n  const m = /-(m\\d+)-\\d+$/.exec(g.id || '');\n  return m ? m[1] : null;\n}\n\nfunction memMark() {\n  const key = memSel === null ? null : MEM_KEY.get(memSel);\n  PANES.memory.canvas.querySelectorAll('.node').forEach(function (g) {\n    g.classList.toggle('picked', Boolean(key) && memKeyOf(g) === key);\n  });\n}\n\nasync function drawMemory() {\n  const withAdded = memAddedEl.checked;\n  const shown = memShown(withAdded).slice(0, MEM_MAX);\n  const count = document.getElementById('mcount');\n  count.replaceChildren.apply(count, memLegend(shown.length));\n  if (!shown.length) {\n    PANES.memory.canvas.replaceChildren(el('div', 'hint pad',\n      'This run neither read nor wrote memory.'));\n    return;\n  }\n  // A fresh render id each time: the checkbox redraws this pane, and Mermaid\n  // keeps the element it was given.\n  await draw(PANES.memory, 'mem-graph-' + (++memSeq), memDiagram(shown, withAdded), function (g) {\n    const id = MEM_ID.get(memKeyOf(g));\n    if (!id) return;\n    g.addEventListener('click', function () { if (!PANES.memory.moved()) memSelect(id); });\n  });\n  memMark();\n}\n\n// --- the memory panel -----------------------------------------------------\n\nfunction memProp(dl, key, value) {\n  if (value === undefined || value === null || value === '') return;\n  dl.appendChild(el('dt', null, key));\n  dl.appendChild(el('dd', null, value));\n}\n\nconst MEM_EXCUSE = {\n  'too-big': 'too big to inline \\u2014 read it from the memory directory',\n  binary: 'binary, so there is nothing to show',\n  missing: 'the graph records this file but it is not on disk',\n  unreadable: 'on disk but could not be read'\n};\n\nfunction memSelect(id) {\n  memSel = id;\n  mdetailEl.replaceChildren(memDetail(id));\n  mdetailEl.scrollTop = 0;\n  memMark();\n}\n\nfunction memDetail(id) {\n  const x = MEM.get(id) || { id: id, kind: '', where: [], score: null, revision: null };\n  const snap = MEM_SNAP.get(id);\n  const out = document.createDocumentFragment();\n\n  const h = el('div', 'dt');\n  const kind = x.kind || (snap && snap.kind) || '';\n  h.appendChild(el('span', 'kind ' + kind, kind || 'node'));\n  if (x.read) h.appendChild(el('span', 'badge', 'read'));\n  if (x.full) h.appendChild(el('span', 'badge', 'loaded'));\n  if (x.added) h.appendChild(el('span', 'badge ok', 'written'));\n  if (x.gone) h.appendChild(el('span', 'badge bad', 'forgotten'));\n  if (snap && snap.stale) h.appendChild(el('span', 'badge', 'superseded'));\n  out.appendChild(h);\n\n  // The id is what you carry to 'zen memory show', so it is whole and takeable.\n  const idrow = el('div', 'idrow');\n  idrow.appendChild(el('code', null, id));\n  const copy = el('button', null, 'copy');\n  copy.addEventListener('click', function () {\n    navigator.clipboard.writeText(id).then(function () {\n      copy.textContent = 'copied';\n      setTimeout(function () { copy.textContent = 'copy'; }, 1200);\n    }, function () { copy.textContent = 'blocked'; });\n  });\n  idrow.appendChild(copy);\n  out.appendChild(idrow);\n\n  const props = el('dl', 'props');\n  memProp(props, 'model saw', MEM_SAW[memSaw(x)]);\n  if (x.score !== null) memProp(props, 'score', x.score.toFixed(3) + (x.seed ? '  match' : ''));\n  else if (x.read) memProp(props, 'reached', 'stitched in, not matched');\n  if (snap) {\n    memProp(props, 'audience', snap.audience.join(', ') || '\\u2014');\n    // The run's revision and the current one are the same number until\n    // something wrote this node again after the run.\n    memProp(props, 'revision', x.revision !== null && x.revision !== snap.revision\n      ? x.revision + ' then, ' + snap.revision + ' now' : String(snap.revision));\n    memProp(props, 'recalled', snap.useCount + 'x \\u00b7 last ' + snap.lastUsedAt);\n    memProp(props, 'created', snap.createdAt);\n    if (snap.updatedAt !== snap.createdAt) memProp(props, 'updated', snap.updatedAt);\n  } else if (x.revision !== null) {\n    memProp(props, 'revision', String(x.revision));\n  }\n  out.appendChild(props);\n\n  if (snap) {\n    out.appendChild(textBlock('Text', snap.text));\n    if (snap.metadata) {\n      out.appendChild(textBlock('Metadata', JSON.stringify(snap.metadata, null, 2)));\n    }\n    if (snap.file) out.appendChild(memFile(snap));\n  } else {\n    const s = block('Text', DATA.memory ? 'gone' : 'not attached');\n    s.appendChild(el('div', 'empty', DATA.memory\n      ? 'no longer in the memory graph \\u2014 the run recorded its id, kind and edges, not its text'\n      : 'this report carries no memory, so only what the run itself recorded is here'));\n    out.appendChild(s);\n  }\n\n  const links = MEM_ADJ.get(id) || [];\n  const ls = block('Links', String(links.length));\n  if (!links.length) {\n    ls.appendChild(el('div', 'empty', 'nothing points here and it points nowhere'));\n  } else {\n    const ul = el('ul', 'links');\n    // Outgoing first: PRODUCED read forwards is the story of the node.\n    links.slice().sort(function (a, b) { return (a.out ? 0 : 1) - (b.out ? 0 : 1); })\n      .forEach(function (l) {\n        const other = MEM_SNAP.get(l.other);\n        const li = el('li');\n        li.appendChild(el('span', 'rel', (l.out ? '\\u2192 ' : '\\u2190 ') + l.rel));\n        li.appendChild(el('span', 'kind ' + (other ? other.kind : ''), other ? other.kind : '?'));\n        const b = el('button', 'link',\n          (other && clipText(other.text, 60)) || shortId(l.other));\n        b.title = l.other;\n        b.addEventListener('click', function () { memSelect(l.other); });\n        li.appendChild(b);\n        ul.appendChild(li);\n      });\n    ls.appendChild(ul);\n  }\n  out.appendChild(ls);\n\n  // The way back to the trace: which turn reached for this, and what it did.\n  const ws = block('In this run', x.where.length + ' node(s)');\n  const line = el('div', 'empty', '');\n  x.where.forEach(function (key) {\n    const hit = BY_KEY.get(key);\n    if (!hit) return;\n    const b = el('button', 'link', label(hit.node));\n    b.addEventListener('click', function () { select(key, true); });\n    line.appendChild(b);\n  });\n  ws.appendChild(line);\n  out.appendChild(ws);\n  return out;\n}\n\nfunction memFile(snap) {\n  const tag = snap.file.path + ' \\u00b7 ' + snap.file.bytes + ' B';\n  const src = snap.image ? imageSrc({ type: 'image', url: snap.image }) : null;\n  if (src) {\n    const s = block('File', tag);\n    const img = el('img', 'media');\n    img.src = src;\n    img.alt = snap.file.path;\n    img.loading = 'lazy';\n    s.appendChild(img);\n    return s;\n  }\n  if (snap.content !== undefined && snap.content !== null) {\n    return textBlock('File', snap.content, tag);\n  }\n  const s = block('File', tag);\n  s.appendChild(el('div', 'empty', MEM_EXCUSE[snap.omitted] || 'not shown'));\n  return s;\n}\n\ndrawGraph().then(drawArch);\nbuildStats();\nif (ENTRIES.length) select('n0', false);\n";
+export declare const CLIENT = "\nconst DATA = JSON.parse(document.getElementById('run-data').textContent);\nconst STATE = DATA.state;\nconst BLOBS = DATA.blobs;\nconst MEDIA = DATA.media || [];\nconst CUT = new Set(DATA.truncated || []);\n\n// --- payload access -------------------------------------------------------\n\nfunction blob(ref) {\n  if (!ref || typeof ref.sha256 !== 'string') return '';\n  const v = BLOBS[ref.sha256];\n  if (v === undefined) return '[payload not resolved: ' + ref.sha256.slice(0, 12) + ']';\n  return CUT.has(ref.sha256) ? v + '\\n\\n[\u2026 truncated, ' + ref.size + ' bytes total]' : v;\n}\n\nfunction pretty(raw) {\n  try { return JSON.stringify(JSON.parse(raw), null, 2); } catch (e) { return raw; }\n}\n\n// --- flatten the trajectory ----------------------------------------------\n\nconst ENTRIES = [];\nconst BY_KEY = new Map();\n\nfunction covered(nodes) {\n  const out = new Set();\n  for (const n of nodes) if (n.type === 'compaction') for (const id of n.covers) out.add(id);\n  return out;\n}\n\nfunction flatten(nodes, depth, branch) {\n  const hidden = covered(nodes);\n  const level = [];\n  for (const node of nodes) {\n    const e = {\n      key: '', node: node, depth: depth, branch: branch,\n      covered: hidden.has(node.id), children: []\n    };\n    // A join's branches ran between the fork and the join, so they are\n    // numbered and listed there \u2014 which means recursing before this entry\n    // takes its own number.\n    if (node.type === 'join') {\n      for (const b of node.branches) e.children.push({ name: b.name, entries: flatten(b.nodes, depth + 1, b.name) });\n    }\n    e.key = 'n' + ENTRIES.length;\n    ENTRIES.push(e); BY_KEY.set(e.key, e); level.push(e);\n  }\n  return level;\n}\nconst ROOT = flatten(STATE.trajectory, 0, null);\n\n// --- labels ---------------------------------------------------------------\n\nfunction names(list) { return list.join(', '); }\n\n// The edges are what makes a recollection a subgraph rather than a hit list,\n// so they are shown even though the injected block already renders them.\nfunction edgeLines(edges) {\n  if (!edges || !edges.length) return '';\n  return '\\n\\n' + edges.map(function (e) {\n    return e.source + ' --' + e.relation + '--> ' + e.target;\n  }).join('\\n');\n}\n\nfunction base(path) { return path.split('/').pop() || path; }\n\nfunction label(n) {\n  switch (n.type) {\n    case 'user_input': return n.synthetic ? 'user input (synthetic)' : 'user input';\n    case 'system_prompt': return 'system prompt'\n      + (n.sources && n.sources.length ? ': ' + names(n.sources.map(function (s) { return base(s.path); })) : '');\n    case 'load_skills': return 'skills: ' + names(n.skills.map(function (s) { return s.name; }));\n    case 'memory_recall': return 'memory recall: ' + n.nodes.length + ' nodes';\n    case 'memory_op': return 'memory ' + n.op + ': ' + n.nodes.length + ' nodes';\n    case 'llm_call': return 'llm: ' + n.model + (n.toolCalls.length\n      ? ' -> ' + names(n.toolCalls.map(function (c) { return c.name; })) : '');\n    case 'tool_call': return 'call: ' + n.name;\n    case 'tool_result': return 'result: ' + n.name + (n.isError ? ' (error)' : '');\n    case 'handoff': return 'handoff: ' + n.from + ' -> ' + n.to;\n    case 'fork': return 'fork: ' + names(n.branches.map(function (b) { return b.name; }));\n    case 'join': return 'join: ' + names(n.branches.map(function (b) { return b.name + '=' + b.status; }));\n    case 'compaction': return 'compaction: ' + n.reason + ' (' + n.covers.length + ' nodes)';\n    case 'final_output': return 'final output';\n    default: return n.type;\n  }\n}\n\nfunction preview(n) {\n  switch (n.type) {\n    case 'user_input': {\n      const t = n.content.find(function (p) { return p.type === 'text'; });\n      return t ? blob(t.text) : '';\n    }\n    case 'system_prompt': return blob(n.prompt);\n    case 'llm_call': return blob(n.text);\n    case 'tool_call': return blob(n.args);\n    case 'tool_result': return blob(n.result);\n    case 'compaction': return blob(n.summary);\n    case 'final_output': return blob(n.output);\n    case 'memory_recall': return blob(n.content);\n    case 'load_skills': return blob(n.content);\n    default: return '';\n  }\n}\n\n// --- DOM helpers ----------------------------------------------------------\n\nfunction el(tag, cls, text) {\n  const e = document.createElement(tag);\n  if (cls) e.className = cls;\n  if (text !== undefined && text !== null) e.textContent = String(text);\n  return e;\n}\n\nfunction block(title, tag) {\n  const s = el('section', 'blk');\n  const h = el('h3', null, title);\n  if (tag) h.appendChild(el('span', 'tag', tag));\n  s.appendChild(h);\n  return s;\n}\n\nfunction textBlock(title, body, tag) {\n  const s = block(title, tag);\n  if (body) s.appendChild(el('pre', 'text', body));\n  else s.appendChild(el('div', 'empty', '(empty)'));\n  return s;\n}\n\n// A prompt is assembled from tagged sections \u2014 <house_rules src=\"...\">, <role>,\n// <skills> \u2014 and unhighlighted they read as one wall of text, so the reader\n// cannot see which file put which paragraph in front of the model. A section\n// delimiter always stands alone on its line, which is what keeps prose and\n// placeholders (/memory/<id>.<ext>) from lighting up as structure.\nconst TAG_LINE_RE = /^(\\s*)(<\\/?[A-Za-z][A-Za-z0-9._:-]*(?:\\s[^<>]*)?\\/?>)(\\s*)$/;\n\n/** A <pre> with every section delimiter lifted out as its own span. */\nfunction taggedPre(text) {\n  const s = String(text);\n  const pre = el('pre', 'text');\n  if (s.indexOf('<') < 0) { pre.textContent = s; return pre; }\n  const lines = s.split('\\n');\n  let buf = '';\n  function flush() {\n    if (buf) { pre.appendChild(document.createTextNode(buf)); buf = ''; }\n  }\n  for (let i = 0; i < lines.length; i++) {\n    const m = TAG_LINE_RE.exec(lines[i]);\n    if (!m) { buf += (i ? '\\n' : '') + lines[i]; continue; }\n    buf += (i ? '\\n' : '') + m[1];\n    flush();\n    pre.appendChild(el('span', m[2].indexOf('</') === 0 ? 'xtag end' : 'xtag', m[2]));\n    buf = m[3];\n  }\n  flush();\n  return pre;\n}\n\nfunction promptBlock(title, body, tag) {\n  const s = block(title, tag);\n  if (body) s.appendChild(taggedPre(body));\n  else s.appendChild(el('div', 'empty', '(empty)'));\n  return s;\n}\n\nfunction foldBlock(title, body) {\n  const s = block(title);\n  const d = document.createElement('details');\n  d.appendChild(el('summary', null, 'show'));\n  d.appendChild(el('pre', null, body));\n  s.appendChild(d);\n  return s;\n}\n\n// An <img> never runs script, but the src is still pinned to shapes we\n// understand: a raster data: uri (svg is excluded on principle) or an http url.\nconst IMG_SUBTYPES = ['png', 'jpeg', 'jpg', 'gif', 'webp', 'avif', 'bmp'];\n\n/** Undoes the report's media hoisting; anything else passes through. */\nfunction mediaUrl(u) {\n  if (typeof u !== 'string' || u.indexOf('media:') !== 0) return u;\n  const v = MEDIA[Number(u.slice(6))];\n  return v === undefined ? u : v;\n}\n\nfunction imageSrc(p) {\n  if (p.type !== 'image') return null;\n  const u = mediaUrl(p.url);\n  if (typeof u !== 'string') return null;\n  if (u.indexOf('https://') === 0 || u.indexOf('http://') === 0) return u;\n  if (u.indexOf('data:image/') !== 0) return null;\n  const sub = u.slice(11).split(/[;,]/)[0].toLowerCase();\n  return IMG_SUBTYPES.indexOf(sub) < 0 ? null : u;\n}\n\n/** The rendered picture, or null when the part is not one we will inline. */\nfunction imageEl(p, thumb) {\n  const src = imageSrc(p);\n  if (!src) return null;\n  const img = el('img', thumb ? 'media thumb' : 'media');\n  img.src = src;\n  img.alt = p.type + (p.mimeType ? ' ' + p.mimeType : '');\n  img.loading = 'lazy';\n  if (thumb) {\n    img.title = 'click to enlarge';\n    img.addEventListener('click', function () { img.classList.toggle('thumb'); });\n  }\n  return img;\n}\n\nfunction mediaBlock(title, p) {\n  const tag = p.type + (p.mimeType ? ' \u00B7 ' + p.mimeType : '');\n  const src = imageSrc(p);\n  const img = imageEl(p, false);\n  if (!img) return textBlock(title, mediaUrl(p.url), tag);\n  const s = block(title, tag);\n  s.appendChild(img);\n  // The bytes stay reachable; they just no longer own the screen.\n  const d = document.createElement('details');\n  d.appendChild(el('summary', null, 'source'));\n  d.appendChild(el('pre', null, src));\n  s.appendChild(d);\n  return s;\n}\n\n// A titled container for several blocks. Returns the element to append and the\n// body to fill, so callers never have to know the internal structure.\nfunction group(title, kind, tag) {\n  const s = el('section', 'group ' + kind);\n  const h = el('div', 'ghdr', title);\n  if (tag) h.appendChild(el('span', 'tag', tag));\n  s.appendChild(h);\n  const body = el('div', 'body');\n  s.appendChild(body);\n  return { el: s, body: body };\n}\n\nfunction stat(key, value) {\n  const d = el('span', 'stat', key + ' ');\n  d.appendChild(el('b', null, value));\n  return d;\n}\n\n// --- header ---------------------------------------------------------------\n\nfunction kv(key, value) {\n  const d = el('div', 'kv');\n  d.appendChild(document.createTextNode(key + ' '));\n  d.appendChild(el('b', null, value));\n  return d;\n}\n\n(function head() {\n  const h = document.getElementById('head');\n  const u = STATE.usage || {};\n  const llm = ENTRIES.filter(function (e) { return e.node.type === 'llm_call'; }).length;\n  h.appendChild(el('h1', null, DATA.title));\n  h.appendChild(kv('run', STATE.runId));\n  h.appendChild(kv('agent', STATE.agentName));\n  h.appendChild(kv('phase', STATE.phase));\n  h.appendChild(kv('nodes', ENTRIES.length));\n  h.appendChild(kv('llm calls', llm));\n  h.appendChild(kv('tokens', (u.inputTokens || 0) + ' in / ' + (u.outputTokens || 0) + ' out'));\n  if (STATE.error) h.appendChild(kv('error', STATE.error));\n  h.appendChild(kv('generated', DATA.generatedAt));\n})();\n\n// --- timing ---------------------------------------------------------------\n//\n// A node is stamped when it is appended, which is when the work behind it\n// finished. So the interval between a node and the one before it in the same\n// lane *is* that work: an llm_call's interval is the model latency, a\n// tool_result's is the tool. That gives every node a start and a duration\n// without storing either.\n//\n// Offsets are counted from the start of the turn, not of the run: in a\n// follow-up the interesting question is \"how long did this answer take\", and\n// counting from a conversation that began an hour ago answers nothing. A trunk\n// user_input opens a new turn; a branch inherits the turn that forked it, so\n// ten branches starting at one offset still read as parallel.\n\nfunction stampOf(node) {\n  const t = Date.parse(node.ts);\n  return isNaN(t) ? null : t;\n}\n\n(function time(level, lanePrev, turnStart) {\n  let prev = lanePrev;\n  let t0 = turnStart;\n  level.forEach(function (e) {\n    const ts = stampOf(e.node);\n    // A real user turn resets the clock and starts at itself: the gap since\n    // the previous run is waiting, not work. Synthetic inputs (a branch seed,\n    // a re-injection) are not turns \u2014 same rule the kernel uses.\n    const opensTurn = !e.branch && e.node.type === 'user_input' && !e.node.synthetic;\n    if (opensTurn) t0 = ts;\n    e.turnStart = t0 === null ? ts : t0;\n    e.startMs = opensTurn || prev === null ? ts : prev;\n    e.endMs = ts;\n    // Branches run between the fork and the join, so they start where the\n    // trunk left off \u2014 and the join's own duration is the whole parallel\n    // section it waited on.\n    if (e.node.type === 'join') {\n      let slowest = null;\n      e.children.forEach(function (br) {\n        time(br.entries, prev, e.turnStart);\n        // The branch as a whole gets the same shape as a node \u2014 start, end,\n        // turn \u2014 so a reader sees how long *it* ran instead of having to\n        // subtract two offsets to find out that ten branches were parallel.\n        const last = br.entries[br.entries.length - 1];\n        br.turnStart = e.turnStart;\n        br.startMs = prev;\n        br.endMs = last ? last.endMs : prev;\n        if (br.entries.length) br.entries[0].branchSpan = br;\n        // The join costs exactly its slowest branch, so that branch is the\n        // only one worth optimizing: it gets marked and rendered lighter.\n        if (br.entries.length && (!slowest || br.endMs > slowest.endMs)) slowest = br;\n      });\n      if (slowest) slowest.slowest = true;\n    }\n    prev = ts;\n  });\n})(ROOT, null, null);\n\nfunction fmtSecs(ms) {\n  const s = ms / 1000;\n  if (s < 100) return s.toFixed(1) + 's';\n  const m = Math.floor(s / 60);\n  return m + 'm' + String(Math.floor(s - m * 60)).padStart(2, '0');\n}\n\n/** Offset of a node's start from the beginning of its turn. */\nfunction startedAt(e) {\n  if (e.startMs === null || e.turnStart === null) return '';\n  return fmtSecs(e.startMs - e.turnStart);\n}\n\n/** How long the work behind a node took. Blank when it is not worth a number. */\nfunction took(e) {\n  if (e.startMs === null || e.endMs === null) return '';\n  const ms = e.endMs - e.startMs;\n  if (ms < 10) return '';\n  return fmtDur(ms);\n}\n\nfunction fmtDur(ms) {\n  return ms < 1000 ? Math.round(ms) + 'ms' : fmtSecs(ms);\n}\n\nfunction spanMs(e) {\n  return e.startMs === null || e.endMs === null ? 0 : e.endMs - e.startMs;\n}\n\n// One colour per branch, stable for the life of the page. The trunk keeps the\n// neutral accent so branches are the thing that stands out.\nconst PALETTE = ['#6ea8fe', '#4ec9a0', '#e2b341', '#d1a6ff', '#f0776c',\n  '#5fd0d8', '#f09a5c', '#a3d160', '#ef8ec0', '#9aa4ff'];\nconst BRANCH_COLOR = new Map();\nfunction branchColor(name) {\n  if (!name) return null;\n  if (!BRANCH_COLOR.has(name)) BRANCH_COLOR.set(name, PALETTE[BRANCH_COLOR.size % PALETTE.length]);\n  return BRANCH_COLOR.get(name);\n}\n\n// --- timeline -------------------------------------------------------------\n\nconst listEl = document.getElementById('timeline');\nlet lastBranch = false;\nlet lastStamp = null;\n\nENTRIES.forEach(function (e, i) {\n  // Branch histories are contiguous in the flattened order, so a change of\n  // branch is a group boundary: label it and restart the elapsed column.\n  if (e.branch !== lastBranch) {\n    const sep = el('li', 'sep');\n    const color = branchColor(e.branch);\n    if (color) sep.style.setProperty('--bc', color);\n    sep.appendChild(el('span', 'dot'));\n    sep.appendChild(el('span', null, e.branch ? 'branch \u00B7 ' + e.branch : 'trunk'));\n    if (e.branchSpan) {\n      const bd = took(e.branchSpan);\n      if (e.branchSpan.slowest) sep.classList.add('slow');\n      if (bd) {\n        sep.appendChild(el('span', 'dur',\n          't+' + startedAt(e.branchSpan) + ' \u00B7 ' + bd + (e.branchSpan.slowest ? ' \u00B7 slowest' : '')));\n      }\n    }\n    listEl.appendChild(sep);\n    lastBranch = e.branch;\n    lastStamp = null;\n  }\n\n  const li = el('li', e.branch ? 'branch' : '');\n  if (e.covered) li.classList.add('covered');\n  const color = branchColor(e.branch);\n  if (color) li.style.setProperty('--bc', color);\n  li.dataset.key = e.key;\n\n  const row = el('div', 'row');\n  // Consecutive nodes often start at the same instant (a tool call is recorded\n  // the moment the response carrying it is applied). Repeating the offset\n  // would only bury the moments where time actually moved.\n  const at = startedAt(e);\n  row.appendChild(el('span', 't' + (at === lastStamp ? ' same' : ''), at === lastStamp ? '\u00B7' : at));\n  lastStamp = at;\n  row.appendChild(el('span', 'idx', '#' + (i + 1)));\n  const badge = el('span', 'type ' + e.node.type\n    + (e.node.type === 'tool_result' && e.node.isError ? ' err' : ''), e.node.type.replace(/_/g, ' '));\n  row.appendChild(badge);\n  const d = took(e);\n  if (d) row.appendChild(el('span', 'dur', d));\n  li.appendChild(row);\n  li.appendChild(el('div', 'prev', label(e.node)\n    + (preview(e.node) ? ' \u2014 ' + preview(e.node).slice(0, 90) : '')));\n  li.addEventListener('click', function () { select(e.key, true); });\n  listEl.appendChild(li);\n});\n\n// A group header is only worth showing while something in its group is.\nfunction applyFilter(q) {\n  const rows = Array.prototype.slice.call(listEl.children);\n  rows.forEach(function (li) {\n    if (li.classList.contains('sep')) return;\n    const e = BY_KEY.get(li.dataset.key);\n    const hay = (label(e.node) + ' ' + e.node.type + ' ' + (e.branch || '')\n      + ' ' + preview(e.node)).toLowerCase();\n    li.hidden = q.length > 0 && hay.indexOf(q) === -1;\n  });\n  let sep = null, kept = false;\n  rows.forEach(function (li) {\n    if (li.classList.contains('sep')) {\n      if (sep) sep.hidden = !kept;\n      sep = li; kept = false;\n    } else if (!li.hidden) kept = true;\n  });\n  if (sep) sep.hidden = !kept;\n}\n\ndocument.getElementById('filter').addEventListener('input', function (ev) {\n  applyFilter(ev.target.value.toLowerCase());\n});\n\n// --- detail ---------------------------------------------------------------\n\nfunction message(m) {\n  const wrap = el('div', 'msg ' + m.role + (m.isError ? ' err' : ''));\n  const role = el('div', 'role');\n  role.appendChild(el('span', null, m.role + (m.agent ? ' \u00B7 ' + m.agent : '')\n    + (m.name ? ' \u00B7 ' + m.name : '')));\n  if (m.callId) role.appendChild(el('span', 'badge', m.callId));\n  wrap.appendChild(role);\n\n  if (m.role === 'user' && Array.isArray(m.content)) {\n    m.content.forEach(function (p) {\n      if (p.type === 'text') { wrap.appendChild(taggedPre(p.text)); return; }\n      const img = imageEl(p, true);\n      wrap.appendChild(img || el('pre', 'text', '[' + p.type + '] ' + mediaUrl(p.url)));\n    });\n  } else if (typeof m.content === 'string' && m.content) {\n    wrap.appendChild(m.role === 'tool'\n      ? el('pre', 'text', pretty(m.content))\n      : taggedPre(m.content));\n  } else if (!m.toolCalls) {\n    wrap.appendChild(el('div', 'empty', '(no content)'));\n  }\n\n  (m.toolCalls || []).forEach(function (c) {\n    const box = el('div', 'call');\n    box.appendChild(el('div', 'name', c.name + '(' + c.id + ')'));\n    box.appendChild(el('pre', null, pretty(c.args)));\n    wrap.appendChild(box);\n  });\n  return wrap;\n}\n\nfunction requestBlocks(raw, into) {\n  let req;\n  try { req = JSON.parse(raw); } catch (e) {\n    into.appendChild(textBlock('Request (unparsed)', raw));\n    return;\n  }\n  if (req.system) into.appendChild(promptBlock('System prompt', req.system)).classList.add('sys');\n\n  const conv = block('Messages', (req.messages || []).length + ' messages');\n  (req.messages || []).forEach(function (m) { conv.appendChild(message(m)); });\n  if (!(req.messages || []).length) conv.appendChild(el('div', 'empty', '(none)'));\n  into.appendChild(conv);\n\n  const tools = block('Tools offered', (req.tools || []).length + ' tools');\n  (req.tools || []).forEach(function (t) {\n    const d = document.createElement('details');\n    d.appendChild(el('summary', null, t.name + (t.description ? ' \u2014 ' + t.description : '')));\n    d.appendChild(el('pre', null, JSON.stringify(t.parameters, null, 2)));\n    tools.appendChild(d);\n  });\n  if (!(req.tools || []).length) tools.appendChild(el('div', 'empty', '(none)'));\n  into.appendChild(tools);\n}\n\nfunction usageTag(u) {\n  if (!u) return '';\n  return (u.inputTokens || 0) + ' in (' + (u.cachedInputTokens || 0) + ' cached) / '\n    + (u.outputTokens || 0) + ' out (' + (u.reasoningTokens || 0) + ' reasoning)';\n}\n\nfunction detailFor(e) {\n  const n = e.node;\n  const out = document.createDocumentFragment();\n\n  const h = el('h2', 'dt');\n  h.appendChild(el('span', 'type ' + n.type, n.type.replace(/_/g, ' ')));\n  h.appendChild(el('span', null, label(n)));\n  out.appendChild(h);\n\n  const meta = el('div', 'meta');\n  meta.appendChild(el('span', null, 'id ' + n.id));\n  meta.appendChild(el('span', null, 'agent ' + n.agent));\n  meta.appendChild(el('span', null, n.ts));\n  meta.appendChild(el('span', null, 'started t+' + startedAt(e) + (took(e) ? ' \u00B7 took ' + took(e) : '')));\n  if (e.branch) {\n    const br = el('span', null, 'branch ' + e.branch);\n    br.style.color = branchColor(e.branch);\n    meta.appendChild(br);\n  }\n  if (e.covered) meta.appendChild(el('span', null, 'hidden by a later compaction'));\n  out.appendChild(meta);\n\n  switch (n.type) {\n    case 'system_prompt':\n      out.appendChild(promptBlock('Prompt', blob(n.prompt)));\n      // The editable half: which file to open when the instruction is wrong.\n      (n.sources || []).forEach(function (s) {\n        out.appendChild(promptBlock(s.path, blob(s.content), 'prompt file'));\n      });\n      break;\n\n    case 'user_input':\n      n.content.forEach(function (p, i) {\n        out.appendChild(p.type === 'text'\n          ? textBlock('Text part ' + (i + 1), blob(p.text))\n          : mediaBlock('Media part ' + (i + 1), p));\n      });\n      break;\n\n    case 'load_skills':\n      out.appendChild(textBlock('Skills', n.skills.map(function (s) {\n        return s.name + (s.version ? '@' + s.version : '') + '  ' + s.contentHash.slice(0, 12)\n          + (s.file ? '  ' + s.file : '');\n      }).join('\\n'), n.provider));\n      out.appendChild(promptBlock('Injected instructions', blob(n.content)));\n      out.appendChild(textBlock('Tools unlocked', n.toolNames.join('\\n')));\n      break;\n\n    case 'memory_recall':\n      out.appendChild(textBlock('Query', JSON.stringify(n.query, null, 2),\n        n.seeds.length + ' seed(s)'));\n      out.appendChild(textBlock('Subgraph', n.nodes.map(function (m) {\n        return m.id + '  ' + m.kind\n          + (n.seeds.indexOf(m.id) >= 0 ? '  score=' + m.score.toFixed(3) : '  (stitched)');\n      }).join('\\n') + edgeLines(n.edges)));\n      out.appendChild(textBlock('Injected block', blob(n.content)));\n      break;\n\n    case 'memory_op':\n      out.appendChild(textBlock('Operation', n.nodes.map(function (m) {\n        return n.op + ' ' + m.id + '  ' + m.kind + '  rev ' + m.revision;\n      }).join('\\n') + edgeLines(n.edges),\n        n.files ? n.files + ' file(s)' : undefined));\n      break;\n\n    case 'llm_call': {\n      const u = n.usage || {};\n      const strip = el('div', 'stats');\n      strip.appendChild(stat('model', n.model));\n      strip.appendChild(stat('in', u.inputTokens || 0));\n      strip.appendChild(stat('cached', u.cachedInputTokens || 0));\n      strip.appendChild(stat('out', u.outputTokens || 0));\n      if (u.reasoningTokens) strip.appendChild(stat('reasoning', u.reasoningTokens));\n      strip.appendChild(stat('stop', n.stopReason || '?'));\n      out.appendChild(strip);\n\n      const req = group('Request', 'req', 'sent to ' + n.model);\n      if (n.request) requestBlocks(blob(n.request), req.body);\n      else {\n        req.body.appendChild(el('div', 'empty',\n          'not recorded \u2014 construct the runner with { recordRequests: true } to capture it'));\n      }\n      out.appendChild(req.el);\n\n      const res = group('Response', 'res', n.stopReason);\n      if (n.thinking) res.body.appendChild(textBlock('Reasoning', blob(n.thinking)));\n      res.body.appendChild(textBlock('Text', blob(n.text)));\n      n.toolCalls.forEach(function (c) {\n        res.body.appendChild(textBlock('Tool call \u00B7 ' + c.name, pretty(blob(c.args)), c.callId));\n      });\n      out.appendChild(res.el);\n\n      out.appendChild(textBlock('Request digest', n.requestDigest || '(not recorded)'));\n      break;\n    }\n\n    case 'tool_call':\n      out.appendChild(textBlock('Arguments', pretty(blob(n.args)), n.name + ' \u00B7 ' + n.callId));\n      break;\n\n    case 'tool_result':\n      out.appendChild(textBlock(n.isError ? 'Error result' : 'Result',\n        pretty(blob(n.result)),\n        n.name + (n.durationMs !== undefined ? ' \u00B7 ' + n.durationMs + 'ms' : '')));\n      break;\n\n    case 'handoff':\n      out.appendChild(textBlock('Handoff', n.from + '  ->  ' + n.to\n        + (n.reason ? '\\n\\nreason: ' + n.reason : '')));\n      break;\n\n    case 'fork':\n      n.branches.forEach(function (b) {\n        out.appendChild(textBlock('Branch \u00B7 ' + b.name, blob(b.instructions),\n          b.agent + ' \u00B7 ' + n.contextMode + ' \u00B7 ' + b.childRunId));\n      });\n      break;\n\n    case 'join':\n      n.branches.forEach(function (b, i) {\n        const br = e.children[i];\n        const bd = br ? took(br) : '';\n        out.appendChild(textBlock('Branch \u00B7 ' + b.name,\n          b.status === 'ok' ? blob(b.output) : (b.error || blob(b.output)),\n          b.status + ' \u00B7 ' + b.agent + ' \u00B7 ' + b.nodes.length + ' nodes'\n            + (bd ? ' \u00B7 ' + bd : '') + ' \u00B7 ' + usageTag(b.usage)));\n      });\n      break;\n\n    case 'compaction': {\n      out.appendChild(textBlock('Summary', blob(n.summary), n.reason));\n      const cov = block('Replaces', n.covers.length + ' nodes');\n      const line = el('div', 'empty', '');\n      line.textContent = '';\n      n.covers.forEach(function (id) {\n        const hit = ENTRIES.find(function (x) { return x.node.id === id; });\n        const b = el('button', 'link', hit ? label(hit.node) : id);\n        if (hit) b.addEventListener('click', function () { select(hit.key, true); });\n        line.appendChild(b);\n      });\n      cov.appendChild(line);\n      out.appendChild(cov);\n      out.appendChild(textBlock('Summarizer usage', usageTag(n.usage)));\n      break;\n    }\n\n    case 'final_output':\n      out.appendChild(textBlock('Output', blob(n.output)));\n      if (n.parsed !== undefined) out.appendChild(textBlock('Parsed', JSON.stringify(n.parsed, null, 2)));\n      break;\n  }\n\n  out.appendChild(foldBlock('Raw node', JSON.stringify(n, null, 2)));\n  return out;\n}\n\nconst detailEl = document.getElementById('detail');\nconst statsEl = document.getElementById('stats');\nlet selected = null;\n\nfunction select(key, focus) {\n  const e = BY_KEY.get(key);\n  if (!e) return;\n  selected = key;\n  detailEl.replaceChildren(detailFor(e));\n  Array.prototype.forEach.call(listEl.children, function (li) {\n    li.classList.toggle('sel', li.dataset.key === key);\n  });\n  const li = listEl.querySelector('li[data-key=\"' + key + '\"]');\n  if (li) li.scrollIntoView({ block: 'nearest' });\n  if (focus) show('detail');\n  detailEl.scrollTop = 0;\n}\n\n// --- stats ----------------------------------------------------------------\n//\n// Tokens are not fungible across models and seconds are not fungible across\n// lanes: a thousand tokens cost a different amount on a different model, and\n// branch time runs in parallel with other branch time. So every number here\n// is broken down by model and by agent, and the wall clock sits next to the\n// sums so the gap between them is visible instead of misleading.\n\nfunction bucket() {\n  return { calls: 0, errors: 0, ms: 0, in: 0, cached: 0, out: 0, reasoning: 0 };\n}\n\nfunction bucketOf(map, key) {\n  if (!map.has(key)) map.set(key, bucket());\n  return map.get(key);\n}\n\nfunction addUsage(into, u) {\n  if (!u) return;\n  into.in += u.inputTokens || 0;\n  into.cached += u.cachedInputTokens || 0;\n  into.out += u.outputTokens || 0;\n  into.reasoning += u.reasoningTokens || 0;\n}\n\nfunction num(n) { return n.toLocaleString('en-US'); }\n\nfunction table(cols, rows, foot) {\n  const t = el('table', 'st');\n  const head = document.createElement('thead');\n  const hr = document.createElement('tr');\n  cols.forEach(function (c) { hr.appendChild(el('th', null, c)); });\n  head.appendChild(hr);\n  t.appendChild(head);\n  const body = document.createElement('tbody');\n  rows.forEach(function (r) {\n    const tr = document.createElement('tr');\n    r.forEach(function (v) { tr.appendChild(el('td', null, v)); });\n    body.appendChild(tr);\n  });\n  t.appendChild(body);\n  if (foot) {\n    const tf = document.createElement('tfoot');\n    const fr = document.createElement('tr');\n    foot.forEach(function (v) { fr.appendChild(el('td', null, v)); });\n    tf.appendChild(fr);\n    t.appendChild(tf);\n  }\n  return t;\n}\n\nconst TOKEN_COLS = ['calls', 'in', 'cached', 'out', 'reasoning', 'time', 'avg'];\n\nfunction tokenRow(name, b) {\n  return [name, num(b.calls), num(b.in), num(b.cached), num(b.out), num(b.reasoning),\n    fmtDur(b.ms), b.calls ? fmtDur(b.ms / b.calls) : '\u2014'];\n}\n\nfunction byTokens(a, b) { return (b[1].in + b[1].out) - (a[1].in + a[1].out); }\n\nfunction buildStats() {\n  const byModel = new Map(), byAgent = new Map(), byTool = new Map(), byType = new Map();\n  const all = bucket();\n  let llmMs = 0, toolMs = 0, toolCalls = 0, from = null, to = null;\n\n  ENTRIES.forEach(function (e) {\n    const n = e.node;\n    byType.set(n.type, (byType.get(n.type) || 0) + 1);\n    if (e.startMs !== null && (from === null || e.startMs < from)) from = e.startMs;\n    if (e.endMs !== null && (to === null || e.endMs > to)) to = e.endMs;\n\n    // A join's usage is the sum of its branches, whose nodes are already in\n    // this list, so counting it too would double every branch token. A\n    // compaction has no model of its own but did burn a summarizer.\n    if (n.type === 'llm_call' || n.type === 'compaction') {\n      const ms = spanMs(e);\n      const model = n.type === 'compaction' ? 'summarizer' : n.model;\n      [bucketOf(byModel, model), bucketOf(byAgent, n.agent), all].forEach(function (b) {\n        addUsage(b, n.usage);\n        b.calls += 1;\n        b.ms += ms;\n      });\n      llmMs += ms;\n      return;\n    }\n    // The tool's own measurement when the runner took one; the gap to the\n    // previous node otherwise.\n    if (n.type === 'tool_result') {\n      const b = bucketOf(byTool, n.name);\n      const ms = n.durationMs !== undefined ? n.durationMs : spanMs(e);\n      b.calls += 1;\n      b.ms += ms;\n      if (n.isError) b.errors += 1;\n      toolCalls += 1;\n      toolMs += ms;\n    }\n  });\n\n  const pills = el('div', 'stats');\n  pills.appendChild(stat('wall clock', from === null ? '\u2014' : fmtDur(to - from)));\n  pills.appendChild(stat('in llm', fmtDur(llmMs)));\n  pills.appendChild(stat('in tools', fmtDur(toolMs)));\n  pills.appendChild(stat('llm calls', num(all.calls)));\n  pills.appendChild(stat('tool calls', num(toolCalls)));\n  pills.appendChild(stat('tokens', num(all.in) + ' in / ' + num(all.out) + ' out'));\n  pills.appendChild(stat('cached', num(all.cached)));\n  pills.appendChild(stat('nodes', num(ENTRIES.length)));\n  statsEl.replaceChildren(pills);\n\n  const note = el('div', 'hint', 'Branches run in parallel, so llm and tool time are sums '\n    + 'over every lane and add up to more than the wall clock.');\n  note.style.marginBottom = '14px';\n  statsEl.appendChild(note);\n\n  const models = Array.from(byModel.entries()).sort(byTokens);\n  const modelBlock = block('Tokens by model', models.length + (models.length === 1 ? ' model' : ' models'));\n  modelBlock.appendChild(table(['model'].concat(TOKEN_COLS),\n    models.map(function (m) { return tokenRow(m[0], m[1]); }), tokenRow('total', all)));\n  statsEl.appendChild(modelBlock);\n\n  const agents = Array.from(byAgent.entries()).sort(byTokens);\n  const agentBlock = block('Tokens by agent', agents.length + (agents.length === 1 ? ' agent' : ' agents'));\n  agentBlock.appendChild(table(['agent'].concat(TOKEN_COLS),\n    agents.map(function (a) { return tokenRow(a[0], a[1]); }), tokenRow('total', all)));\n  statsEl.appendChild(agentBlock);\n\n  const tools = Array.from(byTool.entries()).sort(function (a, b) { return b[1].ms - a[1].ms; });\n  const toolBlock = block('Tool calls', num(toolCalls) + ' calls \u00B7 ' + fmtDur(toolMs));\n  if (tools.length) {\n    toolBlock.appendChild(table(['tool', 'calls', 'errors', 'time', 'avg'],\n      tools.map(function (t) {\n        const b = t[1];\n        return [t[0], num(b.calls), b.errors ? num(b.errors) : '', fmtDur(b.ms),\n          b.calls ? fmtDur(b.ms / b.calls) : '\u2014'];\n      })));\n  } else {\n    toolBlock.appendChild(el('div', 'empty', '(none)'));\n  }\n  statsEl.appendChild(toolBlock);\n\n  const types = Array.from(byType.entries()).sort(function (a, b) { return b[1] - a[1]; });\n  const typeBlock = block('Nodes by type', num(ENTRIES.length) + ' nodes');\n  typeBlock.appendChild(table(['type', 'count'],\n    types.map(function (t) { return [t[0].replace(/_/g, ' '), num(t[1])]; })));\n  statsEl.appendChild(typeBlock);\n}\n\n// --- views ----------------------------------------------------------------\n\n// Panes that hold a zoomable diagram, by view name. A pane laid out while it\n// was hidden has no width to fit against, so becoming visible is the moment it\n// gets a second chance.\nconst PANES = {};\n\nfunction show(view) {\n  document.getElementById('graph').hidden = view !== 'graph';\n  document.getElementById('agents').hidden = view !== 'agents';\n  document.getElementById('memory').hidden = view !== 'memory';\n  detailEl.hidden = view !== 'detail';\n  statsEl.hidden = view !== 'stats';\n  Array.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {\n    b.classList.toggle('on', b.dataset.view === view);\n  });\n  // The memory graph is the one view that costs a render nobody asked for, so\n  // it waits until somebody asks.\n  if (view === 'memory' && !memDrawn) { memDrawn = true; drawMemory(); }\n  if (PANES[view]) PANES[view].refit();\n}\nArray.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {\n  b.addEventListener('click', function () { show(b.dataset.view); });\n});\n\n// --- zoom and pan ---------------------------------------------------------\n//\n// A diagram grows with what it describes, so a fixed scale is useless past a\n// dozen nodes. The canvas is moved with a CSS transform rather than scrolled:\n// that keeps zooming anchored on the pointer and costs no layout.\n//\n// Written as a factory because there are two of these \u2014 the run graph and the\n// architecture \u2014 and they must not share a scale, a pan or a drag.\n\nconst MIN_ZOOM = 0.1;\nconst MAX_ZOOM = 4;\n\nfunction panZoom(paneId) {\n  const pane = document.getElementById(paneId);\n  const viewportEl = pane.querySelector('.viewport');\n  const canvasEl = pane.querySelector('.canvas');\n  const zoomEl = pane.querySelector('.lvl');\n  let zoom = 1, panX = 0, panY = 0;\n  let natW = 0, natH = 0;\n  let pendingFit = false;\n\n  function applyView() {\n    canvasEl.style.transform = 'translate(' + panX + 'px,' + panY + 'px) scale(' + zoom + ')';\n    zoomEl.textContent = Math.round(zoom * 100) + '%';\n  }\n\n  function zoomAt(factor, cx, cy) {\n    const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom * factor));\n    const ratio = next / zoom;\n    // Keep the point under the cursor fixed while the scale changes.\n    panX = cx - (cx - panX) * ratio;\n    panY = cy - (cy - panY) * ratio;\n    zoom = next;\n    applyView();\n  }\n\n  function zoomCenter(factor) {\n    const r = viewportEl.getBoundingClientRect();\n    zoomAt(factor, r.width / 2, r.height / 2);\n  }\n\n  function fit() {\n    const r = viewportEl.getBoundingClientRect();\n    if (!r.width || !natW || !natH) { pendingFit = true; return; }\n    pendingFit = false;\n    zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM,\n      Math.min((r.width - 32) / natW, (r.height - 32) / natH)));\n    panX = (r.width - natW * zoom) / 2;\n    panY = Math.max(16, (r.height - natH * zoom) / 2);\n    applyView();\n  }\n\n  pane.querySelector('.gtools').addEventListener('click', function (ev) {\n    const what = ev.target.dataset ? ev.target.dataset.zoom : null;\n    if (what === 'in') zoomCenter(1.25);\n    else if (what === 'out') zoomCenter(1 / 1.25);\n    else if (what === 'fit') fit();\n    else if (what === 'reset') { zoom = 1; panX = 16; panY = 16; applyView(); }\n  });\n\n  viewportEl.addEventListener('wheel', function (ev) {\n    ev.preventDefault();\n    const r = viewportEl.getBoundingClientRect();\n    zoomAt(Math.exp(-ev.deltaY * 0.002), ev.clientX - r.left, ev.clientY - r.top);\n  }, { passive: false });\n\n  let dragging = false, dragMoved = false, startX = 0, startY = 0, baseX = 0, baseY = 0;\n\n  viewportEl.addEventListener('pointerdown', function (ev) {\n    if (ev.button !== 0) return;\n    dragging = true; dragMoved = false;\n    startX = ev.clientX; startY = ev.clientY; baseX = panX; baseY = panY;\n  });\n  viewportEl.addEventListener('pointermove', function (ev) {\n    if (!dragging) return;\n    const dx = ev.clientX - startX, dy = ev.clientY - startY;\n    if (!dragMoved) {\n      if (Math.abs(dx) + Math.abs(dy) <= 4) return;\n      dragMoved = true;\n      // Captured only once this is a drag: capturing on pointerdown would\n      // retarget the following click to the viewport and no node would ever\n      // receive it.\n      viewportEl.setPointerCapture(ev.pointerId);\n      viewportEl.classList.add('drag');\n    }\n    panX = baseX + dx; panY = baseY + dy;\n    applyView();\n  });\n  function endDrag(ev) {\n    if (!dragging) return;\n    dragging = false;\n    viewportEl.classList.remove('drag');\n    if (viewportEl.hasPointerCapture(ev.pointerId)) viewportEl.releasePointerCapture(ev.pointerId);\n  }\n  viewportEl.addEventListener('pointerup', endDrag);\n  viewportEl.addEventListener('pointercancel', endDrag);\n  viewportEl.addEventListener('dblclick', function () { fit(); });\n  window.addEventListener('resize', function () { if (pendingFit) fit(); });\n\n  return {\n    canvas: canvasEl,\n    setNatural: function (w, h) { natW = w; natH = h; fit(); },\n    refit: function () { if (pendingFit) fit(); },\n    // A pan that ends on a node must not be read as a click on it.\n    moved: function () { return dragMoved; }\n  };\n}\n\nPANES.graph = panZoom('graph');\nPANES.agents = panZoom('agents');\nPANES.memory = panZoom('memory');\n\n// --- diagram --------------------------------------------------------------\n\nconst CLASSES = {\n  llm_call: 'llm', tool_call: 'tool', tool_result: 'tool', compaction: 'comp',\n  fork: 'fork', join: 'fork', final_output: 'final', handoff: 'hand'\n};\n\n// A failed call is the one thing in a trace people look for, so it is coloured\n// by outcome rather than by type \u2014 the same red the sidebar badge uses.\nfunction nodeClass(n) {\n  if (n.type === 'tool_result' && n.isError) return 'err';\n  return CLASSES[n.type];\n}\n\n// Diagram labels are built from node types and identifiers only, and are\n// stripped to a conservative character set: nothing a model wrote can reach\n// the Mermaid parser, let alone the SVG.\nfunction safe(text) {\n  return String(text).replace(/[^\\w .:\\-\\/>+=()]/g, ' ').slice(0, 60).trim();\n}\n\nfunction shape(e, i) {\n  const n = e.node;\n  // The timing is ours, not the run's: digits and a unit, appended after\n  // sanitizing. It stays on one line because Mermaid's strict mode drops the\n  // <br/> that would break it.\n  const d = took(e);\n  const text = '\"' + (i + 1) + '. ' + safe(label(n))\n    + '   t+' + startedAt(e) + (d ? ' \u00B7 ' + d : '') + '\"';\n  if (n.type === 'fork' || n.type === 'join') return e.key + '{{' + text + '}}';\n  if (n.type === 'final_output') return e.key + '([' + text + '])';\n  if (n.type === 'user_input' || n.type === 'system_prompt') return e.key + '[/' + text + '/]';\n  return e.key + '[' + text + ']';\n}\n\nfunction chain(level, lines) {\n  let prev = null;\n  level.forEach(function (e) {\n    const i = ENTRIES.indexOf(e);\n    lines.push('  ' + shape(e, i));\n    const cls = nodeClass(e.node);\n    if (cls) lines.push('  class ' + e.key + ' ' + cls + ';');\n    if (e.covered) lines.push('  class ' + e.key + ' covered;');\n    if (prev) lines.push('  ' + prev.key + ' --> ' + e.key);\n\n    if (e.node.type === 'join' && e.children.length) {\n      // A branch hangs off the fork that opened it and rejoins at the join.\n      const fork = level.find(function (x) {\n        return x.node.type === 'fork' && x.node.callId === e.node.callId;\n      });\n      e.children.forEach(function (br, bi) {\n        if (!br.entries.length) return;\n        const bd = took(br);\n        const sg = 'sg_' + e.key + '_' + bi;\n        lines.push('  subgraph ' + sg + '[\"' + safe(br.name)\n          + '   t+' + startedAt(br) + (bd ? ' \u00B7 ' + bd : '')\n          + (br.slowest ? ' \u00B7 slowest' : '') + '\"]');\n        lines.push('  direction TB');\n        chain(br.entries, lines);\n        lines.push('  end');\n        // The one branch the join actually waited for, lifted out of the pack.\n        if (br.slowest) lines.push('  style ' + sg + ' fill:#5b6070,stroke:#a9b2c6,color:#f2f4f8;');\n        if (fork) lines.push('  ' + fork.key + ' -.-> ' + br.entries[0].key);\n        lines.push('  ' + br.entries[br.entries.length - 1].key + ' -.-> ' + e.key);\n      });\n    }\n    prev = e;\n  });\n}\n\nfunction diagram() {\n  const lines = ['flowchart TD'];\n  lines.push('  classDef llm fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef tool fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef comp fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef fork fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef final fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef hand fill:#3d2a1b,stroke:#7a5535,color:#f2d9c2;');\n  lines.push('  classDef err fill:#4a1f1c,stroke:#8a3a33,color:#f0776c;');\n  lines.push('  classDef covered opacity:0.45,stroke-dasharray:4 3;');\n  chain(ROOT, lines);\n  return lines.join('\\n');\n}\n\n// Mermaid refuses a diagram past either of these (defaults 500 edges and\n// 50000 characters, which a long run passes easily) and the pane then shows\n// only its error. Both are \"secure\" options, so initialize() is the one place\n// they can be raised from. The report is a file on disk, not a live page \u2014\n// a slow render beats a refused one.\nconst MAX_EDGES = 20000;\nconst MAX_TEXT_SIZE = 5000000;\n\n// One Mermaid, two diagrams. Loading it is the only network the page does, so\n// it happens once and both panes wait on the same promise.\nlet mermaidLib = null;\nfunction mermaid() {\n  if (!mermaidLib) {\n    mermaidLib = import(MERMAID_URL).then(function (m) {\n      m.default.initialize({\n        startOnLoad: false, theme: 'dark', securityLevel: 'strict',\n        maxEdges: MAX_EDGES, maxTextSize: MAX_TEXT_SIZE,\n        flowchart: { htmlLabels: false }\n      });\n      return m.default;\n    });\n  }\n  return mermaidLib;\n}\n\n/** Renders one diagram into a pane and wires its nodes. False when it failed. */\nasync function draw(pane, id, source, onNode) {\n  let lib;\n  try {\n    lib = await mermaid();\n  } catch (err) {\n    pane.canvas.replaceChildren(el('div', 'hint pad',\n      'Mermaid could not be loaded (offline?). The timeline on the left has the same nodes.'));\n    return false;\n  }\n  try {\n    const rendered = await lib.render(id, source);\n    // Mermaid produced this markup from labels we sanitized above; no payload\n    // text reaches it.\n    pane.canvas.innerHTML = rendered.svg;\n  } catch (err) {\n    pane.canvas.replaceChildren(el('pre', null, 'diagram failed: ' + err.message + '\\n\\n' + source));\n    return false;\n  }\n  const svg = pane.canvas.querySelector('svg');\n  if (svg) {\n    // Mermaid sizes the SVG to fit its container; we want its natural size so\n    // the transform above is the only thing deciding scale.\n    const box = svg.viewBox && svg.viewBox.baseVal;\n    const w = (box && box.width) || svg.getBoundingClientRect().width;\n    const h = (box && box.height) || svg.getBoundingClientRect().height;\n    svg.removeAttribute('width');\n    svg.removeAttribute('height');\n    svg.style.maxWidth = 'none';\n    svg.style.width = w + 'px';\n    svg.style.height = h + 'px';\n    pane.setNatural(w, h);\n  }\n  pane.canvas.querySelectorAll('.node').forEach(onNode);\n  return true;\n}\n\nasync function drawGraph() {\n  const ok = await draw(PANES.graph, 'run-graph', diagram(), function (g) {\n    // Mermaid ids are '<renderId>-flowchart-<ourKey>-<seq>'; only the key matters.\n    const m = /-(n\\d+)-\\d+$/.exec(g.id || '');\n    const key = m ? m[1] : null;\n    if (!key || !BY_KEY.has(key)) return;\n    g.addEventListener('click', function () { if (!PANES.graph.moved()) select(key, true); });\n  });\n  if (!ok) show('detail');\n}\n\n// --- architecture ---------------------------------------------------------\n//\n// The run graph answers \"what happened\". This one answers \"what was wired up\",\n// which is the question a trajectory structurally cannot: the agent nobody\n// handed off to and the tool nobody called leave no node behind. The declared\n// wiring arrives with the report when a runner was there to describe itself;\n// otherwise the run is read backwards into the same shape, which is smaller\n// but never wrong.\n\nconst SEP = '::';\n\nfunction bump(map, key, entryKey) {\n  const cur = map.get(key);\n  if (cur) { cur.count += 1; return; }\n  map.set(key, { count: 1, key: entryKey });\n}\n\n// What this run actually exercised, keyed the same way the diagram names\n// things \u2014 so drawing \"used\" is a lookup rather than a search.\nconst USED = {\n  agents: new Map(), models: new Map(), tools: new Map(),\n  skills: new Map(), handoffs: new Map(), memory: new Map(), forks: new Map()\n};\n\nENTRIES.forEach(function (e) {\n  const n = e.node;\n  bump(USED.agents, n.agent, e.key);\n  if (n.type === 'llm_call') {\n    if (!USED.models.has(n.agent)) USED.models.set(n.agent, n.model);\n  } else if (n.type === 'tool_call') {\n    bump(USED.tools, n.agent + SEP + n.name, e.key);\n  } else if (n.type === 'load_skills') {\n    n.skills.forEach(function (s) { bump(USED.skills, n.agent + SEP + s.name, e.key); });\n  } else if (n.type === 'handoff') {\n    bump(USED.handoffs, n.from + SEP + n.to, e.key);\n  } else if (n.type === 'memory_recall' || n.type === 'memory_op') {\n    bump(USED.memory, n.agent, e.key);\n  } else if (n.type === 'fork') {\n    n.branches.forEach(function (b) { bump(USED.forks, n.agent + SEP + b.agent, e.key); });\n  }\n});\n\nfunction has(list, name) {\n  return list.some(function (x) { return x.name === name; });\n}\n\n/** The run read backwards into the same shape. Used when none was supplied. */\nfunction observedArchitecture() {\n  const byName = new Map();\n  function agentOf(name) {\n    if (!byName.has(name)) {\n      byName.set(name, { name: name, tools: [], handoffs: [] });\n    }\n    return byName.get(name);\n  }\n  ENTRIES.forEach(function (e) {\n    const n = e.node;\n    const a = agentOf(n.agent);\n    if (n.type === 'llm_call') {\n      if (!a.model) a.model = n.model;\n    } else if (n.type === 'tool_call') {\n      // Handoff tools are drawn as edges between agents, never as tool nodes.\n      const handoff = n.name.indexOf('transfer_to_') === 0;\n      if (!handoff && !has(a.tools, n.name)) a.tools.push({ name: n.name });\n    } else if (n.type === 'load_skills') {\n      if (!a.skills) a.skills = { provider: n.provider, discovery: 'index', catalog: [] };\n      n.skills.forEach(function (s) {\n        if (has(a.skills.catalog, s.name)) return;\n        // The unlocked tools are recorded per activation, not per skill, so\n        // they can only be attributed when one skill loaded on its own.\n        a.skills.catalog.push({\n          name: s.name, version: s.version,\n          toolNames: n.skills.length === 1 ? n.toolNames : undefined\n        });\n      });\n    } else if (n.type === 'handoff') {\n      const from = agentOf(n.from);\n      agentOf(n.to);\n      if (from.handoffs.indexOf(n.to) < 0) from.handoffs.push(n.to);\n    } else if (n.type === 'memory_recall' || n.type === 'memory_op') {\n      // A run shows that an agent reached the memory, never how wide its mask\n      // was: nothing it did not read leaves a trace to read the mask off.\n      if (!a.memory) a.memory = { access: 'read', sees: [], writes: [] };\n      if (n.type === 'memory_op' && n.op !== 'load') a.memory.access = 'read-write';\n    } else if (n.type === 'fork') {\n      if (!a.fork) a.fork = { agents: [] };\n      n.branches.forEach(function (b) {\n        agentOf(b.agent);\n        if (a.fork.agents.indexOf(b.agent) < 0) a.fork.agents.push(b.agent);\n      });\n    }\n  });\n  return { source: 'observed', agents: Array.from(byName.values()) };\n}\n\nconst ARCH = DATA.architecture || observedArchitecture();\n\n// Diagram key -> the first trajectory node that exercised the thing it names,\n// or null when nothing did. Clicking is only offered for the former.\nconst ARCH_KEYS = new Map();\nlet archSeq = 0;\nfunction archKey(used) {\n  const k = 'x' + archSeq++;\n  ARCH_KEYS.set(k, used ? used.key : null);\n  return k;\n}\n\n/** An agent with more tools than this gets a \"+N more\" node instead of a wall. */\nconst MAX_TOOLS = 12;\n\nfunction times(used) {\n  return used ? ' x' + used.count : '';\n}\n\nfunction archDiagram() {\n  const lines = ['flowchart LR'];\n  lines.push('  classDef agent fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef start fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef tool fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef skill fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef mem fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef more fill:#1b202c,stroke:#39415a,color:#8a92a6;');\n  lines.push('  classDef idle opacity:0.4,stroke-dasharray:4 3;');\n\n  const startAgent = (STATE.spec && STATE.spec.startAgent) || STATE.agentName;\n  const selfKey = new Map();\n  // Minted up front so a hand-off can name an agent declared further down.\n  ARCH.agents.forEach(function (a) {\n    selfKey.set(a.name, archKey(USED.agents.get(a.name)));\n  });\n\n  ARCH.agents.forEach(function (a) {\n    const self = selfKey.get(a.name);\n    const live = USED.agents.get(a.name);\n    // The model on the node is the declared one, or \u2014 when the report carries\n    // no wiring \u2014 whatever this run was seen using.\n    const model = a.model || USED.models.get(a.name);\n    lines.push('  subgraph sg_' + self + '[\"' + safe(a.name)\n      + (a.description ? ' - ' + safe(a.description) : '') + '\"]');\n    lines.push('  direction LR');\n    lines.push('  ' + self + '[[\"' + safe(a.name)\n      + (model ? '   ' + safe(model) + (a.inheritedModel ? ' (inherited)' : '') : '')\n      + '\"]]');\n    lines.push('  class ' + self + ' ' + (a.name === startAgent ? 'start' : 'agent') + ';');\n    if (!live) lines.push('  class ' + self + ' idle;');\n\n    // Skills first: a skill owns tools, so its node has to exist before the\n    // tools it unlocks can point back at it.\n    const skillKey = new Map();\n    const catalog = (a.skills && a.skills.catalog) || [];\n    catalog.forEach(function (s) {\n      const used = USED.skills.get(a.name + SEP + s.name);\n      const k = archKey(used);\n      skillKey.set(s.name, k);\n      lines.push('  ' + k + '([\"' + safe(s.name) + (s.preload ? ' (preloaded)' : '')\n        + times(used) + '\"])');\n      lines.push('  class ' + k + ' skill;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    });\n    if (a.skills && a.skills.unresolved) {\n      const k = archKey(null);\n      lines.push('  ' + k + '([\"catalog unavailable: ' + safe(a.skills.provider) + '\"])');\n      lines.push('  class ' + k + ' skill;');\n      lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n\n    const shown = a.tools.slice(0, MAX_TOOLS);\n    shown.forEach(function (t) {\n      const used = USED.tools.get(a.name + SEP + t.name);\n      const k = archKey(used);\n      lines.push('  ' + k + '[\"' + safe(t.name) + times(used) + '\"]');\n      lines.push('  class ' + k + ' tool;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      // A skill-owned tool hangs off the skill that unlocks it, not off the\n      // agent: that edge is the whole point of a locked tool.\n      const owner = t.skill ? skillKey.get(t.skill) : null;\n      if (owner) lines.push('  ' + owner + ' -.-> ' + k);\n      else lines.push('  ' + self + ' --- ' + k);\n    });\n    if (a.tools.length > shown.length) {\n      const k = archKey(null);\n      lines.push('  ' + k + '[\"+' + (a.tools.length - shown.length) + ' more tools\"]');\n      lines.push('  class ' + k + ' more;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n\n    if (a.memory) {\n      const used = USED.memory.get(a.name);\n      const k = archKey(used);\n      const sees = Array.isArray(a.memory.sees) ? a.memory.sees : [a.memory.sees];\n      lines.push('  ' + k + '[(\"memory ' + (a.memory.access === 'read' ? '(ro)' : '(rw)')\n        + ' sees ' + safe(sees.join(' ') || '*') + '\")]');\n      lines.push('  class ' + k + ' mem;');\n      if (!used) lines.push('  class ' + k + ' idle;');\n      lines.push('  ' + self + ' --- ' + k);\n    }\n    lines.push('  end');\n    // Mermaid's default subgraph is a light box, which on a dark page reads as\n    // the foreground rather than as the container. An agent nobody entered is\n    // outlined rather than filled, so a dead corner of the wiring is visible\n    // from across the diagram.\n    lines.push('  style sg_' + self + ' fill:#12151d,color:#8a92a6,stroke:'\n      + (live ? '#39415a;' : '#2b3346,stroke-dasharray:5 4;'));\n  });\n\n  // Edges between agents live outside every subgraph, so Mermaid routes them\n  // between the boxes instead of trying to keep them inside one.\n  ARCH.agents.forEach(function (a) {\n    const self = selfKey.get(a.name);\n    a.handoffs.forEach(function (to) {\n      if (!selfKey.has(to)) return;\n      const used = USED.handoffs.get(a.name + SEP + to);\n      lines.push('  ' + self + (used ? ' -- \"handoff' + times(used) + '\" --> ' : ' -.-> ')\n        + selfKey.get(to));\n    });\n    ((a.fork && a.fork.agents) || []).forEach(function (to) {\n      if (!selfKey.has(to) || to === a.name) return;\n      const used = USED.forks.get(a.name + SEP + to);\n      lines.push('  ' + self + ' == \"fork' + times(used) + '\" ==> ' + selfKey.get(to));\n    });\n  });\n  return lines.join('\\n');\n}\n\nfunction archLegend() {\n  const agents = ARCH.agents.length;\n  const tools = ARCH.agents.reduce(function (n, a) { return n + a.tools.length; }, 0);\n  const skills = ARCH.agents.reduce(function (n, a) {\n    return n + ((a.skills && a.skills.catalog.length) || 0);\n  }, 0);\n  const idle = ARCH.agents.filter(function (a) { return !USED.agents.has(a.name); }).length;\n  return (ARCH.source === 'declared' ? 'declared' : 'observed only')\n    + ' \\u00b7 ' + agents + ' agents \\u00b7 ' + tools + ' tools \\u00b7 ' + skills + ' skills'\n    + (idle ? ' \\u00b7 ' + idle + ' idle' : '')\n    + ' \\u00b7 dimmed = unused \\u00b7 click to jump';\n}\n\nasync function drawArch() {\n  document.getElementById('alegend').textContent = archLegend();\n  if (!ARCH.agents.length) {\n    PANES.agents.canvas.replaceChildren(el('div', 'hint pad', 'No agents to draw.'));\n    return;\n  }\n  await draw(PANES.agents, 'arch-graph', archDiagram(), function (g) {\n    const m = /-(x\\d+)-\\d+$/.exec(g.id || '');\n    const key = m && ARCH_KEYS.get(m[1]);\n    if (!key) return;\n    g.addEventListener('click', function () { if (!PANES.agents.moved()) select(key, true); });\n  });\n}\n\n// --- memory ---------------------------------------------------------------\n//\n// Two questions in one picture: what the run took out of the memory, and what\n// it put back. The trajectory records ids, kinds and edges but no bodies, so\n// the text comes from the graph as the report was built \u2014 which is later than\n// the run, and the panel says so where it matters: a node can have moved on a\n// revision since, or be gone from the memory entirely.\n\nconst MEM = new Map();\nconst MEM_EDGES = [];\nconst MEM_EDGE_SEEN = new Set();\n\nfunction memOf(m) {\n  let x = MEM.get(m.id);\n  if (!x) {\n    x = { id: m.id, kind: m.kind, read: false, added: false, gone: false, full: false,\n      seed: false, score: null, revision: null, where: [] };\n    MEM.set(m.id, x);\n  }\n  return x;\n}\n\n// The same edge comes back with every recall that crossed it; drawing it once\n// is the difference between a graph and a bundle of parallel arrows.\nfunction memEdge(e) {\n  const k = e.source + '|' + e.relation + '|' + e.target;\n  if (MEM_EDGE_SEEN.has(k)) return;\n  MEM_EDGE_SEEN.add(k);\n  MEM_EDGES.push(e);\n}\n\nENTRIES.forEach(function (entry) {\n  const n = entry.node;\n  if (n.type !== 'memory_recall' && n.type !== 'memory_op') return;\n  n.nodes.forEach(function (m) {\n    const x = memOf(m);\n    if (x.where.indexOf(entry.key) < 0) x.where.push(entry.key);\n    if (n.type === 'memory_recall') {\n      x.read = true;\n      if (n.seeds.indexOf(m.id) >= 0) {\n        x.seed = true;\n        if (x.score === null || m.score > x.score) x.score = m.score;\n      }\n      return;\n    }\n    x.revision = m.revision;\n    if (n.op === 'commit') x.added = true;\n    else if (n.op === 'forget') x.gone = true;\n    else x.full = true;\n  });\n  (n.edges || []).forEach(memEdge);\n});\n\nconst MEM_SNAP = new Map();\n((DATA.memory && DATA.memory.nodes) || []).forEach(function (n) { MEM_SNAP.set(n.id, n); });\n// The graph knows joins the run never travelled \u2014 the edge between a task it\n// read and the artifact it then wrote is exactly the one worth seeing.\n((DATA.memory && DATA.memory.edges) || []).forEach(memEdge);\n\nconst MEM_ADJ = new Map();\nfunction memLink(id, other, rel, out) {\n  if (!MEM_ADJ.has(id)) MEM_ADJ.set(id, []);\n  MEM_ADJ.get(id).push({ other: other, rel: rel, out: out });\n}\nMEM_EDGES.forEach(function (e) {\n  memLink(e.source, e.target, e.relation, true);\n  memLink(e.target, e.source, e.relation, false);\n});\n\n// --- the memory diagram ---------------------------------------------------\n\nconst MEM_MAX = 300;\nconst MEM_SHAPES = { file: ['[/', '/]'], plan: ['{{', '}}'], operation: ['([', '])'] };\nconst MEM_PAINTED = new Set(\n  ['task', 'plan', 'fact', 'snippet', 'file', 'operation', 'preference']);\nconst MEM_KEY = new Map();\nconst MEM_ID = new Map();\n\nfunction shortId(id) {\n  return id.length > 12 ? id.slice(0, 4) + '\\u2026' + id.slice(-4) : id;\n}\n\nfunction clipText(text, n) {\n  const flat = String(text === undefined || text === null ? '' : text).replace(/\\s+/g, ' ').trim();\n  return flat.length > n ? flat.slice(0, n - 1) + '...' : flat;\n}\n\n/**\n * Text as at most 'max' lines of roughly 'width' characters. Mermaid will not\n * break a label, so a node is otherwise as wide as its sentence and the graph\n * is unreadable at any zoom that fits.\n */\nfunction memWrap(text, width, max) {\n  const words = String(text === undefined || text === null ? '' : text)\n    .replace(/\\s+/g, ' ').trim().split(' ');\n  const out = [];\n  let cur = '';\n  let i = 0;\n  for (; i < words.length; i++) {\n    const w = words[i].length > width ? words[i].slice(0, width - 1) + '...' : words[i];\n    if (!w) continue;\n    if (!cur) cur = w;\n    else if (cur.length + 1 + w.length <= width) cur += ' ' + w;\n    else if (out.length + 1 < max) { out.push(cur); cur = w; }\n    else break;\n  }\n  if (cur) out.push(cur);\n  const last = out.length - 1;\n  if (i < words.length && last >= 0 && out[last].slice(-3) !== '...') out[last] += '...';\n  return out;\n}\n\n// Built from a closed-vocabulary kind, an id and a clip of text put through the\n// same sanitizer the run graph uses: nothing a model wrote reaches Mermaid.\n// Shaped like the memory page's labels \u2014 what it is on the first line, what it\n// says underneath \u2014 because run together there is no telling the three apart.\nfunction memLabel(x) {\n  const snap = MEM_SNAP.get(x.id);\n  const head = safe(x.kind || 'node') + ' \\u00b7 ' + shortId(safe(x.id));\n  // Drawing the stored text under a node the model never opened would read as\n  // context it had.\n  if (memSaw(x) === 'id') return [head, '(id only)'].join('<br/>');\n  return [head].concat(snap ? memWrap(snap.text, 28, 3).map(safe) : []).join('<br/>');\n}\n\n// How much of the node reached the model: a recall block carries one clipped\n// line each, memory_load returns whole bodies, and what the run wrote it wrote\n// in its own words. A node it only forgot was named by id and nothing more.\nfunction memSaw(x) {\n  if (x.full || x.added) return 'full';\n  if (x.read) return 'summary';\n  return 'id';\n}\n\nconst MEM_SAW = {\n  full: 'the whole text',\n  summary: 'a clipped line, in the recall block',\n  id: 'the id only \\u2014 never the content'\n};\n\n// Fill says what the node IS, outline says what the run DID with it. Painting\n// the fill by role instead made the whole graph one colour: nearly every node\n// in a run was read.\nfunction memRole(x, withAdded) {\n  if (x.gone) return 'gone';\n  if (x.added && withAdded) return 'added';\n  return x.seed ? 'seed' : '';\n}\n\n/** A node the run only wrote is not part of \"what it read\", so it waits. */\nfunction memShown(withAdded) {\n  const out = [];\n  MEM.forEach(function (x) {\n    if (!withAdded && x.added && !x.read && !x.gone) return;\n    out.push(x);\n  });\n  return out;\n}\n\nfunction memDiagram(shown, withAdded) {\n  const lines = ['flowchart LR'];\n  lines.push('  classDef task fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');\n  lines.push('  classDef plan fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');\n  lines.push('  classDef fact fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');\n  lines.push('  classDef snippet fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');\n  lines.push('  classDef file fill:#40331a,stroke:#7a6535,color:#f0dfb4;');\n  lines.push('  classDef operation fill:#3d2a1b,stroke:#7a5535,color:#f2d9c2;');\n  lines.push('  classDef preference fill:#3d1f2c,stroke:#7a3b56,color:#f5b8cd;');\n  // Defined last so the outline wins over the kind's own stroke.\n  lines.push('  classDef seed stroke:#6ea8fe,stroke-width:3px;');\n  lines.push('  classDef added stroke:#4ec9a0,stroke-width:3px;');\n  lines.push('  classDef gone stroke:#f0776c,stroke-width:2px,stroke-dasharray:4 3,opacity:0.6;');\n  MEM_KEY.clear();\n  MEM_ID.clear();\n  shown.forEach(function (x, i) {\n    const key = 'm' + i;\n    MEM_KEY.set(x.id, key);\n    MEM_ID.set(key, x.id);\n    const shape = MEM_SHAPES[x.kind] || ['(', ')'];\n    lines.push('  ' + key + shape[0] + '\"' + memLabel(x) + '\"' + shape[1]);\n    // Kinds are configurable, so naming a class that was never defined would\n    // fail the whole render.\n    if (MEM_PAINTED.has(x.kind)) lines.push('  class ' + key + ' ' + x.kind + ';');\n    const role = memRole(x, withAdded);\n    if (role) lines.push('  class ' + key + ' ' + role + ';');\n  });\n  MEM_EDGES.forEach(function (e) {\n    const a = MEM_KEY.get(e.source), b = MEM_KEY.get(e.target);\n    if (a && b) lines.push('  ' + a + ' -->|' + safe(e.relation.toLowerCase()) + '| ' + b);\n  });\n  return lines.join('\\n');\n}\n\n// The two counts that have an outline colour in the graph wear it here too.\nfunction memLegend(drawn) {\n  let read = 0, added = 0, gone = 0;\n  MEM.forEach(function (x) {\n    if (x.read) read++;\n    if (x.added) added++;\n    if (x.gone) gone++;\n  });\n  const dot = ' \\u00b7 ';\n  const out = [el('span', null, read + ' read'), document.createTextNode(dot),\n    el('span', 'ok', added + ' written'), document.createTextNode(dot),\n    el('span', 'bad', gone + ' forgotten')];\n  if (drawn < MEM.size) out.push(document.createTextNode(dot + drawn + ' drawn'));\n  if (!DATA.memory) out.push(document.createTextNode(dot + 'no memory attached: ids only'));\n  return out;\n}\n\nconst memAddedEl = document.getElementById('madded');\nconst mdetailEl = document.getElementById('mdetail');\nconst memTab = document.querySelector('#viewtabs button[data-view=\"memory\"]');\nlet memDrawn = false;\nlet memSeq = 0;\nlet memSel = null;\n\nif (MEM.size) memTab.hidden = false;\nmemAddedEl.addEventListener('change', function () { drawMemory(); });\n\nfunction memKeyOf(g) {\n  const m = /-(m\\d+)-\\d+$/.exec(g.id || '');\n  return m ? m[1] : null;\n}\n\nfunction memMark() {\n  const key = memSel === null ? null : MEM_KEY.get(memSel);\n  PANES.memory.canvas.querySelectorAll('.node').forEach(function (g) {\n    g.classList.toggle('picked', Boolean(key) && memKeyOf(g) === key);\n  });\n}\n\nasync function drawMemory() {\n  const withAdded = memAddedEl.checked;\n  const shown = memShown(withAdded).slice(0, MEM_MAX);\n  const count = document.getElementById('mcount');\n  count.replaceChildren.apply(count, memLegend(shown.length));\n  if (!shown.length) {\n    PANES.memory.canvas.replaceChildren(el('div', 'hint pad',\n      'This run neither read nor wrote memory.'));\n    return;\n  }\n  // A fresh render id each time: the checkbox redraws this pane, and Mermaid\n  // keeps the element it was given.\n  await draw(PANES.memory, 'mem-graph-' + (++memSeq), memDiagram(shown, withAdded), function (g) {\n    const id = MEM_ID.get(memKeyOf(g));\n    if (!id) return;\n    g.addEventListener('click', function () { if (!PANES.memory.moved()) memSelect(id); });\n  });\n  memMark();\n}\n\n// --- the memory panel -----------------------------------------------------\n\nfunction memProp(dl, key, value) {\n  if (value === undefined || value === null || value === '') return;\n  dl.appendChild(el('dt', null, key));\n  dl.appendChild(el('dd', null, value));\n}\n\nconst MEM_EXCUSE = {\n  'too-big': 'too big to inline \\u2014 read it from the memory directory',\n  binary: 'binary, so there is nothing to show',\n  missing: 'the graph records this file but it is not on disk',\n  unreadable: 'on disk but could not be read'\n};\n\nfunction memSelect(id) {\n  memSel = id;\n  mdetailEl.replaceChildren(memDetail(id));\n  mdetailEl.scrollTop = 0;\n  memMark();\n}\n\nfunction memDetail(id) {\n  const x = MEM.get(id) || { id: id, kind: '', where: [], score: null, revision: null };\n  const snap = MEM_SNAP.get(id);\n  const out = document.createDocumentFragment();\n\n  const h = el('div', 'dt');\n  const kind = x.kind || (snap && snap.kind) || '';\n  h.appendChild(el('span', 'kind ' + kind, kind || 'node'));\n  if (x.read) h.appendChild(el('span', 'badge', 'read'));\n  if (x.full) h.appendChild(el('span', 'badge', 'loaded'));\n  if (x.added) h.appendChild(el('span', 'badge ok', 'written'));\n  if (x.gone) h.appendChild(el('span', 'badge bad', 'forgotten'));\n  if (snap && snap.stale) h.appendChild(el('span', 'badge', 'superseded'));\n  out.appendChild(h);\n\n  // The id is what you carry to 'zen memory show', so it is whole and takeable.\n  const idrow = el('div', 'idrow');\n  idrow.appendChild(el('code', null, id));\n  const copy = el('button', null, 'copy');\n  copy.addEventListener('click', function () {\n    navigator.clipboard.writeText(id).then(function () {\n      copy.textContent = 'copied';\n      setTimeout(function () { copy.textContent = 'copy'; }, 1200);\n    }, function () { copy.textContent = 'blocked'; });\n  });\n  idrow.appendChild(copy);\n  out.appendChild(idrow);\n\n  const props = el('dl', 'props');\n  memProp(props, 'model saw', MEM_SAW[memSaw(x)]);\n  if (x.score !== null) memProp(props, 'score', x.score.toFixed(3) + (x.seed ? '  match' : ''));\n  else if (x.read) memProp(props, 'reached', 'stitched in, not matched');\n  if (snap) {\n    memProp(props, 'audience', snap.audience.join(', ') || '\\u2014');\n    // The run's revision and the current one are the same number until\n    // something wrote this node again after the run.\n    memProp(props, 'revision', x.revision !== null && x.revision !== snap.revision\n      ? x.revision + ' then, ' + snap.revision + ' now' : String(snap.revision));\n    memProp(props, 'recalled', snap.useCount + 'x \\u00b7 last ' + snap.lastUsedAt);\n    memProp(props, 'created', snap.createdAt);\n    if (snap.updatedAt !== snap.createdAt) memProp(props, 'updated', snap.updatedAt);\n  } else if (x.revision !== null) {\n    memProp(props, 'revision', String(x.revision));\n  }\n  out.appendChild(props);\n\n  if (snap) {\n    out.appendChild(textBlock('Text', snap.text));\n    if (snap.metadata) {\n      out.appendChild(textBlock('Metadata', JSON.stringify(snap.metadata, null, 2)));\n    }\n    if (snap.file) out.appendChild(memFile(snap));\n  } else {\n    const s = block('Text', DATA.memory ? 'gone' : 'not attached');\n    s.appendChild(el('div', 'empty', DATA.memory\n      ? 'no longer in the memory graph \\u2014 the run recorded its id, kind and edges, not its text'\n      : 'this report carries no memory, so only what the run itself recorded is here'));\n    out.appendChild(s);\n  }\n\n  const links = MEM_ADJ.get(id) || [];\n  const ls = block('Links', String(links.length));\n  if (!links.length) {\n    ls.appendChild(el('div', 'empty', 'nothing points here and it points nowhere'));\n  } else {\n    const ul = el('ul', 'links');\n    // Outgoing first: PRODUCED read forwards is the story of the node.\n    links.slice().sort(function (a, b) { return (a.out ? 0 : 1) - (b.out ? 0 : 1); })\n      .forEach(function (l) {\n        const other = MEM_SNAP.get(l.other);\n        const li = el('li');\n        li.appendChild(el('span', 'rel', (l.out ? '\\u2192 ' : '\\u2190 ') + l.rel));\n        li.appendChild(el('span', 'kind ' + (other ? other.kind : ''), other ? other.kind : '?'));\n        const b = el('button', 'link',\n          (other && clipText(other.text, 60)) || shortId(l.other));\n        b.title = l.other;\n        b.addEventListener('click', function () { memSelect(l.other); });\n        li.appendChild(b);\n        ul.appendChild(li);\n      });\n    ls.appendChild(ul);\n  }\n  out.appendChild(ls);\n\n  // The way back to the trace: which turn reached for this, and what it did.\n  const ws = block('In this run', x.where.length + ' node(s)');\n  const line = el('div', 'empty', '');\n  x.where.forEach(function (key) {\n    const hit = BY_KEY.get(key);\n    if (!hit) return;\n    const b = el('button', 'link', label(hit.node));\n    b.addEventListener('click', function () { select(key, true); });\n    line.appendChild(b);\n  });\n  ws.appendChild(line);\n  out.appendChild(ws);\n  return out;\n}\n\nfunction memFile(snap) {\n  const tag = snap.file.path + ' \\u00b7 ' + snap.file.bytes + ' B';\n  const src = snap.image ? imageSrc({ type: 'image', url: snap.image }) : null;\n  if (src) {\n    const s = block('File', tag);\n    const img = el('img', 'media');\n    img.src = src;\n    img.alt = snap.file.path;\n    img.loading = 'lazy';\n    s.appendChild(img);\n    return s;\n  }\n  if (snap.content !== undefined && snap.content !== null) {\n    return textBlock('File', snap.content, tag);\n  }\n  const s = block('File', tag);\n  s.appendChild(el('div', 'empty', MEM_EXCUSE[snap.omitted] || 'not shown'));\n  return s;\n}\n\ndrawGraph().then(drawArch);\nbuildStats();\nif (ENTRIES.length) select('n0', false);\n";
 //# sourceMappingURL=client.d.ts.map