@llblab/pi-actors 0.41.0 → 0.42.0

package/lib/inspector-overlay.ts

@@ -17,11 +17,31 @@ import {
 
 import * as Inspector from "./inspector.ts";
 
-export type ActorInspectorOverlayTab = "communications" | "turns";
+export type ActorInspectorOverlayTab = "recipe" | "communications" | "turns";
+
+const INSPECTOR_TABS: ActorInspectorOverlayTab[] = [
+  "recipe",
+  "communications",
+  "turns",
+];
+
+type DetailLogicalLine = string | { sectionBreak: true };
+
+const DETAIL_SECTION_BREAK: DetailLogicalLine = { sectionBreak: true };
+
+export interface ActorInspectorOverlayActionResult {
+  ok: boolean;
+  message: string;
+}
 
 export interface ActorInspectorOverlayOptions {
   done: () => void;
+  killRun?: (
+    run: string,
+    runInstanceId: string,
+  ) => ActorInspectorOverlayActionResult;
   ownerId: string;
+  readTurns?: (stateDir: string) => Inspector.ActorInspectorTurnItem[];
   stateRoot: string;
   theme: Theme;
   tui: TUI;
@@ -29,7 +49,12 @@ export interface ActorInspectorOverlayOptions {
 
 export class ActorInspectorOverlay {
   private readonly done: () => void;
+  private readonly killRun?: (
+    run: string,
+    runInstanceId: string,
+  ) => ActorInspectorOverlayActionResult;
   private readonly ownerId: string;
+  private readonly readTurns: (stateDir: string) => Inspector.ActorInspectorTurnItem[];
   private readonly stateRoot: string;
   private readonly theme: Theme;
   private readonly tui: TUI;
@@ -43,23 +68,32 @@ export class ActorInspectorOverlay {
   private detailOpen = false;
   private detailScroll = 0;
   private detailTurn?: Inspector.ActorInspectorTurnItem;
+  private feedback?: ActorInspectorOverlayActionResult;
+  private killConfirmation?: { run: string; runInstanceId: string };
   private readonly readKeys = new Set<string>();
-  private focus: "runs" | "tabs" | "list" | "detail" | "select" = "tabs";
+  private focus: "runs" | "tabs" | "recipe" | "list" | "detail" | "select" = "tabs";
   private filterControlIndex = 0;
   private menuLevel: "run" | "filter" | "value" = "filter";
   private selectorIndex = 0;
+  private recipeScroll = 0;
   private rowIndex = 0;
   private selectedRun?: string;
   private subagentIndex = 0;
-  private tab: ActorInspectorOverlayTab = "communications";
+  private tab: ActorInspectorOverlayTab = "recipe";
+  private turnCache?: { run: string; turns: Inspector.ActorInspectorTurnItem[] };
 
   constructor(options: ActorInspectorOverlayOptions) {
     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?.();
   }
 
@@ -70,13 +104,29 @@ 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") {
           this.menuLevel = "filter";
           this.selectorIndex = this.filterControlIndex;
         } else this.focus = this.menuLevel === "run" ? "runs" : "tabs";
-      } else if (this.focus === "detail") this.closeDetail();
+      } else if (this.focus === "detail") this.backDetail();
+      else if (this.focus === "recipe") this.focus = "tabs";
       else this.done();
       this.tui.requestRender();
       return;
@@ -96,28 +146,61 @@ 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, "left")) this.closeDetail();
+      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.backDetail();
       this.tui.requestRender();
       return;
     }
     if (this.focus === "runs") {
-      if (matchesKey(data, "down")) this.focus = "tabs";
+      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")) this.openFilterMenu();
     } 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 this.rowIndex -= 1;
       } else if (matchesKey(data, "down"))
@@ -138,8 +221,16 @@ export class ActorInspectorOverlay {
     let selector = this.focus === "select"
       ? this.menuLevel === "run"
         ? this.renderMenuBox(
-            this.runs().map((run) => `${run.run} · ${run.status}`),
+            this.runs().map(
+              (run, index, runs) =>
+                `#${runs.length - index}  ${run.run}  ${run.status}`,
+            ),
             this.selectorIndex,
+            undefined,
+            undefined,
+            false,
+            false,
+            this.contentViewportRows(),
           )
         : this.renderFilterMenus(innerWidth)
       : [];
@@ -170,16 +261,33 @@ 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));
@@ -223,7 +331,103 @@ export class ActorInspectorOverlay {
     if (!this.selectedRun) this.selectedRun = runs[0]?.run;
   }
 
