@tekyzinc/gsd-t 3.20.13 → 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/README.md

@@ -15,7 +15,8 @@ A methodology for reliable, parallelizable development using Claude Code with op
 **Stack Rules Engine** — auto-detects project tech stack (React, TypeScript, Node API, Python, Go, Rust) from manifest files and injects mandatory best-practice rules into subagent prompts at execute-time. Universal security rules always apply; stack-specific rules layer on top. Includes **design-to-code** rules for pixel-perfect frontend implementation from Figma, screenshots, or design images — with Figma MCP integration, design token extraction, stack capability evaluation, and mandatory visual verification: every screen is rendered in a real browser, screenshotted at mobile/tablet/desktop, and compared pixel-by-pixel against the Figma design. Auto-bootstraps during partition when design references are detected. Extensible: drop a `.md` file in `templates/stacks/` to add a new stack.
 **External Task Orchestrator + Streaming Watcher UI (M40, v3.14.10)** — JS orchestrator drives `claude -p` one task per spawn: short-lived, fresh context, architecturally compaction-free. Benchmarks 0.72× wall-clock vs in-session on 20-task/3-wave workloads. Paired with a zero-Claude-cost local streaming UI at `127.0.0.1:7842` that renders all workers' stream-json output as a continuous claude.ai-style feed — task/wave banners, duration + usage chips, token corner bar, localStorage filters, replay via `WS /feed?from=N`. Recovery: `--resume` reconciles interrupted runs using commit + progress.md evidence; ambiguous tasks (commit without progress entry) are flagged for operator triage, never silently claimed done. CLI: `gsd-t orchestrate`, `gsd-t benchmark-orchestrator`, `gsd-t stream-feed`. Contracts: `stream-json-sink-contract.md` v1.1.0, `wave-join-contract.md`, `completion-signal-contract.md`, `metrics-schema-contract.md`.
 **Always-Headless Spawn (M43 D4, v3.16.x+) — Channel Separation** — every GSD-T command spawns detached, unconditionally. No `--watch`, no `--in-session`, no `--headless` opt-in, no context-meter threshold that reroutes. The dialog channel is reserved for human↔Claude conversation; every workflow turn is a detached headless child. Interactive session shows a launch banner + live-transcript URL + event-stream path, then exits — results surface via the read-back banner on the user's next message. Detached workers emit JSONL events to `.gsd-t/events/YYYY-MM-DD.jsonl` at every phase boundary — shared by dashboard and (historically) the watch command. The only in-session surface is the `/gsd` router (for dialog-only exploratory turns). See `.gsd-t/contracts/headless-default-contract.md` v2.0.0 and `unattended-event-stream-contract.md` v1.0.0.
-**Live Transcript as Primary Surface (M43 D6, v3.16.13)** — every detached spawn prints a one-line banner (`▶ Live transcript: http://127.0.0.1:{port}/transcript/{id}`) pointing at a browser viewer that SSE-streams the child's stdout and renders a collapsible "Tool Cost" sidebar panel showing per-tool attributed tokens and cost (sourced from `/transcript/:id/tool-cost`, which proxies to the M43 D2 tool-attribution library). The dashboard server auto-starts (`scripts/gsd-t-dashboard-autostart.cjs`) idempotently on each spawn — a port probe backs off when a server is already running, otherwise a fork-detach writes `.gsd-t/.dashboard.pid`. Port is project-scoped via `projectScopedDefaultPort(projectDir)` so multi-project workflows don't clobber each other. Contract: `dashboard-server-contract.md` v1.2.0.
+**Live Transcript as Primary Surface (M43 D6, v3.16.13 — extended in M47, v3.21.10)** — every detached spawn prints a one-line banner (`▶ Live transcript: http://127.0.0.1:{port}/transcript/{id}`) pointing at a browser viewer that SSE-streams the child's stdout and renders a collapsible "Tool Cost" sidebar panel showing per-tool attributed tokens and cost (sourced from `/transcript/:id/tool-cost`, which proxies to the M43 D2 tool-attribution library). The dashboard server auto-starts (`scripts/gsd-t-dashboard-autostart.cjs`) idempotently on each spawn — a port probe backs off when a server is already running, otherwise a fork-detach writes `.gsd-t/.dashboard.pid`. Port is project-scoped via `projectScopedDefaultPort(projectDir)` so multi-project workflows don't clobber each other.
+**Focused Visualizer Redesign (M47, v3.21.10)** — `/transcripts` opens directly to a dual-pane focused view: the **top pane** auto-streams the orchestrator's main in-session conversation (zero clicks — fetched via new `GET /api/main-session`), and the **bottom pane** streams whichever spawn the user clicks. A keyboard- and mouse-resizable splitter sits between them, with position persisted in `sessionStorage` (along with selection, completed-section toggle, and right-rail collapsed state). The left rail splits into three sections — `★ Main Session`, `Live Spawns`, and `Completed` (last 100 spawns, newest first, status-badged, collapsible). When a spawn transitions running → completed it moves rail sections live without a full reload, and stays selected if focused. The right rail (Spawn Plan / Parallelism / Tool Cost) is preserved under a new collapsible toggle. Bookmarks to `/transcript/:spawnId` continue to land that spawn pre-selected in the bottom pane. Contract: `dashboard-server-contract.md` v1.3.0 (additive — `status: 'active' \| 'completed'` field on in-session entries, derived from a 30s mtime window; `/api/main-session` endpoint with path-traversal guard + `Cache-Control: no-store`).
 - **Surgical model selection** — `bin/model-selector.js` assigns haiku/sonnet/opus per phase via a declarative rules table; `/advisor` escalation path with convention-based fallback.
 - **Per-spawn token telemetry** — `.gsd-t/token-metrics.jsonl` records one 18-field row per Task subagent spawn.
 **Context Meter (M34/M38/M43 D4) — Observational Only** — PostToolUse hook writes `.gsd-t/.context-meter-state.json` via local token estimation. Under M43 D4 (channel-separation inversion, `headless-default-contract.md` v2.0.0) the meter is OBSERVATIONAL ONLY: the pct is recorded into the token-log `Ctx%` column on the next spawn, but no threshold gates any routing decision — every command spawns detached regardless. The `context-meter-contract.md` single-band model is preserved for the value itself; it no longer drives in-flight pauses or spawn-time rerouting.

package/commands/gsd-t-visualize.md

