pi-subagents-lite 1.4.0 → 1.4.2

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

@@ -4,8 +4,14 @@
  * Wraps a SettingsList or SelectList with:
  * - Top separator line
  * - Header with title
- * - List content
+ * - List content (SettingsList renders the highlighted item's description and a
+ *   hint line below the items itself; SelectList renders inline descriptions)
  * - Bottom separator line
+ *
+ * The Back button has been removed. Menus still close via Escape, the
+ * back-arrow key, and Ctrl-C — the underlying list components call their
+ * `onCancel` on those keys, and the wrapper wires that to `closeMenu` for
+ * SelectList (SettingsList receives its own `onCancel` at construction).
  */
 
 import { type Component, isFocusable } from "@earendil-works/pi-tui";
@@ -40,108 +46,63 @@ export class SettingsListWrapper implements Component {
     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);
-      }
+    const list = this.settingsList as any;
+
+    // SelectList has no onCancel of its own; wire closeMenu so Escape,
+    // back-arrow (converted to Escape below), and Ctrl-C close the menu.
+    // SettingsList receives its own onCancel at construction, so leave it be.
+    if (options.onCancel && !list.onCancel) {
+      const closeMenu = options.onCancel;
+      list.onCancel = () => closeMenu();
+    }
+
+    // Auto-skip __sep__ items when navigating, so the cursor never lands on a
+    // separator section header. Menus push their own __sep__ items.
+    if (options.onCancel && Array.isArray(list.items)) {
+      const _rawIndex = Symbol("rawIndex");
+      const isSep = (item: any) => item?.value === "__sep__" || item?.id === "__sep__";
+      // Starting just past `start`, walk in `step` direction and return the
+      // first non-separator index (or an out-of-bounds sentinel if none).
+      const firstNonSepFrom = (start: number, step: number): number => {
+        let next = start + step;
+        while (next >= 0 && next < list.items.length && isSep(list.items[next])) next += step;
+        return next;
+      };
+      const inBounds = (i: number) => i >= 0 && i < list.items.length;
+      Object.defineProperty(list, "selectedIndex", {
+        get() { return list[_rawIndex] ?? 0; },
+        set(idx) {
+          const items = list.items;
+          const cur = list[_rawIndex] ?? 0;
+          const clamped = Math.max(0, Math.min(idx, items.length - 1));
+          if (!isSep(items[clamped])) {
+            list[_rawIndex] = clamped;
+            return;
+          }
+          // Landed on a separator: search in the travel direction first,
+          // fall back to the opposite direction so the cursor always ends on
+          // a real item (or stays put if everything is a separator).
+          const step = idx > cur ? 1 : -1;
+          const fwd = firstNonSepFrom(clamped, step);
+          const back = firstNonSepFrom(clamped, -step);
+          list[_rawIndex] = inBounds(fwd) ? fwd : inBounds(back) ? back : clamped;
+        },
+        configurable: true,
+      });
+      list[_rawIndex] = list.selectedIndex ?? 0;
+    }
+
+    // Expose rebuild callback. Items are set directly without appending any
+    // wrapper-controlled items: descriptions are read dynamically at render
+    // time, so they remain correct after a rebuild.
+    if (options.onRebuild) {
+      const rebuild = (newItems: any[]) => {
+        list.items = newItems;
+        list.filteredItems = newItems;
+        list.selectedIndex = 0;
+        list.submenuComponent = null;
+      };
+      options.onRebuild(rebuild);
     }
   }
 
