@tekyzinc/gsd-t 3.21.10 → 3.21.11

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to GSD-T are documented here. Updated with each release.
 
+## [3.21.11] - 2026-05-06
+
+### Fixed — viewer: 4 rendering regressions surfaced post-M47
+
+The M47 viewer redesign shipped four user-visible rendering bugs that only became apparent when a project's in-session conversation was actually being viewed against a non-GSD-T project. Discovered when the dashboard for `Move-Zoom-Recordings-to-GDrive` showed three captured `in-session-*.ndjson` files but rendered them with a hardcoded "GSD-T Transcript" header, identical timestamps on every frame, raw `JSON.stringify` dumps in place of chat turns, and the same content in both top and bottom panes.
+
+**Changes:**
+- `scripts/gsd-t-dashboard-server.js`: `<title>` and `.title` div now carry a `__PROJECT_NAME__` placeholder substituted server-side via `path.basename(path.resolve(projectDir))` in both `handleTranscriptsList` and `handleTranscriptPage`. New `_escapeHtml()` helper escapes `<` / `&` / `"` in basenames; the substitution uses the function form of `replace` to defuse `$&` / `$1` / `$$` backreference patterns in basenames (Red Team BUG-1).
+- `scripts/gsd-t-transcript.html`:
+  - `frameTs(frame, fallback)` parses each frame's ISO `ts` field and only falls back to the SSE-handler-captured `arrivedAt` when absent or invalid. `connect()` and `connectMain()` now thread `renderAt = frameTs(frame, arrivedAt)` to `renderFrame`. Initial-replay batches no longer collapse 200 distinct timestamps into one.
+  - 4 new render helpers (`renderUserTurn` / `renderAssistantTurn` / `renderSessionStart` / `renderToolUseLine`) plus dispatch arms in `renderFrameInner` BEFORE the `JSON.stringify` fallback. New CSS for `.frame.assistant-turn` (green border-left), `.frame.session-start` (small inline badge), `.frame.tool-call-line`, `.frame.truncated-tag`. `user_turn` reuses `.frame.user` bubble styling. Truncated content gets a "(truncated)" tag.
+  - 5 separate guards keep `in-session-*` ids out of the bottom pane: `renderRailEntry` click handler returns early on `isInSession`; initial bottom-pane resolution scrubs `in-session-*` from `SS_KEY_SELECTED` sessionStorage before `connect()`; `hashchange` handler returns early; `maybeAutoFollow` filters in-session spawns out; legacy `renderTree` click handler in the live-bucket fallback path also gets the guard (Red Team BUG-2).
+- `test/m48-viewer-rendering-fixes.test.js`: 23 new regression tests — 5 Bug-1, 5 Bug-2 (incl. functional `frameTs` eval-extract probe), 7 Bug-3, 5 Bug-4, 1 functional probe (Red Team test-quality concern). Includes explicit `$&` and `$1` regression tests for the BUG-1 fix.
+- `test/m44-transcript-timestamp.test.js`: updated for the `renderAt` / `arrivedAt` rename — semantics preserved (`arrivedAt` is now the fallback layer beneath parsed `frame.ts`).
+
+**Migration:** existing dashboards pick up the new code on next refresh after `gsd-t update-all` propagates the package; the per-project transcript page reflects the project's directory basename automatically. No state migration.
+
+**Suite:** 2083/2083 pass — both pre-existing M47-baseline flakes resolved on the release run.
+
+**Red Team adversarial QA (opus):** initial sweep found 1 MEDIUM (`$&`-corruption in basename → fixed via function-form replace) + 1 LOW (legacy `renderTree` click handler → fixed via `isInSession` guard) + 1 test-quality recommendation (addressed via functional `frameTs` probe). Re-verification: GRUDGING PASS — no new bugs introduced.
+
 ## [3.20.13] - 2026-05-05
 
 ### Fixed — visualizer: surface in-session NDJSONs when `.index.json` is empty

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "3.21.10",
+  "version": "3.21.11",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 54 slash commands with headless-by-default workflow spawning, unattended supervisor relay with event stream, graph-powered code analysis, real-time agent dashboard, task telemetry, doc-ripple enforcement, backlog management, impact analysis, test sync, milestone archival, and PRD generation",
   "author": "Tekyz, Inc.",
   "license": "MIT",

