@tt-a1i/openpi 0.3.0 → 0.4.0

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

@@ -1,7 +1,7 @@
 /**
  * Takeover UI for subagents (ported from v1, rendering from the synchronous
  * SubagentReadModel instead of live pi sessions):
- * - SubagentDashboard: full popup (overlay) listing all subagents.
+ * - 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.
  */
@@ -13,15 +13,20 @@ import type {
 } 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 { 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 type { SubagentReadModel } from "../manager.ts";
 import {
-  SPINNER_INTERVAL_MS,
-  TranscriptRenderer,
   buildTranscriptLines,
+  SPINNER_INTERVAL_MS,
   spinnerFrame,
+  TranscriptRenderer,
 } from "./transcript.ts";
 
 export function sanitizeSubagentDisplayLine(value: string) {
@@ -44,48 +49,22 @@ 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 {
@@ -127,7 +106,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 +125,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 +247,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 +254,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 +273,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 +329,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 +362,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;
@@ -694,13 +653,29 @@ export class TakeoverView implements Component, Focusable {
       ),
     );
     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`;
+    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(
-      truncateToWidth(
-        theme.fg("dim", visibleWidth(hints) <= width ? hints : compactHints),
-        width,
-      ),
+      visibleWidth(full) <= width ? full : hintLine(theme, editing, width),
     );
     lines.push(this.rule(width, theme.fg("borderAccent", "─")));
     return lines;

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

@@ -18,28 +18,14 @@ import type { SubagentSnapshot, TranscriptItem } from "../domain.ts";
 
 const MAX_CACHED_WIDTHS_PER_ITEM = 2;
 
-export const SPINNER_FRAMES = [
-  "⠋",
-  "⠙",
-  "⠹",
-  "⠸",
-  "⠼",
-  "⠴",
-  "⠦",
-  "⠧",
-  "⠇",
-  "⠏",
-] as const;
-
-/** Frame cadence, shared with the dashboard and takeover headers. */
-export const SPINNER_INTERVAL_MS = 120;
-
-export function spinnerFrame(now: number) {
-  const frame = Math.floor(now / SPINNER_INTERVAL_MS) % SPINNER_FRAMES.length;
-  return SPINNER_FRAMES[
-    (frame + SPINNER_FRAMES.length) % SPINNER_FRAMES.length
-  ];
-}
+// The spinner lives in shared/ so strips outside this extension animate in
+// step; the re-export keeps this module's historical import surface intact.
+import { spinnerFrame } from "../../../shared/spinner.ts";
+export {
+  SPINNER_FRAMES,
+  SPINNER_INTERVAL_MS,
+  spinnerFrame,
+} from "../../../shared/spinner.ts";
 
 /**
  * Strip raw ANSI codes, expand tabs, and drop control chars. Terminal-expanded
@@ -79,7 +65,11 @@ function parsedArgs(preview: string) {
 }
 
 /** Turn common tool arguments into a useful, bounded summary without retaining raw args. */
-export function summarizeToolArgs(name: string, argsPreview?: string) {
+export function summarizeToolArgs(
+  name: string,
+  argsPreview?: string,
+  cwd?: string,
+) {
   if (!argsPreview) return undefined;
 
   const fallback = compactPreview(argsPreview);
@@ -88,20 +78,33 @@ export function summarizeToolArgs(name: string, argsPreview?: string) {
   const args = parsedArgs(fallback);
   if (!args) return fallback;
 
+  const path = (field: string) => {
+    const value = stringField(args, field);
+    return value ? relativeToCwd(value, cwd) : undefined;
+  };
+
   const tool = name.toLowerCase();
   if (tool === "bash") return stringField(args, "command") ?? fallback;
   if (tool === "read" || tool === "write" || tool === "edit") {
-    return stringField(args, "path") ?? fallback;
+    return path("path") ?? fallback;
   }
   if (tool === "rg" || tool === "fd") {
     const pattern = stringField(args, "pattern");
-    const path = stringField(args, "path");
-    if (pattern && path) return `${pattern} · ${path}`;
-    return pattern ?? path ?? fallback;
+    const searchPath = path("path");
+    if (pattern && searchPath) return `${pattern} · ${searchPath}`;
+    return pattern ?? searchPath ?? fallback;
   }
   return fallback;
 }
 
+/** Absolute paths inside the child's own checkout read as noise; relativize. */
+function relativeToCwd(path: string, cwd?: string) {
+  if (!cwd) return path;
+  if (path === cwd) return ".";
+  const prefix = cwd.endsWith("/") ? cwd : `${cwd}/`;
+  return path.startsWith(prefix) ? path.slice(prefix.length) : path;
+}
+
 function transcriptMarkdownTheme() {
   const theme = getMarkdownTheme();
   return {
@@ -169,14 +172,18 @@ function renderThinking(theme: Theme, text: string, width: number) {
   return out;
 }
 
-function renderToolBody(theme: Theme, name: string, argsPreview?: string) {
+function renderToolBody(
+  theme: Theme,
+  name: string,
+  argsPreview?: string,
+  cwd?: string,
+) {
   const toolName = sanitizeText(name);
-  const preview = summarizeToolArgs(toolName, argsPreview);
+  const preview = summarizeToolArgs(toolName, argsPreview, cwd);
   // The `$` form only earns its prompt when there is a command to show; a bare
   // `$ ` would read as an empty shell line.
   if (toolName === "bash" && preview) return theme.fg("dim", `$ ${preview}`);
   return (
-    theme.fg("dim", "→ ") +
     theme.fg("toolTitle", toolName) +
     (preview ? theme.fg("dim", ` ${preview}`) : "")
   );
@@ -210,7 +217,7 @@ function phaseGlyph(theme: Theme, phase: ToolPhase, now: number) {
   }
 }
 
-/** Command line: `<glyph> $ cmd` for bash, `<glyph> → name args` otherwise. */
+/** Command line: `<glyph> $ cmd` for bash, `<glyph> name args` otherwise. */
 function renderToolLine(
   theme: Theme,
   phase: ToolPhase,
@@ -218,9 +225,10 @@ function renderToolLine(
   argsPreview: string | undefined,
   width: number,
   now: number,
+  cwd?: string,
 ) {
   return truncateToWidth(
-    `${phaseGlyph(theme, phase, now)} ${renderToolBody(theme, name, argsPreview)}`,
+    `${phaseGlyph(theme, phase, now)} ${renderToolBody(theme, name, argsPreview, cwd)}`,
     width,
   );
 }
@@ -231,10 +239,14 @@ function renderOutputLine(
   isError: boolean,
   outputPreview: string,
   width: number,
+  cwd?: string,
 ) {
-  const preview = outputPreview || "(no output)";
+  // Tool output echoes the absolute search path back (fd/rg print what they
+  // were given); inside the child's own checkout the relative form is enough.
+  const text = cwd ? outputPreview.split(`${cwd}/`).join("") : outputPreview;
+  const preview = text || "(no output)";
   const content = isError
-    ? theme.fg(outputPreview ? "error" : "dim", preview)
+    ? theme.fg(text ? "error" : "dim", preview)
     : theme.fg("dim", preview);
   return truncateToWidth(`    ${content}`, width);
 }
@@ -245,6 +257,7 @@ function renderAssistantItem(
   width: number,
   phases: ReadonlyMap<string, ToolPhase>,
   now: number,
+  cwd?: string,
 ) {
   const out: string[] = [];
   for (const part of item.parts) {
@@ -265,7 +278,15 @@ function renderAssistantItem(
       // command twice and make the block reflow when the tool settles.
       if (phase === "live") continue;
       out.push(
-        renderToolLine(theme, phase, part.name, part.argsPreview, width, now),
+        renderToolLine(
+          theme,
+          phase,
+          part.name,
+          part.argsPreview,
+          width,
+          now,
+          cwd,
+        ),
       );
     }
   }
@@ -278,6 +299,7 @@ function renderToolResultItem(
   width: number,
   paired: boolean,
   now: number,
+  cwd?: string,
 ) {
   const preview = firstOutputPreview(item.outputPreview);
   // An orphan result (its call is not the previous item) still needs a glyph:
@@ -293,11 +315,11 @@ function renderToolResultItem(
         now,
       ),
       ...(preview
-        ? [renderOutputLine(theme, item.isError, preview, width)]
+        ? [renderOutputLine(theme, item.isError, preview, width, cwd)]
         : []),
     ];
   }
-  return [renderOutputLine(theme, item.isError, preview, width)];
+  return [renderOutputLine(theme, item.isError, preview, width, cwd)];
 }
 
 function isPairedToolResult(
@@ -321,12 +343,13 @@ function renderTranscriptItem(
   width: number,
   context: ItemContext,
   now: number,
+  cwd?: string,
 ) {
   if (item.kind === "user") return renderUserText(theme, item.text, width);
   if (item.kind === "assistant") {
-    return renderAssistantItem(theme, item, width, context.phases, now);
+    return renderAssistantItem(theme, item, width, context.phases, now, cwd);
   }
-  return renderToolResultItem(theme, item, width, context.paired, now);
+  return renderToolResultItem(theme, item, width, context.paired, now, cwd);
 }
 
 interface ItemContext {
@@ -413,7 +436,8 @@ export class TranscriptRenderer {
       const key = `${width}|${context.token}`;
       const cached = this.itemCache.get(item)?.get(key);
       const lines =
-        cached ?? renderTranscriptItem(theme, item, width, context, now);
+        cached ??
+        renderTranscriptItem(theme, item, width, context, now, snap.cwd);
       if (!cached) {
         const widths = this.itemCache.get(item) ?? new Map<string, string[]>();
         if (widths.size >= MAX_CACHED_WIDTHS_PER_ITEM) {
@@ -456,11 +480,21 @@ export class TranscriptRenderer {
           : "ok"
         : "live";
       out.push(
-        renderToolLine(theme, phase, tool.name, tool.argsPreview, width, now),
+        renderToolLine(
+          theme,
+          phase,
+          tool.name,
+          tool.argsPreview,
+          width,
+          now,
+          snap.cwd,
+        ),
       );
       const preview = firstOutputPreview(tool.outputPreview);
       if (preview)
-        out.push(renderOutputLine(theme, !!tool.isError, preview, width));
+        out.push(
+          renderOutputLine(theme, !!tool.isError, preview, width, snap.cwd),
+        );
     }
 
     // Queued steering/follow-up messages: show them immediately so Enter

package/extensions/subagents/src/ui/wait-result.ts

@@ -26,7 +26,7 @@ export function buildWaitResultPreview(
   const results = details?.results ?? [];
   const failed = results.filter((result) => result.status === "error").length;
   const header =
-    theme.fg(failed > 0 ? "warning" : "success", "■") +
+    theme.fg(failed > 0 ? "warning" : "success", failed > 0 ? "!" : "✓") +
     ` ${theme.fg("accent", theme.bold(`${results.length} subagent${results.length === 1 ? "" : "s"} settled`))}` +
     (failed > 0 ? theme.fg("error", ` · ${failed} failed`) : "");
   const lines = [header];