@tekyzinc/gsd-t 3.16.12 → 3.18.12

package/scripts/gsd-t-transcript.html

@@ -22,10 +22,30 @@
       --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
     }
     * { box-sizing: border-box; }
-    body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.55; display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.55; display: grid; grid-template-columns: 280px 1fr 320px; grid-template-rows: auto 1fr; min-height: 100vh; }
     body > header { grid-column: 1 / -1; }
-    body > aside { grid-column: 1; grid-row: 2; background: var(--bg-raised); border-right: 1px solid var(--border); padding: 12px 0; overflow-y: auto; max-height: calc(100vh - 50px); position: sticky; top: 49px; align-self: start; }
+    body > aside.left-rail { grid-column: 1; grid-row: 2; background: var(--bg-raised); border-right: 1px solid var(--border); padding: 12px 0; overflow-y: auto; max-height: calc(100vh - 50px); position: sticky; top: 49px; align-self: start; }
     body > main { grid-column: 2; grid-row: 2; }
+    /* M44 D8 — right-side spawn-plan panel (additive; does not alter main stream) */
+    body > aside.spawn-panel { grid-column: 3; grid-row: 2; background: var(--bg-raised); border-left: 1px solid var(--border); padding: 12px 14px; overflow-y: auto; max-height: calc(100vh - 50px); position: sticky; top: 49px; align-self: start; font-size: 12px; }
+    .spawn-panel h2 { margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase; color: var(--fg-xdim); letter-spacing: 0.08em; }
+    .spawn-panel section { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; background: var(--bg); }
+    .spawn-panel section.dimmed { opacity: 0.45; }
+    .spawn-panel section .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+    .spawn-panel section .sec-title { font-weight: 600; color: var(--fg); font-size: 12px; }
+    .spawn-panel section .sec-sub { color: var(--fg-xdim); font-family: var(--mono); font-size: 10px; }
+    .spawn-panel section .sec-totals { font-family: var(--mono); font-size: 10px; color: var(--fg-dim); margin-top: 2px; text-align: right; }
+    .spawn-panel .task-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; }
+    .spawn-panel .task-row .icon { flex: 0 0 14px; font-family: var(--mono); color: var(--fg-xdim); }
+    .spawn-panel .task-row.status-done .icon { color: var(--green); }
+    .spawn-panel .task-row.status-in-progress .icon { color: var(--accent); }
+    .spawn-panel .task-row .title { flex: 1; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .spawn-panel .task-row.status-done .title { color: var(--fg-dim); }
+    .spawn-panel .task-row .tokens { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--fg-xdim); text-align: right; }
+    .spawn-panel .empty { color: var(--fg-xdim); font-style: italic; padding: 4px 0; font-size: 11px; }
+    .spawn-panel .wave-group { border-top: 1px dashed var(--border); padding-top: 4px; margin-top: 4px; }
+    .spawn-panel .wave-group:first-child { border-top: none; padding-top: 0; margin-top: 0; }
+    .spawn-panel .wave-label { font-size: 10px; color: var(--fg-xdim); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; margin: 4px 0 2px 0; }
     aside h3 { margin: 0 12px 8px 12px; font-size: 11px; text-transform: uppercase; color: var(--fg-xdim); letter-spacing: 0.08em; }
     aside .tree { font-size: 13px; }
     aside .node { display: flex; align-items: center; padding: 5px 12px; cursor: pointer; gap: 6px; }
