@tt-a1i/openpi 0.4.0 → 0.6.0

package/extensions/subagents/src/ui/takeover.ts

@@ -2,8 +2,8 @@
  * Takeover UI for subagents (ported from v1, rendering from the synchronous
  * SubagentReadModel instead of live pi sessions):
  * - SubagentDashboard: compact picker docked above the input, listing all subagents.
- * - TakeoverView: full interactive view of one subagent with an input line
- *   to steer/continue it.
+ * - TakeoverView: full read-only view of one subagent; steering remains owned
+ *   by the parent model through the subagent tools.
  */
 
 import type {
@@ -12,22 +12,15 @@ import type {
   Theme,
 } from "@earendil-works/pi-coding-agent";
 import type { Component, Focusable, TUI } from "@earendil-works/pi-tui";
-import { Input, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import {
-  hintLine,
-  panelFrame,
-  type ScreenHint,
-} from "../../../shared/screen-chrome.ts";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { AgentSessionPage } from "../../../shared/agent-session-page.ts";
+import { hintLine, panelFrame } from "../../../shared/screen-chrome.ts";
 import { sanitizeTerminalText } from "../../../shared/terminal-text.ts";
 import { formatElapsed, type SubagentSnapshot } from "../domain.ts";
 import { formatContextUtilization } from "../../../shared/context-utilization.ts";
+import { SPINNER_INTERVAL_MS, spinnerFrame } from "../../../shared/spinner.ts";
 import type { SubagentReadModel } from "../manager.ts";
-import {
-  buildTranscriptLines,
-  SPINNER_INTERVAL_MS,
-  spinnerFrame,
-  TranscriptRenderer,
-} from "./transcript.ts";
+import { subagentTranscriptDocument } from "./transcript.ts";
 
 export function sanitizeSubagentDisplayLine(value: string) {
   return sanitizeTerminalText(value).replace(/\s+/g, " ").trim();
@@ -43,7 +36,7 @@ function configuredKeys(
 /**
  * One spinner definition for the whole subagent UI: the dashboard glyph, the
  * takeover header, and the transcript's live tools must animate in step, so the
- * frames and their cadence live in `transcript.ts` and are imported here.
+ * frames and their cadence live in `shared/spinner.ts` and are imported here.
  */
 function statusGlyph(
   snap: SubagentSnapshot,
@@ -69,6 +62,8 @@ function statusGlyph(
 
 export interface TakeoverOptions {
   readonly badge?: string;
+  /** Captured from the parent UI when this child page opens. */
+  readonly toolsExpanded?: boolean;
 }
 
 export async function openSubagentTakeover(
@@ -78,12 +73,24 @@ export async function openSubagentTakeover(
   options?: TakeoverOptions,
 ) {
   if (!view.get(id)) return;
+  const takeoverOptions: TakeoverOptions = {
+    ...options,
+    toolsExpanded: ctx.ui.getToolsExpanded(),
+  };
   await ctx.ui.custom<null>(
     (tui, theme, keybindings, done) =>
-      new TakeoverView(tui, theme, keybindings, id, view, done, options),
+      new TakeoverView(
+        tui,
+        theme,
+        keybindings,
+        id,
+        view,
+        done,
+        takeoverOptions,
+      ),
     {
       overlay: true,
-      overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%" },
+      overlayOptions: { anchor: "top-left", width: "100%", maxHeight: "100%" },
     },
   );
 }
@@ -387,33 +394,18 @@ export class SubagentDashboard implements Component {
 
 // --- Takeover view ------------------------------------------------------------
 
-const TRANSCRIPT_SCROLL_STEP = 6;
-
 export class TakeoverView implements Component, Focusable {
-  private tui: TUI;
-  private theme: Theme;
-  private keybindings: KeybindingsManager;
-  private id: string;
-  private view: SubagentReadModel;
-  private done: (value: null) => void;
-  private options?: TakeoverOptions;
-
-  private input = new Input();
-  private transcriptRenderer = new TranscriptRenderer();
-  /** Scroll offset in lines from the bottom of the transcript. 0 = pinned to bottom. */
-  private scrollOffset = 0;
+  private page: AgentSessionPage;
   private unsubscribe: () => void;
   private renderTimer?: ReturnType<typeof setTimeout>;
   private ticker?: ReturnType<typeof setInterval>;
   private closed = false;
 
-  private _focused = false;
-  get focused(): boolean {
-    return this._focused;
+  get focused() {
+    return this.page.focused;
   }
   set focused(value: boolean) {
-    this._focused = value;
-    this.input.focused = value;
+    this.page.focused = value;
   }
 
   constructor(
@@ -425,46 +417,58 @@ export class TakeoverView implements Component, Focusable {
     done: (value: null) => void,
     options?: TakeoverOptions,
   ) {
-    this.tui = tui;
-    this.theme = theme;
-    this.keybindings = keybindings;
-    this.id = id;
-    this.view = view;
-    this.done = done;
-    this.options = options;
+    this.page = new AgentSessionPage(
+      tui,
+      theme,
+      keybindings,
+      {
+        getState: () => {
+          const snap = view.get(id);
+          if (!snap) return undefined;
+          return {
+            id: snap.id,
+            title: snap.title,
+            status: snap.status,
+            document: subagentTranscriptDocument(
+              snap,
+              view.getToolRenderer?.(id),
+            ),
+            metadata: [
+              options?.badge,
+              snap.meta.modelLabel,
+              formatContextUtilization(snap.usage),
+              formatElapsed(snap),
+            ],
+            errorText: snap.errorText,
+          };
+        },
+        close: () => this.close(done),
+        abort: () => view.requestAbort(id),
+      },
+      { toolsExpanded: options?.toolsExpanded },
+    );
     this.unsubscribe = view.subscribeTo(id, () => {
-      this.refreshTicker();
-      this.scheduleRender();
+      this.refreshTicker(view.get(id), tui);
+      this.scheduleRender(tui);
     });
-    this.refreshTicker();
-    this.input.onSubmit = (value: string) => {
-      const text = value.trim();
-      if (!text) return;
-      this.input.setValue("");
-      this.view.requestSend(this.id, text);
-      this.scrollOffset = 0;
-      this.tui.requestRender();
-    };
+    this.refreshTicker(view.get(id), tui);
   }
 
-  private snap(): SubagentSnapshot | undefined {
-    return this.view.get(this.id);
-  }
-
-  private refreshTicker() {
-    const interval =
-      this.snap()?.status === "running" ? SPINNER_INTERVAL_MS : 1000;
+  private refreshTicker(snap: SubagentSnapshot | undefined, tui: TUI) {
     if (this.ticker) clearInterval(this.ticker);
-    this.ticker = setInterval(() => this.tui.requestRender(), interval);
+    this.ticker = undefined;
+    if (snap?.status === "running") {
+      this.ticker = setInterval(() => tui.requestRender(), SPINNER_INTERVAL_MS);
+    }
   }
 
-  private scheduleRender() {
+  private scheduleRender(tui: TUI) {
     if (this.renderTimer) return;
     // Streaming can emit an event per token. Limit terminal repaints so this
     // view cannot starve input handling or make the child look frozen.
     this.renderTimer = setTimeout(() => {
       this.renderTimer = undefined;
-      if (!this.closed) this.tui.requestRender();
+      if (!this.closed) tui.requestRender();
     }, 50);
   }
 
@@ -478,8 +482,8 @@ export class TakeoverView implements Component, Focusable {
     return true;
   }
 
-  private close() {
-    if (this.cleanup()) this.done(null);
+  private close(done: (value: null) => void) {
+    if (this.cleanup()) done(null);
   }
 
   dispose(): void {
@@ -487,202 +491,14 @@ export class TakeoverView implements Component, Focusable {
   }
 
   handleInput(data: string): void {
-    if (this.keybindings.matches(data, "app.clear")) {
-      const snap = this.snap();
-      if (snap?.status === "running") this.view.requestAbort(this.id);
-      return;
-    }
-    if (
-      this.keybindings.matches(data, "app.interrupt") ||
-      this.keybindings.matches(data, "tui.select.cancel")
-    ) {
-      this.close();
-      return;
-    }
-    if (this.keybindings.matches(data, "tui.editor.cursorUp")) {
-      this.scrollOffset += TRANSCRIPT_SCROLL_STEP;
-      this.tui.requestRender();
-      return;
-    }
-    if (this.keybindings.matches(data, "tui.editor.cursorDown")) {
-      this.scrollOffset = Math.max(
-        0,
-        this.scrollOffset - TRANSCRIPT_SCROLL_STEP,
-      );
-      this.tui.requestRender();
-      return;
-    }
-    if (this.keybindings.matches(data, "tui.editor.pageUp")) {
-      this.scrollOffset += this.viewportHeight();
-      this.tui.requestRender();
-      return;
-    }
-    if (this.keybindings.matches(data, "tui.editor.pageDown")) {
-      this.scrollOffset = Math.max(
-        0,
-        this.scrollOffset - this.viewportHeight(),
-      );
-      this.tui.requestRender();
-      return;
-    }
-    this.input.handleInput(data);
-    this.tui.requestRender();
-  }
-
-  private viewportHeight(): number {
-    const rows = this.tui.terminal.rows || 30;
-    // Top rule, transcript rule, input, key hints, and bottom rule are five
-    // chrome rows. The overlay leaves Pi's final footer row visible.
-    return Math.max(1, rows - 6);
-  }
-
-  private rule(width: number, left = "", right = "") {
-    const fill = "─";
-    const available = Math.max(1, width);
-    const leftWidth = visibleWidth(left);
-    const rightWidth = visibleWidth(right);
-    if (!right || leftWidth + rightWidth + 2 > available) {
-      return truncateToWidth(
-        left + fill.repeat(Math.max(0, available - leftWidth)),
-        available,
-      );
-    }
-    return (
-      left +
-      fill.repeat(Math.max(1, available - leftWidth - rightWidth)) +
-      right
-    );
+    this.page.handleInput(data);
   }
 
   render(width: number): string[] {
-    const theme = this.theme;
-    const now = Date.now();
-    const lines: string[] = [];
-    const snap = this.snap();
-
-    if (!snap) {
-      const border = theme.fg("borderAccent", "─".repeat(Math.max(1, width)));
-      lines.push(
-        border,
-        theme.fg("dim", `${this.id} is no longer tracked`),
-        border,
-      );
-      return lines;
-    }
-
-    const title = sanitizeSubagentDisplayLine(snap.title) || snap.id;
-    const headerLeft =
-      theme.fg("borderAccent", "─ ") +
-      statusGlyph(snap, theme, now) +
-      " " +
-      theme.fg("accent", theme.bold(title)) +
-      theme.fg("borderAccent", " ");
-    const utilization = formatContextUtilization(snap.usage);
-    const metadata = [
-      ...(this.options?.badge
-        ? [theme.fg("muted", sanitizeSubagentDisplayLine(this.options.badge))]
-        : []),
-      theme.fg(
-        "muted",
-        sanitizeSubagentDisplayLine(snap.meta.modelLabel ?? "?") || "?",
-      ),
-      ...(utilization ? [theme.fg("muted", utilization)] : []),
-      theme.fg("muted", formatElapsed(snap)),
-    ];
-    const dot = theme.fg("dim", " · ");
-    while (
-      metadata.length > 1 &&
-      visibleWidth(headerLeft) + visibleWidth(metadata.join(dot)) + 2 > width
-    ) {
-      metadata.shift();
-    }
-    lines.push(
-      this.rule(
-        width,
-        truncateToWidth(
-          headerLeft,
-          Math.max(1, width - visibleWidth(metadata.join(dot)) - 2),
-        ),
-        metadata.join(dot),
-      ),
-    );
-
-    // Fixed-height transcript viewport. Errors consume a row, but scroll state
-    // is represented by the following rule so its height never changes.
-    // `now` is shared with the header glyph so both spinners show one frame.
-    const transcript = buildTranscriptLines(
-      snap,
-      width,
-      theme,
-      this.transcriptRenderer,
-      { now },
-    );
-    const viewport = this.viewportHeight();
-    const errorRows = snap.errorText ? 1 : 0;
-    const transcriptCapacity = Math.max(1, viewport - errorRows);
-    const maxOffset = Math.max(0, transcript.length - transcriptCapacity);
-    if (this.scrollOffset > maxOffset) this.scrollOffset = maxOffset;
-
-    const body: string[] = [];
-    if (snap.errorText) {
-      body.push(
-        truncateToWidth(
-          theme.fg(
-            "error",
-            `error: ${sanitizeSubagentDisplayLine(snap.errorText)}`,
-          ),
-          width,
-        ),
-      );
-    }
-    const end = transcript.length - this.scrollOffset;
-    const visible = transcript.slice(
-      Math.max(0, end - Math.max(1, viewport - body.length)),
-      end,
-    );
-    if (visible.length === 0) body.push(theme.fg("dim", "waiting for output…"));
-    else body.push(...visible);
-    while (body.length < viewport) body.push("");
-    lines.push(...body.slice(0, viewport));
-
-    lines.push(
-      this.rule(
-        width,
-        theme.fg("borderAccent", "─"),
-        this.scrollOffset > 0 ? theme.fg("dim", `↓ ${this.scrollOffset}`) : "",
-      ),
-    );
-    lines.push(...this.input.render(width));
-    const keys = (binding: Parameters<KeybindingsManager["getKeys"]>[0]) =>
-      configuredKeys(this.keybindings, binding);
-    const editing: ScreenHint[] = [
-      [keys("tui.input.submit"), "send"],
-      [keys("app.interrupt"), "back"],
-      [keys("app.clear"), "abort run"],
-      [
-        `${keys("tui.editor.cursorUp")}/${keys("tui.editor.cursorDown")}`,
-        "scroll",
-      ],
-    ];
-    // Same drop-the-page-hint fallback as before, measured on the styled line
-    // so the keys-brighter-than-labels styling cannot change what fits.
-    const full = hintLine(
-      theme,
-      [
-        ...editing,
-        [`${keys("tui.editor.pageUp")}/${keys("tui.editor.pageDown")}`, "page"],
-      ],
-      width,
-    );
-    lines.push(
-      visibleWidth(full) <= width ? full : hintLine(theme, editing, width),
-    );
-    lines.push(this.rule(width, theme.fg("borderAccent", "─")));
-    return lines;
+    return this.page.render(width);
   }
 
   invalidate(): void {
-    this.input.invalidate();
-    this.transcriptRenderer.invalidate();
+    this.page.invalidate();
   }
 }