pi-better-subagents 0.1.18 → 0.1.20

package/index.ts

@@ -14,6 +14,8 @@
 import { execSync } from "node:child_process";
 import { writeFileSync, mkdirSync, statSync } from "node:fs";
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import * as PiCodingAgent from "@earendil-works/pi-coding-agent";
+import * as PiTui from "@earendil-works/pi-tui";
 import { CustomEditor } from "@earendil-works/pi-coding-agent";
 import { matchesKey, Key, truncateToWidth } from "@earendil-works/pi-tui";
 import { Type } from "@earendil-works/pi-ai";
@@ -30,7 +32,7 @@ import {
     type BackgroundWorkRow,
 } from "./shared-navigator.ts";
 import { spawnDetached, type SpawnResult } from "./spawn.ts";
-import { parseRun, resetParseRunCursor, tailLog, type Usage } from "./parse.ts";
+import { parseRun, readRunTranscript, resetParseRunCursor, type Usage } from "./parse.ts";
 import { finalizeRun as finalizeRunCore } from "./finalization.ts";
 import { loadConfig, normalizeTools, resolveExtensionPath, SAFE_DEFAULT_TOOLS, SAFE_CLEAN_TOOLS, DEFAULT_MAX_CONCURRENT } from "./config.ts";
 import { resolveExtensions, extensionArgs } from "./extensions.ts";
