pi-subagents-lite 1.2.0 → 1.4.0

package/src/ui/menu/menus.ts

@@ -0,0 +1,101 @@
+/**
+ * menus.ts — /agents command dispatcher.
+ *
+ * Uses SelectList from @earendil-works/pi-tui via ctx.ui.custom.
+ * Each iteration creates a fresh SelectList; submenu closes it before opening.
+ * No nested ctx.ui.custom calls.
+ *
+ * Module structure:
+ *   - helpers.ts: shared helpers (buildSettingsListTheme, buildSelectListTheme, validateNumeric)
+ *   - menu-model-settings.ts: showModelSettingsMenu
+ *   - menu-concurrency.ts: showConcurrencySettingsMenu
+ *   - menu-widget-settings.ts: showWidgetSettingsMenu
+ *   - menu-running-agents.ts: showRunningAgentsMenu
+ *   - menu-debug.ts: showDebugMenu
+ *   - menu-spawn-options.ts: showSpawnOptionsMenu
+ *   - menu-system-prompt.ts: showSystemPromptMenu
+ *   - menus.ts (this file): dispatcher — main menu and settings menu
+ */
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { SelectList, type SelectItem } from "@earendil-works/pi-tui";
+import { buildSelectListTheme } from "./helpers.js";
+import { SettingsListWrapper } from "./wrappers/settings-list.js";
+import { showModelSettingsMenu } from "./menu-model-settings.js";
+import { showConcurrencySettingsMenu } from "./menu-concurrency.js";
+import { showWidgetSettingsMenu } from "./menu-widget-settings.js";
+import { showRunningAgentsMenu } from "./menu-running-agents.js";
+import { showDebugMenu } from "./menu-debug.js";
+import { showSpawnOptionsMenu } from "./menu-spawn-options.js";
+import { showSystemPromptMenu } from "./menu-system-prompt.js";
+
+// Spawn wizard — co-located in this folder.
+import { showSpawnAgentMenu } from "./menu-spawn-wizard.js";
+export { showSpawnAgentMenu };
+
+
+/**
+ * Render `items` as a titled SelectList and dispatch the chosen value.
+ * Re-loops after each dispatch until the user cancels (Esc or Back).
+ * Each iteration builds a fresh list so state never leaks between visits.
+ */
+async function runSelectMenu(
+  ctx: ExtensionCommandContext,
+  title: string,
+  items: SelectItem[],
+  dispatch: (choice: string) => Promise<void>,
+): Promise<void> {
+  while (true) {
+    const choice = await ctx.ui.custom<string | undefined>((_tui, theme, _kb, done) => {
+      const list = new SelectList([...items], 10, buildSelectListTheme(theme));
+      list.onSelect = (item) => done(item.value);
+      return new SettingsListWrapper(list, { title, theme, onCancel: () => done(undefined) });
+    });
+    if (choice === undefined) return;
+    await dispatch(choice);
+  }
+}
+
+export async function showSettingsMenu(
+  ctx: ExtensionCommandContext,
+  modelOptions: string[],
+): Promise<void> {
+  const items: SelectItem[] = [
+    { value: "model", label: "Model settings", description: "Set global default and per-type model overrides" },
+    { value: "concurrency", label: "Concurrency settings", description: "Set per-model slot limits" },
+    { value: "spawnoptions", label: "Spawn options", description: "Default thinking, max turns, background, grace turns" },
+    { value: "systemprompt", label: "System prompt", description: "Prompt mode, custom prompt file, AGENTS.md" },
+    { value: "widget", label: "Widget settings", description: "Configure widget display options" },
+  ];
+
+  await runSelectMenu(ctx, "Settings", items, async (choice) => {
+    switch (choice) {
+      case "model": await showModelSettingsMenu(ctx, modelOptions); break;
+      case "concurrency": await showConcurrencySettingsMenu(ctx, modelOptions); break;
+      case "spawnoptions": await showSpawnOptionsMenu(ctx); break;
+      case "systemprompt": await showSystemPromptMenu(ctx); break;
+      case "widget": await showWidgetSettingsMenu(ctx); break;
+    }
+  });
+}
+
+export async function showAgentsMainMenu(
+  ctx: ExtensionCommandContext,
+  modelOptions: string[],
+): Promise<void> {
+  const items: SelectItem[] = [
+    { value: "running", label: "Running agents", description: "List running/queued agents" },
+    { value: "spawn", label: "Spawn agent", description: "Manually spawn a new agent" },
+    { value: "settings", label: "Settings", description: "Model, concurrency, and widget settings" },
+    { value: "debug", label: "Debug", description: "Agent types, briefing, diagnostics" },
+  ];
+
+  await runSelectMenu(ctx, "Agents", items, async (choice) => {
+    switch (choice) {
+      case "running": await showRunningAgentsMenu(ctx); break;
+      case "spawn": await showSpawnAgentMenu(ctx, modelOptions); break;
+      case "settings": await showSettingsMenu(ctx, modelOptions); break;
+      case "debug": await showDebugMenu(ctx); break;
+    }
+  });
+}