@@ -55,52 +55,49 @@ If `.gsd-t/graph/index.json` exists, the dashboard can render entity-relationshi
 
 If `$ARGUMENTS` contains "stop", skip to **Step 5**. Otherwise continue to Step 3.
 
-## Step 3: Resolve Port + Check if Server is Already Running
-
-The dashboard server binds to a **per-project hashed port** in `[7433, 7532]` (see `projectScopedDefaultPort` in `gsd-t-dashboard-server.js`). Resolve it once and reuse:
+## Step 3: Check if Server is Already Running
 
+Run via Bash:
 ```bash
-PORT=$(node -e "console.log(require('$HOME/.claude/scripts/gsd-t-dashboard-server.js').resolvePort({ projectDir: process.cwd() }))")
 if [ -f .gsd-t/dashboard.pid ]; then
   PID=$(cat .gsd-t/dashboard.pid)
-  curl -sf http://localhost:$PORT/ping 2>/dev/null | grep -q '"ok"' && echo "SERVER_RUNNING=true" || echo "SERVER_RUNNING=false"
+  curl -sf http://localhost:7433/ping 2>/dev/null | grep -q '"ok"' && echo "SERVER_RUNNING=true" || echo "SERVER_RUNNING=false"
 else
   echo "SERVER_RUNNING=false"
 fi
 ```
 
-If output is `SERVER_RUNNING=true`, skip Step 3a and go directly to Step 4. Carry `$PORT` forward to subsequent steps.
+If output is `SERVER_RUNNING=true`, skip Step 3a and go directly to Step 4.
 
 ### Step 3a: Start Server if Not Running
 
-Run via Bash (reuses `$PORT` from Step 3):
+Run via Bash:
 ```bash
 node ~/.claude/scripts/gsd-t-dashboard-server.js --detach || true
 for i in 1 2 3 4 5; do
-  curl -sf http://localhost:$PORT/ping 2>/dev/null | grep -q '"ok"' && break
+  curl -sf http://localhost:7433/ping 2>/dev/null | grep -q '"ok"' && break
   sleep 1
 done
 ```
 
 ## Step 4: Open Browser
 
-Run via Bash (reuses `$PORT` from Step 3):
+Run via Bash:
 ```bash
-URL="http://localhost:$PORT"
-node -e "const {execFileSync}=require('child_process'); const url=process.argv[1]; try { if(process.platform==='win32'){execFileSync('cmd',['/c','start','',url],{stdio:'ignore'})}else{execFileSync(process.platform==='darwin'?'open':'xdg-open',[url],{stdio:'ignore'})} } catch(e) { console.error('Could not open browser:', e.message); }" "$URL" || true
+node -e "const {execFileSync}=require('child_process'); const url='http://localhost:7433'; try { if(process.platform==='win32'){execFileSync('cmd',['/c','start','',url],{stdio:'ignore'})}else{execFileSync(process.platform==='darwin'?'open':'xdg-open',[url],{stdio:'ignore'})} } catch(e) { console.error('Could not open browser:', e.message); }" || true
 ```
 
-Report to the user: "Dashboard is running at $URL — browser opened."
+Report to the user: "Dashboard is running at http://localhost:7433 — browser opened."
 
 ## Step 5: Stop Handler
 
-Run only when `$ARGUMENTS` contains "stop". Resolves the same hashed port used at start:
+Run only when `$ARGUMENTS` contains "stop".
 
+Run via Bash:
 ```bash
-PORT=$(node -e "console.log(require('$HOME/.claude/scripts/gsd-t-dashboard-server.js').resolvePort({ projectDir: process.cwd() }))")
 if [ -f .gsd-t/dashboard.pid ]; then
   PID=$(cat .gsd-t/dashboard.pid)
-  curl -sf http://localhost:$PORT/stop 2>/dev/null || kill $PID 2>/dev/null || true
+  curl -sf http://localhost:7433/stop 2>/dev/null || kill $PID 2>/dev/null || true
   rm -f .gsd-t/dashboard.pid
   echo "Dashboard server stopped"
 else

package/docs/architecture.md

@@ -75,9 +75,20 @@ The framework has no runtime — it is consumed entirely by Claude Code's slash
 - **Transcript viewer panel** (`scripts/gsd-t-transcript.html`): collapsible "Tool Cost" sidebar panel that fetches `/transcript/:id/tool-cost` on viewer load and debounces a 2s refresh on each SSE `turn_complete` / `result` frame. Renders top-N tools sorted by attributed tokens with name, call count, tokens, and USD cost. Live badge green while SSE is open, muted otherwise. 503 → friendly "tool attribution not yet wired" row. `window.__gsdtRenderToolCostPanel` exposed for DOM tests.
 - **URL banner** (`bin/headless-auto-spawn.cjs`): every detached spawn prints `▶ Live transcript: http://127.0.0.1:{port}/transcript/{spawn-id}` on stdout. Port sourced from `ensureDashboardRunning().port` with `projectScopedDefaultPort(projectDir)` fallback. Best-effort — banner failure never crashes the spawn.
 - **Dashboard autostart** (`scripts/gsd-t-dashboard-autostart.cjs`, ~160 lines, zero deps): `ensureDashboardRunning({projectDir, port?})` probes the port synchronously via a short-lived subprocess (`_isPortBusySync` issues `net.createServer().listen(port)` host-less — matches the server's IPv6-wildcard bind on macOS dual-stack; specifying `127.0.0.1` would falsely report free). If free, fork-detaches the server with `spawn(…, {detached:true, stdio:'ignore'})` + `child.unref()` + writes `.gsd-t/.dashboard.pid` (hyphen → dot distinguishes this lifecycle from M38's `.gsd-t/dashboard.pid`). Idempotent on repeated invocation. Called at the top of `autoSpawnHeadless` so the banner printed immediately after resolves to a live listener.
-- **Contract**: `.gsd-t/contracts/dashboard-server-contract.md` v1.2.0 — new §HTTP Endpoints entries, §Banner Format, §Autostart sections.
+- **Contract**: `.gsd-t/contracts/dashboard-server-contract.md` v1.2.0 — new §HTTP Endpoints entries, §Banner Format, §Autostart sections. (Bumped to v1.3.0 in M47 — see Focused Visualizer Redesign below.)
 - **Tests**: `test/m43-dashboard-tool-cost-route.test.js` (9), `test/m43-transcript-panel.test.js` (12), `test/m43-dashboard-autostart.test.js` (6), `test/m43-url-banner.test.js` (3).
 