package/scripts/gsd-t-dashboard-server.js

@@ -273,7 +273,14 @@ function handleTranscriptsList(req, res, projectDir, transcriptHtmlPath) {
       // viewer's initialId logic falls through to location.hash (also empty)
       // and connect('') is a no-op beyond a 404 SSE attempt — harmless, since
       // the left rail polls /api/spawns-index independently.
-      const html = data.toString("utf8").replace(/__SPAWN_ID__/g, "");
+      const projectName = path.basename(path.resolve(projectDir || "."));
+      // Function-form replacement: a string replacement would interpret
+      // `$&`, `$1`, `$$`, etc. in the project basename as backreferences,
+      // re-injecting the placeholder or fragments of it (Red Team BUG-1).
+      const escapedName = _escapeHtml(projectName);
+      const html = data.toString("utf8")
+        .replace(/__SPAWN_ID__/g, () => "")
+        .replace(/__PROJECT_NAME__/g, () => escapedName);
       res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
       res.end(html);
     });
@@ -283,18 +290,36 @@ function handleTranscriptsList(req, res, projectDir, transcriptHtmlPath) {
   res.end(JSON.stringify({ spawns: sorted }));
 }
 
-function handleTranscriptPage(req, res, spawnId, transcriptHtmlPath) {
+function handleTranscriptPage(req, res, spawnId, transcriptHtmlPath, projectDir) {
   if (!isValidSpawnId(spawnId)) { res.writeHead(400); res.end("Invalid spawn id"); return; }
   fs.readFile(transcriptHtmlPath, (err, data) => {
     if (err) { res.writeHead(404); res.end("Transcript UI not found"); return; }
     // Inject the spawn-id as a data attribute on <body> by string replacement;
     // the HTML ships with a placeholder `data-spawn-id="__SPAWN_ID__"`.
-    const html = data.toString("utf8").replace(/__SPAWN_ID__/g, spawnId);
+    const projectName = path.basename(path.resolve(projectDir || "."));
+    // Function-form replacement: see comment in handleTranscriptsList. Even
+    // though isValidSpawnId guards spawnId against `$`, defence in depth.
+    const escapedName = _escapeHtml(projectName);
+    const html = data.toString("utf8")
+      .replace(/__SPAWN_ID__/g, () => spawnId)
+      .replace(/__PROJECT_NAME__/g, () => escapedName);
     res.writeHead(200, { "Content-Type": "text/html" });
     res.end(html);
   });
 }
 
+// HTML-escape just enough to make a directory basename safe in <title> and
+// <div class="title">. Project basenames effectively never contain quotes or
+// angle brackets, but we still escape to keep the surface tight.
+function _escapeHtml(s) {
+  return String(s == null ? "" : s)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
 function tailTranscriptFile(filePath, callback) {
   let offset = 0;
   let buf = "";
@@ -783,7 +808,7 @@ function startServer(port, eventsDir, htmlPath, projectDir, transcriptHtmlPath)
     if (streamMatch) return handleTranscriptStream(req, res, decodeURIComponent(streamMatch[1]), projDir);
     // /transcript/:spawnId — HTML viewer page
     const pageMatch = url.match(/^\/transcript\/([^/]+)$/);
-    if (pageMatch) return handleTranscriptPage(req, res, decodeURIComponent(pageMatch[1]), tHtmlPath);
+    if (pageMatch) return handleTranscriptPage(req, res, decodeURIComponent(pageMatch[1]), tHtmlPath, projDir);
     res.writeHead(404); res.end("Not found");
   });
   server.listen(port);

package/scripts/gsd-t-transcript.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>GSD-T Transcript</title>
+  <title>__PROJECT_NAME__</title>
   <style>
     :root {
       --bg: #0d1117;
@@ -183,6 +183,17 @@
     .frame.boundary.done .label { color: var(--green); }
     .frame.boundary.failed .label { color: var(--red); }
     .frame.boundary .meta { color: var(--fg-dim); font-family: var(--mono); font-size: 12px; }
+    /* M48 — chat-bubble frame types emitted by the in-session conversation
+       capture hook. user_turn reuses .frame.user styling; assistant_turn
+       gets a softer right-aligned-feel bubble; session_start is a tiny badge. */
+    .frame.assistant-turn { border-left: 3px solid var(--green); padding: 6px 12px; background: var(--bg-raised); border-radius: 0 4px 4px 0; }
+    .frame.assistant-turn .prefix { color: var(--green); font-weight: 600; margin-right: 6px; font-family: var(--mono); }
+    .frame.assistant-turn .body { white-space: pre-wrap; word-break: break-word; }
+    .frame.user-turn .body { white-space: pre-wrap; word-break: break-word; }
+    .frame.session-start { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; padding: 3px 10px; background: rgba(88,166,255,0.10); border: 1px solid var(--border); border-radius: 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }
+    .frame.session-start .badge { color: var(--accent); font-weight: 600; }
+    .frame.tool-call-line { font-family: var(--mono); font-size: 12px; color: var(--accent-warm); padding: 2px 0; }
+    .frame.truncated-tag { color: var(--fg-xdim); font-style: italic; font-size: 11px; margin-left: 6px; }
 
     .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; }
@@ -202,7 +213,7 @@
 </head>
 <body data-spawn-id="__SPAWN_ID__">
   <header>
-    <div class="title">GSD-T Transcript</div>
+    <div class="title">__PROJECT_NAME__</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>
@@ -440,17 +451,26 @@
       }
       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.