package/src/ui/menu/submenus/confirm.ts

@@ -0,0 +1,47 @@
+/**
+ * confirm-submenu.ts — Yes/no confirm dialog for destructive actions.
+ *
+ * Creates a submenu factory for SettingsList items that need a confirmation
+ * dialog (clear overrides, reset concurrency, etc.).
+ */
+
+import { SelectList, type Component } from "@earendil-works/pi-tui";
+import { buildSelectListTheme } from "../helpers.js";
+
+export interface ConfirmSubmenuOptions {
+  /** Message shown to the user */
+  message: string;
+  /** Theme from pi-coding-agent (fg, bold, italic) */
+  theme: any;
+  /** Called when user confirms (selects Yes) */
+  onConfirm: () => void;
+}
+
+/**
+ * Creates a submenu factory function compatible with SettingsList's submenu callback.
+ * Shows a Yes/No SelectList. Calls onConfirm on Yes, done() to close.
+ */
+export function createConfirmSubmenu(
+  options: ConfirmSubmenuOptions,
+): (currentValue: string, done: (selectedValue?: string) => void) => Component {
+  return (_currentValue: string, done: (selectedValue?: string) => void) => {
+    const items = [
+      { value: "Yes", label: "Yes", description: options.message },
+      { value: "No", label: "No", description: options.message },
+    ];
+
+    const list = new SelectList(items, 5, buildSelectListTheme(options.theme));
+
+    list.onSelect = (item) => {
+      if (item.value === "Yes") {
+        options.onConfirm();
+        done("Yes");
+      } else {
+        done();
+      }
+    };
+    list.onCancel = () => done();
+
+    return list;
+  };
+}

package/src/ui/menu/submenus/model-select.ts

@@ -0,0 +1,70 @@
+/**
+ * model-select-submenu.ts — 2-step model override submenu.
+ *
+ * Step 1: SelectList with override mode (session/permanent/clear)
+ * Step 2 (if session/permanent): ModelSelectorDialog for model selection
+ *
+ * The submenu factory must be created inside ctx.ui.custom to capture the theme.
+ */
+
+import { SelectList, type Component } from "@earendil-works/pi-tui";
+import { ModelSelectorDialog, type ModelOption } from "../../../models/model-selector.js";
+import { buildModelOptions, buildSelectListTheme, createDelegatingComponent } from "../helpers.js";
+
+export interface ModelSelectSubmenuOptions {
+  modelOptions: string[];
+  showClear: boolean;
+  theme: any; // Theme from pi-coding-agent (fg, bold, italic)
+  onSelect: (mode: "session" | "permanent" | "clear", model: string | null) => void;
+}
+
+/**
+ * Creates a submenu factory for SettingsList items that need the 2-step
+ * model override flow (mode selection → model selection).
+ */
+export function createModelSelectSubmenu(
+  options: ModelSelectSubmenuOptions,
+): (currentValue: string, done: (selectedValue?: string) => void) => Component {
+  return (_currentValue: string, done: (selectedValue?: string) => void) => {
+    let selectedMode: "session" | "permanent" = "session";
+
+    const modeItems = [
+      { value: "session", label: "Set for this session (not saved)" },
+      { value: "permanent", label: "Set permanently (saved to config)" },
+    ];
+    if (options.showClear) {
+      modeItems.push({ value: "clear", label: "Clear" });
+    }
+
+    const modeList = new SelectList(modeItems, 5, buildSelectListTheme(options.theme));
+
+    const delegator = createDelegatingComponent(modeList);
+
+    modeList.onSelect = (item) => {
+      if (item.value === "clear") {
+        options.onSelect("clear", null);
+        done("clear");
+        return;
+      }
+      selectedMode = item.value as "session" | "permanent";
+      delegator.setActive(modelSelector);
+    };
+    modeList.onCancel = () => done();
+
+    const modelOpts = buildModelOptions(options.modelOptions);
+    const modelSelector = new ModelSelectorDialog(
+      modelOpts,
+      _currentValue === "(inherits parent)" ? null : _currentValue,
+      {
+        onSelect: (modelValue) => {
+          options.onSelect(selectedMode, modelValue);
+          done(modelValue);
+        },
+        onCancel: () => done(),
+      },
+      options.theme,
+    );
+
+    return delegator;
+  };
+}