@@ -42,7 +62,31 @@
     aside .node .kill:hover:not([disabled]) { background: var(--red); color: #fff; }
     aside .node .kill[disabled] { opacity: 0.3; cursor: not-allowed; }
     aside .empty { padding: 12px; color: var(--fg-xdim); font-size: 12px; font-style: italic; }
+    /* M43 D6 — tool-cost panel */
+    aside .panel { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
+    aside .panel > summary { list-style: none; cursor: pointer; padding: 4px 12px; display: flex; align-items: center; gap: 6px; color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
+    aside .panel > summary::-webkit-details-marker { display: none; }
+    aside .panel > summary::before { content: "▶"; font-size: 8px; color: var(--fg-xdim); transition: transform 0.15s ease; }
+    aside .panel[open] > summary::before { transform: rotate(90deg); }
+    aside .panel .panel-body { padding: 6px 12px 10px 12px; }
+    aside .panel .live-badge { margin-left: auto; font-size: 9px; font-family: var(--mono); background: var(--bg-soft); color: var(--fg-xdim); border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px; }
+    aside .panel .live-badge.on { background: rgba(63, 185, 80, 0.15); color: var(--green); border-color: var(--green); }
+    aside .tool-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-family: var(--mono); font-size: 11px; }
+    aside .tool-row .tool-name { color: var(--fg); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    aside .tool-row .tool-tokens { color: var(--fg-dim); flex: 0 0 auto; }
+    aside .tool-empty { color: var(--fg-xdim); font-size: 11px; font-style: italic; }
+    aside .tool-error { color: var(--yellow); font-size: 11px; font-style: italic; }
     @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    /* 10s attention-pulse for a freshly-arrived spawn — fires once when
+       auto-follow snaps focus to a new session, then self-removes. */
+    aside .node.pulsing { animation: attn 1.25s ease-in-out 8; box-shadow: inset 0 0 0 0 var(--accent); }
+    @keyframes attn {
+      0%   { background: var(--bg-soft); box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 0 rgba(88,166,255,0.6); }
+      50%  { background: rgba(88,166,255,0.18); box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 6px rgba(88,166,255,0); }
+      100% { background: var(--bg-soft); box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 0 rgba(88,166,255,0); }
+    }
+    header .auto-follow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); cursor: pointer; user-select: none; margin-left: 12px; }
+    header .auto-follow input { margin: 0; cursor: pointer; }
     header { position: sticky; top: 0; z-index: 10; background: var(--bg-raised); border-bottom: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
     header .title { font-weight: 600; }
     header .spawn-id { font-family: var(--mono); color: var(--fg-dim); font-size: 12px; }
@@ -81,19 +125,52 @@
     .jump-to-live { position: fixed; bottom: 24px; right: 24px; background: var(--accent); color: #fff; border: none; padding: 10px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; font-family: var(--sans); font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: none; z-index: 20; }
     .jump-to-live.visible { display: block; }
     .jump-to-live:hover { background: #79c0ff; }
+    /* Q2b — compact_marker inline timeline badge */
+    .frame.compact-marker { display: flex; align-items: center; gap: 8px; margin: 14px 0; padding: 0; }
+    .frame.compact-marker .cm-line { flex: 1; height: 1px; background: #d29922; opacity: 0.4; }
+    .frame.compact-marker .cm-badge { flex: 0 0 auto; background: rgba(210,153,34,0.15); border: 1px solid #d29922; border-radius: 12px; padding: 3px 10px; font-family: var(--mono); font-size: 11px; color: #d29922; font-weight: 600; cursor: default; white-space: nowrap; }
+    .frame.compact-marker .cm-badge:hover { background: rgba(210,153,34,0.28); }
+    /* Per-frame arrival timestamp pill — renders to the LEFT of every frame
+       so a stuck stream is visible at a glance (large gap between consecutive ts). */
+    .frame > .ts { display: inline-block; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--fg-xdim); margin-right: 8px; vertical-align: top; min-width: 64px; user-select: none; }
+    .frame.tool-use > .ts, .frame.thinking > .ts { padding: 8px 0 0 12px; }
+    .frame.tool-result > .ts { padding-top: 8px; }
+    .frame.compact-marker > .ts { padding: 0; min-width: 64px; }
   </style>
 </head>
 <body data-spawn-id="__SPAWN_ID__">
   <header>
     <div class="title">GSD-T Transcript</div>
     <div class="spawn-id" id="hdr-spawn-id"></div>
+    <label class="auto-follow" title="When ON, snap focus to the most recent live spawn as soon as it appears."><input type="checkbox" id="auto-follow" checked> auto-follow latest</label>
     <div class="status" id="hdr-status"><span class="dot"></span><span class="label">connecting…</span></div>
   </header>
-  <aside>
+  <aside class="left-rail">
     <h3>Spawns</h3>
     <div class="tree" id="tree"></div>
+    <details class="panel" id="tool-cost-panel" open>
+      <summary>Tool Cost <span class="live-badge" id="tool-cost-live">off</span></summary>
+      <div class="panel-body" id="tool-cost-body">
+        <div class="tool-empty">Loading…</div>
+      </div>
+    </details>
   </aside>
   <main id="stream"></main>
+  <!-- M44 D8 — Spawn Plan panel: Layer 1 (project) + Layer 2 (active spawn).
+       Additive; does not change the transcript stream rendering. -->
+  <aside class="spawn-panel" id="spawn-plan-panel">
+    <h2>Spawn Plan</h2>
+    <section id="spawn-layer-project">
+      <div class="sec-head"><span class="sec-title" id="project-title">Project</span><span class="sec-sub" id="project-sub">loading…</span></div>
+      <div class="sec-totals" id="project-totals">—</div>
+      <div id="project-tasks"><div class="empty">loading…</div></div>
+    </section>
+    <section id="spawn-layer-active">
+      <div class="sec-head"><span class="sec-title" id="active-title">Active Spawn</span><span class="sec-sub" id="active-sub">—</span></div>
+      <div class="sec-totals" id="active-totals">—</div>
+      <div id="active-tasks"><div class="empty">no active spawn plan</div></div>
+    </section>
+  </aside>
   <button class="jump-to-live" id="jump-btn">↓ Jump to live</button>
 
   <script>
@@ -134,24 +211,47 @@
         jumpBtn.classList.remove('visible');
       });
 
-      function appendFrame(el) {
+      // Two-digit zero-pad for timestamp formatting.
+      function pad2(n) { return n < 10 ? '0' + n : '' + n; }
+      // Format a Date as HH:MM:SS — local time, monospace-friendly width.
+      function fmtTs(d) {
+        if (!(d instanceof Date) || isNaN(d.getTime())) d = new Date();
+        return pad2(d.getHours()) + ':' + pad2(d.getMinutes()) + ':' + pad2(d.getSeconds());
+      }
+      window.__gsdtFmtTs = fmtTs;
+
+      // Per-frame arrival timestamp. The renderer captures Date.now() once
+      // per SSE message and threads it through; everything else falls back
+      // to "now" so manually-rendered frames stay visible too. Spotting a
+      // stuck stream is then trivial — adjacent frames will show identical
+      // or far-apart timestamps in the left-margin pill.
+      function appendFrame(el, arrivedAt) {
+        const ts = document.createElement('span');
+        ts.className = 'ts';
+        ts.textContent = fmtTs(arrivedAt instanceof Date ? arrivedAt : new Date());
+        ts.title = (arrivedAt instanceof Date ? arrivedAt : new Date()).toISOString();
+        // Insert as the first child so flex/inline layouts keep working.
+        if (el.firstChild) el.insertBefore(ts, el.firstChild);
+        else el.appendChild(ts);
         stream.appendChild(el);
         if (autoScroll) {
           requestAnimationFrame(() => window.scrollTo(0, document.body.scrollHeight));
         }
       }
 
-      function renderSystem(frame) {
+      function renderSystem(frame, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame system';
         const sid = frame.session_id ? ' session=' + frame.session_id.slice(0, 8) : '';
         const model = frame.model ? ' model=' + frame.model : '';
         const subtype = frame.subtype ? ' ' + frame.subtype : '';
-        div.textContent = 'system' + subtype + sid + model;
-        appendFrame(div);
+        const txt = document.createElement('span');
+        txt.textContent = 'system' + subtype + sid + model;
+        div.appendChild(txt);
+        appendFrame(div, arrivedAt);
       }
 
-      function renderUserMessage(content) {
+      function renderUserMessage(content, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame user';
         const p = document.createElement('span');
@@ -161,17 +261,19 @@
         const span = document.createElement('span');
         span.textContent = typeof content === 'string' ? content : JSON.stringify(content);
         div.appendChild(span);
-        appendFrame(div);
+        appendFrame(div, arrivedAt);
       }
 
-      function renderAssistantText(text) {
+      function renderAssistantText(text, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame assistant-text';
-        div.textContent = text;
-        appendFrame(div);
+        const span = document.createElement('span');
+        span.textContent = text;
+        div.appendChild(span);
+        appendFrame(div, arrivedAt);
       }
 
-      function renderThinking(text) {
+      function renderThinking(text, arrivedAt) {
         const d = document.createElement('details');
         d.className = 'frame thinking';
         const s = document.createElement('summary');
@@ -180,7 +282,7 @@
         const pre = document.createElement('div');
         pre.textContent = text;
         d.appendChild(pre);
-        appendFrame(d);
+        appendFrame(d, arrivedAt);
       }
 
       function toolUsePreview(input) {
@@ -198,7 +300,7 @@
         return '';
       }
 
-      function renderToolUse(block) {
+      function renderToolUse(block, arrivedAt) {
         const d = document.createElement('details');
         d.className = 'frame tool-use';
         const s = document.createElement('summary');
@@ -209,10 +311,10 @@
         catch { pre.textContent = String(block.input); }
         d.appendChild(pre);
         toolUseById.set(block.id, { name: block.name, el: d });
-        appendFrame(d);
+        appendFrame(d, arrivedAt);
       }
 
-      function renderToolResult(block) {
+      function renderToolResult(block, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame tool-result';
         const pre = document.createElement('pre');
@@ -233,10 +335,10 @@
           });
           div.appendChild(more);
         }
-        appendFrame(div);
+        appendFrame(div, arrivedAt);
       }
 
-      function renderBoundary(frame) {
+      function renderBoundary(frame, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame boundary ' + (frame.state || '');
         const label = document.createElement('span');
@@ -253,51 +355,88 @@
         if (frame.durationMs != null) bits.push('duration=' + Math.round(frame.durationMs/1000) + 's');
         meta.textContent = bits.join('  ');
         div.appendChild(meta);
-        appendFrame(div);
+        appendFrame(div, arrivedAt);
       }
 
-      function renderRaw(line) {
+      function renderRaw(line, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame raw';
-        div.textContent = line;
-        appendFrame(div);
+        const span = document.createElement('span');
+        span.textContent = line;
+        div.appendChild(span);
+        appendFrame(div, arrivedAt);
+      }
+
+      function renderCompactMarker(frame, arrivedAt) {
+        const div = document.createElement('div');
+        div.className = 'frame compact-marker';
+
+        const lineL = document.createElement('span');
+        lineL.className = 'cm-line';
+
+        const badge = document.createElement('span');
+        badge.className = 'cm-badge';
+        badge.textContent = '⚡ CW boundary';
+
+        // Build tooltip text from available fields.
+        const tipParts = [];
+        if (frame.ts) tipParts.push('ts: ' + frame.ts);
+        if (frame.trigger) tipParts.push('trigger: ' + frame.trigger);
+        if (frame.prior_session_id) tipParts.push('prior: ' + frame.prior_session_id.slice(0, 12));
+        if (frame.session_id) tipParts.push('new: ' + frame.session_id.slice(0, 12));
+        if (frame.preTokens != null) tipParts.push('pre: ' + frame.preTokens.toLocaleString());
+        if (frame.postTokens != null) tipParts.push('post: ' + frame.postTokens.toLocaleString());
+        badge.title = tipParts.join('\n') || 'Context Window boundary';
+
+        const lineR = document.createElement('span');
+        lineR.className = 'cm-line';
+
+        div.appendChild(lineL);
+        div.appendChild(badge);
+        div.appendChild(lineR);
+        appendFrame(div, arrivedAt);
       }
+      window.__gsdtRenderCompactMarker = renderCompactMarker;
 
-      function renderFrame(frame) {
+      function renderFrame(frame, arrivedAt) {
         if (!frame || typeof frame !== 'object') return;
+        const ts = arrivedAt instanceof Date ? arrivedAt : new Date();
         const type = frame.type;
-        if (type === 'system') { renderSystem(frame); return; }
-        if (type === 'task-boundary') { renderBoundary(frame); return; }
-        if (type === 'raw') { renderRaw(frame.line || ''); return; }
+        if (type === 'compact_marker') { renderCompactMarker(frame, ts); return; }
+        if (type === 'system') { renderSystem(frame, ts); return; }
+        if (type === 'task-boundary') { renderBoundary(frame, ts); return; }
+        if (type === 'raw') { renderRaw(frame.line || '', ts); return; }
         if (type === 'assistant' && frame.message && Array.isArray(frame.message.content)) {
           for (const b of frame.message.content) {
-            if (b.type === 'text') renderAssistantText(b.text || '');
-            else if (b.type === 'thinking') renderThinking(b.thinking || b.text || '');
-            else if (b.type === 'tool_use') renderToolUse(b);
-            else renderRaw(JSON.stringify(b));
+            if (b.type === 'text') renderAssistantText(b.text || '', ts);
+            else if (b.type === 'thinking') renderThinking(b.thinking || b.text || '', ts);
+            else if (b.type === 'tool_use') renderToolUse(b, ts);
+            else renderRaw(JSON.stringify(b), ts);
           }
           return;
         }
         if (type === 'user' && frame.message && Array.isArray(frame.message.content)) {
           for (const b of frame.message.content) {
-            if (b.type === 'tool_result') renderToolResult(b);
-            else if (b.type === 'text') renderUserMessage(b.text || '');
-            else renderRaw(JSON.stringify(b));
+            if (b.type === 'tool_result') renderToolResult(b, ts);
+            else if (b.type === 'text') renderUserMessage(b.text || '', ts);
+            else renderRaw(JSON.stringify(b), ts);
           }
           return;
         }
         if (type === 'user' && typeof frame.message === 'string') {
-          renderUserMessage(frame.message);
+          renderUserMessage(frame.message, ts);
           return;
         }
         if (type === 'result') {
           const d = document.createElement('div');
           d.className = 'frame system';
-          d.textContent = 'result subtype=' + (frame.subtype || '?') + ' duration=' + (frame.duration_ms || 0) + 'ms';
-          appendFrame(d);
+          const span = document.createElement('span');
+          span.textContent = 'result subtype=' + (frame.subtype || '?') + ' duration=' + (frame.duration_ms || 0) + 'ms';
+          d.appendChild(span);
+          appendFrame(d, ts);
           return;
         }
-        renderRaw(JSON.stringify(frame));
+        renderRaw(JSON.stringify(frame), ts);
       }
 
       // ── Sidebar ─────────────────────────────────────────────────────────
@@ -376,14 +515,172 @@
         for (const r of roots) render(r, 0);
       }
 
+      // ── Auto-follow latest spawn ────────────────────────────────────────
+      //
+      // Default ON. Persisted in localStorage under 'gsdt.autoFollow' so a
+      // user's per-tab decision survives reloads. When ON, pollSpawns()
+      // checks for a newer running spawn than the currently-focused one and
+      // immediately snaps focus to it via location.hash. The new spawn's
+      // sidebar node gets a 10s 'pulsing' class so the eye lands on it even
+      // after the SSE reconnect repaints the main pane.
+
+      const AUTOFOLLOW_KEY = 'gsdt.autoFollow';
+      const autoFollowEl = document.getElementById('auto-follow');
+      const stored = localStorage.getItem(AUTOFOLLOW_KEY);
+      autoFollowEl.checked = stored === null ? true : stored === '1';
+      autoFollowEl.addEventListener('change', () => {
+        localStorage.setItem(AUTOFOLLOW_KEY, autoFollowEl.checked ? '1' : '0');
+      });
+
+      // Track which spawnIds we've already seen-live so we only treat the
+      // FIRST appearance of a newly-live spawn as a follow event. Without
+      // this guard the tree poll would re-trigger follow every 3s while the
+      // spawn stayed running (no-op since the id would equal currentId, but
+      // also no-op when the user has manually navigated away).
+      const seenLive = new Set();
+
+      function pulseNode(spawnId) {
+        // Defer one frame so the tree DOM exists.
+        requestAnimationFrame(() => {
+          const nodes = document.querySelectorAll('aside .node');
+          for (const n of nodes) {
+            const nm = n.querySelector('.name');
+            if (nm && nm.textContent.endsWith(spawnId.slice(-8))) {
+              n.classList.add('pulsing');
+              setTimeout(() => n.classList.remove('pulsing'), 10000);
+              break;
+            }
+          }
+        });
+      }
+
+      function maybeAutoFollow(spawns) {
+        if (!autoFollowEl.checked) return;
+        const currentId = (location.hash || '').slice(1) || spawnId;
+        // Most recent running spawn by startedAt (descending).
+        const running = spawns
+          .filter((s) => s.status === 'running')
+          .sort((a, b) => (Date.parse(b.startedAt) || 0) - (Date.parse(a.startedAt) || 0));
+        if (!running.length) return;
+        const latest = running[0];
+        if (latest.spawnId === currentId) {
+          seenLive.add(latest.spawnId);
+          return;
+        }
+        // Only follow if this is a NEWLY-live spawn — i.e., we haven't seen
+        // it as live in a previous poll. This stops us from yanking focus
+        // back every 3s when the user has manually navigated to an older
+        // spawn whose sibling is still running.
+        if (seenLive.has(latest.spawnId)) return;
+        seenLive.add(latest.spawnId);
+        location.hash = latest.spawnId;
+        pulseNode(latest.spawnId);
+      }
+
       let pollTimer = null;
       function pollSpawns() {
         fetch('/transcripts')
           .then((r) => r.json())
-          .then((j) => renderTree(buildTree(j.spawns || [])))
+          .then((j) => {
+            const spawns = j.spawns || [];
+            renderTree(buildTree(spawns));
+            maybeAutoFollow(spawns);
+          })
           .catch(() => { /* keep last render */ });
       }
 
+      // ── M43 D6 — Tool Cost panel ────────────────────────────────────────
+      //
+      // Fetches /transcript/:id/tool-cost on render + on turn_complete SSE
+      // events (debounced 2s). Shows top-N tools by attributed tokens, or
+      // a friendly "not yet available" message when D2 library is 503.
+
+      const TOOL_COST_TOP_N = 8;
+      let toolCostTimer = null;
+
+      function formatTokens(n) {
+        if (n == null || isNaN(n)) return '—';
+        if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+        if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+        return String(n);
+      }
+
+      function renderToolCostPanel(tools) {
+        const body = document.getElementById('tool-cost-body');
+        if (!body) return;
+        body.innerHTML = '';
+        if (!Array.isArray(tools) || tools.length === 0) {
+          const e = document.createElement('div');
+          e.className = 'tool-empty';
+          e.textContent = 'No tool activity yet.';
+          body.appendChild(e);
+          return;
+        }
+        // Sort by attributed tokens (input + output) desc, then slice top-N.
+        const ranked = tools
+          .map((t) => {
+            const tokens = (t.inputTokens || 0) + (t.outputTokens || 0)
+              || t.tokens || t.attributedTokens || 0;
+            return { name: t.tool || t.name || 'unknown', tokens };
+          })
+          .sort((a, b) => b.tokens - a.tokens)
+          .slice(0, TOOL_COST_TOP_N);
+        for (const r of ranked) {
+          const row = document.createElement('div');
+          row.className = 'tool-row';
+          const n = document.createElement('span'); n.className = 'tool-name'; n.textContent = r.name;
+          const v = document.createElement('span'); v.className = 'tool-tokens'; v.textContent = formatTokens(r.tokens);
+          row.appendChild(n); row.appendChild(v);
+          body.appendChild(row);
+        }
+      }
+
+      function renderToolCostError(message) {
+        const body = document.getElementById('tool-cost-body');
+        if (!body) return;
+        body.innerHTML = '';
+        const e = document.createElement('div');
+        e.className = 'tool-error';
+        e.textContent = message || 'Tool attribution not yet available';
+        body.appendChild(e);
+      }
+      window.__gsdtRenderToolCostPanel = renderToolCostPanel;
+      window.__gsdtRenderToolCostError = renderToolCostError;
+
+      function fetchToolCost(id) {
+        if (!id) return;
+        fetch('/transcript/' + encodeURIComponent(id) + '/tool-cost')
+          .then((r) => {
+            if (r.status === 503) {
+              renderToolCostError('Tool attribution not yet available');
+              return null;
+            }
+            if (!r.ok) {
+              renderToolCostError('Tool cost unavailable (HTTP ' + r.status + ')');
+              return null;
+            }
+            return r.json();
+          })
+          .then((j) => {
+            if (!j) return;
+            renderToolCostPanel(j.tools || []);
+          })
+          .catch(() => { renderToolCostError('Tool cost fetch failed'); });
+      }
+
+      function setToolCostLive(on) {
+        const badge = document.getElementById('tool-cost-live');
+        if (!badge) return;
+        badge.textContent = on ? 'live' : 'off';
+        badge.classList.toggle('on', !!on);
+      }
+
+      function scheduleToolCostRefresh(id) {
+        if (toolCostTimer) clearTimeout(toolCostTimer);
+        toolCostTimer = setTimeout(() => { fetchToolCost(id); }, 2000);
+      }
+      window.__gsdtFetchToolCost = fetchToolCost;
+
       // ── SSE connection (reconnectable on hash change) ───────────────────
 
       let src = null;
@@ -395,13 +692,33 @@
         jumpBtn.classList.remove('visible');
         document.getElementById('hdr-spawn-id').textContent = id;
         setStatus('', 'connecting…');
+        // M43 D6 — kick off an initial tool-cost fetch for this spawn.
+        fetchToolCost(id);
+        setToolCostLive(false);
         src = new EventSource('/transcript/' + encodeURIComponent(id) + '/stream');
-        src.onopen = () => setStatus('connected', 'live');
-        src.onerror = () => setStatus('error', 'disconnected');
+        src.onopen = () => { setStatus('connected', 'live'); setToolCostLive(true); };
+        src.onerror = () => { setStatus('error', 'disconnected'); setToolCostLive(false); };
         src.onmessage = (ev) => {
           if (!ev.data) return;
-          try { renderFrame(JSON.parse(ev.data)); }
-          catch { renderRaw(ev.data); }
+          // Capture arrival time once per SSE message — every render call for
+          // this frame stamps the same wall-clock value, so the user can spot
+          // a stuck stream by adjacent identical/far-apart timestamps.
+          const arrivedAt = new Date();
+          try {
+            const frame = JSON.parse(ev.data);
+            renderFrame(frame, arrivedAt);
+            // M43 D6 — refresh tool-cost on turn-complete frames (debounced).
+            // Various producers emit different turn-complete markers; accept
+            // any of them.
+            if (frame && (
+              frame.type === 'turn_complete' ||
+              frame.subtype === 'turn_complete' ||
+              frame.event_type === 'turn_complete' ||
+              frame.type === 'result' // `result` frames mark end-of-turn in stream-json
+            )) {
+              scheduleToolCostRefresh(id);
+            }
+          } catch { renderRaw(ev.data, arrivedAt); }
         };
       }
 
@@ -416,6 +733,192 @@
 
       pollSpawns();
       pollTimer = setInterval(pollSpawns, 3000);
+
+      // ── M44 D8 — Spawn Plan panel ───────────────────────────────────────
+      //
+      // Two-layer right-side panel. Layer 1 shows project-wide task status
+      // (derived from partition + tasks.md); Layer 2 shows the currently-
+      // active spawn's task slice. Both flip live via the SSE channel
+      // `/api/spawn-plans/stream` and the initial GET `/api/spawn-plans`.
+      //
+      // Token cells render as `in=12.5k out=1.7k $0.42` (k-suffix above
+      // 1000, 2-decimal USD). `—` when null, per the "zero is a
+      // measurement, dash is acknowledged gap" rule.
+
+      const STATUS_ICON = { pending: '☐', in_progress: '◐', done: '✓' };
+
+      function fmtK(n) {
+        if (n == null || isNaN(n)) return '0';
+        const num = Number(n);
+        if (Math.abs(num) >= 1000) return (num / 1000).toFixed(1) + 'k';
+        return String(num);
+      }
+      window.__gsdtFmtK = fmtK;
+
+      function fmtTokens(tokens) {
+        if (!tokens || typeof tokens !== 'object') return '—';
+        const ins = fmtK(tokens.in);
+        const out = fmtK(tokens.out);
+        const cost = (typeof tokens.cost_usd === 'number') ? '$' + tokens.cost_usd.toFixed(2) : '';
+        return ['in=' + ins, 'out=' + out, cost].filter(Boolean).join(' ');
+      }
+      window.__gsdtFmtTokens = fmtTokens;
+
+      function sumTokens(tasks) {
+        const acc = { in: 0, out: 0, cr: 0, cc: 0, cost_usd: 0 };
+        let hit = false;
+        for (const t of (tasks || [])) {
+          if (!t || t.status !== 'done' || !t.tokens) continue;
+          acc.in += Number(t.tokens.in || 0);
+          acc.out += Number(t.tokens.out || 0);
+          acc.cr += Number(t.tokens.cr || 0);
+          acc.cc += Number(t.tokens.cc || 0);
+          acc.cost_usd += Number(t.tokens.cost_usd || 0);
+          hit = true;
+        }
+        if (!hit) return null;
+        acc.cost_usd = Math.round(acc.cost_usd * 100) / 100;
+        return acc;
+      }
+      window.__gsdtSumTokens = sumTokens;
+
+      function renderTaskList(container, tasks) {
+        container.innerHTML = '';
+        if (!Array.isArray(tasks) || tasks.length === 0) {
+          const e = document.createElement('div');
+          e.className = 'empty';
+          e.textContent = 'no tasks';
+          container.appendChild(e);
+          return;
+        }
+        for (const t of tasks) {
+          if (!t || !t.id) continue;
+          const row = document.createElement('div');
+          row.className = 'task-row status-' + (t.status || 'pending').replace('_', '-');
+          const icon = document.createElement('span');
+          icon.className = 'icon';
+          icon.textContent = STATUS_ICON[t.status] || '☐';
+          const title = document.createElement('span');
+          title.className = 'title';
+          title.textContent = t.id + ' — ' + (t.title || '');
+          title.title = (t.commit ? 'commit ' + t.commit + ' · ' : '') + (t.title || '');
+          const tok = document.createElement('span');
+          tok.className = 'tokens';
+          tok.textContent = (t.status === 'done') ? fmtTokens(t.tokens) : '';
+          row.appendChild(icon);
+          row.appendChild(title);
+          row.appendChild(tok);
+          container.appendChild(row);
+        }
+      }
+      window.__gsdtRenderTaskList = renderTaskList;
+
+      // Group tasks by wave prefix embedded in the plan (optional); fall
+      // back to a single flat list when no wave is set.
+      function renderProjectLayer(plan) {
+        const titleEl = document.getElementById('project-title');
+        const subEl = document.getElementById('project-sub');
+        const totalsEl = document.getElementById('project-totals');
+        const tasksEl = document.getElementById('project-tasks');
+        if (!plan || !plan.tasks) {
+          titleEl.textContent = 'Project';
+          subEl.textContent = '—';
+          totalsEl.textContent = '—';
+          tasksEl.innerHTML = '<div class="empty">no plan yet</div>';
+          return;
+        }
+        const done = plan.tasks.filter((t) => t && t.status === 'done').length;
+        const total = plan.tasks.length;
+        titleEl.textContent = (plan.milestone || 'Project');
+        subEl.textContent = (plan.wave ? plan.wave + ' · ' : '') + done + '/' + total;
+        const totals = sumTokens(plan.tasks);
+        totalsEl.textContent = totals ? fmtTokens(totals) : '—';
+        renderTaskList(tasksEl, plan.tasks);
+      }
+      window.__gsdtRenderProjectLayer = renderProjectLayer;
+
+      function renderActiveLayer(plan) {
+        const section = document.getElementById('spawn-layer-active');
+        const titleEl = document.getElementById('active-title');
+        const subEl = document.getElementById('active-sub');
+        const totalsEl = document.getElementById('active-totals');
+        const tasksEl = document.getElementById('active-tasks');
+        if (!plan) {
+          section.classList.add('dimmed');
+          titleEl.textContent = 'Active Spawn';
+          subEl.textContent = '—';
+          totalsEl.textContent = '—';
+          tasksEl.innerHTML = '<div class="empty">no active spawn plan</div>';
+          return;
+        }
+        const isActive = plan.endedAt == null;
+        section.classList.toggle('dimmed', !isActive);
+        const done = (plan.tasks || []).filter((t) => t && t.status === 'done').length;
+        const total = (plan.tasks || []).length;
+        titleEl.textContent = (plan.kind || 'spawn');
+        subEl.textContent = (plan.spawnId || '').slice(-10) + ' · ' + done + '/' + total;
+        const totals = sumTokens(plan.tasks || []);
+        totalsEl.textContent = totals ? fmtTokens(totals) : '—';
+        renderTaskList(tasksEl, plan.tasks || []);
+      }
+      window.__gsdtRenderActiveLayer = renderActiveLayer;
+
+      // Project layer is derived from the most-recent active plan that has
+      // any tasks (preferring unattended-worker kind when multiple exist).
+      // Active layer is the same plan — both layers share data for now;
+      // future versions may split project layer off a dedicated endpoint.
+      let spawnPlanState = { plans: [] };
+      function updateSpawnPlanPanel() {
+        const plans = spawnPlanState.plans || [];
+        const byRecency = plans.slice().sort((a, b) => (Date.parse(b.startedAt) || 0) - (Date.parse(a.startedAt) || 0));
+        const active = byRecency.find((p) => p && p.endedAt == null) || null;
+        // Layer 1: use the active plan if available; else the most recent plan.
+        renderProjectLayer(active || byRecency[0] || null);
+        // Layer 2: only the active one.
+        renderActiveLayer(active);
+      }
+      window.__gsdtUpdateSpawnPlanPanel = updateSpawnPlanPanel;
+
+      function applyPlanUpdate(plan) {
+        if (!plan || !plan.spawnId) return;
+        const plans = spawnPlanState.plans || [];
+        const idx = plans.findIndex((p) => p && p.spawnId === plan.spawnId);
+        if (idx >= 0) plans[idx] = plan;
+        else plans.push(plan);
+        spawnPlanState.plans = plans;
+        updateSpawnPlanPanel();
+      }
+      window.__gsdtApplyPlanUpdate = applyPlanUpdate;
+
+      function fetchInitialPlans() {
+        fetch('/api/spawn-plans')
+          .then((r) => r.ok ? r.json() : null)
+          .then((j) => {
+            if (!j) return;
+            spawnPlanState.plans = Array.isArray(j.plans) ? j.plans : [];
+            updateSpawnPlanPanel();
+          })
+          .catch(() => { /* leave empty state */ });
+      }
+
+      function subscribePlanUpdates() {
+        try {
+          const es = new EventSource('/api/spawn-plans/stream');
+          es.onmessage = (ev) => {
+            if (!ev.data) return;
+            try {
+              const msg = JSON.parse(ev.data);
+              if (msg && msg.plan) applyPlanUpdate(msg.plan);
+            } catch { /* ignore */ }
+          };
+          es.onerror = () => { /* auto-reconnect by browser */ };
+        } catch { /* EventSource unsupported; fall back to polling below */ }
+      }
+
+      fetchInitialPlans();
+      subscribePlanUpdates();
+      // Light poll every 10s as a safety net if SSE is disconnected.
+      setInterval(fetchInitialPlans, 10000);
     })();
   </script>
 </body>