+      // Per-frame timestamp. We prefer the producer-side `frame.ts`
+      // (ISO string written by the conversation-capture hook) when it
+      // parses cleanly, and only fall back to SSE arrival time when no
+      // `ts` field is present. Without this, an initial-load replay of
+      // N frames all arrives within one millisecond and every row shows
+      // the same HH:MM:SS — useless for spotting stuck or stale streams.
       //
       // M47 D1: appendFrame writes to a module-scope `renderTarget`. The
       // renderFrame entry point swaps it per-call so the same code paths
       // render into either the top pane (#main-stream — main-conversation
       // SSE) or the bottom pane (#stream inside #spawn-stream — selected
       // spawn SSE).
+      function frameTs(frame, fallback) {
+        if (frame && typeof frame.ts === 'string') {
+          const d = new Date(frame.ts);
+          if (!isNaN(d.getTime())) return d;
+        }
+        return fallback instanceof Date ? fallback : new Date();
+      }
+      window.__gsdtFrameTs = frameTs;
       let renderTarget = stream;
       function appendFrame(el, arrivedAt) {
         const ts = document.createElement('span');
@@ -604,6 +624,74 @@
         appendFrame(div, arrivedAt);
       }
 
+      // M48 — chat-bubble renderers for the in-session conversation NDJSON.
+      // The conversation-capture hook emits frames of type
+      // `user_turn`, `assistant_turn`, `session_start`, and `tool_use`.
+      // Without explicit handling these fall through to renderRaw and the
+      // user sees a JSON.stringify dump per row.
+      function _appendTruncatedTag(div, frame) {
+        if (!frame || !frame.truncated) return;
+        const tag = document.createElement('span');
+        tag.className = 'truncated-tag';
+        tag.textContent = '(truncated)';
+        div.appendChild(tag);
+      }
+      function renderUserTurn(frame, arrivedAt) {
+        const div = document.createElement('div');
+        div.className = 'frame user user-turn';
+        const p = document.createElement('span');
+        p.className = 'prefix';
+        p.textContent = '>';
+        div.appendChild(p);
+        const body = document.createElement('span');
+        body.className = 'body';
+        body.textContent = (frame && typeof frame.content === 'string') ? frame.content : '';
+        div.appendChild(body);
+        _appendTruncatedTag(div, frame);
+        appendFrame(div, arrivedAt);
+      }
+      function renderAssistantTurn(frame, arrivedAt) {
+        const div = document.createElement('div');
+        div.className = 'frame assistant-turn';
+        const p = document.createElement('span');
+        p.className = 'prefix';
+        p.textContent = '⏺';
+        div.appendChild(p);
+        const body = document.createElement('span');
+        body.className = 'body';
+        body.textContent = (frame && typeof frame.content === 'string') ? frame.content : '';
+        div.appendChild(body);
+        _appendTruncatedTag(div, frame);
+        appendFrame(div, arrivedAt);
+      }
+      function renderSessionStart(frame, arrivedAt) {
+        const div = document.createElement('div');
+        div.className = 'frame session-start';
+        const badge = document.createElement('span');
+        badge.className = 'badge';
+        badge.textContent = '◆ session';
+        div.appendChild(badge);
+        if (frame && typeof frame.session_id === 'string') {
+          const sid = document.createElement('span');
+          sid.textContent = frame.session_id.slice(0, 8);
+          div.appendChild(sid);
+        }
+        appendFrame(div, arrivedAt);
+      }
+      function renderToolUseLine(frame, arrivedAt) {
+        const div = document.createElement('div');
+        div.className = 'frame tool-call-line';
+        const span = document.createElement('span');
+        const name = (frame && typeof frame.name === 'string') ? frame.name : 'tool';
+        span.textContent = '⎿ ' + name + '()';
+        div.appendChild(span);
+        appendFrame(div, arrivedAt);
+      }
+      window.__gsdtRenderUserTurn       = renderUserTurn;
+      window.__gsdtRenderAssistantTurn  = renderAssistantTurn;
+      window.__gsdtRenderSessionStart   = renderSessionStart;
+      window.__gsdtRenderToolUseLine    = renderToolUseLine;
+
       function renderCompactMarker(frame, arrivedAt) {
         const div = document.createElement('div');
         div.className = 'frame compact-marker';
@@ -646,12 +734,23 @@
       }
       function renderFrameInner(frame, arrivedAt) {
         if (!frame || typeof frame !== 'object') return;
-        const ts = arrivedAt instanceof Date ? arrivedAt : new Date();
+        // Defense in depth: if a caller passes a non-Date `arrivedAt`, still
+        // try to derive a real timestamp from frame.ts before falling back
+        // to "now". Without this guard, every renderFrame() call from a
+        // non-SSE path (e.g. tests, manual dispatch) collapses to one Date.
+        const ts = (arrivedAt instanceof Date && !isNaN(arrivedAt.getTime()))
+          ? arrivedAt
+          : frameTs(frame, new Date());
         const type = frame.type;
         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; }
