@tt-a1i/openpi 0.3.1 → 0.4.0

package/extensions/background-terminals/src/ui/ps.ts

@@ -1,10 +1,10 @@
 /**
- * /ps UI — two-stage full-screen overlay over the synchronous
- * TerminalReadModel:
- * - TerminalDashboard: list of all tracked terminals (select, kill, open).
- * - TerminalDetailView: read-only inspector for one terminal — metadata,
- *   stdout/stderr toggle, scrolling, live tail. No input surface: background
- *   terminals have no stdin by design.
+ * /ps UI — two-stage inspector over the synchronous TerminalReadModel:
+ * - TerminalDashboard: compact picker docked above the input, listing all
+ *   tracked terminals (select, kill, open).
+ * - TerminalDetailView: full-screen read-only inspector for one terminal —
+ *   metadata, stdout/stderr toggle, scrolling, live tail. No input surface:
+ *   background terminals have no stdin by design.
  */
 
 import type {
@@ -15,6 +15,13 @@ import type {
 import { formatSize } from "@earendil-works/pi-coding-agent";
 import type { Component, TUI } from "@earendil-works/pi-tui";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import {
+  hintLine,
+  overflowNote,
+  panelFrame,
+  screenTitleLine,
+} from "../../../shared/screen-chrome.ts";
+import { spinnerFrame } from "../../../shared/spinner.ts";
 import {
   formatDuration,
   formatElapsed,
@@ -37,18 +44,30 @@ function configuredKeys(
   return keybindings.getKeys(binding).join("/") || "unbound";
 }
 
-function statusGlyph(snap: TerminalSnapshot, theme: Theme) {
+/**
+ * One status indicator per state, shared by the picker rows and the detail
+ * header. Running spins, in step with every other OpenPI surface. A selected
+ * row keeps its state glyph and borrows the accent tone.
+ */
+function statusGlyph(
+  snap: TerminalSnapshot,
+  theme: Theme,
+  now = Date.now(),
+  selected = false,
+) {
+  const tone = (color: "warning" | "success" | "error" | "muted") =>
+    selected ? ("accent" as const) : color;
   switch (snap.status) {
     case "running":
-      return theme.fg("warning", "■");
+      return theme.fg(tone("warning"), spinnerFrame(now));
     case "done":
-      return theme.fg("success", "■");
+      return theme.fg(tone("success"), "✓");
     case "failed":
-      return theme.fg("error", "■");
+      return theme.fg(tone("error"), "✗");
     case "killed":
-      return theme.fg("muted", "■");
+      return theme.fg(tone("muted"), "✓");
     case "timed_out":
-      return theme.fg("error", "■");
+      return theme.fg(tone("error"), "✗");
   }
 }
 
@@ -86,7 +105,14 @@ export async function openTerminalPicker(
         new TerminalDashboard(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 blanking the conversation.
+        overlayOptions: {
+          anchor: "bottom-center",
+          width: "100%",
+          maxHeight: "60%",
+          margin: { bottom: 5 },
+        },
       },
     );
 
@@ -105,7 +131,10 @@ export async function openTerminalPicker(
   }
 }
 
-// --- 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;
@@ -217,92 +246,44 @@ class TerminalDashboard 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 terminals = this.terminals();
     reconcileDashboardSelection(this.selection, terminals);
 
-    const rows = this.tui.terminal.rows || 30;
-    // Render exactly terminal rows - 1 so the overlay covers the header,
-    // chat, editor, and extra footer lines while leaving pi's final footer
-    // row visible.
-    const bodyHeight = Math.max(6, rows - 5);
-    const innerWidth = width - 2;
-
-    const lines: string[] = [];
-
-    // Header: title left, count right
-    const headerLeft = theme.fg("accent", theme.bold("Background terminals"));
-    const headerRight = theme.fg(
-      "muted",
-      `${terminals.length} terminal${terminals.length === 1 ? "" : "s"}`,
-    );
-    const headerPad = Math.max(
-      1,
-      width - visibleWidth(headerLeft) - visibleWidth(headerRight) - 4,
-    );
-    lines.push(
-      truncateToWidth(
-        `  ${headerLeft}${" ".repeat(headerPad)}${headerRight}  `,
+    // Size the panel to its content (bounded, scrolling past the cap) so the
+    // docked picker never covers more conversation than the list needs.
+    const bodyHeight = Math.min(Math.max(terminals.length, 1), MAX_PICKER_ROWS);
+    const running = terminals.filter((s) => s.status === "running").length;
+    const keys = (binding: Parameters<KeybindingsManager["getKeys"]>[0]) =>
+      configuredKeys(this.keybindings, binding);
+
+    return [
+      // One empty row of air between the conversation and the docked panel.
+      "",
+      screenTitleLine(
+        theme,
+        "Background terminals",
+        `${terminals.length} terminal${terminals.length === 1 ? "" : "s"}`,
         width,
       ),
-    );
-
-    // Top border with panel title
-    const running = terminals.filter((s) => s.status === "running").length;
-    lines.push(
-      theme.fg("border", "╭") +
-        this.borderSegment(
-          innerWidth,
-          `terminals · ${running} running / ${terminals.length}`,
-        ) +
-        theme.fg("border", "╮"),
-    );
-
-    // Rows
-    const divider = theme.fg("border", "│");
-    const rowLines = this.renderRows(terminals, innerWidth, bodyHeight);
-    for (let i = 0; i < bodyHeight; i++) {
-      lines.push(divider + this.pad(rowLines[i] ?? "", innerWidth) + divider);
-    }
-
-    // Bottom border
-    lines.push(
-      theme.fg("border", "╰") +
-        theme.fg("border", "─".repeat(Math.max(0, 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")} inspect · x kill · ${configuredKeys(this.keybindings, "tui.select.cancel")} close`,
-        ),
+      ...panelFrame(theme, {
+        label: `terminals · ${running}/${terminals.length} running`,
+        rows: this.renderRows(terminals, width - 2, bodyHeight),
+        width,
+        height: bodyHeight + 2,
+      }),
+      hintLine(
+        theme,
+        [
+          [`${keys("tui.select.up")}/${keys("tui.select.down")}/jk`, "select"],
+          [keys("tui.select.confirm"), "inspect"],
+          ["x", "kill"],
+          [keys("tui.select.cancel"), "close"],
+        ],
         width,
       ),
-    );
-
-    return lines;
+    ];
   }
 
   private renderRows(
@@ -328,12 +309,13 @@ class TerminalDashboard implements Component {
       const index = start + i;
       const isSelected = index === this.selection.index;
 
-      // Left: marker, status square, title, dim id
-      const marker = isSelected ? theme.fg("accent", "❯") : " ";
+      // Left: one glyph — a selected row tints its status glyph instead of
+      // stacking a marker — then title and dim id.
+      const glyph = statusGlyph(snap, theme, Date.now(), isSelected);
       const title = isSelected
         ? theme.fg("accent", oneLine(snap.title))
         : theme.fg("text", oneLine(snap.title));
-      const left = ` ${marker} ${statusGlyph(snap, theme)} ${title} ${theme.fg("dim", snap.id)}`;
+      const left = ` ${glyph} ${title} ${theme.fg("dim", snap.id)}`;
 
       // Right: pid · elapsed · exit/status
       const dot = theme.fg("dim", " · ");
@@ -359,13 +341,13 @@ class TerminalDashboard implements Component {
       out.push(truncateToWidth(leftTruncated + " ".repeat(gap) + right, width));
     }
 
-    if (start > 0) {
-      out[0] = truncateToWidth(theme.fg("dim", `   ... ${start} more`), width);
-    }
+    if (start > 0) out[0] = overflowNote(theme, start, width, "above");
     if (start + height < terminals.length) {
-      out[out.length - 1] = truncateToWidth(
-        theme.fg("dim", `   ... ${terminals.length - start - height} more`),
+      out[out.length - 1] = overflowNote(
+        theme,
+        terminals.length - start - height,
         width,
+        "below",
       );
     }
     return out;
@@ -514,35 +496,43 @@ class TerminalDetailView implements Component {
 
   render(width: number): string[] {
     const theme = this.theme;
-    const border = theme.fg("borderAccent", "─".repeat(Math.max(1, width)));
+    // One accent rule opens and closes the overlay; interior seams stay quiet
+    // so the output, not the frame, is what the eye lands on.
+    const edge = theme.fg("borderAccent", "─".repeat(Math.max(1, width)));
+    const seam = theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
     const lines: string[] = [];
     const snap = this.snap();
 
     if (!snap) {
-      lines.push(border);
+      lines.push(edge);
       lines.push(theme.fg("dim", `${this.id} is no longer tracked`));
-      lines.push(border);
+      lines.push(edge);
       return lines;
     }
 
-    lines.push(border);
-    const header =
+    lines.push(edge);
+    const dot = theme.fg("dim", " · ");
+    const header = [
       `${statusGlyph(snap, theme)} ` +
-      theme.fg("accent", theme.bold(`${snap.id} · ${oneLine(snap.title)}`)) +
-      theme.fg(
-        "muted",
-        ` · ${snap.status} · ${formatElapsed(snap)} · pid ${snap.pid ?? "?"}`,
-      ) +
-      (snap.status !== "running"
-        ? theme.fg("muted", ` · ${formatExit(snap)}`)
-        : "") +
-      (snap.status === "running" && snap.timeoutAt !== undefined
-        ? theme.fg(
-            "warning",
-            ` · ${formatDuration((snap.timeoutAt - Date.now()) / 1_000)} remaining`,
-          )
-        : "") +
-      theme.fg("dim", ` · ${snap.cwd}`);
+        theme.fg("accent", theme.bold(`${snap.id} · ${oneLine(snap.title)}`)),
+      statusWord(snap, theme),
+      theme.fg("muted", formatElapsed(snap)),
+      theme.fg("muted", `pid ${snap.pid ?? "?"}`),
+      ...(snap.status !== "running"
+        ? [theme.fg("muted", formatExit(snap))]
+        : []),
+      ...(snap.status === "running" && snap.timeoutAt !== undefined
+        ? [
+            theme.fg(
+              "warning",
+              `${formatDuration((snap.timeoutAt - Date.now()) / 1_000)} left`,
+            ),
+          ]
+        : []),
+      theme.fg("dim", snap.cwd),
+    ]
+      .filter(Boolean)
+      .join(dot);
     lines.push(truncateToWidth(header, width));
     lines.push(
       truncateToWidth(
@@ -550,7 +540,7 @@ class TerminalDetailView implements Component {
         width,
       ),
     );
-    lines.push(border);
+    lines.push(seam);
 
     // Stream tab line: which stream is active, both sizes.
     const active = this.stream;
@@ -561,7 +551,7 @@ class TerminalDetailView implements Component {
         : theme.fg("dim", `${name} (${formatSize(size)})`);
     lines.push(
       truncateToWidth(
-        `  ${tab("stdout", snap.stdout.totalBytes)}${theme.fg("dim", " | ")}${tab("stderr", snap.stderr.totalBytes)}${theme.fg("dim", "  — t to switch")}`,
+        ` ${tab("stdout", snap.stdout.totalBytes)}${theme.fg("dim", " · ")}${tab("stderr", snap.stderr.totalBytes)}${theme.fg("dim", "   t")} ${theme.fg("dim", "switch")}`,
         width,
       ),
     );
@@ -616,7 +606,7 @@ class TerminalDetailView implements Component {
     if (this.scrollOffset > 0) {
       body.push(
         truncateToWidth(
-          theme.fg("dim", `... ${this.scrollOffset} lines below · ↓/pgdn`),
+          theme.fg("dim", `… ${this.scrollOffset} lines below · ↓/pgdn`),
           width,
         ),
       );
@@ -624,17 +614,30 @@ class TerminalDetailView implements Component {
     while (body.length < viewport) body.push("");
     lines.push(...body.slice(0, viewport));
 
-    lines.push(border);
+    lines.push(seam);
+    const keys = (binding: Parameters<KeybindingsManager["getKeys"]>[0]) =>
+      configuredKeys(this.keybindings, binding);
     lines.push(
-      truncateToWidth(
-        theme.fg(
-          "dim",
-          `${configuredKeys(this.keybindings, "tui.select.cancel")} back · t stdout/stderr · x kill · ${configuredKeys(this.keybindings, "tui.editor.cursorUp")}/${configuredKeys(this.keybindings, "tui.editor.cursorDown")}/jk scroll · ${configuredKeys(this.keybindings, "tui.editor.pageUp")}/${configuredKeys(this.keybindings, "tui.editor.pageDown")} page · g/G top/bottom`,
-        ),
+      hintLine(
+        theme,
+        [
+          [keys("tui.select.cancel"), "back"],
+          ["t", "stdout/stderr"],
+          ["x", "kill"],
+          [
+            `${keys("tui.editor.cursorUp")}/${keys("tui.editor.cursorDown")}/jk`,
+            "scroll",
+          ],
+          [
+            `${keys("tui.editor.pageUp")}/${keys("tui.editor.pageDown")}`,
+            "page",
+          ],
+          ["g/G", "top/bottom"],
+        ],
         width,
       ),
     );
-    lines.push(border);
+    lines.push(edge);
     return lines;
   }
 

package/extensions/capabilities/index.ts

@@ -1,10 +1,18 @@
 import { fileURLToPath } from "node:url";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { type Static, Type } from "typebox";
+import {
+  capabilitiesRequestedByPrompt,
+  requestsCapabilityGateway,
+} from "../shared/capability-intent.ts";
+import {
+  registerEditorLayer,
+  removeEditorLayer,
+} from "../shared/editor-layers.ts";
 import {
   loadSetupConfig,
-  SETUP_CONFIG_CHANGED_CHANNEL,
   type MyPiSetupConfig,
+  SETUP_CONFIG_CHANGED_CHANNEL,
 } from "../shared/setup-config.ts";
 import {
   getLoadedOpenPiCapabilities,
@@ -16,6 +24,11 @@ import {
   patchOwnedTools,
   resetOpenPiToolSurface,
 } from "../shared/tool-surface.ts";
+import {
+  CapabilityIntentHighlightEditor,
+  colorCapabilityKeyword,
+  isLightNamedTheme,
+} from "./src/ui.ts";
 
 const CapabilitySchema = Type.Unsafe<OpenPiCapability>({
   type: "string",
@@ -35,25 +48,6 @@ const OpenPiLoadToolsParameters = Type.Object({
 
 type OpenPiLoadToolsInput = Static<typeof OpenPiLoadToolsParameters>;
 
-const CAPABILITY_INTENT = {
-  search:
-    /\b(?:use|run)\s+(?:fd|rg)\b|\buse\s+(?:structured\s+)?(?:(?:file|code|content)\s+)?search\b|\b(?:structured|fast)\s+(?:file|code|content)\s+search\b|(?:使用|运行).{0,8}(?:fd|rg)|结构化(?:文件|代码|内容)搜索/iu,
-  delegate:
-    /\b(?:use|spawn|run)\s+(?:an?\s+|multiple\s+|several\s+|two\s+)?(?:pi\s+)?subagents?\b|(?:^|[.!?]\s+)(?:please\s+)?(?:delegate|parallelize)\s+(?:this|the)\s+(?:task|work)\b|\b(?:can|could|would)\s+you\s+(?:please\s+)?(?:delegate|parallelize)\s+(?:this|the)\s+(?:task|work)\b|\bparallel\s+agents?\b|(?:使用|启动|调用|来|开).{0,8}子代理|(?:多个?|多路)子代理|并行.{0,8}(?:代理|agent)|委派.{0,6}任务/iu,
-  workflow:
-    /\b(?:use|run|create|build)\s+(?:(?:an?|the)\s+)?(?:openpi\s+)?workflow\b|(?:使用|运行|创建|构建).{0,8}工作流/iu,
-  background:
-    /\b(?:run|start|keep)\b.{0,40}\b(?:in the background|background\s+(?:process|terminal|job))\b|后台.{0,8}(?:运行|进程|终端|任务)/iu,
-  session:
-    /\b(?:create|set|update|track)\s+(?:an?\s+)?(?:session\s+)?(?:goal|task list|tasks)\b|(?:设置|创建|更新|跟踪|追踪).{0,8}(?:目标|任务)/iu,
-} as const satisfies Record<OpenPiCapability, RegExp>;
-
-const CAPABILITY_GATEWAY_INTENT =
-  /\bopenpi\s+(?:capabilit(?:y|ies)|tools?|features?)\b|openpi.{0,8}(?:能力|工具|功能)/iu;
-
-const CONDITIONAL_OR_NEGATED_INTENT =
-  /^(?:\s*(?:only\s+)?(?:if|when|unless|before|in case)\b)|\b(?:do not|don't|cannot|can't|not|no|never|avoid)\b|\b(?:if|unless)\b|\bwhen\s+(?:needed|required|necessary)\b|(?:如果|若|假如|除非|仅当|需要时|不要|不能|不用|不必|无需|避免|请勿|禁止)/iu;
-
 const CAPABILITY_SKILLS: Partial<Record<OpenPiCapability, string>> = {
   delegate: fileURLToPath(
     new URL("../../skills/subagents/SKILL.md", import.meta.url),
@@ -66,27 +60,6 @@ const CAPABILITY_SKILLS: Partial<Record<OpenPiCapability, string>> = {
   ),
 };
 
-function capabilitiesRequestedByPrompt(prompt: string) {
-  const clauses = prompt.split(/[\n.!?。！？;；]+/u);
-  return OPENPI_CAPABILITY_NAMES.filter((capability) =>
-    clauses.some(
-      (clause) =>
-        !CONDITIONAL_OR_NEGATED_INTENT.test(clause) &&
-        CAPABILITY_INTENT[capability].test(clause),
-    ),
-  );
-}
-
-function requestsCapabilityGateway(prompt: string) {
-  return prompt
-    .split(/[\n.!?。！？;；]+/u)
-    .some(
-      (clause) =>
-        !CONDITIONAL_OR_NEGATED_INTENT.test(clause) &&
-        CAPABILITY_GATEWAY_INTENT.test(clause),
-    );
-}
-
 function capabilitySkillPaths(capabilities: readonly OpenPiCapability[]) {
   return capabilities.flatMap((capability) => {
     const skill = CAPABILITY_SKILLS[capability];
@@ -124,7 +97,7 @@ export function createCapabilitiesExtension(
 
     pi.events.on(SETUP_CONFIG_CHANGED_CHANNEL, reconcileDiscoveryGateway);
 
-    pi.on("session_start", () => {
+    pi.on("session_start", (_event, ctx) => {
       resetOpenPiToolSurface(
         pi,
         dependencies.sourcePath
@@ -132,6 +105,21 @@ export function createCapabilitiesExtension(
           : undefined,
       );
       reconcileDiscoveryGateway();
+      registerEditorLayer(pi, ctx, {
+        id: "capability-intent-highlight",
+        order: 150,
+        wrap: (base, _tui, _theme, keybindings) =>
+          new CapabilityIntentHighlightEditor(base, keybindings, (text) =>
+            colorCapabilityKeyword(text, {
+              colorMode: ctx.ui.theme.getColorMode(),
+              light: isLightNamedTheme(ctx.ui.theme.name),
+            }),
+          ),
+      });
+    });
+
+    pi.on("session_shutdown", () => {
+      removeEditorLayer(pi, "capability-intent-highlight");
     });
 
     pi.on("before_agent_start", (event) => {

package/extensions/capabilities/src/ui.ts

@@ -0,0 +1,93 @@
+import type { KeybindingsManager } from "@earendil-works/pi-coding-agent";
+import type { EditorComponent } from "@earendil-works/pi-tui";
+import {
+  BelowEditorNavigationEditor,
+  BelowEditorStripState,
+} from "../../shared/below-editor-navigation.ts";
+import { capabilitiesRequestedByPrompt } from "../../shared/capability-intent.ts";
+
+const DELEGATE_NAMES = /\bsubagents?\b|子代理/giu;
+const WORKFLOW_NAMES = /\bworkflows?\b|工作流/giu;
+const FOREGROUND_RESET = "\u001b[39m";
+
+interface CapabilityKeywordColorOptions {
+  readonly colorMode: "truecolor" | "256color";
+  readonly light: boolean;
+}
+
+export function isLightNamedTheme(name: string | undefined) {
+  return name !== undefined && /(?:^|[-_])light(?:$|[-_])/iu.test(name);
+}
+
+/**
+ * Claude-style lavender keyword color. The light variant preserves readable
+ * contrast instead of mechanically reusing the bright dark-terminal swatch.
+ */
+export function colorCapabilityKeyword(
+  text: string,
+  options: CapabilityKeywordColorOptions,
+) {
+  const start = options.light
+    ? options.colorMode === "truecolor"
+      ? "\u001b[38;2;130;80;223m"
+      : "\u001b[38;5;98m"
+    : options.colorMode === "truecolor"
+      ? "\u001b[38;2;210;168;255m"
+      : "\u001b[38;5;183m";
+  return `${start}${text}${FOREGROUND_RESET}`;
+}
+
+export function highlightCapabilityNames(
+  line: string,
+  capabilities: readonly string[],
+  highlight: (text: string) => string,
+) {
+  let result = line;
+  if (capabilities.includes("delegate")) {
+    result = result.replace(DELEGATE_NAMES, (match) => highlight(match));
+  }
+  if (capabilities.includes("workflow")) {
+    result = result.replace(WORKFLOW_NAMES, (match) => highlight(match));
+  }
+  return result;
+}
+
+/**
+ * Transparent, pre-submit feedback for capability intent. It colours only
+ * names whose capability the shared classifier would load after submission;
+ * it never changes editor text, Session history, or model context.
+ */
+export class CapabilityIntentHighlightEditor extends BelowEditorNavigationEditor {
+  private readonly highlight: (text: string) => string;
+
+  constructor(
+    base: EditorComponent,
+    keybindings: KeybindingsManager,
+    highlight: (text: string) => string,
+  ) {
+    super(
+      base,
+      keybindings,
+      new BelowEditorStripState(),
+      () => false,
+      () => undefined,
+      () => undefined,
+    );
+    this.highlight = highlight;
+  }
+
+  override render(width: number) {
+    const capabilities = capabilitiesRequestedByPrompt(this.getText());
+    if (
+      !capabilities.includes("delegate") &&
+      !capabilities.includes("workflow")
+    ) {
+      return super.render(width);
+    }
+    return super
+      .render(width)
+      .map((line) =>
+        highlightCapabilityNames(line, capabilities, this.highlight),
+      );
+  }
+}