glassbox-trace 0.3.0 → 0.5.0

package/dist/glassbox.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Glassbox</title>
-<meta name="description" content="The flight recorder viewer for Claude Code and Agent SDK sessions. Drop a session .jsonl; get a timeline, token and cost burn, and auto-diagnostics. Nothing leaves your browser.">
+<meta name="description" content="Glassbox tells you what went wrong in a Claude Code or Agent SDK session. Drop a session .jsonl; get a timeline, token and cost burn, auto-diagnostics, session compare and live tail. Nothing leaves your browser.">
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2712%27 fill=%27%23161C24%27/%3E%3Crect x=%2712%27 y=%2728%27 width=%2740%27 height=%278%27 rx=%272%27 fill=%27%23FF8A4D%27/%3E%3Crect x=%2712%27 y=%2716%27 width=%2724%27 height=%278%27 rx=%272%27 fill=%27%237DB0F0%27/%3E%3Crect x=%2724%27 y=%2740%27 width=%2728%27 height=%278%27 rx=%272%27 fill=%27%234FD0BB%27/%3E%3C/svg%3E">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">
 <style>
@@ -17,6 +17,7 @@
   --err:#C4342A;--warn:#8A5F00;--info:#2A63B8;--ok:#177A6B;
   --err-soft:rgba(196,52,42,.12);--warn-soft:rgba(138,95,0,.14);--info-soft:rgba(42,99,184,.12);
   --focus:#B8420A;
+  --who-a:#2A63B8;--who-b:#5B3FB8;
   --shadow:0 10px 30px rgba(22,28,36,.14);
   --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
   --cond:"IBM Plex Sans Condensed","Arial Narrow",var(--sans);
@@ -33,6 +34,7 @@
     --err:#F27C72;--warn:#E9B63A;--info:#7FB2F0;--ok:#4FD0BB;
     --err-soft:rgba(242,124,114,.16);--warn-soft:rgba(233,182,58,.16);--info-soft:rgba(127,178,240,.16);
     --focus:#FF8A4D;
+    --who-a:#7DB0F0;--who-b:#B39CF5;
     --shadow:0 10px 30px rgba(0,0,0,.5);
   }
 }
@@ -45,6 +47,7 @@
   --err:#F27C72;--warn:#E9B63A;--info:#7FB2F0;--ok:#4FD0BB;
   --err-soft:rgba(242,124,114,.16);--warn-soft:rgba(233,182,58,.16);--info-soft:rgba(127,178,240,.16);
   --focus:#FF8A4D;
+  --who-a:#7DB0F0;--who-b:#B39CF5;
   --shadow:0 10px 30px rgba(0,0,0,.5);
 }
 :root[data-density="compact"]{--fs:12.5px;--pad:8px;--rowh:15px}
@@ -81,6 +84,33 @@ a{color:var(--accent)}
 .banner p{margin:0;flex:1}
 .banner code{font-family:var(--mono);font-size:12.5px}
 