+        // M48 — in-session conversation-capture frame types.
+        if (type === 'session_start')   { renderSessionStart(frame, ts); return; }
+        if (type === 'user_turn')       { renderUserTurn(frame, ts); return; }
+        if (type === 'assistant_turn')  { renderAssistantTurn(frame, ts); return; }
+        if (type === 'tool_use')        { renderToolUseLine(frame, 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 || '', ts);
@@ -771,6 +870,14 @@
           });
           el.appendChild(dot); el.appendChild(name); el.appendChild(kill);
           el.addEventListener('click', () => {
+            // M48 — symmetric with renderRailEntry: in-session entries
+            // belong to the TOP pane only. Without this guard the legacy
+            // renderTree path (called for the `live` bucket when ≥2
+            // in-session NDJSONs exist) would mutate location.hash to an
+            // in-session-* value, polluting the URL and the rail's active
+            // highlight even though the hashchange handler now blocks
+            // bottom-pane SSE pinning.
+            if (isInSession(node)) return;
             if (node.spawnId === currentId) return;
             location.hash = node.spawnId;
           });
@@ -822,9 +929,14 @@
       function maybeAutoFollow(spawns) {
         if (!autoFollowEl.checked) return;
         const currentId = (location.hash || '').slice(1) || spawnId;
+        // M48 — auto-follow drives the BOTTOM pane (selected-spawn). The
+        // top pane is owned by /api/main-session and shows in-session-*
+        // entries automatically. Excluding them here prevents the auto-
+        // follow loop from also pinning them into the bottom pane.
         // Most recent running spawn by startedAt (descending).
         const running = spawns
           .filter((s) => s.status === 'running')
+          .filter((s) => !(typeof s.spawnId === 'string' && s.spawnId.indexOf('in-session-') === 0))
           .sort((a, b) => (Date.parse(b.startedAt) || 0) - (Date.parse(a.startedAt) || 0));
         if (!running.length) return;
         const latest = running[0];
@@ -894,6 +1006,12 @@
         });
         el.appendChild(dot); el.appendChild(name); el.appendChild(kill);
         el.addEventListener('click', () => {
+          // M48 — in-session conversation entries belong in the TOP pane only.
+          // The top pane is wired to /api/main-session and streams the
+          // current orchestrator session. Routing them through location.hash
+          // would also load them into the bottom pane (the SELECTED-SPAWN
+          // pane), making both panes show identical content.
+          if (isInSession) return;
           if (node.spawnId === currentId) return;
           _ssSet(SS_KEY_SELECTED, node.spawnId);
           location.hash = node.spawnId;
@@ -1102,14 +1220,15 @@
         src.onerror = () => { setStatus('error', 'disconnected'); setToolCostLive(false); };
         src.onmessage = (ev) => {
           if (!ev.data) return;
-          // 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.
+          // Arrival time is the FALLBACK; we prefer the producer-side
+          // frame.ts so a 200-frame initial replay shows actual event
+          // times (spread out over minutes), not the same millisecond.
           const arrivedAt = new Date();
           try {
             const frame = JSON.parse(ev.data);
+            const renderAt = frameTs(frame, arrivedAt);
             // Bottom pane = default renderTarget = #stream.
-            renderFrame(frame, arrivedAt);
+            renderFrame(frame, renderAt);
             // M43 D6 — refresh tool-cost on turn-complete frames (debounced).
             // Various producers emit different turn-complete markers; accept
             // any of them.
@@ -1146,7 +1265,8 @@
             const arrivedAt = new Date();
             try {
               const frame = JSON.parse(ev.data);
-              renderFrame(frame, arrivedAt, mainStreamEl);
+              const renderAt = frameTs(frame, arrivedAt);
+              renderFrame(frame, renderAt, mainStreamEl);
             } catch {
               const prev = renderTarget; renderTarget = mainStreamEl;
               try { renderRaw(ev.data, arrivedAt); } finally { renderTarget = prev; }
@@ -1175,6 +1295,8 @@
 
       window.addEventListener('hashchange', () => {
         const id = (location.hash || '').slice(1);
+        // M48 — keep in-session-* ids out of the bottom pane (top pane only).
+        if (id && id.indexOf('in-session-') === 0) { return; }
         if (id) { connect(id); pollSpawns(); }
       });
 
@@ -1182,12 +1304,19 @@
       //   1. data-spawn-id non-empty → connect that (bookmark flow)
       //   2. else sessionStorage.selectedSpawnId → connect that
       //   3. else show empty state
+      // M48 — never seed the bottom pane with an in-session-* id; the top
+      // pane already owns the main session, and showing it in both panes
+      // is one of the regressions Bug 4 fixes.
       let initialBottomId = '';
       if (spawnId) {
         initialBottomId = spawnId;
       } else {
         initialBottomId = _ssGet(SS_KEY_SELECTED) || '';
       }
+      if (typeof initialBottomId === 'string' && initialBottomId.indexOf('in-session-') === 0) {
+        initialBottomId = '';
+        _ssSet(SS_KEY_SELECTED, '');
+      }
       if (initialBottomId && !location.hash) location.hash = initialBottomId;
       connect(initialBottomId);