package/src/ui/menu/submenus/numeric-input.ts

@@ -0,0 +1,98 @@
+/**
+ * numeric-input-submenu.ts — Shared input submenu Components.
+ *
+ * - createNumericSubmenu: numeric input with validation
+ * - createInputSubmenu: plain text input
+ */
+
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { Input, type Component } from "@earendil-works/pi-tui";
+
+import { validateNumeric } from "../helpers.js";
+
+/**
+ * Returns a `(initialValue, done) => submenu` function wired to
+ * `ctx.ui.notify` for errors.
+ *
+ * If `required` is true, empty input errors.
+ * If `required` is false (default), empty input calls `done()` to clear.
+ *
+ * Usage:
+ *   createNumericSubmenu(ctx, onValid)
+ *   createNumericSubmenu(ctx, { min, required? }, onValid, onEmpty?)
+ */
+export function createNumericSubmenu(
+  ctx: ExtensionCommandContext,
+  optionsOrCallback?: { min?: number; required?: boolean; default?: number } | ((parsed: number) => void),
+  onValid?: (parsed: number) => void,
+  onEmpty?: () => void,
+): (initialValue: string, done: (selectedValue?: string) => void) => Component {
+  const opts = typeof optionsOrCallback === "function"
+    ? { onValid: optionsOrCallback }
+    : { onValid, ...optionsOrCallback };
+  const min = opts.min ?? 1;
+  const required = opts.required ?? false;
+  const fmtLabel = (n: number) => (n === 0 ? "\u2265 0" : `\u2265 ${n}`);
+  const onError = (msg: string) => ctx.ui.notify(msg, "error");
+
+  return (initialValue, done) => {
+    const input = new Input();
+    input.setValue(initialValue === "(not set)" ? "" : initialValue);
+    input.onSubmit = (value) => {
+      const trimmed = value.trim();
+      if (!trimmed || /^unlimited$/i.test(trimmed)) {
+        if (required) {
+          onError(`Invalid value \u2014 must be a number ${fmtLabel(min)}`);
+          return;
+        }
+        if (opts.default != null) {
+          opts.onValid?.(opts.default);
+          done(String(opts.default));
+        } else {
+          onEmpty?.();
+          done("(not set)");
+        }
+        return;
+      }
+      const parsed = validateNumeric(trimmed, min);
+      if (parsed === undefined) {
+        onError(`Invalid value \u2014 must be a number ${fmtLabel(min)}`);
+        return;
+      }
+      opts.onValid?.(parsed);
+      done(String(parsed));
+    };
+    input.onEscape = () => done();
+    return input;
+  };
+}
+
+/**
+ * Returns a `(initialValue, done) => Input` function for plain text submenus.
+ *
+ * If `required` is true, empty input shows an error and does not call `done`.
+ * If `required` is false (default), empty input calls `done()` to clear.
+ */
+export function createInputSubmenu(
+  ctx: ExtensionCommandContext,
+  options?: { required?: boolean },
+): (initialValue: string, done: (value?: string) => void) => Input {
+  return (initialValue, done) => {
+    const input = new Input();
+    input.setValue(initialValue);
+    input.onSubmit = (value) => {
+      const trimmed = value.trim();
+      if (!trimmed) {
+        if (options?.required) {
+          ctx.ui.notify("Cannot be empty", "error");
+          return;
+        }
+        done();
+        return;
+      }
+      done(trimmed);
+    };
+    input.onEscape = () => done();
+    return input;
+  };
+}