+### Focused Visualizer Redesign (M47, v3.21.10)
+- **Server endpoint** (`scripts/gsd-t-dashboard-server.js::handleMainSession`): new `GET /api/main-session` returns `{ filename, sessionId, mtimeMs }` for the most-recently-modified `in-session-*.ndjson` file in `transcripts/`, or `{ null, null, null }` when none exist. Path-traversal guarded by reusing `isValidSpawnId` on each candidate filename. Sets `Cache-Control: no-store` (the viewer hits this on every page load, never cached). Wired alongside the existing `/transcripts` route.
+- **Status field derivation** (`listInSessionTranscripts`): each in-session entry now carries `status: 'active' | 'completed'` derived from a 30-second mtime window (`Date.now() - stat.mtimeMs < 30_000` → `active`). Replaces the prior hardcoded `"active"` literal. Propagates through `handleTranscriptsList` to the merged `/transcripts` JSON. Future `success | failed | killed` taxonomy is a one-file change here — the viewer code branches on the field, neutral fallback for unrecognized values.
+- **Dual-pane viewer** (`scripts/gsd-t-transcript.html`): `<main>` becomes a vertical flex container holding `<section id="main-stream">` (top — auto-streams the orchestrator's main in-session conversation via `/api/main-session` + `/transcript/in-session-{sid}/stream`) + `<div class="splitter" role="separator">` (keyboard- and mouse-resizable, ArrowUp/Down ±5%, Home/End snap 20/80, position persisted in `sessionStorage` under `gsd-t.viewer.splitterPct`) + `<section id="spawn-stream">` (bottom — the user-selected spawn; legacy `<div id="stream">` lives inside, preserving all existing renderer code paths). Shared frame renderer threads an optional target via a module-scope `renderTarget` swap inside `renderFrame(frame, arrivedAt, target)`.
+- **3-section left rail**: `★ Main Session` / `Live Spawns` / `Completed` (last 100 newest first, status-badged, collapsible). Bucketing in `bucketAndRender(spawns)` consumes D2's `status` field — D1 never computes status itself. Live → Completed transition is reactive (DOM diff via `data-spawn-id` lookups); selected spawn stays selected if it transitions sections.
+- **sessionStorage persistence** (4 keys): `gsd-t.viewer.selectedSpawnId`, `gsd-t.viewer.splitterPct`, `gsd-t.viewer.completedExpanded`, `gsd-t.viewer.rightRailCollapsed`. `_ssGet`/`_ssSet` wrappers fail-soft so the IIFE init survives DOM-shim test sandboxes that don't provide a `sessionStorage` shim.
+- **Right-rail collapse**: `<aside class="spawn-panel" data-collapsed>` toggle button flips `data-right-rail-collapsed` on `<body>`, which collapses the third grid track via `--right-rail-w: 0px` rule.
+- **Contract**: `.gsd-t/contracts/dashboard-server-contract.md` **v1.3.0** — additive §`GET /api/main-session` and §`In-Session Entry Status Field` sections; `handleMainSession` added to Module Exports.
+- **Integration contract**: `.gsd-t/contracts/m47-integration-points.md` — D1↔D2 wiring, dependency graph, single-wave parallel execution plan.
+- **Tests**: `test/dashboard-server.test.js` — 13 new assertions across 3 describe blocks (4 status-field tests, 5 `/api/main-session` tests, 4 HTML structural-marker / sessionStorage-key / CSS toggle tests). Suite total 2058 / 2060 (M47 +13/+13; 2 pre-existing flakes preserved). Existing 5 viewer-route tests updated for new structure (regex relaxation: `grid-template-columns` allows `var(--right-rail-w)`; `<main id="stream">` allows `id="stream"` regardless of element).
+
 ### Headless Mode (M23 — complete)
 - **doHeadless(args)**: Dispatch function for the `headless` CLI subcommand.
 - **doHeadlessExec(command, cmdArgs, flags)**: Wraps `claude -p "/gsd-t-{command}"` via `execFileSync`. Verifies claude CLI availability, enforces timeout, writes log file if `--log` requested. Returns structured JSON if `--json` flag set. (M36 Phase 0: prompt form is `/gsd-t-X`, NOT `/gsd-t-X` — non-interactive mode rejects the `/` namespace prefix.)

package/docs/requirements.md

@@ -684,3 +684,19 @@ Acceptance:
 - Tests in `test/m46-d1-iter-parallel.test.js` pass (serial fallback, parallel batch, mode-safety gate, error isolation, state reconciliation).
 - Proof speedup ≥ **3.0×** recorded in `.gsd-t/metrics/m46-iter-proof.json` — a synthetic `batchSize = 4` measurement of the `_runIterParallel` driver, not the production main loop (which remains serial until backlog #24 lands).
 - `.gsd-t/contracts/iter-parallel-contract.md` v1.0.0 present as the locked source of truth.
+
+## M47 Focused Visualizer Redesign (executed — 2026-05-06)
+
+| REQ-ID | Requirement Summary | Domain | Task(s) | Status |
+|--------|---------------------|--------|---------|--------|
+| REQ-M47-D1-01 | Default `/transcripts` landing shows the main in-session conversation streaming in the top pane within 3s, zero clicks (success criterion 1). | m47-d1-viewer-redesign | T2, T4 | done |
+| REQ-M47-D1-02 | Click any rail entry → loads it into the bottom pane within 1s; `gsd-t.viewer.selectedSpawnId` sessionStorage key persists selection across reload (success criterion 2). | m47-d1-viewer-redesign | T3, T5 | done |
+| REQ-M47-D1-03 | Reactive Live → Completed transition without full reload; if the user is currently focused on the transitioning spawn, focus stays (no auto-revert) (success criterion 3). | m47-d1-viewer-redesign | T5 | done |
+| REQ-M47-D1-04 | Completed section displays at least 100 historical spawns capped, sorted newest-first, with status badges; toggle collapses/expands; `gsd-t.viewer.completedExpanded` persists state (success criterion 4). | m47-d1-viewer-redesign | T3, T5 | done |
+| REQ-M47-D1-05 | Splitter is mouse-draggable + keyboard-accessible (ArrowUp/Down ±5%, Home/End snap to 20/80); position persists in `gsd-t.viewer.splitterPct` sessionStorage. | m47-d1-viewer-redesign | T2, T6 | done |
+| REQ-M47-D1-06 | Right rail (Spawn Plan / Parallelism / Tool Cost) preserved under collapsible toggle; `gsd-t.viewer.rightRailCollapsed` sessionStorage key. | m47-d1-viewer-redesign | T2 | done |
+| REQ-M47-D1-07 | Back-compat: `data-spawn-id="__SPAWN_ID__"` server-side substitution preserved; bookmarks to `/transcript/:spawnId` land with that spawn pre-selected in the bottom pane. Existing 7 viewer-route/HTML tests stay green. | m47-d1-viewer-redesign | T2, T7 | done |
+| REQ-M47-D2-01 | `listInSessionTranscripts` (and the merged `handleTranscriptsList` payload) returns each in-session entry with `status: 'active' \| 'completed'` derived from a 30s mtime window. | m47-d2-server-helpers | T1, T4 | done |
+| REQ-M47-D2-02 | New `GET /api/main-session` endpoint returns `{ filename, sessionId, mtimeMs }` for the most-recently-modified `in-session-*.ndjson` (or `{ null, null, null }` when none exist); path-traversal-guarded; no caching. | m47-d2-server-helpers | T2, T5 | done |
+| REQ-M47-D2-03 | `dashboard-server-contract.md` bumped to v1.3.0 documenting the additive `status` field semantics + `/api/main-session` schema; module exports updated. | m47-d2-server-helpers | T3 | done |
+| REQ-M47-D2-04 | Test suite passes baseline 2045/2047 + new M47 tests (D1 + D2 net add); no NEW regressions in the 7 existing viewer-route/HTML tests (success criterion 5). | m47-d1-viewer-redesign + m47-d2-server-helpers | D1 T7, D2 T4–T5 | done |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "3.20.13",
+  "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

@@ -184,10 +184,18 @@ function isValidSpawnId(id) {
 // NDJSONs are on disk. Synthesizes a spawn-shaped entry per in-session file
 // using filesystem timestamps; the viewer's `in-session-` prefix detection
 // then labels it as `💬 conversation`.
+//
+// M47 D2: `status` is derived per-entry from mtime. A file modified within the
+// last 30 seconds is `active` (the conversation hook is still appending);
+// otherwise `completed`. The viewer (M47 D1) buckets entries by this field
+// into Live vs Completed rail sections. The `success | failed | killed`
+// taxonomy is intentionally out of scope here — see contract v1.3.0.
+const IN_SESSION_ACTIVE_WINDOW_MS = 30_000;
 function listInSessionTranscripts(projectDir) {
   const dir = transcriptsDir(projectDir);
   let files;
   try { files = fs.readdirSync(dir); } catch { return []; }
+  const now = Date.now();
   const out = [];
   for (const f of files) {
     if (!f.startsWith("in-session-") || !f.endsWith(".ndjson")) continue;
@@ -195,18 +203,48 @@ function listInSessionTranscripts(projectDir) {
     if (!isValidSpawnId(spawnId)) continue;
     let stat;
     try { stat = fs.statSync(path.join(dir, f)); } catch { continue; }
+    const status = (now - stat.mtimeMs) < IN_SESSION_ACTIVE_WINDOW_MS ? "active" : "completed";
     out.push({
       spawnId,
       command: "in-session conversation",
       startedAt: stat.birthtime ? stat.birthtime.toISOString() : stat.mtime.toISOString(),
       lastUpdatedAt: stat.mtime.toISOString(),
-      status: "active", // best-effort; the viewer doesn't currently use this field
+      status,
       kind: "in-session",
     });
   }
   return out;
 }
 
+// M47 D2: Resolve the most-recently-modified `in-session-*.ndjson` file. Used
+// by the viewer's top-pane default load (zero-click main-conversation stream).
+// Reuses `isValidSpawnId` for path-traversal safety.
+function handleMainSession(req, res, projectDir) {
+  const dir = transcriptsDir(projectDir);
+  let files;
+  try { files = fs.readdirSync(dir); } catch { files = []; }
+  let best = null;
+  for (const f of files) {
+    if (!f.startsWith("in-session-") || !f.endsWith(".ndjson")) continue;
+    const spawnId = f.slice(0, -".ndjson".length);
+    if (!isValidSpawnId(spawnId)) continue;
+    let stat;
+    try { stat = fs.statSync(path.join(dir, f)); } catch { continue; }
+    if (!best || stat.mtimeMs > best.mtimeMs) {
+      best = { filename: f, sessionId: f.slice("in-session-".length, -".ndjson".length), mtimeMs: stat.mtimeMs };
+    }
+  }
+  res.writeHead(200, {
+    "Content-Type": "application/json",
+    "Cache-Control": "no-store",
+  });
+  if (!best) {
+    res.end(JSON.stringify({ filename: null, sessionId: null, mtimeMs: null }));
+    return;
+  }
+  res.end(JSON.stringify(best));
+}
+
 function handleTranscriptsList(req, res, projectDir, transcriptHtmlPath) {
   const idx = readTranscriptsIndex(projectDir);
 
@@ -235,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);
     });
@@ -245,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 = "";
@@ -721,6 +784,8 @@ function startServer(port, eventsDir, htmlPath, projectDir, transcriptHtmlPath)
     if (url === "/ping") return handlePing(req, res, port);
     if (url === "/stop") return handleStop(req, res, server);
     if (url === "/transcripts") return handleTranscriptsList(req, res, projDir, tHtmlPath);
+    // M47 D2 — most-recent in-session NDJSON for the viewer top-pane default load
+    if (url === "/api/main-session") return handleMainSession(req, res, projDir);
     // M44 D8 — spawn plans: GET list + SSE change stream
     if (url === "/api/spawn-plans") return handleSpawnPlans(req, res, projDir);
     if (url === "/api/spawn-plans/stream") return handleSpawnPlanUpdates(req, res, projDir);
@@ -743,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);
@@ -762,6 +827,7 @@ module.exports = {
   readIndexEntry,
   isValidSpawnId,
   listInSessionTranscripts,
+  handleMainSession,
   handleTranscriptsList,
   handleTranscriptStream,
   handleTranscriptPage,

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;
@@ -22,10 +22,46 @@
       --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 320px; grid-template-rows: auto 1fr; min-height: 100vh; }
+    /* M47 D1: split-pane layout. Top pane = main in-session conversation
+       (zero-click default), bottom pane = user-selected spawn. Splitter
+       handle in the middle is keyboard- + mouse-draggable; persisted via
+       sessionStorage. Right-rail collapsibility is also persisted. */
+    :root {
+      --main-pane-pct: 50;             /* clamped 10–90 by JS */
+      --right-rail-w: 320px;           /* 0 when collapsed via [data-collapsed] */
+    }
+    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 var(--right-rail-w); grid-template-rows: auto 1fr; min-height: 100vh; }
     body > header { grid-column: 1 / -1; }
     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; }