+/* live pill + compare */
+.live{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:4px 9px;margin-left:8px}
+.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.6s ease-in-out infinite}
+.live.off{color:var(--warn);border-color:var(--warn)}.live.off i{background:var(--warn);animation:none}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
+@media (prefers-reduced-motion:reduce){.live i{animation:none}}
+.cmp{padding:var(--pad)}
+.cmp .verdict{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin:0 0 10px;color:var(--muted)}
+.cmp .verdict b{color:var(--ink)}
+.cmp .who{display:inline-block;padding:1px 7px;border-radius:999px;font:500 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
+.cmp .who.a{border-color:var(--who-a);color:var(--who-a)}.cmp .who.b{border-color:var(--who-b);color:var(--who-b)}
+.cmp .grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px}
+@media (max-width:900px){.cmp .grid{grid-template-columns:1fr}}
+.cmp table{font-size:13px}
+.cmp td.d{min-width:140px}
+.cmp .dbar{display:flex;align-items:center;gap:8px}
+.cmp .dbar .track{position:relative;flex:1;height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
+.cmp .dbar .fill{position:absolute;top:0;bottom:0;background:var(--faint)}
+.cmp .dbar .fill.good{background:var(--ok)}.cmp .dbar .fill.bad{background:var(--err)}
+.cmp .dbar .ch{font-family:var(--mono);font-size:12px;min-width:56px;text-align:right;color:var(--muted)}
+.cmp .dbar .ch.good{color:var(--ok)}.cmp .dbar .ch.bad{color:var(--err)}
+.cmp h3{font:600 11px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
+.cmp .fl{margin:0;padding:0;list-style:none;font-size:13px}
+.cmp .fl li{padding:4px 0;border-top:1px solid var(--line-2)}
+.cmp .fl .id{font:11px var(--mono);color:var(--faint);margin-left:6px}
+.cmp .empty{padding:8px 0}
+
 /* session line */
 .session{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;padding:10px 0 0;color:var(--muted);font-size:13px}
 .session .title{color:var(--ink);font-weight:500;font-size:15px}
@@ -235,7 +265,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
 <body>
 <div class="app">
   <header class="mast">
-    <div class="brand"><h1>Glass<span>box</span></h1><span class="tag">flight recorder for Claude Code sessions</span></div>
+    <div class="brand"><h1>Glass<span>box</span></h1><span class="tag">what went wrong in your Claude Code session</span><span class="live" id="live" hidden role="status" aria-live="polite"><i aria-hidden="true"></i><span id="live-txt">LIVE</span></span></div>
     <label class="drop" id="drop" tabindex="0" aria-label="Drop a session .jsonl file or folder here, or press Enter to choose files">
       <input type="file" id="file" multiple accept=".jsonl,.json,.txt" class="sr-only">
       <span class="hint"><b>Drop a session .jsonl</b> (or the whole session folder) — parsed in your browser, never uploaded.</span>
@@ -245,6 +275,8 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       <button class="btn" id="open-folder" hidden title="Browse ~/.claude/projects and pick a session">Open folder…</button>
       <button class="btn" id="recent" hidden title="Sessions from the folder you opened before">Recent</button>
       <button class="btn" id="demo">Load demo</button>
+      <button class="btn" id="compare" title="Load a second session and compare it with this one">Compare…</button>
+      <input type="file" id="file-cmp" multiple accept=".jsonl,.json,.txt" class="sr-only" aria-label="Choose the session to compare with">
       <button class="btn" id="share" aria-pressed="false" title="Blank every prompt, input and result so the trace can be shared">Share mode</button>
       <button class="btn" id="export" disabled title="Download a structure-only copy of the transcript">Export redacted</button>
       <button class="btn" id="rates" title="Edit the per-model rate card">Rates</button>
@@ -261,9 +293,15 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     <div id="problems" class="problems" hidden role="alert"></div>
     <dl class="strip" id="strip"></dl>
 
+    <section class="sec" id="cmp-sec" hidden aria-labelledby="h-cmp">
+      <div class="sec-h"><h2 id="h-cmp">Compare</h2><div class="tools"><span class="aux" id="cmp-aux"></span><button class="btn sm" id="cmp-swap" title="Put the other session on the timeline">Swap</button><button class="btn sm" id="cmp-copy">Copy as Markdown</button><button class="btn sm" id="cmp-close" aria-label="Close compare">Close</button></div></div>
+      <div class="panel cmp" id="cmp"></div>
+    </section>
+
     <section class="sec" aria-labelledby="h-tl">
       <div class="sec-h"><h2 id="h-tl">Timeline</h2>
         <div class="tools">
+          <button class="btn" id="follow" hidden aria-pressed="true" title="Keep the right edge of the timeline on now">Follow</button>
           <div class="search"><label class="sr-only" for="q">Search prompts, tool inputs and results</label><input id="q" type="search" placeholder="Search…"><span class="n" id="q-n" aria-live="polite"></span></div>
           <label class="sr-only" for="fit">Fit to turn</label><select id="fit" class="btn"></select>
           <button class="btn" id="z-out" aria-label="Zoom out">−</button><button class="btn" id="z-in" aria-label="Zoom in">+</button><button class="btn" id="z-reset" aria-label="Reset zoom">⟲</button>
@@ -322,6 +360,15 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   <div class="db"><p class="note" style="margin:0 0 8px">The clipboard isn't available here — the text is selected below, press <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>C</kbd>.</p><label class="sr-only" for="copy-text">Text to copy</label><textarea id="copy-text" style="width:100%;height:240px;font:12px/1.45 var(--mono);background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:8px"></textarea></div>
 </dialog>
 
+<dialog id="cmp-dlg" aria-labelledby="cmp-h">
+  <div class="dh"><h3 id="cmp-h">Compare with another session</h3><button class="x" id="cmp-dlg-close" aria-label="Close">×</button></div>
+  <div class="db" style="font-size:13.5px;line-height:1.55">
+    <p style="margin:0 0 12px">Same task, two sessions: Glassbox lines up time, tokens, cost, tool use and findings side by side. The session already loaded stays on the timeline as <b>A</b>; the one you pick becomes <b>B</b>.</p>
+    <div class="controls"><button class="btn primary" id="cmp-pick">Choose files…</button><button class="btn" id="cmp-folder" hidden>From folder…</button><button class="btn" id="cmp-demo">Use the demo</button></div>
+    <p class="note" style="margin:12px 0 0">Or drop the second session's <code class="mono">.jsonl</code> anywhere on the page while this dialog is open. From the CLI: <code class="mono">glassbox compare A B --out compare.html</code>.</p>
+  </div>
+</dialog>
+
 <dialog id="help-dlg" aria-labelledby="help-h">
   <div class="dh"><h3 id="help-h">How to read Glassbox</h3><button class="x" id="help-close" aria-label="Close">×</button></div>
   <div class="db" style="font-size:13.5px;line-height:1.55" tabindex="0">
@@ -329,6 +376,8 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     <p><b>Context &amp; cost.</b> One bar per API request: the size of the prompt the model saw, split into cached reads (light), cache writes (mid) and uncached input (dark). The line is cumulative estimated cost.</p>
     <p><b>Findings.</b> Mechanical rules, no AI: identical calls repeated in a turn, tool error rates, results over 20k characters, context over 120k tokens, mid-session cache invalidation, responses that took over a minute and produced little, truncated outputs, hook and API errors, compaction events. Select one to highlight its evidence on the timeline; copy one or all as Markdown to paste into an issue or back into the agent.</p>
     <p><b>Tokens.</b> Assistant messages are stored one record per content block with the usage repeated on each; Glassbox counts usage once per API request. Thinking tokens are part of output tokens, shown as a share, never double counted. Cost is an estimate from the rate card unless the file carries a reported <code class="mono">total_cost_usd</code>.</p>
+    <p><b>Compare.</b> Load a second session (<b>Compare…</b>) and Glassbox lines the two up: every metric with a change bar, tool use side by side, and which findings appear in only one of them. <b>Swap</b> puts the other session on the timeline.</p>
+    <p><b>Live.</b> <code class="mono">glassbox watch</code> serves this page from your own machine and streams the transcript as Claude Code writes it. <b>Follow</b> keeps the right edge on now; pan or zoom and it lets go.</p>
     <p><b>Share mode.</b> Blanks every prompt, tool input, result and assistant text in the view; <b>Export redacted</b> downloads a structure-only <code class="mono">.jsonl</code> that keeps timestamps, usage and tool names — safe to post publicly.</p>
     <p><b>Keyboard.</b></p>
     <div class="keys">
@@ -353,7 +402,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
 })(typeof globalThis !== 'undefined' ? globalThis : this, function () {
   'use strict';
 
-  const VERSION = '0.3.0';
+  const VERSION = '0.5.0';
 
   // ---------------------------------------------------------------------------
   // Rate card (USD per million tokens). Prefix-matched against model ids so dated
@@ -401,6 +450,13 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     longTurnTools: 30,
     failedToolRate: 0.5,
     failedToolMinCalls: 3,
+    failedToolWarnMinErrors: 2,
+    failedToolWarnRate: 0.2,
+    cacheMissMinShare: 0.05,
+    longGenerationMaxTokPerSec: 15,
+    duplicateReadAgents: 3,
+    duplicateReadWarnChars: 100000,
+    groupRepeatsMin: 3, // slow-tool / oversized-result: this many from one tool become one finding
   };
 
   // ---------------------------------------------------------------------------
@@ -410,18 +466,31 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   const WRITE_TOOLS = new Set(['Write', 'Edit', 'MultiEdit', 'NotebookEdit']);
   const EXEC_TOOLS = new Set(['Bash', 'BashOutput', 'KillShell']);
   const AGENT_TOOLS = new Set(['Agent', 'Task', 'Workflow']);
-  const USER_TOOLS = new Set(['AskUserQuestion']);
+  const USER_TOOLS = new Set(['AskUserQuestion', 'SendUserMessage', 'SendUserFile', 'ExitPlanMode', 'EnterPlanMode']);
+  // Cowork: Artifact publishes a page (a write), Skill loads instructions (a read); Task* are bookkeeping (other).
+  const COWORK_READ = new Set(['Skill', 'ListSkills', 'SearchSkills', 'TaskList', 'TaskGet']);
+  const COWORK_WRITE = new Set(['Artifact']);
+  // Blocking reads of a background task's output: the duration is the task's run time, and re-issuing the
+  // same call after a "still running" timeout is polling, not a retry.
+  const WAIT_TOOLS = new Set(['TaskOutput', 'AgentOutputTool']);
+  const isWait = (c) => WAIT_TOOLS.has(c.name) && !(c.input && c.input.block === false);
+  const waitTarget = (c) => { const i = c.input || {}; return String(i.task_id || i.agentId || i.bash_id || ''); };
+  const hasRange = (c) => !!(c.input && (c.input.limit != null || c.input.offset != null || c.input.head_limit != null));
+  // MCP leaf names are verb_noun or noun_verb ("memory_read", "device_list_dir", "send_message"): match the verb as a word.
+  const MCP_READ = /(^|_)(get|list|search|read|find|fetch|query|describe|show|stage|screenshot|context|status|info|check)(_|$)/i;
+  const MCP_WRITE = /(^|_)(write|set|put|create|update|delete|remove|commit|send|reply|forward|upload|str_replace|append|label|move|rename|save)(_|$)/i;
 
   function toolCategory(name) {
     if (!name) return 'other';
-    if (READ_TOOLS.has(name)) return 'read';
-    if (WRITE_TOOLS.has(name)) return 'write';
+    if (READ_TOOLS.has(name) || COWORK_READ.has(name)) return 'read';
+    if (WRITE_TOOLS.has(name) || COWORK_WRITE.has(name)) return 'write';
     if (EXEC_TOOLS.has(name) || /device_bash$/.test(name)) return 'exec';
     if (AGENT_TOOLS.has(name)) return 'agent';
     if (USER_TOOLS.has(name)) return 'user';
     if (name.startsWith('mcp__')) {
       const leaf = name.split('__').pop() || '';
-      if (/^(get|list|search|read|find|fetch|query|describe|show)/i.test(leaf)) return 'read';
+      if (MCP_READ.test(leaf)) return 'read';
+      if (MCP_WRITE.test(leaf)) return 'write';
       return 'mcp';
     }
     return 'other';
@@ -487,6 +556,26 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     return !u.input && !u.cacheRead && !u.cacheWrite && !u.output;
   }
 
+  // A tool call that never ran because the human or a permission rule stopped it. Claude Code
+  // records toolDenialKind (user-rejected, permission-rule, automode-blocked, interrupted); older
+  // transcripts only have the result text. A shell's own "Permission denied" is a real failure.
+  function denialKind(rec, text) {
+    if (rec && rec.toolDenialKind) return String(rec.toolDenialKind);
+    const t = String(text || '').trim();
+    if (/^\[Request interrupted by user/.test(t)) return 'interrupted';
+    if (/^The user doesn't want to proceed with this tool use|^User rejected tool use|^Denied by voice/.test(t)) return 'user-rejected';
+    if (/^Permission (for this action was|to use \S+ has been) denied/.test(t)) return 'permission-rule';
+    return null;
+  }
+
+  // One API response is written as several records (one per content block). Subagent transcripts
+  // rewrite output_tokens as the stream progresses, so the first record can be far below the final
+  // count; the other fields repeat. Keep the largest value seen for each field.
+  function maxUsage(a, b) {
+    for (const k of Object.keys(a)) if ((b[k] || 0) > a[k]) a[k] = b[k];
+    return a;
+  }
+
   // ---------------------------------------------------------------------------
   // Line parsing
   // ---------------------------------------------------------------------------
@@ -577,7 +666,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     const meta = {
       sessionId: null, version: null, cwd: null, gitBranch: null, entrypoint: null, title: null,
       models: [], start: null, end: null, hasTimestamps, files: fileMeta, format: 'claude-code',
-      reportedCost: null, reportedUsage: null, recordCounts: {},
+      reportedCost: null, reportedUsage: null, reportedTurns: null, reportedDurationMs: null, recordCounts: {},
     };
 
     const agents = new Map(); // id -> agent
@@ -587,6 +676,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
         agents.set(id, {
           id, type: id === 'main' ? 'main' : 'subagent', description: null, parentToolUseId: null,
           start: null, end: null, usage: emptyUsage(), requestCount: 0, toolCount: 0, model: null,
+          workflowRun: (String(rec._file || '').match(/workflows[\\/](wf_[^\\/]+)[\\/]/) || [])[1] || null,
         });
       }
       const a = agents.get(id);
@@ -637,13 +727,17 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       if (!meta.gitBranch && rec.gitBranch) meta.gitBranch = rec.gitBranch;
       if (!meta.entrypoint && rec.entrypoint) meta.entrypoint = rec.entrypoint;
       const t = ts(rec);
-      if (t != null) { if (meta.start == null || t < meta.start) meta.start = t; if (meta.end == null || t > meta.end) meta.end = t; }
+      // Only conversation records bound the session: bookkeeping records (frame-link, file-history…)
+      // can be written days later and would stretch the wall clock.
+      if (t != null && (type === 'user' || type === 'assistant' || type === 'system')) { if (meta.start == null || t < meta.start) meta.start = t; if (meta.end == null || t > meta.end) meta.end = t; }
 
       if (type === 'summary') { if (rec.summary && !meta.title) meta.title = rec.summary; events.push({ kind: 'summary', at: t, detail: rec.summary }); continue; }
       if (type === 'attachment') { attachments.count++; attachments.chars += JSON.stringify(rec.attachment || '').length; continue; }
       if (type === 'result') {
         meta.format = 'stream-json';
         if (typeof rec.total_cost_usd === 'number') meta.reportedCost = rec.total_cost_usd;
+        if (typeof rec.num_turns === 'number') meta.reportedTurns = rec.num_turns;
+        if (typeof rec.duration_ms === 'number') meta.reportedDurationMs = rec.duration_ms;
         if (rec.usage) meta.reportedUsage = usageFrom(rec.usage);
         if (rec.is_error) events.push({ kind: 'api_error', at: t, detail: textOf(rec.result) || 'result is_error' });
         continue;
@@ -689,6 +783,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
               if (structured && typeof structured === 'object' && !text && !imgs.length) call.resultChars = JSON.stringify(structured).length;
               // stream-json puts is_error only in block; Claude Code also stores toolUseResult as an Error string
               if (!tr.is_error && typeof structured === 'string' && /^Error/i.test(structured)) { call.status = 'error'; call.isError = true; }
+              if (call.isError) call.denial = denialKind(rec, text);
             } else {
               toolCalls.push(mkOrphanResult(tr, rec, a.id, text, turns.length ? turns[turns.length - 1].index : null));
             }
@@ -701,6 +796,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
         let kind = 'human';
         if (rec.isCompactSummary) kind = 'compact';
         else if (rec.isMeta) kind = 'meta';
+        else if (/^\[Request interrupted by user/.test(text.trim())) kind = 'interrupt';
         else if (/^<(system-reminder|local-command|command-name|bash-input|bash-stdout)/.test(text.trim())) kind = 'meta';
         ensureTurn(rec, kind, text);
         continue;
@@ -723,16 +819,10 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
           turn.requestIds.push(req.id);
           a.requestCount++;
           if (msg.model) { pushModel(meta, msg.model); if (!a.model) a.model = msg.model; }
-          const u = usageFrom(msg.usage);
-          if (!isEmptyUsage(u)) { req.usage = u; req.contextTokens = u.input + u.cacheRead + u.cacheWrite; addUsage(turn.usage, u); addUsage(a.usage, u); }
         } else {
           if (t != null) { if (req.start == null || t < req.start) req.start = t; if (req.end == null || t > req.end) req.end = t; }
-          // usage: if the first record lacked it and a later one has it, take it once
-          if (isEmptyUsage(req.usage)) {
-            const u = usageFrom(msg.usage);
-            if (!isEmptyUsage(u)) { req.usage = u; req.contextTokens = u.input + u.cacheRead + u.cacheWrite; const turn = turns[req.turnIndex]; addUsage(turn.usage, u); addUsage(a.usage, u); }
-          }
         }
+        maxUsage(req.usage, usageFrom(msg.usage)); // turn and agent totals are summed once, after the loop
         req.records++;
         if (msg.stop_reason) req.stopReason = msg.stop_reason;
         if (rec.isApiErrorMessage) req.isApiError = true;
@@ -745,7 +835,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
               id: b.id || (key + ':' + blockIndex), agent: a.id, requestId: req.id, name: b.name || 'unknown', input: b.input || {},
               start: t, end: null, durationMs: null, status: 'orphan', isError: false, resultText: '', resultChars: 0,
               resultStructured: null, category: toolCategory(b.name), turnIndex: req.turnIndex, subagentId: null,
-              inputChars: JSON.stringify(b.input || {}).length, resultImages: 0, imageBytes: 0,
+              inputChars: JSON.stringify(b.input || {}).length, resultImages: 0, imageBytes: 0, denial: null,
             };
             toolCalls.push(call);
             toolCallById.set(call.id, call);
@@ -767,7 +857,12 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     }
 
     // Finalise
-    for (const req of requests) req.blocks.sort((x, y) => x.index - y.index);
+    for (const req of requests) {
+      req.blocks.sort((x, y) => x.index - y.index);
+      req.contextTokens = req.usage.input + req.usage.cacheRead + req.usage.cacheWrite;
+      addUsage(turns[req.turnIndex].usage, req.usage);
+      addUsage(agents.get(req.agent).usage, req.usage);
+    }
     for (const turn of turns) if (turn.end == null) turn.end = meta.end;
     // Response timing. Assistant record timestamps are written when a block finishes streaming,
     // so a request's "start" is really its first completed block. We measure from the moment the