@@ -192,9 +153,16 @@ export class SettingsListWrapper implements Component {
     lines.push("  " + styledTitle);
     lines.push("");
 
-    // SettingsList content
+    // SettingsList content — strip the hint line that pi-tui always appends
+    // (empty line + "Enter/Space to change · Esc to cancel"). Descriptions
+    // already explain what each item does, so the hint is redundant.
     const settingsLines = this.settingsList.render(width);
-    lines.push(...settingsLines);
+    const hintPattern = /Enter\/Space|Esc to cancel/;
+    if (settingsLines.length >= 2 && hintPattern.test(settingsLines[settingsLines.length - 1] ?? "")) {
+      lines.push(...settingsLines.slice(0, -2));
+    } else {
+      lines.push(...settingsLines);
+    }
 
     // Bottom separator
     lines.push("");

package/src/ui/result-viewer.ts

@@ -14,8 +14,8 @@ import {
   Spacer,
   Text,
   type MarkdownTheme,
+  visibleWidth,
 } from "@earendil-works/pi-tui";
-import { DynamicBorder } from "@earendil-works/pi-coding-agent";
 import { type LifetimeUsage, formatTokens } from "../agents/usage.js";
 import type { Theme } from "./agent-widget.js";
 import { formatMs } from "./format.js";
@@ -44,9 +44,15 @@ export interface ResultViewerStats {
 /** Lines scrolled per PageUp/PageDown (kept at a fixed, comfortable amount). */
 const PAGE_STEP = 14;
 
-/** Render width for markdown content and separator line. */
+/** Total outer render width including side borders. */
 const RENDER_WIDTH = 78;
 
+/** Horizontal margin (spaces) on each side of content. */
+const MARGIN = 2;
+
+/** Width available for content: outer width − side borders (2) − margins (2×MARGIN). */
+const CONTENT_WIDTH = RENDER_WIDTH - 2 - MARGIN * 2;
+
 /** Fixed non-viewport lines in the component (borders, title, spacers, hints, etc.). */
 const BASE_OVERHEAD = 10;
 
@@ -143,15 +149,14 @@ export class ResultViewer extends Container implements Component {
     // Build markdown renderer (pre-render to get total lines)
     const mdTheme = buildMarkdownTheme(theme);
     this.markdown = new Markdown(text, 0, 0, mdTheme);
-    this.renderedLines = this.markdown.render(RENDER_WIDTH);
+    this.renderedLines = this.markdown.render(CONTENT_WIDTH);
 
     this.buildUI(title, stats);
     this.updateViewport();
   }
 
-  /** Build the full UI tree — borders, title, stats, viewport, hints. */
+  /** Build the full UI tree — title, stats, viewport, hints. Borders drawn by render(). */
   private buildUI(title: string, stats?: ResultViewerStats): void {
-    this.addChild(new DynamicBorder());
     this.addChild(new Spacer(1));
 
     // Title bar
@@ -171,7 +176,7 @@ export class ResultViewer extends Container implements Component {
 
     // Separator
     this.addChild(
-      new Text(this.theme.fg("muted", "─".repeat(RENDER_WIDTH)), 0, 0),
+      new Text(this.theme.fg("muted", "─".repeat(CONTENT_WIDTH)), 0, 0),
     );
     this.addChild(new Spacer(1));
 
@@ -183,7 +188,7 @@ export class ResultViewer extends Container implements Component {
     this.scrollIndicator = new Container();
     this.addChild(this.scrollIndicator);
 
-    // Bottom spacer + key hints + border
+    // Bottom spacer + key hints
     this.addChild(new Spacer(1));
     const refreshHint = this.callbacks.onRefresh ? " · r refresh" : "";
     const hints = this.theme.fg(
@@ -192,7 +197,6 @@ export class ResultViewer extends Container implements Component {
     );
     this.addChild(new Text(hints, 0, 0));
     this.addChild(new Spacer(1));
-    this.addChild(new DynamicBorder());
   }
 
   /**
@@ -278,7 +282,7 @@ export class ResultViewer extends Container implements Component {
         this.textRef.text = newText;
         const mdTheme = buildMarkdownTheme(this.theme);
         this.markdown = new Markdown(newText, 0, 0, mdTheme);
-        this.renderedLines = this.markdown.render(RENDER_WIDTH);
+        this.renderedLines = this.markdown.render(CONTENT_WIDTH);
         // Preserve scroll position, clamped to new content bounds
         this.scrollOffset = Math.min(oldOffset, this.renderedLines.length - 1);
         this.updateViewport();
@@ -295,6 +299,33 @@ export class ResultViewer extends Container implements Component {
 
   invalidate(): void {}
 
+  /**
+   * Wrap all child output with box-drawing borders (┌─┐/│/└─┘).
+   *
+   * Children render at contentWidth so wrapped lines align with the side
+   * borders: innerWidth (between the two │) must equal the dash row width,
+   * and the 1-space padding on each side of the line is reserved inside it,
+   * otherwise content rows end up 2 columns wider than the borders and the
+   * TUI overlay compositor truncates the right │ away.
+   */
+  override render(width: number): string[] {
+    const innerWidth = Math.max(1, width - 2);
+    const contentWidth = Math.max(0, innerWidth - 2);
+    const innerLines = super.render(contentWidth);
+
+    const border = (str: string) => this.theme.fg("muted", str);
+    const vline = border("│");
+    const hbar = "─".repeat(innerWidth);
+
+    const result: string[] = [border(`┌${hbar}┐`)];
+    for (const line of innerLines) {
+      const pad = Math.max(0, contentWidth - visibleWidth(line));
+      result.push(`${vline} ${line}${" ".repeat(pad)} ${vline}`);
+    }
+    result.push(border(`└${hbar}┘`));
+    return result;
+  }
+
   private scrollTo(offset: number): void {
     this.scrollOffset = Math.max(0, Math.min(this.renderedLines.length - 1, offset));
     this.updateViewport();
@@ -311,7 +342,8 @@ export class ResultViewer extends Container implements Component {
     for (let i = 0; i < visibleLines; i++) {
       const lineIdx = this.scrollOffset + i;
       const line = this.renderedLines[lineIdx] ?? "";
-      this.viewport.addChild(new Text(line, 0, 0));
+      const pad = " ".repeat(MARGIN);
+      this.viewport.addChild(new Text(pad + line, 0, 0));
     }
 
     // Pad AFTER content to keep viewport at fixed height so the footer

package/src/{models/model-selector.ts → ui/searchable-select.ts}

@@ -1,5 +1,5 @@
 /**
- * model-selector.ts — TUI model selection dialog.
+ * searchable-select.ts — TUI paginated, searchable pick-list dialog.
  *
  * Reuses the same building blocks as pi's ModelSelectorComponent but without
  * the SettingsManager dependency — no side effects, just callbacks.
@@ -15,52 +15,52 @@ import {
   Text,
 } from "@earendil-works/pi-tui";
 import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import type { Theme } from "../ui/agent-widget.js";
+import type { Theme } from "./agent-widget.js";
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
 /* ------------------------------------------------------------------ */
 
-export interface ModelOption {
-  /** "provider/model-id" — the value returned on selection */
+export interface SelectOption {
+  /** The value returned on selection (e.g. "provider/model-id"). */
   value: string;
-  /** Display label (model-id without provider prefix) */
+  /** Display label. */
   label: string;
-  /** Provider name for badge */
-  provider: string;
+  /** Provider name for badge; omitted when the label already conveys it (e.g. provider/type lists). */
+  provider?: string;
 }
 
-interface ModelSelectorCallbacks {
+interface SelectDialogCallbacks {
   onSelect: (value: string) => void;
   onCancel: () => void;
 }
 
 /* ------------------------------------------------------------------ */
-/*  ModelSelectorDialog                                                */
+/*  SearchableSelectDialog                                             */
 /* ------------------------------------------------------------------ */
 
 const MAX_VISIBLE = 10;
 
 /**
- * A paginated, searchable model selector dialog.
+ * A paginated, searchable selection dialog.
  *
  * Rendering mirrors pi's ModelSelectorComponent:
  *   - Top border
  *   - Search input
- *   - Paginated model list (10 at a time, centered on selection)
+ *   - Paginated option list (10 at a time, centered on selection)
  *   - Scroll indicator "(3/47)"
  *   - Bottom border
  *
  * Key bindings: up/down/pageup/pagedown/enter/escape + pass-through to search.
  */
-export class ModelSelectorDialog extends Container implements Focusable {
+export class SearchableSelectDialog extends Container implements Focusable {
   private searchInput: Input;
   private listContainer: Container;
-  private items: ModelOption[];
-  private filteredItems: ModelOption[];
+  private items: SelectOption[];
+  private filteredItems: SelectOption[];
   private selectedIndex: number;
-  private currentModel: string | null;
-  private callbacks: ModelSelectorCallbacks;
+  private currentValue: string | null;
+  private callbacks: SelectDialogCallbacks;
   private theme: Theme;
 
   // Focusable implementation — propagate to searchInput for IME cursor
@@ -76,21 +76,21 @@ export class ModelSelectorDialog extends Container implements Focusable {
   }
 
   constructor(
-    items: ModelOption[],
-    currentModel: string | null,
-    callbacks: ModelSelectorCallbacks,
+    items: SelectOption[],
+    currentValue: string | null,
+    callbacks: SelectDialogCallbacks,
     theme: Theme,
   ) {
     super();
 
     this.items = items;
-    this.currentModel = currentModel;
+    this.currentValue = currentValue;
     this.callbacks = callbacks;
     this.theme = theme;
     this.filteredItems = [...items];
 
-    // Pre-select current model if present
-    const currentIdx = items.findIndex((m) => m.value === currentModel);
+    // Pre-select current value if present
+    const currentIdx = items.findIndex((m) => m.value === currentValue);
     this.selectedIndex = currentIdx >= 0 ? currentIdx : 0;
 
     // Build UI
@@ -185,7 +185,7 @@ export class ModelSelectorDialog extends Container implements Focusable {
 
     // Everything else → search input (triggers fuzzy filter)
     this.searchInput.handleInput(keyData);
-    this.filterModels();
+    this.filterItems();
   }
 
   invalidate(): void {
@@ -196,7 +196,7 @@ export class ModelSelectorDialog extends Container implements Focusable {
   /*  Private helpers                                                    */
   /* ------------------------------------------------------------------ */
 
-  private filterModels(): void {
+  private filterItems(): void {
     const query = this.searchInput.getValue();
     if (!query) {
       this.filteredItems = [...this.items];
@@ -221,7 +221,7 @@ export class ModelSelectorDialog extends Container implements Focusable {
     const { filteredItems } = this;
     if (filteredItems.length === 0) {
       this.listContainer.addChild(
-        new Text(this.theme.fg("muted", "  No matching models"), 0, 0),
+        new Text(this.theme.fg("muted", "  No matching items"), 0, 0),
       );
       return;
     }
@@ -241,14 +241,14 @@ export class ModelSelectorDialog extends Container implements Focusable {
       if (!item) continue;
 
       const isSelected = i === this.selectedIndex;
-      const isCurrent = item.value === this.currentModel;
+      const isCurrent = item.value === this.currentValue;
 
-      const modelText = isSelected
+      const labelText = isSelected
         ? this.theme.fg("accent", "→ ") + this.theme.fg("accent", item.label)
         : `  ${item.label}`;
-      const providerBadge = this.theme.fg("muted", `[${item.provider}]`);
+      const providerBadge = item.provider ? this.theme.fg("muted", `[${item.provider}]`) : "";
       const checkmark = isCurrent ? this.theme.fg("success", " ✓") : "";
-      const line = `${modelText} ${providerBadge}${checkmark}`;
+      const line = `${labelText} ${providerBadge}${checkmark}`;
 
       this.listContainer.addChild(new Text(line, 0, 0));
     }