+    /* M47 D1: <main> becomes a vertical flex container holding the two streams + splitter handle. */
+    body > main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: calc(100vh - 50px); }
+    /* M47 D1 — when the right rail is collapsed, the body grid track becomes 0. */
+    body[data-right-rail-collapsed="true"] { --right-rail-w: 0px; }
+    body[data-right-rail-collapsed="true"] > aside.spawn-panel { display: none; }
+    /* M47 D1 — split-pane: top + bottom share calc(100vh - 50px - splitter) by var %. */
+    main #main-stream, main #spawn-stream { overflow-y: auto; padding: 16px; padding-bottom: 80px; max-width: 960px; margin: 0 auto; width: 100%; box-sizing: border-box; }
+    main #main-stream { flex: 0 0 calc(var(--main-pane-pct) * 1%); border-bottom: none; }
+    main #spawn-stream { flex: 1 1 auto; }
+    main .splitter { flex: 0 0 6px; background: var(--border); cursor: row-resize; user-select: none; outline: none; transition: background 120ms ease; }
+    main .splitter:hover, main .splitter:focus { background: var(--accent); }
+    main .splitter:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
+    main .pane-empty { color: var(--fg-xdim); font-style: italic; padding: 12px; font-size: 13px; }
+    /* M47 D1 — left-rail 3 sections (Main / Live / Completed). */
+    aside.left-rail .rail-main, aside.left-rail .rail-live, aside.left-rail .rail-completed { padding: 0 0 8px 0; }
+    aside.left-rail .rail-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 12px; font-size: 11px; text-transform: uppercase; color: var(--fg-xdim); letter-spacing: 0.08em; }
+    aside.left-rail .rail-header .chevron { background: transparent; border: 0; color: var(--fg-xdim); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 0 4px; }
+    aside.left-rail .rail-header .chevron:hover { color: var(--fg); }
+    aside.left-rail .rail-completed[data-expanded="false"] .rail-body { display: none; }
+    aside.left-rail .rail-completed[data-expanded="false"] .rail-header .chevron { transform: rotate(-90deg); display: inline-block; }
+    /* M47 D1 — status badge dots on completed entries. */
+    aside .node .badge-status { flex: 0 0 auto; font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-right: 4px; border: 1px solid var(--border); color: var(--fg-xdim); background: var(--bg); }
+    aside .node .badge-status.success { color: var(--green); border-color: var(--green); }
+    aside .node .badge-status.failed  { color: var(--red); border-color: var(--red); }
+    aside .node .badge-status.killed  { color: var(--fg-xdim); border-color: var(--fg-xdim); }
+    aside .node .badge-status.completed { color: var(--fg-dim); border-color: var(--border); }
+    /* M47 D1 — right-rail collapse toggle */
+    .spawn-panel .panel-toggle { background: transparent; border: 1px solid var(--border); color: var(--fg-xdim); font-family: var(--mono); font-size: 11px; padding: 1px 6px; cursor: pointer; border-radius: 3px; }
+    .spawn-panel .panel-toggle:hover { color: var(--fg); border-color: var(--accent); }
     /* 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; }
@@ -121,7 +157,8 @@
     header .status.ended .dot { background: var(--fg-xdim); }
     header .status.error .dot { background: var(--red); }
 
-    main { padding: 16px; padding-bottom: 120px; max-width: 960px; margin: 0 auto; width: 100%; }
+    /* M47 D1 — padding moved onto the inner #main-stream / #spawn-stream containers
+       so the splitter sits flush between them. The outer <main> is a flex column. */
     .frame { margin: 8px 0; }
     .frame.system { color: var(--fg-xdim); font-style: italic; font-size: 12px; padding: 2px 0; }
     .frame.user { border-left: 3px solid var(--accent); padding: 6px 12px; background: var(--bg-raised); border-radius: 0 4px 4px 0; }