@@ -799,9 +894,14 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
         const parent = toolCalls.find((c) => c.category === 'agent' && c.agent === 'main' && ((c.resultText && c.resultText.includes(ag.id)) || (c.resultStructured && JSON.stringify(c.resultStructured).includes(ag.id))));
         if (parent) ag.parentToolUseId = parent.id;
       }
+      // Workflow agents live in subagents/workflows/<runId>/; the Workflow call's result names that runId.
+      if (!ag.parentToolUseId && ag.workflowRun) {
+        const parent = toolCalls.find((c) => c.name === 'Workflow' && ((c.resultStructured && c.resultStructured.runId === ag.workflowRun) || (c.resultText && c.resultText.includes(ag.workflowRun))));
+        if (parent) ag.parentToolUseId = parent.id;
+      }
       if (ag.parentToolUseId) {
         const parent = toolCallById.get(ag.parentToolUseId);
-        if (parent) { parent.subagentId = ag.id; if (!ag.description && parent.input && parent.input.description) ag.description = parent.input.description; if (!ag.agentType && parent.input && parent.input.subagent_type) ag.agentType = parent.input.subagent_type; }
+        if (parent) { if (!parent.subagentId) parent.subagentId = ag.id; (parent.subagentIds || (parent.subagentIds = [])).push(ag.id); if (!ag.description && parent.input && parent.input.description) ag.description = parent.input.description; if (!ag.agentType && parent.input && parent.input.subagent_type) ag.agentType = parent.input.subagent_type; }
       }
     }
 
@@ -809,12 +909,15 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     const usage = emptyUsage();
     for (const r of requests) addUsage(usage, r.usage);
     const humanIdleMs = turns.reduce((s, tn) => s + (tn.idleBeforeMs || 0), 0);
-    const wallMs = (meta.start != null && meta.end != null) ? meta.end - meta.start : null;
+    // stream-json runs carry no per-record timestamps and no human prompt record, but the result
+    // record reports duration_ms and num_turns; use those rather than showing "—" and 0.
+    const wallMs = (meta.start != null && meta.end != null) ? meta.end - meta.start : (meta.reportedDurationMs != null ? meta.reportedDurationMs : null);
+    const humanTurns = turns.filter((tn) => tn.promptKind === 'human' && tn.agent === 'main').length;
     const totals = {
       usage, wallMs, humanIdleMs, activeMs: wallMs != null ? Math.max(0, wallMs - humanIdleMs) : null,
       requests: requests.length, toolCalls: toolCalls.length, toolErrors: toolCalls.filter((c) => c.isError).length,
       orphans: toolCalls.filter((c) => c.status === 'orphan').length,
-      turns: turns.filter((tn) => tn.promptKind === 'human' && tn.agent === 'main').length,
+      turns: humanTurns || (meta.reportedTurns != null ? meta.reportedTurns : 0),
       toolTimeMs: toolCalls.filter((c) => c.agent === 'main').reduce((s, c) => s + (c.durationMs || 0), 0),
       modelTimeMs: agents.get('main').modelTimeMs || 0,
       cacheHitRatio: (usage.cacheRead + usage.cacheWrite + usage.input) ? usage.cacheRead / (usage.cacheRead + usage.cacheWrite + usage.input) : null,
@@ -852,9 +955,20 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       if (!byTurnSig.has(sig)) byTurnSig.set(sig, []);
       byTurnSig.get(sig).push(c);
     }
