@tt-a1i/openpi 0.2.0 → 0.3.0

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

@@ -18,6 +18,29 @@ 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
+  ];
+}
+
 /**
  * Strip raw ANSI codes, expand tabs, and drop control chars. Terminal-expanded
  * tabs (and stray escapes) make lines wider than the width we declare to the
@@ -146,10 +169,82 @@ function renderThinking(theme: Theme, text: string, width: number) {
   return out;
 }
 
+function renderToolBody(theme: Theme, name: string, argsPreview?: string) {
+  const toolName = sanitizeText(name);
+  const preview = summarizeToolArgs(toolName, argsPreview);
+  // 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}`) : "")
+  );
+}
+
+function firstOutputPreview(outputPreview?: string) {
+  return (
+    sanitizeText(outputPreview ?? "")
+      .split("\n")
+      .find((line) => line.trim()) ?? ""
+  );
+}
+
+/**
+ * One execution owns exactly one glyph column, on its command line. Output
+ * lines are plain indented text so a block keeps identical columns from the
+ * moment the command starts to the moment it settles.
+ */
+export type ToolPhase = "live" | "ok" | "error" | "pending";
+
+function phaseGlyph(theme: Theme, phase: ToolPhase, now: number) {
+  switch (phase) {
+    case "live":
+      return theme.fg("warning", spinnerFrame(now));
+    case "ok":
+      return theme.fg("success", "✓");
+    case "error":
+      return theme.fg("error", "✗");
+    case "pending":
+      return theme.fg("dim", "·");
+  }
+}
+
+/** Command line: `<glyph> $ cmd` for bash, `<glyph> → name args` otherwise. */
+function renderToolLine(
+  theme: Theme,
+  phase: ToolPhase,
+  name: string,
+  argsPreview: string | undefined,
+  width: number,
+  now: number,
+) {
+  return truncateToWidth(
+    `${phaseGlyph(theme, phase, now)} ${renderToolBody(theme, name, argsPreview)}`,
+    width,
+  );
+}
+
+/** Output line: indented under the command, no second glyph. */
+function renderOutputLine(
+  theme: Theme,
+  isError: boolean,
+  outputPreview: string,
+  width: number,
+) {
+  const preview = outputPreview || "(no output)";
+  const content = isError
+    ? theme.fg(outputPreview ? "error" : "dim", preview)
+    : theme.fg("dim", preview);
+  return truncateToWidth(`    ${content}`, width);
+}
+
 function renderAssistantItem(
   theme: Theme,
   item: Extract<TranscriptItem, { kind: "assistant" }>,
   width: number,
+  phases: ReadonlyMap<string, ToolPhase>,
+  now: number,
 ) {
   const out: string[] = [];
   for (const part of item.parts) {
@@ -164,12 +259,14 @@ function renderAssistantItem(
         ),
       );
     } else if (part.type === "toolCall") {
-      const preview = summarizeToolArgs(part.name, part.argsPreview);
-      const line =
-        theme.fg("muted", "→ ") +
-        theme.fg("toolTitle", part.name) +
-        (preview ? theme.fg("dim", ` ${preview}`) : "");
-      out.push(truncateToWidth(line, width));
+      const phase = phases.get(part.toolId) ?? "pending";
+      // A live tool is rendered by the live block, which owns the spinner and
+      // the streaming output; rendering the call here too would show the same
+      // 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),
+      );
     }
   }
   return out;