+  private contentViewportRows(): number {
+    const overlayRows = Math.floor(this.tui.terminal.rows * 0.94);
+    return Math.max(4, Math.min(16, overlayRows - 7));
+  }
+
+  private selectRun(run: string, index: number): void {
+    this.selectedRun = run;
+    this.turnCache = undefined;
+    this.runIndex = index;
+    this.recipeScroll = 0;
+    this.rowIndex = 0;
+    this.subagentIndex = 0;
+    this.communicationFrom = "all";
+  }
+
+  private cycleRun(
+    runs: Inspector.ActorInspectorRunItem[],
+    direction: -1 | 1,
+  ): void {
+    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);
+  }
+
+  private requestKill(runs: Inspector.ActorInspectorRunItem[]): void {
+    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,
+    };
+  }
+
+  private confirmKill(): void {
+    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)}.`,
+      };
+    }
+  }
+
+  private renderKillConfirmation(): string[] {
+    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."),
+    ];
+  }
+
   private listItemCount(): number {
+    if (this.tab === "recipe") return 0;
     return this.tab === "communications"
       ? this.communicationPreviews().length
       : this.turnItems().length;
@@ -232,9 +436,13 @@ export class ActorInspectorOverlay {
   private selectorAnchor(): number {
     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);
   }
@@ -242,23 +450,36 @@ export class ActorInspectorOverlay {
   private renderKeyHints(): string {
     const hint = (keys: string, description: string) =>
       `${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")}`;
   }
 
   private renderRunControl(): string {
-    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;
@@ -270,7 +491,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;
   }
 
@@ -297,19 +519,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)}`;
   }
 
   private renderRunSelector(width: number): string[] {
     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}`)
@@ -324,6 +546,7 @@ 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()
@@ -337,7 +560,7 @@ export class ActorInspectorOverlay {
         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",
@@ -345,12 +568,23 @@ export class ActorInspectorOverlay {
       ];
     }
     this.rowIndex = Math.min(this.rowIndex, rows.length - 1);
+    const viewportRows = this.contentViewportRows();
     const start = Math.max(
       0,
-      Math.min(this.rowIndex - 7, Math.max(0, rows.length - 15)),
+      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,
     );
-    const visibleRows = rows.slice(start, start + 15);
-    this.contentStripeIndices = visibleRows.map((_, offset) => start + offset);
     return visibleRows.map((row, offset) => {
         const index = start + offset;
         const selected = this.focus === "list" && index === this.rowIndex;
@@ -360,6 +594,51 @@ export class ActorInspectorOverlay {
       });
   }
 
+  private renderRecipe(width: number): string[] {
+    if (!this.selectedRun) return [];
+    const recipe = Inspector.readActorInspectorRecipe(
+      path.join(this.stateRoot, this.selectedRun),
+    );
+    const logicalLines: DetailLogicalLine[] = [
+      ...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,
+    );
+  }
+
   private communicationPreviews(): Inspector.ActorInspectorPreview[] {
     if (!this.selectedRun) return [];
     const channels =
@@ -373,12 +652,14 @@ export class ActorInspectorOverlay {
       readKeys: this.readKeys,
       run: this.selectedRun,
       unreadOnly: this.communicationUnread,
-    }).filter(
-      (preview) =>
-        this.communicationFrom === "all" ||
-        this.communicationActorLabel(preview.from_display ?? preview.from) ===
-          this.communicationFrom,
-    );
+    })
+      .filter(
+        (preview) =>
+          this.communicationFrom === "all" ||
+          this.communicationActorLabel(preview.from_display ?? preview.from) ===
+            this.communicationFrom,
+      )
+      .reverse();
   }
 
   private communicationActorLabel(actor?: string): string {
@@ -403,7 +684,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}`;
     });
   }
 
@@ -423,7 +704,7 @@ export class ActorInspectorOverlay {
         ["inbox", preview.inbox_status],
         ["timestamp", preview.timestamp],
       ];
-      return fields
+      const lines = fields
         .filter(([, value]) => value !== undefined)
         .map(([label, value]) =>
           truncateToWidth(
@@ -432,74 +713,330 @@ export class ActorInspectorOverlay {
             "…",
           ),
         );
+      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: unknown) =>
-      typeof input === "string" ? input : JSON.stringify(input);
-    const fields: string[] = [
-      ` command         ${turn.commandId}${turn.stage ? ` · ${turn.stage}` : ""}`,
-      ` session         ${turn.sessionFile}`,
-      ...(turn.promptFile
-        ? [` prompt          ${turn.promptFile}${turn.promptBytes ? ` · ${turn.promptBytes} bytes` : ""}`]
-        : []),
-      ...(turn.recipeContext !== undefined
-        ? [` recipe context  ${value(turn.recipeContext)}`]
-        : []),
-      ...(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}`,
+    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,
+    );
+  }
+
+  private wrapDetailLines(
+    lines: DetailLogicalLine[],
+    width: number,
+  ): { lines: string[]; stripeIndices: number[] } {
+    const wrappedLines: string[] = [];
+    const stripeIndices: number[] = [];
+    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: string[];
+        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 };
+  }
+
+  private wrapPreferred(content: string, width: number): string[] {
+    const lines: string[] = [];
+    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;
+  }
+
+  private detailSection(
+    title: string,
+    content: string[],
+  ): DetailLogicalLine[] {
+    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,
     ];