+    const callIndex = new Map(calls.map((c, i) => [c, i]));
     for (const group of byTurnSig.values()) {
       if (group.length >= o.retryLoopMin) {
         const errs = group.filter((c) => c.isError).length;
+        if (isWait(group[0]) && errs < 2) continue; // polling a running task; failing polls still count
+        if (errs < 2) {
+          // Re-running a test or taking another screenshot after something changed is observing, not
+          // looping: only flag successful repeats that returned the same thing with nothing in between.
+          const inGroup = new Set(group);
+          const between = calls.slice(callIndex.get(group[0]) + 1, callIndex.get(group[group.length - 1]));
+          const changed = between.some((c) => c.agent === group[0].agent && !inGroup.has(c) && c.category !== 'read');
+          const same = group.every((c) => c.resultText === group[0].resultText && c.imageBytes === group[0].imageBytes);
+          if (changed || !same) continue;
+        }
         push({
           id: 'retry-loop', severity: errs >= 2 ? 'error' : 'warn',
           title: `${group[0].name} called ${group.length}× with identical input`,
@@ -864,14 +978,16 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       }
     }
 
-    // failed-tool: per tool error rate
+    // failed-tool: per tool error rate. Calls the human or a permission rule stopped are not the
+    // tool's failure (see permission-denied); one stray error in a long session is not a pattern.
     const byTool = new Map();
-    for (const c of calls) { if (c.unmatched) continue; if (!byTool.has(c.name)) byTool.set(c.name, []); byTool.get(c.name).push(c); }
+    for (const c of calls) { if (c.unmatched || c.denial) continue; if (!byTool.has(c.name)) byTool.set(c.name, []); byTool.get(c.name).push(c); }
     for (const [name, list] of byTool) {
       const errs = list.filter((c) => c.isError);
       if (!errs.length) continue;
       const rate = errs.length / list.length;
       const bad = list.length >= o.failedToolMinCalls && rate >= o.failedToolRate;
+      if (!bad && (errs.length < o.failedToolWarnMinErrors || rate < o.failedToolWarnRate)) continue;
       push({
         id: 'failed-tool', severity: bad ? 'error' : 'warn',
         title: `${name} failed ${errs.length} of ${list.length} calls (${Math.round(rate * 100)}%)`,
@@ -880,6 +996,18 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       });
     }
 
+    // permission-denied: calls that never ran because the human rejected them, a permission rule or
+    // the auto-mode classifier blocked them, or the human interrupted.
+    const denied = calls.filter((c) => c.denial);
+    if (denied.length) {
+      const kinds = {}; for (const c of denied) kinds[c.denial] = (kinds[c.denial] || 0) + 1;
+      push({
+        id: 'permission-denied', severity: 'info', title: `${denied.length} tool call${denied.length > 1 ? 's' : ''} denied or interrupted`,
+        detail: Object.entries(kinds).map(([k, n]) => `${k} ×${n}`).join(', ') + ' — ' + summariseNames(denied),
+        evidence: { toolCallIds: denied.map((c) => c.id) }, metric: denied.length,
+      });
+    }
+
     // orphan-tool
     const orphans = calls.filter((c) => c.status === 'orphan');
     if (orphans.length) push({
@@ -904,18 +1032,52 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       };
       for (const c of calls) {
         if (c.agent !== ag.id || c.unmatched) continue;
-        if (c.category === 'read') run.push(c); else if (c.category === 'write' || c.category === 'exec') flush(); // agent/user/mcp calls don't break a run
+        // MCP calls that aren't reads are actions (browser navigate/click, device commands) and end a run;
+        // agent and user calls don't.
+        if (c.category === 'read') run.push(c); else if (c.category === 'write' || c.category === 'exec' || c.category === 'mcp') flush();
       }
       flush();
     }
 
-    // oversized-result
+    // duplicate-subagent-read: the same file read by several agents, each paying for it in its own context
+    const sharedReads = new Set(); // reported here, so oversized-result below skips them
+    const readsByFile = new Map();
     for (const c of calls) {
-      if (c.resultChars >= o.oversizedResultWarn) push({
+      if (c.name !== 'Read' || c.isError || !c.input || !c.input.file_path) continue;
+      const k = String(c.input.file_path).replace(/\\/g, '/').toLowerCase();
+      if (!readsByFile.has(k)) readsByFile.set(k, []);
+      readsByFile.get(k).push(c);
+    }
+    for (const list of readsByFile.values()) {
+      const agentIds = new Set(list.map((c) => c.agent));
+      if (agentIds.size < o.duplicateReadAgents) continue;
+      const chars = list.reduce((s, c) => s + c.resultChars, 0);
+      for (const c of list) sharedReads.add(c);
+      const largest = Math.max(...list.map((c) => c.resultChars));
+      push({
+        id: 'duplicate-subagent-read', severity: largest >= o.oversizedResultError ? 'error' : chars >= o.duplicateReadWarnChars ? 'warn' : 'info',
+        title: `Same file read by ${agentIds.size} agents (${fmtInt(chars)} chars)`, // path only in detail, which --redact blanks
+        detail: `${list.length} reads of ${list[0].input.file_path} across ${agentIds.size} agents; each copy is billed in that agent's context on every later request.`,
+        evidence: { toolCallIds: list.map((c) => c.id) }, metric: chars,
+      });
+    }
+
+    // oversized-result: one line per call, or one per tool when a tool does it repeatedly
+    const bigByTool = new Map();
+    for (const c of calls) if (c.resultChars >= o.oversizedResultWarn && !sharedReads.has(c)) { if (!bigByTool.has(c.name)) bigByTool.set(c.name, []); bigByTool.get(c.name).push(c); }
+    for (const [name, list] of bigByTool) {
+      const largest = Math.max(...list.map((c) => c.resultChars)), total = list.reduce((s, c) => s + c.resultChars, 0);
+      const ranged = list.every(hasRange);
+      const detail = 'Large tool results stay in context for the rest of the session. ' + (ranged ? 'The call already set a range; long lines or a wide window still cost, so narrow it or grep first.' : 'Consider head/limit, grep, or a subagent.');
+      if (list.length >= o.groupRepeatsMin) push({
+        id: 'oversized-result', severity: largest >= o.oversizedResultError ? 'error' : 'warn',
+        title: `${name} returned over ${fmtInt(o.oversizedResultWarn)} chars ${list.length} times (largest ${fmtInt(largest)}, ${fmtInt(total)} in all)`,
+        detail, evidence: { toolCallIds: list.map((c) => c.id) }, metric: largest,
+      });
+      else for (const c of list) push({
         id: 'oversized-result', severity: c.resultChars >= o.oversizedResultError ? 'error' : 'warn',
         title: `${c.name} returned ${fmtInt(c.resultChars)} chars`,
-        detail: 'Large tool results stay in context for the rest of the session. Consider head/limit, grep, or a subagent.',
-        evidence: { toolCallIds: [c.id], turnIndex: c.turnIndex }, metric: c.resultChars,
+        detail, evidence: { toolCallIds: [c.id], turnIndex: c.turnIndex }, metric: c.resultChars,
       });
     }
 
@@ -935,21 +1097,45 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       if (r.contextTokens >= o.contextBloatWarn && !crossed) crossed = r;
       if (!peak || r.contextTokens > peak.contextTokens) peak = r;
     }
-    if (crossed) push({
-      id: 'context-bloat', severity: peak.contextTokens >= o.contextBloatError ? 'error' : 'warn',
-      title: `Context reached ${fmtInt(peak.contextTokens)} tokens`,
-      detail: `First crossed ${fmtInt(o.contextBloatWarn)} at request #${reqs.indexOf(crossed) + 1} (turn ${crossed.turnIndex + 1}). Every later request pays for that prefix.`,
-      evidence: { requestIds: [crossed.id, peak.id], turnIndex: crossed.turnIndex }, metric: peak.contextTokens,
-    });
+    if (crossed) {
+      // What the large context cost: every request (any agent) sent with more than the threshold.
+      let above = 0, all = 0, n = 0;
+      for (const r of reqs) { const c = requestCost(r.usage, rateFor(r.model, o.rates)); if (c == null) continue; all += c; if (r.contextTokens >= o.contextBloatWarn) { above += c; n++; } }
+      const spend = all > 0 ? ` · ${usd(above)} (${Math.round(above / all * 100)}% of cost) spent above ${fmtInt(o.contextBloatWarn)}` : '';
+      push({
+        id: 'context-bloat', severity: peak.contextTokens >= o.contextBloatError ? 'error' : 'warn',
+        title: `Context reached ${fmtInt(peak.contextTokens)} tokens${spend}`,
+        detail: `First crossed ${fmtInt(o.contextBloatWarn)} at request #${reqs.indexOf(crossed) + 1} (turn ${crossed.turnIndex + 1}); ${n} request${n === 1 ? '' : 's'} ran above it. Every one of them re-reads that prefix.`,
+        evidence: { requestIds: [crossed.id, peak.id], turnIndex: crossed.turnIndex }, metric: peak.contextTokens, cost: all > 0 ? above : null,
+      });
+    }
 
-    // cache-churn
-    const firstReqOfAgent = new Set();
+    // cache-churn / idle-cache-expiry: a request that re-wrote prefix the previous request of the same
+    // agent had already cached. A big cache write on its own is usually just a new tool result being
+    // cached, which is expected. After a gap longer than the cache lifetime the miss is expiry, not
+    // invalidation; right after a compaction it is an expected rebuild.
+    const prevByAgent = new Map(); const ttlByAgent = new Map();
     for (const r of reqs) {
-      if (!firstReqOfAgent.has(r.agent)) { firstReqOfAgent.add(r.agent); continue; }
-      if (r.usage.cacheWrite >= o.cacheChurnMin) push({
-        id: 'cache-churn', severity: 'info', title: `${fmtInt(r.usage.cacheWrite)} tokens re-cached at request #${reqs.indexOf(r) + 1}`,
-        detail: 'A large cache write mid-session means the cached prefix was invalidated (system prompt, tool list or early messages changed).',
-        evidence: { requestIds: [r.id], turnIndex: r.turnIndex }, metric: r.usage.cacheWrite,
+      const prev = prevByAgent.get(r.agent); prevByAgent.set(r.agent, r);
+      if (r.usage.cacheWrite1h > 0) ttlByAgent.set(r.agent, 3600e3); else if (r.usage.cacheWrite5m > 0 && !ttlByAgent.has(r.agent)) ttlByAgent.set(r.agent, 300e3);
+      if (!prev) continue;
+      const cached = prev.usage.cacheRead + prev.usage.cacheWrite;
+      const missed = cached - r.usage.cacheRead;
+      if (missed < o.cacheChurnMin || missed < cached * o.cacheMissMinShare) continue;
+      const sent = r.responseFrom != null ? r.responseFrom : r.start;
+      if (prev.end != null && sent != null && trace.events.some((e) => e.kind === 'compact' && e.at != null && e.at >= prev.end && e.at <= sent)) continue;
+      const idle = prev.end != null && sent != null ? sent - prev.end : null;
+      const ttl = ttlByAgent.get(r.agent) || 300e3;
+      const n = reqs.indexOf(r) + 1;
+      if (idle != null && idle > ttl) push({
+        id: 'idle-cache-expiry', severity: 'info', title: `${fmtInt(missed)} tokens re-cached after ${fmtDur(idle)} idle`,
+        detail: `Request #${n}${r.agent !== 'main' ? ' (subagent)' : ''}: the gap was longer than the ${ttl >= 3600e3 ? '1-hour' : '5-minute'} cache lifetime, so the whole prefix was written again.`,
+        evidence: { requestIds: [prev.id, r.id], turnIndex: r.turnIndex }, metric: missed,
+      });
+      else push({
+        id: 'cache-churn', severity: 'info', title: `${fmtInt(missed)} cached tokens re-written at request #${n}`,
+        detail: `The previous request had ${fmtInt(cached)} tokens cached; this one read only ${fmtInt(r.usage.cacheRead)} back${idle != null ? ` ${fmtDur(idle)} later` : ''}. Something early in the prompt changed (system prompt, tool list, early messages).`,
+        evidence: { requestIds: [prev.id, r.id], turnIndex: r.turnIndex }, metric: missed,
       });
     }
 
@@ -960,14 +1146,40 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       evidence: {}, metric: trace.totals.cacheHitRatio,
     });
 
-    // slow-tool
+    // slow-tool: blocking waits roll up per background task, other slow calls per tool when repeated
+    const waits = new Map(), slowByTool = new Map();
     for (const c of calls) {
-      if (c.durationMs != null && c.durationMs >= o.slowToolInfoMs) push({
+      if (isWait(c)) { const k = c.agent + '|' + c.name + '|' + waitTarget(c); if (!waits.has(k)) waits.set(k, []); waits.get(k).push(c); continue; }
+      // Time spent on a question to the human, or on a permission prompt that ended in a denial, is the human's.
+      if (c.category === 'user' || c.denial) continue;
+      if (c.durationMs != null && c.durationMs >= o.slowToolInfoMs) { if (!slowByTool.has(c.name)) slowByTool.set(c.name, []); slowByTool.get(c.name).push(c); }
+    }
+    for (const [name, list] of slowByTool) {
+      const longest = Math.max(...list.map((c) => c.durationMs)), total = list.reduce((s, c) => s + c.durationMs, 0);
+      const detail = list[0].category === 'agent' ? 'Subagent run time.' : 'Long-running tool call.';
+      if (list.length >= o.groupRepeatsMin) push({
+        id: 'slow-tool', severity: longest >= o.slowToolWarnMs ? 'warn' : 'info',
+        title: `${name} took over ${fmtDur(o.slowToolInfoMs)} ${list.length} times (longest ${fmtDur(longest)}, ${fmtDur(total)} in all)`,
+        detail, evidence: { toolCallIds: list.map((c) => c.id) }, metric: total,
+      });
+      else for (const c of list) push({
         id: 'slow-tool', severity: c.durationMs >= o.slowToolWarnMs ? 'warn' : 'info',
-        title: `${c.name} took ${fmtDur(c.durationMs)}`, detail: c.category === 'agent' ? 'Subagent run time.' : c.category === 'user' ? 'Waiting on the human.' : 'Long-running tool call.',
+        title: `${c.name} took ${fmtDur(c.durationMs)}`, detail,
         evidence: { toolCallIds: [c.id], turnIndex: c.turnIndex }, metric: c.durationMs,
       });
     }
+    // One finding per waited-on task, always info: the time belongs to the background job.
+    for (const group of waits.values()) {
+      const ms = group.reduce((s, c) => s + (c.durationMs || 0), 0);
+      if (ms < o.slowToolInfoMs) continue;
+      const target = waitTarget(group[0]);
+      push({
+        id: 'slow-tool', severity: 'info',
+        title: `${group[0].name} waited ${fmtDur(ms)} on ${target ? 'task ' + target : 'a background task'}${group.length > 1 ? ` (${group.length} polls)` : ''}`,
+        detail: 'Blocking wait on background work: the time is the task\'s run time, not a slow tool.',
+        evidence: { toolCallIds: group.map((c) => c.id), turnIndex: group[0].turnIndex }, metric: ms,
+      });
+    }
 
     // slow-model: a long response that produced little — API latency, rate limiting or a stall,
     // as opposed to a long response that was simply writing a lot (reported separately as info).
@@ -980,9 +1192,10 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
           detail: `Request #${n} (${r.tokensPerSec != null ? r.tokensPerSec.toFixed(1) : '?'} tok/s): API latency, rate limiting or a stalled stream.`,
           evidence: { requestIds: [r.id], turnIndex: r.turnIndex }, metric: r.responseMs,
         });
-        else push({
-          id: 'long-generation', severity: 'info', title: `${fmtDur(r.responseMs)} writing ${fmtInt(r.usage.output)} tokens`,
-          detail: `Request #${n} at ${r.tokensPerSec != null ? r.tokensPerSec.toFixed(1) : '?'} tok/s (${r.blocksSummary}). Big single outputs are normal for file writes; a stall would show as low tok/s.`,
+        // A long response that wrote a lot at a normal rate is just a big output. Only a slow rate is worth a line.
+        else if (r.tokensPerSec != null && r.tokensPerSec < o.longGenerationMaxTokPerSec) push({
+          id: 'long-generation', severity: 'info', title: `${fmtDur(r.responseMs)} writing ${fmtInt(r.usage.output)} tokens (${r.tokensPerSec.toFixed(1)} tok/s)`,
+          detail: `Request #${n} (${r.blocksSummary}) streamed well below the usual rate: a partial stall or a slow API period.`,
           evidence: { requestIds: [r.id], turnIndex: r.turnIndex }, metric: r.responseMs,
         });
       }
@@ -1014,10 +1227,18 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
       detail: 'Most of the spend happened in delegated work.', evidence: {}, metric: subTokens / allTokens,
     });
 
-    // long-turn
-    for (const tn of trace.turns) if (tn.toolCallIds.length >= o.longTurnTools) push({
-      id: 'long-turn', severity: 'info', title: `Turn ${tn.index + 1} made ${tn.toolCallIds.length} tool calls`,
-      detail: 'A very long autonomous stretch. Worth a skim for wasted work.', evidence: { turnIndex: tn.index, toolCallIds: tn.toolCallIds.slice() }, metric: tn.toolCallIds.length,
+    // long-turn: main conversation only (a subagent's whole run is one turn by design), numbered like
+    // the viewer's T1, T2… (human prompts).
+    // Meta turns (injected reminders, interrupts) between two prompts belong to the stretch before them.
+    const stretches = [];
+    for (const tn of trace.turns) {
+      if (tn.agent !== 'main') continue;
+      if (tn.promptKind === 'human' || !stretches.length) stretches.push({ first: tn, no: stretches.length + 1, ids: [] });
+      stretches[stretches.length - 1].ids.push(...tn.toolCallIds);
+    }
+    for (const st of stretches) if (st.ids.length >= o.longTurnTools) push({
+      id: 'long-turn', severity: 'info', title: `Turn ${st.no} made ${st.ids.length} tool calls`,
+      detail: 'A very long autonomous stretch. Worth a skim for wasted work.', evidence: { turnIndex: st.first.index, toolCallIds: st.ids }, metric: st.ids.length,
     });
 
     const order = { error: 0, warn: 1, info: 2 };
@@ -1080,6 +1301,210 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     };
   }
 
+  // ---------------------------------------------------------------------------
+  // Advice — one sentence per rule on what to do differently. Mechanical, like the rules.
+  // ---------------------------------------------------------------------------
+  const ADVICE = {
+    'retry-loop': 'When a call fails, change something before calling again: read the error, fix the input or the environment, or ask the user — never repeat an identical call.',
+    'failed-tool': 'Check the first error message of the failing tool before retrying; if the tool itself is broken, switch tools or tell the user instead of pushing on.',
+    'orphan-tool': 'A call with no result means the session ended mid-call; if you resume, re-run it or confirm its side effects before building on it.',
+    'exploration-run': 'Batch exploration: use one Grep or Glob with a wider pattern, or delegate a broad search to a subagent, then commit to an edit or command sooner.',
+    'oversized-result': 'Ask tools for less: head/limit/offset on reads, a tighter grep pattern, a file listing instead of a dump, or a subagent that returns a summary.',
+    'image-heavy': 'Take fewer screenshots and crop or downscale them; read text with a page-text tool where one exists, since every image is re-billed on each later request.',
+    'context-bloat': 'Keep the prompt small: summarise long results into notes, avoid re-reading files already in context, and hand large investigations to subagents.',
+    'cache-churn': 'Avoid changing anything at the top of the prompt mid-session (system prompt, tool list, early messages), because it invalidates the cached prefix and re-bills it.',
+    'low-cache-hit': 'Long stable prefixes cache well; frequent tool-list or system-prompt changes and many tiny sessions do not.',
+    'slow-tool': 'For calls that take minutes, run them in the background, tighten the command, or set a timeout, instead of blocking the whole turn.',
+    'slow-model': 'A slow, small response is usually API latency or a stall; nothing to fix in the session itself, but note it when reporting session time.',
+    'long-generation': 'Large single outputs are normal for file writes; split very large files into parts if a stall (low tok/s) shows up.',
+    'max-tokens': 'The output was truncated: write large files in sections and keep single responses under the output limit.',
+    'api-error': 'An API error interrupted the session; check what was lost and re-run the affected step rather than assuming it completed.',
+    'hook-error': 'A hook failed; read the hook error, fix the hook command or its permissions, then re-run the step it guarded.',
+    'compaction': 'Context was compacted; state that matters later (decisions, file paths, test status) should be written to a file or note before it is summarised away.',
+    'thinking-heavy': 'Most output tokens were thinking; fine for hard problems, but for routine tool loops a lower effort setting is cheaper and just as good.',
+    'subagent-share': 'Most spend was in subagents; give them narrower briefs and ask for short structured returns so the parent pays for less.',
+    'long-turn': 'A very long autonomous turn; check in with a short progress summary at natural checkpoints so wasted work is caught earlier.',
+    'permission-denied': 'Before a call the user may not want (installs, network, deleting, publishing), say what it will do and ask; for calls they always allow, suggest a permissions allow rule so the prompt goes away.',
+    'duplicate-subagent-read': 'When several subagents need the same file, put the relevant excerpt in their briefs or have one agent summarise it once, instead of every agent reading it into its own context.',
+    'idle-cache-expiry': 'The cache expired while the session sat idle; resume sooner, use the 1-hour cache lifetime where available, or start a fresh session with a summary instead of re-sending the whole history.',
+  };
+
+  // Advice for a concrete finding: the rule's line, except where the evidence says otherwise.
+  function adviceFor(f, trace) {
+    if (f.id === 'slow-tool') {
+      const ids = (f.evidence && f.evidence.toolCallIds) || [];
+      const c = trace.toolCalls.find((x) => x.id === ids[0]);
+      if (c && c.category === 'user') return null; // waiting on the human is not the agent's time
+      if (c && c.category === 'agent') return 'Subagent run time: give it a narrower brief and ask for a short structured return so the parent is not blocked for as long.';
+      if (c && isWait(c)) return 'Waiting on a long background task: keep doing independent work while it runs, or tell the user it is still going, instead of blocking the turn on it.';
+    }
+    if (f.id === 'oversized-result') {
+      const c = trace.toolCalls.find((x) => x.id === ((f.evidence && f.evidence.toolCallIds) || [])[0]);
+      if (c && hasRange(c)) return 'The read already had a range and still returned a lot: grep for the part you need first, or read a narrower window.';
+    }
+    return ADVICE[f.id] || null;
+  }
+
+  function inputSummary(c) {
+    const i = (c && c.input) || {};
+    if (i.command) return String(i.command);
+    if (i.file_path) return String(i.file_path) + (i.pattern ? ' ' + i.pattern : '');
+    if (i.pattern) return String(i.pattern);
+    if (i.query) return String(i.query);
+    if (i.description) return String(i.description);
+    if (i.url) return String(i.url);
+    if (i.prompt) return String(i.prompt);
+    if (i.path) return String(i.path);
+    const s = JSON.stringify(i);
+    return s === '{}' ? '' : s;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Markdown report — written to be handed back to the agent as well as read by a human.
+  // opts: { redact, advice=true, instruction=true, maxEvidence=6, title }
+  // ---------------------------------------------------------------------------
+  function usd(v) { return v == null ? '—' : v < 0.01 ? '$' + v.toFixed(4) : v < 1 ? '$' + v.toFixed(3) : '$' + v.toFixed(2); }
+  function pctStr(x) { return x == null ? '—' : Math.round(x * 100) + '%'; }
+  function oneLine(s, n) { s = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return s.length > n ? s.slice(0, n - 1) + '…' : s; }
+  function blank(s) { return '«' + String(s == null ? '' : s).length + ' chars»'; }
+
+  function toolTable(trace) {
+    const rows = new Map();
+    for (const c of trace.toolCalls) { if (c.unmatched) continue; if (!rows.has(c.name)) rows.set(c.name, { name: c.name, calls: 0, errors: 0, time: 0 }); const r = rows.get(c.name); r.calls++; if (c.isError) r.errors++; r.time += c.durationMs || 0; }
+    return Array.from(rows.values()).sort((a, b) => b.time - a.time || b.calls - a.calls);
+  }
+
+  // Rules whose detail quotes tool output or model text (everything else is names and numbers).
+  const CONTENT_DETAIL = new Set(['failed-tool', 'api-error', 'hook-error', 'duplicate-subagent-read']);
+  function redactDetail(f) { return CONTENT_DETAIL.has(f.id) ? blank(f.detail) : f.detail; }
+
+  function reportMarkdown(trace, findings, cost, opts) {
+    opts = opts || {};
+    const redact = !!opts.redact, maxEv = opts.maxEvidence || 6;
+    const T = trace.totals, m = trace.meta, u = T.usage;
+    const R = (s) => redact ? blank(s) : s;
+    const total = cost ? (cost.reported != null ? cost.reported : cost.total) : null;
+    const turnNo = (idx) => idx != null ? idx + 1 : null; // same numbering as the finding details and the viewer drawer
+    const advised = new Set();
+    const out = [];
+    out.push(`# Glassbox report — ${oneLine(R(m.title || opts.title || 'session'), 90)}`, '');
+    out.push(`- session: ${m.sessionId || '—'} · model: ${m.models.join(', ') || '—'}${m.start ? ' · started: ' + new Date(m.start).toISOString() : ''}`);
+    out.push(`- wall ${fmtDur(T.wallMs)} (active ${fmtDur(T.activeMs)}) · ${T.turns} turn${T.turns === 1 ? '' : 's'} · ${T.requests} requests · ${T.toolCalls} tool calls (${T.toolErrors} failed${T.orphans ? ', ' + T.orphans + ' unanswered' : ''})`);
+    out.push(`- tokens: ${fmtInt(u.input + u.cacheRead + u.cacheWrite)} context served (${pctStr(T.cacheHitRatio)} cached) · peak prompt ${fmtInt(Math.max(0, ...trace.requests.map((r) => r.contextTokens)))} · ${fmtInt(u.output)} output (${fmtInt(u.thinking)} thinking) · est. cost ${usd(total)}${cost && cost.source === 'reported' ? ' (reported)' : ''}`, '');
+    if (!findings.length) out.push('## Findings', '', 'Nothing flagged — a clean session, or a very short one.', '');
+    else {
+      out.push(`## Findings (${findings.length})`, '');
+      findings.forEach((f, i) => {
+        out.push(`### ${i + 1}. ${f.severity.toUpperCase()} \`${f.id}\` — ${f.title}`, '', redact ? redactDetail(f) : f.detail, '');
+        const ev = f.evidence || {};
+        const lines = [];
+        for (const id of ev.toolCallIds || []) { const c = trace.toolCalls.find((x) => x.id === id); if (!c) continue; const tn = turnNo(c.turnIndex); lines.push(`- ${c.name}${c.isError ? ' (error)' : ''}${c.durationMs != null ? ' · ' + fmtDur(c.durationMs) : ''}${tn != null ? ' · turn ' + tn : ''}${c.agent !== 'main' ? ' · subagent' : ''}: \`${oneLine(R(inputSummary(c)), 100).replace(/`/g, "'") || '(no input)'}\``); }
+        for (const id of ev.requestIds || []) { const r = trace.requests.find((x) => x.id === id); if (!r) continue; const n = trace.requests.indexOf(r) + 1; const tn = turnNo(r.turnIndex); lines.push(`- request #${n}${tn != null ? ' · turn ' + tn : ''}: context ${fmtInt(r.contextTokens)} · output ${fmtInt(r.usage.output)}${r.responseMs != null ? ' · ' + fmtDur(r.responseMs) : ''}`); }
+        if (lines.length) { out.push('Evidence:', ''); out.push(...lines.slice(0, maxEv)); if (lines.length > maxEv) out.push(`- … ${lines.length - maxEv} more`); out.push(''); }
+        const adv = opts.advice !== false && !advised.has(f.id) ? adviceFor(f, trace) : null;
+        if (adv) { advised.add(f.id); out.push(`Next time: ${adv}`, ''); }
+      });
+    }
+    const tools = toolTable(trace);
+    if (tools.length) { out.push('## Tools', '', '| tool | calls | errors | total time |', '|---|---|---|---|'); for (const r of tools) out.push(`| ${r.name} | ${r.calls} | ${r.errors} | ${fmtDur(r.time)} |`); out.push(''); }
+    if (opts.instruction !== false) out.push('## What to do with this', '', 'This is a mechanical review of the session transcript, generated by Glassbox (no AI involved). If you are the agent that ran this session: acknowledge the findings that apply, say in one or two sentences what you will do differently next session, and do not redo any work. If you are a human: the evidence lines are permalinks into the Glassbox viewer for this session.', '');
+    out.push('_Generated by Glassbox ' + VERSION + '._', '');
+    return out.join('\n');
+  }
+
+  // ---------------------------------------------------------------------------
+  // Compare two analysed sessions ({trace, findings, cost}).
+  // ---------------------------------------------------------------------------
+  const METRICS = [
+    { key: 'wallMs', label: 'Wall time', fmt: 'dur', dir: 'low', get: (s) => s.trace.totals.wallMs },
+    { key: 'activeMs', label: 'Active time', fmt: 'dur', dir: 'low', get: (s) => s.trace.totals.activeMs },
+    { key: 'turns', label: 'Turns', fmt: 'int', dir: null, get: (s) => s.trace.totals.turns },
+    { key: 'requests', label: 'API requests', fmt: 'int', dir: 'low', get: (s) => s.trace.totals.requests },
+    { key: 'toolCalls', label: 'Tool calls', fmt: 'int', dir: 'low', get: (s) => s.trace.totals.toolCalls },
+    { key: 'toolErrors', label: 'Tool errors', fmt: 'int', dir: 'low', get: (s) => s.trace.totals.toolErrors },
+    { key: 'toolTimeMs', label: 'Time in tools', fmt: 'dur', dir: 'low', get: (s) => s.trace.meta.hasTimestamps ? s.trace.totals.toolTimeMs : null },
+    { key: 'modelTimeMs', label: 'Time generating', fmt: 'dur', dir: 'low', get: (s) => s.trace.meta.hasTimestamps ? s.trace.totals.modelTimeMs : null },
+    { key: 'contextServed', label: 'Context served', fmt: 'tok', dir: 'low', get: (s) => { const u = s.trace.totals.usage; const v = u.input + u.cacheRead + u.cacheWrite; return v || (s.trace.requests.length ? 0 : null); } },
+    { key: 'peakContext', label: 'Peak prompt', fmt: 'tok', dir: 'low', get: (s) => s.trace.requests.length ? Math.max(0, ...s.trace.requests.map((r) => r.contextTokens)) : null },
+    { key: 'cacheHitRatio', label: 'Cache hit', fmt: 'pct', dir: 'high', get: (s) => s.trace.totals.cacheHitRatio },
+    { key: 'output', label: 'Output tokens', fmt: 'tok', dir: 'low', get: (s) => s.trace.requests.length ? s.trace.totals.usage.output : null },
+    { key: 'thinkingShare', label: 'Thinking share', fmt: 'pct', dir: null, get: (s) => { const u = s.trace.totals.usage; return u.output ? u.thinking / u.output : null; } },
+    { key: 'cost', label: 'Est. cost', fmt: 'usd', dir: 'low', get: (s) => s.cost ? (s.cost.reported != null ? s.cost.reported : s.cost.total) : null },
+    { key: 'findings', label: 'Findings', fmt: 'int', dir: 'low', get: (s) => s.findings.length },
+    { key: 'errorFindings', label: 'Error-level findings', fmt: 'int', dir: 'low', get: (s) => s.findings.filter((f) => f.severity === 'error').length },
+  ];
+  function fmtMetric(v, fmt) {
+    if (v == null) return '—';
+    if (fmt === 'dur') return fmtDur(v);
+    if (fmt === 'pct') return pctStr(v);
+    if (fmt === 'usd') return usd(v);
+    return fmtInt(v);
+  }
+  // "×2.4" when B is bigger, "÷2.4" when smaller; never "×0.00".
+  function fmtRatio(r) {
+    if (r == null || !Number.isFinite(r)) return '—';
+    if (r === 1) return '×1.00';
+    const v = r >= 1 ? r : 1 / r; const t = v >= 100 ? Math.round(v).toString() : v >= 10 ? v.toFixed(1) : v.toFixed(2);
+    return (r >= 1 ? '×' : '÷') + t;
+  }
+  // Change of B relative to A: a signed percentage where that reads well, ×N for big increases,
+  // the absolute delta when A is 0 (no ratio) or B is 0 (no "÷∞").
+  function fmtChange(m) {
+    if (m.delta == null) return '—';
+    const r = m.ratio;
+    if (r == null || !m.a || !m.b) return (m.delta > 0 ? '+' : m.delta < 0 ? '−' : '') + fmtMetric(Math.abs(m.delta), m.fmt);
+    if (r === 1) return '0%';
+    if (r < 1) { const p = (1 - r) * 100; return '−' + (p < 10 || p > 99 ? p.toFixed(1) : Math.round(p)) + '%'; }
+    if (r < 10) { const p = (r - 1) * 100; return '+' + (p < 10 ? p.toFixed(1) : Math.round(p)) + '%'; }
+    return fmtRatio(r);
+  }
+  function compare(A, B) {
+    const metrics = METRICS.map((d) => {
+      const a = d.get(A), b = d.get(B);
+      const ok = a != null && b != null && Number.isFinite(a) && Number.isFinite(b);
+      const delta = ok ? b - a : null;
+      const ratio = ok && a ? b / a : (ok && !a && !b ? 1 : null);
+      let better = null;
+      if (ok && d.dir && a !== b) better = (d.dir === 'low') === (a < b) ? 'a' : 'b';
+      return { key: d.key, label: d.label, fmt: d.fmt, dir: d.dir, a, b, delta, ratio, better, aText: fmtMetric(a, d.fmt), bText: fmtMetric(b, d.fmt) };
+    });
+    const ta = toolTable(A.trace), tb = toolTable(B.trace);
+    const names = new Set([...ta.map((t) => t.name), ...tb.map((t) => t.name)]);
+    const zero = { calls: 0, errors: 0, time: 0 };
+    const tools = Array.from(names).map((name) => { const a = ta.find((t) => t.name === name) || zero, b = tb.find((t) => t.name === name) || zero; return { name, a: { calls: a.calls, errors: a.errors, time: a.time }, b: { calls: b.calls, errors: b.errors, time: b.time }, deltaCalls: b.calls - a.calls, deltaTime: b.time - a.time }; });
+    tools.sort((x, y) => Math.abs(y.deltaCalls) - Math.abs(x.deltaCalls) || (y.a.calls + y.b.calls) - (x.a.calls + x.b.calls) || x.name.localeCompare(y.name));
+    const byId = (fs) => { const m = new Map(); for (const f of fs) { if (!m.has(f.id)) m.set(f.id, []); m.get(f.id).push(f); } return m; };
+    const fa = byId(A.findings), fb = byId(B.findings);
+    const slim = (f) => ({ id: f.id, severity: f.severity, title: f.title });
+    const onlyA = [], onlyB = [], both = [];
+    for (const [id, list] of fa) { if (fb.has(id)) both.push({ id, a: list.map(slim), b: fb.get(id).map(slim) }); else onlyA.push(...list.map(slim)); }
+    for (const [id, list] of fb) if (!fa.has(id)) onlyB.push(...list.map(slim));
+    const pick = (key) => { const m = metrics.find((x) => x.key === key); return m ? m.better : null; };
+    const cleaner = (() => { const ea = A.findings.filter((f) => f.severity === 'error').length, eb = B.findings.filter((f) => f.severity === 'error').length; if (ea !== eb) return ea < eb ? 'a' : 'b'; const wa = A.findings.length, wb = B.findings.length; return wa === wb ? null : (wa < wb ? 'a' : 'b'); })();
+    const verdict = { cheaper: pick('cost'), faster: pick('wallMs') || pick('activeMs'), cleaner };
+    return { metrics, tools, findings: { onlyA, onlyB, both }, verdict, a: { sessionId: A.trace.meta.sessionId, title: A.trace.meta.title, models: A.trace.meta.models }, b: { sessionId: B.trace.meta.sessionId, title: B.trace.meta.title, models: B.trace.meta.models } };
+  }
+  function compareMarkdown(c, opts) {
+    opts = opts || {};
+    const la = opts.labelA || 'A', lb = opts.labelB || 'B';
+    const out = [`# Glassbox compare — ${la} vs ${lb}`, ''];
+    out.push(`- ${la}: ${c.a.sessionId || '—'}${c.a.title ? ' · ' + oneLine(c.a.title, 70) : ''}${c.a.models.length ? ' · ' + c.a.models.join(', ') : ''}`);
+    out.push(`- ${lb}: ${c.b.sessionId || '—'}${c.b.title ? ' · ' + oneLine(c.b.title, 70) : ''}${c.b.models.length ? ' · ' + c.b.models.join(', ') : ''}`, '');
+    const v = c.verdict; const who = (x) => x === 'a' ? la : x === 'b' ? lb : 'tie';
+    out.push(`**Verdict** — cheaper: ${who(v.cheaper)} · faster: ${who(v.faster)} · cleaner: ${who(v.cleaner)}`, '');
+    out.push(`| metric | ${la} | ${lb} | change |`, '|---|---|---|---|');
+    for (const m of c.metrics) { const ch = fmtChange(m); out.push(`| ${m.label} | ${m.aText} | ${m.bText} | ${ch}${m.better ? ' (' + who(m.better) + ' better)' : ''} |`); }
+    out.push('');
+    if (c.tools.length) { out.push('## Tools', '', `| tool | ${la} calls (errors) | ${lb} calls (errors) | Δ calls |`, '|---|---|---|---|'); for (const t of c.tools) out.push(`| ${t.name} | ${t.a.calls} (${t.a.errors}) | ${t.b.calls} (${t.b.errors}) | ${t.deltaCalls > 0 ? '+' : ''}${t.deltaCalls} |`); out.push(''); }
+    out.push('## Findings', '');
+    if (!c.findings.onlyA.length && !c.findings.onlyB.length && !c.findings.both.length) out.push('Neither session was flagged.', '');
+    if (c.findings.onlyA.length) { out.push(`Only in ${la}:`, ''); for (const f of c.findings.onlyA) out.push(`- **${f.severity.toUpperCase()}** \`${f.id}\` — ${f.title}`); out.push(''); }
+    if (c.findings.onlyB.length) { out.push(`Only in ${lb}:`, ''); for (const f of c.findings.onlyB) out.push(`- **${f.severity.toUpperCase()}** \`${f.id}\` — ${f.title}`); out.push(''); }
+    if (c.findings.both.length) { out.push('In both:', ''); for (const f of c.findings.both) out.push(`- \`${f.id}\` — ${la}: ${f.a.length}, ${lb}: ${f.b.length}`); out.push(''); }
+    out.push('_Generated by Glassbox ' + VERSION + '._', '');
+    return out.join('\n');
+  }
+
   // ---------------------------------------------------------------------------
   // Redaction — keep structure, timestamps, usage, tool names; blank every string.
   // ---------------------------------------------------------------------------
@@ -1108,7 +1533,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   }
   function toJsonl(records) { return records.map((r) => JSON.stringify(r)).join('\n') + '\n'; }
 
