@zenera/neo 1.1.12 → 1.1.15

package/dist/inspect/client.js

@@ -803,11 +803,15 @@ const PANES = {};
 function show(view) {
   document.getElementById('graph').hidden = view !== 'graph';
   document.getElementById('agents').hidden = view !== 'agents';
+  document.getElementById('memory').hidden = view !== 'memory';
   detailEl.hidden = view !== 'detail';
   statsEl.hidden = view !== 'stats';
   Array.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {
     b.classList.toggle('on', b.dataset.view === view);
   });
+  // The memory graph is the one view that costs a render nobody asked for, so
+  // it waits until somebody asks.
+  if (view === 'memory' && !memDrawn) { memDrawn = true; drawMemory(); }
   if (PANES[view]) PANES[view].refit();
 }
 Array.prototype.forEach.call(document.getElementById('viewtabs').children, function (b) {
@@ -924,6 +928,7 @@ function panZoom(paneId) {
 
 PANES.graph = panZoom('graph');
 PANES.agents = panZoom('agents');
+PANES.memory = panZoom('memory');
 
 // --- diagram --------------------------------------------------------------
 
@@ -1165,7 +1170,7 @@ function observedArchitecture() {
       // A run shows that an agent reached the memory, never how wide its mask
       // was: nothing it did not read leaves a trace to read the mask off.
       if (!a.memory) a.memory = { access: 'read', sees: [], writes: [] };
-      if (n.type === 'memory_op') a.memory.access = 'read-write';
+      if (n.type === 'memory_op' && n.op !== 'load') a.memory.access = 'read-write';
     } else if (n.type === 'fork') {
       if (!a.fork) a.fork = { agents: [] };
       n.branches.forEach(function (b) {
@@ -1335,6 +1340,399 @@ async function drawArch() {
   });
 }
 
+// --- memory ---------------------------------------------------------------
+//
+// Two questions in one picture: what the run took out of the memory, and what
+// it put back. The trajectory records ids, kinds and edges but no bodies, so
+// the text comes from the graph as the report was built — which is later than
+// the run, and the panel says so where it matters: a node can have moved on a
+// revision since, or be gone from the memory entirely.
+
+const MEM = new Map();
+const MEM_EDGES = [];
+const MEM_EDGE_SEEN = new Set();
+
+function memOf(m) {
+  let x = MEM.get(m.id);
+  if (!x) {
+    x = { id: m.id, kind: m.kind, read: false, added: false, gone: false, full: false,
+      seed: false, score: null, revision: null, where: [] };
+    MEM.set(m.id, x);
+  }
+  return x;
+}
+
+// The same edge comes back with every recall that crossed it; drawing it once
+// is the difference between a graph and a bundle of parallel arrows.
+function memEdge(e) {
+  const k = e.source + '|' + e.relation + '|' + e.target;
+  if (MEM_EDGE_SEEN.has(k)) return;
+  MEM_EDGE_SEEN.add(k);
+  MEM_EDGES.push(e);
+}
+
+ENTRIES.forEach(function (entry) {
+  const n = entry.node;
+  if (n.type !== 'memory_recall' && n.type !== 'memory_op') return;
+  n.nodes.forEach(function (m) {
+    const x = memOf(m);
+    if (x.where.indexOf(entry.key) < 0) x.where.push(entry.key);
+    if (n.type === 'memory_recall') {
+      x.read = true;
+      if (n.seeds.indexOf(m.id) >= 0) {
+        x.seed = true;
+        if (x.score === null || m.score > x.score) x.score = m.score;
+      }
+      return;
+    }
+    x.revision = m.revision;
+    if (n.op === 'commit') x.added = true;
+    else if (n.op === 'forget') x.gone = true;
+    else x.full = true;
+  });
+  (n.edges || []).forEach(memEdge);
+});
+
+const MEM_SNAP = new Map();
+((DATA.memory && DATA.memory.nodes) || []).forEach(function (n) { MEM_SNAP.set(n.id, n); });
+// The graph knows joins the run never travelled — the edge between a task it
+// read and the artifact it then wrote is exactly the one worth seeing.
+((DATA.memory && DATA.memory.edges) || []).forEach(memEdge);
+
+const MEM_ADJ = new Map();
+function memLink(id, other, rel, out) {
+  if (!MEM_ADJ.has(id)) MEM_ADJ.set(id, []);
+  MEM_ADJ.get(id).push({ other: other, rel: rel, out: out });
+}
+MEM_EDGES.forEach(function (e) {
+  memLink(e.source, e.target, e.relation, true);
+  memLink(e.target, e.source, e.relation, false);
+});
+
+// --- the memory diagram ---------------------------------------------------
+
+const MEM_MAX = 300;
+const MEM_SHAPES = { file: ['[/', '/]'], plan: ['{{', '}}'], operation: ['([', '])'] };
+const MEM_PAINTED = new Set(
+  ['task', 'plan', 'fact', 'snippet', 'file', 'operation', 'preference']);
+const MEM_KEY = new Map();
+const MEM_ID = new Map();
+
+function shortId(id) {
+  return id.length > 12 ? id.slice(0, 4) + '\\u2026' + id.slice(-4) : id;
+}
+
+function clipText(text, n) {
+  const flat = String(text === undefined || text === null ? '' : text).replace(/\\s+/g, ' ').trim();
+  return flat.length > n ? flat.slice(0, n - 1) + '...' : flat;
+}
+
+/**
+ * Text as at most 'max' lines of roughly 'width' characters. Mermaid will not
+ * break a label, so a node is otherwise as wide as its sentence and the graph
+ * is unreadable at any zoom that fits.
+ */
+function memWrap(text, width, max) {
+  const words = String(text === undefined || text === null ? '' : text)
+    .replace(/\\s+/g, ' ').trim().split(' ');
+  const out = [];
+  let cur = '';
+  let i = 0;
+  for (; i < words.length; i++) {
+    const w = words[i].length > width ? words[i].slice(0, width - 1) + '...' : words[i];
+    if (!w) continue;
+    if (!cur) cur = w;
+    else if (cur.length + 1 + w.length <= width) cur += ' ' + w;
+    else if (out.length + 1 < max) { out.push(cur); cur = w; }
+    else break;
+  }
+  if (cur) out.push(cur);
+  const last = out.length - 1;
+  if (i < words.length && last >= 0 && out[last].slice(-3) !== '...') out[last] += '...';
+  return out;
+}
+
+// Built from a closed-vocabulary kind, an id and a clip of text put through the
+// same sanitizer the run graph uses: nothing a model wrote reaches Mermaid.
+// Shaped like the memory page's labels — what it is on the first line, what it
+// says underneath — because run together there is no telling the three apart.
+function memLabel(x) {
+  const snap = MEM_SNAP.get(x.id);
+  const head = safe(x.kind || 'node') + ' \\u00b7 ' + shortId(safe(x.id));
+  // Drawing the stored text under a node the model never opened would read as
+  // context it had.
+  if (memSaw(x) === 'id') return [head, '(id only)'].join('<br/>');
+  return [head].concat(snap ? memWrap(snap.text, 28, 3).map(safe) : []).join('<br/>');
+}
+
+// How much of the node reached the model: a recall block carries one clipped
+// line each, memory_load returns whole bodies, and what the run wrote it wrote
+// in its own words. A node it only forgot was named by id and nothing more.
+function memSaw(x) {
+  if (x.full || x.added) return 'full';
+  if (x.read) return 'summary';
+  return 'id';
+}
+
+const MEM_SAW = {
+  full: 'the whole text',
+  summary: 'a clipped line, in the recall block',
+  id: 'the id only \\u2014 never the content'
+};
+
+// Fill says what the node IS, outline says what the run DID with it. Painting
+// the fill by role instead made the whole graph one colour: nearly every node
+// in a run was read.
+function memRole(x, withAdded) {
+  if (x.gone) return 'gone';
+  if (x.added && withAdded) return 'added';
+  return x.seed ? 'seed' : '';
+}
+
+/** A node the run only wrote is not part of "what it read", so it waits. */
+function memShown(withAdded) {
+  const out = [];
+  MEM.forEach(function (x) {
+    if (!withAdded && x.added && !x.read && !x.gone) return;
+    out.push(x);
+  });
+  return out;
+}
+
+function memDiagram(shown, withAdded) {
+  const lines = ['flowchart LR'];
+  lines.push('  classDef task fill:#1e3357,stroke:#3d5f9e,color:#cfe0ff;');
+  lines.push('  classDef plan fill:#3a2450,stroke:#6b4b90,color:#e6d3ff;');
+  lines.push('  classDef fact fill:#14392c,stroke:#2f7a5c,color:#c6f5e0;');
+  lines.push('  classDef snippet fill:#1e3d33,stroke:#3d7a66,color:#c8f0e2;');
+  lines.push('  classDef file fill:#40331a,stroke:#7a6535,color:#f0dfb4;');
+  lines.push('  classDef operation fill:#3d2a1b,stroke:#7a5535,color:#f2d9c2;');
+  lines.push('  classDef preference fill:#3d1f2c,stroke:#7a3b56,color:#f5b8cd;');
+  // Defined last so the outline wins over the kind's own stroke.
+  lines.push('  classDef seed stroke:#6ea8fe,stroke-width:3px;');
+  lines.push('  classDef added stroke:#4ec9a0,stroke-width:3px;');
+  lines.push('  classDef gone stroke:#f0776c,stroke-width:2px,stroke-dasharray:4 3,opacity:0.6;');
+  MEM_KEY.clear();
+  MEM_ID.clear();
+  shown.forEach(function (x, i) {
+    const key = 'm' + i;
+    MEM_KEY.set(x.id, key);
+    MEM_ID.set(key, x.id);
+    const shape = MEM_SHAPES[x.kind] || ['(', ')'];
+    lines.push('  ' + key + shape[0] + '"' + memLabel(x) + '"' + shape[1]);
+    // Kinds are configurable, so naming a class that was never defined would
+    // fail the whole render.
+    if (MEM_PAINTED.has(x.kind)) lines.push('  class ' + key + ' ' + x.kind + ';');
+    const role = memRole(x, withAdded);
+    if (role) lines.push('  class ' + key + ' ' + role + ';');
+  });
+  MEM_EDGES.forEach(function (e) {
+    const a = MEM_KEY.get(e.source), b = MEM_KEY.get(e.target);
+    if (a && b) lines.push('  ' + a + ' -->|' + safe(e.relation.toLowerCase()) + '| ' + b);
+  });
+  return lines.join('\\n');
+}
+
+// The two counts that have an outline colour in the graph wear it here too.
+function memLegend(drawn) {
+  let read = 0, added = 0, gone = 0;
+  MEM.forEach(function (x) {
+    if (x.read) read++;
+    if (x.added) added++;
+    if (x.gone) gone++;
+  });
+  const dot = ' \\u00b7 ';
+  const out = [el('span', null, read + ' read'), document.createTextNode(dot),
+    el('span', 'ok', added + ' written'), document.createTextNode(dot),
+    el('span', 'bad', gone + ' forgotten')];
+  if (drawn < MEM.size) out.push(document.createTextNode(dot + drawn + ' drawn'));
+  if (!DATA.memory) out.push(document.createTextNode(dot + 'no memory attached: ids only'));
+  return out;
+}
+
+const memAddedEl = document.getElementById('madded');
+const mdetailEl = document.getElementById('mdetail');
+const memTab = document.querySelector('#viewtabs button[data-view="memory"]');
+let memDrawn = false;
+let memSeq = 0;
+let memSel = null;
+
+if (MEM.size) memTab.hidden = false;
+memAddedEl.addEventListener('change', function () { drawMemory(); });
+
+function memKeyOf(g) {
+  const m = /-(m\\d+)-\\d+$/.exec(g.id || '');
+  return m ? m[1] : null;
+}
+
+function memMark() {
+  const key = memSel === null ? null : MEM_KEY.get(memSel);
+  PANES.memory.canvas.querySelectorAll('.node').forEach(function (g) {
+    g.classList.toggle('picked', Boolean(key) && memKeyOf(g) === key);
+  });
+}
+
+async function drawMemory() {
+  const withAdded = memAddedEl.checked;
+  const shown = memShown(withAdded).slice(0, MEM_MAX);
+  const count = document.getElementById('mcount');
+  count.replaceChildren.apply(count, memLegend(shown.length));
+  if (!shown.length) {
+    PANES.memory.canvas.replaceChildren(el('div', 'hint pad',
+      'This run neither read nor wrote memory.'));
+    return;
+  }
+  // A fresh render id each time: the checkbox redraws this pane, and Mermaid
+  // keeps the element it was given.
+  await draw(PANES.memory, 'mem-graph-' + (++memSeq), memDiagram(shown, withAdded), function (g) {
+    const id = MEM_ID.get(memKeyOf(g));
+    if (!id) return;
+    g.addEventListener('click', function () { if (!PANES.memory.moved()) memSelect(id); });
+  });
+  memMark();
+}
+
+// --- the memory panel -----------------------------------------------------
+
+function memProp(dl, key, value) {
+  if (value === undefined || value === null || value === '') return;
+  dl.appendChild(el('dt', null, key));
+  dl.appendChild(el('dd', null, value));
+}
+
+const MEM_EXCUSE = {
+  'too-big': 'too big to inline \\u2014 read it from the memory directory',
+  binary: 'binary, so there is nothing to show',
+  missing: 'the graph records this file but it is not on disk',
+  unreadable: 'on disk but could not be read'
+};
+
+function memSelect(id) {
+  memSel = id;
+  mdetailEl.replaceChildren(memDetail(id));
+  mdetailEl.scrollTop = 0;
+  memMark();
+}
+
+function memDetail(id) {
+  const x = MEM.get(id) || { id: id, kind: '', where: [], score: null, revision: null };
+  const snap = MEM_SNAP.get(id);
+  const out = document.createDocumentFragment();
+
+  const h = el('div', 'dt');
+  const kind = x.kind || (snap && snap.kind) || '';
+  h.appendChild(el('span', 'kind ' + kind, kind || 'node'));
+  if (x.read) h.appendChild(el('span', 'badge', 'read'));
+  if (x.full) h.appendChild(el('span', 'badge', 'loaded'));
+  if (x.added) h.appendChild(el('span', 'badge ok', 'written'));
+  if (x.gone) h.appendChild(el('span', 'badge bad', 'forgotten'));
+  if (snap && snap.stale) h.appendChild(el('span', 'badge', 'superseded'));
+  out.appendChild(h);
+
+  // The id is what you carry to 'zen memory show', so it is whole and takeable.
+  const idrow = el('div', 'idrow');
+  idrow.appendChild(el('code', null, id));
+  const copy = el('button', null, 'copy');
+  copy.addEventListener('click', function () {
+    navigator.clipboard.writeText(id).then(function () {
+      copy.textContent = 'copied';
+      setTimeout(function () { copy.textContent = 'copy'; }, 1200);
+    }, function () { copy.textContent = 'blocked'; });
+  });
+  idrow.appendChild(copy);
+  out.appendChild(idrow);
+
+  const props = el('dl', 'props');
+  memProp(props, 'model saw', MEM_SAW[memSaw(x)]);
+  if (x.score !== null) memProp(props, 'score', x.score.toFixed(3) + (x.seed ? '  match' : ''));
+  else if (x.read) memProp(props, 'reached', 'stitched in, not matched');
+  if (snap) {
+    memProp(props, 'audience', snap.audience.join(', ') || '\\u2014');
+    // The run's revision and the current one are the same number until
+    // something wrote this node again after the run.
+    memProp(props, 'revision', x.revision !== null && x.revision !== snap.revision
+      ? x.revision + ' then, ' + snap.revision + ' now' : String(snap.revision));
+    memProp(props, 'recalled', snap.useCount + 'x \\u00b7 last ' + snap.lastUsedAt);
+    memProp(props, 'created', snap.createdAt);
+    if (snap.updatedAt !== snap.createdAt) memProp(props, 'updated', snap.updatedAt);
+  } else if (x.revision !== null) {
+    memProp(props, 'revision', String(x.revision));
+  }
+  out.appendChild(props);
+
+  if (snap) {
+    out.appendChild(textBlock('Text', snap.text));
+    if (snap.metadata) {
+      out.appendChild(textBlock('Metadata', JSON.stringify(snap.metadata, null, 2)));
+    }
+    if (snap.file) out.appendChild(memFile(snap));
+  } else {
+    const s = block('Text', DATA.memory ? 'gone' : 'not attached');
+    s.appendChild(el('div', 'empty', DATA.memory
+      ? 'no longer in the memory graph \\u2014 the run recorded its id, kind and edges, not its text'
+      : 'this report carries no memory, so only what the run itself recorded is here'));
+    out.appendChild(s);
+  }
+
+  const links = MEM_ADJ.get(id) || [];
+  const ls = block('Links', String(links.length));
+  if (!links.length) {
+    ls.appendChild(el('div', 'empty', 'nothing points here and it points nowhere'));
+  } else {
+    const ul = el('ul', 'links');
+    // Outgoing first: PRODUCED read forwards is the story of the node.
+    links.slice().sort(function (a, b) { return (a.out ? 0 : 1) - (b.out ? 0 : 1); })
+      .forEach(function (l) {
+        const other = MEM_SNAP.get(l.other);
+        const li = el('li');
+        li.appendChild(el('span', 'rel', (l.out ? '\\u2192 ' : '\\u2190 ') + l.rel));
+        li.appendChild(el('span', 'kind ' + (other ? other.kind : ''), other ? other.kind : '?'));
+        const b = el('button', 'link',
+          (other && clipText(other.text, 60)) || shortId(l.other));
+        b.title = l.other;
+        b.addEventListener('click', function () { memSelect(l.other); });
+        li.appendChild(b);
+        ul.appendChild(li);
+      });
+    ls.appendChild(ul);
+  }
+  out.appendChild(ls);
+
+  // The way back to the trace: which turn reached for this, and what it did.
+  const ws = block('In this run', x.where.length + ' node(s)');
+  const line = el('div', 'empty', '');
+  x.where.forEach(function (key) {
+    const hit = BY_KEY.get(key);
+    if (!hit) return;
+    const b = el('button', 'link', label(hit.node));
+    b.addEventListener('click', function () { select(key, true); });
+    line.appendChild(b);
+  });
+  ws.appendChild(line);
+  out.appendChild(ws);
+  return out;
+}
+
+function memFile(snap) {
+  const tag = snap.file.path + ' \\u00b7 ' + snap.file.bytes + ' B';
+  const src = snap.image ? imageSrc({ type: 'image', url: snap.image }) : null;
+  if (src) {
+    const s = block('File', tag);
+    const img = el('img', 'media');
+    img.src = src;
+    img.alt = snap.file.path;
+    img.loading = 'lazy';
+    s.appendChild(img);
+    return s;
+  }
+  if (snap.content !== undefined && snap.content !== null) {
+    return textBlock('File', snap.content, tag);
+  }
+  const s = block('File', tag);
+  s.appendChild(el('div', 'empty', MEM_EXCUSE[snap.omitted] || 'not shown'));
+  return s;
+}
+
 drawGraph().then(drawArch);
 buildStats();
 if (ENTRIES.length) select('n0', false);

package/dist/inspect/css.d.ts

@@ -1,2 +1,2 @@
-export declare const CSS = "\n:root {\n  --bg: #0f1115; --panel: #161922; --line: #262b36; --fg: #d7dbe3; --dim: #8a92a6;\n  --accent: #6ea8fe; --ok: #4ec9a0; --err: #f0776c; --warn: #e2b341; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n* { box-sizing: border-box; }\nbody { margin: 0; background: var(--bg); color: var(--fg);\n  font: 14px/1.5 system-ui, -apple-system, Segoe UI, sans-serif; }\nheader { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel);\n  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }\nheader h1 { font-size: 15px; margin: 0 12px 0 0; font-weight: 600; }\nheader .kv { color: var(--dim); font-size: 12px; }\nheader .kv b { color: var(--fg); font-weight: 600; }\nmain { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 49px); }\naside { border-right: 1px solid var(--line); overflow: auto; background: var(--panel); }\n.pad { padding: 10px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); }\n#filter { width: 100%; padding: 6px 8px; background: var(--bg); color: var(--fg);\n  border: 1px solid var(--line); border-radius: 6px; }\n#timeline { list-style: none; margin: 0; padding: 4px 0; }\n#timeline li { padding: 6px 10px; border-left: 3px solid transparent; cursor: pointer; }\n#timeline li:hover { background: #1c2130; }\n#timeline li.sel { background: #1f2637; border-left-color: var(--accent); }\n#timeline li.covered { opacity: .45; }\n#timeline .row { display: flex; gap: 6px; align-items: baseline; }\n#timeline .t { color: var(--fg); font: 11px var(--mono); min-width: 38px; text-align: right; }\n#timeline .t.same { color: #3d4453; }\n#timeline .dur { margin-left: auto; color: var(--dim); font: 11px var(--mono); }\n#timeline .idx { color: var(--dim); font: 11px var(--mono); min-width: 22px; }\n#timeline .prev { color: var(--dim); font-size: 11px; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; padding-left: 44px; }\n/* Branch histories are contiguous in this list, so a coloured edge plus a\n   header is enough to stop ten parallel branches reading as one long run. */\n#timeline li.sep { cursor: default; padding: 10px 10px 4px; display: flex; gap: 7px;\n  align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;\n  color: var(--dim); border-left-color: transparent; }\n#timeline li.sep:hover { background: none; }\n#timeline li.sep .dot { width: 8px; height: 8px; border-radius: 2px;\n  background: var(--bc, var(--dim)); }\n/* The group header shouts in uppercase; its elapsed time should not. */\n#timeline li.sep .dur { text-transform: none; letter-spacing: 0; }\n/* The branch the join actually waited for. */\n#timeline li.sep.slow { background: #232a38; color: var(--fg); }\n#timeline li.sep.slow .dur { color: var(--fg); }\n#timeline li.branch { padding-left: 20px; border-left-color: var(--bc, var(--line)); }\n#timeline li.branch.sel { border-left-color: var(--bc, var(--accent)); }\n#middle { display: flex; flex-direction: column; overflow: hidden; }\n.tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }\n.tabs button { background: none; border: 1px solid transparent; color: var(--dim);\n  padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }\n.tabs button.on { color: var(--fg); background: var(--panel); border-color: var(--line); }\n#detail { overflow: auto; padding: 16px; flex: 1; }\n#stats { overflow: auto; padding: 16px; flex: 1; }\ntable.st { width: 100%; border-collapse: collapse; font: 12px var(--mono); }\ntable.st th { text-align: right; color: var(--dim); font-weight: 600; padding: 6px 12px;\n  border-bottom: 1px solid var(--line); white-space: nowrap; }\ntable.st td { text-align: right; padding: 5px 12px; border-bottom: 1px solid #1d2230;\n  white-space: nowrap; }\ntable.st th:first-child, table.st td:first-child { text-align: left; }\ntable.st tbody tr:hover { background: #1c2130; }\ntable.st tbody tr:last-child td { border-bottom: none; }\n/* The total is a different kind of row, not one more of the same: it gets its\n   own band so nobody reads it as another model or another agent. */\ntable.st tfoot td { color: var(--fg); font-weight: 600; background: #191e2a;\n  border-top: 1px solid #2b3346; border-bottom: none; padding: 7px 12px; }\ntable.st tfoot td:first-child { color: var(--dim); text-transform: uppercase;\n  letter-spacing: .07em; font-size: 11px; }\n/* Two panes hold a zoomable diagram (the run graph and the architecture), so\n   everything about one is written for both. */\n.pane { display: flex; flex-direction: column; overflow: hidden; flex: 1; }\n/* An explicit display on the pane would otherwise beat the hidden attribute\n   and both views would show at once. */\n.pane[hidden], #detail[hidden], #stats[hidden] { display: none; }\n.pane svg { max-width: none; display: block; }\n.pane .node { cursor: pointer; }\n/* A node with nothing behind it in this run is not clickable, and says so. */\n.pane .node.idle { cursor: default; }\n.gtools { display: flex; align-items: center; gap: 6px; padding: 6px 10px;\n  border-bottom: 1px solid var(--line); background: var(--panel); }\n.gtools button { background: var(--bg); border: 1px solid var(--line); color: var(--fg);\n  border-radius: 6px; padding: 2px 10px; cursor: pointer; font: 12px var(--mono); }\n.gtools button:hover { border-color: var(--accent); }\n.gtools .hint:first-of-type { margin-left: 8px; }\n.gtools .lvl { margin-left: auto; font-family: var(--mono); }\n/* The canvas is transformed, not scrolled: panning has to work past the edges\n   of the diagram, which overflow:auto would forbid. */\n.viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; touch-action: none;\n  user-select: none; -webkit-user-select: none; }\n.viewport.drag { cursor: grabbing; }\n.canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }\n.hint { color: var(--dim); font-size: 12px; }\n.hint.pad { padding: 16px; }\n.type { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;\n  padding: 1px 6px; border-radius: 4px; background: #232a38; color: var(--dim); }\n.type.llm_call { background: #1e3357; color: #9dc1ff; }\n.type.tool_call, .type.tool_result { background: #1e3d33; color: #8ee0c2; }\n.type.compaction { background: #40331a; color: var(--warn); }\n.type.fork, .type.join { background: #3a2450; color: #d1a6ff; }\n.type.final_output { background: #14392c; color: var(--ok); }\n.type.err { background: #4a1f1c; color: var(--err); }\nh2.dt { font-size: 16px; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; }\n.meta { color: var(--dim); font-size: 12px; font-family: var(--mono); margin-bottom: 14px;\n  display: flex; flex-wrap: wrap; gap: 4px 14px; }\nsection.blk { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px;\n  background: var(--panel); overflow: hidden; }\nsection.blk > h3 { margin: 0; padding: 7px 12px; font-size: 12px; font-weight: 600;\n  color: var(--dim); border-bottom: 1px solid var(--line); letter-spacing: .03em; }\nsection.blk > h3 .tag { float: right; font-weight: 400; }\nsection.blk.sys { border-left: 3px solid var(--warn); }\n/* An LLM call has three things a reader wants to tell apart at a glance: what\n   went in, what came back, and what it cost. Groups carry the first two. */\n.group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px;\n  background: #12151d; overflow: hidden; }\n.group > .ghdr { display: flex; align-items: center; gap: 10px; padding: 8px 12px;\n  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;\n  background: #1b2130; border-bottom: 1px solid var(--line); }\n.group > .ghdr .tag { margin-left: auto; font: 11px var(--mono); font-weight: 400;\n  letter-spacing: 0; text-transform: none; color: var(--dim); }\n.group > .body { padding: 10px; }\n.group > .body > .blk:last-child { margin-bottom: 0; }\n.group.req { border-left: 3px solid var(--accent); }\n.group.req > .ghdr { color: #9dc1ff; }\n.group.res { border-left: 3px solid var(--ok); }\n.group.res > .ghdr { color: #8ee0c2; }\n.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }\n.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 999px;\n  padding: 3px 12px; font: 12px var(--mono); color: var(--dim); }\n.stat b { color: var(--fg); font-weight: 600; }\npre { margin: 0; padding: 10px 12px; font: 12px/1.55 var(--mono); white-space: pre-wrap;\n  word-break: break-word; overflow-wrap: anywhere; }\npre.text { white-space: pre-wrap; }\nimg.media { display: block; max-width: 100%; max-height: 420px; margin: 10px 12px;\n  border: 1px solid var(--line); border-radius: 6px; background: #0d1017; }\nimg.media.thumb { max-height: 88px; margin: 8px 12px; cursor: zoom-in; }\n.msg { border-top: 1px solid var(--line); border-left: 3px solid transparent; }\n.msg:first-of-type { border-top: none; }\n.msg > .role { padding: 5px 12px; font-size: 11px; text-transform: uppercase;\n  letter-spacing: .05em; color: var(--dim); background: #1b202c;\n  display: flex; justify-content: space-between; }\n.msg.user > .role { color: #9dc1ff; }\n.msg.user { border-left-color: #35507f; }\n.msg.assistant > .role { color: #c3a6ff; }\n.msg.assistant { border-left-color: #5a4380; }\n.msg.tool > .role { color: #8ee0c2; }\n.msg.tool { border-left-color: #2f6b58; }\n.msg.system > .role { color: var(--warn); }\n.msg.system { border-left-color: #7a6535; }\n.msg.err > .role { color: var(--err); }\n.msg.err { border-left-color: #8a3a33; }\n.call { border-top: 1px dashed var(--line); }\n.call .name { padding: 5px 12px; font: 12px var(--mono); color: #8ee0c2; }\ndetails > summary { cursor: pointer; padding: 6px 12px; color: var(--dim); font-size: 12px; }\n.badge { font: 11px var(--mono); color: var(--dim); }\n.badge.ok { color: var(--ok); } .badge.bad { color: var(--err); }\n.empty { padding: 10px 12px; color: var(--dim); font-size: 12px; font-style: italic; }\nbutton.link { background: none; border: none; color: var(--accent); cursor: pointer;\n  font: 12px var(--mono); padding: 0 6px 0 0; }\n";
+export declare const CSS = "\n:root {\n  --bg: #0f1115; --panel: #161922; --line: #262b36; --fg: #d7dbe3; --dim: #8a92a6;\n  --accent: #6ea8fe; --ok: #4ec9a0; --err: #f0776c; --warn: #e2b341; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n* { box-sizing: border-box; }\nbody { margin: 0; background: var(--bg); color: var(--fg);\n  font: 14px/1.5 system-ui, -apple-system, Segoe UI, sans-serif; }\nheader { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel);\n  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }\nheader h1 { font-size: 15px; margin: 0 12px 0 0; font-weight: 600; }\nheader .kv { color: var(--dim); font-size: 12px; }\nheader .kv b { color: var(--fg); font-weight: 600; }\nmain { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 49px); }\naside { border-right: 1px solid var(--line); overflow: auto; background: var(--panel); }\n.pad { padding: 10px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); }\n#filter { width: 100%; padding: 6px 8px; background: var(--bg); color: var(--fg);\n  border: 1px solid var(--line); border-radius: 6px; }\n#timeline { list-style: none; margin: 0; padding: 4px 0; }\n#timeline li { padding: 6px 10px; border-left: 3px solid transparent; cursor: pointer; }\n#timeline li:hover { background: #1c2130; }\n#timeline li.sel { background: #1f2637; border-left-color: var(--accent); }\n#timeline li.covered { opacity: .45; }\n#timeline .row { display: flex; gap: 6px; align-items: baseline; }\n#timeline .t { color: var(--fg); font: 11px var(--mono); min-width: 38px; text-align: right; }\n#timeline .t.same { color: #3d4453; }\n#timeline .dur { margin-left: auto; color: var(--dim); font: 11px var(--mono); }\n#timeline .idx { color: var(--dim); font: 11px var(--mono); min-width: 22px; }\n#timeline .prev { color: var(--dim); font-size: 11px; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; padding-left: 44px; }\n/* Branch histories are contiguous in this list, so a coloured edge plus a\n   header is enough to stop ten parallel branches reading as one long run. */\n#timeline li.sep { cursor: default; padding: 10px 10px 4px; display: flex; gap: 7px;\n  align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;\n  color: var(--dim); border-left-color: transparent; }\n#timeline li.sep:hover { background: none; }\n#timeline li.sep .dot { width: 8px; height: 8px; border-radius: 2px;\n  background: var(--bc, var(--dim)); }\n/* The group header shouts in uppercase; its elapsed time should not. */\n#timeline li.sep .dur { text-transform: none; letter-spacing: 0; }\n/* The branch the join actually waited for. */\n#timeline li.sep.slow { background: #232a38; color: var(--fg); }\n#timeline li.sep.slow .dur { color: var(--fg); }\n#timeline li.branch { padding-left: 20px; border-left-color: var(--bc, var(--line)); }\n#timeline li.branch.sel { border-left-color: var(--bc, var(--accent)); }\n#middle { display: flex; flex-direction: column; overflow: hidden; }\n.tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }\n.tabs button { background: none; border: 1px solid transparent; color: var(--dim);\n  padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }\n.tabs button.on { color: var(--fg); background: var(--panel); border-color: var(--line); }\n#detail { overflow: auto; padding: 16px; flex: 1; }\n#stats { overflow: auto; padding: 16px; flex: 1; }\ntable.st { width: 100%; border-collapse: collapse; font: 12px var(--mono); }\ntable.st th { text-align: right; color: var(--dim); font-weight: 600; padding: 6px 12px;\n  border-bottom: 1px solid var(--line); white-space: nowrap; }\ntable.st td { text-align: right; padding: 5px 12px; border-bottom: 1px solid #1d2230;\n  white-space: nowrap; }\ntable.st th:first-child, table.st td:first-child { text-align: left; }\ntable.st tbody tr:hover { background: #1c2130; }\ntable.st tbody tr:last-child td { border-bottom: none; }\n/* The total is a different kind of row, not one more of the same: it gets its\n   own band so nobody reads it as another model or another agent. */\ntable.st tfoot td { color: var(--fg); font-weight: 600; background: #191e2a;\n  border-top: 1px solid #2b3346; border-bottom: none; padding: 7px 12px; }\ntable.st tfoot td:first-child { color: var(--dim); text-transform: uppercase;\n  letter-spacing: .07em; font-size: 11px; }\n/* Two panes hold a zoomable diagram (the run graph and the architecture), so\n   everything about one is written for both. */\n.pane { display: flex; flex-direction: column; overflow: hidden; flex: 1; }\n/* An explicit display on the pane would otherwise beat the hidden attribute\n   and both views would show at once. */\n.pane[hidden], #detail[hidden], #stats[hidden] { display: none; }\n.pane svg { max-width: none; display: block; }\n.pane .node { cursor: pointer; }\n/* A node with nothing behind it in this run is not clickable, and says so. */\n.pane .node.idle { cursor: default; }\n.gtools { display: flex; align-items: center; gap: 6px; padding: 6px 10px;\n  border-bottom: 1px solid var(--line); background: var(--panel); }\n.gtools button { background: var(--bg); border: 1px solid var(--line); color: var(--fg);\n  border-radius: 6px; padding: 2px 10px; cursor: pointer; font: 12px var(--mono); }\n.gtools button:hover { border-color: var(--accent); }\n.gtools .hint:first-of-type { margin-left: 8px; }\n.gtools .lvl { margin-left: auto; font-family: var(--mono); }\n.gtools label.check { display: flex; align-items: center; gap: 5px; margin-left: 8px;\n  color: var(--dim); font-size: 12px; cursor: pointer; user-select: none; }\n/* The memory view reads left to right: the graph is the index, the panel is\n   the page. Putting the body under a tab of its own would mean losing the\n   picture every time you asked what a node actually says. */\n#memory .split { display: flex; flex: 1; overflow: hidden; }\n#mdetail { width: 380px; flex: none; padding: 16px; overflow: auto;\n  border-right: none; border-left: 1px solid var(--line); }\n#mdetail .dt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }\n#mdetail .idrow { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }\n#mdetail .idrow code { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--fg);\n  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;\n  padding: 4px 8px; word-break: break-all; }\n#mdetail .idrow button { flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line);\n  color: var(--dim); border-radius: 6px; padding: 4px 9px; font: 11px var(--mono);\n  cursor: pointer; }\n#mdetail .idrow button:hover { border-color: var(--accent); color: var(--fg); }\n#mdetail dl.props { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px;\n  margin: 0 0 14px; font: 12px var(--mono); }\n#mdetail dl.props dt { color: var(--dim); }\n#mdetail dl.props dd { margin: 0; word-break: break-word; }\n/* A block that shares the panel's own background has no edges to show. */\n#mdetail section.blk { background: var(--bg); }\n#mdetail ul.links { list-style: none; margin: 0; padding: 0; }\n#mdetail ul.links li { display: grid; grid-template-columns: 96px auto minmax(0, 1fr);\n  gap: 8px; align-items: baseline; padding: 6px 12px; }\n#mdetail ul.links li + li { border-top: 1px solid var(--line); }\n#mdetail ul.links .rel { font: 11px var(--mono); color: var(--warn); white-space: nowrap; }\n#mdetail button.link { font: 12px/1.4 system-ui, sans-serif; padding: 0; text-align: left;\n  overflow-wrap: anywhere; }\n#mdetail button.link:hover { text-decoration: underline; }\n#mcount .ok { color: var(--ok); }\n#mcount .bad { color: var(--err); }\n/* The kind palette is the memory page's, so a node reads the same in both. */\n.kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;\n  padding: 1px 6px; border-radius: 4px; background: #232a38; color: var(--dim); }\n.kind.task { background: #1e3357; color: #9dc1ff; }\n.kind.plan { background: #3a2450; color: #d1a6ff; }\n.kind.fact { background: #14392c; color: #8ee0c2; }\n.kind.snippet { background: #1e3d33; color: #8ee0c2; }\n.kind.file { background: #40331a; color: #f0dfb4; }\n.kind.operation { background: #3d2a1b; color: #f2d9c2; }\n.kind.preference { background: #3d1f2c; color: #f5b8cd; }\n/* Selection is a class rather than attributes written onto the shapes: the\n   previous pick has to lose its outline without a redraw. White, because the\n   accent already means \"the recall matched this one\". */\n#memory .node.picked rect, #memory .node.picked polygon,\n#memory .node.picked path, #memory .node.picked circle {\n  stroke: var(--fg) !important; stroke-width: 4px !important; }\n/* The canvas is transformed, not scrolled: panning has to work past the edges\n   of the diagram, which overflow:auto would forbid. */\n.viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; touch-action: none;\n  user-select: none; -webkit-user-select: none; }\n.viewport.drag { cursor: grabbing; }\n.canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }\n.hint { color: var(--dim); font-size: 12px; }\n.hint.pad { padding: 16px; }\n.type { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;\n  padding: 1px 6px; border-radius: 4px; background: #232a38; color: var(--dim); }\n.type.llm_call { background: #1e3357; color: #9dc1ff; }\n.type.tool_call, .type.tool_result { background: #1e3d33; color: #8ee0c2; }\n.type.compaction { background: #40331a; color: var(--warn); }\n.type.fork, .type.join { background: #3a2450; color: #d1a6ff; }\n.type.final_output { background: #14392c; color: var(--ok); }\n.type.err { background: #4a1f1c; color: var(--err); }\nh2.dt { font-size: 16px; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; }\n.meta { color: var(--dim); font-size: 12px; font-family: var(--mono); margin-bottom: 14px;\n  display: flex; flex-wrap: wrap; gap: 4px 14px; }\nsection.blk { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px;\n  background: var(--panel); overflow: hidden; }\nsection.blk > h3 { margin: 0; padding: 7px 12px; font-size: 12px; font-weight: 600;\n  color: var(--dim); border-bottom: 1px solid var(--line); letter-spacing: .03em; }\nsection.blk > h3 .tag { float: right; font-weight: 400; }\nsection.blk.sys { border-left: 3px solid var(--warn); }\n/* An LLM call has three things a reader wants to tell apart at a glance: what\n   went in, what came back, and what it cost. Groups carry the first two. */\n.group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px;\n  background: #12151d; overflow: hidden; }\n.group > .ghdr { display: flex; align-items: center; gap: 10px; padding: 8px 12px;\n  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;\n  background: #1b2130; border-bottom: 1px solid var(--line); }\n.group > .ghdr .tag { margin-left: auto; font: 11px var(--mono); font-weight: 400;\n  letter-spacing: 0; text-transform: none; color: var(--dim); }\n.group > .body { padding: 10px; }\n.group > .body > .blk:last-child { margin-bottom: 0; }\n.group.req { border-left: 3px solid var(--accent); }\n.group.req > .ghdr { color: #9dc1ff; }\n.group.res { border-left: 3px solid var(--ok); }\n.group.res > .ghdr { color: #8ee0c2; }\n.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }\n.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 999px;\n  padding: 3px 12px; font: 12px var(--mono); color: var(--dim); }\n.stat b { color: var(--fg); font-weight: 600; }\npre { margin: 0; padding: 10px 12px; font: 12px/1.55 var(--mono); white-space: pre-wrap;\n  word-break: break-word; overflow-wrap: anywhere; }\npre.text { white-space: pre-wrap; }\nimg.media { display: block; max-width: 100%; max-height: 420px; margin: 10px 12px;\n  border: 1px solid var(--line); border-radius: 6px; background: #0d1017; }\nimg.media.thumb { max-height: 88px; margin: 8px 12px; cursor: zoom-in; }\n.msg { border-top: 1px solid var(--line); border-left: 3px solid transparent; }\n.msg:first-of-type { border-top: none; }\n.msg > .role { padding: 5px 12px; font-size: 11px; text-transform: uppercase;\n  letter-spacing: .05em; color: var(--dim); background: #1b202c;\n  display: flex; justify-content: space-between; }\n.msg.user > .role { color: #9dc1ff; }\n.msg.user { border-left-color: #35507f; }\n.msg.assistant > .role { color: #c3a6ff; }\n.msg.assistant { border-left-color: #5a4380; }\n.msg.tool > .role { color: #8ee0c2; }\n.msg.tool { border-left-color: #2f6b58; }\n.msg.system > .role { color: var(--warn); }\n.msg.system { border-left-color: #7a6535; }\n.msg.err > .role { color: var(--err); }\n.msg.err { border-left-color: #8a3a33; }\n.call { border-top: 1px dashed var(--line); }\n.call .name { padding: 5px 12px; font: 12px var(--mono); color: #8ee0c2; }\ndetails > summary { cursor: pointer; padding: 6px 12px; color: var(--dim); font-size: 12px; }\n.badge { font: 11px var(--mono); color: var(--dim); }\n.badge.ok { color: var(--ok); } .badge.bad { color: var(--err); }\n.empty { padding: 10px 12px; color: var(--dim); font-size: 12px; font-style: italic; }\nbutton.link { background: none; border: none; color: var(--accent); cursor: pointer;\n  font: 12px var(--mono); padding: 0 6px 0 0; }\n";
 //# sourceMappingURL=css.d.ts.map

package/dist/inspect/css.js

@@ -87,6 +87,55 @@ table.st tfoot td:first-child { color: var(--dim); text-transform: uppercase;
 .gtools button:hover { border-color: var(--accent); }
 .gtools .hint:first-of-type { margin-left: 8px; }
 .gtools .lvl { margin-left: auto; font-family: var(--mono); }
+.gtools label.check { display: flex; align-items: center; gap: 5px; margin-left: 8px;
+  color: var(--dim); font-size: 12px; cursor: pointer; user-select: none; }
+/* The memory view reads left to right: the graph is the index, the panel is
+   the page. Putting the body under a tab of its own would mean losing the
+   picture every time you asked what a node actually says. */
+#memory .split { display: flex; flex: 1; overflow: hidden; }
+#mdetail { width: 380px; flex: none; padding: 16px; overflow: auto;
+  border-right: none; border-left: 1px solid var(--line); }
+#mdetail .dt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
+#mdetail .idrow { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
+#mdetail .idrow code { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--fg);
+  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
+  padding: 4px 8px; word-break: break-all; }
+#mdetail .idrow button { flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line);
+  color: var(--dim); border-radius: 6px; padding: 4px 9px; font: 11px var(--mono);
+  cursor: pointer; }
+#mdetail .idrow button:hover { border-color: var(--accent); color: var(--fg); }
+#mdetail dl.props { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px;
+  margin: 0 0 14px; font: 12px var(--mono); }
+#mdetail dl.props dt { color: var(--dim); }
+#mdetail dl.props dd { margin: 0; word-break: break-word; }
+/* A block that shares the panel's own background has no edges to show. */
+#mdetail section.blk { background: var(--bg); }
+#mdetail ul.links { list-style: none; margin: 0; padding: 0; }
+#mdetail ul.links li { display: grid; grid-template-columns: 96px auto minmax(0, 1fr);
+  gap: 8px; align-items: baseline; padding: 6px 12px; }
+#mdetail ul.links li + li { border-top: 1px solid var(--line); }
+#mdetail ul.links .rel { font: 11px var(--mono); color: var(--warn); white-space: nowrap; }
+#mdetail button.link { font: 12px/1.4 system-ui, sans-serif; padding: 0; text-align: left;
+  overflow-wrap: anywhere; }
+#mdetail button.link:hover { text-decoration: underline; }
+#mcount .ok { color: var(--ok); }
+#mcount .bad { color: var(--err); }
+/* The kind palette is the memory page's, so a node reads the same in both. */
+.kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
+  padding: 1px 6px; border-radius: 4px; background: #232a38; color: var(--dim); }
+.kind.task { background: #1e3357; color: #9dc1ff; }
+.kind.plan { background: #3a2450; color: #d1a6ff; }
+.kind.fact { background: #14392c; color: #8ee0c2; }
+.kind.snippet { background: #1e3d33; color: #8ee0c2; }
+.kind.file { background: #40331a; color: #f0dfb4; }
+.kind.operation { background: #3d2a1b; color: #f2d9c2; }
+.kind.preference { background: #3d1f2c; color: #f5b8cd; }
+/* Selection is a class rather than attributes written onto the shapes: the
+   previous pick has to lose its outline without a redraw. White, because the
+   accent already means "the recall matched this one". */
+#memory .node.picked rect, #memory .node.picked polygon,
+#memory .node.picked path, #memory .node.picked circle {
+  stroke: var(--fg) !important; stroke-width: 4px !important; }
 /* The canvas is transformed, not scrolled: panning has to work past the edges
    of the diagram, which overflow:auto would forbid. */
 .viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; touch-action: none;

package/dist/inspect/index.d.ts

@@ -1,7 +1,7 @@
-import { type ReportOptions, type RunReport } from './report.ts';
-import type { AgentState } from '../state.ts';
 import type { PayloadResolver } from '../payload.ts';
-export { buildRunReport, MAX_BLOB_BYTES, MERMAID_URL, type ReportOptions, type RunReport, } from './report.ts';
+import type { AgentState } from '../state.ts';
+import { type ReportOptions, type RunReport } from './report.ts';
+export { buildRunReport, MAX_BLOB_BYTES, MAX_MEMORY_FILE_BYTES, MERMAID_URL, type ReportOptions, type RunMemory, type RunReport, } from './report.ts';
 /** Report → one standalone HTML document. */
 export declare function renderReportHtml(report: RunReport, opts?: ReportOptions): string;
 /** The usual entry point: state in, HTML out. */

package/dist/inspect/index.js

@@ -1,6 +1,6 @@
 import { page } from "./page.js";
 import { buildRunReport, MERMAID_URL } from "./report.js";
-export { buildRunReport, MAX_BLOB_BYTES, MERMAID_URL, } from "./report.js";
+export { buildRunReport, MAX_BLOB_BYTES, MAX_MEMORY_FILE_BYTES, MERMAID_URL, } from "./report.js";
 /** Report → one standalone HTML document. */
 export function renderReportHtml(report, opts = {}) {
     return page(report, opts.mermaidUrl ?? MERMAID_URL);

package/dist/inspect/page.js

@@ -29,6 +29,7 @@ export function page(report, mermaidUrl) {
       <button data-view="detail">Detail</button>
       <button data-view="stats">Stats</button>
       <button data-view="agents">Agents</button>
+      <button data-view="memory" hidden>Memory</button>
     </div>
     <div id="graph" class="pane">
       <div class="gtools">
@@ -54,6 +55,21 @@ export function page(report, mermaidUrl) {
       </div>
       <div class="viewport"><div class="canvas"><div class="hint pad">rendering…</div></div></div>
     </div>
+    <div id="memory" class="pane" hidden>
+      <div class="gtools">
+        <button data-zoom="out" title="zoom out">−</button>
+        <button data-zoom="in" title="zoom in">+</button>
+        <button data-zoom="fit" title="fit to window (double-click the canvas)">fit</button>
+        <button data-zoom="reset" title="actual size">1:1</button>
+        <label class="check"><input type="checkbox" id="madded"> show what it wrote</label>
+        <span class="hint" id="mcount"></span>
+        <span class="hint lvl">100%</span>
+      </div>
+      <div class="split">
+        <div class="viewport"><div class="canvas"><div class="hint pad">rendering…</div></div></div>
+        <aside id="mdetail"><div class="hint pad">Pick a node.</div></aside>
+      </div>
+    </div>
   </section>
 </main>
 <script id="run-data" type="application/json">${embedJson(report)}</script>

package/dist/inspect/report.d.ts

@@ -1,10 +1,16 @@
 import type { Architecture } from '../architecture.ts';
+import { type ReportNode } from '../memory/report.ts';
+import type { MemoryStore } from '../memory/store.ts';
+import type { MemoryEdge } from '../memory/types.ts';
 import { type PayloadResolver } from '../payload.ts';
 import type { AgentState } from '../state.ts';
 /** Default per-payload inline cap. Keeps one runaway tool result from turning
  *  a report into a file no editor will open. */
 export declare const MAX_BLOB_BYTES: number;
 export declare const MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+/** Deliberately meaner than the memory page's own cap: this file already holds
+ *  a whole run, and one remembered artifact should not decide whether it opens. */
+export declare const MAX_MEMORY_FILE_BYTES: number;
 export interface ReportOptions {
     title?: string;
     /** per-payload inline cap; larger values are cut, with a visible marker */
@@ -22,6 +28,14 @@ export interface ReportOptions {
      * strictly smaller picture but never a wrong one.
      */
     architecture?: Architecture;
+    /**
+     * The memory to resolve recalled and committed nodes against. A trajectory
+     * records ids, kinds and edges but no bodies, so without this the memory
+     * view can draw the shape of what was read and not a word of it.
+     */
+    memory?: MemoryStore;
+    /** ceiling on an inlined remembered file; 0 to inline none */
+    maxMemoryFileBytes?: number;
 }
 /** Everything the page needs, and nothing that needs a store to interpret. */
 export interface RunReport {
@@ -44,6 +58,17 @@ export interface RunReport {
     media: string[];
     /** the declared wiring, when the caller had a runner to ask */
     architecture?: Architecture;
+    /**
+     * The memory nodes this run read or wrote, as the graph holds them *now* —
+     * which is later than the run. The page says so where it matters: a node
+     * can have moved on a revision since, or be gone from the graph entirely.
+     */
+    memory?: RunMemory;
+}
+export interface RunMemory {
+    dir: string;
+    nodes: ReportNode[];
+    edges: MemoryEdge[];
 }
 /**
  * Resolves a state into a self-describing report. Separate from rendering so a