@@ -146,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; }
@@ -165,14 +213,31 @@
 </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>
   </header>
   <aside class="left-rail">
-    <h3>Spawns</h3>
-    <div class="tree" id="tree"></div>
+    <!-- M47 D1 — three pre-rendered sections. Bucketing logic in Task 5
+         consumes D2's `status` field; until then, in-session entries land
+         in Main Session and everything else falls through to Live Spawns. -->
+    <section class="rail-main" data-rail-section="main">
+      <div class="rail-header"><span>★ Main Session</span></div>
+      <div class="rail-body" id="rail-main-body"><div class="empty">No in-session conversation captured yet.</div></div>
+    </section>
+    <section class="rail-live" data-rail-section="live">
+      <div class="rail-header"><span>Live Spawns</span></div>
+      <div class="rail-body">
+        <!-- Legacy mount point: existing renderTree() writes into #tree as a
+             no-op fallback while Task 5 bucketing rolls out. -->
+        <div class="tree" id="tree"></div>
+      </div>
+    </section>
+    <section class="rail-completed" data-rail-section="completed" data-expanded="true">
+      <div class="rail-header"><span>Completed</span><button class="chevron" id="rail-completed-toggle" aria-label="Toggle completed section">▾</button></div>
+      <div class="rail-body" id="rail-completed-body"><div class="empty">No completed spawns yet.</div></div>
+    </section>
     <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">
@@ -180,11 +245,28 @@
       </div>
     </details>
   </aside>
-  <main id="stream"></main>
+  <main>
+    <!-- M47 D1 — top pane: main in-session conversation (zero-click default).
+         Wired by Task 4 to /api/main-session + /transcript/in-session-:id/stream. -->
+    <section id="main-stream" aria-label="Main session conversation">
+      <div class="pane-empty">No in-session conversation captured yet.</div>
+    </section>
+    <!-- Splitter: keyboard accessible (ArrowUp/ArrowDown nudge ±5%, Home/End snap). -->
+    <div class="splitter" id="splitter" role="separator" tabindex="0" aria-orientation="horizontal" aria-label="Resize main vs spawn pane"></div>
+    <!-- Bottom pane: user-selected spawn. Existing #stream id preserved so
+         legacy selectors keep working — it now lives inside #spawn-stream. -->
+    <section id="spawn-stream" aria-label="Selected spawn transcript">
+      <div id="stream"></div>
+    </section>
+  </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>
+       Additive; does not change the transcript stream rendering.
+       M47 D1 — wrapped in <aside class="spawn-panel" data-collapsed> with a toggle. -->
+  <aside class="spawn-panel" id="spawn-plan-panel" data-collapsed="false">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
+      <h2 style="margin:0;">Spawn Plan</h2>
+      <button class="panel-toggle" id="spawn-panel-toggle" aria-label="Collapse right rail">⟶</button>
+    </div>
     <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>
