npm - context-lens - Versions diffs - 0.2.0 → 0.3.0 - Mend

context-lens 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/README.md +120 -25
package/dist/cli-utils.d.ts +2 -1
package/dist/cli-utils.d.ts.map +1 -1
package/dist/cli-utils.js +40 -13
package/dist/cli-utils.js.map +1 -1
package/dist/cli.js +184 -68
package/dist/cli.js.map +1 -1
package/dist/core/conversation.d.ts +63 -0
package/dist/core/conversation.d.ts.map +1 -0
package/dist/core/conversation.js +305 -0
package/dist/core/conversation.js.map +1 -0
package/dist/core/health.d.ts +7 -0
package/dist/core/health.d.ts.map +1 -0
package/dist/core/health.js +311 -0
package/dist/core/health.js.map +1 -0
package/dist/core/models.d.ts +36 -0
package/dist/core/models.d.ts.map +1 -0
package/dist/core/models.js +111 -0
package/dist/core/models.js.map +1 -0
package/dist/core/parse.d.ts +17 -0
package/dist/core/parse.d.ts.map +1 -0
package/dist/core/parse.js +349 -0
package/dist/core/parse.js.map +1 -0
package/dist/core/routing.d.ts +47 -0
package/dist/core/routing.d.ts.map +1 -0
package/dist/core/routing.js +132 -0
package/dist/core/routing.js.map +1 -0
package/dist/core/security.d.ts +8 -0
package/dist/core/security.d.ts.map +1 -0
package/dist/core/security.js +222 -0
package/dist/core/security.js.map +1 -0
package/dist/core/source.d.ts +22 -0
package/dist/core/source.d.ts.map +1 -0
package/dist/core/source.js +56 -0
package/dist/core/source.js.map +1 -0
package/dist/core/tokens.d.ts +29 -0
package/dist/core/tokens.d.ts.map +1 -0
package/dist/core/tokens.js +163 -0
package/dist/core/tokens.js.map +1 -0
package/dist/core.d.ts +14 -22
package/dist/core.d.ts.map +1 -1
package/dist/core.js +14 -471
package/dist/core.js.map +1 -1
package/dist/http/headers.d.ts +25 -0
package/dist/http/headers.d.ts.map +1 -0
package/dist/http/headers.js +54 -0
package/dist/http/headers.js.map +1 -0
package/dist/lhar/composition.d.ts +12 -0
package/dist/lhar/composition.d.ts.map +1 -0
package/dist/lhar/composition.js +258 -0
package/dist/lhar/composition.js.map +1 -0
package/dist/lhar/export.d.ts +5 -0
package/dist/lhar/export.d.ts.map +1 -0
package/dist/lhar/export.js +59 -0
package/dist/lhar/export.js.map +1 -0
package/dist/lhar/record.d.ts +6 -0
package/dist/lhar/record.d.ts.map +1 -0
package/dist/lhar/record.js +216 -0
package/dist/lhar/record.js.map +1 -0
package/dist/lhar/response.d.ts +11 -0
package/dist/lhar/response.d.ts.map +1 -0
package/dist/lhar/response.js +132 -0
package/dist/lhar/response.js.map +1 -0
package/dist/lhar-types.generated.d.ts +24 -3
package/dist/lhar-types.generated.d.ts.map +1 -1
package/dist/lhar.d.ts +12 -19
package/dist/lhar.d.ts.map +1 -1
package/dist/lhar.js +16 -473
package/dist/lhar.js.map +1 -1
package/dist/server/api.d.ts +8 -0
package/dist/server/api.d.ts.map +1 -0
package/dist/server/api.js +292 -0
package/dist/server/api.js.map +1 -0
package/dist/server/config.d.ts +13 -0
package/dist/server/config.d.ts.map +1 -0
package/dist/server/config.js +36 -0
package/dist/server/config.js.map +1 -0
package/dist/server/projection.d.ts +9 -0
package/dist/server/projection.d.ts.map +1 -0
package/dist/server/projection.js +47 -0
package/dist/server/projection.js.map +1 -0
package/dist/server/proxy.d.ts +13 -0
package/dist/server/proxy.d.ts.map +1 -0
package/dist/server/proxy.js +218 -0
package/dist/server/proxy.js.map +1 -0
package/dist/server/static.d.ts +9 -0
package/dist/server/static.d.ts.map +1 -0
package/dist/server/static.js +78 -0
package/dist/server/static.js.map +1 -0
package/dist/server/store.d.ts +81 -0
package/dist/server/store.d.ts.map +1 -0
package/dist/server/store.js +632 -0
package/dist/server/store.js.map +1 -0
package/dist/server/webui.d.ts +5 -0
package/dist/server/webui.d.ts.map +1 -0
package/dist/server/webui.js +42 -0
package/dist/server/webui.js.map +1 -0
package/dist/server-utils.d.ts +2 -2
package/dist/server-utils.d.ts.map +1 -1
package/dist/server-utils.js +12 -21
package/dist/server-utils.js.map +1 -1
package/dist/server.js +31 -697
package/dist/server.js.map +1 -1
package/dist/types.d.ts +94 -10
package/dist/types.d.ts.map +1 -1
package/dist/version.generated.d.ts +2 -0
package/dist/version.generated.d.ts.map +1 -0
package/dist/version.generated.js +2 -0
package/dist/version.generated.js.map +1 -0
package/findings-screenshot.png +0 -0
package/messages-screenshot.png +0 -0
package/package.json +23 -10
package/schema/lhar.schema.json +58 -4
package/screenshot-overview.png +0 -0
package/sessions-screenshot.png +0 -0
package/timeline-screenshot.png +0 -0
package/diff.png +0 -0
package/overview-sidebar.png +0 -0
package/public/index.html +0 -2804

package/public/index.html DELETED Viewed