+  }
+
+  private readableValueLines(
+    value: unknown,
+    indent = "",
+    depth = 0,
+  ): string[] {
+    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 as { type?: unknown }).type === "text" &&
+          typeof (item as { text?: unknown }).text === "string"
+        ) {
+          return this.readableValueLines(
+            (item as { text: string }).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 as Record<string, unknown>);
+    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),
+      ];
+    });
+  }
+
+  private turnEvidenceLines(
+    turn: Inspector.ActorInspectorTurnItem,
+  ): DetailLogicalLine[] {
+    const lines: DetailLogicalLine[] = [];
+    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()) {
-      fields.push(
-        ` tool ${String(index + 1).padEnd(9, " ")} ${tool.name} · ${tool.id}${tool.resultError ? " · error" : ""}`,
+      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,
+        ),
       );
-      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, "…"));
+    }
+    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}`]
+        : []),
+    ];
+    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)` : ""}`,
+          ]
+        : []),
+    ];
+    lines.push(...this.detailSection("Provenance", provenance));
+    return lines.length > 0 ? lines : [" No persisted turn evidence"];
   }
 
-  private turnItems(): Inspector.ActorInspectorTurnItem[] {
+  private readablePromptText(text: string): string {
+    const wrapped = /^\s*<file\b[^>]*>\s*([\s\S]*?)\s*<\/file>\s*$/i.exec(text);
+    return wrapped?.[1]?.trim() || text;
+  }
+
+  private allTurnItems(): Inspector.ActorInspectorTurnItem[] {
     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;
+  }
+
+  private turnItems(): Inspector.ActorInspectorTurnItem[] {
     const selectedSubagent = this.subagents()[this.subagentIndex];
-    return Inspector.readActorInspectorTurns(
-      path.join(this.stateRoot, this.selectedRun),
-    ).filter(
-      (turn) =>
-        !selectedSubagent ||
-        selectedSubagent === "all" ||
-        turn.commandId === selectedSubagent,
-    );
+    return this.allTurnItems()
+      .filter(
+        (turn) =>
+          !selectedSubagent ||
+          selectedSubagent === "all" ||
+          turn.commandId === selectedSubagent,
+      )
+      .reverse();
   }
 
   private turnRows(): string[] {
-    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}`;
+    });
   }
 
   private subagents(): string[] {
     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)];
   }
 
@@ -548,11 +1085,10 @@ export class ActorInspectorOverlay {
   private applyMenuOption(value?: string): void {
     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;
     }
@@ -594,16 +1130,37 @@ export class ActorInspectorOverlay {
     parentIndex?: number,
     omitLeftBorder = false,
     omitRightBorder = false,
+    maxVisibleOptions = options.length,
   ): string[] {
-    const contentWidth = Math.max(...options.map((option) => option.length + 4));
-    const border = (left: string, right: string) =>
+    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: string, right: string, marker = "") =>
       this.theme.fg(
         "border",
-        `${omitLeftBorder ? "" : left}${"─".repeat(contentWidth)}${omitRightBorder ? "" : right}`, 
+        `${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
@@ -614,7 +1171,7 @@ export class ActorInspectorOverlay {
           : colored;
         return `${omitLeftBorder ? "" : this.theme.fg("border", "│")}${styled}${omitRightBorder ? "" : this.theme.fg("border", "│")}`;
       }),
-      border("╰", "╯"),
+      border("╰", "╯", hiddenBelow ? "↓" : ""),
     ];
   }
 
@@ -622,12 +1179,16 @@ export class ActorInspectorOverlay {
     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,
+      false,
+      false,
+      maxVisibleOptions,
     );
     if (this.menuLevel !== "value") return parent;
     const parentShared = this.renderMenuBox(
@@ -637,11 +1198,16 @@ export class ActorInspectorOverlay {
       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]
@@ -661,6 +1227,10 @@ export class ActorInspectorOverlay {
     if (this.detailOpen) this.focus = "detail";
   }
 
+  private backDetail(): void {
+    this.closeDetail();
+  }
+
   private closeDetail(): void {
     this.detailOpen = false;
     this.detailCommunication = undefined;