@tangle-network/agent-eval 0.74.0 → 0.75.0

package/dist/openapi.json

@@ -2,7 +2,7 @@
   "openapi": "3.1.0",
   "info": {
     "title": "@tangle-network/agent-eval — wire protocol",
-    "version": "0.74.0",
+    "version": "0.75.0",
     "description": "HTTP and stdio RPC interface to agent-eval. The TypeScript runtime is the source of truth; this spec is the contract that cross-language clients (Python, Rust, Go) generate from.\n\nWire-protocol version: 1.0.0. Bumps on breaking changes to request/response schemas.",
     "contact": {
       "name": "Tangle Network",

package/dist/storyboard/index.d.ts

@@ -1,29 +1,134 @@
 import { S as Span } from '../schema-m0gsnbt3.js';
 
+/**
+ * Code-edit extraction + the "watch the agent write code" animation.
+ *
+ * The base storyboard (./index) compresses a run into scenes but keeps scenes
+ * payload-free (title + narration + evidence span ids). To actually SHOW the
+ * code an agent wrote, this module pulls the concrete edit (path, diff,
+ * before/after, language) out of the raw edit-tool spans and renders a
+ * self-contained HTML replay that types each file out, character by character,
+ * like an editor recording.
+ *
+ * Additive on purpose: it reuses the canonical `Span` (trace/schema) and the
+ * `Storyboard` IR (./index) without modifying the reducer/compiler — so it
+ * composes with the existing pipeline and a Remotion consumer can read the same
+ * `CodeEdit[]` to render an MP4.
+ */
+
+/** A concrete code change lifted from a tool span. */
+interface CodeEdit {
+    /** Span the edit came from — back-reference into the trace. */
+    spanId: string;
+    path: string;
+    language?: string;
+    /** Unified diff, when the tool carried one. */
+    diff?: string;
+    /** Full file body before / after, when present — enables true keystroke
+     *  animation rather than only flashing a diff. */
+    before?: string;
+    after?: string;
+    additions: number;
+    deletions: number;
+    startedAt: number;
+}
+/** Extract a CodeEdit from a single span, or undefined if it is not an edit. */
+declare function codeEditFromSpan(span: Span): CodeEdit | undefined;
+/** All code edits in a run, in chronological order. */
+declare function extractCodeEdits(spans: readonly Span[]): CodeEdit[];
+/** Pair each code-edit (`diff`) scene with its concrete edit, matched via the
+ *  scene's evidence span ids. Scenes without a recoverable edit are dropped. */
+declare function codeEditsForStoryboard(storyboard: Storyboard, spans: readonly Span[]): Array<{
+    scene: Scene;
+    edit: CodeEdit;
+}>;
+/** The text the animation types for an edit: prefer the full new file body,
+ *  then the added lines of a diff, then a minimal placeholder so the scene is
+ *  never blank. */
+declare function editAnimationText(edit: CodeEdit): string;
+interface CodeAnimationOptions {
+    /** Page title. Default "Agent writing code". */
+    title?: string;
+    /** Characters typed per animation tick. Higher = faster. Default 4. */
+    charsPerTick?: number;
+    /** Pause between files, ms. Default 900. */
+    pauseBetweenMs?: number;
+}
+/**
+ * Render a self-contained HTML page that animates the agent writing each file,
+ * character by character, with a filename tab, line numbers, and a blinking
+ * cursor — the shareable "watch it build" clip. No build step, no assets, no
+ * deps. The same `CodeEdit[]` feeds a Remotion MP4 renderer in a consumer
+ * package; this is the dependency-free baseline.
+ */
+declare function renderCodeAnimationHtml(source: readonly Span[] | readonly CodeEdit[], opts?: CodeAnimationOptions): string;
+
 /**
  * Storyboard — compile a raw agent trace into a small set of meaningful scenes,
- * then render them as a shareable replay.
+ * then render them as a shareable, watchable replay.
  *
  *   Span[] → SemanticEvent[] → Storyboard{scenes} → { markdown | html }
  *
  * The trace is the source of truth; the storyboard is the IR; markdown/html
  * (and, in a consumer package, Remotion/MP4) are compiled targets. Everything
  * here is PURE — same spans in, same bytes out (no clock/random) — so a run's
- * replay is deterministic and diffable. The semantic reducer is rules-based:
- * an LLM pass can refine titles later, but the structure does not depend on
- * one. Renderers that need a browser (Remotion, React) live in consumers; this
- * module only emits strings.
+ * replay is deterministic and diffable.
+ *
+ * Crucially, every scene carries a modality-typed VISUAL extracted from the
+ * span — a browser/computer screenshot, a code diff, a terminal command +
+ * output, file content, an API request/response, or reasoning prose — so no
+ * matter what the agent did, the replay SHOWS it, not just narrates it. The
+ * reducer is rules-based; an LLM pass can refine titles/summaries later, but
+ * the structure + visuals do not depend on one. Renderers that need a browser
+ * (Remotion, React) live in consumers; this module only emits strings.
  */
 
-/** What the agent meaningfully did — the compressed vocabulary the storyboard
- *  is built from (the spec's semantic layer). */
-type SemanticKind = 'understood_task' | 'reasoned' | 'ran_command' | 'read_file' | 'edited_code' | 'searched' | 'used_browser' | 'called_tool' | 'evaluated' | 'observed_failure' | 'completed';
+/** What the agent meaningfully did — the compressed vocabulary. */
+type SemanticKind = 'understood_task' | 'reasoned' | 'ran_command' | 'read_file' | 'edited_code' | 'searched' | 'used_browser' | 'used_computer' | 'called_api' | 'called_tool' | 'evaluated' | 'observed_failure' | 'completed';
+/** The modality-typed payload a scene shows. This is what makes any agent
+ *  action — screen, browser, shell, code, API — actually viewable. */
+type SceneVisual = {
+    type: 'screenshot';
+    src: string;
+    caption?: string;
+} | {
+    type: 'browser';
+    url?: string;
+    action?: string;
+    screenshot?: string;
+} | {
+    type: 'diff';
+    path: string;
+    patch: string;
+} | {
+    type: 'code';
+    path: string;
+    content: string;
+} | {
+    type: 'terminal';
+    command: string;
+    output?: string;
+} | {
+    type: 'api';
+    method?: string;
+    url: string;
+    status?: number;
+    request?: string;
+    response?: string;
+} | {
+    type: 'prose';
+    text: string;
+} | {
+    type: 'none';
+};
 interface SemanticEvent {
     kind: SemanticKind;
     /** One-line headline (the ticket/scene title). */
     title: string;
     /** Short human summary. */
     summary: string;
+    /** The modality payload to show for this moment. */
+    visual: SceneVisual;
     /** Span ids backing this moment — the evidence trail. */
     evidenceSpanIds: string[];
     /** 1 (noise) … 5 (pivotal: failures, edits). Drives selection + duration. */
@@ -32,30 +137,28 @@ interface SemanticEvent {
     endTs: number;
 }
 interface ReduceOptions {
-    /** Collapse adjacent same-kind moments into one (e.g. 6 file reads → one
-     *  "explored N files"). Default true — this is the compression that takes a
-     *  4000-event run down to dozens of moments. */
+    /** Collapse adjacent same-kind moments into one. Default true. */
     collapseAdjacent?: boolean;
 }
 /**
- * Reduce a span tree into the meaningful moments a viewer cares about. Spans
- * are sorted by start time; each is classified, then adjacent same-kind
- * moments collapse into one (the compression step). A failure always stands
- * alone (importance 5) so it never gets folded into the noise around it.
+ * Reduce a span tree into the meaningful moments a viewer cares about. Each
+ * span is classified + has its modality visual extracted; adjacent same-kind
+ * moments collapse (the compression step), carrying the latest visual so the
+ * scene shows the most recent state. A failure always stands alone.
  */
 declare function reduceToSemanticEvents(spans: readonly Span[], opts?: ReduceOptions): SemanticEvent[];
-type SceneType = 'title_card' | 'reasoning' | 'terminal' | 'file' | 'diff' | 'search' | 'browser' | 'tool' | 'eval' | 'error' | 'summary';
+type SceneType = 'title_card' | 'reasoning' | 'terminal' | 'file' | 'diff' | 'search' | 'browser' | 'computer' | 'api' | 'tool' | 'eval' | 'error' | 'summary';
 interface Scene {
     sceneType: SceneType;
     title: string;
     narration: string;
+    /** The modality payload the renderer shows. */
+    visual: SceneVisual;
     durationMs: number;
-    /** Span ids behind the scene — the click-through evidence. */
     evidenceSpanIds: string[];
 }
 interface Storyboard {
     title: string;
-    /** Sum of scene durations — the replay length. */
     totalMs: number;
     scenes: Scene[];
 }
@@ -67,10 +170,8 @@ interface CompileOptions {
 }
 /**
  * Select the moments worth showing and lay them out as scenes. Every failure
- * (importance 5) and edit (4) is always kept — those are the story; the rest
- * fill the budget by importance, then everything is re-sorted to chronological
- * order so the replay reads forward in time. A title card opens and a summary
- * card closes.
+ * (importance 5) and edit (4) is always kept; the rest fill the budget by
+ * importance, then re-sort chronological. A title card opens, a summary closes.
  */
 declare function compileStoryboard(events: readonly SemanticEvent[], opts?: CompileOptions): Storyboard;
 /** Render the storyboard as a Markdown timeline — the human-readable shot list. */
@@ -82,10 +183,10 @@ interface HtmlRenderOptions {
 /**
  * Render the storyboard as a self-contained, auto-playing HTML replay — one
  * shareable file, no build step, no external assets. Each scene animates in
- * for its duration with a progress bar; controls let a viewer scrub. This is
- * the "free clip" a run produces; an MP4 is the same storyboard fed to Remotion
- * in a consumer package.
+ * for its duration and SHOWS its modality (screenshot / diff / terminal / API
+ * / browser / prose); controls let a viewer scrub. This is the "free clip" a
+ * run produces; an MP4 is the same storyboard fed to Remotion in a consumer.
  */
 declare function renderStoryboardHtml(storyboard: Storyboard, opts?: HtmlRenderOptions): string;
 
-export { type CompileOptions, type HtmlRenderOptions, type ReduceOptions, type Scene, type SceneType, type SemanticEvent, type SemanticKind, type Storyboard, compileStoryboard, reduceToSemanticEvents, renderStoryboardHtml, renderStoryboardMarkdown };
+export { type CodeAnimationOptions, type CodeEdit, type CompileOptions, type HtmlRenderOptions, type ReduceOptions, type Scene, type SceneType, type SceneVisual, type SemanticEvent, type SemanticKind, type Storyboard, codeEditFromSpan, codeEditsForStoryboard, compileStoryboard, editAnimationText, extractCodeEdits, reduceToSemanticEvents, renderCodeAnimationHtml, renderStoryboardHtml, renderStoryboardMarkdown };

package/dist/storyboard/index.js

@@ -1,11 +1,323 @@
 import "../chunk-PZ5AY32C.js";
 
+// src/storyboard/code-edit.ts
+var EDIT_TOOLS = /(edit|write|patch|apply|str_replace|create.*file|save|insert|update.*file|multi_edit)/i;
+function languageOf(path) {
+  const ext = path.includes(".") ? path.split(".").pop()?.toLowerCase() : void 0;
+  if (!ext) return void 0;
+  const map = {
+    ts: "ts",
+    tsx: "tsx",
+    js: "js",
+    jsx: "jsx",
+    mjs: "js",
+    cjs: "js",
+    py: "python",
+    rs: "rust",
+    go: "go",
+    sol: "solidity",
+    java: "java",
+    rb: "ruby",
+    php: "php",
+    c: "c",
+    cpp: "cpp",
+    cs: "csharp",
+    css: "css",
+    scss: "scss",
+    html: "html",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    md: "markdown",
+    sh: "bash",
+    sql: "sql"
+  };
+  return map[ext] ?? ext;
+}
+function pick(obj, keys) {
+  if (!obj || typeof obj !== "object") return void 0;
+  const rec = obj;
+  for (const k of Object.keys(rec)) {
+    if (keys.includes(k.toLowerCase())) {
+      const v = rec[k];
+      if (typeof v === "string") return v;
+    }
+  }
+  return void 0;
+}
+function countDiff(diff) {
+  if (!diff) return { additions: 0, deletions: 0 };
+  let additions = 0;
+  let deletions = 0;
+  for (const line of diff.split("\n")) {
+    if (line.startsWith("+") && !line.startsWith("+++")) additions++;
+    else if (line.startsWith("-") && !line.startsWith("---")) deletions++;
+  }
+  return { additions, deletions };
+}
+function codeEditFromSpan(span) {
+  if (span.kind !== "tool") return void 0;
+  const tool = span;
+  if (!EDIT_TOOLS.test(tool.toolName)) return void 0;
+  const path = pick(tool.args, ["path", "file_path", "filepath", "filename", "file"]);
+  if (!path) return void 0;
+  const diff = pick(tool.args, ["diff", "patch"]);
+  const after = pick(tool.args, ["content", "new_str", "new_string", "newtext", "text", "body"]);
+  const before = pick(tool.args, ["old_str", "old_string", "oldtext", "original"]);
+  const counts = countDiff(diff);
+  return {
+    spanId: span.spanId,
+    path,
+    language: languageOf(path),
+    diff,
+    before,
+    after,
+    additions: diff ? counts.additions : after ? after.split("\n").length : 0,
+    deletions: diff ? counts.deletions : 0,
+    startedAt: span.startedAt
+  };
+}
+function extractCodeEdits(spans) {
+  return spans.map(codeEditFromSpan).filter((e) => e != null).sort((a, b) => a.startedAt - b.startedAt);
+}
+function codeEditsForStoryboard(storyboard, spans) {
+  const bySpan = new Map(extractCodeEdits(spans).map((e) => [e.spanId, e]));
+  const out = [];
+  for (const scene of storyboard.scenes) {
+    if (scene.sceneType !== "diff") continue;
+    const edit = scene.evidenceSpanIds.map((id) => bySpan.get(id)).find((e) => e != null);
+    if (edit) out.push({ scene, edit });
+  }
+  return out;
+}
+function editAnimationText(edit) {
+  if (edit.after && edit.after.trim()) return edit.after;
+  if (edit.diff) {
+    const added = edit.diff.split("\n").filter((l) => l.startsWith("+") && !l.startsWith("+++")).map((l) => l.slice(1)).join("\n");
+    if (added.trim()) return added;
+  }
+  return `// ${edit.path}
+// (${edit.additions} line${edit.additions === 1 ? "" : "s"} written)`;
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderCodeAnimationHtml(source, opts = {}) {
+  const edits = source.length > 0 && "path" in source[0] ? source : extractCodeEdits(source);
+  const files = edits.map((e) => ({
+    path: e.path,
+    language: e.language ?? "",
+    additions: e.additions,
+    deletions: e.deletions,
+    code: editAnimationText(e)
+  }));
+  const title = opts.title ?? "Agent writing code";
+  const charsPerTick = opts.charsPerTick ?? 4;
+  const pauseBetweenMs = opts.pauseBetweenMs ?? 900;
+  const filesJson = JSON.stringify(files);
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${esc(title)}</title>
+<style>
+  :root { color-scheme: dark; }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: #0b0f17; color: #e6edf3;
+    font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; gap: 14px; }
+  h1 { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: #9aa7b5; margin: 0; }
+  .editor { width: min(900px, 94vw); background: #0d1320; border: 1px solid #1e2a3a; border-radius: 12px;
+    overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
+  .tabbar { display: flex; align-items: center; gap: 8px; background: #111a29; padding: 9px 14px; border-bottom: 1px solid #1e2a3a; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; }
+  .dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
+  .tab { margin-left: 10px; background: #0d1320; padding: 5px 12px; border-radius: 7px 7px 0 0;
+    color: #cdd9e5; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; }
+  .lang { color: #5b6b7d; font-size: .75rem; margin-left: 6px; }
+  .adds { margin-left: auto; color: #3fb950; font-size: .78rem; font-family: ui-sans-serif, system-ui, sans-serif; }
+  .dels { color: #f85149; margin-left: 8px; }
+  .codewrap { display: flex; max-height: 60vh; overflow: auto; }
+  .gutter { padding: 14px 10px 14px 14px; text-align: right; color: #3a4757; user-select: none; white-space: pre; }
+  pre { margin: 0; padding: 14px 18px 14px 6px; white-space: pre; tab-size: 2; flex: 1; }
+  .cursor { display: inline-block; width: 8px; margin-left: 1px; background: #58a6ff; animation: blink .9s steps(1) infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
+  .controls { display: flex; gap: 10px; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; color: #8b98a6; }
+  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }
+  button:hover { background: #243349; }
+  .empty { padding: 40px; color: #5b6b7d; }
+</style>
+</head>
+<body>
+  <h1>\u270F\uFE0F ${esc(title)}</h1>
+  <div class="editor">
+    <div class="tabbar">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="tab" id="tab">\u2014</span><span class="lang" id="lang"></span>
+      <span class="adds" id="adds"></span>
+    </div>
+    <div class="codewrap"><div class="gutter" id="gutter">1</div><pre id="code"></pre></div>
+  </div>
+  <div class="controls">
+    <button id="pp">\u23F8 Pause</button><button id="restart">\u21BB Restart</button>
+    <span id="counter"></span>
+  </div>
+<script>
+  const FILES = ${filesJson};
+  const CPT = ${charsPerTick}, PAUSE = ${pauseBetweenMs};
+  const codeEl = document.getElementById('code'), gutterEl = document.getElementById('gutter');
+  const tabEl = document.getElementById('tab'), langEl = document.getElementById('lang');
+  const addsEl = document.getElementById('adds'), counterEl = document.getElementById('counter');
+  let fi = 0, ci = 0, playing = true, raf = 0, paused = false;
+  if (!FILES.length) { codeEl.innerHTML = '<span class="empty">No code edits in this run.</span>'; }
+  function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+  function setHeader(){ const f = FILES[fi]; tabEl.textContent = f.path; langEl.textContent = f.language || '';
+    addsEl.innerHTML = '+' + f.additions + (f.deletions ? ' <span class="dels">-' + f.deletions + '</span>' : '');
+    counterEl.textContent = (fi+1) + ' / ' + FILES.length + ' files'; }
+  function paint(){ const f = FILES[fi]; const shown = f.code.slice(0, ci);
+    const lines = (shown.match(/\\n/g) || []).length + 1;
+    gutterEl.textContent = Array.from({length: lines}, (_, k) => k+1).join('\\n');
+    codeEl.innerHTML = esc(shown) + '<span class="cursor">&nbsp;</span>';
+    const wrap = codeEl.parentElement; wrap.scrollTop = wrap.scrollHeight; }
+  function tick(){ if (paused || !FILES.length) return;
+    const f = FILES[fi];
+    if (ci < f.code.length){ ci = Math.min(f.code.length, ci + CPT); paint(); raf = requestAnimationFrame(tick); }
+    else if (fi < FILES.length - 1){ setTimeout(() => { fi++; ci = 0; setHeader(); paint(); raf = requestAnimationFrame(tick); }, PAUSE); }
+    else { playing = false; document.getElementById('pp').textContent = '\u25B6 Play'; } }
+  document.getElementById('pp').onclick = () => { if (!playing){ playing = true; paused = false; tick(); } else { paused = !paused; if (!paused) tick(); } document.getElementById('pp').textContent = paused ? '\u25B6 Play' : '\u23F8 Pause'; };
+  document.getElementById('restart').onclick = () => { fi = 0; ci = 0; playing = true; paused = false; document.getElementById('pp').textContent = '\u23F8 Pause'; setHeader(); paint(); cancelAnimationFrame(raf); tick(); };
+  if (FILES.length){ setHeader(); paint(); tick(); }
+</script>
+</body>
+</html>
+`;
+}
+
 // src/storyboard/index.ts
+function str(v) {
+  return typeof v === "string" && v.length > 0 ? v : void 0;
+}
+function num(v) {
+  return typeof v === "number" ? v : void 0;
+}
+function attr(span, ...keys) {
+  const a = span.attributes;
+  if (!a) return void 0;
+  for (const k of keys) if (a[k] != null) return a[k];
+  return void 0;
+}
+function asObj(v) {
+  return v && typeof v === "object" && !Array.isArray(v) ? v : void 0;
+}
+function safeJson(v) {
+  if (v == null) return void 0;
+  if (typeof v === "string") return v;
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+function isImageSrc(s) {
+  return !!s && (s.startsWith("data:image") || /^https?:\/\//.test(s));
+}
+function extractVisual(span) {
+  const shot = str(attr(span, "screenshot", "screenshotUrl", "image", "frame", "videoFrame")) ?? (span.kind === "tool" ? str(asObj(span.result)?.screenshot) ?? str(asObj(span.result)?.image) : void 0);
+  if (span.kind === "tool") {
+    const tn = span.toolName.toLowerCase();
+    const a = asObj(span.args);
+    if (/computer|cua|desktop|\bgui\b|xdotool|mouse|keyboard|screen_|pyautogui/.test(tn)) {
+      return {
+        type: "browser",
+        action: str(a?.action) ?? span.toolName,
+        url: str(a?.target),
+        screenshot: shot
+      };
+    }
+    if (/browser|playwright|puppeteer|\bpage\b|navigate|goto|\bclick\b|\btype\b|screenshot|dom/.test(
+      tn
+    )) {
+      return {
+        type: "browser",
+        url: str(a?.url) ?? str(attr(span, "url")),
+        action: str(a?.action) ?? str(a?.selector) ?? span.toolName,
+        screenshot: shot
+      };
+    }
+    const diff = str(attr(span, "diff", "patch")) ?? str(a?.diff) ?? str(a?.patch);
+    if (diff && /edit|write|patch|apply|str_replace|create|save|file/.test(tn)) {
+      return {
+        type: "diff",
+        path: str(a?.path) ?? str(a?.file) ?? str(attr(span, "path")) ?? "",
+        patch: truncate(diff, 2e3)
+      };
+    }
+    if (/edit|write|patch|apply|str_replace/.test(tn)) {
+      const newText = str(a?.new_str) ?? str(a?.content) ?? str(a?.text);
+      return {
+        type: "diff",
+        path: str(a?.path) ?? str(a?.file) ?? "",
+        patch: newText ? `+ ${truncate(newText, 1600)}` : "(no diff captured)"
+      };
+    }
+    if (/read|\bcat\b|open|view|get_file|load|fetch_file/.test(tn)) {
+      const content = str(asObj(span.result)?.content) ?? (typeof span.result === "string" ? span.result : void 0) ?? str(attr(span, "content"));
+      return {
+        type: "code",
+        path: str(a?.path) ?? str(a?.file) ?? "",
+        content: truncate(content ?? "", 1400)
+      };
+    }
+    if (/search|grep|find|glob|query/.test(tn)) {
+      return {
+        type: "terminal",
+        command: `search ${str(a?.query) ?? str(a?.pattern) ?? ""}`.trim(),
+        output: truncate(safeJson(span.result) ?? "", 1e3)
+      };
+    }
+    const url = str(a?.url) ?? str(attr(span, "url"));
+    if (url || /http|\bapi\b|fetch|request|webhook|rest|graphql|endpoint/.test(tn)) {
+      return {
+        type: "api",
+        method: str(a?.method) ?? str(attr(span, "method")),
+        url: url ?? span.toolName,
+        status: num(attr(span, "status", "statusCode")) ?? num(asObj(span.result)?.status),
+        request: truncate(str(a?.body) ?? safeJson(span.args) ?? "", 900),
+        response: truncate(str(attr(span, "response")) ?? safeJson(span.result) ?? "", 900)
+      };
+    }
+    if (/shell|exec|bash|\brun\b|terminal|command|sandbox|process/.test(tn)) {
+      const command = typeof span.args === "string" ? span.args : str(a?.command) ?? str(a?.cmd) ?? span.toolName;
+      const output = str(attr(span, "output", "stdout")) ?? (typeof span.result === "string" ? span.result : safeJson(span.result));
+      return {
+        type: "terminal",
+        command: truncate(command, 240),
+        output: truncate(output ?? "", 1400)
+      };
+    }
+    return {
+      type: "api",
+      url: span.toolName,
+      request: truncate(safeJson(span.args) ?? "", 900),
+      response: truncate(safeJson(span.result) ?? "", 900)
+    };
+  }
+  if (isImageSrc(shot)) return { type: "screenshot", src: shot };
+  if (span.kind === "llm") {
+    const text = str(span.output) ?? str(span.messages?.[span.messages.length - 1]?.content);
+    return text ? { type: "prose", text: truncate(text, 900) } : { type: "none" };
+  }
+  if (span.kind === "sandbox")
+    return { type: "terminal", command: span.name, output: str(attr(span, "output")) };
+  return { type: "none" };
+}
 function toolLabel(span) {
   if (span.kind === "tool") {
-    const tn = span.toolName;
-    const arg = typeof span.args === "string" ? span.args : span.args && typeof span.args === "object" ? Object.values(span.args).find((v) => typeof v === "string") : void 0;
-    return typeof arg === "string" && arg.length > 0 ? `${tn}: ${truncate(arg, 60)}` : tn;
+    const a = asObj(span.args);
+    const arg = typeof span.args === "string" ? span.args : a ? str(a.path) ?? str(a.url) ?? str(a.command) ?? str(a.query) ?? Object.values(a).find((v) => typeof v === "string") : void 0;
+    return typeof arg === "string" && arg.length > 0 ? `${span.toolName}: ${truncate(arg, 60)}` : span.toolName;
   }
   return span.name;
 }
@@ -13,36 +325,28 @@ function classify(span) {
   if (span.status === "error" || span.error) {
     return { kind: "observed_failure", importance: 5, label: span.error ?? span.name };
   }
-  if (span.kind === "llm" || span.kind === "agent") {
+  if (span.kind === "llm" || span.kind === "agent")
     return { kind: "reasoned", importance: 2, label: span.name };
-  }
-  if (span.kind === "judge") {
-    return { kind: "evaluated", importance: 2, label: span.name };
-  }
-  if (span.kind === "retrieval") {
-    return { kind: "searched", importance: 2, label: span.name };
-  }
-  if (span.kind === "sandbox") {
-    return { kind: "ran_command", importance: 3, label: span.name };
-  }
+  if (span.kind === "judge") return { kind: "evaluated", importance: 2, label: span.name };
+  if (span.kind === "retrieval") return { kind: "searched", importance: 2, label: span.name };
+  if (span.kind === "sandbox") return { kind: "ran_command", importance: 3, label: span.name };
   if (span.kind === "tool") {
     const tn = span.toolName.toLowerCase();
     const label = toolLabel(span);
-    if (/shell|exec|bash|\brun\b|terminal|command/.test(tn)) {
-      return { kind: "ran_command", importance: 3, label };
-    }
-    if (/edit|write|patch|apply|str_replace|create.*file|save/.test(tn)) {
+    if (/computer|cua|desktop|\bgui\b|xdotool|pyautogui/.test(tn))
+      return { kind: "used_computer", importance: 3, label };
+    if (/browser|playwright|puppeteer|\bpage\b|navigate|goto|\bclick\b|screenshot|dom/.test(tn))
+      return { kind: "used_browser", importance: 3, label };
+    if (/edit|write|patch|apply|str_replace|create.*file|save/.test(tn))
       return { kind: "edited_code", importance: 4, label };
-    }
-    if (/read|\bcat\b|open|view|get.*file|load/.test(tn)) {
+    if (/read|\bcat\b|open|view|get.*file|load/.test(tn))
       return { kind: "read_file", importance: 2, label };
+    if (/search|grep|find|glob|query/.test(tn)) return { kind: "searched", importance: 2, label };
+    if (/http|\bapi\b|fetch|request|webhook|rest|graphql|endpoint/.test(tn) || str(asObj(span.args)?.url)) {
+      return { kind: "called_api", importance: 3, label };
     }
-    if (/search|grep|find|glob|query/.test(tn)) {
-      return { kind: "searched", importance: 2, label };
-    }
-    if (/browser|playwright|click|navigate|goto|screenshot|page/.test(tn)) {
-      return { kind: "used_browser", importance: 3, label };
-    }
+    if (/shell|exec|bash|\brun\b|terminal|command|process/.test(tn))
+      return { kind: "ran_command", importance: 3, label };
     return { kind: "called_tool", importance: 3, label };
   }
   return { kind: "called_tool", importance: 2, label: span.name };
@@ -54,7 +358,9 @@ var KIND_VERB = {
   read_file: "Read files",
   edited_code: "Edited code",
   searched: "Searched",
-  used_browser: "Drove the browser",
+  used_browser: "Used the browser",
+  used_computer: "Controlled the computer",
+  called_api: "Called an API",
   called_tool: "Used a tool",
   evaluated: "Evaluated the result",
   observed_failure: "Hit a failure",
@@ -69,6 +375,7 @@ function reduceToSemanticEvents(spans, opts = {}) {
       kind: c.kind,
       title: c.label,
       summary: `${KIND_VERB[c.kind]} \u2014 ${c.label}`,
+      visual: extractVisual(s),
       evidenceSpanIds: [s.spanId],
       importance: c.importance,
       startTs: s.startedAt,
@@ -82,6 +389,7 @@ function reduceToSemanticEvents(spans, opts = {}) {
     if (prev && prev.kind === ev.kind && ev.kind !== "observed_failure") {
       prev.evidenceSpanIds.push(...ev.evidenceSpanIds);
       prev.endTs = Math.max(prev.endTs, ev.endTs);
+      if (ev.visual.type !== "none") prev.visual = ev.visual;
       const n = prev.evidenceSpanIds.length;
       prev.title = `${KIND_VERB[ev.kind]} (${n}\xD7)`;
       prev.summary = `${KIND_VERB[ev.kind]} ${n} time${n === 1 ? "" : "s"} \u2014 latest: ${ev.title}`;
@@ -99,6 +407,8 @@ var KIND_TO_SCENE = {
   edited_code: "diff",
   searched: "search",
   used_browser: "browser",
+  used_computer: "computer",
+  called_api: "api",
   called_tool: "tool",
   evaluated: "eval",
   observed_failure: "error",
@@ -123,6 +433,7 @@ function compileStoryboard(events, opts = {}) {
     sceneType: KIND_TO_SCENE[ev.kind],
     title: ev.title,
     narration: ev.summary,
+    visual: ev.visual,
     durationMs: DURATION_BY_IMPORTANCE[ev.importance],
     evidenceSpanIds: ev.evidenceSpanIds
   }));
@@ -135,6 +446,7 @@ function compileStoryboard(events, opts = {}) {
       sceneType: "title_card",
       title,
       narration: "The agent receives its task.",
+      visual: { type: "none" },
       durationMs: 3e3,
       evidenceSpanIds: []
     },
@@ -143,6 +455,7 @@ function compileStoryboard(events, opts = {}) {
       sceneType: "summary",
       title: failures > 0 ? "Finished \u2014 with failures" : "Finished",
       narration: summaryNarration,
+      visual: { type: "none" },
       durationMs: 4e3,
       evidenceSpanIds: []
     }
@@ -157,6 +470,8 @@ var SCENE_ICON = {
   diff: "\u270F\uFE0F",
   search: "\u{1F50E}",
   browser: "\u{1F310}",
+  computer: "\u{1F5A5}\uFE0F",
+  api: "\u{1F50C}",
   tool: "\u{1F527}",
   eval: "\u2696\uFE0F",
   error: "\u274C",
@@ -172,6 +487,76 @@ function truncate(s, max) {
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function visualMarkdown(v) {
+  switch (v.type) {
+    case "screenshot":
+      return `\u{1F5BC} screenshot (${truncate(v.src, 60)})`;
+    case "browser":
+      return `\u{1F310} ${v.action ?? "browser"}${v.url ? ` \u2192 ${v.url}` : ""}${v.screenshot ? " [screenshot]" : ""}`;
+    case "diff":
+      return `
+
+\`\`\`diff
+${truncate(v.patch, 600)}
+\`\`\`${v.path ? `
+_${v.path}_` : ""}`;
+    case "code":
+      return `
+
+\`\`\`
+${truncate(v.content, 500)}
+\`\`\`${v.path ? `
+_${v.path}_` : ""}`;
+    case "terminal":
+      return `
+
+\`\`\`sh
+$ ${v.command}${v.output ? `
+${truncate(v.output, 500)}` : ""}
+\`\`\``;
+    case "api":
+      return `\u{1F50C} ${v.method ?? "CALL"} ${v.url}${v.status != null ? ` \u2192 ${v.status}` : ""}`;
+    case "prose":
+      return `
+
+> ${truncate(v.text, 400).replace(/\n/g, "\n> ")}`;
+    default:
+      return "";
+  }
+}
+function visualHtml(v) {
+  switch (v.type) {
+    case "screenshot":
+      return `<img class="shot" src="${escapeHtml(v.src)}" alt="screenshot" loading="lazy"/>`;
+    case "browser": {
+      const bar = `<div class="urlbar">${escapeHtml(v.url ?? v.action ?? "browser")}</div>`;
+      const body = isImageSrc(v.screenshot) ? `<img class="shot" src="${escapeHtml(v.screenshot)}" alt="page" loading="lazy"/>` : `<div class="browser-action">${escapeHtml(v.action ?? "navigated")}</div>`;
+      return `<div class="browser">${bar}${body}</div>`;
+    }
+    case "diff": {
+      const lines = v.patch.split("\n").map((l) => {
+        const cls = l.startsWith("+") ? "add" : l.startsWith("-") ? "del" : "";
+        return `<span class="${cls}">${escapeHtml(l)}</span>`;
+      });
+      return `${v.path ? `<div class="pathhdr">${escapeHtml(v.path)}</div>` : ""}<pre class="diff">${lines.join("\n")}</pre>`;
+    }
+    case "code":
+      return `${v.path ? `<div class="pathhdr">${escapeHtml(v.path)}</div>` : ""}<pre class="code">${escapeHtml(v.content)}</pre>`;
+    case "terminal":
+      return `<pre class="term"><span class="cmd">$ ${escapeHtml(v.command)}</span>${v.output ? `
+${escapeHtml(v.output)}` : ""}</pre>`;
+    case "api": {
+      const badge = `<span class="method">${escapeHtml(v.method ?? "CALL")}</span> <span class="url">${escapeHtml(v.url)}</span>${v.status != null ? ` <span class="status s${Math.floor(v.status / 100)}">${v.status}</span>` : ""}`;
+      const req = v.request ? `<div class="kv"><b>req</b><pre>${escapeHtml(v.request)}</pre></div>` : "";
+      const res = v.response ? `<div class="kv"><b>res</b><pre>${escapeHtml(v.response)}</pre></div>` : "";
+      return `<div class="api"><div class="apihdr">${badge}</div>${req}${res}</div>`;
+    }
+    case "prose":
+      return `<div class="prose">${escapeHtml(v.text)}</div>`;
+    default:
+      return "";
+  }
+}
 function renderStoryboardMarkdown(storyboard) {
   const out = [
     `# \u{1F3AC} ${storyboard.title}`,
@@ -184,11 +569,11 @@ function renderStoryboardMarkdown(storyboard) {
     out.push(`### [${mmss(elapsed)}] ${SCENE_ICON[sc.sceneType]} ${sc.title}`);
     out.push("");
     out.push(sc.narration);
+    const vm = visualMarkdown(sc.visual);
+    if (vm) out.push(vm);
     if (sc.evidenceSpanIds.length > 0) {
       out.push("");
-      out.push(
-        `_evidence: ${sc.evidenceSpanIds.length} span(s) \u2014 ${sc.evidenceSpanIds.slice(0, 6).join(", ")}_`
-      );
+      out.push(`_evidence: ${sc.evidenceSpanIds.length} span(s)_`);
     }
     out.push("");
     elapsed += sc.durationMs;
@@ -204,9 +589,10 @@ function renderStoryboardHtml(storyboard, opts = {}) {
       title: s.title,
       narration: s.narration,
       durationMs: s.durationMs,
-      evidence: s.evidenceSpanIds.length
+      evidence: s.evidenceSpanIds.length,
+      visual: visualHtml(s.visual)
     }))
-  );
+  ).replace(/</g, "\\u003c");
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -218,26 +604,41 @@ function renderStoryboardHtml(storyboard, opts = {}) {
   * { box-sizing: border-box; }
   body { margin: 0; font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
     background: #0b0f17; color: #e6edf3; display: flex; min-height: 100vh; align-items: center; justify-content: center; }
-  .stage { width: min(820px, 94vw); }
+  .stage { width: min(900px, 95vw); }
   h1 { font-size: 1.1rem; font-weight: 600; color: #9aa7b5; margin: 0 0 14px; letter-spacing: .02em; }
-  .card { background: #111824; border: 1px solid #1e2a3a; border-radius: 14px; padding: 28px 30px;
-    min-height: 230px; box-shadow: 0 12px 40px rgba(0,0,0,.45); position: relative; overflow: hidden; }
+  .card { background: #111824; border: 1px solid #1e2a3a; border-radius: 14px; padding: 24px 28px;
+    min-height: 300px; box-shadow: 0 12px 40px rgba(0,0,0,.45); position: relative; overflow: hidden; }
   .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, #3b82f6); }
-  .icon { font-size: 2.6rem; line-height: 1; }
-  .title { font-size: 1.5rem; font-weight: 650; margin: 14px 0 8px; }
-  .narration { color: #b6c2cf; font-size: 1.05rem; }
-  .meta { position: absolute; bottom: 16px; right: 22px; color: #5b6b7d; font-size: .8rem; }
+  .head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+  .icon { font-size: 2rem; line-height: 1; }
+  .title { font-size: 1.3rem; font-weight: 650; }
+  .narration { color: #9fb0c0; font-size: .95rem; margin-bottom: 14px; }
+  .visual { margin-top: 6px; }
+  .visual img.shot { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid #1e2a3a; display: block; }
+  .visual pre { background: #0a0e15; border: 1px solid #1e2a3a; border-radius: 8px; padding: 12px 14px;
+    overflow: auto; max-height: 340px; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
+  .pathhdr { font: 12px ui-monospace, monospace; color: #7d8da0; margin-bottom: 4px; }
+  .diff .add { color: #56d364; } .diff .del { color: #f85149; }
+  .term .cmd { color: #eab308; }
+  .browser { border: 1px solid #1e2a3a; border-radius: 8px; overflow: hidden; }
+  .urlbar { background: #0a0e15; padding: 7px 12px; font: 12px ui-monospace, monospace; color: #8b98a6; border-bottom: 1px solid #1e2a3a; }
+  .browser-action { padding: 28px; color: #9fb0c0; text-align: center; }
+  .api .apihdr { font: 13px ui-monospace, monospace; margin-bottom: 8px; }
+  .method { background: #1b2636; padding: 2px 8px; border-radius: 5px; color: #79c0ff; }
+  .status.s2 { color: #56d364; } .status.s4, .status.s5 { color: #f85149; }
+  .kv { margin-top: 6px; } .kv b { color: #7d8da0; font-weight: 600; font-size: 12px; }
+  .prose { color: #c9d4e0; font-size: 1rem; white-space: pre-wrap; max-height: 340px; overflow: auto; }
   .type-error { --accent: #ef4444; } .type-diff { --accent: #22c55e; } .type-terminal { --accent: #eab308; }
-  .type-browser { --accent: #06b6d4; } .type-summary { --accent: #a855f7; } .type-title_card { --accent: #3b82f6; }
+  .type-browser { --accent: #06b6d4; } .type-computer { --accent: #14b8a6; } .type-api { --accent: #79c0ff; }
+  .type-summary { --accent: #a855f7; } .type-title_card { --accent: #3b82f6; }
   .scene-enter { animation: pop .45s cubic-bezier(.2,.7,.3,1.2); }
   @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
-  .bar { height: 4px; background: #1e2a3a; border-radius: 4px; margin-top: 16px; overflow: hidden; }
+  .bar { height: 4px; background: #1e2a3a; border-radius: 4px; margin-top: 14px; overflow: hidden; }
   .bar > i { display: block; height: 100%; width: 0; background: var(--accent, #3b82f6); transition: width .1s linear; }
   .controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: #8b98a6; font-size: .85rem; }
-  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px;
-    padding: 6px 12px; cursor: pointer; font: inherit; }
+  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }
   button:hover { background: #243349; }
-  .dots { display: flex; gap: 5px; margin-left: auto; }
+  .dots { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
   .dot { width: 7px; height: 7px; border-radius: 50%; background: #2a3a4f; cursor: pointer; }
   .dot.on { background: var(--accent, #3b82f6); }
 </style>
@@ -246,10 +647,9 @@ function renderStoryboardHtml(storyboard, opts = {}) {
 <div class="stage">
   <h1>\u{1F3AC} ${escapeHtml(docTitle)}</h1>
   <div class="card" id="card">
-    <div class="icon" id="icon"></div>
-    <div class="title" id="title"></div>
+    <div class="head"><span class="icon" id="icon"></span><span class="title" id="title"></span></div>
     <div class="narration" id="narration"></div>
-    <div class="meta" id="meta"></div>
+    <div class="visual" id="visual"></div>
     <div class="bar"><i id="fill"></i></div>
   </div>
   <div class="controls">
@@ -263,8 +663,7 @@ function renderStoryboardHtml(storyboard, opts = {}) {
 <script>
   const SCENES = ${scenesJson};
   let i = 0, playing = true, raf = 0, start = 0;
-  const card = document.getElementById('card'), counter = document.getElementById('counter');
-  const dotsEl = document.getElementById('dots');
+  const card = document.getElementById('card'), counter = document.getElementById('counter'), dotsEl = document.getElementById('dots');
   SCENES.forEach((_, k) => { const d = document.createElement('span'); d.className = 'dot'; d.onclick = () => go(k); dotsEl.appendChild(d); });
   function paint() {
     const s = SCENES[i];
@@ -272,7 +671,7 @@ function renderStoryboardHtml(storyboard, opts = {}) {
     document.getElementById('icon').textContent = s.icon;
     document.getElementById('title').textContent = s.title;
     document.getElementById('narration').textContent = s.narration;
-    document.getElementById('meta').textContent = s.evidence ? (s.evidence + ' span' + (s.evidence === 1 ? '' : 's')) : '';
+    document.getElementById('visual').innerHTML = s.visual || '';
     counter.textContent = (i + 1) + ' / ' + SCENES.length;
     [...dotsEl.children].forEach((d, k) => d.className = 'dot' + (k === i ? ' on' : ''));
     void card.offsetWidth;
@@ -296,8 +695,13 @@ function renderStoryboardHtml(storyboard, opts = {}) {
 `;
 }
 export {
+  codeEditFromSpan,
+  codeEditsForStoryboard,
   compileStoryboard,
+  editAnimationText,
+  extractCodeEdits,
   reduceToSemanticEvents,
+  renderCodeAnimationHtml,
   renderStoryboardHtml,
   renderStoryboardMarkdown
 };

package/dist/storyboard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/storyboard/index.ts"],"sourcesContent":["/**\n * Storyboard — compile a raw agent trace into a small set of meaningful scenes,\n * then render them as a shareable replay.\n *\n *   Span[] → SemanticEvent[] → Storyboard{scenes} → { markdown | html }\n *\n * The trace is the source of truth; the storyboard is the IR; markdown/html\n * (and, in a consumer package, Remotion/MP4) are compiled targets. Everything\n * here is PURE — same spans in, same bytes out (no clock/random) — so a run's\n * replay is deterministic and diffable. The semantic reducer is rules-based:\n * an LLM pass can refine titles later, but the structure does not depend on\n * one. Renderers that need a browser (Remotion, React) live in consumers; this\n * module only emits strings.\n */\n\nimport type { Span } from '../trace/schema'\n\n/** What the agent meaningfully did — the compressed vocabulary the storyboard\n *  is built from (the spec's semantic layer). */\nexport type SemanticKind =\n  | 'understood_task'\n  | 'reasoned'\n  | 'ran_command'\n  | 'read_file'\n  | 'edited_code'\n  | 'searched'\n  | 'used_browser'\n  | 'called_tool'\n  | 'evaluated'\n  | 'observed_failure'\n  | 'completed'\n\nexport interface SemanticEvent {\n  kind: SemanticKind\n  /** One-line headline (the ticket/scene title). */\n  title: string\n  /** Short human summary. */\n  summary: string\n  /** Span ids backing this moment — the evidence trail. */\n  evidenceSpanIds: string[]\n  /** 1 (noise) … 5 (pivotal: failures, edits). Drives selection + duration. */\n  importance: 1 | 2 | 3 | 4 | 5\n  startTs: number\n  endTs: number\n}\n\nexport interface ReduceOptions {\n  /** Collapse adjacent same-kind moments into one (e.g. 6 file reads → one\n   *  \"explored N files\"). Default true — this is the compression that takes a\n   *  4000-event run down to dozens of moments. */\n  collapseAdjacent?: boolean\n}\n\ninterface Classified {\n  kind: SemanticKind\n  importance: 1 | 2 | 3 | 4 | 5\n  /** A short label for the span's action (e.g. the command, the file). */\n  label: string\n}\n\nfunction toolLabel(span: Span): string {\n  if (span.kind === 'tool') {\n    const tn = span.toolName\n    const arg =\n      typeof span.args === 'string'\n        ? span.args\n        : span.args && typeof span.args === 'object'\n          ? Object.values(span.args as Record<string, unknown>).find((v) => typeof v === 'string')\n          : undefined\n    return typeof arg === 'string' && arg.length > 0 ? `${tn}: ${truncate(arg, 60)}` : tn\n  }\n  return span.name\n}\n\nfunction classify(span: Span): Classified {\n  // A failed span is pivotal regardless of what it was doing.\n  if (span.status === 'error' || span.error) {\n    return { kind: 'observed_failure', importance: 5, label: span.error ?? span.name }\n  }\n  if (span.kind === 'llm' || span.kind === 'agent') {\n    return { kind: 'reasoned', importance: 2, label: span.name }\n  }\n  if (span.kind === 'judge') {\n    return { kind: 'evaluated', importance: 2, label: span.name }\n  }\n  if (span.kind === 'retrieval') {\n    return { kind: 'searched', importance: 2, label: span.name }\n  }\n  if (span.kind === 'sandbox') {\n    return { kind: 'ran_command', importance: 3, label: span.name }\n  }\n  if (span.kind === 'tool') {\n    const tn = span.toolName.toLowerCase()\n    const label = toolLabel(span)\n    if (/shell|exec|bash|\\brun\\b|terminal|command/.test(tn)) {\n      return { kind: 'ran_command', importance: 3, label }\n    }\n    if (/edit|write|patch|apply|str_replace|create.*file|save/.test(tn)) {\n      return { kind: 'edited_code', importance: 4, label }\n    }\n    if (/read|\\bcat\\b|open|view|get.*file|load/.test(tn)) {\n      return { kind: 'read_file', importance: 2, label }\n    }\n    if (/search|grep|find|glob|query/.test(tn)) {\n      return { kind: 'searched', importance: 2, label }\n    }\n    if (/browser|playwright|click|navigate|goto|screenshot|page/.test(tn)) {\n      return { kind: 'used_browser', importance: 3, label }\n    }\n    return { kind: 'called_tool', importance: 3, label }\n  }\n  return { kind: 'called_tool', importance: 2, label: span.name }\n}\n\nconst KIND_VERB: Record<SemanticKind, string> = {\n  understood_task: 'Received the task',\n  reasoned: 'Reasoned',\n  ran_command: 'Ran a command',\n  read_file: 'Read files',\n  edited_code: 'Edited code',\n  searched: 'Searched',\n  used_browser: 'Drove the browser',\n  called_tool: 'Used a tool',\n  evaluated: 'Evaluated the result',\n  observed_failure: 'Hit a failure',\n  completed: 'Finished',\n}\n\n/**\n * Reduce a span tree into the meaningful moments a viewer cares about. Spans\n * are sorted by start time; each is classified, then adjacent same-kind\n * moments collapse into one (the compression step). A failure always stands\n * alone (importance 5) so it never gets folded into the noise around it.\n */\nexport function reduceToSemanticEvents(\n  spans: readonly Span[],\n  opts: ReduceOptions = {},\n): SemanticEvent[] {\n  const collapse = opts.collapseAdjacent ?? true\n  const ordered = [...spans].sort((a, b) => a.startedAt - b.startedAt)\n  const raw: SemanticEvent[] = ordered.map((s) => {\n    const c = classify(s)\n    return {\n      kind: c.kind,\n      title: c.label,\n      summary: `${KIND_VERB[c.kind]} — ${c.label}`,\n      evidenceSpanIds: [s.spanId],\n      importance: c.importance,\n      startTs: s.startedAt,\n      endTs: s.endedAt ?? s.startedAt,\n    }\n  })\n  if (!collapse) return raw\n\n  const merged: SemanticEvent[] = []\n  for (const ev of raw) {\n    const prev = merged[merged.length - 1]\n    // Never fold a failure, and never fold across kinds.\n    if (prev && prev.kind === ev.kind && ev.kind !== 'observed_failure') {\n      prev.evidenceSpanIds.push(...ev.evidenceSpanIds)\n      prev.endTs = Math.max(prev.endTs, ev.endTs)\n      const n = prev.evidenceSpanIds.length\n      prev.title = `${KIND_VERB[ev.kind]} (${n}×)`\n      prev.summary = `${KIND_VERB[ev.kind]} ${n} time${n === 1 ? '' : 's'} — latest: ${ev.title}`\n    } else {\n      merged.push({ ...ev, evidenceSpanIds: [...ev.evidenceSpanIds] })\n    }\n  }\n  return merged\n}\n\n// ── Storyboard ────────────────────────────────────────────────────────────\n\nexport type SceneType =\n  | 'title_card'\n  | 'reasoning'\n  | 'terminal'\n  | 'file'\n  | 'diff'\n  | 'search'\n  | 'browser'\n  | 'tool'\n  | 'eval'\n  | 'error'\n  | 'summary'\n\nexport interface Scene {\n  sceneType: SceneType\n  title: string\n  narration: string\n  durationMs: number\n  /** Span ids behind the scene — the click-through evidence. */\n  evidenceSpanIds: string[]\n}\n\nexport interface Storyboard {\n  title: string\n  /** Sum of scene durations — the replay length. */\n  totalMs: number\n  scenes: Scene[]\n}\n\nexport interface CompileOptions {\n  /** Headline for the title card. Default \"Agent run\". */\n  title?: string\n  /** Max action scenes between the title + summary cards. Default 16. */\n  maxScenes?: number\n}\n\nconst KIND_TO_SCENE: Record<SemanticKind, SceneType> = {\n  understood_task: 'title_card',\n  reasoned: 'reasoning',\n  ran_command: 'terminal',\n  read_file: 'file',\n  edited_code: 'diff',\n  searched: 'search',\n  used_browser: 'browser',\n  called_tool: 'tool',\n  evaluated: 'eval',\n  observed_failure: 'error',\n  completed: 'summary',\n}\n\n// Pivotal moments earn longer screen time.\nconst DURATION_BY_IMPORTANCE: Record<1 | 2 | 3 | 4 | 5, number> = {\n  1: 2500,\n  2: 3000,\n  3: 4000,\n  4: 5000,\n  5: 6000,\n}\n\n/**\n * Select the moments worth showing and lay them out as scenes. Every failure\n * (importance 5) and edit (4) is always kept — those are the story; the rest\n * fill the budget by importance, then everything is re-sorted to chronological\n * order so the replay reads forward in time. A title card opens and a summary\n * card closes.\n */\nexport function compileStoryboard(\n  events: readonly SemanticEvent[],\n  opts: CompileOptions = {},\n): Storyboard {\n  const title = opts.title ?? 'Agent run'\n  const maxScenes = opts.maxScenes ?? 16\n\n  const indexed = events.map((ev, i) => ({ ev, i }))\n  const mustKeep = indexed.filter(({ ev }) => ev.importance >= 4)\n  const rest = indexed\n    .filter(({ ev }) => ev.importance < 4)\n    .sort((a, b) => b.ev.importance - a.ev.importance || a.i - b.i)\n  const budget = Math.max(0, maxScenes - mustKeep.length)\n  const selected = [...mustKeep, ...rest.slice(0, budget)].sort((a, b) => a.i - b.i)\n\n  const actionScenes: Scene[] = selected.map(({ ev }) => ({\n    sceneType: KIND_TO_SCENE[ev.kind],\n    title: ev.title,\n    narration: ev.summary,\n    durationMs: DURATION_BY_IMPORTANCE[ev.importance],\n    evidenceSpanIds: ev.evidenceSpanIds,\n  }))\n\n  const failures = events.filter((e) => e.kind === 'observed_failure').length\n  const edits = events.filter((e) => e.kind === 'edited_code').length\n  const commands = events.filter((e) => e.kind === 'ran_command').length\n  const summaryNarration =\n    `${events.length} moments · ${commands} command${commands === 1 ? '' : 's'} · ` +\n    `${edits} edit${edits === 1 ? '' : 's'} · ${failures} failure${failures === 1 ? '' : 's'}`\n\n  const scenes: Scene[] = [\n    {\n      sceneType: 'title_card',\n      title,\n      narration: 'The agent receives its task.',\n      durationMs: 3000,\n      evidenceSpanIds: [],\n    },\n    ...actionScenes,\n    {\n      sceneType: 'summary',\n      title: failures > 0 ? 'Finished — with failures' : 'Finished',\n      narration: summaryNarration,\n      durationMs: 4000,\n      evidenceSpanIds: [],\n    },\n  ]\n  return { title, totalMs: scenes.reduce((s, sc) => s + sc.durationMs, 0), scenes }\n}\n\n// ── Renderers (pure string out) ─────────────────────────────────────────────\n\nconst SCENE_ICON: Record<SceneType, string> = {\n  title_card: '🎬',\n  reasoning: '🧠',\n  terminal: '⌨️',\n  file: '📄',\n  diff: '✏️',\n  search: '🔎',\n  browser: '🌐',\n  tool: '🔧',\n  eval: '⚖️',\n  error: '❌',\n  summary: '🏁',\n}\n\nfunction mmss(ms: number): string {\n  const s = Math.round(ms / 1000)\n  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`\n}\n\nfunction truncate(s: string, max: number): string {\n  return s.length <= max ? s : `${s.slice(0, Math.max(0, max - 1))}…`\n}\n\nfunction escapeHtml(s: string): string {\n  return s\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n}\n\n/** Render the storyboard as a Markdown timeline — the human-readable shot list. */\nexport function renderStoryboardMarkdown(storyboard: Storyboard): string {\n  const out: string[] = [\n    `# 🎬 ${storyboard.title}`,\n    '',\n    `_${storyboard.scenes.length} scenes · ${mmss(storyboard.totalMs)} replay_`,\n    '',\n  ]\n  let elapsed = 0\n  for (const sc of storyboard.scenes) {\n    out.push(`### [${mmss(elapsed)}] ${SCENE_ICON[sc.sceneType]} ${sc.title}`)\n    out.push('')\n    out.push(sc.narration)\n    if (sc.evidenceSpanIds.length > 0) {\n      out.push('')\n      out.push(\n        `_evidence: ${sc.evidenceSpanIds.length} span(s) — ${sc.evidenceSpanIds.slice(0, 6).join(', ')}_`,\n      )\n    }\n    out.push('')\n    elapsed += sc.durationMs\n  }\n  return out.join('\\n')\n}\n\nexport interface HtmlRenderOptions {\n  /** Document title + on-page heading. Defaults to the storyboard title. */\n  title?: string\n}\n\n/**\n * Render the storyboard as a self-contained, auto-playing HTML replay — one\n * shareable file, no build step, no external assets. Each scene animates in\n * for its duration with a progress bar; controls let a viewer scrub. This is\n * the \"free clip\" a run produces; an MP4 is the same storyboard fed to Remotion\n * in a consumer package.\n */\nexport function renderStoryboardHtml(storyboard: Storyboard, opts: HtmlRenderOptions = {}): string {\n  const docTitle = opts.title ?? storyboard.title\n  const scenesJson = JSON.stringify(\n    storyboard.scenes.map((s) => ({\n      icon: SCENE_ICON[s.sceneType],\n      type: s.sceneType,\n      title: s.title,\n      narration: s.narration,\n      durationMs: s.durationMs,\n      evidence: s.evidenceSpanIds.length,\n    })),\n  )\n  // Inline everything; the JS player is tiny and dependency-free.\n  return `<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>${escapeHtml(docTitle)}</title>\n<style>\n  :root { color-scheme: dark; }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;\n    background: #0b0f17; color: #e6edf3; display: flex; min-height: 100vh; align-items: center; justify-content: center; }\n  .stage { width: min(820px, 94vw); }\n  h1 { font-size: 1.1rem; font-weight: 600; color: #9aa7b5; margin: 0 0 14px; letter-spacing: .02em; }\n  .card { background: #111824; border: 1px solid #1e2a3a; border-radius: 14px; padding: 28px 30px;\n    min-height: 230px; box-shadow: 0 12px 40px rgba(0,0,0,.45); position: relative; overflow: hidden; }\n  .card::before { content: \"\"; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, #3b82f6); }\n  .icon { font-size: 2.6rem; line-height: 1; }\n  .title { font-size: 1.5rem; font-weight: 650; margin: 14px 0 8px; }\n  .narration { color: #b6c2cf; font-size: 1.05rem; }\n  .meta { position: absolute; bottom: 16px; right: 22px; color: #5b6b7d; font-size: .8rem; }\n  .type-error { --accent: #ef4444; } .type-diff { --accent: #22c55e; } .type-terminal { --accent: #eab308; }\n  .type-browser { --accent: #06b6d4; } .type-summary { --accent: #a855f7; } .type-title_card { --accent: #3b82f6; }\n  .scene-enter { animation: pop .45s cubic-bezier(.2,.7,.3,1.2); }\n  @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }\n  .bar { height: 4px; background: #1e2a3a; border-radius: 4px; margin-top: 16px; overflow: hidden; }\n  .bar > i { display: block; height: 100%; width: 0; background: var(--accent, #3b82f6); transition: width .1s linear; }\n  .controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: #8b98a6; font-size: .85rem; }\n  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px;\n    padding: 6px 12px; cursor: pointer; font: inherit; }\n  button:hover { background: #243349; }\n  .dots { display: flex; gap: 5px; margin-left: auto; }\n  .dot { width: 7px; height: 7px; border-radius: 50%; background: #2a3a4f; cursor: pointer; }\n  .dot.on { background: var(--accent, #3b82f6); }\n</style>\n</head>\n<body>\n<div class=\"stage\">\n  <h1>🎬 ${escapeHtml(docTitle)}</h1>\n  <div class=\"card\" id=\"card\">\n    <div class=\"icon\" id=\"icon\"></div>\n    <div class=\"title\" id=\"title\"></div>\n    <div class=\"narration\" id=\"narration\"></div>\n    <div class=\"meta\" id=\"meta\"></div>\n    <div class=\"bar\"><i id=\"fill\"></i></div>\n  </div>\n  <div class=\"controls\">\n    <button id=\"playPause\">⏸ Pause</button>\n    <button id=\"prev\">◀ Prev</button>\n    <button id=\"next\">Next ▶</button>\n    <span id=\"counter\"></span>\n    <span class=\"dots\" id=\"dots\"></span>\n  </div>\n</div>\n<script>\n  const SCENES = ${scenesJson};\n  let i = 0, playing = true, raf = 0, start = 0;\n  const card = document.getElementById('card'), counter = document.getElementById('counter');\n  const dotsEl = document.getElementById('dots');\n  SCENES.forEach((_, k) => { const d = document.createElement('span'); d.className = 'dot'; d.onclick = () => go(k); dotsEl.appendChild(d); });\n  function paint() {\n    const s = SCENES[i];\n    card.className = 'card scene-enter type-' + s.type;\n    document.getElementById('icon').textContent = s.icon;\n    document.getElementById('title').textContent = s.title;\n    document.getElementById('narration').textContent = s.narration;\n    document.getElementById('meta').textContent = s.evidence ? (s.evidence + ' span' + (s.evidence === 1 ? '' : 's')) : '';\n    counter.textContent = (i + 1) + ' / ' + SCENES.length;\n    [...dotsEl.children].forEach((d, k) => d.className = 'dot' + (k === i ? ' on' : ''));\n    void card.offsetWidth;\n  }\n  function tick(t) {\n    if (!start) start = t;\n    const s = SCENES[i], p = Math.min(1, (t - start) / s.durationMs);\n    document.getElementById('fill').style.width = (p * 100) + '%';\n    if (p >= 1) { if (i < SCENES.length - 1) { go(i + 1); } else { playing = false; updateBtn(); return; } }\n    if (playing) raf = requestAnimationFrame(tick);\n  }\n  function go(n) { i = Math.max(0, Math.min(SCENES.length - 1, n)); start = 0; cancelAnimationFrame(raf); paint(); if (playing) raf = requestAnimationFrame(tick); }\n  function updateBtn() { document.getElementById('playPause').textContent = playing ? '⏸ Pause' : '▶ Play'; }\n  document.getElementById('playPause').onclick = () => { playing = !playing; updateBtn(); start = 0; if (playing) raf = requestAnimationFrame(tick); else cancelAnimationFrame(raf); };\n  document.getElementById('next').onclick = () => go(i + 1);\n  document.getElementById('prev').onclick = () => go(i - 1);\n  paint(); raf = requestAnimationFrame(tick);\n</script>\n</body>\n</html>\n`\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/storyboard/code-edit.ts","../../src/storyboard/index.ts"],"sourcesContent":["/**\n * Code-edit extraction + the \"watch the agent write code\" animation.\n *\n * The base storyboard (./index) compresses a run into scenes but keeps scenes\n * payload-free (title + narration + evidence span ids). To actually SHOW the\n * code an agent wrote, this module pulls the concrete edit (path, diff,\n * before/after, language) out of the raw edit-tool spans and renders a\n * self-contained HTML replay that types each file out, character by character,\n * like an editor recording.\n *\n * Additive on purpose: it reuses the canonical `Span` (trace/schema) and the\n * `Storyboard` IR (./index) without modifying the reducer/compiler — so it\n * composes with the existing pipeline and a Remotion consumer can read the same\n * `CodeEdit[]` to render an MP4.\n */\n\nimport type { Span } from '../trace/schema'\nimport type { Scene, Storyboard } from './index'\n\nconst EDIT_TOOLS =\n  /(edit|write|patch|apply|str_replace|create.*file|save|insert|update.*file|multi_edit)/i\n\n/** A concrete code change lifted from a tool span. */\nexport interface CodeEdit {\n  /** Span the edit came from — back-reference into the trace. */\n  spanId: string\n  path: string\n  language?: string\n  /** Unified diff, when the tool carried one. */\n  diff?: string\n  /** Full file body before / after, when present — enables true keystroke\n   *  animation rather than only flashing a diff. */\n  before?: string\n  after?: string\n  additions: number\n  deletions: number\n  startedAt: number\n}\n\nfunction languageOf(path: string): string | undefined {\n  const ext = path.includes('.') ? path.split('.').pop()?.toLowerCase() : undefined\n  if (!ext) return undefined\n  const map: Record<string, string> = {\n    ts: 'ts',\n    tsx: 'tsx',\n    js: 'js',\n    jsx: 'jsx',\n    mjs: 'js',\n    cjs: 'js',\n    py: 'python',\n    rs: 'rust',\n    go: 'go',\n    sol: 'solidity',\n    java: 'java',\n    rb: 'ruby',\n    php: 'php',\n    c: 'c',\n    cpp: 'cpp',\n    cs: 'csharp',\n    css: 'css',\n    scss: 'scss',\n    html: 'html',\n    json: 'json',\n    yaml: 'yaml',\n    yml: 'yaml',\n    toml: 'toml',\n    md: 'markdown',\n    sh: 'bash',\n    sql: 'sql',\n  }\n  return map[ext] ?? ext\n}\n\nfunction pick(obj: unknown, keys: string[]): string | undefined {\n  if (!obj || typeof obj !== 'object') return undefined\n  const rec = obj as Record<string, unknown>\n  for (const k of Object.keys(rec)) {\n    if (keys.includes(k.toLowerCase())) {\n      const v = rec[k]\n      if (typeof v === 'string') return v\n    }\n  }\n  return undefined\n}\n\nfunction countDiff(diff?: string): { additions: number; deletions: number } {\n  if (!diff) return { additions: 0, deletions: 0 }\n  let additions = 0\n  let deletions = 0\n  for (const line of diff.split('\\n')) {\n    if (line.startsWith('+') && !line.startsWith('+++')) additions++\n    else if (line.startsWith('-') && !line.startsWith('---')) deletions++\n  }\n  return { additions, deletions }\n}\n\n/** Extract a CodeEdit from a single span, or undefined if it is not an edit. */\nexport function codeEditFromSpan(span: Span): CodeEdit | undefined {\n  if (span.kind !== 'tool') return undefined\n  const tool = span as Extract<Span, { kind: 'tool' }>\n  if (!EDIT_TOOLS.test(tool.toolName)) return undefined\n  const path = pick(tool.args, ['path', 'file_path', 'filepath', 'filename', 'file'])\n  if (!path) return undefined\n  const diff = pick(tool.args, ['diff', 'patch'])\n  const after = pick(tool.args, ['content', 'new_str', 'new_string', 'newtext', 'text', 'body'])\n  const before = pick(tool.args, ['old_str', 'old_string', 'oldtext', 'original'])\n  const counts = countDiff(diff)\n  return {\n    spanId: span.spanId,\n    path,\n    language: languageOf(path),\n    diff,\n    before,\n    after,\n    additions: diff ? counts.additions : after ? after.split('\\n').length : 0,\n    deletions: diff ? counts.deletions : 0,\n    startedAt: span.startedAt,\n  }\n}\n\n/** All code edits in a run, in chronological order. */\nexport function extractCodeEdits(spans: readonly Span[]): CodeEdit[] {\n  return spans\n    .map(codeEditFromSpan)\n    .filter((e): e is CodeEdit => e != null)\n    .sort((a, b) => a.startedAt - b.startedAt)\n}\n\n/** Pair each code-edit (`diff`) scene with its concrete edit, matched via the\n *  scene's evidence span ids. Scenes without a recoverable edit are dropped. */\nexport function codeEditsForStoryboard(\n  storyboard: Storyboard,\n  spans: readonly Span[],\n): Array<{ scene: Scene; edit: CodeEdit }> {\n  const bySpan = new Map(extractCodeEdits(spans).map((e) => [e.spanId, e]))\n  const out: Array<{ scene: Scene; edit: CodeEdit }> = []\n  for (const scene of storyboard.scenes) {\n    if (scene.sceneType !== 'diff') continue\n    const edit = scene.evidenceSpanIds\n      .map((id) => bySpan.get(id))\n      .find((e): e is CodeEdit => e != null)\n    if (edit) out.push({ scene, edit })\n  }\n  return out\n}\n\n/** The text the animation types for an edit: prefer the full new file body,\n *  then the added lines of a diff, then a minimal placeholder so the scene is\n *  never blank. */\nexport function editAnimationText(edit: CodeEdit): string {\n  if (edit.after && edit.after.trim()) return edit.after\n  if (edit.diff) {\n    const added = edit.diff\n      .split('\\n')\n      .filter((l) => l.startsWith('+') && !l.startsWith('+++'))\n      .map((l) => l.slice(1))\n      .join('\\n')\n    if (added.trim()) return added\n  }\n  return `// ${edit.path}\\n// (${edit.additions} line${edit.additions === 1 ? '' : 's'} written)`\n}\n\nfunction esc(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')\n}\n\nexport interface CodeAnimationOptions {\n  /** Page title. Default \"Agent writing code\". */\n  title?: string\n  /** Characters typed per animation tick. Higher = faster. Default 4. */\n  charsPerTick?: number\n  /** Pause between files, ms. Default 900. */\n  pauseBetweenMs?: number\n}\n\n/**\n * Render a self-contained HTML page that animates the agent writing each file,\n * character by character, with a filename tab, line numbers, and a blinking\n * cursor — the shareable \"watch it build\" clip. No build step, no assets, no\n * deps. The same `CodeEdit[]` feeds a Remotion MP4 renderer in a consumer\n * package; this is the dependency-free baseline.\n */\nexport function renderCodeAnimationHtml(\n  source: readonly Span[] | readonly CodeEdit[],\n  opts: CodeAnimationOptions = {},\n): string {\n  const edits: CodeEdit[] =\n    source.length > 0 && 'path' in (source[0] as object)\n      ? (source as CodeEdit[])\n      : extractCodeEdits(source as readonly Span[])\n\n  const files = edits.map((e) => ({\n    path: e.path,\n    language: e.language ?? '',\n    additions: e.additions,\n    deletions: e.deletions,\n    code: editAnimationText(e),\n  }))\n  const title = opts.title ?? 'Agent writing code'\n  const charsPerTick = opts.charsPerTick ?? 4\n  const pauseBetweenMs = opts.pauseBetweenMs ?? 900\n  const filesJson = JSON.stringify(files)\n\n  return `<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>${esc(title)}</title>\n<style>\n  :root { color-scheme: dark; }\n  * { box-sizing: border-box; }\n  body { margin: 0; background: #0b0f17; color: #e6edf3;\n    font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; gap: 14px; }\n  h1 { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: #9aa7b5; margin: 0; }\n  .editor { width: min(900px, 94vw); background: #0d1320; border: 1px solid #1e2a3a; border-radius: 12px;\n    overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.5); }\n  .tabbar { display: flex; align-items: center; gap: 8px; background: #111a29; padding: 9px 14px; border-bottom: 1px solid #1e2a3a; }\n  .dot { width: 11px; height: 11px; border-radius: 50%; }\n  .dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }\n  .tab { margin-left: 10px; background: #0d1320; padding: 5px 12px; border-radius: 7px 7px 0 0;\n    color: #cdd9e5; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; }\n  .lang { color: #5b6b7d; font-size: .75rem; margin-left: 6px; }\n  .adds { margin-left: auto; color: #3fb950; font-size: .78rem; font-family: ui-sans-serif, system-ui, sans-serif; }\n  .dels { color: #f85149; margin-left: 8px; }\n  .codewrap { display: flex; max-height: 60vh; overflow: auto; }\n  .gutter { padding: 14px 10px 14px 14px; text-align: right; color: #3a4757; user-select: none; white-space: pre; }\n  pre { margin: 0; padding: 14px 18px 14px 6px; white-space: pre; tab-size: 2; flex: 1; }\n  .cursor { display: inline-block; width: 8px; margin-left: 1px; background: #58a6ff; animation: blink .9s steps(1) infinite; }\n  @keyframes blink { 50% { opacity: 0; } }\n  .controls { display: flex; gap: 10px; align-items: center; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; color: #8b98a6; }\n  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }\n  button:hover { background: #243349; }\n  .empty { padding: 40px; color: #5b6b7d; }\n</style>\n</head>\n<body>\n  <h1>✏️ ${esc(title)}</h1>\n  <div class=\"editor\">\n    <div class=\"tabbar\">\n      <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n      <span class=\"tab\" id=\"tab\">—</span><span class=\"lang\" id=\"lang\"></span>\n      <span class=\"adds\" id=\"adds\"></span>\n    </div>\n    <div class=\"codewrap\"><div class=\"gutter\" id=\"gutter\">1</div><pre id=\"code\"></pre></div>\n  </div>\n  <div class=\"controls\">\n    <button id=\"pp\">⏸ Pause</button><button id=\"restart\">↻ Restart</button>\n    <span id=\"counter\"></span>\n  </div>\n<script>\n  const FILES = ${filesJson};\n  const CPT = ${charsPerTick}, PAUSE = ${pauseBetweenMs};\n  const codeEl = document.getElementById('code'), gutterEl = document.getElementById('gutter');\n  const tabEl = document.getElementById('tab'), langEl = document.getElementById('lang');\n  const addsEl = document.getElementById('adds'), counterEl = document.getElementById('counter');\n  let fi = 0, ci = 0, playing = true, raf = 0, paused = false;\n  if (!FILES.length) { codeEl.innerHTML = '<span class=\"empty\">No code edits in this run.</span>'; }\n  function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}\n  function setHeader(){ const f = FILES[fi]; tabEl.textContent = f.path; langEl.textContent = f.language || '';\n    addsEl.innerHTML = '+' + f.additions + (f.deletions ? ' <span class=\"dels\">-' + f.deletions + '</span>' : '');\n    counterEl.textContent = (fi+1) + ' / ' + FILES.length + ' files'; }\n  function paint(){ const f = FILES[fi]; const shown = f.code.slice(0, ci);\n    const lines = (shown.match(/\\\\n/g) || []).length + 1;\n    gutterEl.textContent = Array.from({length: lines}, (_, k) => k+1).join('\\\\n');\n    codeEl.innerHTML = esc(shown) + '<span class=\"cursor\">&nbsp;</span>';\n    const wrap = codeEl.parentElement; wrap.scrollTop = wrap.scrollHeight; }\n  function tick(){ if (paused || !FILES.length) return;\n    const f = FILES[fi];\n    if (ci < f.code.length){ ci = Math.min(f.code.length, ci + CPT); paint(); raf = requestAnimationFrame(tick); }\n    else if (fi < FILES.length - 1){ setTimeout(() => { fi++; ci = 0; setHeader(); paint(); raf = requestAnimationFrame(tick); }, PAUSE); }\n    else { playing = false; document.getElementById('pp').textContent = '▶ Play'; } }\n  document.getElementById('pp').onclick = () => { if (!playing){ playing = true; paused = false; tick(); } else { paused = !paused; if (!paused) tick(); } document.getElementById('pp').textContent = paused ? '▶ Play' : '⏸ Pause'; };\n  document.getElementById('restart').onclick = () => { fi = 0; ci = 0; playing = true; paused = false; document.getElementById('pp').textContent = '⏸ Pause'; setHeader(); paint(); cancelAnimationFrame(raf); tick(); };\n  if (FILES.length){ setHeader(); paint(); tick(); }\n</script>\n</body>\n</html>\n`\n}\n","/**\n * Storyboard — compile a raw agent trace into a small set of meaningful scenes,\n * then render them as a shareable, watchable replay.\n *\n *   Span[] → SemanticEvent[] → Storyboard{scenes} → { markdown | html }\n *\n * The trace is the source of truth; the storyboard is the IR; markdown/html\n * (and, in a consumer package, Remotion/MP4) are compiled targets. Everything\n * here is PURE — same spans in, same bytes out (no clock/random) — so a run's\n * replay is deterministic and diffable.\n *\n * Crucially, every scene carries a modality-typed VISUAL extracted from the\n * span — a browser/computer screenshot, a code diff, a terminal command +\n * output, file content, an API request/response, or reasoning prose — so no\n * matter what the agent did, the replay SHOWS it, not just narrates it. The\n * reducer is rules-based; an LLM pass can refine titles/summaries later, but\n * the structure + visuals do not depend on one. Renderers that need a browser\n * (Remotion, React) live in consumers; this module only emits strings.\n */\n\nimport type { Span } from '../trace/schema'\n\n/** What the agent meaningfully did — the compressed vocabulary. */\nexport type SemanticKind =\n  | 'understood_task'\n  | 'reasoned'\n  | 'ran_command'\n  | 'read_file'\n  | 'edited_code'\n  | 'searched'\n  | 'used_browser'\n  | 'used_computer'\n  | 'called_api'\n  | 'called_tool'\n  | 'evaluated'\n  | 'observed_failure'\n  | 'completed'\n\n/** The modality-typed payload a scene shows. This is what makes any agent\n *  action — screen, browser, shell, code, API — actually viewable. */\nexport type SceneVisual =\n  | { type: 'screenshot'; src: string; caption?: string }\n  | { type: 'browser'; url?: string; action?: string; screenshot?: string }\n  | { type: 'diff'; path: string; patch: string }\n  | { type: 'code'; path: string; content: string }\n  | { type: 'terminal'; command: string; output?: string }\n  | {\n      type: 'api'\n      method?: string\n      url: string\n      status?: number\n      request?: string\n      response?: string\n    }\n  | { type: 'prose'; text: string }\n  | { type: 'none' }\n\nexport interface SemanticEvent {\n  kind: SemanticKind\n  /** One-line headline (the ticket/scene title). */\n  title: string\n  /** Short human summary. */\n  summary: string\n  /** The modality payload to show for this moment. */\n  visual: SceneVisual\n  /** Span ids backing this moment — the evidence trail. */\n  evidenceSpanIds: string[]\n  /** 1 (noise) … 5 (pivotal: failures, edits). Drives selection + duration. */\n  importance: 1 | 2 | 3 | 4 | 5\n  startTs: number\n  endTs: number\n}\n\nexport interface ReduceOptions {\n  /** Collapse adjacent same-kind moments into one. Default true. */\n  collapseAdjacent?: boolean\n}\n\n// ── Modality extraction ─────────────────────────────────────────────────────\n\nfunction str(v: unknown): string | undefined {\n  return typeof v === 'string' && v.length > 0 ? v : undefined\n}\n\nfunction num(v: unknown): number | undefined {\n  return typeof v === 'number' ? v : undefined\n}\n\nfunction attr(span: Span, ...keys: string[]): unknown {\n  const a = span.attributes as Record<string, unknown> | undefined\n  if (!a) return undefined\n  for (const k of keys) if (a[k] != null) return a[k]\n  return undefined\n}\n\nfunction asObj(v: unknown): Record<string, unknown> | undefined {\n  return v && typeof v === 'object' && !Array.isArray(v)\n    ? (v as Record<string, unknown>)\n    : undefined\n}\n\nfunction safeJson(v: unknown): string | undefined {\n  if (v == null) return undefined\n  if (typeof v === 'string') return v\n  try {\n    return JSON.stringify(v, null, 2)\n  } catch {\n    return String(v)\n  }\n}\n\n/** Is this string an embeddable image (data URI or http URL)? */\nfunction isImageSrc(s: string | undefined): s is string {\n  return !!s && (s.startsWith('data:image') || /^https?:\\/\\//.test(s))\n}\n\n/** Pull the modality-appropriate visual out of whatever the span carries.\n *  Conventions (checked in priority order): an image rides on\n *  `attributes.screenshot|image|frame|videoFrame` or `result.screenshot`; a\n *  diff on `attributes.diff|patch` or `args.diff`; a command on `args` /\n *  `args.command`; an API call on a `url`/`method` in args; file content on\n *  `result`. Unknown tools degrade to an args/result inspector. */\nfunction extractVisual(span: Span): SceneVisual {\n  const shot =\n    str(attr(span, 'screenshot', 'screenshotUrl', 'image', 'frame', 'videoFrame')) ??\n    (span.kind === 'tool'\n      ? (str(asObj(span.result)?.screenshot) ?? str(asObj(span.result)?.image))\n      : undefined)\n\n  if (span.kind === 'tool') {\n    const tn = span.toolName.toLowerCase()\n    const a = asObj(span.args)\n    // computer use (GUI / desktop control)\n    if (/computer|cua|desktop|\\bgui\\b|xdotool|mouse|keyboard|screen_|pyautogui/.test(tn)) {\n      return {\n        type: 'browser',\n        action: str(a?.action) ?? span.toolName,\n        url: str(a?.target),\n        screenshot: shot,\n      }\n    }\n    // browser use\n    if (\n      /browser|playwright|puppeteer|\\bpage\\b|navigate|goto|\\bclick\\b|\\btype\\b|screenshot|dom/.test(\n        tn,\n      )\n    ) {\n      return {\n        type: 'browser',\n        url: str(a?.url) ?? str(attr(span, 'url')),\n        action: str(a?.action) ?? str(a?.selector) ?? span.toolName,\n        screenshot: shot,\n      }\n    }\n    // code edit → diff\n    const diff = str(attr(span, 'diff', 'patch')) ?? str(a?.diff) ?? str(a?.patch)\n    if (diff && /edit|write|patch|apply|str_replace|create|save|file/.test(tn)) {\n      return {\n        type: 'diff',\n        path: str(a?.path) ?? str(a?.file) ?? str(attr(span, 'path')) ?? '',\n        patch: truncate(diff, 2000),\n      }\n    }\n    if (/edit|write|patch|apply|str_replace/.test(tn)) {\n      const newText = str(a?.new_str) ?? str(a?.content) ?? str(a?.text)\n      return {\n        type: 'diff',\n        path: str(a?.path) ?? str(a?.file) ?? '',\n        patch: newText ? `+ ${truncate(newText, 1600)}` : '(no diff captured)',\n      }\n    }\n    // file read → code\n    if (/read|\\bcat\\b|open|view|get_file|load|fetch_file/.test(tn)) {\n      const content =\n        str(asObj(span.result)?.content) ??\n        (typeof span.result === 'string' ? span.result : undefined) ??\n        str(attr(span, 'content'))\n      return {\n        type: 'code',\n        path: str(a?.path) ?? str(a?.file) ?? '',\n        content: truncate(content ?? '', 1400),\n      }\n    }\n    // search\n    if (/search|grep|find|glob|query/.test(tn)) {\n      return {\n        type: 'terminal',\n        command: `search ${str(a?.query) ?? str(a?.pattern) ?? ''}`.trim(),\n        output: truncate(safeJson(span.result) ?? '', 1000),\n      }\n    }\n    // api / http / network\n    const url = str(a?.url) ?? str(attr(span, 'url'))\n    if (url || /http|\\bapi\\b|fetch|request|webhook|rest|graphql|endpoint/.test(tn)) {\n      return {\n        type: 'api',\n        method: str(a?.method) ?? str(attr(span, 'method')),\n        url: url ?? span.toolName,\n        status: num(attr(span, 'status', 'statusCode')) ?? num(asObj(span.result)?.status),\n        request: truncate(str(a?.body) ?? safeJson(span.args) ?? '', 900),\n        response: truncate(str(attr(span, 'response')) ?? safeJson(span.result) ?? '', 900),\n      }\n    }\n    // shell / sandbox exec\n    if (/shell|exec|bash|\\brun\\b|terminal|command|sandbox|process/.test(tn)) {\n      const command =\n        typeof span.args === 'string'\n          ? span.args\n          : (str(a?.command) ?? str(a?.cmd) ?? span.toolName)\n      const output =\n        str(attr(span, 'output', 'stdout')) ??\n        (typeof span.result === 'string' ? span.result : safeJson(span.result))\n      return {\n        type: 'terminal',\n        command: truncate(command, 240),\n        output: truncate(output ?? '', 1400),\n      }\n    }\n    // generic tool — show the call\n    return {\n      type: 'api',\n      url: span.toolName,\n      request: truncate(safeJson(span.args) ?? '', 900),\n      response: truncate(safeJson(span.result) ?? '', 900),\n    }\n  }\n\n  if (isImageSrc(shot)) return { type: 'screenshot', src: shot }\n  if (span.kind === 'llm') {\n    const text = str(span.output) ?? str(span.messages?.[span.messages.length - 1]?.content)\n    return text ? { type: 'prose', text: truncate(text, 900) } : { type: 'none' }\n  }\n  if (span.kind === 'sandbox')\n    return { type: 'terminal', command: span.name, output: str(attr(span, 'output')) }\n  return { type: 'none' }\n}\n\n// ── Classification ──────────────────────────────────────────────────────────\n\ninterface Classified {\n  kind: SemanticKind\n  importance: 1 | 2 | 3 | 4 | 5\n  label: string\n}\n\nfunction toolLabel(span: Span): string {\n  if (span.kind === 'tool') {\n    const a = asObj(span.args)\n    const arg =\n      typeof span.args === 'string'\n        ? span.args\n        : a\n          ? (str(a.path) ??\n            str(a.url) ??\n            str(a.command) ??\n            str(a.query) ??\n            Object.values(a).find((v) => typeof v === 'string'))\n          : undefined\n    return typeof arg === 'string' && arg.length > 0\n      ? `${span.toolName}: ${truncate(arg, 60)}`\n      : span.toolName\n  }\n  return span.name\n}\n\nfunction classify(span: Span): Classified {\n  if (span.status === 'error' || span.error) {\n    return { kind: 'observed_failure', importance: 5, label: span.error ?? span.name }\n  }\n  if (span.kind === 'llm' || span.kind === 'agent')\n    return { kind: 'reasoned', importance: 2, label: span.name }\n  if (span.kind === 'judge') return { kind: 'evaluated', importance: 2, label: span.name }\n  if (span.kind === 'retrieval') return { kind: 'searched', importance: 2, label: span.name }\n  if (span.kind === 'sandbox') return { kind: 'ran_command', importance: 3, label: span.name }\n  if (span.kind === 'tool') {\n    const tn = span.toolName.toLowerCase()\n    const label = toolLabel(span)\n    if (/computer|cua|desktop|\\bgui\\b|xdotool|pyautogui/.test(tn))\n      return { kind: 'used_computer', importance: 3, label }\n    if (/browser|playwright|puppeteer|\\bpage\\b|navigate|goto|\\bclick\\b|screenshot|dom/.test(tn))\n      return { kind: 'used_browser', importance: 3, label }\n    if (/edit|write|patch|apply|str_replace|create.*file|save/.test(tn))\n      return { kind: 'edited_code', importance: 4, label }\n    if (/read|\\bcat\\b|open|view|get.*file|load/.test(tn))\n      return { kind: 'read_file', importance: 2, label }\n    if (/search|grep|find|glob|query/.test(tn)) return { kind: 'searched', importance: 2, label }\n    if (\n      /http|\\bapi\\b|fetch|request|webhook|rest|graphql|endpoint/.test(tn) ||\n      str(asObj(span.args)?.url)\n    ) {\n      return { kind: 'called_api', importance: 3, label }\n    }\n    if (/shell|exec|bash|\\brun\\b|terminal|command|process/.test(tn))\n      return { kind: 'ran_command', importance: 3, label }\n    return { kind: 'called_tool', importance: 3, label }\n  }\n  return { kind: 'called_tool', importance: 2, label: span.name }\n}\n\nconst KIND_VERB: Record<SemanticKind, string> = {\n  understood_task: 'Received the task',\n  reasoned: 'Reasoned',\n  ran_command: 'Ran a command',\n  read_file: 'Read files',\n  edited_code: 'Edited code',\n  searched: 'Searched',\n  used_browser: 'Used the browser',\n  used_computer: 'Controlled the computer',\n  called_api: 'Called an API',\n  called_tool: 'Used a tool',\n  evaluated: 'Evaluated the result',\n  observed_failure: 'Hit a failure',\n  completed: 'Finished',\n}\n\n/**\n * Reduce a span tree into the meaningful moments a viewer cares about. Each\n * span is classified + has its modality visual extracted; adjacent same-kind\n * moments collapse (the compression step), carrying the latest visual so the\n * scene shows the most recent state. A failure always stands alone.\n */\nexport function reduceToSemanticEvents(\n  spans: readonly Span[],\n  opts: ReduceOptions = {},\n): SemanticEvent[] {\n  const collapse = opts.collapseAdjacent ?? true\n  const ordered = [...spans].sort((a, b) => a.startedAt - b.startedAt)\n  const raw: SemanticEvent[] = ordered.map((s) => {\n    const c = classify(s)\n    return {\n      kind: c.kind,\n      title: c.label,\n      summary: `${KIND_VERB[c.kind]} — ${c.label}`,\n      visual: extractVisual(s),\n      evidenceSpanIds: [s.spanId],\n      importance: c.importance,\n      startTs: s.startedAt,\n      endTs: s.endedAt ?? s.startedAt,\n    }\n  })\n  if (!collapse) return raw\n\n  const merged: SemanticEvent[] = []\n  for (const ev of raw) {\n    const prev = merged[merged.length - 1]\n    if (prev && prev.kind === ev.kind && ev.kind !== 'observed_failure') {\n      prev.evidenceSpanIds.push(...ev.evidenceSpanIds)\n      prev.endTs = Math.max(prev.endTs, ev.endTs)\n      if (ev.visual.type !== 'none') prev.visual = ev.visual // keep the latest state\n      const n = prev.evidenceSpanIds.length\n      prev.title = `${KIND_VERB[ev.kind]} (${n}×)`\n      prev.summary = `${KIND_VERB[ev.kind]} ${n} time${n === 1 ? '' : 's'} — latest: ${ev.title}`\n    } else {\n      merged.push({ ...ev, evidenceSpanIds: [...ev.evidenceSpanIds] })\n    }\n  }\n  return merged\n}\n\n// ── Storyboard ────────────────────────────────────────────────────────────\n\nexport type SceneType =\n  | 'title_card'\n  | 'reasoning'\n  | 'terminal'\n  | 'file'\n  | 'diff'\n  | 'search'\n  | 'browser'\n  | 'computer'\n  | 'api'\n  | 'tool'\n  | 'eval'\n  | 'error'\n  | 'summary'\n\nexport interface Scene {\n  sceneType: SceneType\n  title: string\n  narration: string\n  /** The modality payload the renderer shows. */\n  visual: SceneVisual\n  durationMs: number\n  evidenceSpanIds: string[]\n}\n\nexport interface Storyboard {\n  title: string\n  totalMs: number\n  scenes: Scene[]\n}\n\nexport interface CompileOptions {\n  /** Headline for the title card. Default \"Agent run\". */\n  title?: string\n  /** Max action scenes between the title + summary cards. Default 16. */\n  maxScenes?: number\n}\n\nconst KIND_TO_SCENE: Record<SemanticKind, SceneType> = {\n  understood_task: 'title_card',\n  reasoned: 'reasoning',\n  ran_command: 'terminal',\n  read_file: 'file',\n  edited_code: 'diff',\n  searched: 'search',\n  used_browser: 'browser',\n  used_computer: 'computer',\n  called_api: 'api',\n  called_tool: 'tool',\n  evaluated: 'eval',\n  observed_failure: 'error',\n  completed: 'summary',\n}\n\nconst DURATION_BY_IMPORTANCE: Record<1 | 2 | 3 | 4 | 5, number> = {\n  1: 2500,\n  2: 3000,\n  3: 4000,\n  4: 5000,\n  5: 6000,\n}\n\n/**\n * Select the moments worth showing and lay them out as scenes. Every failure\n * (importance 5) and edit (4) is always kept; the rest fill the budget by\n * importance, then re-sort chronological. A title card opens, a summary closes.\n */\nexport function compileStoryboard(\n  events: readonly SemanticEvent[],\n  opts: CompileOptions = {},\n): Storyboard {\n  const title = opts.title ?? 'Agent run'\n  const maxScenes = opts.maxScenes ?? 16\n\n  const indexed = events.map((ev, i) => ({ ev, i }))\n  const mustKeep = indexed.filter(({ ev }) => ev.importance >= 4)\n  const rest = indexed\n    .filter(({ ev }) => ev.importance < 4)\n    .sort((a, b) => b.ev.importance - a.ev.importance || a.i - b.i)\n  const budget = Math.max(0, maxScenes - mustKeep.length)\n  const selected = [...mustKeep, ...rest.slice(0, budget)].sort((a, b) => a.i - b.i)\n\n  const actionScenes: Scene[] = selected.map(({ ev }) => ({\n    sceneType: KIND_TO_SCENE[ev.kind],\n    title: ev.title,\n    narration: ev.summary,\n    visual: ev.visual,\n    durationMs: DURATION_BY_IMPORTANCE[ev.importance],\n    evidenceSpanIds: ev.evidenceSpanIds,\n  }))\n\n  const failures = events.filter((e) => e.kind === 'observed_failure').length\n  const edits = events.filter((e) => e.kind === 'edited_code').length\n  const commands = events.filter((e) => e.kind === 'ran_command').length\n  const summaryNarration =\n    `${events.length} moments · ${commands} command${commands === 1 ? '' : 's'} · ` +\n    `${edits} edit${edits === 1 ? '' : 's'} · ${failures} failure${failures === 1 ? '' : 's'}`\n\n  const scenes: Scene[] = [\n    {\n      sceneType: 'title_card',\n      title,\n      narration: 'The agent receives its task.',\n      visual: { type: 'none' },\n      durationMs: 3000,\n      evidenceSpanIds: [],\n    },\n    ...actionScenes,\n    {\n      sceneType: 'summary',\n      title: failures > 0 ? 'Finished — with failures' : 'Finished',\n      narration: summaryNarration,\n      visual: { type: 'none' },\n      durationMs: 4000,\n      evidenceSpanIds: [],\n    },\n  ]\n  return { title, totalMs: scenes.reduce((s, sc) => s + sc.durationMs, 0), scenes }\n}\n\n// ── Renderers (pure string out) ─────────────────────────────────────────────\n\nconst SCENE_ICON: Record<SceneType, string> = {\n  title_card: '🎬',\n  reasoning: '🧠',\n  terminal: '⌨️',\n  file: '📄',\n  diff: '✏️',\n  search: '🔎',\n  browser: '🌐',\n  computer: '🖥️',\n  api: '🔌',\n  tool: '🔧',\n  eval: '⚖️',\n  error: '❌',\n  summary: '🏁',\n}\n\nfunction mmss(ms: number): string {\n  const s = Math.round(ms / 1000)\n  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`\n}\n\nfunction truncate(s: string, max: number): string {\n  return s.length <= max ? s : `${s.slice(0, Math.max(0, max - 1))}…`\n}\n\nfunction escapeHtml(s: string): string {\n  return s\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n}\n\n/** A short modality tag for the markdown shot list. */\nfunction visualMarkdown(v: SceneVisual): string {\n  switch (v.type) {\n    case 'screenshot':\n      return `🖼 screenshot (${truncate(v.src, 60)})`\n    case 'browser':\n      return `🌐 ${v.action ?? 'browser'}${v.url ? ` → ${v.url}` : ''}${v.screenshot ? ' [screenshot]' : ''}`\n    case 'diff':\n      return `\\n\\n\\`\\`\\`diff\\n${truncate(v.patch, 600)}\\n\\`\\`\\`${v.path ? `\\n_${v.path}_` : ''}`\n    case 'code':\n      return `\\n\\n\\`\\`\\`\\n${truncate(v.content, 500)}\\n\\`\\`\\`${v.path ? `\\n_${v.path}_` : ''}`\n    case 'terminal':\n      return `\\n\\n\\`\\`\\`sh\\n$ ${v.command}${v.output ? `\\n${truncate(v.output, 500)}` : ''}\\n\\`\\`\\``\n    case 'api':\n      return `🔌 ${v.method ?? 'CALL'} ${v.url}${v.status != null ? ` → ${v.status}` : ''}`\n    case 'prose':\n      return `\\n\\n> ${truncate(v.text, 400).replace(/\\n/g, '\\n> ')}`\n    default:\n      return ''\n  }\n}\n\n/** Build the (escaped, structured) HTML for a scene's visual. We never inject\n *  raw agent markup — every text part is escaped; only image `src` (data/http)\n *  is passed through as an attribute. */\nfunction visualHtml(v: SceneVisual): string {\n  switch (v.type) {\n    case 'screenshot':\n      return `<img class=\"shot\" src=\"${escapeHtml(v.src)}\" alt=\"screenshot\" loading=\"lazy\"/>`\n    case 'browser': {\n      const bar = `<div class=\"urlbar\">${escapeHtml(v.url ?? v.action ?? 'browser')}</div>`\n      const body = isImageSrc(v.screenshot)\n        ? `<img class=\"shot\" src=\"${escapeHtml(v.screenshot)}\" alt=\"page\" loading=\"lazy\"/>`\n        : `<div class=\"browser-action\">${escapeHtml(v.action ?? 'navigated')}</div>`\n      return `<div class=\"browser\">${bar}${body}</div>`\n    }\n    case 'diff': {\n      const lines = v.patch.split('\\n').map((l) => {\n        const cls = l.startsWith('+') ? 'add' : l.startsWith('-') ? 'del' : ''\n        return `<span class=\"${cls}\">${escapeHtml(l)}</span>`\n      })\n      return `${v.path ? `<div class=\"pathhdr\">${escapeHtml(v.path)}</div>` : ''}<pre class=\"diff\">${lines.join('\\n')}</pre>`\n    }\n    case 'code':\n      return `${v.path ? `<div class=\"pathhdr\">${escapeHtml(v.path)}</div>` : ''}<pre class=\"code\">${escapeHtml(v.content)}</pre>`\n    case 'terminal':\n      return `<pre class=\"term\"><span class=\"cmd\">$ ${escapeHtml(v.command)}</span>${v.output ? `\\n${escapeHtml(v.output)}` : ''}</pre>`\n    case 'api': {\n      const badge = `<span class=\"method\">${escapeHtml(v.method ?? 'CALL')}</span> <span class=\"url\">${escapeHtml(v.url)}</span>${v.status != null ? ` <span class=\"status s${Math.floor(v.status / 100)}\">${v.status}</span>` : ''}`\n      const req = v.request\n        ? `<div class=\"kv\"><b>req</b><pre>${escapeHtml(v.request)}</pre></div>`\n        : ''\n      const res = v.response\n        ? `<div class=\"kv\"><b>res</b><pre>${escapeHtml(v.response)}</pre></div>`\n        : ''\n      return `<div class=\"api\"><div class=\"apihdr\">${badge}</div>${req}${res}</div>`\n    }\n    case 'prose':\n      return `<div class=\"prose\">${escapeHtml(v.text)}</div>`\n    default:\n      return ''\n  }\n}\n\n/** Render the storyboard as a Markdown timeline — the human-readable shot list. */\nexport function renderStoryboardMarkdown(storyboard: Storyboard): string {\n  const out: string[] = [\n    `# 🎬 ${storyboard.title}`,\n    '',\n    `_${storyboard.scenes.length} scenes · ${mmss(storyboard.totalMs)} replay_`,\n    '',\n  ]\n  let elapsed = 0\n  for (const sc of storyboard.scenes) {\n    out.push(`### [${mmss(elapsed)}] ${SCENE_ICON[sc.sceneType]} ${sc.title}`)\n    out.push('')\n    out.push(sc.narration)\n    const vm = visualMarkdown(sc.visual)\n    if (vm) out.push(vm)\n    if (sc.evidenceSpanIds.length > 0) {\n      out.push('')\n      out.push(`_evidence: ${sc.evidenceSpanIds.length} span(s)_`)\n    }\n    out.push('')\n    elapsed += sc.durationMs\n  }\n  return out.join('\\n')\n}\n\nexport interface HtmlRenderOptions {\n  /** Document title + on-page heading. Defaults to the storyboard title. */\n  title?: string\n}\n\n/**\n * Render the storyboard as a self-contained, auto-playing HTML replay — one\n * shareable file, no build step, no external assets. Each scene animates in\n * for its duration and SHOWS its modality (screenshot / diff / terminal / API\n * / browser / prose); controls let a viewer scrub. This is the \"free clip\" a\n * run produces; an MP4 is the same storyboard fed to Remotion in a consumer.\n */\nexport function renderStoryboardHtml(storyboard: Storyboard, opts: HtmlRenderOptions = {}): string {\n  const docTitle = opts.title ?? storyboard.title\n  // Pre-render each scene's visual to safe HTML here (testable, escaped); the\n  // player just sets innerHTML. `<` is escaped in the JSON so a payload can't\n  // break out of the <script> tag.\n  const scenesJson = JSON.stringify(\n    storyboard.scenes.map((s) => ({\n      icon: SCENE_ICON[s.sceneType],\n      type: s.sceneType,\n      title: s.title,\n      narration: s.narration,\n      durationMs: s.durationMs,\n      evidence: s.evidenceSpanIds.length,\n      visual: visualHtml(s.visual),\n    })),\n  ).replace(/</g, '\\\\u003c')\n\n  return `<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>${escapeHtml(docTitle)}</title>\n<style>\n  :root { color-scheme: dark; }\n  * { box-sizing: border-box; }\n  body { margin: 0; font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;\n    background: #0b0f17; color: #e6edf3; display: flex; min-height: 100vh; align-items: center; justify-content: center; }\n  .stage { width: min(900px, 95vw); }\n  h1 { font-size: 1.1rem; font-weight: 600; color: #9aa7b5; margin: 0 0 14px; letter-spacing: .02em; }\n  .card { background: #111824; border: 1px solid #1e2a3a; border-radius: 14px; padding: 24px 28px;\n    min-height: 300px; box-shadow: 0 12px 40px rgba(0,0,0,.45); position: relative; overflow: hidden; }\n  .card::before { content: \"\"; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, #3b82f6); }\n  .head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }\n  .icon { font-size: 2rem; line-height: 1; }\n  .title { font-size: 1.3rem; font-weight: 650; }\n  .narration { color: #9fb0c0; font-size: .95rem; margin-bottom: 14px; }\n  .visual { margin-top: 6px; }\n  .visual img.shot { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid #1e2a3a; display: block; }\n  .visual pre { background: #0a0e15; border: 1px solid #1e2a3a; border-radius: 8px; padding: 12px 14px;\n    overflow: auto; max-height: 340px; font: 13px/1.5 ui-monospace, \"SF Mono\", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }\n  .pathhdr { font: 12px ui-monospace, monospace; color: #7d8da0; margin-bottom: 4px; }\n  .diff .add { color: #56d364; } .diff .del { color: #f85149; }\n  .term .cmd { color: #eab308; }\n  .browser { border: 1px solid #1e2a3a; border-radius: 8px; overflow: hidden; }\n  .urlbar { background: #0a0e15; padding: 7px 12px; font: 12px ui-monospace, monospace; color: #8b98a6; border-bottom: 1px solid #1e2a3a; }\n  .browser-action { padding: 28px; color: #9fb0c0; text-align: center; }\n  .api .apihdr { font: 13px ui-monospace, monospace; margin-bottom: 8px; }\n  .method { background: #1b2636; padding: 2px 8px; border-radius: 5px; color: #79c0ff; }\n  .status.s2 { color: #56d364; } .status.s4, .status.s5 { color: #f85149; }\n  .kv { margin-top: 6px; } .kv b { color: #7d8da0; font-weight: 600; font-size: 12px; }\n  .prose { color: #c9d4e0; font-size: 1rem; white-space: pre-wrap; max-height: 340px; overflow: auto; }\n  .type-error { --accent: #ef4444; } .type-diff { --accent: #22c55e; } .type-terminal { --accent: #eab308; }\n  .type-browser { --accent: #06b6d4; } .type-computer { --accent: #14b8a6; } .type-api { --accent: #79c0ff; }\n  .type-summary { --accent: #a855f7; } .type-title_card { --accent: #3b82f6; }\n  .scene-enter { animation: pop .45s cubic-bezier(.2,.7,.3,1.2); }\n  @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }\n  .bar { height: 4px; background: #1e2a3a; border-radius: 4px; margin-top: 14px; overflow: hidden; }\n  .bar > i { display: block; height: 100%; width: 0; background: var(--accent, #3b82f6); transition: width .1s linear; }\n  .controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: #8b98a6; font-size: .85rem; }\n  button { background: #1b2636; color: #e6edf3; border: 1px solid #2a3a4f; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }\n  button:hover { background: #243349; }\n  .dots { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }\n  .dot { width: 7px; height: 7px; border-radius: 50%; background: #2a3a4f; cursor: pointer; }\n  .dot.on { background: var(--accent, #3b82f6); }\n</style>\n</head>\n<body>\n<div class=\"stage\">\n  <h1>🎬 ${escapeHtml(docTitle)}</h1>\n  <div class=\"card\" id=\"card\">\n    <div class=\"head\"><span class=\"icon\" id=\"icon\"></span><span class=\"title\" id=\"title\"></span></div>\n    <div class=\"narration\" id=\"narration\"></div>\n    <div class=\"visual\" id=\"visual\"></div>\n    <div class=\"bar\"><i id=\"fill\"></i></div>\n  </div>\n  <div class=\"controls\">\n    <button id=\"playPause\">⏸ Pause</button>\n    <button id=\"prev\">◀ Prev</button>\n    <button id=\"next\">Next ▶</button>\n    <span id=\"counter\"></span>\n    <span class=\"dots\" id=\"dots\"></span>\n  </div>\n</div>\n<script>\n  const SCENES = ${scenesJson};\n  let i = 0, playing = true, raf = 0, start = 0;\n  const card = document.getElementById('card'), counter = document.getElementById('counter'), dotsEl = document.getElementById('dots');\n  SCENES.forEach((_, k) => { const d = document.createElement('span'); d.className = 'dot'; d.onclick = () => go(k); dotsEl.appendChild(d); });\n  function paint() {\n    const s = SCENES[i];\n    card.className = 'card scene-enter type-' + s.type;\n    document.getElementById('icon').textContent = s.icon;\n    document.getElementById('title').textContent = s.title;\n    document.getElementById('narration').textContent = s.narration;\n    document.getElementById('visual').innerHTML = s.visual || '';\n    counter.textContent = (i + 1) + ' / ' + SCENES.length;\n    [...dotsEl.children].forEach((d, k) => d.className = 'dot' + (k === i ? ' on' : ''));\n    void card.offsetWidth;\n  }\n  function tick(t) {\n    if (!start) start = t;\n    const s = SCENES[i], p = Math.min(1, (t - start) / s.durationMs);\n    document.getElementById('fill').style.width = (p * 100) + '%';\n    if (p >= 1) { if (i < SCENES.length - 1) { go(i + 1); } else { playing = false; updateBtn(); return; } }\n    if (playing) raf = requestAnimationFrame(tick);\n  }\n  function go(n) { i = Math.max(0, Math.min(SCENES.length - 1, n)); start = 0; cancelAnimationFrame(raf); paint(); if (playing) raf = requestAnimationFrame(tick); }\n  function updateBtn() { document.getElementById('playPause').textContent = playing ? '⏸ Pause' : '▶ Play'; }\n  document.getElementById('playPause').onclick = () => { playing = !playing; updateBtn(); start = 0; if (playing) raf = requestAnimationFrame(tick); else cancelAnimationFrame(raf); };\n  document.getElementById('next').onclick = () => go(i + 1);\n  document.getElementById('prev').onclick = () => go(i - 1);\n  paint(); raf = requestAnimationFrame(tick);\n</script>\n</body>\n</html>\n`\n}\n\n// The \"watch the agent write code\" keystroke animation + the CodeEdit IR a\n// Remotion consumer reads. Composes with this pipeline: a 'diff' scene shows an\n// inline card here; renderCodeAnimationHtml types the whole file out there.\nexport * from './code-edit'\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/agent-eval",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "Substrate for self-improving agents: traces, verifiable rewards, preferences, GEPA / reflective mutation, auto-research, replay, sequential anytime-valid stats, and release gates.",
   "homepage": "https://github.com/tangle-network/agent-eval#readme",
   "repository": {