@@ -1,2804 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Context Lens</title>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='none' stroke='%2360a5fa' stroke-width='2'/><circle cx='16' cy='16' r='6' fill='%2360a5fa' opacity='.6'/></svg>">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-<style>
-:root {
-  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
-  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-  --bg-deep: #0a0d12;
-  --bg-field: #0f1318;
-  --bg-surface: #14191f;
-  --bg-raised: #1c222b;
-  --bg-hover: #222a35;
-  --border-dim: #252d3a;
-  --border-mid: #313b4a;
-  --border-bright: #3e4b5e;
-  --text-primary: #e8ecf1;
-  --text-secondary: #9aa8b8;
-  --text-dim: #8293a5;
-  --text-muted: #5e7085;
-  --accent-blue: #5b9cf5;
-  --accent-green: #3dd68c;
-  --accent-amber: #f0b429;
-  --accent-red: #f06060;
-  --accent-purple: #a78bfa;
-  --accent-pink: #f472b6;
-  --accent-cyan: #22d3ee;
-}
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
-  font-family: var(--font-sans);
-  background: var(--bg-deep);
-  color: var(--text-primary);
-  font-size: 13px;
-  overflow: hidden;
-}
-/* Grain texture overlay */
-body::after {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 9999;
-}
-.app { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 48px 1fr; height: 100vh; }
-/* Header */
-.header {
-  grid-column: 1 / -1;
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border-mid);
-  display: flex; align-items: center; padding: 0 16px; gap: 14px;
-}
-.header h1 {
-  font-family: var(--font-mono);
-  font-size: 13px; font-weight: 600;
-  letter-spacing: 0.04em;
-  color: var(--text-primary);
-}
-.header h1 .lens-dot {
-  display: inline-block;
-  width: 7px; height: 7px;
-  background: var(--accent-blue);
-  border-radius: 50%;
-  margin-right: 6px;
-  box-shadow: 0 0 6px var(--accent-blue);
-  animation: pulse-dot 3s ease-in-out infinite;
-}
-@keyframes pulse-dot {
-  0%, 100% { opacity: 0.7; box-shadow: 0 0 4px var(--accent-blue); }
-  50% { opacity: 1; box-shadow: 0 0 8px var(--accent-blue); }
-}
-.header-right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 12px; }
-.header select, .header button {
-  font-family: var(--font-mono);
-  background: var(--bg-raised);
-  border: 1px solid var(--border-mid);
-  color: var(--text-secondary);
-  padding: 5px 12px;
-  border-radius: 4px;
-  font-size: 11px;
-  cursor: pointer;
-  transition: border-color 0.2s, color 0.2s, background 0.2s;
-}
-.header select:hover, .header button:hover {
-  border-color: var(--accent-blue);
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-/* Sidebar */
-.sidebar {
-  background: var(--bg-field);
-  border-right: 1px solid var(--border-dim);
-  overflow-y: auto; display: flex; flex-direction: column; min-height: 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-mid) transparent;
-}
-.sidebar-section {
-  padding: 12px 14px 6px;
-  font-size: 10px; color: var(--text-dim);
-  text-transform: uppercase; letter-spacing: 0.1em;
-  font-weight: 600;
-  border-bottom: 1px solid var(--border-dim);
-}
-.session-item {
-  padding: 10px 14px;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-  transition: background 0.15s, border-color 0.15s;
-}
-.session-item:hover { background: var(--bg-surface); }
-.session-item.active {
-  background: rgba(91, 156, 245, 0.06);
-  border-left-color: var(--accent-blue);
-}
-.session-head { display: flex; align-items: center; gap: 8px; position: relative; }
-.session-delete {
-  margin-left: auto;
-  font-family: var(--font-mono);
-  font-size: 12px; line-height: 1;
-  color: var(--text-muted);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s, color 0.15s;
-  padding: 2px 4px;
-}
-.session-item:hover .session-delete { opacity: 1; }
-.session-delete:hover { color: var(--accent-red); }
-.session-meta {
-  display: flex; gap: 12px; margin-top: 5px; padding-left: 14px;
-  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
-}
-.badge {
-  font-size: 10px; padding: 2px 6px; border-radius: 3px;
-  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
-}
-.badge-claude { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
-.badge-codex { background: rgba(52, 211, 153, 0.12); color: #34d399; }
-.badge-aider { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
-.badge-kimi { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
-.badge-unknown { background: var(--bg-raised); color: var(--text-dim); }
-.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
-.dot-live { background: var(--accent-blue); box-shadow: 0 0 6px var(--accent-blue); animation: pulse-dot 3s ease-in-out infinite; }
-.dot-done { background: var(--text-muted); }
-.turn-group {
-  margin-left: 14px; border-left: 1px solid var(--border-dim);
-  max-height: 0; overflow: hidden;
-  transition: max-height 0.25s ease-out;
-}
-.turn-group.expanded {
-  max-height: 280px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-mid) transparent;
-  transition: max-height 0.3s ease-in;
-}
-.tg-item {
-  padding: 7px 12px; cursor: pointer;
-  display: flex; align-items: center; gap: 6px;
-  font-size: 12px;
-  transition: background 0.12s;
-  min-height: 32px;
-}
-.tg-item:hover { background: var(--bg-surface); }
-.tg-item.active { background: rgba(91, 156, 245, 0.08); }
-.tg-num {
-  font-family: var(--font-mono);
-  color: var(--text-dim); width: 16px; text-align: right; font-size: 11px;
-}
-.tg-model {
-  font-family: var(--font-mono);
-  font-size: 9px; padding: 2px 5px; border-radius: 2px;
-  background: var(--bg-raised);
-}
-.tg-desc { color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tg-tokens {
-  font-family: var(--font-mono);
-  margin-left: auto; color: var(--text-dim); font-size: 11px; white-space: nowrap;
-}
-.sub-dots {
-  display: flex; gap: 5px; padding: 4px 12px 4px 40px;
-  font-size: 11px; color: var(--text-muted); align-items: center;
-}
-.sub-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-purple); opacity: 0.7; }
-.sidebar-footer {
-  padding: 12px 14px; border-top: 1px solid var(--border-mid);
-  margin-top: auto; font-size: 13px; color: var(--text-primary);
-  background: var(--bg-surface);
-}
-.sidebar-footer div {
-  display: flex; justify-content: space-between; padding: 5px 0;
-  font-family: var(--font-mono); font-size: 12px;
-}
-.sidebar-footer div span:first-child { color: var(--text-secondary); font-weight: 500; }
-.sidebar-footer div span:last-child { color: var(--text-primary); font-weight: 600; }
-/* Main */
-.main { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px;
-  min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent;
-}
-/* Panels — three tiers of visual weight */
-.panel {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-dim);
-  border-radius: 6px;
-  overflow: hidden;
-  flex-shrink: 0;
-  transition: border-color 0.2s;
-}
-.panel-hero { border-color: var(--border-mid); }
-.panel-header {
-  padding: 10px 16px;
-  font-size: 11px; font-weight: 600;
-  color: var(--text-primary);
-  text-transform: uppercase; letter-spacing: 0.04em;
-  border-bottom: 1px solid var(--border-dim);
-  display: flex; justify-content: space-between; align-items: center;
-}
-.panel-body { padding: 16px; }
-/* Stats row */
-.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex-shrink: 0; }
-.stat-card {
-  text-align: center; padding: 4px 4px;
-  border-radius: 4px;
-  position: relative;
-}
-.stat-card::before {
-  content: '';
-  position: absolute; inset: 0;
-  border-radius: 4px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-.stat-val {
-  font-family: var(--font-mono);
-  font-size: 17px; font-weight: 600;
-  letter-spacing: -0.02em;
-}
-.stat-lbl {
-  font-size: 10px; color: var(--text-secondary); margin-top: 3px;
-  font-family: var(--font-mono);
-}
-.blue { color: var(--accent-blue); }
-.green { color: var(--accent-green); }
-.amber { color: var(--accent-amber); }
-.white { color: var(--text-primary); }
-.red { color: var(--accent-red); }
-/* Stat severity tints */
-.stat-tint-blue { background: rgba(91, 156, 245, 0.04); }
-.stat-tint-green { background: rgba(61, 214, 140, 0.04); }
-.stat-tint-amber { background: rgba(240, 180, 41, 0.06); }
-.stat-tint-red { background: rgba(240, 96, 96, 0.08); }
-/* Treemap */
-.treemap { display: flex; height: 64px; border-radius: 4px; overflow: hidden; gap: 2px; }
-.treemap-block {
-  display: flex; align-items: center; justify-content: center;
-  font-family: var(--font-mono);
-  font-size: 10px; font-weight: 500;
-  color: rgba(255,255,255,0.92);
-  flex-direction: column; gap: 1px;
-  cursor: pointer;
-  transition: filter 0.2s, flex 0.5s ease;
-  position: relative;
-}
-.treemap-block:hover { filter: brightness(1.2); }
-.treemap-block span { font-size: 8px; opacity: 0.7; }
-/* Higher-saturation treemap colors */
-.tm-system_prompt { background: #2563eb; }
-.tm-tool_definitions { background: #db2777; }
-.tm-tool_results { background: #059669; }
-.tm-system_injections { background: #6366f1; }
-.tm-thinking { background: #8b5cf6; }
-.tm-assistant_text { background: #d97706; }
-.tm-user_text { background: #10b981; }
-.tm-tool_calls { background: #ec4899; }
-.tm-images { background: #4b5563; }
-.tm-cache_markers { background: #6b7280; }
-.tm-other { background: #4b5563; }
-.treemap-legend { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
-.treemap-legend-item {
-  display: flex; align-items: center; gap: 5px;
-  font-size: 11px; color: var(--text-secondary);
-}
-.treemap-legend-dot { width: 10px; height: 10px; border-radius: 2px; }
-/* Agent breakdown */
-.agent-row {
-  display: flex; align-items: center; gap: 8px; padding: 5px 0;
-  font-size: 12px;
-}
-.agent-bar-wrap { flex: 1; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
-.agent-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
-.agent-lbl { width: 140px; color: var(--text-secondary); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-val { font-family: var(--font-mono); width: 120px; text-align: right; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
-/* Timeline */
-.timeline-wrap {
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-mid) transparent;
-}
-.tl-container { display: flex; gap: 0; }
-.tl-y-axis {
-  display: flex; flex-direction: column; justify-content: space-between;
-  height: 160px; flex-shrink: 0; padding-right: 6px;
-  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
-  text-align: right; min-width: 36px;
-}
-.tl-y-axis span { line-height: 1; }
-.timeline-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; min-width: min-content; }
-.tl-bar {
-  flex: 0 0 auto; width: 12px;
-  border-radius: 2px 2px 0 0;
-  cursor: pointer;
-  transition: filter 0.15s, height 0.3s ease;
-}
-/* Wider bars when few entries */
-.timeline-chart.tl-sparse .tl-bar { flex: 1; width: auto; min-width: 8px; max-width: 28px; }
-.tl-bar:hover { filter: brightness(1.2); }
-.tl-bar.active { box-shadow: 0 0 0 1.5px var(--accent-blue), 0 0 8px rgba(91, 156, 245, 0.3); }
-.tl-legend { display: flex; gap: 16px; margin-top: 10px; }
-.tl-legend-item {
-  display: flex; align-items: center; gap: 5px;
-  font-size: 11px; color: var(--text-secondary);
-}
-.tl-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
-.tl-labels { display: flex; gap: 2px; min-width: min-content; }
-.tl-label {
-  flex: 0 0 auto; width: 12px;
-  text-align: center; font-size: 9px; color: var(--text-muted);
-  font-family: var(--font-mono);
-  padding-top: 3px;
-}
-.timeline-chart.tl-sparse + .tl-labels .tl-label { flex: 1; width: auto; min-width: 8px; max-width: 28px; }
-/* Toggle */
-.toggle-group { display: flex; }
-.toggle-btn {
-  font-size: 11px; padding: 4px 10px;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-dim);
-  color: var(--text-dim);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-  letter-spacing: 0.02em;
-}
-.toggle-btn:first-child { border-radius: 4px 0 0 4px; }
-.toggle-btn:last-child { border-radius: 0 4px 4px 0; }
-.toggle-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
-.toggle-btn.active {
-  background: rgba(91, 156, 245, 0.12);
-  border-color: rgba(91, 156, 245, 0.4);
-  color: var(--accent-blue);
-}
-/* Empty state */
-.empty-main {
-  display: flex; align-items: center; justify-content: center;
-  height: 100%; color: var(--text-dim);
-  flex-direction: column; gap: 10px;
-}
-.empty-main .empty-icon {
-  width: 48px; height: 48px;
-  border: 2px solid var(--border-mid);
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  margin-bottom: 4px;
-  animation: pulse-ring 4s ease-in-out infinite;
-}
-@keyframes pulse-ring {
-  0%, 100% { border-color: var(--border-mid); }
-  50% { border-color: var(--border-bright); }
-}
-/* Working dir */
-.working-dir {
-  font-family: var(--font-mono);
-  font-size: 10px; color: var(--text-dim);
-  margin-top: 3px; padding-left: 14px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-/* Model color helpers */
-.model-opus { color: #fb923c; }
-.model-sonnet { color: #60a5fa; }
-.model-haiku { color: #a78bfa; }
-.model-gpt { color: #10b981; }
-.model-default { color: var(--text-dim); }
-/* Turn detail */
-.turn-detail-header {
-  display: flex; gap: 8px; align-items: center;
-  margin-bottom: 12px; font-size: 11px; color: var(--text-secondary);
-}
-.call-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 6px 8px; border-radius: 4px;
-  font-size: 12px; margin-bottom: 2px;
-  transition: background 0.12s;
-}
-.call-row:hover { background: var(--bg-hover); }
-.call-row.main-call { background: rgba(91, 156, 245, 0.06); }
-.call-model {
-  font-family: var(--font-mono);
-  font-size: 9px; padding: 2px 5px; border-radius: 2px;
-  width: 48px; text-align: center; background: var(--bg-raised);
-}
-.call-desc { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.call-desc.main { color: var(--text-primary); }
-.call-tok { font-family: var(--font-mono); color: var(--text-dim); font-size: 11px; width: 70px; text-align: right; }
-.call-cost { font-family: var(--font-mono); color: var(--accent-green); font-size: 11px; width: 50px; text-align: right; }
-/* Message categories */
-.msg-section { margin-top: 14px; border-top: 1px solid var(--border-dim); padding-top: 14px; }
-.msg-section-title {
-  font-size: 11px; color: var(--text-secondary); margin-bottom: 10px;
-  display: flex; justify-content: space-between;
-  font-weight: 600;
-}
-.msg-category { margin-bottom: 6px; }
-.msg-cat-header {
-  display: flex; align-items: center; gap: 6px;
-  padding: 5px 0; cursor: pointer; font-size: 12px;
-  transition: color 0.12s;
-}
-.msg-cat-header:hover { color: var(--text-primary); }
-.msg-cat-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
-.msg-cat-name { font-weight: 500; }
-.msg-cat-stats { font-family: var(--font-mono); margin-left: auto; color: var(--text-dim); font-size: 11px; }
-.msg-cat-bar-wrap { width: 60px; height: 4px; background: var(--bg-deep); border-radius: 2px; overflow: hidden; margin-left: 8px; }
-.msg-cat-bar { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
-.msg-items {
-  padding-left: 20px; border-left: 1px solid var(--border-dim);
-  margin-left: 3px;
-  max-height: 0; overflow: hidden;
-  transition: max-height 0.25s ease-out;
-}
-.msg-items.expanded { max-height: 5000px; transition: max-height 0.4s ease-in; }
-.msg-line {
-  display: flex; align-items: center; gap: 6px; padding: 4px 0;
-  font-size: 11px; color: var(--text-secondary);
-  border-bottom: 1px solid rgba(26, 34, 51, 0.5);
-  transition: color 0.12s;
-}
-.msg-line-icon {
-  font-family: var(--font-mono);
-  color: var(--text-muted); width: 14px; font-size: 10px;
-}
-.msg-line-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.msg-line-tok { font-family: var(--font-mono); color: var(--text-muted); font-size: 10px; white-space: nowrap; }
-.msg-line-tok.large { color: var(--accent-amber); }
-/* Context diff */
-.diff-section { margin-top: 14px; border-top: 1px solid var(--border-dim); padding-top: 14px; }
-.diff-header {
-  font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;
-  display: flex; justify-content: space-between;
-}
-.diff-line {
-  font-family: var(--font-mono);
-  font-size: 11px; padding: 3px 8px; border-radius: 2px; margin-bottom: 1px;
-}
-.diff-add { background: rgba(16, 185, 129, 0.08); color: #4ade80; }
-.diff-remove { background: rgba(240, 96, 96, 0.08); color: #f87171; }
-.diff-same { color: var(--text-muted); }
-/* Recommendations */
-.rec-item {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 10px 0; font-size: 12px;
-  border-bottom: 1px solid var(--border-dim);
-  transition: background 0.12s;
-}
-.rec-item:last-child { border-bottom: none; }
-.rec-severity {
-  width: 8px; height: 8px; border-radius: 50%;
-  margin-top: 4px; flex-shrink: 0;
-  box-shadow: 0 0 4px currentColor;
-}
-.rec-severity.high { background: var(--accent-red); color: var(--accent-red); }
-.rec-severity.med { background: var(--accent-amber); color: var(--accent-amber); }
-.rec-severity.low { background: var(--accent-green); color: var(--accent-green); }
-.rec-body { flex: 1; }
-.rec-title { font-weight: 500; }
-.rec-detail { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
-.rec-impact {
-  font-family: var(--font-mono);
-  font-size: 11px; padding: 2px 8px; border-radius: 3px; white-space: nowrap;
-}
-.rec-impact.high { background: rgba(240, 96, 96, 0.1); color: var(--accent-red); }
-.rec-impact.med { background: rgba(240, 180, 41, 0.1); color: var(--accent-amber); }
-.rec-impact.low { background: rgba(61, 214, 140, 0.1); color: var(--accent-green); }
-/* Polling indicator */
-.poll-indicator {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--accent-green);
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-.poll-indicator.active { opacity: 1; }
-/* Treemap click flash */
-@keyframes flash-highlight { 0% { background: rgba(91,156,245,0.2); } 100% { background: transparent; } }
-.msg-category.flash-highlight { animation: flash-highlight 0.8s ease-out; }
-/* Input tools line below call rows */
-.call-tools { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
-  padding: 0 8px 4px 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Clickable msg-lines */
-.msg-line { cursor: pointer; }
-.msg-line:hover { background: var(--bg-hover); }
-.msg-line.selected { background: rgba(91, 156, 245, 0.1); color: var(--text-primary); }
-/* Detail panel — slide-in from right */
-.detail-overlay {
-  position: fixed; inset: 0;
-  z-index: 1000;
-  display: none;
-  pointer-events: none;
-}
-.detail-overlay.open { display: flex; pointer-events: auto; }
-.detail-backdrop {
-  flex: 1; min-width: 0;
-  background: rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-}
-.detail-panel {
-  width: 520px; min-width: 320px; max-width: 85vw;
-  height: 100vh;
-  background: var(--bg-field);
-  border-left: 1px solid var(--border-mid);
-  display: flex; flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
-  position: relative;
-}
-.detail-overlay.open .detail-panel {
-  transform: translateX(0);
-}
-/* Resize handle */
-.detail-resize {
-  position: absolute; left: -3px; top: 0; bottom: 0;
-  width: 6px; cursor: col-resize; z-index: 10;
-  background: transparent;
-  transition: background 0.15s;
-}
-.detail-resize:hover,
-.detail-resize.dragging {
-  background: var(--accent-blue);
-  opacity: 0.5;
-}
-/* Panel header */
-.detail-head {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-dim);
-  flex-shrink: 0;
-}
-.detail-head-row {
-  display: flex; align-items: center; gap: 10px;
-}
-.detail-close {
-  font-family: var(--font-mono);
-  font-size: 16px; line-height: 1;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 3px;
-  transition: color 0.15s, background 0.15s;
-  flex-shrink: 0;
-}
-.detail-close:hover { color: var(--text-primary); background: var(--bg-hover); }
-.detail-title {
-  font-family: var(--font-mono);
-  font-size: 12px; font-weight: 600;
-  color: var(--text-primary);
-  flex: 1;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.detail-subtitle {
-  font-family: var(--font-mono);
-  font-size: 11px; color: var(--text-dim);
-  margin-top: 6px;
-  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
-}
-.detail-subtitle span { white-space: nowrap; }
-/* Copy button */
-.detail-copy {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-muted);
-  background: var(--bg-raised);
-  border: 1px solid var(--border-dim);
-  padding: 3px 10px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-  flex-shrink: 0;
-}
-.detail-copy:hover { color: var(--accent-blue); border-color: var(--accent-blue); background: var(--bg-hover); }
-.detail-copy.copied { color: var(--accent-green); border-color: var(--accent-green); }
-/* Nav buttons */
-.detail-nav {
-  display: flex; gap: 4px; flex-shrink: 0;
-}
-.detail-nav-btn {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--bg-raised);
-  border: 1px solid var(--border-dim);
-  padding: 3px 8px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-}
-.detail-nav-btn:hover:not(:disabled) { color: var(--accent-blue); border-color: var(--accent-blue); }
-.detail-nav-btn:disabled { opacity: 0.3; cursor: default; }
-/* Tabs */
-.detail-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border-dim);
-  flex-shrink: 0;
-}
-.detail-tab {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-muted);
-  padding: 8px 16px;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
-}
-.detail-tab:hover { color: var(--text-secondary); }
-.detail-tab.active {
-  color: var(--accent-blue);
-  border-bottom-color: var(--accent-blue);
-}
-/* Content area */
-.detail-content {
-  flex: 1; overflow-y: auto;
-  padding: 16px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-mid) transparent;
-}
-/* Metadata section */
-.detail-meta {
-  border-top: 1px solid var(--border-dim);
-  padding: 12px 16px;
-  flex-shrink: 0;
-  display: grid; grid-template-columns: 1fr 1fr;
-  gap: 4px 16px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-}
-.detail-meta-label { color: var(--text-dim); }
-.detail-meta-val { color: var(--text-secondary); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Syntax highlighting — rendered content */
-.detail-pre {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-  margin: 0;
-}
-/* JSON syntax */
-.syn-key { color: #7dd3fc; }
-.syn-str { color: #86efac; }
-.syn-num { color: #fbbf24; }
-.syn-bool { color: #c084fc; }
-.syn-null { color: #94a3b8; font-style: italic; }
-.syn-brace { color: #64748b; }
-/* Diff syntax */
-.syn-diff-add { color: #4ade80; background: rgba(16, 185, 129, 0.06); display: inline-block; width: 100%; }
-.syn-diff-del { color: #f87171; background: rgba(240, 96, 96, 0.06); display: inline-block; width: 100%; }
-.syn-diff-hunk { color: #818cf8; font-weight: 600; }
-.syn-diff-file { color: #fbbf24; }
-/* Bash/command output */
-.syn-prompt { color: #22d3ee; }
-.syn-comment { color: #64748b; font-style: italic; }
-/* Content block labels */
-.detail-block-label {
-  display: inline-block;
-  font-family: var(--font-mono);
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 2px 7px;
-  border-radius: 3px;
-  margin-bottom: 8px;
-}
-.detail-block-label.tool-use { background: rgba(244, 114, 182, 0.12); color: #f472b6; }
-.detail-block-label.tool-result { background: rgba(16, 185, 129, 0.12); color: #10b981; }
-.detail-block-label.thinking { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
-.detail-block-label.text { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
-.detail-block-label.image { background: rgba(75, 85, 99, 0.2); color: #9ca3af; }
-.detail-block-sep {
-  border: none;
-  border-top: 1px solid var(--border-dim);
-  margin: 14px 0;
-}
-/* Truncation */
-.detail-truncated {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--accent-blue);
-  cursor: pointer;
-  padding: 6px 0;
-  transition: color 0.15s;
-}
-.detail-truncated:hover { color: var(--text-primary); }
-/* Minimal markdown rendering */
-.md-rendered { font-family: var(--font-sans); font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
-.md-rendered h1, .md-rendered h2, .md-rendered h3 { color: var(--text-primary); font-weight: 600; margin: 10px 0 4px; }
-.md-rendered h1 { font-size: 15px; }
-.md-rendered h2 { font-size: 13px; }
-.md-rendered h3 { font-size: 12px; }
-.md-rendered code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-raised); padding: 1px 5px; border-radius: 3px; color: var(--accent-cyan); }
-.md-rendered pre { font-family: var(--font-mono); font-size: 11px; background: var(--bg-deep); padding: 8px 10px; border-radius: 4px; overflow-x: auto; margin: 6px 0; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
-.md-rendered pre code { background: none; padding: 0; color: inherit; }
-.md-rendered ul { padding-left: 18px; margin: 4px 0; }
-.md-rendered li { margin: 2px 0; }
-.md-rendered b { color: var(--text-primary); }
-.md-rendered p { margin: 4px 0; }
-/* Tool use compact params */
-.tool-params { margin: 0; padding: 0; list-style: none; }
-.tool-params li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border-dim); font-size: 11px; }
-.tool-params li:last-child { border-bottom: none; }
-.tool-param-key { font-family: var(--font-mono); color: #7dd3fc; min-width: 80px; flex-shrink: 0; }
-.tool-param-val { font-family: var(--font-mono); color: var(--text-secondary); word-break: break-all; white-space: pre-wrap; }
-</style>
-</head>
-<body>
-<div class="app">
-  <div class="header">
-    <h1><span class="lens-dot"></span>Context Lens</h1>
-    <div class="header-right">
-      <span class="poll-indicator" id="poll-indicator"></span>
-      <span id="hdr-cost" style="font-family:var(--font-mono);color:var(--accent-green);font-weight:600;font-size:12px;"></span>
-      <span id="hdr-reqs" style="font-family:var(--font-mono);color:var(--text-dim);font-size:11px;"></span>
-      <select id="hdr-source-filter"><option value="">All sources</option></select>
-      <button id="export-btn">Export LHAR</button>
-      <button id="reset-btn">Reset</button>
-    </div>
-  </div>
-  <div class="sidebar" id="sidebar"></div>
-  <div class="main" id="main-panel">
-    <div class="empty-main" id="empty-state">
-      <div class="empty-icon"><span class="lens-dot" style="margin:0;"></span></div>
-      <div style="font-family:var(--font-mono);font-size:13px;color:var(--text-dim);">No requests captured</div>
-      <div style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);">Point API calls to port 4040</div>
-    </div>
-  </div>
-</div>
-<!-- Detail Panel -->
-<div class="detail-overlay" id="detail-overlay">
-  <div class="detail-backdrop" id="detail-backdrop"></div>
-  <div class="detail-panel" id="detail-panel">
-    <div class="detail-resize" id="detail-resize"></div>
-    <div class="detail-head">
-      <div class="detail-head-row">
-        <span class="detail-close" id="detail-close">&times;</span>
-        <span class="detail-title" id="detail-title"></span>
-        <div class="detail-nav">
-          <button class="detail-nav-btn" id="detail-prev" title="Previous message">&uarr;</button>
-          <button class="detail-nav-btn" id="detail-next" title="Next message">&darr;</button>
-        </div>
-        <button class="detail-copy" id="detail-copy">Copy</button>
-      </div>
-      <div class="detail-subtitle" id="detail-subtitle"></div>
-    </div>
-    <div class="detail-tabs" id="detail-tabs">
-      <div class="detail-tab active" data-dtab="rendered">Rendered</div>
-      <div class="detail-tab" data-dtab="raw">Raw JSON</div>
-    </div>
-    <div class="detail-content" id="detail-content"></div>
-    <div class="detail-meta" id="detail-meta"></div>
-  </div>
-</div>
-<script>
-(function() {
-  'use strict';
-  // --- State ---
-  let currentData = null;
-  let currentRevision = -1;
-  let selectedSessionId = null;
-  let selectedTurnIndex = -1; // -1 = latest
-  let expandedSessions = new Set();
-  let treemapMode = 'detailed';
-  let timelineMode = 'all';
-  let turnDetailMode = 'calls'; // 'calls' or 'diff'
-  let expandedCategories = new Set();
-  let expandedAgentGroups = new Set();
-  let turnCallsExpanded = false;
-  let sourceFilter = '';
-  // Preserve scroll positions across re-renders
-  function saveScroll(id) { var el = document.getElementById(id); return el ? el.scrollTop : 0; }
-  function restoreScroll(id, pos) { var el = document.getElementById(id); if (el) el.scrollTop = pos; }
-  // --- Helpers ---
-  function esc(s) { return s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;') : ''; }
-  function fmtK(n) { return n >= 1000 ? (n / 1000).toFixed(1) + 'K' : String(n); }
-  function fmtCost(c) { return c != null ? '$' + c.toFixed(c < 0.01 ? 4 : 2) : '--'; }
-  function fmtTime(iso) { return new Date(iso).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}); }
-  function computeYTicks(max, count) {
-    if (max <= 0) return [0];
-    // Find nice step: 1, 2, 5, 10, 20, 50, 100, ...
-    var rough = max / count;
-    var mag = Math.pow(10, Math.floor(Math.log10(rough)));
-    var residual = rough / mag;
-    var nice = residual <= 1.5 ? 1 : residual <= 3.5 ? 2 : 5;
-    var step = nice * mag;
-    var ticks = [];
-    for (var v = 0; v <= max + step * 0.01; v += step) {
-      ticks.push(Math.round(v));
-    }
-    return ticks;
-  }
-  function modelClass(m) {
-    if (!m) return 'model-default';
-    if (m.includes('opus')) return 'model-opus';
-    if (m.includes('sonnet')) return 'model-sonnet';
-    if (m.includes('haiku')) return 'model-haiku';
-    if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return 'model-gpt';
-    return 'model-default';
-  }
-  function modelBarColor(m) {
-    if (!m) return '#888';
-    if (m.includes('opus')) return '#fb923c';
-    if (m.includes('sonnet')) return '#60a5fa';
-    if (m.includes('haiku')) return '#a78bfa';
-    if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return '#10b981';
-    return '#888';
-  }
-  function modelBarGradient(m, isMain) {
-    if (isMain === false) {
-      // Sub-agent: desaturated, lower-contrast gradient
-      if (!m) return 'linear-gradient(to top, #222, #444)';
-      if (m.includes('opus')) return 'linear-gradient(to top, #3d2510, #9a6a3a)';
-      if (m.includes('sonnet')) return 'linear-gradient(to top, #152a42, #4070a0)';
-      if (m.includes('haiku')) return 'linear-gradient(to top, #2e1660, #7060a0)';
-      if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return 'linear-gradient(to top, #0a3025, #1a7050)';
-      return 'linear-gradient(to top, #222, #444)';
-    }
-    if (!m) return 'linear-gradient(to top, #333, #666)';
-    if (m.includes('opus')) return 'linear-gradient(to top, #78350f, #fb923c)';
-    if (m.includes('sonnet')) return 'linear-gradient(to top, #1e3a5f, #60a5fa)';
-    if (m.includes('haiku')) return 'linear-gradient(to top, #4c1d95, #a78bfa)';
-    if (m.includes('gpt') || m.includes('o1') || m.includes('o3') || m.includes('o4')) return 'linear-gradient(to top, #064e3b, #10b981)';
-    return 'linear-gradient(to top, #333, #666)';
-  }
-  function sourceBadgeClass(src) {
-    if (src === 'claude') return 'badge-claude';
-    if (src === 'codex') return 'badge-codex';
-    if (src === 'aider') return 'badge-aider';
-    if (src === 'kimi') return 'badge-kimi';
-    return 'badge-unknown';
-  }
-  function shortModel(m) {
-    if (!m) return '?';
-    if (m.includes('opus')) return 'opus';
-    if (m.includes('sonnet')) return 'sonnet';
-    if (m.includes('haiku')) return 'haiku';
-    if (m.includes('gpt-4o-mini')) return '4o-mini';
-    if (m.includes('gpt-4o')) return '4o';
-    if (m.includes('gpt-4')) return 'gpt4';
-    if (m.includes('o4-mini')) return 'o4m';
-    if (m.includes('o3-mini')) return 'o3m';
-    if (m.includes('o3')) return 'o3';
-    if (m.includes('o1')) return 'o1';
-    return m.length > 10 ? m.slice(0, 8) : m;
-  }
-  // Category display names and colors — more saturated for the treemap
-  var CATEGORY_META = {
-    system_prompt:     { label: 'System prompt',     color: '#2563eb' },
-    tool_definitions:  { label: 'Tool definitions',  color: '#db2777' },
-    tool_results:      { label: 'Tool results',      color: '#059669' },
-    tool_calls:        { label: 'Tool calls',        color: '#ec4899' },
-    system_injections: { label: 'System injections',  color: '#6366f1' },
-    thinking:          { label: 'Thinking',           color: '#8b5cf6' },
-    assistant_text:    { label: 'Assistant',          color: '#d97706' },
-    user_text:         { label: 'User',               color: '#10b981' },
-    images:            { label: 'Images',             color: '#4b5563' },
-    cache_markers:     { label: 'Cache markers',      color: '#6b7280' },
-    other:             { label: 'Other',              color: '#4b5563' },
-  };
-  // Simple mode groups: system, tools, messages
-  var SIMPLE_GROUPS = {
-    system:   ['system_prompt', 'system_injections'],
-    tools:    ['tool_definitions', 'tool_calls'],
-    messages: ['tool_results', 'thinking', 'assistant_text', 'user_text', 'images', 'cache_markers', 'other'],
-  };
-  var SIMPLE_META = {
-    system:   { label: 'System',   color: '#2563eb' },
-    tools:    { label: 'Tools',    color: '#db2777' },
-    messages: { label: 'Messages', color: '#10b981' },
-  };
-  // --- Data helpers ---
-  function getConversations() {
-    if (!currentData) return [];
-    var convos = currentData.conversations || [];
-    if (sourceFilter) convos = convos.filter(function(c) { return c.source === sourceFilter; });
-    return convos;
-  }
-  function getSelectedSession() {
-    if (!selectedSessionId) return null;
-    var convos = getConversations();
-    return convos.find(function(c) { return c.id === selectedSessionId; }) || null;
-  }
-  function getSessionEntries(session) {
-    if (!session) return [];
-    return session.entries.slice().reverse();
-  }
-  function getSelectedEntry(session) {
-    if (!session) return null;
-    var entries = getSessionEntries(session);
-    if (entries.length === 0) return null;
-    var idx = selectedTurnIndex >= 0 ? selectedTurnIndex : entries.length - 1;
-    return entries[Math.min(idx, entries.length - 1)];
-  }
-  function sessionTotalCost(session) {
-    return (session.entries || []).reduce(function(s, e) { return s + (e.costUsd || 0); }, 0);
-  }
-  function sessionTotalTokens(session) {
-    return (session.entries || []).reduce(function(s, e) { return s + (e.contextInfo.totalTokens || 0); }, 0);
-  }
-  function allSources() {
-    if (!currentData) return [];
-    var set = {};
-    (currentData.conversations || []).forEach(function(c) { if (c.source) set[c.source] = true; });
-    return Object.keys(set).sort();
-  }
-  function classifyEntries(entries) {
-    var agentTotals = {};
-    entries.forEach(function(e) {
-      var ak = e.agentKey || '_main';
-      agentTotals[ak] = (agentTotals[ak] || 0) + e.contextInfo.totalTokens;
-    });
-    var mainAgent = null;
-    var maxTok = 0;
-    for (var ak in agentTotals) {
-      if (agentTotals[ak] > maxTok) { maxTok = agentTotals[ak]; mainAgent = ak; }
-    }
-    return entries.map(function(e) {
-      var ak = e.agentKey || '_main';
-      return { entry: e, isMain: ak === mainAgent };
-    });
-  }
-  // --- Render: Header ---
-  function renderHeader() {
-    var totalCost = 0;
-    var totalReqs = 0;
-    (currentData ? currentData.conversations || [] : []).forEach(function(c) {
-      totalCost += sessionTotalCost(c);
-      totalReqs += (c.entries || []).length;
-    });
-    var ungrouped = currentData ? currentData.ungrouped || [] : [];
-    totalReqs += ungrouped.length;
-    ungrouped.forEach(function(e) { totalCost += e.costUsd || 0; });
-    document.getElementById('hdr-cost').textContent = fmtCost(totalCost);
-    document.getElementById('hdr-reqs').textContent = totalReqs + ' req';
-    var sel = document.getElementById('hdr-source-filter');
-    var sources = allSources();
-    var oldVal = sel.value;
-    sel.innerHTML = '<option value="">All sources</option>';
-    sources.forEach(function(s) {
-      sel.innerHTML += '<option value="' + esc(s) + '"' + (s === sourceFilter ? ' selected' : '') + '>' + esc(s) + '</option>';
-    });
-    if (oldVal && !sources.includes(oldVal)) sel.value = '';
-  }
-  // --- Render: Sidebar ---
-  function renderSidebar() {
-    var scrollPos = saveScroll('sidebar');
-    var convos = getConversations();
-    var sb = document.getElementById('sidebar');
-    if (convos.length === 0) {
-      sb.innerHTML = '<div class="sidebar-section">Sessions</div>'
-        + '<div style="padding:20px 14px;color:var(--text-muted);font-family:var(--font-mono);font-size:11px;">Waiting for data...</div>';
-      return;
-    }
-    var html = '<div class="sidebar-section">Sessions</div>';
-    var mainCalls = 0, subCalls = 0, totalCost = 0;
-    convos.forEach(function(c) {
-      var isActive = c.id === selectedSessionId;
-      var entries = getSessionEntries(c);
-      var classified = classifyEntries(entries);
-      var mainCount = classified.filter(function(x) { return x.isMain; }).length;
-      var subCount = classified.filter(function(x) { return !x.isMain; }).length;
-      mainCalls += mainCount;
-      subCalls += subCount;
-      var cost = sessionTotalCost(c);
-      totalCost += cost;
-      var latestEntry = entries[entries.length - 1];
-      var model = latestEntry ? latestEntry.contextInfo.model : 'unknown';
-      var isExpanded = isActive && expandedSessions.has(c.id);
-      html += '<div class="session-item' + (isActive ? ' active' : '') + '" data-session="' + esc(c.id) + '">';
-      html += '<div class="session-head">';
-      html += '<span class="dot ' + (isActive ? 'dot-live' : 'dot-done') + '"></span>';
-      html += '<span class="badge ' + sourceBadgeClass(c.source) + '">' + esc(c.source || '?') + '</span>';
-      html += '<span style="font-family:var(--font-mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);">' + esc(shortModel(model)) + '</span>';
-      html += '<span class="session-delete" data-delete="' + esc(c.id) + '">&times;</span>';
-      html += '</div>';
-      var latestTime = latestEntry && latestEntry.timestamp ? fmtTime(latestEntry.timestamp) : '';
-      html += '<div class="session-meta"><span>' + entries.length + ' turns</span><span>' + fmtK(sessionTotalTokens(c)) + ' tok</span><span style="color:var(--accent-green);">' + fmtCost(cost) + '</span>' + (latestTime ? '<span>' + esc(latestTime) + '</span>' : '') + '</div>';
-      if (c.workingDirectory) html += '<div class="working-dir">' + esc(c.workingDirectory) + '</div>';
-      html += '</div>';
-      html += '<div class="turn-group' + (isExpanded ? ' expanded' : '') + '" data-turns="' + esc(c.id) + '">';
-      var mainEntries = classified.filter(function(x) { return x.isMain; });
-      // Build turn data array
-      var turnData = [];
-      var turnNum = 0;
-      classified.forEach(function(item, idx) {
-        if (!item.isMain) return;
-        turnNum++;
-        var e = item.entry;
-        var nextMainIdx = classified.length;
-        for (var ni = idx + 1; ni < classified.length; ni++) {
-          if (classified[ni].isMain) { nextMainIdx = ni; break; }
-        }
-        var subsAfter = [];
-        for (var k = idx + 1; k < classified.length; k++) {
-          if (classified[k].isMain) break;
-          subsAfter.push(classified[k]);
-        }
-        turnData.push({
-          item: item, idx: idx, turnNum: turnNum, nextMainIdx: nextMainIdx,
-          subsAfter: subsAfter, e: e
-        });
-      });
-      // Reverse to show latest first
-      turnData.reverse();
-      // Render turns in reverse order (latest on top)
-      turnData.forEach(function(td) {
-        var turnActive = isActive && (selectedTurnIndex === -1
-          ? td.turnNum === mainEntries.length
-          : (selectedTurnIndex >= td.idx && selectedTurnIndex < td.nextMainIdx));
-        var desc = esc(extractCallSummary(td.e) || td.e.agentLabel || '').slice(0, 40) || 'Turn ' + td.turnNum;
-        html += '<div class="tg-item' + (turnActive ? ' active' : '') + '" data-session="' + esc(c.id) + '" data-turn="' + td.idx + '">';
-        html += '<span class="tg-num">' + td.turnNum + '</span>';
-        html += '<span class="tg-model ' + modelClass(td.e.contextInfo.model) + '">' + esc(shortModel(td.e.contextInfo.model)) + '</span>';
-        html += '<span class="tg-desc">' + desc + '</span>';
-        html += '<span class="tg-tokens">' + fmtK(td.e.contextInfo.totalTokens) + '</span>';
-        html += '</div>';
-        if (td.subsAfter.length > 0) {
-          html += '<div class="sub-dots">';
-          td.subsAfter.forEach(function() { html += '<span class="sub-dot"></span>'; });
-          var subModel = shortModel(td.subsAfter[0].entry.contextInfo.model);
-          html += ' ' + esc(subModel) + ' x' + td.subsAfter.length;
-          html += '</div>';
-        }
-      });
-      html += '</div>';
-    });
-    html += '<div class="sidebar-footer">';
-    html += '<div><span>Main calls</span><span style="color:#fb923c;">' + mainCalls + '</span></div>';
-    html += '<div><span>Sub calls</span><span style="color:var(--accent-purple);">' + subCalls + '</span></div>';
-    html += '<div><span>Total cost</span><span style="color:var(--accent-green);">' + fmtCost(totalCost) + '</span></div>';
-    html += '</div>';
-    sb.innerHTML = html;
-    sb.querySelectorAll('.session-item').forEach(function(el) {
-      el.addEventListener('click', function() {
-        var sid = el.getAttribute('data-session');
-        selectedSessionId = sid;
-        selectedTurnIndex = -1; // Always select latest turn
-        // Toggle expansion
-        if (expandedSessions.has(sid)) {
-          expandedSessions.delete(sid);
-        } else {
-          expandedSessions.add(sid);
-        }
-        renderSidebar();
-        renderMain();
-      });
-    });
-    sb.querySelectorAll('.tg-item').forEach(function(el) {
-      el.addEventListener('click', function(ev) {
-        ev.stopPropagation();
-        var sid = el.getAttribute('data-session');
-        var turn = parseInt(el.getAttribute('data-turn'), 10);
-        selectedSessionId = sid;
-        selectedTurnIndex = turn;
-        renderSidebar();
-        renderMain();
-      });
-    });
-    sb.querySelectorAll('.session-delete').forEach(function(el) {
-      el.addEventListener('click', function(ev) {
-        ev.stopPropagation();
-        var sid = el.getAttribute('data-delete');
-        fetch('/api/conversations/' + encodeURIComponent(sid), { method: 'DELETE' }).then(function() {
-          if (selectedSessionId === sid) {
-            selectedSessionId = null;
-            selectedTurnIndex = -1;
-          }
-          expandedSessions.delete(sid);
-          fetchAndRender();
-        });
-      });
-    });
-    restoreScroll('sidebar', scrollPos);
-    // Auto-scroll expanded turn group so active turn is visible
-    var activeTg = sb.querySelector('.tg-item.active');
-    if (activeTg) {
-      var group = activeTg.closest('.turn-group');
-      if (group && group.classList.contains('expanded')) {
-        // Defer to after max-height transition starts
-        setTimeout(function() {
-          var itemTop = activeTg.offsetTop - group.offsetTop;
-          var groupH = group.clientHeight;
-          if (itemTop > groupH - 40 || itemTop < group.scrollTop) {
-            group.scrollTop = Math.max(0, itemTop - groupH / 2 + 16);
-          }
-        }, 50);
-      }
-    }
-  }
-  // --- Render: Main Panel ---
-  function renderMain() {
-    var scrollPos = saveScroll('main-panel');
-    var main = document.getElementById('main-panel');
-    var session = getSelectedSession();
-    if (!session) {
-      var convos = getConversations();
-      if (convos.length === 0) {
-        main.innerHTML = '<div class="empty-main">'
-          + '<div class="empty-icon"><span class="lens-dot" style="margin:0;"></span></div>'
-          + '<div style="font-family:var(--font-mono);font-size:13px;color:var(--text-dim);">No requests captured</div>'
-          + '<div style="font-family:var(--font-mono);font-size:11px;color:var(--text-muted);">Point API calls to port 4040</div></div>';
-      } else {
-        main.innerHTML = '<div class="empty-main"><div style="font-family:var(--font-mono);font-size:12px;color:var(--text-dim);">Select a session</div></div>';
-      }
-      return;
-    }
-    var entries = getSessionEntries(session);
-    var classified = classifyEntries(entries);
-    var entry = getSelectedEntry(session);
-    if (!entry) return;
-    var ci = entry.contextInfo;
-    var utilPct = entry.contextLimit > 0 ? Math.round((ci.totalTokens / entry.contextLimit) * 100) : 0;
-    var turnCost = entry.costUsd;
-    var sessionCost = sessionTotalCost(session);
-    var msgCount = ci.messages ? ci.messages.length : 0;
-    var toolCallEntry = (entry.composition || []).find(function(c) { return c.category === 'tool_calls'; });
-    var toolCallCount = toolCallEntry ? toolCallEntry.count : 0;
-    var u = entry.usage || {};
-    var outputTok = u.outputTokens || 0;
-    var cacheRead = u.cacheReadTokens || 0;
-    var cacheWrite = u.cacheWriteTokens || 0;
-    var html = '';
-    // --- Stats row ---
-    var utilColor = utilPct > 80 ? 'red' : utilPct > 60 ? 'amber' : 'blue';
-    var utilTint = utilPct > 80 ? 'stat-tint-red' : utilPct > 60 ? 'stat-tint-amber' : 'stat-tint-blue';
-    html += '<div class="stats-row">';
-    html += '<div class="panel"><div class="panel-body"><div class="stat-card ' + utilTint + '"><div class="stat-val ' + utilColor + '">' + utilPct + '%</div><div class="stat-lbl">Context (' + fmtK(ci.totalTokens) + '/' + fmtK(entry.contextLimit) + ')</div></div></div></div>';
-    html += '<div class="panel"><div class="panel-body"><div class="stat-card stat-tint-green"><div class="stat-val green">' + fmtCost(turnCost) + '</div><div class="stat-lbl">Turn cost (' + fmtCost(sessionCost) + ' session)</div></div></div></div>';
-    html += '<div class="panel"><div class="panel-body"><div class="stat-card"><div class="stat-val white">' + fmtK(outputTok) + '</div><div class="stat-lbl">Output tokens</div></div></div></div>';
-    html += '<div class="panel"><div class="panel-body"><div class="stat-card"><div class="stat-val amber">' + toolCallCount + '</div><div class="stat-lbl">Tool calls</div></div></div></div>';
-    html += '</div>';
-    // --- Secondary stats line (cache, messages, stop reason) ---
-    var secondaryParts = [];
-    secondaryParts.push(msgCount + ' messages');
-    if (cacheRead > 0 || cacheWrite > 0) {
-      var cachePct = ci.totalTokens > 0 ? Math.round(cacheRead / ci.totalTokens * 100) : 0;
-      secondaryParts.push('cache: ' + cachePct + '% hit (' + fmtK(cacheRead) + ' read, ' + fmtK(cacheWrite) + ' write)');
-    }
-    if (entry.stopReason) secondaryParts.push('stop: ' + entry.stopReason);
-    if (entry.responseModel && entry.responseModel !== ci.model) secondaryParts.push('model: ' + entry.responseModel);
-    html += '<div style="font-family:var(--font-mono);font-size:10px;color:var(--text-dim);display:flex;gap:16px;flex-wrap:wrap;padding:0 2px;">';
-    secondaryParts.forEach(function(p) { html += '<span>' + esc(p) + '</span>'; });
-    html += '</div>';
-    // --- Treemap ---
-    html += renderTreemap(entry);
-    // --- Agent breakdown ---
-    html += renderAgentBreakdown(session, classified);
-    // --- Timeline ---
-    html += renderTimeline(entries, classified);
-    // --- Turn Detail ---
-    html += renderTurnDetail(entry, entries, classified);
-    // --- Recommendations ---
-    html += renderRecommendations(entry, entries, classified);
-    main.innerHTML = html;
-    attachMainHandlers();
-    restoreScroll('main-panel', scrollPos);
-  }
-  // --- Treemap ---
-  function renderTreemap(entry) {
-    var composition = entry.composition || [];
-    if (composition.length === 0) return '';
-    var totalTok = composition.reduce(function(s, c) { return s + c.tokens; }, 0);
-    var turnLabel = '';
-    var session = getSelectedSession();
-    if (session) {
-      var entries = getSessionEntries(session);
-      var classified = classifyEntries(entries);
-      var mainNum = 0;
-      for (var j = 0; j < classified.length; j++) {
-        if (classified[j].isMain) mainNum++;
-        if (classified[j].entry.id === entry.id) break;
-      }
-      turnLabel = ' / Turn ' + mainNum;
-    }
-    var html = '<div class="panel panel-hero">';
-    html += '<div class="panel-header">Composition' + esc(turnLabel) + ' <span style="color:var(--text-secondary);font-weight:400;">' + fmtK(totalTok) + ' tok</span>';
-    html += '<div class="toggle-group">';
-    html += '<div class="toggle-btn' + (treemapMode === 'detailed' ? ' active' : '') + '" data-treemap="detailed">Detailed</div>';
-    html += '<div class="toggle-btn' + (treemapMode === 'simple' ? ' active' : '') + '" data-treemap="simple">Simple</div>';
-    html += '</div></div>';
-    html += '<div class="panel-body">';
-    if (treemapMode === 'detailed') {
-      html += '<div class="treemap">';
-      composition.forEach(function(c) {
-        var meta = CATEGORY_META[c.category] || { label: c.category, color: '#4b5563' };
-        var pct = totalTok > 0 ? Math.round(c.tokens / totalTok * 100) : 0;
-        var labelHtml = pct >= 3 ? esc(meta.label) + '<span>' + fmtK(c.tokens) + ' (' + pct + '%)</span>' : '';
-        html += '<div class="treemap-block tm-' + esc(c.category) + '" data-category="' + esc(c.category) + '" style="flex:' + c.tokens + ';" title="' + esc(meta.label) + ': ' + c.tokens.toLocaleString() + ' tokens (' + pct + '%)">' + labelHtml + '</div>';
-      });
-      html += '</div>';
-      html += '<div class="treemap-legend">';
-      composition.forEach(function(c) {
-        var meta = CATEGORY_META[c.category] || { label: c.category, color: '#4b5563' };
-        html += '<div class="treemap-legend-item"><div class="treemap-legend-dot" style="background:' + meta.color + ';"></div>' + esc(meta.label) + '</div>';
-      });
-      html += '</div>';
-    } else {
-      var groups = {};
-      for (var gk in SIMPLE_GROUPS) {
-        groups[gk] = 0;
-        SIMPLE_GROUPS[gk].forEach(function(cat) {
-          var found = composition.find(function(c) { return c.category === cat; });
-          if (found) groups[gk] += found.tokens;
-        });
-      }
-      html += '<div class="treemap">';
-      for (var gk2 in groups) {
-        if (groups[gk2] === 0) continue;
-        var meta2 = SIMPLE_META[gk2];
-        var pct2 = totalTok > 0 ? Math.round(groups[gk2] / totalTok * 100) : 0;
-        html += '<div class="treemap-block" style="flex:' + groups[gk2] + ';background:' + meta2.color + ';">'
-          + esc(meta2.label) + '<span>' + fmtK(groups[gk2]) + ' (' + pct2 + '%)</span></div>';
-      }
-      html += '</div>';
-      html += '<div class="treemap-legend">';
-      for (var gk3 in SIMPLE_META) {
-        if (!groups[gk3]) continue;
-        html += '<div class="treemap-legend-item"><div class="treemap-legend-dot" style="background:' + SIMPLE_META[gk3].color + ';"></div>' + esc(SIMPLE_META[gk3].label) + '</div>';
-      }
-      html += '</div>';
-    }
-    html += '</div></div>';
-    return html;
-  }
-  // --- Agent Breakdown ---
-  function renderAgentBreakdown(session, classified) {
-    var agents = {};
-    classified.forEach(function(item) {
-      var ak = item.entry.agentKey || '_main';
-      if (!agents[ak]) {
-        agents[ak] = { key: ak, label: item.entry.agentLabel || 'Main', model: item.entry.contextInfo.model, latestTokens: 0, cost: 0, count: 0, isMain: item.isMain, latestEntry: item.entry };
-      }
-      agents[ak].latestTokens = item.entry.contextInfo.totalTokens;
-      agents[ak].latestEntry = item.entry;
-      agents[ak].cost += item.entry.costUsd || 0;
-      agents[ak].count += 1;
-    });
-    var agentList = Object.values(agents);
-    // Separate main agents from sub-agents, then group sub-agents by model
-    var mainAgents = agentList.filter(function(ag) { return ag.isMain; });
-    var subAgents = agentList.filter(function(ag) { return !ag.isMain; });
-    var subByModel = {};
-    subAgents.forEach(function(ag) {
-      var sm = shortModel(ag.model);
-      if (!subByModel[sm]) {
-        subByModel[sm] = { model: ag.model, shortModel: sm, totalTokens: 0, totalCost: 0, count: 0, agents: [] };
-      }
-      subByModel[sm].totalTokens += ag.latestTokens;
-      subByModel[sm].totalCost += ag.cost;
-      subByModel[sm].count += ag.count;
-      subByModel[sm].agents.push(ag);
-    });
-    var totalTok = 0;
-    mainAgents.forEach(function(ag) { totalTok += ag.latestTokens; });
-    for (var smk in subByModel) { totalTok += subByModel[smk].totalTokens; }
-    var html = '<div class="panel agents-panel">';
-    html += '<div class="panel-header">Agents</div>';
-    html += '<div class="panel-body" style="max-height:320px;overflow-y:auto;">';
-    // Main agents
-    mainAgents.forEach(function(ag) {
-      var pct = totalTok > 0 ? Math.round(ag.latestTokens / totalTok * 100) : 0;
-      var color = modelBarColor(ag.model);
-      html += '<div class="agent-row">';
-      html += '<span class="agent-lbl">Main <span style="font-family:var(--font-mono);color:var(--text-muted);">' + esc(shortModel(ag.model)) + '</span></span>';
-      html += '<div class="agent-bar-wrap"><div class="agent-bar" style="width:' + pct + '%;background:' + color + ';"></div></div>';
-      html += '<span class="agent-val">' + fmtK(ag.latestTokens) + ' / ' + fmtCost(ag.cost) + '</span>';
-      html += '</div>';
-    });
-    // Sub-agent groups (expandable)
-    var subModelKeys = Object.keys(subByModel).sort(function(a, b) { return subByModel[b].totalTokens - subByModel[a].totalTokens; });
-    subModelKeys.forEach(function(sm) {
-      var g = subByModel[sm];
-      var groupId = 'agent-group-' + sm;
-      var isExpanded = expandedAgentGroups.has(groupId);
-      var pct = totalTok > 0 ? Math.round(g.totalTokens / totalTok * 100) : 0;
-      var color = modelBarColor(g.model);
-      var arrow = isExpanded ? '\u25BE' : '\u25B8';
-      html += '<div class="agent-row" data-agent-group="' + esc(groupId) + '" style="cursor:pointer;">';
-      html += '<span class="agent-lbl"><span style="color:var(--text-muted);margin-right:4px;">' + arrow + '</span>Sub-agents <span style="font-family:var(--font-mono);color:var(--text-muted);">' + esc(sm) + '</span>';
-      html += ' <span style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);">\u00d7' + g.count + '</span></span>';
-      html += '<div class="agent-bar-wrap"><div class="agent-bar" style="width:' + pct + '%;background:' + color + ';"></div></div>';
-      html += '<span class="agent-val">' + fmtK(g.totalTokens) + ' / ' + fmtCost(g.totalCost) + '</span>';
-      html += '</div>';
-      if (isExpanded) {
-        g.agents.sort(function(a, b) { return b.latestTokens - a.latestTokens; });
-        g.agents.forEach(function(ag) {
-          var subPct = totalTok > 0 ? Math.round(ag.latestTokens / totalTok * 100) : 0;
-          var label = ag.label || ag.key;
-          html += '<div class="agent-row" style="padding-left:20px;">';
-          html += '<span class="agent-lbl" style="color:var(--text-dim);font-size:11px;">' + esc(label) + ' <span style="font-family:var(--font-mono);font-size:10px;color:var(--text-muted);">\u00d7' + ag.count + '</span></span>';
-          html += '<div class="agent-bar-wrap"><div class="agent-bar" style="width:' + subPct + '%;background:' + color + ';opacity:0.6;"></div></div>';
-          html += '<span class="agent-val" style="font-size:10px;">' + fmtK(ag.latestTokens) + ' / ' + fmtCost(ag.cost) + '</span>';
-          html += '</div>';
-        });
-      }
-    });
-    var subPct = classified.length > 0
-      ? Math.round(classified.filter(function(x) { return !x.isMain; }).length / classified.length * 100)
-      : 0;
-    if (subPct > 0) {
-      var subTok = subAgents.reduce(function(s, ag) { return s + ag.latestTokens; }, 0);
-      var subTokPct = totalTok > 0 ? Math.round(subTok / totalTok * 100) : 0;
-      html += '<div style="margin-top:8px;font-size:11px;color:var(--text-muted);">'
-        + subPct + '% calls are subagents (' + subTokPct + '% of context)</div>';
-    }
-    html += '</div></div>';
-    return html;
-  }
-  // --- Timeline ---
-  function renderTimeline(entries, classified) {
-    if (entries.length === 0) return '';
-    var filtered = classified;
-    if (timelineMode === 'main') {
-      filtered = classified.filter(function(x) { return x.isMain; });
-    }
-    var maxTok = 0;
-    filtered.forEach(function(item) {
-      var val = timelineMode === 'cost' ? (item.entry.costUsd || 0) * 100000 : item.entry.contextInfo.totalTokens;
-      if (val > maxTok) maxTok = val;
-    });
-    var selectedEntry = getSelectedEntry(getSelectedSession());
-    var html = '<div class="panel panel-hero">';
-    html += '<div class="panel-header">Timeline';
-    html += '<div class="toggle-group">';
-    html += '<div class="toggle-btn' + (timelineMode === 'all' ? ' active' : '') + '" data-timeline="all">All</div>';
-    html += '<div class="toggle-btn' + (timelineMode === 'main' ? ' active' : '') + '" data-timeline="main">Main</div>';
-    html += '<div class="toggle-btn' + (timelineMode === 'cost' ? ' active' : '') + '" data-timeline="cost">Cost</div>';
-    html += '</div></div>';
-    html += '<div class="panel-body">';
-    var isSparse = filtered.length <= 40;
-    // Compute Y-axis ticks
-    var isCostMode = timelineMode === 'cost';
-    var yMax = isCostMode ? (maxTok / 100000) : maxTok; // convert back from scaled cost
-    var yTicks = computeYTicks(yMax, 4);
-    html += '<div class="tl-container">';
-    // Y-axis
-    html += '<div class="tl-y-axis">';
-    for (var yi = yTicks.length - 1; yi >= 0; yi--) {
-      var yv = yTicks[yi];
-      html += '<span>' + (isCostMode ? fmtCost(yv) : fmtK(yv)) + '</span>';
-    }
-    html += '</div>';
-    html += '<div class="timeline-wrap" style="flex:1;min-width:0;">';
-    html += '<div class="timeline-chart' + (isSparse ? ' tl-sparse' : '') + '">';
-    var tlMainNum = 0;
-    var tlNums = [];
-    filtered.forEach(function(item) {
-      var val = timelineMode === 'cost' ? (item.entry.costUsd || 0) * 100000 : item.entry.contextInfo.totalTokens;
-      var pct = maxTok > 0 ? Math.max(3, Math.round(val / maxTok * 100)) : 3;
-      var isActive = selectedEntry && item.entry.id === selectedEntry.id;
-      var model = item.entry.contextInfo.model;
-      var origIdx = entries.indexOf(item.entry);
-      if (item.isMain) tlMainNum++;
-      tlNums.push(item.isMain ? tlMainNum : '');
-      html += '<div class="tl-bar' + (isActive ? ' active' : '') + '" style="height:' + pct + '%;background:' + modelBarGradient(model, item.isMain) + ';" data-tl-turn="' + origIdx + '" title="' + (item.isMain ? '' : 'Sub ') + esc(shortModel(model)) + ': ' + fmtK(item.entry.contextInfo.totalTokens) + ' tok"></div>';
-    });
-    html += '</div>';
-    // Turn number labels below bars
-    var labelStep = filtered.length > 30 ? Math.ceil(filtered.length / 15) : 1;
-    html += '<div class="tl-labels">';
-    tlNums.forEach(function(n, i) {
-      var show = n && (labelStep <= 1 || n % labelStep === 0 || n === tlMainNum);
-      html += '<div class="tl-label">' + (show ? n : '') + '</div>';
-    });
-    html += '</div>';
-    html += '</div>'; // timeline-wrap
-    html += '</div>'; // tl-container
-    var seenRoles = {};
-    filtered.forEach(function(item) {
-      var m = item.entry.contextInfo.model;
-      var sm = shortModel(m);
-      var key = (item.isMain ? 'main-' : 'sub-') + sm;
-      if (!seenRoles[key]) seenRoles[key] = { model: m, isMain: item.isMain, shortModel: sm };
-    });
-    html += '<div class="tl-legend">';
-    for (var rk in seenRoles) {
-      var info = seenRoles[rk];
-      var role = info.isMain ? 'Main' : 'Sub';
-      html += '<div class="tl-legend-item"><span class="tl-legend-dot" style="background:' + modelBarColor(info.model) + ';' + (info.isMain ? '' : 'opacity:0.5;') + '"></span>' + role + ' (' + esc(info.shortModel) + ')</div>';
-    }
-    html += '</div>';
-    html += '</div></div>';
-    return html;
-  }
-  // --- Turn Detail ---
-  function renderTurnDetail(entry, entries, classified) {
-    var idx = entries.indexOf(entry);
-    var turnGroup = [];
-    var mainIdx = idx;
-    for (var i = idx; i >= 0; i--) {
-      if (classified[i].isMain) { mainIdx = i; break; }
-    }
-    for (var j = mainIdx; j < classified.length; j++) {
-      if (j > mainIdx && classified[j].isMain) break;
-      turnGroup.push(classified[j]);
-    }
-    var turnNum = 0;
-    for (var k = 0; k <= mainIdx; k++) {
-      if (classified[k].isMain) turnNum++;
-    }
-    var html = '<div class="panel panel-hero">';
-    html += '<div class="panel-header">Turn ' + turnNum;
-    html += '<div class="toggle-group">';
-    html += '<div class="toggle-btn' + (turnDetailMode === 'calls' ? ' active' : '') + '" data-detail="calls">Calls</div>';
-    html += '<div class="toggle-btn' + (turnDetailMode === 'diff' ? ' active' : '') + '" data-detail="diff">Diff</div>';
-    html += '</div></div>';
-    html += '<div class="panel-body">';
-    if (turnDetailMode === 'calls') {
-      var subCount = turnGroup.filter(function(x) { return !x.isMain; }).length;
-      var totalCallTok = turnGroup.reduce(function(s, x) { return s + x.entry.contextInfo.totalTokens; }, 0);
-      var totalCallCost = turnGroup.reduce(function(s, x) { return s + (x.entry.costUsd || 0); }, 0);
-      var isCollapsible = turnGroup.length > 3;
-      var isExpanded = !isCollapsible || turnCallsExpanded;
-      var arrow = isExpanded ? '\u25BE' : '\u25B8';
-      html += '<div class="turn-detail-header"' + (isCollapsible ? ' data-toggle-calls style="cursor:pointer;"' : '') + '>';
-      if (isCollapsible) html += '<span style="color:var(--text-muted);margin-right:4px;">' + arrow + '</span>';
-      html += turnGroup.length + ' API call' + (turnGroup.length !== 1 ? 's' : '');
-      if (subCount > 0) html += ' <span style="color:var(--text-muted);">(' + subCount + ' sub)</span>';
-      html += '<span style="margin-left:auto;font-family:var(--font-mono);color:var(--text-dim);">' + fmtK(totalCallTok) + ' tok / ' + fmtCost(totalCallCost) + '</span>';
-      html += '</div>';
-      if (isExpanded) {
-        turnGroup.forEach(function(item) {
-          var e = item.entry;
-          var isMain = item.isMain;
-          var sm = shortModel(e.contextInfo.model);
-          var summary = extractCallSummary(e) || e.agentLabel || (isMain ? 'Main call' : 'Subagent call');
-          var desc = esc(summary);
-          html += '<div class="call-row' + (isMain ? ' main-call' : '') + '">';
-          html += '<span class="call-model ' + modelClass(e.contextInfo.model) + '">' + esc(sm) + '</span>';
-          html += '<span class="call-desc' + (isMain ? ' main' : '') + '">' + desc + '</span>';
-          html += '<span class="call-tok">' + fmtK(e.contextInfo.totalTokens) + ' tok</span>';
-          html += '<span class="call-cost">' + fmtCost(e.costUsd) + '</span>';
-          html += '</div>';
-          if (turnGroup.length > 1) {
-            var inputTools = extractInputTools(e);
-            if (inputTools && inputTools.length > 0) {
-              html += '<div class="call-tools">\u2190 ' + esc(inputTools.join(', ')) + '</div>';
-            }
-          }
-        });
-      }
-      html += renderMessageCategories(entry);
-    } else {
-      html += renderContextDiff(entry, entries, classified, turnNum);
-    }
-    html += '</div></div>';
-    return html;
-  }
-  // --- Message Categories ---
-  function renderMessageCategories(entry) {
-    var ci = entry.contextInfo;
-    var msgs = ci.messages || [];
-    if (msgs.length === 0) return '';
-    var msgTokens = msgs.reduce(function(s, m) { return s + (m.tokens || 0); }, 0);
-    // Build tool_use_id -> tool name map for correlating results to their tools
-    var toolNameMap = {};
-    msgs.forEach(function(m) {
-      if (m.contentBlocks) {
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_use' && b.id && b.name) toolNameMap[b.id] = b.name;
-        });
-      }
-    });
-    var html = '<div class="msg-section">';
-    html += '<div class="msg-section-title"><span>' + msgs.length + ' messages</span><span>' + fmtK(msgTokens) + ' tok</span></div>';
-    var categories = {};
-    var catOrder = ['tool_results', 'system_injections', 'tool_calls', 'thinking', 'assistant_text', 'user_text'];
-    msgs.forEach(function(msg, i) {
-      var cat = classifyMessageRole(msg);
-      if (!categories[cat]) categories[cat] = { items: [], tokens: 0 };
-      categories[cat].items.push({ msg: msg, idx: i });
-      categories[cat].tokens += msg.tokens || 0;
-    });
-    for (var cat in categories) {
-      if (catOrder.indexOf(cat) === -1) catOrder.push(cat);
-    }
-    catOrder.forEach(function(cat) {
-      var data = categories[cat];
-      if (!data) return;
-      var meta = CATEGORY_META[cat] || { label: cat, color: '#4b5563' };
-      var pct = msgTokens > 0 ? Math.round(data.tokens / msgTokens * 100) : 0;
-      var catId = 'msgcat-' + cat;
-      var isExpanded = expandedCategories.has(catId);
-      var arrow = isExpanded ? '\u25BE' : '\u25B8';
-      html += '<div class="msg-category">';
-      html += '<div class="msg-cat-header" data-cat="' + catId + '">';
-      html += '<span style="color:var(--text-muted);">' + arrow + '</span>';
-      html += '<span class="msg-cat-dot" style="background:' + meta.color + ';"></span>';
-      html += '<span class="msg-cat-name" style="color:' + catTextColor(cat) + ';">' + esc(meta.label) + '</span>';
-      html += '<span class="msg-cat-stats">' + data.items.length + ' / ' + fmtK(data.tokens) + ' (' + pct + '%)</span>';
-      html += '<div class="msg-cat-bar-wrap"><div class="msg-cat-bar" style="width:' + pct + '%;background:' + meta.color + ';"></div></div>';
-      html += '</div>';
-      html += '<div class="msg-items' + (isExpanded ? ' expanded' : '') + '" id="' + catId + '">';
-      data.items.forEach(function(item) {
-        var msg = item.msg;
-        var preview = extractPreview(msg, toolNameMap);
-        var isLarge = (msg.tokens || 0) > 1000;
-        html += '<div class="msg-line">';
-        html += '<span class="msg-line-icon">' + catIcon(cat) + '</span>';
-        html += '<span class="msg-line-text">' + esc(preview) + '</span>';
-        html += '<span class="msg-line-tok' + (isLarge ? ' large' : '') + '">' + fmtK(msg.tokens || 0) + '</span>';
-        html += '</div>';
-      });
-      html += '</div>';
-      html += '</div>';
-    });
-    html += '</div>';
-    return html;
-  }
-  function classifyMessageRole(msg) {
-    var role = msg.role || 'user';
-    var content = msg.content || '';
-    var blocks = msg.contentBlocks;
-    if (blocks && Array.isArray(blocks)) {
-      var hasToolUse = blocks.some(function(b) { return b.type === 'tool_use'; });
-      var hasToolResult = blocks.some(function(b) { return b.type === 'tool_result'; });
-      var hasThinking = blocks.some(function(b) { return b.type === 'thinking'; });
-      if (hasToolResult) return 'tool_results';
-      if (hasToolUse) return 'tool_calls';
-      if (hasThinking) return 'thinking';
-    }
-    if (typeof content === 'string' && content.includes('<system-reminder>')) return 'system_injections';
-    if (role === 'assistant') return 'assistant_text';
-    if (role === 'user') return 'user_text';
-    return 'other';
-  }
-  function extractPreview(msg, toolNameMap) {
-    var content = msg.content || '';
-    var blocks = msg.contentBlocks;
-    if (blocks && Array.isArray(blocks)) {
-      for (var i = 0; i < blocks.length; i++) {
-        var b = blocks[i];
-        if (b.type === 'tool_use') return (b.name || 'tool') + '(' + (b.input ? JSON.stringify(b.input).slice(0, 60) : '') + ')';
-        if (b.type === 'tool_result') {
-          var toolName = (toolNameMap && b.tool_use_id) ? toolNameMap[b.tool_use_id] : null;
-          var rc = typeof b.content === 'string' ? b.content : JSON.stringify(b.content || '');
-          var prefix = toolName ? toolName + ': ' : '';
-          return prefix + rc.slice(0, 80 - prefix.length);
-        }
-        if (b.type === 'thinking') return (b.thinking || b.text || '').slice(0, 80);
-        if (b.type === 'text' || b.type === 'input_text') return (b.text || '').slice(0, 80);
-      }
-    }
-    if (content.charAt(0) === '[') {
-      try {
-        var parsed = JSON.parse(content);
-        if (Array.isArray(parsed) && parsed[0]) {
-          var first = parsed[0];
-          if (first.type === 'tool_use') return (first.name || 'tool') + '(...)';
-          if (first.type === 'tool_result') return String(first.content || '').slice(0, 80);
-          if (first.text) return first.text.slice(0, 80);
-        }
-      } catch(e) {}
-    }
-    return content.slice(0, 80);
-  }
-  function catTextColor(cat) {
-    var colors = {
-      tool_results: '#10b981', system_injections: '#818cf8', tool_calls: '#f472b6',
-      thinking: '#a78bfa', assistant_text: '#f59e0b', user_text: '#10b981',
-      images: '#9ca3af', other: '#9ca3af',
-    };
-    return colors[cat] || '#888';
-  }
-  function catIcon(cat) {
-    var icons = {
-      tool_results: '\u25A0',
-      system_injections: '\u25C6',
-      tool_calls: '\u25B6',
-      thinking: '\u25CB',
-      assistant_text: '\u25B7',
-      user_text: '\u25CF',
-    };
-    return icons[cat] || '\u25AA';
-  }
-  function extractCallSummary(entry) {
-    var msgs = (entry.contextInfo && entry.contextInfo.messages) || [];
-    // 1. Anthropic format: scan backward for assistant message with tool_use blocks
-    for (var i = msgs.length - 1; i >= 0; i--) {
-      var m = msgs[i];
-      if (m.role === 'assistant' && m.contentBlocks) {
-        var names = [];
-        var seen = {};
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_use' && b.name && !seen[b.name]) {
-            seen[b.name] = true;
-            names.push(b.name);
-          }
-        });
-        if (names.length > 0) {
-          if (names.length <= 4) return names.join(', ');
-          return names.slice(0, 3).join(', ') + ' +' + (names.length - 3);
-        }
-      }
-    }
-    // 2. OpenAI format: extract function/tool names from JSON content via regex (avoids parsing huge payloads)
-    var fnNames = [];
-    var fnSeen = {};
-    for (var fi = msgs.length - 1; fi >= 0; fi--) {
-      var fc = msgs[fi].content || '';
-      if (typeof fc === 'string' && fc.length > 5 && fc.indexOf('"name"') !== -1 && (fc.indexOf('"function_call"') !== -1 || fc.indexOf('"custom_tool_call"') !== -1) && fc.indexOf('"function_call_output"') === -1) {
-        var nameMatch = fc.match(/"name"\s*:\s*"([^"]+)"/);
-        if (nameMatch && !fnSeen[nameMatch[1]]) { fnSeen[nameMatch[1]] = true; fnNames.push(nameMatch[1]); }
-      }
-      if (fnNames.length >= 4) break;
-    }
-    if (fnNames.length > 0) {
-      if (fnNames.length <= 4) return fnNames.join(', ');
-      return fnNames.slice(0, 3).join(', ') + ' +' + (fnNames.length - 3);
-    }
-    // 3. Fallback: last readable assistant text (skip JSON)
-    for (var ai = msgs.length - 1; ai >= 0; ai--) {
-      if (msgs[ai].role === 'assistant') {
-        var ac = msgs[ai].content || '';
-        if (msgs[ai].contentBlocks) {
-          for (var ak = 0; ak < msgs[ai].contentBlocks.length; ak++) {
-            var ab = msgs[ai].contentBlocks[ak];
-            if ((ab.type === 'text' || ab.type === 'input_text') && ab.text) { ac = ab.text; break; }
-          }
-        }
-        if (typeof ac === 'string' && ac.length > 0 && ac.charAt(0) !== '{' && ac.charAt(0) !== '[' && ac.charAt(0) !== '<') {
-          return ac.slice(0, 50);
-        }
-      }
-    }
-    // 4. Fallback: last user text that isn't JSON tool output
-    for (var j = msgs.length - 1; j >= 0; j--) {
-      if (msgs[j].role === 'user') {
-        var content = msgs[j].content || '';
-        if (msgs[j].contentBlocks) {
-          for (var k = 0; k < msgs[j].contentBlocks.length; k++) {
-            var b = msgs[j].contentBlocks[k];
-            if ((b.type === 'text' || b.type === 'input_text') && b.text) {
-              content = b.text;
-              break;
-            }
-          }
-        }
-        // Try to extract text from OpenAI input_text array format
-        if (typeof content === 'string' && content.charAt(0) === '[' && content.indexOf('input_text') !== -1) {
-          var itMatch = content.match(/"text"\s*:\s*"([^"]{1,80})/);
-          if (itMatch) {
-            var itText = itMatch[1];
-            if (!itText.startsWith('#') && !itText.startsWith('<environment')) {
-              return itText.slice(0, 50);
-            }
-          }
-          continue;
-        }
-        if (typeof content === 'string' && content.length > 0 && content.charAt(0) !== '{' && content.charAt(0) !== '[' && content.charAt(0) !== '<') {
-          return content.slice(0, 50);
-        }
-      }
-    }
-    return '';
-  }
-  function extractInputTools(entry) {
-    var msgs = (entry.contextInfo && entry.contextInfo.messages) || [];
-    // Build name map from all tool_use blocks
-    var nameMap = {};
-    msgs.forEach(function(m) {
-      if (m.contentBlocks) {
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_use' && b.id && b.name) nameMap[b.id] = b.name;
-        });
-      }
-    });
-    // Find last user message with tool_result blocks
-    for (var i = msgs.length - 1; i >= 0; i--) {
-      var m = msgs[i];
-      if (m.role === 'user' && m.contentBlocks) {
-        var tools = [];
-        var seen = {};
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_result' && b.tool_use_id) {
-            var name = nameMap[b.tool_use_id] || b.tool_use_id;
-            if (!seen[name]) { seen[name] = true; tools.push(name); }
-          }
-        });
-        if (tools.length > 0) return tools;
-      }
-    }
-    return null;
-  }
-  // --- Context Diff ---
-  function renderContextDiff(entry, entries, classified, turnNum) {
-    var idx = entries.indexOf(entry);
-    var prevEntry = null;
-    for (var i = idx - 1; i >= 0; i--) {
-      if (classified[i].isMain) { prevEntry = entries[i]; break; }
-    }
-    if (!prevEntry) {
-      return '<div style="font-family:var(--font-mono);color:var(--text-muted);font-size:11px;">First turn -- no previous context to diff.</div>';
-    }
-    var prevComp = prevEntry.composition || [];
-    var currComp = entry.composition || [];
-    var prevTotal = prevComp.reduce(function(s, c) { return s + c.tokens; }, 0);
-    var currTotal = currComp.reduce(function(s, c) { return s + c.tokens; }, 0);
-    var delta = currTotal - prevTotal;
-    var deltaSign = delta >= 0 ? '+' : '';
-    var html = '<div class="diff-header">';
-    html += '<span>Turn ' + (turnNum - 1) + ' \u2192 ' + turnNum + '</span>';
-    html += '<span style="color:' + (delta >= 0 ? 'var(--accent-green)' : 'var(--accent-red)') + ';">' + deltaSign + fmtK(delta) + ' tok</span>';
-    html += '</div>';
-    var allCats = {};
-    prevComp.forEach(function(c) { allCats[c.category] = true; });
-    currComp.forEach(function(c) { allCats[c.category] = true; });
-    for (var cat in allCats) {
-      var prev = prevComp.find(function(c) { return c.category === cat; });
-      var curr = currComp.find(function(c) { return c.category === cat; });
-      var prevTok = prev ? prev.tokens : 0;
-      var currTok = curr ? curr.tokens : 0;
-      var d = currTok - prevTok;
-      var meta = CATEGORY_META[cat] || { label: cat };
-      if (d === 0) {
-        html += '<div class="diff-line diff-same">  ' + esc(meta.label) + ': ' + fmtK(currTok) + ' (unchanged)</div>';
-      } else if (prevTok === 0) {
-        html += '<div class="diff-line diff-add">+ ' + esc(meta.label) + ': ' + fmtK(currTok) + ' (new)</div>';
-      } else if (currTok === 0) {
-        html += '<div class="diff-line diff-remove">- ' + esc(meta.label) + ': ' + fmtK(prevTok) + ' (removed)</div>';
-      } else if (d > 0) {
-        html += '<div class="diff-line diff-add">+ ' + esc(meta.label) + ': ' + fmtK(prevTok) + ' \u2192 ' + fmtK(currTok) + ' (+' + fmtK(d) + ')</div>';
-      } else {
-        html += '<div class="diff-line diff-remove">- ' + esc(meta.label) + ': ' + fmtK(prevTok) + ' \u2192 ' + fmtK(currTok) + ' (' + fmtK(d) + ')</div>';
-      }
-    }
-    return html;
-  }
-  // --- Recommendations ---
-  function renderRecommendations(entry, entries, classified) {
-    var recs = [];
-    var ci = entry.contextInfo;
-    var comp = entry.composition || [];
-    var totalTok = comp.reduce(function(s, c) { return s + c.tokens; }, 0);
-    // Build tool name map for findings
-    var findingsToolNameMap = {};
-    (ci.messages || []).forEach(function(m) {
-      if (m.contentBlocks) {
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_use' && b.id && b.name) findingsToolNameMap[b.id] = b.name;
-        });
-      }
-    });
-    var toolResults = comp.find(function(c) { return c.category === 'tool_results'; });
-    if (toolResults && totalTok > 0 && toolResults.pct > 25) {
-      var largestResult = 0;
-      var largestToolName = '';
-      (ci.messages || []).forEach(function(m) {
-        if (classifyMessageRole(m) === 'tool_results' && m.tokens > largestResult) {
-          largestResult = m.tokens;
-          // Find the tool name from contentBlocks
-          if (m.contentBlocks) {
-            for (var bi = 0; bi < m.contentBlocks.length; bi++) {
-              var b = m.contentBlocks[bi];
-              if (b.type === 'tool_result' && b.tool_use_id && findingsToolNameMap[b.tool_use_id]) {
-                largestToolName = findingsToolNameMap[b.tool_use_id];
-                break;
-              }
-            }
-          }
-        }
-      });
-      if (largestResult > 2000) {
-        var lrPct = Math.round(largestResult / totalTok * 100);
-        var lrTitle = 'Large tool result' + (largestToolName ? ': ' + largestToolName : '') + ' (' + fmtK(largestResult) + ' tokens, ' + lrPct + '% of context)';
-        recs.push({
-          severity: 'high',
-          title: lrTitle,
-          detail: 'This single result reduces space for conversation history and is re-sent every turn. Consider truncating output or using summary flags.',
-          impact: fmtK(largestResult) + ' tok',
-        });
-      }
-    }
-    var toolDefs = comp.find(function(c) { return c.category === 'tool_definitions'; });
-    if (toolDefs && toolDefs.pct > 30) {
-      var usedTools = {};
-      entries.forEach(function(e) {
-        (e.contextInfo.messages || []).forEach(function(m) {
-          if (m.contentBlocks) {
-            m.contentBlocks.forEach(function(b) {
-              if (b.type === 'tool_use' && b.name) usedTools[b.name] = true;
-            });
-          }
-        });
-      });
-      var usedCount = Object.keys(usedTools).length;
-      var totalTools = ci.tools ? ci.tools.length : 0;
-      // Get all defined tool names
-      var allDefinedNames = [];
-      if (ci.tools) {
-        ci.tools.forEach(function(t) {
-          var name = t.name || (t.function && t.function.name);
-          if (name) allDefinedNames.push(name);
-        });
-      }
-      var unusedNames = allDefinedNames.filter(function(n) { return !usedTools[n]; });
-      if (totalTools > usedCount + 3) {
-        var unusedPreview = unusedNames.slice(0, 5).join(', ');
-        if (unusedNames.length > 5) unusedPreview += ' +' + (unusedNames.length - 5) + ' more';
-        var wastedTok = Math.round(toolDefs.tokens * unusedNames.length / totalTools);
-        recs.push({
-          severity: 'high',
-          title: usedCount + '/' + totalTools + ' tools used, ' + unusedNames.length + ' idle',
-          detail: 'Unused: ' + unusedPreview + '. Definitions cost ~' + fmtK(wastedTok) + ' tokens \u2014 re-sent every turn. Remove unused tools to free context.',
-          impact: '~' + fmtK(wastedTok) + ' tok',
-        });
-      }
-    }
-    if (toolResults && toolResults.pct > 60) {
-      var userText = comp.find(function(c) { return c.category === 'user_text'; });
-      var userPct = userText ? userText.pct : 0;
-      // Build per-tool token breakdown
-      var perToolTokens = {};
-      (ci.messages || []).forEach(function(m) {
-        if (classifyMessageRole(m) === 'tool_results' && m.contentBlocks) {
-          m.contentBlocks.forEach(function(b) {
-            if (b.type === 'tool_result' && b.tool_use_id) {
-              var tname = findingsToolNameMap[b.tool_use_id] || 'unknown';
-              perToolTokens[tname] = (perToolTokens[tname] || 0) + (m.tokens || 0);
-            }
-          });
-        }
-      });
-      var topTools = Object.keys(perToolTokens).map(function(n) {
-        return { name: n, tokens: perToolTokens[n] };
-      }).sort(function(a, b) { return b.tokens - a.tokens; }).slice(0, 3);
-      var topToolsStr = topTools.map(function(t) { return t.name + ' (' + fmtK(t.tokens) + ')'; }).join(', ');
-      recs.push({
-        severity: 'med',
-        title: 'Tool results dominate: ' + toolResults.pct + '% of context',
-        detail: 'Top tools: ' + topToolsStr + '. User text is only ' + userPct + '%. Large results crowd out conversation history.',
-        impact: 'Structural',
-      });
-    }
-    var utilPct = entry.contextLimit > 0 ? Math.round(ci.totalTokens / entry.contextLimit * 100) : 0;
-    if (utilPct > 80) {
-      recs.push({
-        severity: 'high',
-        title: 'Context utilization critical: ' + utilPct + '%',
-        detail: fmtK(ci.totalTokens) + ' of ' + fmtK(entry.contextLimit) + ' tokens. Overflow risk imminent \u2014 model will drop or summarize older messages.',
-        impact: 'Critical',
-      });
-    } else if (utilPct > 60) {
-      recs.push({
-        severity: 'med',
-        title: 'Context utilization high: ' + utilPct + '%',
-        detail: fmtK(ci.totalTokens) + ' of ' + fmtK(entry.contextLimit) + ' tokens used.',
-        impact: 'Monitor',
-      });
-    } else {
-      recs.push({
-        severity: 'low',
-        title: 'Context utilization healthy: ' + utilPct + '%',
-        detail: fmtK(ci.totalTokens) + ' of ' + fmtK(entry.contextLimit) + ' tokens. Safe range.',
-        impact: 'OK',
-      });
-    }
-    var idx = entries.indexOf(entry);
-    if (idx > 0) {
-      var prevIdx = -1;
-      for (var i = idx - 1; i >= 0; i--) {
-        if (classified[i].isMain) { prevIdx = i; break; }
-      }
-      if (prevIdx >= 0) {
-        var prevTok = entries[prevIdx].contextInfo.totalTokens;
-        if (ci.totalTokens < prevTok * 0.7) {
-          recs.push({
-            severity: 'med',
-            title: 'Compaction detected',
-            detail: 'Tokens dropped ' + fmtK(prevTok) + ' \u2192 ' + fmtK(ci.totalTokens) + '. Context was summarized or truncated \u2014 older details may be lost.',
-            impact: '-' + fmtK(prevTok - ci.totalTokens) + ' tok',
-          });
-        }
-      }
-    }
-    var sysInj = comp.find(function(c) { return c.category === 'system_injections'; });
-    if (sysInj && sysInj.pct > 5) {
-      recs.push({
-        severity: 'med',
-        title: 'System injections: ' + sysInj.pct + '% of context',
-        detail: fmtK(sysInj.tokens) + ' tokens of system-reminder blocks injected into messages. These are re-sent every turn, reducing space for actual conversation.',
-        impact: fmtK(sysInj.tokens) + ' tok',
-      });
-    }
-    if (recs.length === 0) return '';
-    var html = '<div class="panel">';
-    html += '<div class="panel-header">Findings <span style="font-size:10px;color:var(--text-dim);font-weight:400;">' + recs.length + '</span></div>';
-    html += '<div class="panel-body">';
-    recs.forEach(function(r) {
-      html += '<div class="rec-item">';
-      html += '<span class="rec-severity ' + r.severity + '"></span>';
-      html += '<div class="rec-body">';
-      html += '<div class="rec-title">' + esc(r.title) + '</div>';
-      html += '<div class="rec-detail">' + esc(r.detail) + '</div>';
-      html += '</div>';
-      html += '<span class="rec-impact ' + r.severity + '">' + esc(r.impact) + '</span>';
-      html += '</div>';
-    });
-    html += '</div></div>';
-    return html;
-  }
-  // --- Event handlers for main panel ---
-  function attachMainHandlers() {
-    document.querySelectorAll('[data-treemap]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        treemapMode = el.getAttribute('data-treemap');
-        renderMain();
-      });
-    });
-    document.querySelectorAll('[data-timeline]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        timelineMode = el.getAttribute('data-timeline');
-        renderMain();
-      });
-    });
-    document.querySelectorAll('[data-detail]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        turnDetailMode = el.getAttribute('data-detail');
-        renderMain();
-      });
-    });
-    document.querySelectorAll('[data-cat]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        var catId = el.getAttribute('data-cat');
-        if (expandedCategories.has(catId)) expandedCategories.delete(catId);
-        else expandedCategories.add(catId);
-        renderMain();
-      });
-    });
-    document.querySelectorAll('[data-agent-group]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        var groupId = el.getAttribute('data-agent-group');
-        if (expandedAgentGroups.has(groupId)) expandedAgentGroups.delete(groupId);
-        else expandedAgentGroups.add(groupId);
-        renderMain();
-      });
-    });
-    document.querySelectorAll('[data-toggle-calls]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        turnCallsExpanded = !turnCallsExpanded;
-        renderMain();
-      });
-    });
-    // Treemap block click → navigate to matching category
-    document.querySelectorAll('.treemap-block[data-category]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        var cat = el.getAttribute('data-category');
-        if (!cat) return;
-        var catId = 'msgcat-' + cat;
-        // Switch to calls view if needed
-        if (turnDetailMode !== 'calls') {
-          turnDetailMode = 'calls';
-          expandedCategories.add(catId);
-          renderMain();
-          return;
-        }
-        // Expand the category
-        expandedCategories.add(catId);
-        renderMain();
-        // Scroll to and flash-highlight the category
-        setTimeout(function() {
-          var target = document.getElementById(catId);
-          if (!target) return;
-          var catEl = target.closest('.msg-category');
-          if (catEl) {
-            catEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            catEl.classList.remove('flash-highlight');
-            void catEl.offsetWidth; // reflow to re-trigger animation
-            catEl.classList.add('flash-highlight');
-          }
-        }, 50);
-      });
-    });
-    document.querySelectorAll('[data-tl-turn]').forEach(function(el) {
-      el.addEventListener('click', function() {
-        var idx = parseInt(el.getAttribute('data-tl-turn'), 10);
-        if (!isNaN(idx)) {
-          selectedTurnIndex = idx;
-          renderSidebar();
-          renderMain();
-        }
-      });
-    });
-    // Auto-scroll timeline to active bar
-    var activeBar = document.querySelector('.tl-bar.active');
-    if (activeBar) {
-      var wrap = activeBar.closest('.timeline-wrap');
-      if (wrap && wrap.scrollWidth > wrap.clientWidth) {
-        var barLeft = activeBar.offsetLeft;
-        var wrapW = wrap.clientWidth;
-        if (barLeft < wrap.scrollLeft || barLeft > wrap.scrollLeft + wrapW - 20) {
-          wrap.scrollLeft = Math.max(0, barLeft - wrapW / 2);
-        }
-      }
-    }
-  }
-  // --- Source filter ---
-  document.getElementById('hdr-source-filter').addEventListener('change', function() {
-    sourceFilter = this.value;
-    if (selectedSessionId) {
-      var session = getSelectedSession();
-      if (!session) {
-        selectedSessionId = null;
-        selectedTurnIndex = -1;
-      }
-    }
-    renderSidebar();
-    renderMain();
-  });
-  // --- Export ---
-  document.getElementById('export-btn').addEventListener('click', function() {
-    var url = '/api/export/lhar.json';
-    if (selectedSessionId) url += '?conversation=' + encodeURIComponent(selectedSessionId);
-    fetch(url).then(function(r) { return r.blob(); }).then(function(blob) {
-      var a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = 'context-lens-export.lhar.json';
-      a.click();
-      URL.revokeObjectURL(a.href);
-    });
-  });
-  // --- Reset ---
-  document.getElementById('reset-btn').addEventListener('click', function() {
-    if (!confirm('Delete all captured data?')) return;
-    fetch('/api/reset', { method: 'POST' }).then(function() {
-      selectedSessionId = null;
-      selectedTurnIndex = -1;
-      expandedSessions.clear();
-      currentRevision = -1;
-      fetchAndRender();
-    });
-  });
-  // --- Polling ---
-  function fetchAndRender() {
-    // Flash poll indicator
-    var indicator = document.getElementById('poll-indicator');
-    if (indicator) { indicator.classList.add('active'); setTimeout(function() { indicator.classList.remove('active'); }, 300); }
-    fetch('/api/requests').then(function(r) { return r.json(); }).then(function(data) {
-      var changed = data.revision !== currentRevision;
-      currentRevision = data.revision;
-      currentData = data;
-      if (changed) {
-        if (!selectedSessionId) {
-          var convos = getConversations();
-          if (convos.length > 0) {
-            selectedSessionId = convos[0].id;
-            selectedTurnIndex = -1;
-            expandedSessions.add(convos[0].id);
-          }
-        }
-        renderHeader();
-        renderSidebar();
-        renderMain();
-      }
-    }).catch(function(err) {
-      console.error('Fetch error:', err);
-    });
-  }
-  // =============================
-  // Detail Panel
-  // =============================
-  var detailOpen = false;
-  var detailTab = 'rendered'; // 'rendered' | 'raw'
-  var detailMsg = null;       // current ParsedMessage
-  var detailMsgList = [];     // all messages in current entry
-  var detailMsgIndex = -1;    // index into detailMsgList
-  var detailEntry = null;     // the CapturedEntry for metadata
-  var detailToolNameMap = {}; // tool_use_id -> name
-  var detailMaxLines = 500;   // truncation threshold
-  var detailMaxChars = 50000; // char cap for performance
-  var detailShowAll = false;  // show full content
-  function openDetail(msg, msgList, msgIndex, entry, toolMap) {
-    detailMsg = msg;
-    detailMsgList = msgList;
-    detailMsgIndex = msgIndex;
-    detailEntry = entry;
-    detailToolNameMap = toolMap || {};
-    detailTab = 'rendered';
-    detailShowAll = false;
-    detailOpen = true;
-    document.getElementById('detail-overlay').classList.add('open');
-    renderDetail();
-    // Mark selected msg-line
-    document.querySelectorAll('.msg-line').forEach(function(el, i) {
-      el.classList.toggle('selected', i === msgIndex);
-    });
-  }
-  function closeDetail() {
-    detailOpen = false;
-    document.getElementById('detail-overlay').classList.remove('open');
-    document.querySelectorAll('.msg-line.selected').forEach(function(el) { el.classList.remove('selected'); });
-  }
-  function renderDetail() {
-    if (!detailMsg) return;
-    var msg = detailMsg;
-    var entry = detailEntry;
-    // Title
-    var cat = classifyMessageRole(msg);
-    var meta = CATEGORY_META[cat] || { label: cat, color: '#4b5563' };
-    var titleText = meta.label;
-    // Enrich title for tool_use/tool_result
-    if (msg.contentBlocks) {
-      for (var i = 0; i < msg.contentBlocks.length; i++) {
-        var b = msg.contentBlocks[i];
-        if (b.type === 'tool_use') { titleText = 'Tool Call — ' + (b.name || 'unknown'); break; }
-        if (b.type === 'tool_result') {
-          var tn = (b.tool_use_id && detailToolNameMap[b.tool_use_id]) || null;
-          titleText = 'Tool Result' + (tn ? ' — ' + tn : '');
-          break;
-        }
-        if (b.type === 'thinking') { titleText = 'Thinking'; break; }
-      }
-    }
-    document.getElementById('detail-title').textContent = titleText;
-    document.getElementById('detail-title').style.color = catTextColor(cat);
-    // Subtitle
-    var tokPct = entry && entry.contextInfo.totalTokens > 0
-      ? ((msg.tokens || 0) / entry.contextInfo.totalTokens * 100).toFixed(1)
-      : '0';
-    var subParts = [
-      '<span>Role: <b style="color:var(--text-secondary);">' + esc(msg.role) + '</b></span>',
-      '<span>' + fmtK(msg.tokens || 0) + ' tokens</span>',
-      '<span>' + tokPct + '% of context</span>',
-    ];
-    if (detailMsgList.length > 0) {
-      subParts.push('<span>Message ' + (detailMsgIndex + 1) + ' of ' + detailMsgList.length + '</span>');
-    }
-    document.getElementById('detail-subtitle').innerHTML = subParts.join('');
-    // Tabs
-    document.querySelectorAll('#detail-tabs .detail-tab').forEach(function(el) {
-      el.classList.toggle('active', el.getAttribute('data-dtab') === detailTab);
-    });
-    // Nav buttons
-    document.getElementById('detail-prev').disabled = detailMsgIndex <= 0;
-    document.getElementById('detail-next').disabled = detailMsgIndex >= detailMsgList.length - 1;
-    // Content
-    var contentEl = document.getElementById('detail-content');
-    if (detailTab === 'rendered') {
-      contentEl.innerHTML = renderDetailRendered(msg);
-    } else {
-      contentEl.innerHTML = '<pre class="detail-pre">' + highlightJSON(JSON.stringify(msgToRawObject(msg), null, 2)) + '</pre>';
-    }
-    contentEl.scrollTop = 0;
-    // Attach "show more" handler
-    var showMoreEl = contentEl.querySelector('.detail-truncated');
-    if (showMoreEl) {
-      showMoreEl.addEventListener('click', function() {
-        detailShowAll = true;
-        renderDetail();
-      });
-    }
-    // Metadata
-    renderDetailMeta(msg, entry);
-  }
-  function renderMinimalMarkdown(text) {
-    if (!text) return '';
-    var lines = text.split('\n');
-    var out = [];
-    var inCodeBlock = false;
-    var codeLines = [];
-    for (var i = 0; i < lines.length; i++) {
-      var line = lines[i];
-      // Code block toggle
-      if (line.trimStart().startsWith('```')) {
-        if (inCodeBlock) {
-          out.push('<pre><code>' + escPre(codeLines.join('\n')) + '</code></pre>');
-          codeLines = [];
-          inCodeBlock = false;
-        } else {
-          inCodeBlock = true;
-        }
-        continue;
-      }
-      if (inCodeBlock) { codeLines.push(line); continue; }
-      // Headings
-      var hMatch = line.match(/^(#{1,3})\s+(.+)$/);
-      if (hMatch) {
-        var level = hMatch[1].length;
-        out.push('<h' + level + '>' + inlineMarkdown(hMatch[2]) + '</h' + level + '>');
-        continue;
-      }
-      // List items
-      if (/^\s*[-*]\s+/.test(line)) {
-        // Collect consecutive list items
-        var items = [];
-        while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
-          items.push('<li>' + inlineMarkdown(lines[i].replace(/^\s*[-*]\s+/, '')) + '</li>');
-          i++;
-        }
-        i--; // back up one since the for loop will increment
-        out.push('<ul>' + items.join('') + '</ul>');
-        continue;
-      }
-      // Empty line
-      if (line.trim() === '') { continue; }
-      // Regular paragraph
-      out.push('<p>' + inlineMarkdown(line) + '</p>');
-    }
-    // Close unclosed code block
-    if (inCodeBlock && codeLines.length > 0) {
-      out.push('<pre><code>' + escPre(codeLines.join('\n')) + '</code></pre>');
-    }
-    return '<div class="md-rendered">' + out.join('') + '</div>';
-  }
-  function inlineMarkdown(text) {
-    var s = esc(text);
-    // Inline code
-    s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
-    // Bold
-    s = s.replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
-    return s;
-  }
-  function renderToolUseCompact(name, input) {
-    var html = '<div class="detail-block-label tool-use">tool_use: ' + esc(name || '?') + '</div>';
-    if (!input || typeof input !== 'object') {
-      html += '<pre class="detail-pre">' + highlightJSON(JSON.stringify(input || {}, null, 2)) + '</pre>';
-      return html;
-    }
-    var keys = Object.keys(input);
-    if (keys.length === 0) {
-      html += '<pre class="detail-pre" style="color:var(--text-muted);">{}</pre>';
-      return html;
-    }
-    html += '<ul class="tool-params">';
-    keys.forEach(function(k) {
-      var val = input[k];
-      var valStr;
-      if (typeof val === 'string') {
-        valStr = val.length > 200 ? escPre(val.slice(0, 200)) + '\u2026' : escPre(val);
-      } else {
-        var js = JSON.stringify(val, null, 2);
-        valStr = js.length > 200 ? escPre(js.slice(0, 200)) + '\u2026' : escPre(js);
-      }
-      html += '<li><span class="tool-param-key">' + esc(k) + '</span><span class="tool-param-val">' + valStr + '</span></li>';
-    });
-    html += '</ul>';
-    return html;
-  }
-  function renderDetailRendered(msg) {
-    var blocks = msg.contentBlocks;
-    if (blocks && Array.isArray(blocks) && blocks.length > 0) {
-      var parts = [];
-      blocks.forEach(function(b, idx) {
-        if (idx > 0) parts.push('<hr class="detail-block-sep">');
-        if (b.type === 'tool_use') {
-          parts.push(renderToolUseCompact(b.name, b.input));
-        } else if (b.type === 'tool_result') {
-          var tn = (b.tool_use_id && detailToolNameMap[b.tool_use_id]) || null;
-          parts.push('<div class="detail-block-label tool-result">tool_result' + (tn ? ': ' + esc(tn) : '') + '</div>');
-          var rc = typeof b.content === 'string' ? b.content : JSON.stringify(b.content, null, 2);
-          if (!detailShowAll && rc.length > detailMaxChars) rc = rc.slice(0, detailMaxChars);
-          parts.push(renderHighlightedContent(rc));
-        } else if (b.type === 'thinking') {
-          parts.push('<div class="detail-block-label thinking">thinking</div>');
-          var thinkText = b.thinking || b.text || '';
-          if (!detailShowAll && thinkText.length > detailMaxChars) thinkText = thinkText.slice(0, detailMaxChars);
-          parts.push(renderMinimalMarkdown(thinkText));
-        } else if (b.type === 'text' || b.type === 'input_text') {
-          parts.push('<div class="detail-block-label text">' + esc(b.type) + '</div>');
-          var blockText = b.text || '';
-          if (!detailShowAll && blockText.length > detailMaxChars) blockText = blockText.slice(0, detailMaxChars);
-          parts.push(renderMinimalMarkdown(blockText));
-        } else if (b.type === 'image') {
-          parts.push('<div class="detail-block-label image">image</div>');
-          parts.push('<pre class="detail-pre" style="color:var(--text-muted);">[Image content — ' + (b.source ? 'base64 encoded' : 'reference') + ']</pre>');
-        } else {
-          parts.push('<pre class="detail-pre">' + highlightJSON(JSON.stringify(b, null, 2)) + '</pre>');
-        }
-      });
-      return parts.join('');
-    }
-    // Fallback: raw content string
-    return renderHighlightedContent(msg.content || '');
-  }
-  function renderHighlightedContent(text) {
-    if (!text) return '<pre class="detail-pre" style="color:var(--text-muted);">[empty]</pre>';
-    var fullLen = text.length;
-    var charTruncated = false;
-    if (!detailShowAll && text.length > detailMaxChars) {
-      charTruncated = true;
-      text = text.slice(0, detailMaxChars);
-    }
-    var lines = text.split('\n');
-    var lineTruncated = false;
-    if (!detailShowAll && lines.length > detailMaxLines) {
-      lineTruncated = true;
-      lines = lines.slice(0, detailMaxLines);
-    }
-    var truncated = charTruncated || lineTruncated;
-    // Detect content type — just check first char, skip JSON.parse
-    var trimmed = text.trimStart();
-    var html;
-    if (trimmed.charAt(0) === '{' || trimmed.charAt(0) === '[') {
-      html = '<pre class="detail-pre">' + highlightJSON(lines.join('\n')) + '</pre>';
-    } else if (isDiffContent(trimmed)) {
-      html = '<pre class="detail-pre">' + highlightDiff(lines) + '</pre>';
-    } else {
-      html = '<pre class="detail-pre">' + highlightAuto(lines) + '</pre>';
-    }
-    if (truncated) {
-      var info = charTruncated
-        ? '\u25BE Showing first ' + Math.round(detailMaxChars / 1000) + 'K of ' + Math.round(fullLen / 1000) + 'K chars — click to show all'
-        : '\u25BE Showing first ' + detailMaxLines + ' lines — click to show all';
-      html += '<div class="detail-truncated">' + info + '</div>';
-    }
-    return html;
-  }
-  function isDiffContent(text) {
-    return text.startsWith('diff --git') || text.startsWith('---') || text.startsWith('@@') ||
-      (text.indexOf('\n+') !== -1 && text.indexOf('\n-') !== -1 && text.indexOf('\n@@') !== -1);
-  }
-  // --- Syntax highlighting ---
-  // Escape for use inside <pre> — preserves " so JSON regexes work
-  function escPre(s) { return s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : ''; }
-  function highlightJSON(str) {
-    return escPre(str)
-      .replace(/"([^"\\]*(\\.[^"\\]*)*)"\s*:/g, '<span class="syn-key">"$1"</span>:')
-      .replace(/:\s*"([^"\\]*(\\.[^"\\]*)*)"/g, ': <span class="syn-str">"$1"</span>')
-      .replace(/:\s*(-?\d+\.?\d*([eE][+-]?\d+)?)/g, ': <span class="syn-num">$1</span>')
-      .replace(/:\s*(true|false)/g, ': <span class="syn-bool">$1</span>')
-      .replace(/:\s*(null)/g, ': <span class="syn-null">$1</span>')
-      .replace(/[{}[\]]/g, '<span class="syn-brace">$&</span>');
-  }
-  function highlightDiff(lines) {
-    return lines.map(function(line) {
-      var el = escPre(line);
-      if (line.startsWith('+++') || line.startsWith('---')) return '<span class="syn-diff-file">' + el + '</span>';
-      if (line.startsWith('@@')) return '<span class="syn-diff-hunk">' + el + '</span>';
-      if (line.startsWith('+')) return '<span class="syn-diff-add">' + el + '</span>';
-      if (line.startsWith('-')) return '<span class="syn-diff-del">' + el + '</span>';
-      if (line.startsWith('diff ')) return '<span class="syn-diff-file">' + el + '</span>';
-      return el;
-    }).join('\n');
-  }
-  function highlightAuto(lines) {
-    return lines.map(function(line) {
-      var el = escPre(line);
-      // Shell prompt detection
-      if (/^\$\s/.test(line) || /^>\s/.test(line)) return '<span class="syn-prompt">' + el + '</span>';
-      // Comments
-      if (/^\s*#/.test(line)) return '<span class="syn-comment">' + el + '</span>';
-      return el;
-    }).join('\n');
-  }
-  function msgToRawObject(msg) {
-    var obj = { role: msg.role };
-    if (msg.contentBlocks && msg.contentBlocks.length > 0) {
-      obj.content = msg.contentBlocks;
-    } else {
-      // Try to parse content if it's JSON
-      try {
-        obj.content = JSON.parse(msg.content);
-      } catch(e) {
-        obj.content = msg.content;
-      }
-    }
-    obj._tokens = msg.tokens;
-    return obj;
-  }
-  function renderDetailMeta(msg, entry) {
-    var metaEl = document.getElementById('detail-meta');
-    var pairs = [];
-    pairs.push(['Role', msg.role]);
-    pairs.push(['Tokens', fmtK(msg.tokens || 0)]);
-    if (entry) {
-      var pct = entry.contextInfo.totalTokens > 0
-        ? ((msg.tokens || 0) / entry.contextInfo.totalTokens * 100).toFixed(1) + '%'
-        : '0%';
-      pairs.push(['% of context', pct]);
-      pairs.push(['Model', entry.contextInfo.model || '?']);
-    }
-    // tool_use_id / tool name
-    if (msg.contentBlocks) {
-      msg.contentBlocks.forEach(function(b) {
-        if (b.type === 'tool_use') {
-          pairs.push(['tool_use_id', b.id || '?']);
-          pairs.push(['tool_name', b.name || '?']);
-        }
-        if (b.type === 'tool_result' && b.tool_use_id) {
-          pairs.push(['tool_use_id', b.tool_use_id]);
-          var tn = detailToolNameMap[b.tool_use_id];
-          if (tn) pairs.push(['tool_name', tn]);
-        }
-      });
-    }
-    if (entry) {
-      pairs.push(['Position', 'msg ' + (detailMsgIndex + 1) + ' of ' + detailMsgList.length]);
-    }
-    var html = '';
-    pairs.forEach(function(p) {
-      html += '<span class="detail-meta-label">' + esc(p[0]) + '</span>';
-      html += '<span class="detail-meta-val" title="' + esc(p[1]) + '">' + esc(String(p[1])) + '</span>';
-    });
-    metaEl.innerHTML = html;
-  }
-  // --- Detail panel event handlers ---
-  // Close
-  document.getElementById('detail-close').addEventListener('click', closeDetail);
-  document.getElementById('detail-backdrop').addEventListener('click', closeDetail);
-  document.addEventListener('keydown', function(e) {
-    if (!detailOpen) return;
-    if (e.key === 'Escape') { closeDetail(); e.preventDefault(); }
-    if (e.key === 'ArrowUp' || e.key === 'k') { navigateDetail(-1); e.preventDefault(); }
-    if (e.key === 'ArrowDown' || e.key === 'j') { navigateDetail(1); e.preventDefault(); }
-  });
-  // Tab switching
-  document.querySelectorAll('#detail-tabs .detail-tab').forEach(function(el) {
-    el.addEventListener('click', function() {
-      detailTab = el.getAttribute('data-dtab');
-      renderDetail();
-    });
-  });
-  // Nav
-  document.getElementById('detail-prev').addEventListener('click', function() { navigateDetail(-1); });
-  document.getElementById('detail-next').addEventListener('click', function() { navigateDetail(1); });
-  function navigateDetail(dir) {
-    var newIdx = detailMsgIndex + dir;
-    if (newIdx < 0 || newIdx >= detailMsgList.length) return;
-    detailMsgIndex = newIdx;
-    detailMsg = detailMsgList[newIdx];
-    detailShowAll = false;
-    renderDetail();
-    // Update selected line
-    document.querySelectorAll('.msg-line').forEach(function(el, i) {
-      el.classList.toggle('selected', i === newIdx);
-    });
-    // Scroll selected line into view in main panel
-    var selectedLine = document.querySelector('.msg-line.selected');
-    if (selectedLine) selectedLine.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-  }
-  // Copy
-  document.getElementById('detail-copy').addEventListener('click', function() {
-    if (!detailMsg) return;
-    var text;
-    if (detailTab === 'raw') {
-      text = JSON.stringify(msgToRawObject(detailMsg), null, 2);
-    } else {
-      // Copy rendered text content
-      text = extractFullText(detailMsg);
-    }
-    navigator.clipboard.writeText(text).then(function() {
-      var btn = document.getElementById('detail-copy');
-      btn.textContent = 'Copied!';
-      btn.classList.add('copied');
-      setTimeout(function() { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1500);
-    });
-  });
-  function extractFullText(msg) {
-    if (msg.contentBlocks && msg.contentBlocks.length > 0) {
-      return msg.contentBlocks.map(function(b) {
-        if (b.type === 'tool_use') return b.name + '(' + JSON.stringify(b.input, null, 2) + ')';
-        if (b.type === 'tool_result') return typeof b.content === 'string' ? b.content : JSON.stringify(b.content, null, 2);
-        if (b.type === 'thinking') return b.thinking || b.text || '';
-        if (b.type === 'text' || b.type === 'input_text') return b.text || '';
-        return JSON.stringify(b, null, 2);
-      }).join('\n\n');
-    }
-    return msg.content || '';
-  }
-  // Resize handle
-  (function() {
-    var handle = document.getElementById('detail-resize');
-    var panel = document.getElementById('detail-panel');
-    var dragging = false;
-    var startX, startW;
-    handle.addEventListener('mousedown', function(e) {
-      dragging = true;
-      startX = e.clientX;
-      startW = panel.offsetWidth;
-      handle.classList.add('dragging');
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-      e.preventDefault();
-    });
-    document.addEventListener('mousemove', function(e) {
-      if (!dragging) return;
-      var delta = startX - e.clientX;
-      var newW = Math.max(320, Math.min(window.innerWidth * 0.85, startW + delta));
-      panel.style.width = newW + 'px';
-    });
-    document.addEventListener('mouseup', function() {
-      if (!dragging) return;
-      dragging = false;
-      handle.classList.remove('dragging');
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    });
-  })();
-  // --- Wire up msg-line clicks in attachMainHandlers ---
-  var origAttachMainHandlers = attachMainHandlers;
-  attachMainHandlers = function() {
-    origAttachMainHandlers();
-    wireDetailClicks();
-  };
-  function wireDetailClicks() {
-    var entry = null;
-    var session = getSelectedSession();
-    if (session) entry = getSelectedEntry(session);
-    if (!entry) return;
-    var msgs = (entry.contextInfo && entry.contextInfo.messages) || [];
-    if (msgs.length === 0) return;
-    // Build tool name map
-    var toolMap = {};
-    msgs.forEach(function(m) {
-      if (m.contentBlocks) {
-        m.contentBlocks.forEach(function(b) {
-          if (b.type === 'tool_use' && b.id && b.name) toolMap[b.id] = b.name;
-        });
-      }
-    });
-    // Build flat list of messages matching visible msg-lines
-    // msg-lines are rendered by category in catOrder — we need to match them
-    var allMsgLines = document.querySelectorAll('.msg-line');
-    var flatMsgs = [];
-    // Reproduce the category ordering from renderMessageCategories
-    var categories = {};
-    var catOrder = ['tool_results', 'system_injections', 'tool_calls', 'thinking', 'assistant_text', 'user_text'];
-    msgs.forEach(function(m, i) {
-      var cat = classifyMessageRole(m);
-      if (!categories[cat]) categories[cat] = [];
-      categories[cat].push({ msg: m, origIdx: i });
-    });
-    for (var cat in categories) {
-      if (catOrder.indexOf(cat) === -1) catOrder.push(cat);
-    }
-    catOrder.forEach(function(cat) {
-      if (!categories[cat]) return;
-      categories[cat].forEach(function(item) {
-        flatMsgs.push(item.msg);
-      });
-    });
-    allMsgLines.forEach(function(el, lineIdx) {
-      if (lineIdx >= flatMsgs.length) return;
-      el.addEventListener('click', function(e) {
-        e.stopPropagation();
-        openDetail(flatMsgs[lineIdx], flatMsgs, lineIdx, entry, toolMap);
-      });
-    });
-  }
-  fetchAndRender();
-  setInterval(fetchAndRender, 2000);
-})();
-</script>
-</body>
-</html>