-  return { VERSION, RATES, DEFAULTS, parseLines, parseTrace, diagnose, estimateCost, rateFor, redact, toJsonl, toolCategory, textOf, fmtDur, fmtInt, stableStringify };
+  return { VERSION, RATES, DEFAULTS, ADVICE, METRICS, parseLines, parseTrace, diagnose, estimateCost, rateFor, redact, toJsonl, toolCategory, textOf, fmtDur, fmtInt, fmtMetric, fmtRatio, fmtChange, stableStringify, inputSummary, adviceFor, redactDetail, reportMarkdown, compare, compareMarkdown, toolTable };
 });
 </script>
 <script>
@@ -1129,7 +1554,8 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   const say = (msg) => { const s = $('#status'); s.textContent = ''; setTimeout(() => { s.textContent = msg; }, 30); };
 
   // ------------------------------------------------------------ state
-  const S = { files: [], records: [], trace: null, findings: [], cost: null, rates: loadRates(), share: false, sel: null, hl: new Set(), toolFilter: null, view: null, query: '', matches: new Set(), focusId: null, lastFocus: null, isDemo: false };
+  const S = { files: [], records: [], trace: null, findings: [], cost: null, rates: loadRates(), share: false, sel: null, hl: new Set(), toolFilter: null, view: null, query: '', matches: new Set(), focusId: null, lastFocus: null, isDemo: false, other: null, labels: { a: 'A', b: 'B' }, cmp: null, follow: true, live: null };
+  const pickingForCompare = () => $('#cmp-dlg').open;
   function loadRates() { try { const r = JSON.parse(store.get('rates') || 'null'); if (r && typeof r === 'object') return r; } catch (e) { } return JSON.parse(JSON.stringify(C.RATES)); }
   const R = (s) => S.share ? '«' + String(s == null ? '' : s).length + ' chars»' : s;
 