@@ -224,6 +306,116 @@
       const statusLabel = statusEl.querySelector('.label');
       const jumpBtn = document.getElementById('jump-btn');
 
+      // M47 D1 — sessionStorage keys (centralized so tests can grep them).
+      const SS_KEY_SELECTED      = 'gsd-t.viewer.selectedSpawnId';
+      const SS_KEY_SPLITTER      = 'gsd-t.viewer.splitterPct';
+      const SS_KEY_COMPLETED     = 'gsd-t.viewer.completedExpanded';
+      const SS_KEY_RIGHT_RAIL    = 'gsd-t.viewer.rightRailCollapsed';
+
+      // M47 D1 — sessionStorage helpers: wrapped so private-mode (or test
+      // sandboxes that don't provide a sessionStorage shim) fall through to
+      // safe defaults instead of throwing during IIFE init.
+      function _ssGet(key)        { try { return (typeof sessionStorage !== 'undefined') ? sessionStorage.getItem(key) : null; } catch { return null; } }
+      function _ssSet(key, value) { try { if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(key, value); } catch { /* private mode */ } }
+
+      // M47 D1 — splitter: restore persisted pct BEFORE first paint to avoid layout shift.
+      (function initSplitterPct() {
+        const raw = _ssGet(SS_KEY_SPLITTER);
+        let pct = 50;
+        const n = parseFloat(raw);
+        if (isFinite(n)) pct = Math.max(10, Math.min(90, n));
+        if (document.documentElement && document.documentElement.style) {
+          document.documentElement.style.setProperty('--main-pane-pct', String(pct));
+        }
+      })();
+
+      // M47 D1 — right-rail collapse: restore persisted state.
+      (function initRightRailCollapsed() {
+        const flag = _ssGet(SS_KEY_RIGHT_RAIL) === '1';
+        if (document.body && document.body.setAttribute) {
+          document.body.setAttribute('data-right-rail-collapsed', flag ? 'true' : 'false');
+        }
+        const panel = document.getElementById('spawn-plan-panel');
+        if (panel && panel.setAttribute) panel.setAttribute('data-collapsed', flag ? 'true' : 'false');
+      })();
+
+      // M47 D1 — completed section: restore persisted state.
+      (function initCompletedExpanded() {
+        const flagRaw = _ssGet(SS_KEY_COMPLETED);
+        const expanded = flagRaw === null ? true : flagRaw === '1';
+        const sec = (document.querySelector ? document.querySelector('section.rail-completed') : null);
+        if (sec && sec.setAttribute) sec.setAttribute('data-expanded', expanded ? 'true' : 'false');
+      })();
+
+      // M47 D1 — splitter wiring (mouse + keyboard).
+      (function wireSplitter() {
+        const splitter = document.getElementById('splitter');
+        if (!splitter || !splitter.addEventListener) return;
+        function setPct(pct) {
+          const clamped = Math.max(10, Math.min(90, pct));
+          if (document.documentElement && document.documentElement.style) {
+            document.documentElement.style.setProperty('--main-pane-pct', String(clamped));
+          }
+          _ssSet(SS_KEY_SPLITTER, String(clamped));
+        }
+        let dragging = false;
+        function onMove(ev) {
+          if (!dragging) return;
+          const main = document.querySelector ? document.querySelector('body > main') : null;
+          if (!main || !main.getBoundingClientRect) return;
+          const r = main.getBoundingClientRect();
+          if (r.height <= 0) return;
+          const pct = ((ev.clientY - r.top) / r.height) * 100;
+          setPct(pct);
+        }
+        function onUp() { dragging = false; if (document.body && document.body.style) document.body.style.cursor = ''; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); }
+        splitter.addEventListener('mousedown', (ev) => {
+          ev.preventDefault();
+          dragging = true;
+          if (document.body && document.body.style) document.body.style.cursor = 'row-resize';
+          window.addEventListener('mousemove', onMove);
+          window.addEventListener('mouseup', onUp);
+        });
+        splitter.addEventListener('keydown', (ev) => {
+          let cur = 50;
+          if (typeof getComputedStyle === 'function' && document.documentElement) {
+            const v = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--main-pane-pct'));
+            if (isFinite(v)) cur = v;
+          }
+          if (ev.key === 'ArrowUp')      { ev.preventDefault(); setPct(cur - 5); }
+          else if (ev.key === 'ArrowDown') { ev.preventDefault(); setPct(cur + 5); }
+          else if (ev.key === 'Home')    { ev.preventDefault(); setPct(20); }
+          else if (ev.key === 'End')     { ev.preventDefault(); setPct(80); }
+        });
+      })();
+
+      // M47 D1 — right-rail collapse toggle.
+      (function wireRightRailToggle() {
+        const btn = document.getElementById('spawn-panel-toggle');
+        const panel = document.getElementById('spawn-plan-panel');
+        if (!btn || !panel || !btn.addEventListener) return;
+        btn.addEventListener('click', () => {
+          const collapsed = panel.getAttribute && panel.getAttribute('data-collapsed') === 'true';
+          const next = !collapsed;
+          if (panel.setAttribute) panel.setAttribute('data-collapsed', next ? 'true' : 'false');
+          if (document.body && document.body.setAttribute) document.body.setAttribute('data-right-rail-collapsed', next ? 'true' : 'false');
+          _ssSet(SS_KEY_RIGHT_RAIL, next ? '1' : '0');
+        });
+      })();
+
+      // M47 D1 — completed section toggle.
+      (function wireCompletedToggle() {
+        const btn = document.getElementById('rail-completed-toggle');
+        const sec = document.querySelector ? document.querySelector('section.rail-completed') : null;
+        if (!btn || !sec || !btn.addEventListener) return;
+        btn.addEventListener('click', () => {
+          const expanded = sec.getAttribute && sec.getAttribute('data-expanded') !== 'false';
+          const next = !expanded;
+          if (sec.setAttribute) sec.setAttribute('data-expanded', next ? 'true' : 'false');
+          _ssSet(SS_KEY_COMPLETED, next ? '1' : '0');
+        });
+      })();
+
       // Pair tool_result → tool_use by tool_use_id so the renderer can place
       // the result next to the call even when they come as separate frames.
       const toolUseById = new Map();
