@zenera/neo 1.1.11 → 1.1.14

package/dist/inspect/client.js

@@ -60,6 +60,15 @@ const ROOT = flatten(STATE.trajectory, 0, null);
 
 function names(list) { return list.join(', '); }
 
+// The edges are what makes a recollection a subgraph rather than a hit list,
+// so they are shown even though the injected block already renders them.
+function edgeLines(edges) {
+  if (!edges || !edges.length) return '';
+  return '\\n\\n' + edges.map(function (e) {
+    return e.source + ' --' + e.relation + '--> ' + e.target;
+  }).join('\\n');
+}
+
 function base(path) { return path.split('/').pop() || path; }
 
 function label(n) {
@@ -68,8 +77,8 @@ function label(n) {
     case 'system_prompt': return 'system prompt'
       + (n.sources && n.sources.length ? ': ' + names(n.sources.map(function (s) { return base(s.path); })) : '');
     case 'load_skills': return 'skills: ' + names(n.skills.map(function (s) { return s.name; }));
-    case 'memory_recall': return 'memory recall: ' + n.scope;
-    case 'memory_op': return 'memory ' + n.op;
+    case 'memory_recall': return 'memory recall: ' + n.nodes.length + ' nodes';
+    case 'memory_op': return 'memory ' + n.op + ': ' + n.nodes.length + ' nodes';
     case 'llm_call': return 'llm: ' + n.model + (n.toolCalls.length
       ? ' -> ' + names(n.toolCalls.map(function (c) { return c.name; })) : '');
     case 'tool_call': return 'call: ' + n.name;
@@ -512,18 +521,20 @@ function detailFor(e) {
       break;
 
     case 'memory_recall':
-      out.appendChild(textBlock('Query', JSON.stringify(n.query, null, 2), n.store + ' · ' + n.scope));
-      out.appendChild(textBlock('Hits', n.hits.map(function (hit) {
-        return hit.id + '  score=' + hit.score + '  rev=' + hit.revision;
-      }).join('\\n')));
+      out.appendChild(textBlock('Query', JSON.stringify(n.query, null, 2),
+        n.seeds.length + ' seed(s)'));
+      out.appendChild(textBlock('Subgraph', n.nodes.map(function (m) {
+        return m.id + '  ' + m.kind
+          + (n.seeds.indexOf(m.id) >= 0 ? '  score=' + m.score.toFixed(3) : '  (stitched)');
+      }).join('\\n') + edgeLines(n.edges)));
       out.appendChild(textBlock('Injected block', blob(n.content)));
       break;
 
     case 'memory_op':
-      out.appendChild(textBlock('Operation',
-        n.op + ' ' + n.recordId + ' (rev ' + n.revision + ')', n.store + ' · ' + n.scope));
-      if (n.before) out.appendChild(textBlock('Before', blob(n.before)));
-      if (n.after) out.appendChild(textBlock('After', blob(n.after)));
+      out.appendChild(textBlock('Operation', n.nodes.map(function (m) {
+        return n.op + ' ' + m.id + '  ' + m.kind + '  rev ' + m.revision;
+      }).join('\\n') + edgeLines(n.edges),
+        n.files ? n.files + ' file(s)' : undefined));
       break;
 
     case 'llm_call': {
@@ -792,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) {
@@ -913,6 +928,7 @@ function panZoom(paneId) {
 
 PANES.graph = panZoom('graph');
 PANES.agents = panZoom('agents');
+PANES.memory = panZoom('memory');
 
 // --- diagram --------------------------------------------------------------
 
@@ -998,6 +1014,14 @@ function diagram() {
   return lines.join('\\n');
 }
 
+// Mermaid refuses a diagram past either of these (defaults 500 edges and
+// 50000 characters, which a long run passes easily) and the pane then shows
+// only its error. Both are "secure" options, so initialize() is the one place
+// they can be raised from. The report is a file on disk, not a live page —
+// a slow render beats a refused one.
+const MAX_EDGES = 20000;
+const MAX_TEXT_SIZE = 5000000;
+
 // One Mermaid, two diagrams. Loading it is the only network the page does, so
 // it happens once and both panes wait on the same promise.
 let mermaidLib = null;
@@ -1006,6 +1030,7 @@ function mermaid() {
     mermaidLib = import(MERMAID_URL).then(function (m) {
       m.default.initialize({
         startOnLoad: false, theme: 'dark', securityLevel: 'strict',
+        maxEdges: MAX_EDGES, maxTextSize: MAX_TEXT_SIZE,
         flowchart: { htmlLabels: false }
       });
       return m.default;
@@ -1098,7 +1123,7 @@ ENTRIES.forEach(function (e) {
   } else if (n.type === 'handoff') {
     bump(USED.handoffs, n.from + SEP + n.to, e.key);
   } else if (n.type === 'memory_recall' || n.type === 'memory_op') {
-    bump(USED.memory, n.agent + SEP + n.store + '/' + n.scope, e.key);
+    bump(USED.memory, n.agent, e.key);
   } else if (n.type === 'fork') {
     n.branches.forEach(function (b) { bump(USED.forks, n.agent + SEP + b.agent, e.key); });
   }
@@ -1113,7 +1138,7 @@ function observedArchitecture() {
   const byName = new Map();
   function agentOf(name) {
     if (!byName.has(name)) {
-      byName.set(name, { name: name, tools: [], handoffs: [], memory: [] });
+      byName.set(name, { name: name, tools: [], handoffs: [] });
     }
     return byName.get(name);
   }
@@ -1142,15 +1167,10 @@ function observedArchitecture() {
       agentOf(n.to);
       if (from.handoffs.indexOf(n.to) < 0) from.handoffs.push(n.to);
     } else if (n.type === 'memory_recall' || n.type === 'memory_op') {
-      const known = a.memory.some(function (m) {
-        return m.store === n.store && m.scope === n.scope;
-      });
-      if (!known) {
-        a.memory.push({
-          store: n.store, scope: n.scope,
-          access: n.type === 'memory_op' ? 'read-write' : 'read'
-        });
-      }
+      // 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' && n.op !== 'load') a.memory.access = 'read-write';
     } else if (n.type === 'fork') {
       if (!a.fork) a.fork = { agents: [] };
       n.branches.forEach(function (b) {
@@ -1255,15 +1275,16 @@ function archDiagram() {
       lines.push('  ' + self + ' --- ' + k);
     }
 
-    a.memory.forEach(function (m) {
-      const used = USED.memory.get(a.name + SEP + m.store + '/' + m.scope);
+    if (a.memory) {
+      const used = USED.memory.get(a.name);
       const k = archKey(used);
-      lines.push('  ' + k + '[("' + safe(m.store) + ' / ' + safe(m.scope)
-        + (m.access === 'read-write' ? ' (rw)' : ' (ro)') + '")]');
+      const sees = Array.isArray(a.memory.sees) ? a.memory.sees : [a.memory.sees];
+      lines.push('  ' + k + '[("memory ' + (a.memory.access === 'read' ? '(ro)' : '(rw)')
+        + ' sees ' + safe(sees.join(' ') || '*') + '")]');
       lines.push('  class ' + k + ' mem;');
       if (!used) lines.push('  class ' + k + ' idle;');
       lines.push('  ' + self + ' --- ' + k);
-    });
+    }
     lines.push('  end');
     // Mermaid's default subgraph is a light box, which on a dark page reads as
     // the foreground rather than as the container. An agent nobody entered is
@@ -1319,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