@tt-a1i/openpi 0.3.1 → 0.5.0

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

@@ -1,9 +1,9 @@
 /**
  * Takeover UI for subagents (ported from v1, rendering from the synchronous
  * SubagentReadModel instead of live pi sessions):
- * - SubagentDashboard: full popup (overlay) listing all subagents.
- * - TakeoverView: full interactive view of one subagent with an input line
- *   to steer/continue it.
+ * - SubagentDashboard: compact picker docked above the input, listing all subagents.
+ * - TakeoverView: full read-only view of one subagent; steering remains owned
+ *   by the parent model through the subagent tools.
  */
 
 import type {
@@ -12,17 +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 { 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 "../format.ts";
+import { formatContextUtilization } from "../../../shared/context-utilization.ts";
+import { SPINNER_INTERVAL_MS, spinnerFrame } from "../../../shared/spinner.ts";
 import type { SubagentReadModel } from "../manager.ts";
-import {
-  SPINNER_INTERVAL_MS,
-  TranscriptRenderer,
-  buildTranscriptLines,
-  spinnerFrame,
-} from "./transcript.ts";
+import { subagentTranscriptDocument } from "./transcript.ts";
 
 export function sanitizeSubagentDisplayLine(value: string) {
   return sanitizeTerminalText(value).replace(/\s+/g, " ").trim();
@@ -38,58 +36,34 @@ 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,
   theme: Theme,
   now = Date.now(),
+  selected = false,
 ): string {
+  // A selected row keeps its state glyph and borrows the accent tone, so the
+  // list never hides what is still running behind a selection marker.
+  const tone = (color: "warning" | "success" | "error") =>
+    selected ? ("accent" as const) : color;
   switch (snap.status) {
     case "running":
-      return theme.fg("warning", spinnerFrame(now));
+      return theme.fg(tone("warning"), spinnerFrame(now));
     case "done":
-      return theme.fg("success", "✓");
+      return theme.fg(tone("success"), "✓");
     case "error":
-      return theme.fg("error", "✗");
+      return theme.fg(tone("error"), "✗");
   }
 }
 
-/**
- * Tool names come from the child's own tool-call events, so they are as
- * untrusted as their arguments and must be sanitized before reaching the
- * terminal: `truncateToWidth` only ignores escape sequences while measuring.
- */
-function runningActivity(snap: SubagentSnapshot) {
-  if (snap.status !== "running") return "";
-  const liveTool = snap.liveTools.at(-1);
-  if (liveTool) {
-    const name = sanitizeSubagentDisplayLine(liveTool.name);
-    const args = truncateToWidth(
-      sanitizeSubagentDisplayLine(liveTool.argsPreview ?? ""),
-      48,
-    );
-    return args ? `${name} · ${args}` : name;
-  }
-  for (const item of [...snap.transcript].reverse()) {
-    if (item.kind === "toolResult") {
-      return sanitizeSubagentDisplayLine(item.name);
-    }
-    if (item.kind !== "assistant") continue;
-    const tool = [...item.parts]
-      .reverse()
-      .find((part) => part.type === "toolCall");
-    if (tool?.type === "toolCall") {
-      return sanitizeSubagentDisplayLine(tool.name);
-    }
-  }
-  return "";
-}
-
 // --- Entry points --------------------------------------------------------------
 
 export interface TakeoverOptions {
   readonly badge?: string;
+  /** Captured from the parent UI when this child page opens. */
+  readonly toolsExpanded?: boolean;
 }
 
 export async function openSubagentTakeover(
@@ -99,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%" },
     },
   );
 }
@@ -127,7 +113,14 @@ export async function openSubagentPicker(
         new SubagentDashboard(tui, theme, keybindings, view, selection, done),
       {
         overlay: true,
-        overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%" },
+        // Dock the picker just above the editor (editor + strip + footer ≈ 5
+        // rows) like a command palette, instead of covering the conversation.
+        overlayOptions: {
+          anchor: "bottom-center",
+          width: "100%",
+          maxHeight: "60%",
+          margin: { bottom: 5 },
+        },
       },
     );
 
@@ -139,7 +132,10 @@ export async function openSubagentPicker(
   }
 }
 
-// --- Dashboard (fullscreen overlay) ----------------------------------------------
+// --- Dashboard (picker docked above the input) ---------------------------------
+
+/** A picker is a glance, not a workspace: cap the list window and scroll. */
+const MAX_PICKER_ROWS = 10;
 
 export interface DashboardSelection {
   id?: string;
@@ -258,24 +254,6 @@ export class SubagentDashboard implements Component {
     }
   }
 
