@llblab/pi-actors 0.41.0 → 0.42.0

package/dist/lib/inspector-overlay.js

@@ -7,9 +7,17 @@ import * as path from "node:path";
 import { stripVTControlCharacters } from "node:util";
 import { matchesKey, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
 import * as Inspector from "./inspector.js";
+const INSPECTOR_TABS = [
+    "recipe",
+    "communications",
+    "turns",
+];
+const DETAIL_SECTION_BREAK = { sectionBreak: true };
 export class ActorInspectorOverlay {
     done;
+    killRun;
     ownerId;
+    readTurns;
     stateRoot;
     theme;
     tui;
@@ -23,22 +31,32 @@ export class ActorInspectorOverlay {
     detailOpen = false;
     detailScroll = 0;
     detailTurn;
+    feedback;
+    killConfirmation;
     readKeys = new Set();
     focus = "tabs";
     filterControlIndex = 0;
     menuLevel = "filter";
     selectorIndex = 0;
+    recipeScroll = 0;
     rowIndex = 0;
     selectedRun;
     subagentIndex = 0;
-    tab = "communications";
+    tab = "recipe";
+    turnCache;
     constructor(options) {
         this.done = options.done;
+        this.killRun = options.killRun;
         this.ownerId = options.ownerId;
+        this.readTurns = options.readTurns ?? Inspector.readActorInspectorTurns;
         this.stateRoot = options.stateRoot;
         this.theme = options.theme;
         this.tui = options.tui;
-        this.refreshTimer = setInterval(() => this.tui.requestRender(), 1000);
+        this.refreshTimer = setInterval(() => {
+            if (this.focus !== "list" && this.focus !== "detail")
+                this.turnCache = undefined;
+            this.tui.requestRender();
+        }, 1000);
         this.refreshTimer.unref?.();
     }
     handleInput(data) {
@@ -48,6 +66,22 @@ export class ActorInspectorOverlay {
             this.done();
             return;
         }
+        if (this.killConfirmation) {
+            if (matchesKey(data, "escape") || data.toLowerCase() === "n") {
+                this.feedback = { ok: false, message: "Kill cancelled." };
+                this.killConfirmation = undefined;
+            }
+            else if (matchesKey(data, "return") || data.toLowerCase() === "y") {
+                this.confirmKill();
+            }
+            this.tui.requestRender();
+            return;
+        }
+        if (data.toLowerCase() === "k") {
+            this.requestKill(runs);
+            this.tui.requestRender();
+            return;
+        }
         if (matchesKey(data, "escape")) {
             if (this.focus === "select") {
                 if (this.menuLevel === "value") {
@@ -58,7 +92,9 @@ export class ActorInspectorOverlay {
                     this.focus = this.menuLevel === "run" ? "runs" : "tabs";
             }
             else if (this.focus === "detail")
-                this.closeDetail();
+                this.backDetail();
+            else if (this.focus === "recipe")
+                this.focus = "tabs";
             else
                 this.done();
             this.tui.requestRender();
@@ -78,30 +114,62 @@ export class ActorInspectorOverlay {
             this.tui.requestRender();
             return;
         }
+        if (this.focus === "recipe") {
+            if (matchesKey(data, "up")) {
+                if (this.recipeScroll === 0)
+                    this.focus = "tabs";
+                else
+                    this.recipeScroll -= 1;
+            }
+            else if (matchesKey(data, "down"))
+                this.recipeScroll += 1;
+            else if (matchesKey(data, "pageUp"))
+                this.recipeScroll = Math.max(0, this.recipeScroll - this.contentViewportRows());
+            else if (matchesKey(data, "pageDown"))
+                this.recipeScroll += this.contentViewportRows();
+            else if (matchesKey(data, "left"))
+                this.focus = "tabs";
+            this.tui.requestRender();
+            return;
+        }
         if (this.focus === "detail") {
             if (matchesKey(data, "up"))
                 this.detailScroll = Math.max(0, this.detailScroll - 1);
             else if (matchesKey(data, "down"))
                 this.detailScroll += 1;
+            else if (matchesKey(data, "pageUp"))
+                this.detailScroll = Math.max(0, this.detailScroll - this.contentViewportRows());
+            else if (matchesKey(data, "pageDown"))
+                this.detailScroll += this.contentViewportRows();
             else if (matchesKey(data, "left"))
-                this.closeDetail();
+                this.backDetail();
             this.tui.requestRender();
             return;
         }
         if (this.focus === "runs") {
-            if (matchesKey(data, "down"))
+            if (matchesKey(data, "left"))
+                this.cycleRun(runs, -1);
+            else if (matchesKey(data, "right"))
+                this.cycleRun(runs, 1);
+            else if (matchesKey(data, "down"))
                 this.focus = "tabs";
             else if (matchesKey(data, "return") && runs.length > 0)
                 this.openRunMenu();
         }
         else if (this.focus === "tabs") {
             if (matchesKey(data, "left") || matchesKey(data, "right")) {
-                this.tab = this.tab === "communications" ? "turns" : "communications";
+                const current = INSPECTOR_TABS.indexOf(this.tab);
+                const direction = matchesKey(data, "right") ? 1 : -1;
+                this.tab = INSPECTOR_TABS[(current + direction + INSPECTOR_TABS.length) % INSPECTOR_TABS.length];
                 this.filterControlIndex = 0;
+                this.recipeScroll = 0;
                 this.rowIndex = 0;
             }
             else if (matchesKey(data, "up"))
                 this.focus = "runs";
+            else if ((matchesKey(data, "down") || matchesKey(data, "return")) &&
+                this.tab === "recipe")
+                this.focus = "recipe";
             else if (matchesKey(data, "down") && this.listItemCount() > 0)
                 this.focus = "list";
             else if (matchesKey(data, "return"))
@@ -109,7 +177,13 @@ export class ActorInspectorOverlay {
         }
         else if (this.focus === "list") {
             const count = this.tab === "communications" ? this.communicationPreviews().length : this.turnItems().length;
-            if (matchesKey(data, "up")) {
+            if (matchesKey(data, "left"))
+                this.focus = "tabs";
+            else if (matchesKey(data, "pageUp"))
+                this.rowIndex = Math.max(0, this.rowIndex - this.contentViewportRows());
+            else if (matchesKey(data, "pageDown"))
+                this.rowIndex = Math.min(Math.max(0, count - 1), this.rowIndex + this.contentViewportRows());
+            else if (matchesKey(data, "up")) {
                 if (this.rowIndex === 0)
                     this.focus = "tabs";
                 else
@@ -131,7 +205,7 @@ export class ActorInspectorOverlay {
         lines.push(this.row(this.renderRunControl(), innerWidth));
         let selector = this.focus === "select"
             ? this.menuLevel === "run"
-                ? this.renderMenuBox(this.runs().map((run) => `${run.run} · ${run.status}`), this.selectorIndex)
+                ? this.renderMenuBox(this.runs().map((run, index, runs) => `#${runs.length - index}  ${run.run}  ${run.status}`), this.selectorIndex, undefined, undefined, false, false, this.contentViewportRows())
                 : this.renderFilterMenus(innerWidth)
             : [];
         const selectorAnchor = this.selectorAnchor();
@@ -155,16 +229,30 @@ export class ActorInspectorOverlay {
         else
             lines.push(this.border("├", "", "┤", innerWidth));
         this.contentStripeIndices = [];
-        const content = this.detailOpen
-            ? this.renderDetail(innerWidth)
-            : this.selectedRun
-                ? this.renderTimeline(innerWidth)
-                : this.renderRunSelector(innerWidth);
-        const minContentRows = 16;
+        const baseContent = this.killConfirmation
+            ? this.renderKillConfirmation()
+            : this.detailOpen
+                ? this.renderDetail(innerWidth)
+                : this.selectedRun
+                    ? this.renderTimeline(innerWidth)
+                    : this.renderRunSelector(innerWidth);
+        const content = this.feedback && !this.killConfirmation
+            ? [
+                this.theme.fg(this.feedback.ok
+                    ? "success"
+                    : /^Kill (failed|rejected):/.test(this.feedback.message)
+                        ? "error"
+                        : "warning", ` ${this.feedback.message}`),
+                ...baseContent.slice(0, Math.max(0, this.contentViewportRows() - 1)),
+            ]
+            : baseContent;
+        const contentViewportRows = this.contentViewportRows();
         const selectorRows = selector.slice(1);
-        for (let index = 0; index < Math.max(content.length, minContentRows); index += 1) {
+        for (let index = 0; index < Math.max(content.length, contentViewportRows); index += 1) {
             const base = content[index] ?? "";
-            const stripeIndex = this.contentStripeIndices[index] ?? index;
+            const stripeIndex = index < content.length
+                ? this.contentStripeIndices[index] ?? index
+                : 0;
             const popup = selectorRows[index];
             if (!popup) {
                 lines.push(this.stripedRow(base, innerWidth, stripeIndex));
@@ -195,7 +283,89 @@ export class ActorInspectorOverlay {
         if (!this.selectedRun)
             this.selectedRun = runs[0]?.run;
     }
+    contentViewportRows() {
+        const overlayRows = Math.floor(this.tui.terminal.rows * 0.94);
+        return Math.max(4, Math.min(16, overlayRows - 7));
+    }
+    selectRun(run, index) {
+        this.selectedRun = run;
+        this.turnCache = undefined;
+        this.runIndex = index;
+        this.recipeScroll = 0;
+        this.rowIndex = 0;
+        this.subagentIndex = 0;
+        this.communicationFrom = "all";
+    }
+    cycleRun(runs, direction) {
+        if (runs.length === 0)
+            return;
+        const currentIndex = Math.max(0, runs.findIndex((run) => run.run === this.selectedRun));
+        const nextIndex = (currentIndex + direction + runs.length) % runs.length;
+        const next = runs[nextIndex];
+        if (next)
+            this.selectRun(next.run, nextIndex);
+    }
+    requestKill(runs) {
+        this.feedback = undefined;
+        if (this.focus !== "runs") {
+            this.feedback = { ok: false, message: "Focus Run before using Kill." };
+            return;
+        }
+        const run = runs.find((item) => item.run === this.selectedRun);
+        if (!run) {
+            this.feedback = { ok: false, message: "Kill unavailable: no owned run." };
+            return;
+        }
+        if (!this.killRun) {
+            this.feedback = { ok: false, message: "Kill unavailable in this Inspector." };
+            return;
+        }
+        if (run.status !== "running") {
+            this.feedback = {
+                ok: false,
+                message: `Kill unavailable: run is ${run.status}.`,
+            };
+            return;
+        }
+        if (!run.runInstanceId) {
+            this.feedback = {
+                ok: false,
+                message: "Kill unavailable: run generation unavailable.",
+            };
+            return;
+        }
+        this.killConfirmation = {
+            run: run.run,
+            runInstanceId: run.runInstanceId,
+        };
+    }
+    confirmKill() {
+        const confirmation = this.killConfirmation;
+        this.killConfirmation = undefined;
+        if (!confirmation || !this.killRun) {
+            this.feedback = { ok: false, message: "Kill unavailable in this Inspector." };
+            return;
+        }
+        try {
+            this.feedback = this.killRun(confirmation.run, confirmation.runInstanceId);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.feedback = {
+                ok: false,
+                message: `Kill failed: ${message.replaceAll(/\s+/g, " ").slice(0, 160)}.`,
+            };
+        }
+    }
+    renderKillConfirmation() {
+        return [
+            this.theme.fg("error", ` Kill running actor run:${this.killConfirmation?.run}?`),
+            this.theme.fg("muted", " This sends canonical control.kill and cannot be undone."),
+        ];
+    }
     listItemCount() {
+        if (this.tab === "recipe")
+            return 0;
         return this.tab === "communications"
             ? this.communicationPreviews().length
             : this.turnItems().length;
@@ -203,30 +373,47 @@ export class ActorInspectorOverlay {
     selectorAnchor() {
         if (this.menuLevel === "run") {
             const runControl = stripVTControlCharacters(this.renderRunControl());
-            return Math.max(0, runControl.indexOf("Run:") - 1);
+            return Math.max(0, runControl.indexOf("Run:") - 2);
         }
-        const label = this.tab === "communications" ? "Messages" : "Turns";
+        const label = this.tab === "communications"
+            ? "Messages"
+            : this.tab === "turns"
+                ? "Turns"
+                : "Recipe";
         const tabs = stripVTControlCharacters(this.renderTabs());
         return Math.max(0, tabs.indexOf(label) - 2);
     }
     renderKeyHints() {
         const hint = (keys, description) => `${this.theme.fg("accent", keys)}${this.theme.fg("dim", ` ${description}`)}`;
+        if (this.killConfirmation)
+            return ` ${hint("y/enter", "confirm kill")}  ${hint("n/esc", "cancel")}`;
         if (this.focus === "select")
             return this.menuLevel === "value"
                 ? ` ${hint("↑↓", "option")}  ${hint("enter", "apply")}  ${hint("←/esc", "back")}`
                 : ` ${hint("↑↓", "option")}  ${hint("→/enter", "open")}  ${hint("←/esc", "back")}`;
+        if (this.focus === "recipe")
+            return ` ${hint("↑↓/pgup/pgdn", "scroll")}  ${hint("↑ at top", "tabs")}  ${hint("←/esc", "tabs")}`;
         if (this.focus === "detail")
-            return ` ${hint("↑↓", "scroll")}  ${hint("←/esc", "back")}`;
+            return ` ${hint("↑↓/pgup/pgdn", "scroll")}  ${hint("←/esc", "back")}`;
         if (this.focus === "list")
-            return ` ${hint("↑↓", "row")}  ${hint("→/enter", "open")}  ${hint("esc", "close")}`;
+            return ` ${hint("↑↓/pgup/pgdn", "row")}  ${hint("→/enter", "open")}  ${hint("←", "tabs")}  ${hint("esc", "close")}`;
+        if (this.focus === "runs") {
+            const run = this.runs().find((item) => item.run === this.selectedRun);
+            const killHint = this.killRun && run?.status === "running" && run.runInstanceId
+                ? `  ${hint("k", "kill")}`
+                : "";
+            return ` ${hint("←→", "run")}  ${hint("↓", "tabs")}  ${hint("enter", "list")}${killHint}  ${hint("esc", "close")}`;
+        }
         return ` ${hint("←→", "navigate")}  ${hint("↑↓", "change row")}  ${hint("enter", "select")}  ${hint("esc", "close")}`;
     }
     renderRunControl() {
-        const run = this.runs().find((item) => item.run === this.selectedRun);
+        const runs = this.runs();
+        const runIndex = runs.findIndex((item) => item.run === this.selectedRun);
+        const run = runs[runIndex];
         const focused = this.focus === "runs";
         const active = focused || (this.focus === "select" && this.menuLevel === "run");
-        const prefix = active ? this.theme.fg("accent", " [ ") : "   ";
-        const suffix = active ? this.theme.fg("accent", " ] ") : "   ";
+        const prefix = active ? this.theme.fg("accent", " ← ") : "   ";
+        const suffix = active ? this.theme.fg("accent", " → ") : "   ";
         if (!run) {
             const empty = this.theme.fg("muted", `${prefix}Run: none${suffix}`);
             return focused ? this.theme.bg("selectedBg", empty) : empty;
@@ -238,7 +425,8 @@ export class ActorInspectorOverlay {
                 : run.status === "done"
                     ? "success"
                     : "muted";
-        const value = `${prefix}${this.theme.fg("muted", "Run: ")}${this.theme.fg("accent", run.run)}${this.theme.fg("muted", " · ")}${this.theme.fg(statusColor, run.status)}${suffix}`;
+        const sequence = runs.length - runIndex;
+        const value = `${prefix}${this.theme.fg("muted", "Run: ")}${this.theme.fg("text", `#${sequence}`)}  ${this.theme.fg("accent", run.run)}  ${this.theme.fg(statusColor, run.status)}${suffix}`;
         return focused ? this.theme.bg("selectedBg", value) : value;
     }
     activeMessageFilters() {
@@ -263,19 +451,19 @@ export class ActorInspectorOverlay {
         };
         const messageFilters = this.activeMessageFilters();
         const subagent = this.subagents()[this.subagentIndex] ?? "all";
-        const messagesLabel = `Messages${messageFilters.length > 0 ? ` · ${messageFilters.join(" · ")}` : ""}`;
-        const turnsLabel = `Turns${subagent === "all" ? "" : ` · ${subagent}`}`;
-        return `${tab("communications", messagesLabel)} ${tab("turns", turnsLabel)}`;
+        const messagesLabel = `Messages${messageFilters.length > 0 ? ` (${messageFilters.join(", ")})` : ""}`;
+        const turnsLabel = `Turns${subagent === "all" ? "" : ` (${subagent})`}`;
+        return `${tab("recipe", "Recipe")} ${tab("communications", messagesLabel)} ${tab("turns", turnsLabel)}`;
     }
     renderRunSelector(width) {
         const runs = this.runs();
         if (runs.length === 0)
             return [this.theme.fg("muted", " No owned actor runs")];
         this.runIndex = Math.min(this.runIndex, runs.length - 1);
-        return runs.slice(0, 16).map((run, index) => {
+        return runs.slice(0, this.contentViewportRows()).map((run, index) => {
             const selected = index === this.runIndex;
             const prefix = selected ? this.theme.fg("accent", " ▶ ") : "   ";
-            const label = `${prefix}run:${run.run}`;
+            const label = `${prefix}#${runs.length - index}  run:${run.run}`;
             const status = ` ${run.status}`;
             return selected
                 ? this.theme.fg("accent", `${label}${status}`)
@@ -290,6 +478,8 @@ export class ActorInspectorOverlay {
             this.selectedRun = undefined;
             return [this.theme.fg("warning", " Selected run is no longer owned by this session")];
         }
+        if (this.tab === "recipe")
+            return this.renderRecipe(width);
         const rows = this.tab === "communications"
             ? this.communicationRows()
             : this.turnRows();
@@ -300,16 +490,20 @@ export class ActorInspectorOverlay {
                 : (this.subagents()[this.subagentIndex] ?? "all") !== "all";
             return [
                 this.theme.fg("muted", filtered
-                    ? " No results for the active filters · Enter on the tab to adjust"
+                    ? " No results for the active filters. Enter on the tab to adjust."
                     : this.tab === "communications"
                         ? " No messages in this run"
                         : " No persisted turns in this run"),
             ];
         }
         this.rowIndex = Math.min(this.rowIndex, rows.length - 1);
-        const start = Math.max(0, Math.min(this.rowIndex - 7, Math.max(0, rows.length - 15)));
-        const visibleRows = rows.slice(start, start + 15);
-        this.contentStripeIndices = visibleRows.map((_, offset) => start + offset);
+        const viewportRows = this.contentViewportRows();
+        const start = Math.max(0, Math.min(this.rowIndex - Math.floor(viewportRows / 2), Math.max(0, rows.length - viewportRows)));
+        const stripeIndices = this.tab === "communications"
+            ? this.communicationPreviews().map((preview, index) => Math.max(0, (preview.sequence ?? index + 1) - 1))
+            : this.turnItems().map((turn) => Math.max(0, turn.index - 1));
+        const visibleRows = rows.slice(start, start + viewportRows);
+        this.contentStripeIndices = visibleRows.map((_, offset) => stripeIndices[start + offset] ?? start + offset);
         return visibleRows.map((row, offset) => {
             const index = start + offset;
             const selected = this.focus === "list" && index === this.rowIndex;
@@ -318,6 +512,28 @@ export class ActorInspectorOverlay {
                 : `   ${row}`;
         });
     }
+    renderRecipe(width) {
+        if (!this.selectedRun)
+            return [];
+        const recipe = Inspector.readActorInspectorRecipe(path.join(this.stateRoot, this.selectedRun));
+        const logicalLines = [
+            ...this.detailSection("Identity", this.readableValueLines(recipe.identity, "  ")),
+            ...(recipe.definition
+                ? this.detailSection("Recipe", this.readableValueLines(recipe.definition, "  "))
+                : []),
+            ...this.detailSection("Launch", this.readableValueLines(recipe.launch, "  ")),
+            ...(recipe.composition.length > 0
+                ? this.detailSection("Composition", this.readableValueLines(recipe.composition, "  "))
+                : []),
+            ...this.detailSection("Diagnostics", recipe.diagnostics),
+        ];
+        const wrapped = this.wrapDetailLines(logicalLines.length > 0 ? logicalLines : [" No persisted recipe evidence"], width);
+        const viewportRows = this.contentViewportRows();
+        const maxStart = Math.max(0, wrapped.lines.length - viewportRows);
+        this.recipeScroll = Math.min(this.recipeScroll, maxStart);
+        this.contentStripeIndices = wrapped.stripeIndices.slice(this.recipeScroll, this.recipeScroll + viewportRows);
+        return wrapped.lines.slice(this.recipeScroll, this.recipeScroll + viewportRows);
+    }
     communicationPreviews() {
         if (!this.selectedRun)
             return [];
@@ -331,9 +547,11 @@ export class ActorInspectorOverlay {
             readKeys: this.readKeys,
             run: this.selectedRun,
             unreadOnly: this.communicationUnread,
-        }).filter((preview) => this.communicationFrom === "all" ||
+        })
+            .filter((preview) => this.communicationFrom === "all" ||
             this.communicationActorLabel(preview.from_display ?? preview.from) ===
-                this.communicationFrom);
+                this.communicationFrom)
+            .reverse();
     }
     communicationActorLabel(actor) {
         const value = actor ?? "unknown";
@@ -352,7 +570,7 @@ export class ActorInspectorOverlay {
             const actor = preview.from_display ?? preview.from ?? "unknown";
             const target = preview.channel === "room" ? "#all" : preview.to;
             const text = preview.summary ?? preview.body_preview ?? "(no body)";
-            return `${preview.needs_response ? "! " : ""}${actor} → ${target}  ${preview.type}  ${text}`;
+            return `#${preview.sequence ?? "?"}  ${preview.needs_response ? "! " : ""}${actor} → ${target}  ${preview.type}  ${text}`;
         });
     }
     renderDetail(width) {
@@ -372,66 +590,287 @@ export class ActorInspectorOverlay {
                 ["inbox", preview.inbox_status],
                 ["timestamp", preview.timestamp],
             ];
-            return fields
+            const lines = fields
                 .filter(([, value]) => value !== undefined)
                 .map(([label, value]) => truncateToWidth(` ${label.padEnd(12, " ")} ${typeof value === "string" ? value : JSON.stringify(value)}`, width, "…"));
+            const viewportRows = this.contentViewportRows();
+            const maxStart = Math.max(0, lines.length - viewportRows);
+            this.detailScroll = Math.min(this.detailScroll, maxStart);
+            return lines.slice(this.detailScroll, this.detailScroll + viewportRows);
         }
         const turn = this.detailTurn;
         if (!turn)
             return [this.theme.fg("warning", " Turn row is no longer available")];
-        const value = (input) => typeof input === "string" ? input : JSON.stringify(input);
-        const fields = [
-            ` command         ${turn.commandId}${turn.stage ? ` · ${turn.stage}` : ""}`,
-            ` session         ${turn.sessionFile}`,
-            ...(turn.promptFile
-                ? [` prompt          ${turn.promptFile}${turn.promptBytes ? ` · ${turn.promptBytes} bytes` : ""}`]
+        const logicalLines = this.turnEvidenceLines(turn);
+        const wrapped = this.wrapDetailLines(logicalLines, width);
+        const viewportRows = this.contentViewportRows();
+        const maxStart = Math.max(0, wrapped.lines.length - viewportRows);
+        this.detailScroll = Math.min(this.detailScroll, maxStart);
+        this.contentStripeIndices = wrapped.stripeIndices.slice(this.detailScroll, this.detailScroll + viewportRows);
+        return wrapped.lines.slice(this.detailScroll, this.detailScroll + viewportRows);
+    }
+    wrapDetailLines(lines, width) {
+        const wrappedLines = [];
+        const stripeIndices = [];
+        let sectionIndex = 0;
+        for (const line of lines) {
+            if (typeof line !== "string") {
+                sectionIndex += 1;
+                continue;
+            }
+            const physicalLines = line.replaceAll("\t", "  ").split(/\r?\n/);
+            for (const physicalLine of physicalLines) {
+                if (!physicalLine.trim())
+                    continue;
+                const leading = physicalLine.match(/^ */)?.[0] ?? "";
+                const content = physicalLine.slice(leading.length);
+                const contentWidth = Math.max(1, width - visibleWidth(leading));
+                const labeled = /^(\s*(?:-\s+)?[^:]+:\s+)(\S.*)$/u.exec(physicalLine);
+                let wrapped;
+                if (visibleWidth(physicalLine) > width &&
+                    labeled &&
+                    visibleWidth(labeled[1]) < width) {
+                    const prefix = labeled[1];
+                    const value = labeled[2];
+                    const firstWidth = Math.max(1, width - visibleWidth(prefix));
+                    const first = this.wrapPreferred(value, firstWidth)[0] ??
+                        this.takeVisiblePrefix(value, firstWidth);
+                    const remainder = value.slice(first.length).trimStart();
+                    const continuation = `${leading}  `;
+                    const continuationWidth = Math.max(1, width - visibleWidth(continuation));
+                    wrapped = [
+                        `${prefix}${first}`,
+                        ...(remainder
+                            ? this.wrapPreferred(remainder, continuationWidth).map((visualLine) => `${continuation}${visualLine}`)
+                            : []),
+                    ];
+                }
+                else {
+                    wrapped = visibleWidth(physicalLine) <= width
+                        ? [physicalLine]
+                        : this.wrapPreferred(content, contentWidth).map((visualLine) => `${leading}${visualLine}`);
+                }
+                for (const visualLine of wrapped) {
+                    if (!visualLine.trim())
+                        continue;
+                    wrappedLines.push(visualLine);
+                    stripeIndices.push(sectionIndex);
+                }
+            }
+        }
+        return { lines: wrappedLines, stripeIndices };
+    }
+    wrapPreferred(content, width) {
+        const lines = [];
+        let remaining = stripVTControlCharacters(content).trimEnd();
+        while (remaining && visibleWidth(remaining) > width) {
+            const candidate = this.takeVisiblePrefix(remaining, width);
+            let splitAt = -1;
+            let trimBoundary = false;
+            for (let index = 1; index < candidate.length; index += 1) {
+                if (/\s/u.test(candidate[index])) {
+                    splitAt = index + 1;
+                    trimBoundary = true;
+                }
+                else if (/[-+=/_,.:]/u.test(candidate[index])) {
+                    splitAt = index;
+                    trimBoundary = false;
+                }
+            }
+            if (splitAt <= 0)
+                splitAt = candidate.length;
+            const head = remaining.slice(0, splitAt).trimEnd();
+            if (!head) {
+                lines.push(candidate);
+                remaining = remaining.slice(candidate.length);
+                continue;
+            }
+            lines.push(head);
+            remaining = remaining.slice(splitAt);
+            if (trimBoundary)
+                remaining = remaining.trimStart();
+        }
+        if (remaining)
+            lines.push(remaining);
+        return lines;
+    }
+    detailSection(title, content) {
+        if (content.length === 0)
+            return [];
+        return [
+            ` ${title}`,
+            ...content.flatMap((line) => line
+                .split(/\r?\n/)
+                .filter((physicalLine) => physicalLine.trim().length > 0)
+                .map((physicalLine) => `   ${physicalLine}`)),
+            DETAIL_SECTION_BREAK,
+        ];
+    }
+    readableValueLines(value, indent = "", depth = 0) {
+        if (depth > 8)
+            return [`${indent}[nested value]`];
+        if (typeof value === "string") {
+            const trimmed = value.trim();
+            if (/^[{[]/.test(trimmed)) {
+                try {
+                    return this.readableValueLines(JSON.parse(trimmed), indent, depth + 1);
+                }
+                catch {
+                    // Keep non-JSON text as written.
+                }
+            }
+            return value.split(/\r?\n/).map((line) => `${indent}${line}`);
+        }
+        if (value === null || value === undefined)
+            return [`${indent}${String(value)}`];
+        if (typeof value !== "object")
+            return [`${indent}${String(value)}`];
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return [`${indent}(empty)`];
+            return value.flatMap((item) => {
+                if (item &&
+                    typeof item === "object" &&
+                    item.type === "text" &&
+                    typeof item.text === "string") {
+                    return this.readableValueLines(item.text, indent, depth + 1);
+                }
+                if (!item || typeof item !== "object")
+                    return [`${indent}- ${String(item)}`];
+                const [first = "", ...rest] = this.readableValueLines(item, `${indent}  `, depth + 1);
+                return [
+                    `${indent}- ${first.trimStart()}`,
+                    ...rest,
+                ];
+            });
+        }
+        const entries = Object.entries(value);
+        if (entries.length === 0)
+            return [`${indent}(empty)`];
+        return entries.flatMap(([key, item]) => {
+            if (!item || typeof item !== "object") {
+                const scalar = typeof item === "string" ? item : String(item);
+                const [first = "", ...rest] = scalar.split(/\r?\n/);
+                return [
+                    `${indent}${key}: ${first}`,
+                    ...rest.map((line) => `${indent}  ${line}`),
+                ];
+            }
+            return [
+                `${indent}${key}:`,
+                ...this.readableValueLines(item, `${indent}  `, depth + 1),
+            ];
+        });
+    }
+    turnEvidenceLines(turn) {
+        const lines = [];
+        const commandNumber = /^command-(\d+)$/.exec(turn.commandId)?.[1];
+        const subagent = commandNumber
+            ? String(Number.parseInt(commandNumber, 10))
+            : turn.commandId;
+        const stage = turn.stage && turn.stage !== "subagent" && turn.stage !== "command"
+            ? ` (${turn.stage})`
+            : "";
+        lines.push(` Subagent ${subagent}${stage}`, DETAIL_SECTION_BREAK);
+        if (turn.userText)
+            lines.push(...this.detailSection("User", [this.readablePromptText(turn.userText)]));
+        if (turn.thinking)
+            lines.push(...this.detailSection("Thinking", [turn.thinking]));
+        if (turn.assistantText)
+            lines.push(...this.detailSection("Assistant", [turn.assistantText]));
+        for (const [index, tool] of turn.toolCalls.entries()) {
+            const content = [
+                ...(tool.arguments === undefined
+                    ? []
+                    : ["Input", ...this.readableValueLines(tool.arguments, "  ")]),
+                ...(tool.result === undefined
+                    ? []
+                    : ["Result", ...this.readableValueLines(tool.result, "  ")]),
+                `call id: ${tool.id}`,
+            ];
+            lines.push(...this.detailSection(`Tool ${index + 1} (${tool.name}${tool.resultError ? ", Error" : ""})`, content));
+        }
+        const execution = [
+            ...(!turn.thinking ? ["thinking: not persisted"] : []),
+            ...(turn.model ? [`model: ${turn.model}`] : []),
+            ...(turn.stopReason ? [`stop reason: ${turn.stopReason}`] : []),
+            ...(turn.error ? [`error: ${turn.error}`] : []),
+            ...(turn.usage === undefined
+                ? []
+                : ["Usage", ...this.readableValueLines(turn.usage, "  ")]),
+            ...(turn.unmatchedToolResults > 0
+                ? [`unmatched tool results: ${turn.unmatchedToolResults}`]
                 : []),
-            ...(turn.recipeContext !== undefined
-                ? [` recipe context  ${value(turn.recipeContext)}`]
+        ];
+        if (execution.length > 0)
+            lines.push(...this.detailSection("Execution", execution));
+        if (turn.diagnostics.length > 0)
+            lines.push(...this.detailSection("Diagnostics", turn.diagnostics));
+        const provenance = [
+            "Session",
+            `  ${turn.sessionFile}`,
+            ...(turn.sessionTruncated ? ["  turn list truncated"] : []),
+            ...(turn.promptFile
+                ? [
+                    "Prompt",
+                    `  ${turn.promptFile}${turn.promptBytes ? ` (${turn.promptBytes} bytes)` : ""}`,
+                ]
                 : []),
-            ...(turn.userText ? [` user            ${turn.userText}`] : []),
-            ...(turn.assistantText ? [` assistant       ${turn.assistantText}`] : []),
-            ` reasoning       ${turn.thinking ? "persisted thinking block" : "unavailable"}`,
-            ...(turn.thinking ? [` thinking        ${turn.thinking}`] : []),
-            ...(turn.stopReason ? [` stop reason     ${turn.stopReason}`] : []),
-            ...(turn.usage !== undefined ? [` usage           ${value(turn.usage)}`] : []),
-            ...(turn.error ? [` error           ${turn.error}`] : []),
-            ` tools           ${turn.toolCalls.length}`,
         ];
-        for (const [index, tool] of turn.toolCalls.entries()) {
-            fields.push(` tool ${String(index + 1).padEnd(9, " ")} ${tool.name} · ${tool.id}${tool.resultError ? " · error" : ""}`);
-            if (tool.arguments !== undefined)
-                fields.push(` arguments       ${value(tool.arguments)}`);
-            if (tool.result !== undefined)
-                fields.push(` result          ${value(tool.result)}`);
-        }
-        if (turn.unmatchedToolResults > 0)
-            fields.push(` unmatched       ${turn.unmatchedToolResults}`);
-        if (turn.sessionTruncated)
-            fields.push(" session         turn list truncated");
-        for (const diagnostic of turn.diagnostics)
-            fields.push(` diagnostic      ${diagnostic}`);
-        const maxStart = Math.max(0, fields.length - 16);
-        this.detailScroll = Math.min(this.detailScroll, maxStart);
-        return fields
-            .slice(this.detailScroll, this.detailScroll + 16)
-            .map((field) => truncateToWidth(field, width, "…"));
+        lines.push(...this.detailSection("Provenance", provenance));
+        return lines.length > 0 ? lines : [" No persisted turn evidence"];
     }
-    turnItems() {
+    readablePromptText(text) {
+        const wrapped = /^\s*<file\b[^>]*>\s*([\s\S]*?)\s*<\/file>\s*$/i.exec(text);
+        return wrapped?.[1]?.trim() || text;
+    }
+    allTurnItems() {
         if (!this.selectedRun)
             return [];
+        if (this.turnCache?.run === this.selectedRun)
+            return this.turnCache.turns;
+        const turns = this.readTurns(path.join(this.stateRoot, this.selectedRun));
+        this.turnCache = { run: this.selectedRun, turns };
+        return turns;
+    }
+    turnItems() {
         const selectedSubagent = this.subagents()[this.subagentIndex];
-        return Inspector.readActorInspectorTurns(path.join(this.stateRoot, this.selectedRun)).filter((turn) => !selectedSubagent ||
+        return this.allTurnItems()
+            .filter((turn) => !selectedSubagent ||
             selectedSubagent === "all" ||
-            turn.commandId === selectedSubagent);
+            turn.commandId === selectedSubagent)
+            .reverse();
     }
     turnRows() {
-        return this.turnItems().map((turn) => `${turn.commandId}${turn.stage ? `/${turn.stage}` : ""}  ${turn.provider ?? "unknown"}/${turn.model ?? "unknown"}  tools:${turn.toolCalls.length}  ${turn.assistantText ?? turn.userText ?? "(no text)"}`);
+        return this.turnItems().map((turn) => {
+            const commandNumber = /^command-(\d+)$/.exec(turn.commandId)?.[1];
+            const subagent = commandNumber
+                ? `Subagent ${Number.parseInt(commandNumber, 10)}`
+                : `Subagent ${turn.commandId}`;
+            const stage = turn.stage && turn.stage !== "subagent" && turn.stage !== "command"
+                ? ` (${turn.stage})`
+                : "";
+            const toolNames = [...new Set(turn.toolCalls.map((tool) => tool.name))];
+            const action = turn.toolCalls.length === 0
+                ? ""
+                : turn.toolCalls.length === 1
+                    ? `  (${toolNames[0]})`
+                    : toolNames.length === 1
+                        ? `  (${toolNames[0]}, ${turn.toolCalls.length} calls)`
+                        : turn.toolCalls.length <= 2
+                            ? `  (${toolNames.join(", ")})`
+                            : `  (${turn.toolCalls.length} tools)`;
+            const failed = turn.error || turn.toolCalls.some((tool) => tool.resultError)
+                ? "  (error)"
+                : "";
+            const preview = this.readablePromptText(turn.assistantText ?? turn.userText ?? "(no text)").replaceAll(/\s+/g, " ").trim();
+            return `#${turn.index}  ${subagent}${stage}  ${turn.model ?? "unknown model"}${action}${failed}  ${preview}`;
+        });
     }
     subagents() {
         if (!this.selectedRun || this.tab !== "turns")
             return ["all"];
-        const ids = Inspector.readActorInspectorTurns(path.join(this.stateRoot, this.selectedRun)).map((turn) => turn.commandId);
+        const ids = this.allTurnItems().map((turn) => turn.commandId);
         return ["all", ...new Set(ids)];
     }
     valueOptions() {
@@ -478,11 +917,7 @@ export class ActorInspectorOverlay {
         if (!value)
             return;
         if (this.menuLevel === "run") {
-            this.selectedRun = value;
-            this.runIndex = Math.max(0, this.runs().findIndex((run) => run.run === value));
-            this.rowIndex = 0;
-            this.subagentIndex = 0;
-            this.communicationFrom = "all";
+            this.selectRun(value, Math.max(0, this.runs().findIndex((run) => run.run === value)));
             this.focus = "runs";
             return;
         }
@@ -518,12 +953,20 @@ export class ActorInspectorOverlay {
     currentFilterValue() {
         return this.filterValue(this.filterControlIndex);
     }
-    renderMenuBox(options, focusedIndex, current, parentIndex, omitLeftBorder = false, omitRightBorder = false) {
-        const contentWidth = Math.max(...options.map((option) => option.length + 4));
-        const border = (left, right) => this.theme.fg("border", `${omitLeftBorder ? "" : left}${"─".repeat(contentWidth)}${omitRightBorder ? "" : right}`);
+    renderMenuBox(options, focusedIndex, current, parentIndex, omitLeftBorder = false, omitRightBorder = false, maxVisibleOptions = options.length) {
+        const visibleLimit = Math.max(1, Math.min(maxVisibleOptions, options.length));
+        const anchorIndex = Math.max(0, Math.min(options.length - 1, focusedIndex >= 0 ? focusedIndex : (parentIndex ?? 0)));
+        const maxStart = Math.max(0, options.length - visibleLimit);
+        const start = Math.max(0, Math.min(anchorIndex - Math.floor(visibleLimit / 2), maxStart));
+        const visibleOptions = options.slice(start, start + visibleLimit);
+        const hiddenAbove = start > 0;
+        const hiddenBelow = start + visibleOptions.length < options.length;
+        const contentWidth = Math.max(4, ...options.map((option) => visibleWidth(option) + 4));
+        const border = (left, right, marker = "") => this.theme.fg("border", `${omitLeftBorder ? "" : left}${marker}${"─".repeat(Math.max(0, contentWidth - visibleWidth(marker)))}${omitRightBorder ? "" : right}`);
         return [
-            border("╭", "╮"),
-            ...options.map((option, index) => {
+            border("╭", "╮", hiddenAbove ? "↑" : ""),
+            ...visibleOptions.map((option, localIndex) => {
+                const index = start + localIndex;
                 const focused = index === focusedIndex;
                 const row = this.fit(`${focused ? " ▶ " : "   "}${option}`, contentWidth);
                 const colored = focused || option === current || index === parentIndex
@@ -534,17 +977,18 @@ export class ActorInspectorOverlay {
                     : colored;
                 return `${omitLeftBorder ? "" : this.theme.fg("border", "│")}${styled}${omitRightBorder ? "" : this.theme.fg("border", "│")}`;
             }),
-            border("╰", "╯"),
+            border("╰", "╯", hiddenBelow ? "↓" : ""),
         ];
     }
     renderFilterMenus(_width) {
         const filters = this.filterOptions().map((filter, index) => `${filter}: ${this.filterValue(index)}`);
+        const maxVisibleOptions = Math.max(1, this.contentViewportRows() - 1);
         const parentFocus = this.menuLevel === "filter" ? this.selectorIndex : -1;
-        const parent = this.renderMenuBox(filters, parentFocus, undefined, this.menuLevel === "value" ? this.filterControlIndex : undefined);
+        const parent = this.renderMenuBox(filters, parentFocus, undefined, this.menuLevel === "value" ? this.filterControlIndex : undefined, false, false, maxVisibleOptions);
         if (this.menuLevel !== "value")
             return parent;
-        const parentShared = this.renderMenuBox(filters, parentFocus, undefined, this.filterControlIndex, false, true);
-        const child = this.renderMenuBox(this.valueOptions(), this.selectorIndex, this.currentFilterValue());
+        const parentShared = this.renderMenuBox(filters, parentFocus, undefined, this.filterControlIndex, false, true, maxVisibleOptions);
+        const child = this.renderMenuBox(this.valueOptions(), this.selectorIndex, this.currentFilterValue(), undefined, false, false, maxVisibleOptions);
         return Array.from({ length: Math.max(parent.length, child.length) }, (_, index) => child[index]
             ? `${parentShared[index] ?? " ".repeat(visibleWidth(parentShared[0]))}${child[index]}`
             : (parent[index] ?? ""));
@@ -563,6 +1007,9 @@ export class ActorInspectorOverlay {
         if (this.detailOpen)
             this.focus = "detail";
     }
+    backDetail() {
+        this.closeDetail();
+    }
     closeDetail() {
         this.detailOpen = false;
         this.detailCommunication = undefined;