@@ -259,11 +451,27 @@
       }
       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');
         ts.className = 'ts';
@@ -272,9 +480,19 @@
         // 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) {
+        (renderTarget || stream).appendChild(el);
+        // Auto-scroll only applies to the bottom pane (where the user is
+        // actively focused). The top pane scrolls within itself; we let the
+        // user's scrollbar manage it without yanking focus.
+        if (renderTarget === stream && autoScroll) {
           requestAnimationFrame(() => window.scrollTo(0, document.body.scrollHeight));
+        } else if (renderTarget && renderTarget !== stream) {
+          // Auto-scroll the top pane only when its viewport is at-bottom (similar
+          // logic to atBottom() but pane-local).
+          const pane = renderTarget.parentElement || renderTarget;
+          if (pane && pane.scrollHeight - pane.scrollTop - pane.clientHeight < 60) {
+            requestAnimationFrame(() => { pane.scrollTop = pane.scrollHeight; });
+          }
         }
       }
 
@@ -406,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';
@@ -437,14 +723,34 @@
       }
       window.__gsdtRenderCompactMarker = renderCompactMarker;
 
-      function renderFrame(frame, arrivedAt) {
+      // M47 D1: optional `target` element switches render destination for the
+      // duration of this call (top pane = #main-stream, bottom pane = #stream).
+      function renderFrame(frame, arrivedAt, target) {
         if (!frame || typeof frame !== 'object') return;
-        const ts = arrivedAt instanceof Date ? arrivedAt : new Date();
+        const prev = renderTarget;
+        if (target) renderTarget = target;
+        try { return renderFrameInner(frame, arrivedAt); }
+        finally { renderTarget = prev; }
+      }
+      function renderFrameInner(frame, arrivedAt) {
+        if (!frame || typeof frame !== 'object') return;
+        // 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);
@@ -564,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;
           });
@@ -615,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];
@@ -635,13 +954,136 @@
         pulseNode(latest.spawnId);
       }
 
+      // M47 D1 — render a single rail entry (used by bucketing).
+      function renderRailEntry(node, container, opts) {
+        const isInSession = typeof node.spawnId === 'string' && node.spawnId.indexOf('in-session-') === 0;
+        const currentId = (location.hash || '').slice(1) || spawnId;
+        const el = document.createElement('div');
+        el.className = 'node ' + statusClass(node);
+        if (isInSession) el.classList.add('in-session');
+        if (node.spawnId === currentId) el.classList.add('active');
+        el.style.paddingLeft = '12px';
+        const dot = document.createElement('span'); dot.className = 'dot';
+        const name = document.createElement('span'); name.className = 'name';
+        // M47 D1 — status badge (gated to completed-section entries; others
+        // already use the running/stopped/failed `dot` for state).
+        if (opts && opts.showBadge) {
+          const badgeKind = (function () {
+            const s = node.status;
+            if (s === 'success' || s === 'failed' || s === 'killed') return s;
+            return 'completed'; // neutral fallback for any other terminal value
+          })();
+          const badge = document.createElement('span');
+          badge.className = 'badge-status ' + badgeKind;
+          badge.textContent = badgeKind;
+          name.appendChild(badge);
+        }
+        if (isInSession) {
+          const tag = document.createElement('span');
+          tag.className = 'label-in-session';
+          tag.textContent = '💬 conversation';
+          name.appendChild(tag);
+          const tail = document.createElement('span');
+          tail.textContent = ' · ' + node.spawnId.slice(-8);
+          name.appendChild(tail);
+        } else {
+          const tail = document.createElement('span');
+          tail.textContent = (node.command || 'spawn') + ' · ' + node.spawnId.slice(-8);
+          name.appendChild(tail);
+        }
+        name.title = (node.description || node.spawnId) + '\n' + (node.startedAt || '');
+        const kill = document.createElement('button');
+        kill.className = 'kill';
+        kill.textContent = 'kill';
+        kill.disabled = node.status !== 'running' || !node.workerPid;
+        kill.addEventListener('click', (ev) => {
+          ev.stopPropagation();
+          if (!confirm('SIGTERM spawn ' + node.spawnId + ' (pid ' + node.workerPid + ')?')) return;
+          fetch('/transcript/' + encodeURIComponent(node.spawnId) + '/kill', { method: 'POST' })
+            .then((r) => r.json())
+            .then((j) => { kill.textContent = j.status || 'killed'; })
+            .catch(() => { kill.textContent = 'err'; });
+        });
+        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;
+        });
+        container.appendChild(el);
+      }
+      window.__gsdtRenderRailEntry = renderRailEntry;
+
+      const COMPLETED_RAIL_CAP = 100;
+      // M47 D1 — top-level bucketing into the 3 rail sections.
+      // Bucketing rules (per m47-integration-points.md):
+      //   - in-session-* AND most-recent     → Main Session (★)
+      //   - status === 'active'              → Live Spawns
+      //   - any other (default 'completed')  → Completed (capped 100)
+      function bucketAndRender(spawns) {
+        const mainBody = document.getElementById('rail-main-body');
+        const liveTree = document.getElementById('tree');
+        const completedBody = document.getElementById('rail-completed-body');
+        if (!mainBody || !liveTree || !completedBody) return;
+        const sortedByMtime = spawns.slice().sort(
+          (a, b) => (Date.parse(b.lastUpdatedAt || b.startedAt) || 0) - (Date.parse(a.lastUpdatedAt || a.startedAt) || 0)
+        );
+        const inSessionSorted = sortedByMtime.filter((s) => typeof s.spawnId === 'string' && s.spawnId.indexOf('in-session-') === 0);
+        const mainEntry = inSessionSorted[0] || null;
+        const others = spawns.filter((s) => s !== mainEntry);
+        // Live: status === 'active' OR (status absent AND not terminal — preserve
+        // legacy spawn-index entries that never had a status field).
+        const live = [];
+        const completed = [];
+        for (const s of others) {
+          if (s.status === 'completed' || s.status === 'success' || s.status === 'failed' || s.status === 'killed') {
+            completed.push(s);
+          } else {
+            live.push(s);
+          }
+        }
+        // Main rail body
+        mainBody.innerHTML = '';
+        if (mainEntry) {
+          renderRailEntry(mainEntry, mainBody, { showBadge: false });
+        } else {
+          const e = document.createElement('div'); e.className = 'empty';
+          e.textContent = 'No in-session conversation captured yet.';
+          mainBody.appendChild(e);
+        }
+        // Live rail (legacy #tree mount — preserves existing tests / selectors).
+        // Build a parent-indented tree from `live` only so completed-only
+        // entries don't duplicate.
+        renderTree(buildTree(live));
+        // Completed rail (capped 100, newest first by startedAt desc).
+        completedBody.innerHTML = '';
+        const completedSorted = completed
+          .slice()
+          .sort((a, b) => (Date.parse(b.startedAt) || 0) - (Date.parse(a.startedAt) || 0))
+          .slice(0, COMPLETED_RAIL_CAP);
+        if (completedSorted.length === 0) {
+          const e = document.createElement('div'); e.className = 'empty';
+          e.textContent = 'No completed spawns yet.';
+          completedBody.appendChild(e);
+        } else {
+          for (const s of completedSorted) renderRailEntry(s, completedBody, { showBadge: true });
+        }
+      }
+      window.__gsdtBucketAndRender = bucketAndRender;
+
       let pollTimer = null;
       function pollSpawns() {
         fetch('/transcripts')
           .then((r) => r.json())
           .then((j) => {
             const spawns = j.spawns || [];
-            renderTree(buildTree(spawns));
+            bucketAndRender(spawns);
             maybeAutoFollow(spawns);
           })
           .catch(() => { /* keep last render */ });
@@ -740,9 +1182,27 @@
       window.__gsdtFetchToolCost = fetchToolCost;
 
       // ── SSE connection (reconnectable on hash change) ───────────────────
+      //
+      // M47 D1: dual-pane wiring.
+      //   - connect(id)         → bottom pane (#stream inside #spawn-stream)
+      //   - connectMain(sid)    → top pane    (#main-stream)
+      //
+      // The two channels are independent — each owns its own EventSource. The
+      // bottom pane preserves all M42/M43 behavior (auto-follow, hash
+      // bookmarks, tool-cost refresh). The top pane is read-only-style: it
+      // renders the in-session conversation NDJSON via /transcript/in-session-{sid}/stream.
 
       let src = null;
       function connect(id) {
+        if (!id) {
+          // Empty bottom pane — show the click-to-focus empty state.
+          if (src) { try { src.close(); } catch { /* gone */ } src = null; }
+          stream.innerHTML = '<div class="pane-empty">Click any spawn in the rail to focus it here.</div>';
+          toolUseById.clear();
+          document.getElementById('hdr-spawn-id').textContent = '';
+          setStatus('', 'idle');
+          return;
+        }
         if (src) { try { src.close(); } catch { /* gone */ } src = null; }
         stream.innerHTML = '';
         toolUseById.clear();
@@ -750,6 +1210,8 @@
         jumpBtn.classList.remove('visible');
         document.getElementById('hdr-spawn-id').textContent = id;
         setStatus('', 'connecting…');
+        // M47 D1 — persist selection across reload.
+        _ssSet(SS_KEY_SELECTED, id);
         // M43 D6 — kick off an initial tool-cost fetch for this spawn.
         fetchToolCost(id);
         setToolCostLive(false);
@@ -758,13 +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);
-            renderFrame(frame, arrivedAt);
+            const renderAt = frameTs(frame, arrivedAt);
+            // Bottom pane = default renderTarget = #stream.
+            renderFrame(frame, renderAt);
             // M43 D6 — refresh tool-cost on turn-complete frames (debounced).
             // Various producers emit different turn-complete markers; accept
             // any of them.
@@ -780,14 +1244,84 @@
         };
       }
 