-  private pad(text: string, width: number): string {
-    const truncated = truncateToWidth(text, width);
-    return truncated + " ".repeat(Math.max(0, width - visibleWidth(truncated)));
-  }
-
-  private borderSegment(width: number, title: string): string {
-    const theme = this.theme;
-    const label = title
-      ? ` ${truncateToWidth(title, Math.max(0, width - 3))} `
-      : "";
-    const labelWidth = visibleWidth(label);
-    return (
-      theme.fg("border", "─") +
-      (label ? theme.fg("text", label) : "") +
-      theme.fg("border", "─".repeat(Math.max(0, width - 1 - labelWidth)))
-    );
-  }
-
   render(width: number): string[] {
     const theme = this.theme;
     const subs = this.subs();
@@ -283,13 +261,14 @@ export class SubagentDashboard implements Component {
 
     // One timestamp per frame so every row's spinner shows the same frame.
     const now = Date.now();
+    // Docked above the editor, the panel borrows conversation space: cap the
+    // list window and scroll instead of growing toward the top of the screen.
     const rows = this.tui.terminal.rows || 30;
-    const maxBodyHeight = Math.max(1, rows - 5);
+    const maxBodyHeight = Math.min(Math.max(1, rows - 5), MAX_PICKER_ROWS);
     const bodyHeight =
       subs.length > maxBodyHeight ? maxBodyHeight : Math.max(1, subs.length);
     const innerWidth = Math.max(0, width - 2);
 
-    const lines: string[] = [];
     const running = subs.filter((snap) => snap.status === "running").length;
     const done = subs.filter((snap) => snap.status === "done").length;
     const failed = subs.filter((snap) => snap.status === "error").length;
@@ -301,37 +280,32 @@ export class SubagentDashboard implements Component {
       ]
         .filter(Boolean)
         .join(" · ") || "no agents";
-    lines.push(
-      theme.fg("border", "╭") +
-        this.borderSegment(innerWidth, `Subagents · ${summary}`) +
-        theme.fg("border", "╮"),
-    );
-
-    const divider = theme.fg("border", "│");
     const rowLines = this.renderRows(subs, innerWidth, bodyHeight, now);
-    for (const row of rowLines) {
-      lines.push(divider + this.pad(row, innerWidth) + divider);
-    }
-
-    // Bottom border
-    lines.push(
-      theme.fg("border", "╰") +
-        theme.fg("border", "─".repeat(innerWidth)) +
-        theme.fg("border", "╯"),
-    );
-
-    // Hints
-    lines.push(
-      truncateToWidth(
-        theme.fg(
-          "dim",
-          `  ${configuredKeys(this.keybindings, "tui.select.up")}/${configuredKeys(this.keybindings, "tui.select.down")}/jk select · ${configuredKeys(this.keybindings, "tui.select.confirm")} take over · x abort · ${configuredKeys(this.keybindings, "tui.select.cancel")} close`,
-        ),
+    const keys = (binding: Parameters<KeybindingsManager["getKeys"]>[0]) =>
+      configuredKeys(this.keybindings, binding);
+    // Shared chrome, so this panel and its hints read the same as /ps and
+    // /workflows. The frame is padded to the rows it was given, which keeps
+    // this view's content-fit height rather than reintroducing a fixed one.
+    return [
+      // One empty row of air between the conversation and the docked panel.
+      "",
+      ...panelFrame(theme, {
+        label: `Subagents · ${summary}`,
+        rows: rowLines,
+        width,
+        height: rowLines.length + 2,
+      }),
+      hintLine(
+        theme,
+        [
+          [`${keys("tui.select.up")}/${keys("tui.select.down")}/jk`, "select"],
+          [keys("tui.select.confirm"), "take over"],
+          ["x", "abort"],
+          [keys("tui.select.cancel"), "close"],
+        ],
         width,
       ),
-    );
-
-    return lines;
+    ];
   }
 
   private renderRows(
@@ -362,13 +336,16 @@ export class SubagentDashboard implements Component {
       const index = start + i;
       const isSelected = index === this.selection.index;
 
-      const marker = isSelected ? theme.fg("accent", "❯") : " ";
+      // One glyph column: a selected row tints its status glyph with the
+      // accent tone instead of stacking a second marker. The live tool name
+      // is deliberately absent: it flickers with every tool call and says
+      // nothing the user acts on.
+      const glyph = statusGlyph(snap, theme, now, isSelected);
       const safeTitle = sanitizeSubagentDisplayLine(snap.title) || snap.id;
       const title = isSelected
         ? theme.fg("accent", safeTitle)
         : theme.fg("text", safeTitle);
-      const activity = runningActivity(snap);
-      const prefix = ` ${marker} ${statusGlyph(snap, theme, now)} `;
+      const prefix = ` ${glyph} `;
 
       const utilization = formatContextUtilization(snap.usage);
       const metadata = [
@@ -392,20 +369,9 @@ export class SubagentDashboard implements Component {
       const right = metadata.join(dot);
       const rightWidth = visibleWidth(right);
       const leftMax = Math.max(0, width - rightWidth - (right ? 2 : 0));
-      const activityLabel = activity ? theme.fg("muted", ` · ${activity}`) : "";
       const left =
         prefix +
-        truncateToWidth(
-          title,
-          Math.max(
-            0,
-            leftMax - visibleWidth(prefix) - visibleWidth(activityLabel),
-          ),
-        ) +
-        truncateToWidth(
-          activityLabel,
-          Math.max(0, leftMax - visibleWidth(prefix)),
-        );
+        truncateToWidth(title, Math.max(0, leftMax - visibleWidth(prefix)));
       const gap = right
         ? Math.max(1, width - visibleWidth(left) - rightWidth)
         : 0;
@@ -428,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(
@@ -466,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);
   }
 
@@ -519,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 {
@@ -528,186 +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 hints = `${configuredKeys(this.keybindings, "tui.input.submit")} send · ${configuredKeys(this.keybindings, "app.interrupt")} back · ${configuredKeys(this.keybindings, "app.clear")} abort run · ${configuredKeys(this.keybindings, "tui.editor.cursorUp")}/${configuredKeys(this.keybindings, "tui.editor.cursorDown")} scroll · ${configuredKeys(this.keybindings, "tui.editor.pageUp")}/${configuredKeys(this.keybindings, "tui.editor.pageDown")} page`;
-    const compactHints = `${configuredKeys(this.keybindings, "tui.input.submit")} send · ${configuredKeys(this.keybindings, "app.interrupt")} back · ${configuredKeys(this.keybindings, "app.clear")} abort run · ${configuredKeys(this.keybindings, "tui.editor.cursorUp")}/${configuredKeys(this.keybindings, "tui.editor.cursorDown")} scroll`;
-    lines.push(
-      truncateToWidth(
-        theme.fg("dim", visibleWidth(hints) <= width ? hints : compactHints),
-        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();
   }
 }