package/src/ui/menu/wrappers/settings-list.ts

@@ -0,0 +1,205 @@
+/**
+ * settings-list-wrapper.ts — Frames a list component with a title bar and separators.
+ *
+ * Wraps a SettingsList or SelectList with:
+ * - Top separator line
+ * - Header with title
+ * - List content
+ * - Bottom separator line
+ */
+
+import { type Component, isFocusable } from "@earendil-works/pi-tui";
+
+export interface SettingsListWrapperTheme {
+  bold: (text: string) => string;
+  fg: (color: any, text: string) => string;
+}
+
+export interface SettingsListWrapperOptions {
+  title: string;
+  theme: SettingsListWrapperTheme;
+  separatorChar?: string;
+  /** If true, skip j/k→arrow and arrow→enter/escape conversion. Input passes through unchanged. */
+  passthroughKeys?: boolean;
+  onCancel?: () => void;
+  /** Called with a rebuild(newItems) function so the caller can trigger in-place updates. */
+  onRebuild?: (rebuild: (items: any[]) => void) => void;
+}
+
+export class SettingsListWrapper implements Component {
+  private settingsList: Component;
+  private title: string;
+  private theme: SettingsListWrapperTheme;
+  private separatorChar: string;
+  private passthroughKeys: boolean;
+
+  constructor(settingsList: Component, options: SettingsListWrapperOptions) {
+    this.settingsList = settingsList;
+    this.title = options.title;
+    this.theme = options.theme;
+    this.separatorChar = options.separatorChar ?? "─";
+    this.passthroughKeys = options.passthroughKeys ?? false;
+
+    // Append Back item when onCancel provided
+    if (options.onCancel) {
+      const list = this.settingsList as any;
+      if (Array.isArray(list.items)) {
+        const closeMenu = options.onCancel;
+        // SelectList has onSelect; SettingsList has onChange. Push correct item shape.
+        const isSelectList = !!list.onSelect;
+        if (isSelectList) {
+          // SelectList expects SelectItem shape: { value, label }
+          list.items.push(
+            { value: "__sep__", label: " " },
+            { value: "__back__", label: "Back" },
+          );
+          // Intercept onSelect so the Back item closes the menu. SelectList
+          // reads its own onSelect property at dispatch time (this.onSelect on
+          // the target), so reassigning it here is what actually works — a Proxy
+          // cannot intercept the dispatch.
+          const prevOnSelect = list.onSelect;
+          list.onSelect = (item: any) => {
+            if (item.value === "__back__") {
+              closeMenu();
+              return;
+            }
+            if (item.value === "__sep__") return;
+            prevOnSelect?.(item);
+          };
+          list.onCancel = () => closeMenu();
+        } else {
+          // SettingsList expects SettingItem shape: { id, label, currentValue, submenu }
+          list.items.push(
+            { id: "__sep__", label: " ", currentValue: "" },
+            {
+              id: "__back__",
+              label: "Back",
+              currentValue: "",
+              submenu: (_v: string, subDone: (v?: string) => void) => {
+                subDone();
+                closeMenu();
+                return undefined as any;
+              },
+            },
+          );
+        }
+        }
+
+        // Auto-skip __sep__ items when navigating.
+        const _rawIndex = Symbol("rawIndex");
+        const isSep = (item: any) => item?.value === "__sep__" || item?.id === "__sep__";
+        Object.defineProperty(list, "selectedIndex", {
+          get() { return list[_rawIndex] ?? 0; },
+          set(idx) {
+            const curItems = list.items;
+            const cur = list[_rawIndex] ?? 0;
+            let i = Math.max(0, Math.min(idx, curItems.length - 1));
+            if (isSep(curItems[i])) {
+              const down = idx > cur;
+              if (down) {
+                let next = i + 1;
+                while (next < curItems.length && isSep(curItems[next])) next++;
+                if (next < curItems.length) i = next;
+                else {
+                  next = i - 1;
+                  while (next >= 0 && isSep(curItems[next])) next--;
+                  if (next >= 0) i = next;
+                }
+              } else {
+                let next = i - 1;
+                while (next >= 0 && isSep(curItems[next])) next--;
+                if (next >= 0) i = next;
+                else {
+                  next = i + 1;
+                  while (next < curItems.length && isSep(curItems[next])) next++;
+                  if (next < curItems.length) i = next;
+                }
+              }
+            }
+            list[_rawIndex] = i;
+          },
+          configurable: true,
+        });
+        list[_rawIndex] = list.selectedIndex ?? 0;
+
+      // Expose rebuild callback
+      if (options.onRebuild) {
+        const isSelectList = !!list.onSelect;
+        const rebuild = (newItems: any[]) => {
+          const wrapperItems = [
+            isSelectList
+              ? { value: "__sep__", label: " " }
+              : { id: "__sep__", label: " ", currentValue: "" },
+            isSelectList
+              ? { value: "__back__", label: "Back" }
+              : { id: "__back__", label: "Back", currentValue: "" },
+          ];
+          const fullItems = [...newItems, ...wrapperItems];
+          list.items = fullItems;
+          list.filteredItems = fullItems;
+          list.selectedIndex = 0;
+          list.submenuComponent = null;
+        };
+        options.onRebuild(rebuild);
+      }
+    }
+  }
+
+  invalidate(): void {
+    this.settingsList.invalidate?.();
+  }
+
+  private get hasSubmenu(): boolean {
+    const submenu = (this.settingsList as any)?.submenuComponent ?? null;
+    return isFocusable(submenu);
+  }
+
+  handleInput(data: string): void {
+    if (this.passthroughKeys) {
+      this.settingsList.handleInput?.(data);
+      return;
+    }
+    if (data === "k" || data === "j") {
+      if (this.hasSubmenu) {
+        // Submenu: pass through as normal letters
+        this.settingsList.handleInput?.(data);
+      } else {
+        // Main list: convert to arrow keys
+        this.settingsList.handleInput?.(data === "k" ? "\x1b[A" : "\x1b[B");
+      }
+    } else if (data === "\x1b[C" || data === "\x1bOC" || data === "\x1b[D" || data === "\x1bOD") {
+      if (this.hasSubmenu) {
+        // Submenu: pass arrow keys through (Input needs them for cursor)
+        this.settingsList.handleInput?.(data);
+      } else {
+        // Main list: → enters, ← escapes
+        this.settingsList.handleInput?.(data.includes("C") ? "\r" : "\x1b");
+      }
+    } else {
+      this.settingsList.handleInput?.(data);
+    }
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = [];
+
+    // Top separator
+    lines.push(this.separatorChar.repeat(width));
+    lines.push("");
+
+    // Header (left-aligned with spacing, bold and colored)
+    const styledTitle = this.theme.bold(this.theme.fg("accent", this.title));
+    lines.push("  " + styledTitle);
+    lines.push("");
+
+    // SettingsList content
+    const settingsLines = this.settingsList.render(width);
+    lines.push(...settingsLines);
+
+    // Bottom separator
+    lines.push("");
+    lines.push(this.separatorChar.repeat(width));
+
+    return lines;
+  }
+}