@@ -1154,9 +1580,10 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     if (!usedEntries) for (const f of Array.from(dt.files || [])) out.push({ name: f.name, file: f });
     await loadFiles(out);
   }
-  async function loadFiles(list) { const files = []; for (const { name, file } of list) files.push({ name: (file.webkitRelativePath || name), text: await file.text() }); if (files.length) load(files, false); else say('No .jsonl files found in what was dropped.'); }
-  function load(files, isDemo) {
+  async function loadFiles(list, forCompare) { const files = []; for (const { name, file } of list) files.push({ name: (file.webkitRelativePath || name), text: await file.text() }); if (!files.length) { say('No .jsonl files found in what was dropped.'); return; } if (forCompare || pickingForCompare()) loadOther(files); else load(files, false); }
+  function load(files, isDemo, keepOther) {
     S.files = files; S.isDemo = !!isDemo;
+    if (!keepOther) { S.other = null; S.cmp = null; $('#cmp-sec').hidden = true; }
     S.records = files.filter((f) => !/\.meta\.json$/.test(f.name)).flatMap((f) => C.parseLines(f.text, f.name).records);
     S.trace = C.parseTrace(files);
     S.findings = C.diagnose(S.trace);
@@ -1164,6 +1591,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
     S.sel = null; S.hl = new Set(); S.toolFilter = null; S.view = null; S.query = ''; S.matches = new Set(); S.focusId = null; $('#q').value = ''; $('#q-n').textContent = '';
     $('#main').hidden = false; $('#banner').hidden = !isDemo;
     renderAll();
+    if (S.other) renderCompare();
     const T = S.trace.totals;
     if (!S.trace.requests.length && !S.trace.toolCalls.length) { const p = $('#problems'); p.hidden = false; p.textContent = 'No API requests or tool calls were found — this does not look like a Claude Code / Agent SDK transcript. Expected a .jsonl with "type":"assistant" and "type":"user" records.'; }
     say(`Loaded ${isDemo ? 'the demo session' : files.length + ' file' + (files.length > 1 ? 's' : '')}: ${T.turns} turns, ${T.toolCalls} tool calls, ${S.findings.length} findings${S.trace.problems.length ? ', ' + S.trace.problems.length + ' unreadable lines skipped' : ''}.`);
@@ -1383,7 +1811,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   function hideTip() { tip.style.display = 'none'; }
   document.addEventListener('mousemove', (e) => { if (tip.style.display === 'block' && !(document.activeElement && document.activeElement.dataset && document.activeElement.dataset.kind)) moveTip(e.clientX, e.clientY); });
   function cum(i) { let s = 0; for (let k = 0; k <= i; k++) s += S.cost.byRequest[k] || 0; return s; }
-  function inputSummary(c) { const i = c.input || {}; if (i.command) return i.command; if (i.file_path) return i.file_path + (i.pattern ? ' ' + i.pattern : ''); if (i.pattern) return i.pattern; if (i.query) return i.query; if (i.description) return i.description; if (i.url) return i.url; if (i.prompt) return i.prompt; if (i.path) return i.path; const s = JSON.stringify(i); return s === '{}' ? '' : s; }
+  const inputSummary = C.inputSummary;
 
   // ------------------------------------------------------------ burn chart
   function renderBurn() {
@@ -1423,13 +1851,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
 
   // ------------------------------------------------------------ findings
   function findingMd(f) { return `- **${f.severity.toUpperCase()}** \`${f.id}\` — ${f.title}\n  ${f.detail}`; }
-  function reportMd() {
-    const t = S.trace, T = t.totals, m = t.meta;
-    const head = `# Glassbox report — ${R(m.title || 'session')}\n\n` + `- session: ${m.sessionId || '—'} · model: ${m.models.join(', ') || '—'} · started: ${m.start ? new Date(m.start).toISOString() : '—'}\n` + `- wall ${fmtDur(T.wallMs)} (active ${fmtDur(T.activeMs)}) · ${T.turns} turns · ${T.requests} requests · ${T.toolCalls} tool calls (${T.toolErrors} failed)\n` + `- tokens: ${fmtInt(T.usage.input + T.usage.cacheRead + T.usage.cacheWrite)} context served (${pct(T.cacheHitRatio)} cached), ${fmtInt(T.usage.output)} output (${fmtInt(T.usage.thinking)} thinking) · est. cost ${S.cost.total != null ? fmtUSD(S.cost.total) : '—'}\n\n`;
-    const fs = S.findings.length ? `## Findings (${S.findings.length})\n\n` + S.findings.map(findingMd).join('\n') + '\n' : '## Findings\n\nNothing flagged.\n';
-    const tools = '\n## Tools\n\n| tool | calls | errors | total time |\n|---|---|---|---|\n' + toolRows().map((r) => `| ${r.name} | ${r.calls} | ${r.errors} | ${fmtDur(r.time)} |`).join('\n') + '\n';
-    return head + fs + tools + '\n_Generated by Glassbox._\n';
-  }
+  function reportMd() { return C.reportMarkdown(S.trace, S.findings, S.cost, { redact: S.share }); }
   async function copyText(text, what) { try { await navigator.clipboard.writeText(text); say(what + ' copied to clipboard.'); return true; } catch (e) { const dlg = $('#copy-dlg'); $('#copy-text').value = text; dlg.showModal(); $('#copy-text').select(); say('Clipboard blocked — text shown for manual copy.'); return false; } }
   $('#copy-close').onclick = () => $('#copy-dlg').close();
   function renderFindings() {
@@ -1557,6 +1979,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   function setHash(h) { hashLock = true; try { history.replaceState(null, '', '#' + h); } catch (e) { } setTimeout(() => { hashLock = false; }, 0); }
   function applyHash() {
     const h = location.hash.slice(1); if (!h || !S.trace) return;
+    if (h === 'compare') { if (S.other) $('#cmp-sec').scrollIntoView(); return; }
     const eq = h.indexOf('='); if (eq < 0) return; const k = h.slice(0, eq), v = decodeURIComponent(h.slice(eq + 1)); if (!v) return;
     if (k === 'req') { const r = S.trace.requests[+v - 1]; if (r) select({ kind: 'req', ref: r }); }
     else if (k === 'tool') { const c = S.trace.toolCalls.find((x) => x.id === v); if (c) select({ kind: 'tool', ref: c }); }
@@ -1588,7 +2011,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   const idb = { open() { return new Promise((res, rej) => { const r = indexedDB.open('glassbox', 1); r.onupgradeneeded = () => r.result.createObjectStore('kv'); r.onsuccess = () => res(r.result); r.onerror = () => rej(r.error); }); },
     async get(k) { try { const db = await this.open(); return await new Promise((res) => { const t = db.transaction('kv').objectStore('kv').get(k); t.onsuccess = () => res(t.result); t.onerror = () => res(null); }); } catch (e) { return null; } },
     async set(k, v) { try { const db = await this.open(); await new Promise((res) => { const t = db.transaction('kv', 'readwrite').objectStore('kv').put(v, k); t.onsuccess = res; t.onerror = res; }); } catch (e) { } } };
-  const decodeProject = (n) => n.replace(/^-/, '/').replace(/-/g, '/');
+  const decodeProject = (n) => { const m = n.match(/^([A-Za-z])--(.*)$/); if (m) return m[1] + ':/' + m[2].replace(/-/g, '/'); return n.replace(/^-/, '/').replace(/-/g, '/'); };
   async function scanProjects(dir) {
     const sessions = [];
     for await (const [pname, ph] of dir.entries()) {
@@ -1609,8 +2032,10 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   }
   async function loadSession(s) {
     const files = [{ name: s.id + '.jsonl', text: await (await s.handle.getFile()).text() }];
-    try { const sdir = await (await s.pdir.getDirectoryHandle(s.id)).getDirectoryHandle('subagents'); for await (const [n, h] of sdir.entries()) if (h.kind === 'file' && /\.(jsonl|json)$/.test(n)) files.push({ name: s.id + '/subagents/' + n, text: await (await h.getFile()).text() }); } catch (e) { }
-    $('#sessions-dlg').close(); load(files, false);
+    // subagents/*.jsonl plus Workflow agents in subagents/workflows/<runId>/ (journal.jsonl is the workflow's log)
+    const walk = async (dir, rel) => { for await (const [n, h] of dir.entries()) { if (h.kind === 'directory') await walk(h, rel + '/' + n); else if (/\.(jsonl|json)$/.test(n) && n !== 'journal.jsonl') files.push({ name: rel + '/' + n, text: await (await h.getFile()).text() }); } };
+    try { await walk(await (await s.pdir.getDirectoryHandle(s.id)).getDirectoryHandle('subagents'), s.id + '/subagents'); } catch (e) { }
+    $('#sessions-dlg').close(); if (S.pickOther) { S.pickOther = false; loadOther(files); } else load(files, false);
   }
   async function showSessions(dir) {
     const dlg = $('#sessions-dlg'); $('#sessions-note').textContent = 'Scanning ' + dir.name + '…'; $('#sessions-tbl').innerHTML = ''; dlg.showModal();
@@ -1628,6 +2053,99 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   }
   $('#sessions-close').onclick = () => $('#sessions-dlg').close();
 
+  // ------------------------------------------------------------ compare
+  function analyseFiles(files) { const trace = C.parseTrace(files); return { files, trace, findings: C.diagnose(trace), cost: C.estimateCost(trace, S.rates) }; }
+  function loadOther(files) {
+    if (!S.trace) { say('Load a session first, then compare it with another.'); return; }
+    S.other = analyseFiles(files);
+    try { $('#cmp-dlg').close(); } catch (e) { }
+    renderCompare();
+    const m = S.cmp.metrics.find((x) => x.key === 'cost');
+    say(`Comparing: ${S.labels.a} vs ${S.labels.b}. ${S.other.trace.totals.toolCalls} tool calls in ${S.labels.b}${m && m.better ? ', ' + (m.better === 'a' ? S.labels.a : S.labels.b) + ' is cheaper' : ''}.`);
+    $('#cmp-sec').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    setHash('compare');
+  }
+  function sessionLabel(res, fallback) { const m = res.trace.meta; return m.title ? m.title.slice(0, 40) : m.sessionId ? m.sessionId.slice(0, 8) : fallback; }
+  function renderCompare() {
+    if (!S.other) return;
+    const A = { trace: S.trace, findings: S.findings, cost: S.cost }, B = S.other;
+    const c = S.cmp = C.compare(A, B);
+    const la = S.labels.a, lb = S.labels.b;
+    const who = (x) => x === 'a' ? `<span class="who a">${esc(la)}</span>` : x === 'b' ? `<span class="who b">${esc(lb)}</span>` : '<span class="who">tie</span>';
+    $('#cmp-aux').innerHTML = `<span class="who a">${esc(la)}</span> ${esc(R(sessionLabel(A, 'this session')))} · <span class="who b">${esc(lb)}</span> ${esc(R(sessionLabel(B, 'other session')))} — ${esc(la)} is on the timeline`;
+    const rows = c.metrics.map((m) => {
+      let bar = '<span class="ch">—</span>';
+      if (m.delta != null) {
+        const good = m.better === 'a' ? 'bad' : m.better === 'b' ? 'good' : '';
+        const ch = C.fmtChange(m);
+        const r = m.ratio != null && m.a ? m.ratio : (m.delta === 0 ? 1 : 2);
+        const f = Math.min(1, Math.abs(Math.log2(Math.max(r, 1e-6))) / 3);
+        const left = r < 1, w = (f * 50).toFixed(1);
+        bar = `<div class="dbar" aria-hidden="true"><div class="track"><div class="fill ${good}" style="left:${left ? 50 - w : 50}%;width:${w}%"></div></div><span class="ch ${good}">${ch}</span></div>`;
+      }
+      const sr = m.delta == null ? 'not comparable' : m.better ? `${m.better === 'a' ? la : lb} better` : 'same';
+      return `<tr><td>${esc(m.label)}</td><td class="n">${m.aText}</td><td class="n">${m.bText}</td><td class="d">${bar}<span class="sr-only">${esc(sr)}</span></td></tr>`;
+    }).join('');
+    const tools = c.tools.slice(0, 14).map((t) => `<tr><td>${esc(t.name)}</td><td class="n">${t.a.calls}${t.a.errors ? ` <span class="errpill">${t.a.errors}</span>` : ''}</td><td class="n">${t.b.calls}${t.b.errors ? ` <span class="errpill">${t.b.errors}</span>` : ''}</td><td class="n">${t.deltaCalls > 0 ? '+' : ''}${t.deltaCalls}</td></tr>`).join('');
+    const fl = (list) => list.length ? `<ul class="fl">${list.map((f) => `<li><span class="sev ${f.severity}"></span> ${esc(f.title)}<span class="id">${f.id}</span></li>`).join('')}</ul>` : '<div class="empty">none</div>';
+    $('#cmp').innerHTML = `<div class="verdict"><span>cheaper ${who(c.verdict.cheaper)}</span><span>faster ${who(c.verdict.faster)}</span><span>cleaner ${who(c.verdict.cleaner)}</span></div>
+      <div class="grid"><div><table><caption class="sr-only">Metrics side by side</caption><thead><tr><th scope="col">Metric</th><th class="n" scope="col">${esc(la)}</th><th class="n" scope="col">${esc(lb)}</th><th scope="col">Change (${esc(lb)} vs ${esc(la)})</th></tr></thead><tbody>${rows}</tbody></table></div>
+      <div><h3 style="margin-top:0">Tools</h3><table><caption class="sr-only">Tool calls per session</caption><thead><tr><th scope="col">Tool</th><th class="n" scope="col">${esc(la)}</th><th class="n" scope="col">${esc(lb)}</th><th class="n" scope="col">Δ</th></tr></thead><tbody>${tools || '<tr><td colspan="4" class="empty">no tool calls</td></tr>'}</tbody></table>${c.tools.length > 14 ? `<p class="note">… ${c.tools.length - 14} more tools</p>` : ''}
+      <h3>Only in ${esc(la)}</h3>${fl(c.findings.onlyA)}<h3>Only in ${esc(lb)}</h3>${fl(c.findings.onlyB)}${c.findings.both.length ? `<h3>In both</h3><ul class="fl">${c.findings.both.map((f) => `<li><span class="id" style="margin:0">${f.id}</span> — ${esc(la)}: ${f.a.length}, ${esc(lb)}: ${f.b.length}</li>`).join('')}</ul>` : ''}</div></div>`;
+    $('#cmp-sec').hidden = false;
+  }
+  $('#compare').onclick = () => { if (!S.trace) { say('Load a session first.'); return; } $('#cmp-folder').hidden = !FSA; $('#cmp-dlg').showModal(); };
+  $('#cmp-dlg-close').onclick = () => $('#cmp-dlg').close();
+  $('#cmp-folder').onclick = async () => { $('#cmp-dlg').close(); S.pickOther = true; let h = await idb.get('projects'); try { if (h) { let p = await h.queryPermission({ mode: 'read' }); if (p !== 'granted') p = await h.requestPermission({ mode: 'read' }); if (p !== 'granted') h = null; } if (!h) { h = await window.showDirectoryPicker({ id: 'claude-projects', mode: 'read' }); await idb.set('projects', h); $('#recent').hidden = false; } await showSessions(h); } catch (e) { S.pickOther = false; if (e && e.name !== 'AbortError') say('Could not open the folder: ' + e.message); } };
+  $('#sessions-dlg').addEventListener('close', () => { setTimeout(() => { S.pickOther = false; }, 0); });
+  $('#cmp-pick').onclick = () => $('#file-cmp').click();
+  $('#file-cmp').addEventListener('change', (e) => { loadFiles(Array.from(e.target.files).map((f) => ({ name: f.name, file: f })), true); e.target.value = ''; });
+  $('#cmp-demo').onclick = () => { if (!DEMO) { say('No demo embedded in this build.'); return; } loadOther(DEMO.map((f) => ({ name: f.name, text: f.text }))); };
+  $('#cmp-close').onclick = () => { S.other = null; S.cmp = null; $('#cmp-sec').hidden = true; setHash(''); say('Compare closed.'); $('#compare').focus(); };
+  $('#cmp-swap').onclick = () => { if (!S.other) return; const cur = { files: S.files, isDemo: S.isDemo }; const nxt = S.other; S.labels = { a: S.labels.b, b: S.labels.a }; S.other = analyseFiles(cur.files); load(nxt.files, false, true); say(`${S.labels.a} is now on the timeline.`); };
+  $('#cmp-copy').onclick = () => { if (!S.cmp) return; copyText(C.compareMarkdown(S.cmp, { labelA: S.labels.a, labelB: S.labels.b }), 'Comparison (Markdown)'); };
+
+  // ------------------------------------------------------------ live tail
+  let liveTimer = null;
+  function applyLiveFiles(ev) {
+    const f = S.files.find((x) => x.name === ev.name);
+    if (ev.type === 'append') { if (f) f.text += ev.text; else S.files.push({ name: ev.name, text: ev.text }); }
+    else if (ev.type === 'replace') { if (f) f.text = ev.text; else S.files.push({ name: ev.name, text: ev.text }); }
+    else if (ev.type === 'hello') { S.files = ev.files.map((x) => ({ name: x.name, text: x.text })); }
+    if (liveTimer) return; liveTimer = setTimeout(() => { liveTimer = null; refresh(); }, 150);
+  }
+  // Re-parse the current files in place: selection, filter, search and zoom survive; Follow keeps the right edge on now.
+  function refresh() {
+    const wasWhole = !S.view || (TL.total && S.view.t1 >= TL.total - 1 && S.view.t0 <= 1);
+    const oldSpan = S.view ? S.view.t1 - S.view.t0 : null;
+    const selId = S.sel ? S.sel.ref.id : null, selKind = S.sel ? S.sel.kind : null;
+    S.records = S.files.filter((f) => !/\.meta\.json$/.test(f.name)).flatMap((f) => C.parseLines(f.text, f.name).records);
+    S.trace = C.parseTrace(S.files); S.findings = C.diagnose(S.trace); S.cost = C.estimateCost(S.trace, S.rates);
+    if (selId) { const ref = selKind === 'tool' ? S.trace.toolCalls.find((c) => c.id === selId) : S.trace.requests.find((r) => r.id === selId); S.sel = ref ? { kind: selKind, ref } : null; }
+    if (S.toolFilter && !S.trace.toolCalls.some((c) => c.name === S.toolFilter)) S.toolFilter = null;
+    buildLayout();
+    if (S.follow) { if (wasWhole || oldSpan == null || oldSpan >= TL.total) S.view = null; else S.view = { t0: Math.max(0, TL.total - oldSpan), t1: TL.total }; }
+    renderSession(); renderStrip(); renderFit(); renderTimeline(); renderBurn(); renderFindings(); renderTools(); renderTurns();
+    if (S.query) runSearch();
+    if (S.sel && !$('#drawer').hidden) select(S.sel, true);
+    if (S.other) renderCompare();
+    const t = new Date(); $('#live-txt').textContent = 'LIVE · ' + t.toTimeString().slice(0, 8);
+  }
+  function startLive(cfg) {
+    const pill = $('#live'); pill.hidden = false; $('#follow').hidden = false;
+    $('#follow').onclick = () => { S.follow = !S.follow; $('#follow').setAttribute('aria-pressed', String(S.follow)); say(S.follow ? 'Following: the timeline keeps up with the session.' : 'Follow off: the view stays where it is.'); if (S.follow) refresh(); };
+    const es = new EventSource(cfg.url); S.live = es;
+    es.addEventListener('hello', (e) => { pill.classList.remove('off'); $('#live-txt').textContent = 'LIVE'; applyLiveFiles(Object.assign({ type: 'hello' }, JSON.parse(e.data))); });
+    es.addEventListener('append', (e) => applyLiveFiles(JSON.parse(e.data)));
+    es.addEventListener('replace', (e) => applyLiveFiles(JSON.parse(e.data)));
+    es.onerror = () => { pill.classList.add('off'); $('#live-txt').textContent = 'reconnecting'; };
+    // any manual zoom or pan lets go of Follow
+    const letGo = () => { if (S.follow) { S.follow = false; $('#follow').setAttribute('aria-pressed', 'false'); } };
+    $('#tl').addEventListener('wheel', letGo, { passive: true }); $('#tl').addEventListener('pointerdown', letGo);
+    $('#z-in').addEventListener('click', letGo); $('#z-out').addEventListener('click', letGo); $('#fit').addEventListener('change', letGo);
+    $('#banner').hidden = true;
+  }
+
   // ------------------------------------------------------------ help + inputs
   $('#help').onclick = () => $('#help-dlg').showModal(); $('#help-close').onclick = () => $('#help-dlg').close();
   $('#banner-x').onclick = () => { $('#banner').hidden = true; };
@@ -1637,6 +2155,7 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   drop.addEventListener('drop', (e) => { e.preventDefault(); drop.classList.remove('over'); handleDataTransfer(e.dataTransfer); });
   document.addEventListener('dragover', (e) => { e.preventDefault(); });
   document.addEventListener('drop', (e) => { if (!drop.contains(e.target)) { e.preventDefault(); handleDataTransfer(e.dataTransfer); } });
+  $('#cmp-dlg').addEventListener('dragover', (e) => e.preventDefault()); $('#cmp-dlg').addEventListener('drop', (e) => { e.preventDefault(); e.stopPropagation(); handleDataTransfer(e.dataTransfer); });
   $('#file').addEventListener('change', (e) => loadFiles(Array.from(e.target.files).map((f) => ({ name: f.name, file: f }))));
   drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('#file').click(); } });
 
@@ -1644,8 +2163,14 @@ kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;b
   const EMBED = /*__EMBED__*/null;
   function loadDemo(e) { if (e) e.preventDefault(); if (!DEMO) { say('No demo embedded in this build.'); return; } load(DEMO.map((f) => ({ name: f.name, text: f.text })), true); }
   $('#demo').onclick = loadDemo;
-  if (EMBED && EMBED.length) load(EMBED.map((f) => ({ name: f.name, text: f.text })), false);
+  const LIVE = /*__LIVE__*/null;
+  const embedFiles = EMBED && !Array.isArray(EMBED) ? EMBED.files : EMBED;
+  if (embedFiles && embedFiles.length) {
+    load(embedFiles.map((f) => ({ name: f.name, text: f.text })), false);
+    if (EMBED && !Array.isArray(EMBED) && EMBED.compare && EMBED.compare.length) { if (EMBED.labels) S.labels = EMBED.labels; loadOther(EMBED.compare.map((f) => ({ name: f.name, text: f.text }))); }
+  }
   else if (DEMO) loadDemo();
+  if (LIVE && LIVE.url && 'EventSource' in window) startLive(LIVE);
 })();
 </script>