@@ -836,7 +838,8 @@ function mainAgentWorkRow(now: number): BackgroundWorkRow {
 function subagentWorkDetail(id: string, now: number, options?: { logTailLines?: number }): BackgroundWorkDetail | null {
     const detail = navigatorDetail(id, now);
     if (!detail) return null;
-    const logTailLines = options?.logTailLines ?? 10;
+    void options;
+    const transcript = readRunTranscript(id);
     const metadata = [
         { label: "provider", value: "Subagents" },
         { label: "model", value: detail.effort ? `${detail.model} · effort ${detail.effort}` : detail.model },
@@ -854,15 +857,65 @@ function subagentWorkDetail(id: string, now: number, options?: { logTailLines?:
         statusTone: statusTone(detail.status),
         subtitle: detail.currentTool ? `current tool ${detail.currentTool}` : undefined,
         metadata,
-        // The shared navigator refreshes this provider on a coarse deadline while the
-        // detail overlay is open. Read the selected logical tail rows each
-        // time so the evidence behaves like `tail -f`, not a single parsed
-        // activity/result snapshot.
-        evidence: { label: "log tail", text: tailLog(id, logTailLines) },
+        evidence: { label: "transcript", text: detail.output || "(no transcript yet)" },
+        transcript: transcript.entries,
+        transcriptDiagnostic: transcript.diagnostic,
         footerActions: [detail.status === "running" || detail.status === "orphaned" ? "x stop" : "x dismiss"],
     };
 }
 
+function createSubagentTranscriptComponent(detail: BackgroundWorkDetail, theme: unknown) {
+    const ContainerComponent = (PiTui as any).Container;
+    const AssistantComponent = (PiCodingAgent as any).AssistantMessageComponent;
+    const ToolComponent = (PiCodingAgent as any).ToolExecutionComponent;
+    const markdownTheme = typeof (PiCodingAgent as any).getMarkdownTheme === "function"
+        ? (PiCodingAgent as any).getMarkdownTheme()
+        : {};
+    if (!ContainerComponent || !AssistantComponent || !ToolComponent) {
+        return {
+            render: () => (detail.transcript ?? []).flatMap((entry) => entry.type === "assistant"
+                ? entry.content.filter((block) => block.type === "text").flatMap((block) => String(block.text ?? "").split("\n"))
+                : [`[${entry.state}] ${entry.name}`]),
+            invalidate() {},
+        };
+    }
+    const container = new ContainerComponent();
+    const ui = { requestRender: () => { try { (uiCtx?.ui as any)?.requestRender?.(); } catch { /* ignore */ } } };
+    for (const entry of detail.transcript ?? []) {
+        if (entry.type === "assistant") {
+            const message = {
+                role: "assistant" as const,
+                content: entry.content,
+                stopReason: entry.streaming ? undefined : "stop",
+                timestamp: Date.now(),
+            };
+            const component = new AssistantComponent(message as any, true, markdownTheme, "Thinking...", 1);
+            component.updateContent(message as any, entry.streaming);
+            container.addChild(component);
+            continue;
+        }
+        const component = new ToolComponent(
+            entry.name,
+            entry.id ?? `transcript-${entry.name}`,
+            entry.args ?? {},
+            { showImages: false },
+            undefined,
+            ui as any,
+            uiCtx?.cwd ?? process.cwd(),
+        );
+        component.markExecutionStarted();
+        component.setArgsComplete();
+        if (entry.state === "completed") {
+            const result = entry.result && typeof entry.result === "object"
+                ? entry.result as any
+                : { content: entry.result == null ? [] : [{ type: "text", text: String(entry.result) }] };
+            component.updateResult({ ...result, isError: entry.isError });
+        }
+        container.addChild(component);
+    }
+    return container;
+}
+
 function ensureSubagentProvider(): void {
     if (unregisterSubagentProvider) return;
     const provider: BackgroundWorkProvider = {
@@ -870,6 +923,7 @@ function ensureSubagentProvider(): void {
         label: "Subagents",
         priority: 10,
         visibleCount: () => navigatorRunningCount(),
+        showSection: (rows) => rows.some((row) => row.status === "running"),
         parentRow: (now) => mainAgentWorkRow(now),
         listRows: (now) => subagentWorkRows(now),
         detail: (id, now, options) => subagentWorkDetail(id, now, options),
@@ -961,6 +1015,7 @@ function ensureNavigator(ctx: ExtensionContext): void {
             isOpenTrigger: (data: string) => matchesKey(data, Key.left),
             matchKey: (data: string, keyId: string) => matchesKey(data, keyId),
             truncate: truncateToWidth,
+            createTranscriptComponent: createSubagentTranscriptComponent,
         });
     } catch { /* ignore */ }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-better-subagents",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Pi extension for detached, sandboxed subagent runs that keep the foreground session free.",
   "license": "MIT",
   "type": "module",

package/parse.ts

@@ -30,7 +30,7 @@ import { readBoundedTail, tailTerminalDisplay } from "./shared-log-utils.ts";
 import { readAppendedLines, type LogCursor } from "./log-cursor.ts";
 import { logPathFor } from "./registry.ts";
 
-interface ContentBlock { type: string; text?: string; name?: string }
+interface ContentBlock { type: string; text?: string; thinking?: string; name?: string }
 interface Cost { total?: number }
 interface MsgUsage { input?: number; output?: number; cacheRead?: number; cost?: Cost }
 interface Msg { role?: string; content?: string | ContentBlock[]; usage?: MsgUsage }
@@ -130,6 +130,121 @@ export interface ParsedRun {
     diagnostics: string[];
 }
 
+export type TranscriptEntry =
+    | { type: "assistant"; content: ContentBlock[]; streaming: boolean }
+    | {
+        type: "tool";
+        id?: string;
+        name: string;
+        args?: unknown;
+        result?: unknown;
+        isError: boolean;
+        state: "running" | "completed";
+    };
+
+export interface RunTranscript {
+    entries: TranscriptEntry[];
+    truncated: boolean;
+    diagnostic?: string;
+}
+
+const DEFAULT_TRANSCRIPT_TAIL_BYTES = 2 * 1024 * 1024;
+const DEFAULT_TRANSCRIPT_ENTRIES = 40;
+
+function transcriptContent(msg: Msg | undefined): ContentBlock[] {
+    if (!msg) return [];
+    if (typeof msg.content === "string") {
+        return msg.content.trim() ? [{ type: "text", text: msg.content }] : [];
+    }
+    if (!Array.isArray(msg.content)) return [];
+    return msg.content.filter((block) =>
+        block && (
+            (block.type === "text" && typeof block.text === "string" && block.text.trim()) ||
+            (block.type === "thinking" && typeof (block as { thinking?: unknown }).thinking === "string")
+        ),
+    );
+}
+
+/** Bounded, display-oriented transcript fold for the subagent detail view. */
+export function readRunTranscript(
+    id: string,
+    options: { maxBytes?: number; maxEntries?: number } = {},
+): RunTranscript {
+    const maxBytes = Math.max(1024, options.maxBytes ?? DEFAULT_TRANSCRIPT_TAIL_BYTES);
+    const maxEntries = Math.max(1, options.maxEntries ?? DEFAULT_TRANSCRIPT_ENTRIES);
+    const tail = readTail(logPathFor(id), maxBytes);
+    if (tail.error) return { entries: [], truncated: false, diagnostic: `Log unreadable: ${tail.error}` };
+
+    const lines = tail.text.split(/\r?\n/);
+    if (tail.truncated) lines.shift();
+    const entries: TranscriptEntry[] = [];
+    const tools = new Map<string, Extract<TranscriptEntry, { type: "tool" }>>();
+    let anonymousTool = 0;
+    let liveAssistant: Extract<TranscriptEntry, { type: "assistant" }> | undefined;
+
+    for (const line of lines) {
+        const event = tryParse(line.trim());
+        if (!event) continue;
+        const type = event.type;
+        if (type === "message_end") {
+            const message = event.message as Msg | undefined;
+            if (message?.role !== "assistant") continue;
+            const content = transcriptContent(message);
+            if (content.length) entries.push({ type: "assistant", content, streaming: false });
+            liveAssistant = undefined;
+            continue;
+        }
+        if (type === "message_update") {
+            const message = event.message as Msg | undefined;
+            if (message?.role !== "assistant") continue;
+            const content = transcriptContent(message);
+            if (content.length) liveAssistant = { type: "assistant", content, streaming: true };
+            continue;
+        }
+        if (type === "tool_execution_start") {
+            const idValue = typeof event.toolCallId === "string" ? event.toolCallId : undefined;
+            const key = idValue ?? `anonymous:${anonymousTool++}`;
+            const tool: Extract<TranscriptEntry, { type: "tool" }> = {
+                type: "tool",
+                id: idValue,
+                name: typeof event.toolName === "string" ? event.toolName : "unknown",
+                args: event.args,
+                isError: false,
+                state: "running",
+            };
+            entries.push(tool);
+            tools.set(key, tool);
+            continue;
+        }
+        if (type === "tool_execution_end") {
+            const idValue = typeof event.toolCallId === "string" ? event.toolCallId : undefined;
+            let tool = idValue ? tools.get(idValue) : undefined;
+            if (!tool && typeof event.toolName === "string") {
+                tool = [...tools.values()].reverse().find((candidate) => candidate.name === event.toolName && candidate.state === "running");
+            }
+            if (!tool) {
+                tool = {
+                    type: "tool",
+                    id: idValue,
+                    name: typeof event.toolName === "string" ? event.toolName : "unknown",
+                    isError: event.isError === true,
+                    state: "completed",
+                };
+                entries.push(tool);
+            }
+            tool.result = event.result;
+            tool.isError = event.isError === true;
+            tool.state = "completed";
+        }
+    }
+    if (liveAssistant) entries.push(liveAssistant);
+    return {
+        entries: entries.slice(-maxEntries),
+        truncated: tail.truncated || entries.length > maxEntries,
+        diagnostic: tail.truncated ? `Showing the latest ${fmtBytes(maxBytes)} of the transcript.` : undefined,
+    };
+}
+
 /**
  * Authoritative lifecycle evidence scanned from the complete NDJSON stream.
  * Kept separate from parseRun()'s bounded tail so large-log result parsing stays

package/shared-navigator.ts

@@ -39,6 +39,11 @@ export type BackgroundWorkDetail = {
   metadata: Array<{ label: string; value: string }>;
   foldedSections?: Array<{ id: string; label: string; text: string; collapsedText?: string; expandedByDefault?: boolean }>;
   evidence: { label: string; text: string };
+  transcript?: Array<
+    | { type: "assistant"; content: Array<{ type: string; text?: string; thinking?: string }>; streaming: boolean }
+    | { type: "tool"; id?: string; name: string; args?: unknown; result?: unknown; isError: boolean; state: "running" | "completed" }
+  >;
+  transcriptDiagnostic?: string;
   footerActions?: string[];
 };
 
@@ -54,6 +59,7 @@ export type BackgroundWorkProvider = {
   label: string;
   priority: number;
   visibleCount(): number;
+  showSection?(rows: BackgroundWorkRow[], now: number): boolean;
   parentRow?(now: number): BackgroundWorkRow | null;
   listRows(now: number): BackgroundWorkRow[];
   detail(id: string, now: number, options?: { logTailLines?: number }): BackgroundWorkDetail | null;
@@ -67,6 +73,7 @@ type HostDeps = {
   isOpenTrigger: (data: string) => boolean;
   matchKey: (data: string, keyId: string) => boolean;
   truncate: (s: string, width: number) => string;
+  createTranscriptComponent?: (detail: BackgroundWorkDetail, theme: unknown) => Component;
 };
 
 type NavigatorState = {
@@ -76,6 +83,7 @@ type NavigatorState = {
   deps?: HostDeps;
   lastHint?: string | null;
   lastMainListLines?: string[];
+  lastMainListSignature?: string;
   mainListWidgetInstalled?: boolean;
   mainListRequestRender?: () => void;
   mainListSelectedId?: string;
@@ -83,6 +91,7 @@ type NavigatorState = {
   mainListCloseArm?: { id: string; armedAt: number };
   mainListCloseArmTimer?: ReturnType<typeof setTimeout>;
   mainListDeadlineScheduler?: RenderScheduler;
+  editorComponent?: Component;
   detailOverlayRows?: number;
   dispose?: () => void;
 };
@@ -99,11 +108,9 @@ export const CLOSE_ARM_MS = 3000;
 export const DEFAULT_LOG_TAIL_ROWS = 10;
 export const LOG_TAIL_ROW_CHOICES = [10, 25] as const;
 const MAIN_LIST_FALLBACK_WIDTH = 100;
-const DETAIL_OVERLAY_HEADER_MARGIN_ROWS = 5;
-const DETAIL_OVERLAY_FOOTER_MARGIN_ROWS = 3;
+const DETAIL_OVERLAY_FOOTER_ROWS = 3;
 const EVIDENCE_SECTION_ID = "__evidence__";
 const RUNNING_DOT_GLYPH = "●";
-const RUNNING_DOT_FRAMES = ["dim", "accent", "accent", "dim"] as const;
 
 function state(): NavigatorState {
   const g = globalThis as typeof globalThis & { [GLOBAL_KEY]?: NavigatorState };
@@ -192,6 +199,7 @@ export function disposeBackgroundWorkNavigator(ctx?: ExtensionContext): void {
   }
   s.lastHint = undefined;
   s.lastMainListLines = undefined;
+  s.lastMainListSignature = undefined;
   s.mainListDeadlineScheduler?.dispose();
   s.mainListDeadlineScheduler = undefined;
   s.mainListWidgetInstalled = false;
@@ -256,6 +264,12 @@ function refreshMainListWidget(): void {
     s.mainListDeadlineScheduler?.schedule(nextExpiry - now);
   }
   syncMainListSelection(rows);
+  const nextSignature = rows.length ? mainListSignature(rows, {
+    selectedId: s.mainListFocused ? s.mainListSelectedId : undefined,
+    focused: s.mainListFocused === true,
+  }) : undefined;
+  const changed = nextSignature !== s.lastMainListSignature;
+  s.lastMainListSignature = nextSignature;
   s.lastMainListLines = rows.length ? buildMainListLines(rows, MAIN_LIST_FALLBACK_WIDTH, deps.truncate, themeFg(ctx), {
     selectedId: s.mainListFocused ? s.mainListSelectedId : undefined,
     focused: s.mainListFocused === true,
@@ -265,6 +279,7 @@ function refreshMainListWidget(): void {
     try { (ctx.ui as any).setWidget?.(MAIN_LIST_WIDGET_KEY, undefined); } catch { /* ignore */ }
     s.mainListWidgetInstalled = false;
     s.mainListRequestRender = undefined;
+    s.lastMainListSignature = undefined;
     return;
   }
   if (!s.mainListWidgetInstalled) {
@@ -273,7 +288,9 @@ function refreshMainListWidget(): void {
       s.mainListWidgetInstalled = true;
     } catch { /* ignore */ }
   }
-  try { s.mainListRequestRender?.(); } catch { /* ignore */ }
+  if (changed) {
+    try { s.mainListRequestRender?.(); } catch { /* ignore */ }
+  }
 }
 
 function themeFg(ctx: ExtensionContext): (color: string, value: string) => string {
@@ -315,7 +332,7 @@ function renderWidth(width: number): number {
   return Number.isFinite(width) && width > 0 ? Math.floor(width) : MAIN_LIST_FALLBACK_WIDTH;
 }
 
-type InternalRow = BackgroundWorkRow & { navigatorId: string; providerLabel: string };
+type InternalRow = BackgroundWorkRow & { navigatorId: string; providerLabel: string; parentRow?: boolean };
 
 function rowKey(providerId: string, id: string): string {
   return `${providerId}:${id}`;
@@ -333,6 +350,19 @@ function listRows(now = Date.now()): InternalRow[] {
     let providerRows: BackgroundWorkRow[] = [];
     try { providerRows = provider.listRows(now) ?? []; } catch { providerRows = []; }
     const orderedProviderRows = [...providerRows].sort((a, b) => b.sortStartedAt - a.sortStartedAt || rowDisplayName(a).localeCompare(rowDisplayName(b)));
+    let showSection = orderedProviderRows.length > 0 || provider.parentRow !== undefined;
+    try { showSection = provider.showSection?.(orderedProviderRows, now) ?? showSection; } catch { showSection = false; }
+    if (!showSection) continue;
+    let parentRow: BackgroundWorkRow | null = null;
+    try { parentRow = provider.parentRow?.(now) ?? null; } catch { parentRow = null; }
+    if (parentRow) {
+      rows.push({
+        ...parentRow,
+        navigatorId: rowKey(parentRow.providerId, parentRow.id),
+        providerLabel: provider.label,
+        parentRow: true,
+      });
+    }
     for (const row of orderedProviderRows) {
       rows.push({ ...row, navigatorId: rowKey(provider.id, row.id), providerLabel: provider.label });
     }
@@ -378,7 +408,7 @@ function focusMainList(): void {
   const rows = listRows();
   if (rows.length === 0) return;
   const s = state();
-  syncMainListSelection(rows);
+  s.mainListSelectedId = rows.find((row) => row.parentRow && row.id === "main")?.navigatorId ?? rows[0]!.navigatorId;
   s.mainListFocused = true;
   refreshMainListWidget();
 }
@@ -412,16 +442,6 @@ function buildMainListLines(
     const group = grouped.get(label)!;
     if (i > 0) lines.push("");
     lines.push(providerGroupLabel(label, fg));
-    const provider = state().providers.get(group[0]!.providerId);
-    let parentRow: BackgroundWorkRow | null = null;
-    try { parentRow = provider?.parentRow?.(Date.now()) ?? null; } catch { parentRow = null; }
-    if (parentRow) {
-      lines.push(formatMainListRow({
-        ...parentRow,
-        navigatorId: rowKey(parentRow.providerId, parentRow.id),
-        providerLabel: label,
-      }, false, fg, width));
-    }
     for (const row of group) {
       const selected = options.focused && row.navigatorId === options.selectedId;
       lines.push(formatMainListRow(row, selected === true, fg, width));
@@ -433,13 +453,13 @@ function buildMainListLines(
 }
 
 function shortcutsLine(focused: boolean, fg: (color: string, value: string) => string): string {
-  const keys = focused ? "↑↓ select · Enter detail · x stop · Esc unfocus" : "← to navigate";
+  const keys = focused ? "↑↓ switch · Enter detail · x stop · Esc unfocus" : "← to navigate";
   return dim(keys, fg);
 }
 
 function providerGroupLabel(label: string, fg: (color: string, value: string) => string): string {
   const normalized = singleLine(label).toLowerCase();
-  return `${dim("▸", fg)} ${fg("warning", normalized)}`;
+  return fg("warning", normalized);
 }
 
 function formatMainListRow(row: InternalRow, selected: boolean, fg: (color: string, value: string) => string, width: number): string {
@@ -471,9 +491,40 @@ function statusGlyph(row: InternalRow): string {
 }
 
 function statusIndicator(row: InternalRow, now = Date.now()): { glyph: string; color: string } {
+  void now;
   if (row.statusTone !== "running") return { glyph: statusGlyph(row), color: toneColor(row.statusTone, row.status) };
-  const frame = Math.floor(now / DETAIL_TICK_MS) % RUNNING_DOT_FRAMES.length;
-  return { glyph: RUNNING_DOT_GLYPH, color: RUNNING_DOT_FRAMES[frame]! };
+  return { glyph: RUNNING_DOT_GLYPH, color: "accent" };
+}
+
+function mainListSignature(rows: InternalRow[], options: { selectedId?: string; focused?: boolean } = {}): string {
+  return JSON.stringify({
+    focused: options.focused === true,
+    selectedId: options.focused === true ? options.selectedId ?? null : null,
+    rows: rows.map((row) => ({
+      navigatorId: row.navigatorId,
+      providerLabel: row.providerLabel,
+      parentRow: row.parentRow === true,
+      providerId: row.providerId,
+      id: row.id,
+      name: row.name ?? null,
+      model: row.model ?? null,
+      effort: row.effort ?? null,
+      tool: row.tool ?? null,
+      tokens: row.tokens ?? null,
+      command: row.command ?? null,
+      status: row.status,
+      statusTone: row.statusTone,
+      kind: row.kind,
+      primary: row.primary,
+      secondary: row.secondary ?? null,
+      facts: stableFacts(row.facts),
+      sortStartedAt: row.sortStartedAt,
+    })),
+  });
+}
+
+function stableFacts(facts: string[] | undefined): string[] {
+  return (facts ?? []).filter((fact) => !/\bleft$/.test(singleLine(fact)));
 }
 
 function rowSummary(row: InternalRow): string {
@@ -527,13 +578,14 @@ function detailFor(navigatorId: string, now = Date.now(), options?: { logTailLin
 }
 
 function closeFor(row: InternalRow): BackgroundWorkCloseOutcome {
+  if (row.parentRow) return { action: "not-closable", providerId: row.providerId, id: row.id };
   const provider = state().providers.get(row.providerId);
   if (!provider) return { action: "missing", providerId: row.providerId, id: row.id };
   try { return provider.close(row.id); } catch { return { action: "missing", providerId: row.providerId, id: row.id }; }
 }
 
 function closeHintFor(row: InternalRow | undefined): string | null {
-  if (!row) return null;
+  if (!row || row.parentRow) return null;
   const provider = state().providers.get(row.providerId);
   if (!provider) return null;
   try { return `${provider.armCloseLabel(row)} ${row.name || row.id}`; } catch { return null; }
@@ -558,6 +610,7 @@ function installNavigatorEditor(ui: any, deps: HostDeps): unknown {
 }
 
 function wrapEditor(inner: any, deps: HostDeps): unknown {
+  if (inner && typeof inner.render === "function") state().editorComponent = inner as Component;
   return new Proxy(inner, {
     get(target, prop) {
       if (prop === "handleInput") {
@@ -588,16 +641,24 @@ function handleMainListInput(data: string, deps: HostDeps): boolean {
   }
   if (deps.matchKey(data, "up")) {
     clearMainListCloseArm();
-    if (moveMainListSelection(-1)) refreshMainListWidget();
+    if (moveMainListSelection(-1)) {
+      refreshMainListWidget();
+      if (!selectedMainListRow()?.parentRow) openNavigator();
+    }
     return true;
   }
   if (deps.matchKey(data, "down")) {
     clearMainListCloseArm();
-    if (moveMainListSelection(1)) refreshMainListWidget();
+    if (moveMainListSelection(1)) {
+      refreshMainListWidget();
+      if (!selectedMainListRow()?.parentRow) openNavigator();
+    }
     return true;
   }
   if (deps.matchKey(data, "enter")) {
-    openNavigator();
+    const selected = selectedMainListRow();
+    if (selected?.parentRow) unfocusMainList();
+    else openNavigator();
     return true;
   }
   if (data === "x" || data === "X" || deps.matchKey(data, "x") || deps.matchKey(data, "X")) {
@@ -613,7 +674,7 @@ function handleMainListInput(data: string, deps: HostDeps): boolean {
 
 function handleMainListCloseKey(): void {
   const row = selectedMainListRow();
-  if (!row) return;
+  if (!row || row.parentRow) return;
   const s = state();
   const now = Date.now();
   const arm = s.mainListCloseArm;
@@ -689,6 +750,8 @@ function createOverlayComponent(
   let closeArm: { id: string; armedAt: number } | undefined;
   let closeArmTimer: ReturnType<typeof setTimeout> | undefined;
   let closed = false;
+  let transcriptDetail: BackgroundWorkDetail | null = null;
+  let transcriptComponent: Component | null = null;
 
   const fg = (color: string, value: string) => theme?.fg ? theme.fg(color, value) : value;
 
@@ -704,12 +767,24 @@ function createOverlayComponent(
   });
 
   function refreshRows(): void {
-    const selectedId = overlayState.rows[overlayState.selected]?.navigatorId;
+    const selectedId = state().mainListSelectedId ?? overlayState.rows[overlayState.selected]?.navigatorId;
     overlayState.rows = listRows();
     const nextIdx = selectedId ? overlayState.rows.findIndex((row) => row.navigatorId === selectedId) : -1;
     overlayState.selected = nextIdx >= 0 ? nextIdx : Math.min(overlayState.selected, Math.max(0, overlayState.rows.length - 1));
   }
 
+  function selectOverlayRow(next: number): void {
+    overlayState.selected = Math.min(Math.max(0, overlayState.rows.length - 1), Math.max(0, next));
+    state().mainListSelectedId = overlayState.rows[overlayState.selected]?.navigatorId;
+    clearCloseArm();
+    refreshMainListWidget();
+  }
+
+  function activateSelectedRow(): void {
+    if (selectedRow()?.parentRow) close();
+    else openDetail();
+  }
+
   function clearCloseArm(): void {
     if (closeArmTimer) clearTimeout(closeArmTimer);
     closeArmTimer = undefined;
@@ -731,13 +806,16 @@ function createOverlayComponent(
   }
 
   function selectedRow(): InternalRow | undefined {
-    if (mode === "detail" && detailId) return overlayState.rows.find((row) => row.navigatorId === detailId);
     return overlayState.rows[overlayState.selected];
   }
 
   function openDetail(): void {
     const row = selectedRow();
     if (!row) return;
+    if (row.parentRow) {
+      close();
+      return;
+    }
     clearCloseArm();
     detailId = row.navigatorId;
     expandedSections.clear();
@@ -808,10 +886,43 @@ function createOverlayComponent(
 
   return {
     render(width: number) {
-      const lines = mode === "detail"
-        ? buildDetailLines(detail, width, deps.truncate, fg, { expandedSections, logTailRows, minRows: state().detailOverlayRows })
-        : buildListLines(overlayState, width, deps.truncate, fg);
-      return lines;
+      refreshRows();
+      const railLines = mode === "detail"
+        ? buildMainListLines(overlayState.rows, width, deps.truncate, fg, {
+            selectedId: selectedRow()?.navigatorId,
+            focused: true,
+          })
+        : [];
+      const editorLines = mode === "detail" ? renderEditorLines(width) : [];
+      const bottomLines = [...railLines, ...editorLines];
+      const overlayRows = state().detailOverlayRows;
+      const detailRows = overlayRows === undefined ? undefined : Math.max(1, overlayRows - bottomLines.length);
+      let contentLines: string[];
+      if (mode === "detail" && detail?.transcript && deps.createTranscriptComponent) {
+        if (transcriptDetail !== detail || !transcriptComponent) {
+          transcriptDetail = detail;
+          transcriptComponent = deps.createTranscriptComponent(detail, theme);
+        }
+        contentLines = buildTranscriptDetailLines(
+          detail,
+          transcriptComponent.render(width),
+          width,
+          deps.truncate,
+          fg,
+          { minRows: detailRows },
+        );
+      } else {
+        transcriptDetail = null;
+        transcriptComponent = null;
+        contentLines = mode === "detail"
+          ? buildDetailLines(detail, width, deps.truncate, fg, { expandedSections, logTailRows, minRows: detailRows })
+          : buildListLines(overlayState, width, deps.truncate, fg);
+      }
+      if (mode !== "detail") return contentLines;
+      if (detailRows === undefined) return [...contentLines, ...bottomLines];
+      const fittedContent = contentLines.slice(0, detailRows);
+      while (fittedContent.length < detailRows) fittedContent.push("");
+      return [...fittedContent, ...bottomLines];
     },
     handleInput(data: string) {
       if (closed) return;
@@ -820,10 +931,25 @@ function createOverlayComponent(
         return;
       }
       if (mode === "detail") {
-        if (deps.matchKey(data, "left")) close();
+        if (deps.matchKey(data, "up")) {
+          selectOverlayRow(overlayState.selected - 1);
+          activateSelectedRow();
+        }
+        else if (deps.matchKey(data, "down")) {
+          selectOverlayRow(overlayState.selected + 1);
+          activateSelectedRow();
+        }
+        else if (deps.matchKey(data, "left")) {
+          const mainIdx = overlayState.rows.findIndex((row) => row.parentRow && row.id === "main");
+          if (mainIdx >= 0) selectOverlayRow(mainIdx);
+          close();
+        }
         else if (deps.matchKey(data, "enter")) {
-          const sectionId = firstToggleableSectionId(detail);
-          if (sectionId) {
+          const row = selectedRow();
+          if (row?.parentRow || row?.navigatorId !== detailId) openDetail();
+          else {
+            const sectionId = firstToggleableSectionId(detail);
+            if (!sectionId) return;
             if (expandedSections.has(sectionId)) expandedSections.delete(sectionId);
             else expandedSections.add(sectionId);
             requestRender();
@@ -834,7 +960,10 @@ function createOverlayComponent(
           if (detailId) detail = detailFor(detailId, Date.now(), { logTailLines: logTailRows }) ?? detail;
           requestRender();
         }
-        else if (deps.matchKey(data, "escape")) close();
+        else if (deps.matchKey(data, "escape")) {
+          unfocusMainList();
+          close();
+        }
         return;
       }
       if (deps.matchKey(data, "up")) {
@@ -851,7 +980,7 @@ function createOverlayComponent(
         close();
       }
     },
-    invalidate() {},
+    invalidate() { transcriptComponent?.invalidate(); },
     dispose() {
       clearCloseArm();
       detailScheduler.dispose();
@@ -859,26 +988,61 @@ function createOverlayComponent(
   };
 }
 
+function buildTranscriptDetailLines(
+  detail: BackgroundWorkDetail,
+  transcriptLines: string[],
+  width: number,
+  truncate: (s: string, width: number) => string,
+  fg: (color: string, value: string) => string,
+  options: { minRows?: number } = {},
+): string[] {
+  const actions = [...(detail.footerActions ?? ["x close"]), "Esc close"].join(" · ");
+  const lines: string[] = [
+    fg("accent", rule(detail.title, width)),
+    dim(`   ← main · ${actions}`, fg),
+    "",
+    `   status   ${fg(toneColor(detail.statusTone, detail.status), detail.status)}`,
+  ];
+  if (detail.subtitle) lines.push(`   summary  ${detail.subtitle}`);
+  for (const item of detail.metadata) lines.push(`   ${item.label.padEnd(8, " ").slice(0, 8)} ${item.value}`);
+  lines.push("", dim(section("transcript", width), fg));
+  if (detail.transcriptDiagnostic) lines.push(`   ${dim(detail.transcriptDiagnostic, fg)}`);
+  lines.push(...(transcriptLines.length ? transcriptLines : ["   (no transcript yet)"]));
+  lines.push("");
+  const footerLines = [dim(`   ← main · ${actions}`, fg), dim(rule("", width), fg)];
+  padBeforeFooter(lines, footerLines.length, options.minRows);
+  lines.push(...footerLines);
+  return lines.map((line) => safeTruncate(line, width, truncate));
+}
+
 function detailOverlayOptions() {
-  const navigatorRows = state().lastMainListLines?.length ?? 0;
-  const marginBottom = DETAIL_OVERLAY_FOOTER_MARGIN_ROWS + navigatorRows;
+  const marginBottom = DETAIL_OVERLAY_FOOTER_ROWS;
   return {
     anchor: "top-left" as const,
     width: "100%" as const,
     maxHeight: "100%" as const,
     margin: {
-      top: DETAIL_OVERLAY_HEADER_MARGIN_ROWS,
+      top: 0,
       right: 0,
       bottom: marginBottom,
       left: 0,
     },
     visible: (_termWidth: number, termHeight: number) => {
-      state().detailOverlayRows = Math.max(1, termHeight - DETAIL_OVERLAY_HEADER_MARGIN_ROWS - marginBottom);
+      state().detailOverlayRows = Math.max(1, termHeight - marginBottom);
       return true;
     },
   };
 }
 
+function renderEditorLines(width: number): string[] {
+  try {
+    const lines = state().editorComponent?.render(width);
+    if (lines?.length) return lines;
+  } catch { /* use an empty editor-shaped fallback */ }
+  const border = "─".repeat(Math.max(1, width));
+  return [border, "", border];
+}
+
 function fallbackDetail(row: InternalRow): BackgroundWorkDetail {
   return {
     providerId: row.providerId,