@llblab/pi-kit 0.38.3 → 0.39.0

package/node_modules/@llblab/pi-actors/dist/lib/inspector-overlay.js

@@ -5,15 +5,18 @@
  */
 import { readFileSync, statSync } from "node:fs";
 import * as path from "node:path";
-import { matchesKey, sliceByColumn, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
+import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
+import { Document, isScalar, visit } from "yaml";
+import { matchesKey, Markdown, sliceByColumn, truncateToWidth, visibleWidth, } from "@earendil-works/pi-tui";
 import * as ActorInspector from "./inspector.js";
 import * as ControlProjection from "./control-projection.js";
 import * as RunsControls from "./runs-controls.js";
 import * as RunControlDelivery from "./runs-control-delivery.js";
 import * as RunsTrace from "./runs-trace.js";
 import * as Limits from "./limits.js";
-import { computeRunControlCapacity } from "./run-evidence-policy.js";
+import { computeRunControlCapacity, runControlStatusTimestamp } from "./run-evidence-policy.js";
 import * as RuntimeTriage from "./runtime-triage.js";
+import { normalizeRecipeControl } from "./recipe-control.js";
 import * as TraceProjection from "./trace-projection.js";
 const TABS = ["recipe", "trace", "control"];
 const TRACE_SOURCES = [
@@ -40,12 +43,20 @@ export class ActorInspectorOverlay {
     documentScroll = 0;
     detailScroll = 0;
     feedback;
+    feedbackFromAction = false;
+    feedbackScroll = 0;
+    feedbackPageRows = 1;
+    inspectorFrame;
     focus = "runs";
     killConfirmation;
     killDialogChoice = "cancel";
+    killDialogScroll = 0;
+    killDialogPageRows = 1;
     rowIndex = 0;
     runCache;
     selectedTraceId;
+    controlCache;
+    controlSelection;
     runIndex = 0;
     selectorIndex = 0;
     selectorMode;
@@ -74,10 +85,9 @@ export class ActorInspectorOverlay {
     invalidate() {
         this.runCache = undefined;
         this.traceCache = undefined;
+        this.controlCache = undefined;
     }
     handleInput(data) {
-        const runs = this.runs();
-        this.runIndex = Math.min(this.runIndex, Math.max(0, runs.length - 1));
         if (matchesKey(data, "ctrl+c")) {
             this.done();
             return;
@@ -87,11 +97,35 @@ export class ActorInspectorOverlay {
             this.tui.requestRender();
             return;
         }
+        if (this.feedback) {
+            if (matchesKey(data, "escape")) {
+                this.feedback = undefined;
+                this.feedbackFromAction = false;
+                this.feedbackScroll = 0;
+            }
+            else if (matchesKey(data, "up"))
+                this.feedbackScroll = Math.max(0, this.feedbackScroll - 1);
+            else if (matchesKey(data, "down"))
+                this.feedbackScroll++;
+            else if (matchesKey(data, "pageUp"))
+                this.feedbackScroll = Math.max(0, this.feedbackScroll - this.feedbackPageRows);
+            else if (matchesKey(data, "pageDown"))
+                this.feedbackScroll += this.feedbackPageRows;
+            this.tui.requestRender();
+            return;
+        }
+        const runs = this.runs();
+        this.runIndex = Math.min(this.runIndex, Math.max(0, runs.length - 1));
         if (data.toLowerCase() === "k") {
             this.requestKill(runs[this.runIndex]);
             this.tui.requestRender();
             return;
         }
+        if (this.tab === "control" && (this.focus === "list" || this.focus === "detail")) {
+            this.handleControlInput(data, runs[this.runIndex]);
+            this.tui.requestRender();
+            return;
+        }
         if (matchesKey(data, "escape")) {
             if (this.focus === "select") {
                 this.selectorMode = undefined;
@@ -125,7 +159,9 @@ export class ActorInspectorOverlay {
             return;
         }
         if (this.focus === "document") {
-            if (matchesKey(data, "left"))
+            if (this.tab === "control" && matchesKey(data, "return"))
+                this.openControlList(runs[this.runIndex]);
+            else if (matchesKey(data, "left"))
                 this.focus = "tabs";
             else if (matchesKey(data, "up") && this.documentScroll === 0)
                 this.focus = "tabs";
@@ -167,6 +203,8 @@ export class ActorInspectorOverlay {
             else if (matchesKey(data, "return")) {
                 if (this.tab === "trace")
                     this.openSourceSelector(runs[this.runIndex]);
+                else if (this.tab === "control")
+                    this.openControlList(runs[this.runIndex]);
                 else
                     this.focus = "document";
             }
@@ -213,29 +251,28 @@ export class ActorInspectorOverlay {
     }
     render(width) {
         const safeWidth = Math.max(24, width);
+        const modal = !!(this.killConfirmation || this.feedback);
+        if (!modal || !this.inspectorFrame)
+            this.inspectorFrame = { width: safeWidth, lines: this.renderInspector(safeWidth) };
+        const lines = this.modalUnderlay(safeWidth);
+        if (this.killConfirmation)
+            this.compositePopup(lines, this.renderKillDialog(safeWidth - 2, lines.length), safeWidth);
+        else if (this.feedback)
+            this.compositePopup(lines, this.renderFeedbackPopup(safeWidth, lines.length), safeWidth);
+        return lines;
+    }
+    renderInspector(safeWidth) {
         const innerWidth = safeWidth - 2;
         const runs = this.runs();
         this.runIndex = Math.min(this.runIndex, Math.max(0, runs.length - 1));
         const run = runs[this.runIndex];
-        if (this.killConfirmation)
-            return this.renderKillDialog(innerWidth);
         const lines = [this.border("╭", " Actor Inspector ", "╮", innerWidth)];
-        lines.push(this.row(this.renderRunControl(run, runs.length - this.runIndex - 1), innerWidth));
+        lines.push(this.row(this.renderRunControl(run, runs.length - this.runIndex - 1, innerWidth), innerWidth));
         lines.push(this.row(this.renderTabs(run), innerWidth));
         lines.push(this.border("├", "", "┤", innerWidth));
         this.contentSelectedRows.clear();
         this.contentStripeIndices = [];
         let content = this.renderContent(run, innerWidth);
-        if (this.feedback) {
-            const color = this.feedback.ok
-                ? "success"
-                : /^Kill (failed|rejected)/u.test(this.feedback.message)
-                    ? "error"
-                    : "warning";
-            content = [this.theme.fg(color, ` ${this.feedback.message}`), ...content];
-            this.contentSelectedRows = new Set([...this.contentSelectedRows].map((index) => index + 1));
-            this.contentStripeIndices = [0, ...this.contentStripeIndices];
-        }
         const viewportRows = this.contentViewportRows();
         content = content.slice(0, viewportRows);
         for (let index = 0; index < viewportRows; index += 1) {
@@ -245,9 +282,9 @@ export class ActorInspectorOverlay {
         if (this.focus === "select") {
             const runSelector = this.selectorMode === "run";
             const startRow = runSelector ? 2 : 3;
-            const horizontalOffset = runSelector ? 4 : 12;
+            const horizontalOffset = runSelector ? 5 : 12;
             const availableRows = Math.max(3, lines.length - startRow - 1);
-            const menu = this.renderSelector(run, availableRows);
+            const menu = this.renderSelector(run, availableRows, innerWidth);
             for (const [offset, menuLine] of menu.entries()) {
                 const target = startRow + offset;
                 if (target >= lines.length - 1)
@@ -286,15 +323,16 @@ export class ActorInspectorOverlay {
     }
     handleScrollableInput(data, target) {
         const key = target === "detail" ? "detailScroll" : "documentScroll";
+        const pageRows = () => this.contentViewportRows();
         if (matchesKey(data, "up"))
             this[key] = Math.max(0, this[key] - 1);
         else if (matchesKey(data, "down"))
             this[key] += 1;
         else if (matchesKey(data, "pageUp")) {
-            this[key] = Math.max(0, this[key] - this.contentViewportRows());
+            this[key] = Math.max(0, this[key] - pageRows());
         }
         else if (matchesKey(data, "pageDown")) {
-            this[key] += this.contentViewportRows();
+            this[key] += pageRows();
         }
         else if (matchesKey(data, "left") && target === "detail") {
             this.selectedTraceId = this.traceDetail?.id;
@@ -343,6 +381,8 @@ export class ActorInspectorOverlay {
     }
     requestKill(run) {
         this.feedback = undefined;
+        this.feedbackFromAction = false;
+        this.feedbackScroll = 0;
         if (this.focus !== "runs") {
             this.feedback = { ok: false, message: "Focus Run before using Kill." };
             return;
@@ -369,11 +409,18 @@ export class ActorInspectorOverlay {
             status: run.status,
         };
         this.killDialogChoice = "cancel";
+        this.killDialogScroll = 0;
     }
     handleKillInput(data) {
         const key = data.toLowerCase();
-        if (matchesKey(data, "escape") || key === "n") {
-            this.feedback = { ok: false, message: "Kill cancelled." };
+        if (matchesKey(data, "pageUp")) {
+            this.killDialogScroll = Math.max(0, this.killDialogScroll - this.killDialogPageRows);
+        }
+        else if (matchesKey(data, "pageDown")) {
+            this.killDialogScroll += this.killDialogPageRows;
+        }
+        else if (matchesKey(data, "escape") || key === "n") {
+            this.feedback = undefined;
             this.killConfirmation = undefined;
             this.killDialogChoice = "cancel";
         }
@@ -387,7 +434,7 @@ export class ActorInspectorOverlay {
             if (this.killDialogChoice === "kill")
                 this.confirmKill();
             else {
-                this.feedback = { ok: false, message: "Kill cancelled." };
+                this.feedback = undefined;
                 this.killConfirmation = undefined;
             }
         }
@@ -398,6 +445,7 @@ export class ActorInspectorOverlay {
         this.killDialogChoice = "cancel";
         if (!confirmation || !this.killRun)
             return;
+        this.feedbackFromAction = true;
         try {
             const result = this.killRun(confirmation.run, confirmation.runInstanceId);
             this.feedback = result.ok ? undefined : result;
@@ -406,44 +454,52 @@ export class ActorInspectorOverlay {
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
+            const normalized = message.replaceAll(/\s+/g, " ");
+            let selected = normalized.slice(0, 160);
+            const clipped = typeof normalized === "string" && normalized.length > 160;
+            if (clipped && typeof selected === "string" && /[\uD800-\uDBFF]/u.test(selected.at(-1) ?? "") && /[\uDC00-\uDFFF]/u.test(normalized[160]))
+                selected = selected.slice(0, -1);
             this.feedback = {
                 ok: false,
-                message: `Kill failed: ${message.replaceAll(/\s+/g, " ").slice(0, 160)}.`,
+                message: ActorInspector.formatActorInspectorKillFeedback("failed", `${selected}`, { clipped }),
             };
         }
     }
-    renderKillDialog(innerWidth) {
+    renderKillDialog(width, maxRows) {
+        const innerWidth = Math.min(width, 70), textWidth = innerWidth - 2;
         const confirmation = this.killConfirmation;
         const cancel = this.killDialogChoice === "cancel"
-            ? this.theme.bg("selectedBg", this.theme.fg("accent", "  Cancel  "))
-            : this.theme.fg("muted", "  Cancel  ");
+            ? this.theme.bg("selectedBg", this.theme.fg("accent", " Cancel "))
+            : this.theme.fg("muted", " Cancel ");
         const kill = this.killDialogChoice === "kill"
-            ? this.theme.bg("selectedBg", this.theme.fg("error", "  Kill actor  "))
-            : this.theme.fg("error", "  Kill actor  ");
-        const body = [
-            "",
-            this.theme.fg("error", "Kill this running actor?"),
-            "",
-            `${this.theme.fg("muted", "Run:")} ${this.theme.fg("accent", `run:${confirmation.run}`)}`,
-            `${this.theme.fg("muted", "Current status:")} ${this.theme.fg("warning", confirmation.status)}`,
-            "",
-            this.theme.fg("text", "This invokes generation-fenced runtime kill."),
-            "",
-            `${cancel}    ${kill}`,
-            "",
+            ? this.theme.bg("selectedBg", this.theme.fg("error", " Kill actor "))
+            : this.theme.fg("error", " Kill actor ");
+        const details = this.documentProjection({
+            run: confirmation.run,
+            state: confirmation.status,
+            action: "generation-fenced runtime kill",
+        }, textWidth).lines;
+        const safety = this.closureWarning(textWidth).map(line => this.theme.fg("warning", line));
+        const choices = visibleWidth(cancel) + 2 + visibleWidth(kill) <= textWidth
+            ? [this.center(`${cancel}  ${kill}`, textWidth)]
+            : [this.center(cancel, textWidth), this.center(kill, textWidth)];
+        const layout = this.popupLayout(maxRows, safety.length + 1 + choices.length, details.length);
+        this.killDialogPageRows = layout.pageRows;
+        this.killDialogScroll = Math.min(this.killDialogScroll, Math.max(0, details.length - this.killDialogPageRows));
+        const visible = details.slice(this.killDialogScroll, this.killDialogScroll + this.killDialogPageRows);
+        const hints = innerWidth < 30 ? this.keyHints(["↵", "pick"], ["esc", "back"])
+            : innerWidth < 60 ? this.keyHints(["←→/tab", "choose"], ["↵", "pick"], ["esc", "back"]) : this.renderKeyHints(true);
+        return [
+            this.border("╭", " Confirm Actor Kill ", "╮", innerWidth),
+            ...(layout.top ? [this.row("", innerWidth)] : []),
+            ...visible.map(line => this.row("  " + line, innerWidth)),
+            ...(layout.paged ? [this.row("  " + this.theme.fg("muted", `${this.killDialogScroll + 1}-${this.killDialogScroll + visible.length}/${details.length} pgup/pgdn`), innerWidth)] : []),
+            ...[...safety, "", ...choices].map(line => this.row("  " + line, innerWidth)),
+            ...(layout.bottom ? [this.row("", innerWidth)] : []),
+            this.footerBorder(hints, innerWidth),
         ];
-        const lines = [this.border("╭", " Confirm Actor Kill ", "╮", innerWidth)];
-        const availableRows = this.contentViewportRows() + 3;
-        const topPadding = Math.max(0, Math.floor((availableRows - body.length) / 2));
-        const rows = [...Array.from({ length: topPadding }, () => ""), ...body].slice(0, availableRows);
-        while (rows.length < availableRows)
-            rows.push("");
-        for (const line of rows)
-            lines.push(this.row(this.center(line, innerWidth), innerWidth));
-        lines.push(this.footerBorder(this.renderKeyHints(), innerWidth));
-        return lines;
     }
-    renderRunControl(run, sequence) {
+    renderRunControl(run, sequence, width) {
         const active = this.focus === "runs" || (this.focus === "select" && this.selectorMode === "run");
         const prefix = active ? this.theme.fg("accent", " ← ") : "   ";
         const suffix = active ? this.theme.fg("accent", " → ") : "   ";
@@ -452,10 +508,11 @@ export class ActorInspectorOverlay {
             return active ? this.theme.bg("selectedBg", empty) : empty;
         }
         const value = `${prefix}${this.theme.fg("muted", "Run: ")}${this.theme.fg("text", `#${sequence}`)}  ${this.theme.fg("accent", run.run)}  ${this.theme.fg(this.statusColor(run.status), run.status)}${suffix}`;
-        return active ? this.theme.bg("selectedBg", value) : value;
+        const bounded = truncateToWidth(value, width, "…");
+        return active ? this.theme.bg("selectedBg", bounded) : bounded;
     }
     renderTabs(run) {
-        const source = this.traceSource(run);
+        const source = this.tab === "trace" ? this.traceSource(run) : "all";
         return TABS.map((tab, index) => {
             const base = `${tab[0].toUpperCase()}${tab.slice(1)}`;
             const label = tab === "trace" && source !== "all" ? `${base}: ${source}` : base;
@@ -479,39 +536,112 @@ export class ActorInspectorOverlay {
     renderContent(run, width) {
         if (!run)
             return [this.theme.fg("muted", " No owned actor runs")];
+        if (this.tab === "control" && (this.focus === "list" || this.focus === "detail"))
+            return this.renderControlContent(run, width);
         if (this.focus === "detail")
             return this.renderTraceDetail(width);
         if (this.tab === "trace")
-            return this.renderTraceList(run);
-        const stateDir = path.join(this.stateRoot, run.run);
+            return this.renderTraceList(run, width);
+        const selectedRun = run.run;
+        const stateDir = path.join(this.stateRoot, selectedRun);
         const value = this.tab === "recipe"
             ? ActorInspector.readActorInspectorRecipe(stateDir)
             : this.controlDocument(run, stateDir);
-        const projection = this.documentProjection(value, width);
+        const body = this.documentProjection(value, width);
+        const identity = this.documentProjection({ selected_run_id: selectedRun }, width);
+        const projection = {
+            lines: [...identity.lines, ...body.lines],
+            stripes: [...identity.stripes, ...body.stripes.map(index => index + 1)],
+        };
         const maxStart = Math.max(0, projection.lines.length - this.contentViewportRows());
         this.documentScroll = Math.min(this.documentScroll, maxStart);
         this.contentStripeIndices = projection.stripes.slice(this.documentScroll, this.documentScroll + this.contentViewportRows());
         return projection.lines.slice(this.documentScroll, this.documentScroll + this.contentViewportRows());
     }
-    renderSelector(run, availableRows) {
+    modalUnderlay(width) {
+        const frame = this.inspectorFrame;
+        const height = this.contentViewportRows() + 5;
+        if (frame.width === width && frame.lines.length === height)
+            return frame.lines.slice();
+        // Resize the frozen underlay without refreshing evidence behind an open modal.
+        const innerWidth = width - 2;
+        const content = (index) => sliceByColumn(frame.lines[index] ?? "", 1, frame.width - 2, true);
+        return [
+            this.border("╭", " Actor Inspector ", "╮", innerWidth),
+            this.row(content(1), innerWidth),
+            this.row(content(2), innerWidth),
+            this.border("├", "", "┤", innerWidth),
+            ...Array.from({ length: height - 5 }, (_, index) => this.row(index < frame.lines.length - 5 ? content(index + 4) : "", innerWidth)),
+            this.footerBorder(content(frame.lines.length - 1), innerWidth),
+        ];
+    }
+    compositePopup(lines, popup, width) {
+        const popupWidth = visibleWidth(popup[0]);
+        const left = Math.floor((width - popupWidth) / 2);
+        const top = Math.floor((lines.length - popup.length) / 2);
+        for (const [offset, line] of popup.entries()) {
+            const base = lines[top + offset];
+            const right = left + popupWidth;
+            // Terminal-default background masks underlying stripes; selected buttons keep their own fill.
+            lines[top + offset] = `${sliceByColumn(base, 0, left, true)}\u001b[49m${line}\u001b[49m${sliceByColumn(base, right, width - right, true)}`;
+        }
+    }
+    popupLayout(maxRows, fixedRows, detailRows) {
+        // Reserve readable text, pinned safety and choices before decorative blank rows.
+        const minimum = 2 + fixedRows + Math.min(2, detailRows);
+        const paddingRows = Math.min(2, Math.max(0, maxRows - minimum));
+        const height = Math.min(maxRows, Math.max(maxRows - 2, minimum + paddingRows));
+        const slots = height - 2 - fixedRows - paddingRows;
+        const paged = detailRows > slots;
+        return { top: paddingRows > 0, bottom: paddingRows > 1, pageRows: Math.min(detailRows, slots - Number(paged)), paged };
+    }
+    renderFeedbackPopup(width, maxRows) {
+        const feedback = this.feedback;
+        const innerWidth = Math.min(70, width - 2), textWidth = innerWidth - 2;
+        const color = feedback.ok
+            ? "success"
+            : /^(?:Kill (?:failed|rejected)|- action: kill\n- result: (?:failed|rejected)\n)/u.test(feedback.message) ? "error" : "warning";
+        const message = `${feedback.message}`;
+        const details = this.wrapDocument(message.split(/\r\n|\r|\n/u).map(text => ({ text })), textWidth).map(line => line.text);
+        const safety = this.feedbackFromAction ? [...this.closureWarning(textWidth), "No automatic retry."] : [];
+        const layout = this.popupLayout(maxRows, safety.length, details.length);
+        this.feedbackPageRows = layout.pageRows;
+        this.feedbackScroll = Math.min(this.feedbackScroll, Math.max(0, details.length - this.feedbackPageRows));
+        const visible = details.slice(this.feedbackScroll, this.feedbackScroll + this.feedbackPageRows);
+        return [
+            this.border("╭", " Notice ", "╮", innerWidth),
+            ...(layout.top ? [this.row("", innerWidth)] : []),
+            ...visible.map(line => this.row("  " + this.theme.fg(color, line), innerWidth)),
+            ...(layout.paged ? [this.row("  " + this.theme.fg("muted", `${this.feedbackScroll + 1}-${this.feedbackScroll + visible.length}/${details.length} ↑↓ pgup/pgdn`), innerWidth)] : []),
+            ...safety.map(line => this.row("  " + this.theme.fg("warning", line), innerWidth)),
+            ...(layout.bottom ? [this.row("", innerWidth)] : []),
+            this.footerBorder(this.keyHints(["esc", "close"]), innerWidth),
+        ];
+    }
+    closureWarning(width) {
+        return width >= visibleWidth("- closure: unconfirmed")
+            ? ["- closure: unconfirmed"] : ["- closure:", "  unconfirmed"];
+    }
+    renderSelector(run, availableRows, width) {
+        // Run menu reserves five offset columns, two markers, two borders and one right-padding column.
         const options = this.selectorMode === "run"
-            ? this.runSelectorOptions()
+            ? this.runSelectorOptions(Math.max(0, width - 10))
             : this.traceSources(run).map((source) => ({
                 content: `${this.theme.fg("accent", "Trace:")} ${this.theme.fg("text", source)}`,
                 preserveColors: true,
             }));
         return this.renderMenuBox(options, this.selectorIndex, availableRows);
     }
-    runSelectorOptions() {
+    runSelectorOptions(width) {
         const runs = this.runs();
         const sequenceWidth = Math.max(2, ...runs.map((_item, index) => `#${runs.length - index - 1}`.length));
         const runWidth = Math.max(1, ...runs.map((item) => visibleWidth(item.run)));
         return runs.map((item, index) => ({
-            content: [
+            content: truncateToWidth([
                 this.theme.fg("text", this.fit(`#${runs.length - index - 1}`, sequenceWidth)),
                 this.theme.fg("accent", this.fit(item.run, runWidth)),
                 this.theme.fg(this.statusColor(item.status), item.status),
-            ].join("  "),
+            ].join("  "), width, "…"),
             preserveColors: true,
         }));
     }
@@ -522,29 +652,40 @@ export class ActorInspectorOverlay {
         const maxStart = Math.max(0, options.length - visibleLimit);
         const start = Math.max(0, Math.min(focusedIndex - Math.floor(visibleLimit / 2), maxStart));
         const visible = options.slice(start, start + visibleLimit);
-        const width = Math.max(8, ...options.map((option) => visibleWidth(option.content) + 4));
-        const border = (left, right, marker = "") => this.theme.fg("borderAccent", `${left}${marker}${"─".repeat(Math.max(0, width - visibleWidth(marker)))}${right}`);
+        const runMenu = this.selectorMode === "run";
+        const width = Math.max(8, ...options.map((option) => visibleWidth(option.content) + (runMenu ? 3 : 4)));
+        // Reset both menu edges so sliced document backgrounds cannot bleed through.
+        const ownBackground = (line) => runMenu ? `\u001b[49m${line}\u001b[49m` : line;
+        const border = (left, right, marker = "") => ownBackground(this.theme.fg("borderAccent", `${left}${marker}${"─".repeat(Math.max(0, width - visibleWidth(marker)))}${right}`));
         return [
             border("╭", "╮", start > 0 ? "↑" : ""),
             ...visible.map((option, offset) => {
                 const index = start + offset;
                 const marker = index === focusedIndex
-                    ? this.theme.fg("accent", " ▶ ")
-                    : "   ";
-                const row = this.fit(`${marker}${option.content}`, width);
+                    ? this.theme.fg("accent", runMenu ? "▶ " : " ▶ ")
+                    : runMenu ? "  " : "   ";
+                const row = this.fit(`${marker}${option.content}`, width - Number(runMenu)) + (runMenu ? " " : "");
                 const colored = index === focusedIndex && !option.preserveColors
                     ? this.theme.fg("accent", row)
                     : row;
-                const styled = index === focusedIndex ? this.theme.bg("selectedBg", colored) : colored;
-                return `${this.theme.fg("borderAccent", "│")}${styled}${this.theme.fg("borderAccent", "│")}`;
+                const background = index === focusedIndex ? "selectedBg" : runMenu && index % 2 ? "customMessageBg" : undefined;
+                // Native truncation emits full SGR resets; repaint each resulting segment.
+                const styled = background === undefined ? colored : runMenu
+                    ? colored.split("\u001b[0m").map(part => this.theme.bg(background, part)).join("\u001b[0m")
+                    : this.theme.bg(background, colored);
+                return ownBackground(`${this.theme.fg("borderAccent", "│")}${styled}${this.theme.fg("borderAccent", "│")}`);
             }),
             border("╰", "╯", start + visible.length < options.length ? "↓" : ""),
         ];
     }
-    renderTraceList(run) {
+    traceTableLine(text, width) {
+        const [first = "", ...rest] = text.split(/\r\n|\r|\n/u);
+        return truncateToWidth(first + (rest.length ? "…" : ""), width, "…");
+    }
+    renderTraceList(run, width) {
         const items = this.traceItems(run);
-        const summary = RunsTrace.summarizeRunTraceJournal(RunsTrace.readRunTraceJournal(path.join(this.stateRoot, run.run)));
-        const banner = summary.history_complete ? [] : [this.theme.fg("warning", ` ! Trace history incomplete: ${summary.compacted ? `${summary.compactions_total} compaction(s), ` : ""}${summary.dropped_event_count_exact ? summary.dropped_events : "unknown"} dropped event(s), ${summary.dropped_bytes} bytes`)];
+        const summary = this.traceCache.journalSummary ??= RunsTrace.summarizeRunTraceJournal(RunsTrace.readRunTraceJournal(path.join(this.stateRoot, run.run)));
+        const banner = summary.history_complete ? [] : [this.theme.fg("warning", width < visibleWidth(" ! Trace history incomplete:") ? " ! Trace incomplete…" : this.traceTableLine(` ! Trace history incomplete: ${summary.compacted ? `${summary.compactions_total} compaction(s), ` : ""}${summary.dropped_event_count_exact ? summary.dropped_events : "unknown"} dropped event(s), ${summary.dropped_bytes} bytes`, width))];
         if (items.length === 0)
             return [...banner, this.theme.fg("muted", " No Trace evidence")];
         if (this.selectedTraceId) {
@@ -575,59 +716,315 @@ export class ActorInspectorOverlay {
                 const detail = item.detail && typeof item.detail === "object"
                     ? item.detail
                     : {};
-                const marker = item.level === "error"
-                    ? this.theme.fg("error", "!")
-                    : detail.attention
-                        ? this.theme.fg("warning", "A")
-                        : " ";
+                const attention = item.level !== "error" && detail.attention
+                    ? this.theme.fg("warning", "A") + " "
+                    : "";
                 const prefix = this.focus === "list" && index === this.rowIndex
-                    ? this.theme.fg("accent", " ▶ ")
-                    : "   ";
-                const sequence = item[TraceProjection.TRACE_ITEM_SEQUENCE] ?? items.length - index - 1;
-                const row = `${prefix}${this.theme.fg("text", `#${sequence}`)} ${marker} ${this.theme.fg("muted", item.source)}/${this.theme.fg(item.level === "error" ? "error" : "accent", item.kind)}  ${this.theme.fg("text", item.summary)}`;
+                    ? this.theme.fg("accent", "▶ ")
+                    : "  ";
+                const chronology = item[TraceProjection.TRACE_ITEM_CHRONOLOGY];
+                const sequence = chronology?.state === "available" ? chronology.ordinal : "?";
+                const row = `${prefix}${this.theme.fg("text", `#${sequence}`)} ${attention}${this.theme.fg("muted", item.source)}/${this.theme.fg(item.level === "error" ? "error" : "accent", item.kind)}  ${this.theme.fg("text", item.summary)}`;
+                const preview = this.traceTableLine(row, width);
                 return this.focus === "list" && index === this.rowIndex
-                    ? this.theme.fg("accent", row)
-                    : row;
+                    ? this.theme.fg("accent", preview)
+                    : preview;
             })];
     }
     renderTraceDetail(width) {
         if (!this.traceDetail)
             return [this.theme.fg("warning", " Trace row is no longer available")];
-        const projection = this.documentProjection(this.traceDetail, width);
+        const sequence = this.traceDetail[TraceProjection.TRACE_ITEM_SEQUENCE];
+        const value = {
+            ...(sequence !== undefined ? { projection_sequence: sequence } : {}),
+            ...this.traceDetail,
+            chronology: this.traceDetail[TraceProjection.TRACE_ITEM_CHRONOLOGY] ?? { state: "unavailable", reason: "metadata_unavailable" },
+        };
+        const projection = this.traceDetail.source === "agent" && this.traceDetail.kind === "agent.turn"
+            ? this.agentDetailProjection(value, width) : this.documentProjection(value, width);
         const maxStart = Math.max(0, projection.lines.length - this.contentViewportRows());
         this.detailScroll = Math.min(this.detailScroll, maxStart);
         this.contentStripeIndices = projection.stripes.slice(this.detailScroll, this.detailScroll + this.contentViewportRows());
         return projection.lines.slice(this.detailScroll, this.detailScroll + this.contentViewportRows());
     }
+    agentDetailSegments(value) {
+        const extractedBody = Symbol("extracted-body");
+        const bodies = [];
+        // Only typed SessionEvidenceTurn slots are bodies. Never inspect authored text for framing.
+        const select = (item, field) => {
+            if (typeof item === "string") {
+                bodies.push({ field, text: item });
+                return extractedBody;
+            }
+            return item;
+        };
+        const record = value;
+        const detail = record.detail;
+        let metadata = value;
+        if (detail && typeof detail === "object" && !Array.isArray(detail)) {
+            const retained = Object.fromEntries(Object.entries(detail).map(([key, item]) => {
+                if (["assistantText", "userText", "thinking"].includes(key) && typeof item === "string") {
+                    return [key, select(item, ["detail", key])];
+                }
+                if (key !== "toolCalls" || !Array.isArray(item))
+                    return [key, item];
+                return [key, item.map((call, callIndex) => {
+                        if (!call || typeof call !== "object" || Array.isArray(call))
+                            return call;
+                        // Action-first display order only; retained tool-call data and body rendering stay unchanged.
+                        const rank = (key) => key === "name" ? 0 : key === "arguments" ? 1 : key === "result" ? 3 : 2;
+                        return Object.fromEntries(Object.entries(call).sort(([left], [right]) => rank(left) - rank(right)).map(([name, result]) => {
+                            if (name !== "result")
+                                return [name, result];
+                            const field = ["detail", key, callIndex, name];
+                            if (typeof result === "string")
+                                return [name, select(result, field)];
+                            if (!Array.isArray(result))
+                                return [name, result];
+                            return [name, result.map((block, blockIndex) => {
+                                    if (!block || typeof block !== "object" || block.type !== "text" || typeof block.text !== "string")
+                                        return block;
+                                    select(block.text, [...field, blockIndex, "text"]);
+                                    return Object.fromEntries(Object.entries(block).filter(([slot]) => slot !== "text"));
+                                })];
+                        }).filter(([, item]) => item !== extractedBody));
+                    })];
+            }).filter(([, item]) => item !== extractedBody));
+            metadata = { ...record, detail: retained };
+        }
+        return [{ kind: "metadata", value: metadata }, ...bodies.flatMap(({ field, text }) => [
+                { kind: "metadata", value: { field } }, { kind: "body", text },
+            ])];
+    }
+    metadataText(value) {
+        // Copy own selected data, so the library cannot invoke an object's toJSON hook.
+        const copy = (item) => {
+            // UI-only value state: keep an own undefined slot visible, distinct from null or literal text.
+            if (item === undefined)
+                return { value_state: "undefined" };
+            if (typeof item === "function")
+                throw new TypeError("Inspector metadata must be selected own data");
+            if (!item || typeof item !== "object")
+                return item;
+            if (Array.isArray(item))
+                return Array.from({ length: item.length }, (_, index) => {
+                    const descriptor = Object.getOwnPropertyDescriptor(item, String(index));
+                    if (descriptor && !Object.hasOwn(descriptor, "value"))
+                        throw new TypeError("Inspector metadata must be selected own data");
+                    return copy(descriptor?.value);
+                });
+            const result = Object.create(null);
+            for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(item))) {
+                if (!descriptor.enumerable)
+                    continue;
+                if (!Object.hasOwn(descriptor, "value"))
+                    throw new TypeError("Inspector metadata must be selected own data");
+                result[key] = copy(descriptor.value);
+            }
+            return result;
+        };
+        const document = new Document(copy(value), { version: "1.2", schema: "core", aliasDuplicateObjects: false });
+        visit(document, { Pair(_key, pair) {
+                if (isScalar(pair.key) && typeof pair.key.value === "string" && pair.key.value.includes("\uFEFF"))
+                    pair.key.type = "QUOTE_DOUBLE";
+            } });
+        return document.toString({ collectionStyle: "block", indent: 2, lineWidth: 0, directives: false,
+            defaultStringType: "PLAIN", doubleQuotedAsJSON: true });
+    }
+    agentDetailProjection(value, width) {
+        const segments = this.agentDetailSegments(value);
+        const lines = [], stripes = [];
+        const markdownTheme = { ...getMarkdownTheme(), codeBlockIndent: "" };
+        const detailStripe = Object.keys(value).indexOf("detail");
+        const append = (rendered, stripe) => {
+            lines.push(...rendered);
+            stripes.push(...rendered.map(() => stripe));
+        };
+        const metadata = (selected, stripe) => {
+            // yaml's standard serializer has no completion-wire budget/depth ceiling. Data is already admitted upstream.
+            const yaml = this.metadataText(selected).replace(/\n$/u, "");
+            append(this.wrapDocument(yaml.split("\n").map(text => ({ text })), width).map(line => this.theme.fg("muted", line.text)), stripe);
+        };
+        segments.forEach((segment, index) => {
+            if (index)
+                append([""], detailStripe);
+            if (segment.kind === "body") {
+                append(new Markdown(segment.text, 0, 0, markdownTheme, { color: text => this.theme.fg("text", text) }).render(width), detailStripe);
+            }
+            else if (index === 0) {
+                // Serialize root entries separately to retain root-field stripe provenance without parsing YAML rows.
+                Object.entries(segment.value).forEach(([key, item], stripe) => metadata({ [key]: item }, stripe));
+            }
+            else {
+                if (segments[index + 1]?.kind === "body")
+                    append([this.theme.fg("muted", "---")], detailStripe);
+                metadata(segment.value, detailStripe);
+                if (segments[index + 1]?.kind === "body")
+                    append([this.theme.fg("muted", "---")], detailStripe);
+            }
+        });
+        return { lines, stripes };
+    }
     controlDocument(run, stateDir) {
-        const endpoint = run.runInstanceId
-            ? RunControlDelivery.readRunControlEndpoint(stateDir, run.runInstanceId)
-            : undefined;
+        return this.controlObservation(run, stateDir).document;
+    }
+    controlObservation(run, stateDir = path.join(this.stateRoot, run.run)) {
+        if (this.controlCache?.run === run.run && this.controlCache.generation === run.runInstanceId)
+            return this.controlCache;
         const meta = this.readRunMeta(stateDir);
-        const journal = RunsControls.readRunControlJournalFromStateDir(stateDir);
-        const capacity = computeRunControlCapacity(journal.records);
-        const stalePending = journal.records.reduce((count, control) => count + Number(Boolean(RuntimeTriage.classifyRuntimeControl({ run: run.run,
-            runInstanceId: run.runInstanceId, status: run.status }, control, Date.now()).stale)), 0);
-        return {
-            status: run.status,
-            run_instance_id: run.runInstanceId,
-            pending: capacity.pending, pending_limit: capacity.limit,
-            available: capacity.available, backpressured: capacity.backpressured,
-            journal_bytes: (() => { try {
-                return statSync(RunsControls.runControlsFile(stateDir)).size;
+        const bound = Boolean(meta && !Array.isArray(meta) && run.runInstanceId && meta.run === run.run
+            && meta.run_instance_id === run.runInstanceId && meta.ownerId === this.ownerId);
+        const diagnostics = [];
+        let actions = [];
+        if (!bound)
+            diagnostics.push({ reason: "metadata_binding_unavailable" });
+        else {
+            try {
+                actions = normalizeRecipeControl(meta.control) ?? [];
             }
             catch {
-                return 0;
-            } })(),
-            journal_limit: Limits.RUN_CONTROL_JOURNAL_MAX_BYTES,
-            stale_pending: stalePending,
-            diagnostics: journal.diagnostics.map((item) => item.line === undefined
-                ? { reason: "unreadable_control_journal" } : { line: item.line, reason: "invalid_control_json" }),
-            actor_actions: Array.isArray(meta.control) ? meta.control : [],
-            runtime_actions: run.status === "running" ? ["kill"] : ["archive", "prune"],
-            endpoint,
-            recent_controls: journal.records.slice(-20).reverse().map((control) => ControlProjection.projectRunControl(control)),
-        };
+                diagnostics.push({ reason: "invalid_action_declarations" });
+            }
+        }
+        const endpoint = bound ? RunControlDelivery.readRunControlEndpoint(stateDir, run.runInstanceId) : undefined;
+        const journal = bound ? RunsControls.readRunControlJournalFromStateDir(stateDir) : { records: [], diagnostics: [] };
+        diagnostics.push(...journal.diagnostics.map(item => item.line === undefined
+            ? { reason: "unreadable_control_journal" } : { reason: "invalid_control_json", line: item.line }));
+        const now = Date.now();
+        const ids = new Map();
+        for (const value of journal.records) {
+            if (value && typeof value === "object" && typeof value.id === "string") {
+                const id = value.id;
+                ids.set(id, (ids.get(id) ?? 0) + 1);
+            }
+        }
+        const accepted = [];
+        for (const [parsedIndex, value] of journal.records.entries()) {
+            const classification = RuntimeTriage.classifyRuntimeControl(run, value, now);
+            if (classification.diagnostic) {
+                diagnostics.push({ reason: classification.diagnostic.reason });
+                continue;
+            }
+            const record = value;
+            if (record.run_instance_id !== run.runInstanceId) {
+                diagnostics.push({ reason: "foreign_generation" });
+                continue;
+            }
+            if (ids.get(record.id) !== 1) {
+                diagnostics.push({ reason: "duplicate_control_id" });
+                continue;
+            }
+            if (["queued_at", "delivered_at", "claimed_at", "handled_at", "failed_at"].some(field => {
+                const timestamp = record[field];
+                return (field === "queued_at" || timestamp !== undefined) && (typeof timestamp !== "string" || !Number.isFinite(Date.parse(timestamp)));
+            })) {
+                diagnostics.push({ reason: "invalid_record_timestamp" });
+                continue;
+            }
+            accepted.push({ id: record.id, value: ControlProjection.projectRunControl(record), parsedIndex,
+                age: Math.max(0, now - Date.parse(runControlStatusTimestamp(record, record.status))),
+                reason: classification.stale?.reason });
+        }
+        const capacity = computeRunControlCapacity(journal.records);
+        const partial = diagnostics.length > 0;
+        const rows = accepted.filter(row => row.parsedIndex >= journal.records.length - 20).reverse();
+        const readiness = partial ? "data_unavailable" : run.status !== "running" ? "not_ready"
+            : !actions.length ? "unsupported" : capacity.backpressured ? "backpressure" : endpoint ? "ready_recorded_endpoint" : "not_ready";
+        const reason = partial ? "partial_observation" : run.status !== "running" ? "run_terminal"
+            : !actions.length ? "no_declared_actor_actions" : capacity.backpressured ? "pending_limit_reached"
+                : endpoint ? "recorded_endpoint_only_not_connection_proof" : "recorded_endpoint_unavailable";
+        this.controlCache = { run: run.run, generation: run.runInstanceId, rows, document: {
+                actor_control_readiness: readiness, reason, actor_actions: actions,
+                data_state: partial ? "partial" : "available", pending: bound ? capacity.pending : null,
+                pending_limit: capacity.limit, available: partial ? null : capacity.available,
+                backpressured: bound ? capacity.backpressured : null,
+                runtime_actions: bound ? run.status === "running" ? this.killRun && run.runInstanceId ? ["kill"] : [] : ["archive", "prune"] : [],
+                runtime_actions_note: "API capabilities; only existing Run-focus Kill is interactive",
+                request_history: { shown: rows.length, retained: journal.records.length, parsed_suffix_limit: 20,
+                    partial: partial || journal.records.length > 20, coverage: "recent parsed journal records; malformed-line coverage unavailable; not complete lifetime history" },
+                request_navigation: "Enter opens requests; Down scrolls overview",
+                evidence: "Saved non-atomic observation; delivered != handled; handled != Run completion; stale never expires requests",
+                status: run.status, run_instance_id: run.runInstanceId,
+                journal_bytes: (() => { try {
+                    return statSync(RunsControls.runControlsFile(stateDir)).size;
+                }
+                catch {
+                    return null;
+                } })(),
+                journal_limit: Limits.RUN_CONTROL_JOURNAL_MAX_BYTES,
+                stale_pending: accepted.filter(row => row.reason).length, diagnostics,
+                endpoint, recent_controls: rows.map(row => row.value),
+            } };
+        return this.controlCache;
+    }
+    selectedControl(observation) {
+        const selection = this.controlSelection;
+        return selection?.run === observation.run && selection.generation === observation.generation
+            ? observation.rows.find(row => row.id === selection.id) : undefined;
+    }
+    openControlList(run) {
+        this.focus = "list";
+        this.rowIndex = 0;
+        const observation = run ? this.controlObservation(run) : undefined;
+        const first = observation?.rows[0];
+        this.controlSelection = first ? { run: observation.run, generation: observation.generation, id: first.id } : undefined;
+    }
+    handleControlInput(data, run) {
+        if (matchesKey(data, "escape") || matchesKey(data, "left")) {
+            this.focus = this.focus === "detail" ? "list" : "tabs";
+            this.detailScroll = 0;
+            return;
+        }
+        if (!run)
+            return;
+        const observation = this.controlObservation(run);
+        const selected = this.selectedControl(observation);
+        if (this.focus === "detail") {
+            this.handleScrollableInput(data, "detail");
+            return;
+        }
+        const index = selected ? observation.rows.indexOf(selected) : -1;
+        let next = index;
+        if (matchesKey(data, "up"))
+            next = Math.max(0, index - 1);
+        else if (matchesKey(data, "down"))
+            next = Math.min(observation.rows.length - 1, index + 1);
+        else if (matchesKey(data, "pageUp"))
+            next = Math.max(0, index - this.contentViewportRows());
+        else if (matchesKey(data, "pageDown"))
+            next = Math.min(observation.rows.length - 1, index + this.contentViewportRows());
+        else if ((matchesKey(data, "return") || matchesKey(data, "right")) && selected) {
+            this.focus = "detail";
+            this.detailScroll = 0;
+            return;
+        }
+        if (next !== index && observation.rows[next])
+            this.controlSelection = {
+                run: observation.run, generation: observation.generation, id: observation.rows[next].id,
+            };
+    }
+    renderControlContent(run, width) {
+        const observation = this.controlObservation(run);
+        const selected = this.selectedControl(observation);
+        if (this.focus === "detail") {
+            const projection = this.documentProjection(selected ? selected.value : { request: "unavailable", reason: "selected Run/generation/id no longer available" }, width);
+            this.detailScroll = Math.min(this.detailScroll, Math.max(0, projection.lines.length - this.contentViewportRows()));
+            this.contentStripeIndices = projection.stripes.slice(this.detailScroll, this.detailScroll + this.contentViewportRows());
+            return projection.lines.slice(this.detailScroll, this.detailScroll + this.contentViewportRows());
+        }
+        const coverage = observation.document.request_history;
+        const banner = this.traceTableLine(` Requests ${coverage.shown}/${coverage.retained} parsed; recent20${coverage.partial ? "; partial" : ""}`, width);
+        if (!observation.rows.length)
+            return [banner, " No requests", this.traceTableLine(" Saved observation; history may be partial", width)];
+        const index = selected ? observation.rows.indexOf(selected) : -1;
+        const count = Math.max(1, this.contentViewportRows() - 2);
+        const start = Math.max(0, index - Math.floor(count / 2));
+        const rows = observation.rows.slice(start, start + count);
+        this.contentStripeIndices = [0, 0, ...rows.map((_row, offset) => start + offset + 1)];
+        if (index >= start)
+            this.contentSelectedRows.add(index - start + 2);
+        return [banner, this.traceTableLine(index < 0 ? " Selection unavailable; arrows select a request" : " Status | action | status age | error/stale", width),
+            ...rows.map(row => this.traceTableLine(`${row === selected ? "▶" : " "} ${row.value.status} | ${row.value.action} | ${Math.floor(row.age / 1000)}s | ${row.value.error ?? row.reason ?? ""}`, width))];
     }
     allTraceItems(run) {
         if (!run)
@@ -666,178 +1063,81 @@ export class ActorInspectorOverlay {
         }
     }
     documentProjection(value, width) {
-        const sections = value && typeof value === "object" && !Array.isArray(value)
-            ? Object.entries(value).map(([key, item]) => this.labeledDocumentLines(key, item))
-            : [this.document(value)];
+        // Copy before enumerating roots: accessors and hooks must never run during projection.
+        const selected = this.metadataText(value);
+        const descriptors = value && typeof value === "object" && !Array.isArray(value)
+            ? Object.entries(Object.getOwnPropertyDescriptors(value)).filter(([, descriptor]) => descriptor.enumerable) : [];
+        const sections = descriptors.length
+            ? descriptors.map(([key, descriptor]) => this.metadataText({ [key]: descriptor.value }))
+            : [selected];
         const lines = [];
         const stripes = [];
         sections.forEach((section, sectionIndex) => {
-            const wrapped = this.wrapDocument(section, width);
-            lines.push(...wrapped.map((line) => this.styleDocumentLine(line)));
+            const wrapped = this.wrapDocument(section.replace(/\n$/u, "").split("\n").map(text => ({ text })), width);
+            lines.push(...wrapped.map((line) => this.theme.fg("muted", line.text)));
             stripes.push(...wrapped.map(() => sectionIndex));
         });
         return { lines, stripes };
     }
-    inlineDocumentValue(value) {
-        if (Array.isArray(value)) {
-            if (value.length === 0)
-                return "[]";
-            if (value.every((item) => (item === null || typeof item !== "object") &&
-                !(typeof item === "string" && /[\r\n]/u.test(item)))) {
-                return `[${value.map((item) => String(item ?? "none")).join(", ")}]`;
-            }
-            return undefined;
-        }
-        if (value && typeof value === "object") {
-            if (Object.keys(value).length === 0)
-                return "{}";
-        }
-        return undefined;
-    }
-    labeledDocumentLines(key, value, depth = 0) {
-        const inline = this.inlineDocumentValue(value);
-        if (inline !== undefined)
-            return [`${"  ".repeat(depth)}${key}: ${inline}`];
-        if (value && typeof value === "object") {
-            const indent = "  ".repeat(depth);
-            const nested = this.document(value, depth);
-            return [`${indent}${key}: ${nested[0].slice(indent.length)}`, ...nested.slice(1)];
-        }
-        return this.labeledScalarLines(key, value, depth);
-    }
-    labeledScalarLines(key, value, depth = 0) {
-        const indent = "  ".repeat(depth);
-        const [first = "", ...rest] = String(value ?? "none").split(/\r?\n/u);
-        return [
-            `${indent}${key}: ${first}`,
-            ...rest.map((line) => `${indent}  ${line}`),
-        ];
-    }
-    document(value, depth = 0) {
-        if (value === null || value === undefined)
-            return [`${"  ".repeat(depth)}none`];
-        const inline = this.inlineDocumentValue(value);
-        if (inline !== undefined)
-            return [`${"  ".repeat(depth)}${inline}`];
-        if (Array.isArray(value)) {
-            const indent = "  ".repeat(depth);
-            return [
-                `${indent}[`,
-                ...value.flatMap((item, index) => {
-                    const itemDepth = depth + 1;
-                    const itemIndent = "  ".repeat(itemDepth);
-                    const marker = `#${index}`;
-                    const itemInline = this.inlineDocumentValue(item);
-                    let lines;
-                    if (itemInline !== undefined) {
-                        lines = [`${itemIndent}${marker}: ${itemInline}`];
-                    }
-                    else if (item && typeof item === "object") {
-                        const nested = this.document(item, itemDepth);
-                        lines = [
-                            `${itemIndent}${marker}: ${nested[0].slice(itemIndent.length)}`,
-                            ...nested.slice(1),
-                        ];
-                    }
-                    else {
-                        lines = this.labeledScalarLines(marker, item, itemDepth);
-                    }
-                    if (index < value.length - 1)
-                        lines[lines.length - 1] += ",";
-                    return lines;
-                }),
-                `${indent}]`,
-            ];
-        }
-        if (typeof value === "object") {
-            const indent = "  ".repeat(depth);
-            const entries = Object.entries(value);
-            return [
-                `${indent}{`,
-                ...entries.flatMap(([key, item], index) => {
-                    const lines = this.labeledDocumentLines(key, item, depth + 1);
-                    if (index < entries.length - 1)
-                        lines[lines.length - 1] += ",";
-                    return lines;
-                }),
-                `${indent}}`,
-            ];
-        }
-        return String(value)
-            .split(/\r?\n/u)
-            .map((line) => `${"  ".repeat(depth)}${line}`);
-    }
     wrapDocument(lines, width) {
         return lines.flatMap((line) => {
-            const normalized = line.replaceAll("\t", "  ");
-            if (visibleWidth(normalized) <= width)
-                return [normalized];
-            const leading = normalized.match(/^ */u)?.[0] ?? "";
-            const continuation = `${leading}  `;
+            // Keep the existing terminal tab display policy; never alter the source value.
+            const text = line.text.replaceAll("\t", "  ");
+            const label = line.label?.replaceAll("\t", "  ");
+            if (visibleWidth(text) <= width)
+                return [{ text, label }];
+            const leading = text.match(/^ */u)?.[0] ?? "";
+            const hanging = label === undefined ? leading : `${leading}  `;
+            const continuation = hanging.length <= width - 2 ? hanging : "";
             const wrapped = [];
-            let rest = normalized.slice(leading.length);
-            let prefix = leading;
-            while (rest && visibleWidth(`${prefix}${rest}`) > width) {
-                const available = Math.max(1, width - visibleWidth(prefix));
-                const candidate = this.visiblePrefix(rest, available);
-                const minimumBreak = Math.floor(candidate.length * 0.6);
-                const preferred = Math.max(candidate.lastIndexOf(" "), candidate.lastIndexOf("/"), candidate.lastIndexOf(","));
-                const cut = preferred >= minimumBreak ? preferred + 1 : candidate.length;
-                wrapped.push(`${prefix}${rest.slice(0, cut).trimEnd()}`);
-                rest = rest.slice(cut).trimStart();
-                prefix = continuation;
-            }
-            if (rest)
-                wrapped.push(`${prefix}${rest}`);
+            const columns = visibleWidth(text);
+            let offset = 0;
+            while (offset < columns) {
+                const prefix = offset === 0 ? "" : continuation;
+                const available = width - visibleWidth(prefix);
+                // Native cell slicing keeps graphemes; retain separators instead of trimming authored spaces.
+                let part = sliceByColumn(text, offset, available, true);
+                const preferred = Math.max(part.lastIndexOf(" "), part.lastIndexOf("/"), part.lastIndexOf(","));
+                if (offset + visibleWidth(part) < columns && preferred >= Math.floor(part.length * 0.6)) {
+                    part = sliceByColumn(text, offset, visibleWidth(part.slice(0, preferred + 1)), true);
+                }
+                const consumed = visibleWidth(part);
+                const labelPart = label === undefined ? "" : sliceByColumn(label, offset, consumed, true);
+                wrapped.push({ text: prefix + part, ...(labelPart ? { label: prefix + labelPart } : {}) });
+                offset += consumed;
+            }
             return wrapped;
         });
     }
-    styleDocumentLine(line) {
-        const indent = line.match(/^ */u)?.[0] ?? "";
-        const content = line.slice(indent.length);
-        if (content.endsWith(":")) {
-            return `${indent}${this.theme.fg("accent", content)}`;
-        }
-        const indexed = /^(#\d+:)(.*)$/u.exec(content);
-        if (indexed) {
-            return `${indent}${this.theme.fg("accent", indexed[1])}${this.theme.fg("text", indexed[2])}`;
-        }
-        const labeled = /^([^:]+:)(.*)$/u.exec(content);
-        if (labeled) {
-            return `${indent}${this.theme.fg("muted", labeled[1])}${this.theme.fg("text", labeled[2])}`;
-        }
-        return `${indent}${this.theme.fg(content === "none" || content === "[]" ? "muted" : "text", content)}`;
-    }
-    visiblePrefix(value, width) {
-        let consumed = 0;
-        let result = "";
-        for (const character of value) {
-            const characterWidth = visibleWidth(character);
-            if (consumed + characterWidth > width)
-                break;
-            result += character;
-            consumed += characterWidth;
-        }
-        return result;
-    }
-    renderKeyHints() {
+    keyHints(...items) {
         const hint = (keys, description) => `${this.theme.fg("accent", keys)}${this.theme.fg("borderAccent", ` ${description}`)}`;
         const divider = this.theme.fg("borderAccent", " ─ ");
-        const hints = (...items) => items.map(([keys, description]) => hint(keys, description)).join(divider);
-        if (this.killConfirmation) {
-            return hints(["←→/tab", "choose"], ["enter/y", "confirm"], ["esc/n", "cancel"]);
+        return items.map(([keys, description]) => hint(keys, description)).join(divider);
+    }
+    renderKeyHints(killConfirmation = false) {
+        if (killConfirmation) {
+            return this.keyHints(["←→/tab", "choose"], ["enter", "pick"], ["y", "kill"], ["esc/n", "cancel"]);
         }
         if (this.focus === "select") {
-            return hints(["↑↓", "option"], ["enter/→", "apply"], ["←/esc", "back"]);
+            return this.keyHints(["↑↓", "option"], ["enter/→", "apply"], ["←/esc", "back"]);
         }
         if (this.focus === "detail") {
-            return hints(["↑↓/pgup/pgdn", "scroll"], ["←/esc", "back"]);
+            return this.keyHints(["↑↓/pgup/pgdn", "scroll"], ["←/esc", "back"]);
+        }
+        if (this.tab === "control" && this.focus === "document") {
+            return this.keyHints(["↑↓/pgup/pgdn", "scroll"], ["enter", "requests"], ["←/esc", "tabs"]);
+        }
+        if (this.tab === "control" && this.focus === "list") {
+            return this.keyHints(["↑↓/pgup/pgdn", "row"], ["→/enter", "YAML"], ["←/esc", "tabs"]);
+        }
+        if (this.tab === "control" && this.focus === "tabs") {
+            return this.keyHints(["←→", "tabs"], ["↓", "overview"], ["enter", "requests"], ["esc", "close"]);
         }
         if (this.focus === "document") {
-            return hints(["↑↓/pgup/pgdn", "scroll"], ["↑ at top", "tabs"], ["←/esc", "tabs"]);
+            return this.keyHints(["↑↓/pgup/pgdn", "scroll"], ["↑ at top", "tabs"], ["←/esc", "tabs"]);
         }
         if (this.focus === "list") {
-            return hints(["↑↓/pgup/pgdn", "row"], ["→/enter", "open"], ["←", "tabs"], ["esc", "close"]);
+            return this.keyHints(["↑↓/pgup/pgdn", "row"], ["→/enter", "open"], ["←", "tabs"], ["esc", "close"]);
         }
         if (this.focus === "runs") {
             const items = [["←→", "run"], ["↓", "tabs"], ["enter", "list"]];
@@ -845,11 +1145,11 @@ export class ActorInspectorOverlay {
             if (this.killRun && run?.status === "running" && run.runInstanceId)
                 items.push(["k", "kill"]);
             items.push(["esc", "close"]);
-            return hints(...items);
+            return this.keyHints(...items);
         }
         return this.tab === "trace"
-            ? hints(["←→", "tabs"], ["↑↓", "focus"], ["enter/f", "source"], ["esc", "close"])
-            : hints(["←→", "tabs"], ["↑↓", "focus"], ["enter", "open"], ["esc", "close"]);
+            ? this.keyHints(["←→", "tabs"], ["↑↓", "focus"], ["enter/f", "source"], ["esc", "close"])
+            : this.keyHints(["←→", "tabs"], ["↑↓", "focus"], ["enter", "open"], ["esc", "close"]);
     }
     statusColor(status) {
         if (status === "failed")