package/src/{renderer.ts → ui/renderer.ts}

@@ -7,7 +7,6 @@
 import { Box, Container, Spacer, Text } from "@earendil-works/pi-tui";
 import type { Theme } from "./types.js";
 import { buildStatsParts, formatMs, getDisplayName } from "./format.js";
-import { __config } from "./state.js";
 
 // ============================================================================
 // Stats rendering helpers
@@ -21,13 +20,13 @@ export function agentNameLabel(d: Record<string, unknown>, theme: Theme): string
 }
 
 /** Build the stats line for an agent result card. */
-export function buildStatsLine(d: Record<string, unknown>, theme: Theme): string {
-  const showCost = __config.agent.showCost === true;
+export function buildStatsLine(d: Record<string, unknown>, theme: Theme, showCost: boolean): string {
   const parts = buildStatsParts({
     toolUses: (d.toolUses as number) ?? 0,
     turnCount: d.turnCount as number | undefined,
     maxTurns: d.maxTurns as number | undefined,
-    tokens: (d.tokens as number) ?? 0,
+    input: (d.input as number) ?? 0,
+    output: (d.output as number) ?? 0,
     contextPercent: d.contextPercent as number | null,
     compactions: (d.compactions as number) ?? 0,
     cost: showCost ? (d.cost as number | undefined) : undefined,
@@ -62,6 +61,7 @@ export function renderAgentToolResult(
   result: { content: Array<{ type: string; text?: string }>; details?: Record<string, unknown>; isError?: boolean },
   options: { expanded?: boolean },
   theme: Theme,
+  showCost: boolean,
 ): Text {
   const { expanded } = options;
   const text = result.content[0]?.type === "text" ? result.content[0].text ?? "" : "";
@@ -71,7 +71,7 @@ export function renderAgentToolResult(
 
   if (d && d.turnCount != null) {
     const namePart = agentNameLabel(d, theme);
-    const statsLine = buildStatsLine(d, theme);
+    const statsLine = buildStatsLine(d, theme, showCost);
     let lines = `${icon} ${namePart}·${statsLine}\n  ${theme.fg("text", desc)}`;
     if (expanded && text) {
       lines += "\n" + text.split("\n").map(l => `  ${l}`).join("\n");
@@ -98,6 +98,7 @@ export function renderSubagentResult(
   message: { content?: string; details?: Record<string, unknown> },
   options: { expanded?: boolean },
   theme: Theme,
+  showCost: boolean,
 ): Container {
   const { expanded } = options;
   const d = message.details;
@@ -112,7 +113,7 @@ export function renderSubagentResult(
     const icon = isError ? theme.fg("error", "✗") : theme.fg("success", "✓");
 
     const namePart = agentNameLabel(d, theme);
-    const statsLine = buildStatsLine(d, theme);
+    const statsLine = buildStatsLine(d, theme, showCost);
     let headerLine = `${icon} ${namePart}·${statsLine}\n  ${theme.fg("text", (d.description as string) || "")}`;
     if (d.outputFile as string) {
       headerLine += `\n  ${theme.fg("dim", `tail -f ${d.outputFile}`)}`;

package/src/{result-viewer.ts → ui/result-viewer.ts}

@@ -16,8 +16,8 @@ import {
   type MarkdownTheme,
 } from "@earendil-works/pi-tui";
 import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import { type LifetimeUsage, formatTokens } from "./usage.js";
-import type { Theme } from "./ui/agent-widget.js";
+import { type LifetimeUsage, formatTokens } from "../agents/usage.js";
+import type { Theme } from "./agent-widget.js";
 import { formatMs } from "./format.js";
 
 /* ------------------------------------------------------------------ */
@@ -34,6 +34,7 @@ export interface ResultViewerStats {
   lifetimeUsage: LifetimeUsage;
   turnCount?: number;
   durationMs?: number;
+  modelName?: string;
 }
 
 /* ------------------------------------------------------------------ */
@@ -202,6 +203,10 @@ export class ResultViewer extends Container implements Component {
   private formatStatsLine(stats: ResultViewerStats): string {
     const parts: string[] = [];
 
+    if (stats.modelName) {
+      parts.push(stats.modelName);
+    }
+
     const { lifetimeUsage } = stats;
     parts.push(`↑${formatTokens(lifetimeUsage.input)}`);
     parts.push(`↓${formatTokens(lifetimeUsage.output)}`);

package/src/ui/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Theme for terminal rendering — used by format.ts, renderer.ts, and UI widgets.
+ * Defined here (not in ui/agent-widget.ts) so non-UI modules can import it
+ * without depending on the UI layer.
+ */
+export type Theme = {
+  fg(color: string, text: string): string;
+  bg(color: string, text: string): string;
+  bold(text: string): string;
+  italic?: (text: string) => string;
+};