@@ -179,27 +276,117 @@ function renderToolResultItem(
   theme: Theme,
   item: Extract<TranscriptItem, { kind: "toolResult" }>,
   width: number,
+  paired: boolean,
+  now: number,
 ) {
-  const firstLine =
-    sanitizeText(item.outputPreview ?? "")
-      .split("\n")
-      .find((line) => line.trim()) ?? "";
-  const label = item.isError
-    ? theme.fg("error", "  error: ")
-    : theme.fg("dim", "  output: ");
-  return [
-    truncateToWidth(label + theme.fg("dim", firstLine || "(no output)"), width),
-  ];
+  const preview = firstOutputPreview(item.outputPreview);
+  // An orphan result (its call is not the previous item) still needs a glyph:
+  // there is no command line above it to carry one.
+  if (!paired) {
+    return [
+      renderToolLine(
+        theme,
+        item.isError ? "error" : "ok",
+        item.name,
+        undefined,
+        width,
+        now,
+      ),
+      ...(preview
+        ? [renderOutputLine(theme, item.isError, preview, width)]
+        : []),
+    ];
+  }
+  return [renderOutputLine(theme, item.isError, preview, width)];
+}
+
+function isPairedToolResult(
+  previous: TranscriptItem | undefined,
+  current: TranscriptItem,
+) {
+  if (
+    !previous ||
+    previous.kind !== "assistant" ||
+    current.kind !== "toolResult"
+  ) {
+    return false;
+  }
+  const lastPart = previous.parts[previous.parts.length - 1];
+  return lastPart?.type === "toolCall" && lastPart.toolId === current.toolId;
 }
 
 function renderTranscriptItem(
   theme: Theme,
   item: TranscriptItem,
   width: number,
+  context: ItemContext,
+  now: number,
 ) {
   if (item.kind === "user") return renderUserText(theme, item.text, width);
-  if (item.kind === "assistant") return renderAssistantItem(theme, item, width);
-  return renderToolResultItem(theme, item, width);
+  if (item.kind === "assistant") {
+    return renderAssistantItem(theme, item, width, context.phases, now);
+  }
+  return renderToolResultItem(theme, item, width, context.paired, now);
+}
+
+interface ItemContext {
+  readonly phases: ReadonlyMap<string, ToolPhase>;
+  readonly paired: boolean;
+  /** Cache discriminator: identity plus width is not enough on its own. */
+  readonly token: string;
+}
+
+/**
+ * An item's rendering depends on its neighbours (does a call have its result
+ * yet?) and on live state (is the call still running?), so the cache key has to
+ * carry that context or a stale glyph would outlive the phase it described.
+ */
+function itemContext(
+  transcript: ReadonlyArray<TranscriptItem>,
+  index: number,
+  liveIds: ReadonlySet<string>,
+): ItemContext {
+  const item = transcript[index]!;
+  if (item.kind === "user")
+    return { phases: new Map(), paired: false, token: "" };
+  if (item.kind === "toolResult") {
+    const paired = isPairedToolResult(transcript[index - 1], item);
+    return { phases: new Map(), paired, token: paired ? "p" : "o" };
+  }
+
+  const phases = new Map<string, ToolPhase>();
+  for (const part of item.parts) {
+    if (part.type !== "toolCall") continue;
+    if (liveIds.has(part.toolId)) {
+      phases.set(part.toolId, "live");
+      continue;
+    }
+    const result = findResult(transcript, index, part.toolId);
+    phases.set(
+      part.toolId,
+      result ? (result.isError ? "error" : "ok") : "pending",
+    );
+  }
+  return {
+    phases,
+    paired: false,
+    token: [...phases].map(([id, phase]) => `${id}:${phase}`).join(","),
+  };
+}
+
+/** The result for a call, if it has already landed later in the transcript. */
+function findResult(
+  transcript: ReadonlyArray<TranscriptItem>,
+  callIndex: number,
+  toolId: string,
+) {
+  for (let index = callIndex + 1; index < transcript.length; index++) {
+    const candidate = transcript[index];
+    if (candidate?.kind === "toolResult" && candidate.toolId === toolId) {
+      return candidate;
+    }
+  }
+  return undefined;
 }
 
 /**
@@ -208,24 +395,43 @@ function renderTranscriptItem(
  * from their component's invalidate() when Pi changes theme.
  */
 export class TranscriptRenderer {
-  private itemCache = new WeakMap<TranscriptItem, Map<number, string[]>>();
+  private itemCache = new WeakMap<TranscriptItem, Map<string, string[]>>();
 
-  render(snap: SubagentSnapshot, width: number, theme: Theme) {
+  render(
+    snap: SubagentSnapshot,
+    width: number,
+    theme: Theme,
+    options?: { readonly now?: number },
+  ) {
     const out: string[] = [];
+    const now = options?.now ?? Date.now();
+    const liveIds = new Set(snap.liveTools.map((tool) => tool.toolId));
 
-    for (const item of snap.transcript) {
-      const cached = this.itemCache.get(item)?.get(width);
-      const lines = cached ?? renderTranscriptItem(theme, item, width);
+    for (let index = 0; index < snap.transcript.length; index++) {
+      const item = snap.transcript[index];
+      const context = itemContext(snap.transcript, index, liveIds);
+      const key = `${width}|${context.token}`;
+      const cached = this.itemCache.get(item)?.get(key);
+      const lines =
+        cached ?? renderTranscriptItem(theme, item, width, context, now);
       if (!cached) {
-        const widths = this.itemCache.get(item) ?? new Map<number, string[]>();
+        const widths = this.itemCache.get(item) ?? new Map<string, string[]>();
         if (widths.size >= MAX_CACHED_WIDTHS_PER_ITEM) {
           const oldestWidth = widths.keys().next().value;
           if (oldestWidth !== undefined) widths.delete(oldestWidth);
         }
-        widths.set(width, lines);
+        widths.set(key, lines);
         this.itemCache.set(item, widths);
       }
-      if (lines.length > 0) out.push(...lines, "");
+      if (lines.length > 0) {
+        if (
+          out.length > 0 &&
+          !isPairedToolResult(snap.transcript[index - 1], item)
+        ) {
+          out.push("");
+        }
+        out.push(...lines);
+      }
     }
     while (out.length > 0 && out[out.length - 1] === "") out.pop();
 
@@ -239,19 +445,22 @@ export class TranscriptRenderer {
       if (out.length === before + 1) out.pop();
     }
 
-    // Live tool executions (present until the ToolEnd lands in the transcript).
+    // Live tool executions. The manager drops a live entry when its ToolEnd
+    // lands, and the transcript's call line then takes over with the settled
+    // glyph in the same column, so the block never reflows.
     for (const tool of snap.liveTools) {
       if (out.length > 0) out.push("");
-      const marker = tool.done
+      const phase: ToolPhase = tool.done
         ? tool.isError
-          ? theme.fg("error", "error")
-          : theme.fg("success", "done")
-        : theme.fg("warning", "running");
-      const args = summarizeToolArgs(tool.name, tool.argsPreview);
-      let line = `${theme.fg("toolTitle", tool.name)}${args ? theme.fg("dim", ` ${args}`) : ""} · ${marker}`;
-      const preview = tool.outputPreview && compactPreview(tool.outputPreview);
-      if (preview) line += theme.fg("dim", ` · ${preview}`);
-      out.push(truncateToWidth(line, width));
+          ? "error"
+          : "ok"
+        : "live";
+      out.push(
+        renderToolLine(theme, phase, tool.name, tool.argsPreview, width, now),
+      );
+      const preview = firstOutputPreview(tool.outputPreview);
+      if (preview)
+        out.push(renderOutputLine(theme, !!tool.isError, preview, width));
     }
 
     // Queued steering/follow-up messages: show them immediately so Enter
@@ -288,6 +497,12 @@ export function buildTranscriptLines(
   width: number,
   theme: Theme,
   renderer?: TranscriptRenderer,
+  options?: { readonly now?: number },
 ) {
-  return (renderer ?? new TranscriptRenderer()).render(snap, width, theme);
+  return (renderer ?? new TranscriptRenderer()).render(
+    snap,
+    width,
+    theme,
+    options,
+  );
 }

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

@@ -6,17 +6,16 @@ import {
 import { Markdown, Text } from "@earendil-works/pi-tui";
 import { sanitizeText } from "./transcript.ts";
 
-const COLLAPSED_MAX_LINES = 12;
 const MAX_STATUS_ROWS = 4;
 
 export interface WaitResultItem {
-  id: string;
-  title?: string;
-  status?: string;
+  readonly id: string;
+  readonly title?: string;
+  readonly status?: string;
 }
 
 export interface WaitResultDetails {
-  results?: WaitResultItem[];
+  readonly results?: readonly WaitResultItem[];
 }
 
 export function buildWaitResultPreview(
@@ -46,23 +45,11 @@ export function buildWaitResultPreview(
     lines.push(theme.fg("dim", `  … ${results.length - MAX_STATUS_ROWS} more`));
   }
 
-  const cleanLines = sanitizeText(content)
-    .split("\n")
-    .map((line) => line.trimEnd())
-    .filter((line) => line.trim() && line.trim() !== "---");
-  const leadingHeader = cleanLines[0]?.startsWith("## ") ? 1 : 0;
-  const body = cleanLines.slice(leadingHeader);
-  const available = Math.max(1, COLLAPSED_MAX_LINES - lines.length - 1);
-  for (const line of body.slice(0, available)) {
-    lines.push(theme.fg("toolOutput", line));
-  }
-
-  const hidden = Math.max(0, body.length - available);
-  if (hidden > 0) {
+  if (content.trim()) {
     lines.push(
       theme.fg(
         "dim",
-        `… ${hidden} more line${hidden === 1 ? "" : "s"} · ${keyHint("app.tools.expand", "to expand")}`,
+        `Results passed to main agent · ${keyHint("app.tools.expand", "to expand")}`,
       ),
     );
   }

package/extensions/suggestions/index.ts

@@ -1,8 +1,11 @@
-import {
-  CustomEditor,
-  type ExtensionAPI,
-  type ExtensionContext,
+import type {
+  ExtensionAPI,
+  ExtensionContext,
 } from "@earendil-works/pi-coding-agent";
+import {
+  registerEditorLayer,
+  removeEditorLayer,
+} from "../shared/editor-layers.ts";
 import {
   loadSetupConfig,
   SETUP_CONFIG_CHANGED_CHANNEL,
@@ -51,6 +54,7 @@ export default function (pi: ExtensionAPI) {
   let sessionActive = false;
   let statusContext: ExtensionContext | undefined;
   let requestEditorRender: (() => void) | undefined;
+  let editorLayerRegistered = false;
 
   const updateStatus = () => {
     statusContext?.ui.setStatus(
@@ -72,21 +76,22 @@ export default function (pi: ExtensionAPI) {
 
   const installSuggestionEditor = (ctx: ExtensionContext) => {
     if (ctx.mode !== "tui") return;
-    const previous = ctx.ui.getEditorComponent();
-    ctx.ui.setEditorComponent((tui, theme, keybindings) => {
-      const base =
-        previous?.(tui, theme, keybindings) ??
-        new CustomEditor(tui, theme, keybindings);
-      requestEditorRender = () => tui.requestRender();
-      return new NextActionSuggestionEditor(
-        base,
-        keybindings,
-        suggestionState,
-        cancelPrediction,
-        requestEditorRender,
-        (text) => ctx.ui.theme.fg("dim", text),
-      );
+    registerEditorLayer(pi, ctx, {
+      id: "suggestions",
+      order: 200,
+      wrap: (base, tui, _theme, keybindings) => {
+        requestEditorRender = () => tui.requestRender();
+        return new NextActionSuggestionEditor(
+          base,
+          keybindings,
+          suggestionState,
+          cancelPrediction,
+          requestEditorRender,
+          (text) => ctx.ui.theme.fg("dim", text),
+        );
+      },
     });
+    editorLayerRegistered = true;
   };
 
   pi.on("session_start", (_event, ctx) => {
@@ -160,6 +165,10 @@ export default function (pi: ExtensionAPI) {
   pi.events.on(SETUP_CONFIG_CHANGED_CHANNEL, cancelPrediction);
 
   pi.on("session_shutdown", async () => {
+    if (editorLayerRegistered) {
+      removeEditorLayer(pi, "suggestions");
+      editorLayerRegistered = false;
+    }
     sessionActive = false;
     runBoundary.reset();
     const task = activePrediction?.task;

package/extensions/tasks/index.ts

@@ -99,6 +99,8 @@ export default function sessionTasks(pi: ExtensionAPI) {
   let notifiedProblem: string | undefined;
   let taskWidgetVisible = true;
   let taskWidgetExpanded = false;
+  let taskWidgetMounted = false;
+  let requestTaskWidgetRender: (() => void) | undefined;
   let ui: ExtensionContext["ui"] | undefined;
   let uiMode: ExtensionContext["mode"] | undefined;
   const hideLifecycleTools = () =>
@@ -124,22 +126,36 @@ export default function sessionTasks(pi: ExtensionAPI) {
 
   const updateTaskWidget = (ctx?: ExtensionContext) => {
     if (ctx?.hasUI) {
+      if (ui !== ctx.ui) {
+        taskWidgetMounted = false;
+        requestTaskWidgetRender = undefined;
+      }
       ui = ctx.ui;
       uiMode = ctx.mode;
     }
     if (!ui || uiMode !== "tui") return false;
-    const current = snapshot();
     const shown =
       taskWidgetVisible && !problemMessage() && hasActionableTasks();
     if (!shown) {
+      if (!taskWidgetMounted) return false;
       ui.setWidget(TASK_WIDGET_KEY, undefined);
+      taskWidgetMounted = false;
+      requestTaskWidgetRender = undefined;
       return false;
     }
-    ui.setWidget(TASK_WIDGET_KEY, (_tui, theme) => ({
-      render: (width) =>
-        renderTaskWidget(current, theme, width, taskWidgetExpanded),
-      invalidate() {},
-    }));
+    if (taskWidgetMounted) {
+      requestTaskWidgetRender?.();
+      return true;
+    }
+    ui.setWidget(TASK_WIDGET_KEY, (tui, theme) => {
+      requestTaskWidgetRender = () => tui.requestRender();
+      return {
+        render: (width) =>
+          renderTaskWidget(snapshot(), theme, width, taskWidgetExpanded),
+        invalidate() {},
+      };
+    });
+    taskWidgetMounted = true;
     return true;
   };
 
@@ -519,6 +535,8 @@ export default function sessionTasks(pi: ExtensionAPI) {
     } catch {
       // The interactive UI may already be disposed.
     }
+    taskWidgetMounted = false;
+    requestTaskWidgetRender = undefined;
     ui = undefined;
     uiMode = undefined;
   });

package/extensions/ui-customization/footer.ts

@@ -450,27 +450,76 @@ export function renderFooter(options: FooterRenderOptions) {
     formatPullRequest,
   );
   const lines: string[] = [];
+  const statusLines = options.statuses
+    ? Array.from(options.statuses).flatMap((status) => status.split("\n"))
+    : [];
+  const singleStatus = statusLines.length === 1 ? statusLines[0] : undefined;
+  const separator = options.theme.fg("dim", " · ");
+  const styledStatus =
+    singleStatus === undefined
+      ? undefined
+      : options.theme.fg("dim", singleStatus);
+  const statusWidth =
+    styledStatus === undefined
+      ? 0
+      : visibleWidth(separator) + visibleWidth(styledStatus);
+  let inlinedStatus = false;
 
   for (const layout of options.lines) {
-    const line = renderFooterLine(
+    const resolved = resolveLineSegments(
       layout,
       catalog,
       options.style,
+      options.modelInfo.contextPercent,
+    );
+    const fitted = fitSegmentsToWidth(
+      resolved.left,
+      resolved.right,
       options.width,
+      options.style,
+      options.theme,
+    );
+    const canInlineStatus =
+      lines.length === 0 &&
+      styledStatus !== undefined &&
+      naturalLineWidth(
+        fitted.left,
+        fitted.right,
+        options.style,
+        options.theme,
+      ) +
+        statusWidth <=
+        options.width;
+    const line = renderFooterLine(
+      layout,
+      catalog,
+      options.style,
+      canInlineStatus ? options.width - statusWidth : options.width,
       options.theme,
       options.modelInfo.contextPercent,
     );
-    if (line) lines.push(line);
+    if (!line) continue;
+    lines.push(
+      canInlineStatus
+        ? truncateToWidth(
+            `${line}${separator}${styledStatus}`,
+            options.width,
+            options.theme.fg("dim", "..."),
+          )
+        : line,
+    );
+    inlinedStatus ||= canInlineStatus;
   }
 
-  if (options.statuses) {
-    for (const statusLine of options.statuses) {
-      for (const part of statusLine.split("\n")) {
-        lines.push(
-          truncateToWidth(part, options.width, options.theme.fg("dim", "...")),
-        );
-      }
-    }
+  if (inlinedStatus) return lines;
+  for (const statusLine of statusLines) {
+    lines.push(
+      truncateToWidth(
+        statusLine,
+        options.width,
+        options.theme.fg("dim", "..."),
+      ),
+    );
   }
 
   return lines;