+      // M47 D1 — top pane: main in-session conversation stream. Independent
+      // from the bottom pane's `connect()`. Uses its own EventSource and
+      // renders into #main-stream via the renderTarget swap inside renderFrame.
+      let mainSrc = null;
+      const mainStreamEl = document.getElementById('main-stream');
+      function connectMain(sessionId) {
+        if (mainSrc) { try { mainSrc.close(); } catch { /* gone */ } mainSrc = null; }
+        if (!mainStreamEl) return;
+        mainStreamEl.innerHTML = '';
+        if (!sessionId) {
+          mainStreamEl.innerHTML = '<div class="pane-empty">No in-session conversation captured yet.</div>';
+          return;
+        }
+        const spawnId = 'in-session-' + sessionId;
+        try {
+          mainSrc = new EventSource('/transcript/' + encodeURIComponent(spawnId) + '/stream');
+          mainSrc.onmessage = (ev) => {
+            if (!ev.data) return;
+            const arrivedAt = new Date();
+            try {
+              const frame = JSON.parse(ev.data);
+              const renderAt = frameTs(frame, arrivedAt);
+              renderFrame(frame, renderAt, mainStreamEl);
+            } catch {
+              const prev = renderTarget; renderTarget = mainStreamEl;
+              try { renderRaw(ev.data, arrivedAt); } finally { renderTarget = prev; }
+            }
+          };
+          // Errors are silent — the top pane is best-effort; bottom pane drives status.
+        } catch { /* EventSource unsupported */ }
+      }
+      window.__gsdtConnectMain = connectMain;
+
+      function fetchMainSession() {
+        const t0 = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+        return fetch('/api/main-session')
+          .then((r) => r.ok ? r.json() : null)
+          .then((j) => {
+            if (j && j.sessionId) {
+              connectMain(j.sessionId);
+              const t1 = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();
+              try { console.debug('[m47] top-pane connected in', Math.round(t1 - t0), 'ms'); } catch { /* ok */ }
+            } else {
+              connectMain(null);
+            }
+          })
+          .catch(() => { connectMain(null); });
+      }
+
       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(); }
       });
 
-      const initialId = (location.hash || '').slice(1) || spawnId;
-      if (!location.hash && spawnId) location.hash = spawnId;
-      connect(initialId);
+      // M47 D1 — initial bottom-pane resolution:
+      //   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);
+
+      // M47 D1 — top pane: always populate via /api/main-session.
+      fetchMainSession();
 
       pollSpawns();
       pollTimer = setInterval(pollSpawns, 3000);