pi-better-model-select 0.2.0 → 0.3.1

package/extensions/lib/picker-dialog.ts

@@ -1,21 +1,13 @@
-import { DynamicBorder } from "@earendil-works/pi-coding-agent";
-import { Container, Text } from "@earendil-works/pi-tui";
-import { ModelPicker, type PickerAction, type RankedModel } from "./picker.ts";
+import { ModelPicker, type PickerAction, type PickerOptions, type RankedModel } from "./picker.ts";
+import { resultPlacement } from "./tui.ts";
 
-export async function pickerDialog(ctx: any, rows: RankedModel[], title = "Better Model Select", assignment = false): Promise<PickerAction | undefined> {
-  return ctx.ui.custom((tui: any, theme: any, _kb: any, done: any) => {
-    const container = new Container();
-    const accent = (text: string) => typeof theme?.fg === "function" ? theme.fg("accent", text) : text;
-    container.addChild(new DynamicBorder(accent));
-    container.addChild(new Text(accent(title), 1, 0));
-    const picker = new ModelPicker(rows, theme, () => tui.requestRender(), done, assignment);
-    picker.focused = true;
-    container.addChild(picker);
-    container.addChild(new DynamicBorder(accent));
-    return {
-      render: (width: number) => container.render(width),
-      invalidate: () => container.invalidate(),
-      handleInput: (data: string) => picker.handleInput(data),
-    };
-  });
+export async function pickerDialog(
+  ctx: any, rows: RankedModel[], title = "Better Model Select", assignment = false,
+  options: PickerOptions = {},
+): Promise<PickerAction | undefined> {
+  // Return the Focusable itself. Pi's custom UI installs it in the prompt area,
+  // calls setFocus on it and restores the previous editor when done is called.
+  return ctx.ui.custom((tui: any, theme: any, _kb: any, done: any) =>
+    new ModelPicker(rows, theme, () => tui.requestRender(), done, assignment,
+      { ...options, placement: options.placement ?? resultPlacement() }, title));
 }

package/extensions/lib/picker.ts

@@ -1,20 +1,8 @@
-// The /bms picker: a filter Input stacked on a SelectList.
-//
-// Typing always goes to the search box, so plain letters can never be stolen
-// as action shortcuts. Actions are therefore ctrl-chords, which stay reachable
-// while the cursor sits in the search field.
+// The /bms prompt-area picker. Typing goes to search; ctrl-chords perform
+// actions. The action menu shares this dialog and never replaces its input.
 
-import {
-  Container,
-  fuzzyFilter,
-  Input,
-  matchesKey,
-  SelectList,
-  type Focusable,
-  type SelectItem,
-  type SelectListTheme,
-  Text,
-} from "@earendil-works/pi-tui";
+import { matchesKey, type Focusable, type SelectItem, type SelectListTheme } from "@earendil-works/pi-tui";
+import { TableSelect, type Placement, type SelectionState, type TableColumn } from "./tui.ts";
 import { loadUsage, usageKey, type ModelsConfig } from "./store.ts";
 
 export type PickerAction =
@@ -114,171 +102,111 @@ export function selectListTheme(theme: any): SelectListTheme {
   };
 }
 
-const HINT =
-  "↑↓ move  •  enter load  •  ctrl+a add  •  ctrl+u update  •  ctrl+x delete  •  ctrl+d default  •  ctrl+g agent defaults  •  ctrl+o options  •  ctrl+r reset  •  esc close";
+// Keep the default shortcut ahead of secondary actions so narrow terminals show it.
+const HINT = "↑↓ move · enter load · ctrl+d set default · ctrl+o actions · esc close";
 
-export class ModelPicker extends Container implements Focusable {
-  private search: Input;
-  private list: SelectList;
+export interface PickerOptions {
+  placement?: Placement;
+  /** Pass the same state object when reopening after an action. Updated in place. */
+  state?: SelectionState & { menuValue?: string };
+}
+
+const MODEL_COLUMNS: TableColumn[] = [
+  { key: "model", label: "MODEL" }, { key: "provider", label: "PROVIDER", width: 14 },
+  { key: "context", label: "CONTEXT", width: 7 }, { key: "uses", label: "USES", width: 5 },
+  { key: "status", label: "STATUS", width: 17 },
+];
+
+export class ModelPicker implements Focusable {
+  private table: TableSelect;
+  private menu?: TableSelect;
   private rows: RankedModel[];
-  private filtered: RankedModel[];
-  private hintText: Text;
-  private countText: Text;
-  // Plain fields rather than constructor parameter properties, so the source
-  // also loads under type-stripping runtimes that reject that syntax.
   private theme: any;
-  private onChange: () => void;
+  private changed: () => void;
   private done: (action: PickerAction) => void;
   private assignment: boolean;
-
+  private options: PickerOptions;
   private _focused = false;
-  get focused(): boolean {
-    return this._focused;
-  }
-  // Propagate focus to the Input so the hardware cursor lands correctly for IME.
+  get focused(): boolean { return this._focused; }
   set focused(value: boolean) {
     this._focused = value;
-    this.search.focused = value;
+    this.table.focused = value && !this.menu;
+    if (this.menu) this.menu.focused = value;
   }
 
-  constructor(
-    rows: RankedModel[],
-    theme: any,
-    onChange: () => void,
-    done: (action: PickerAction) => void,
-    assignment = false,
-  ) {
-    super();
+  constructor(rows: RankedModel[], theme: any, changed: () => void,
+    done: (action: PickerAction) => void, assignment = false, options: PickerOptions = {},
+    title = "Better Model Select") {
+    this.rows = rows;
     this.theme = theme;
-    this.onChange = onChange;
+    this.changed = changed;
     this.done = done;
     this.assignment = assignment;
-    this.rows = rows;
-    this.filtered = rows;
-
-    const fg =
-      typeof theme?.fg === "function"
-        ? (role: string, t: string) => theme.fg(role, t)
-        : (_role: string, t: string) => t;
-
-    this.search = new Input({
-      prompt: "  search ",
-      placeholder: "type to filter by name, id or provider…",
-      placeholderStyle: (t: string) => fg("dim", t),
-    });
-    this.search.onEscape = () => this.done({ kind: "close" });
-    this.search.onSubmit = () => this.loadSelected();
-
-    this.list = this.buildList(rows);
-
-    this.countText = new Text(fg("dim", this.countLabel()), 1, 0);
-    this.hintText = new Text(fg("dim", assignment ? "↑↓ move  •  enter assign  •  esc back" : HINT), 1, 0);
-
-    this.addChild(this.search);
-    this.addChild(this.list);
-    this.addChild(this.countText);
-    this.addChild(this.hintText);
-  }
-
-  /** SelectList has no public API to replace its items, so rebuild it. */
-  private buildList(rows: RankedModel[]): SelectList {
-    const list = new SelectList(
-      rows.map(toSelectItem),
-      Math.min(Math.max(rows.length, 1), 12),
-      selectListTheme(this.theme),
-    );
-    list.onSelect = () => this.loadSelected();
-    list.onCancel = () => this.done({ kind: "close" });
-    return list;
+    this.options = options;
+    this.table = new TableSelect({ title, columns: MODEL_COLUMNS,
+      rows: rows.map(row => ({ value: toSelectItem(row).value, label: row.label,
+        // IDs remain searchable but are not repeated under the display name.
+        description: row.modelId,
+        cells: { model: row.label, provider: row.provider, context: formatContext(row.contextWindow),
+          uses: String(row.count), status: [row.current ? "current" : "", row.default ? "default" : ""].filter(Boolean).join(" · ") },
+      })), placement: options.placement,
+      hint: assignment ? "↑↓ move · enter assign · esc back" : HINT,
+    }, theme, () => { this.saveState(); changed(); }, value => {
+      this.saveState();
+      if (value === undefined) done({ kind: "close" });
+      else this.action("load");
+    }, options.state);
+    if (options.state?.menuValue) this.openMenu();
   }
-
-  private countLabel(): string {
-    const total = this.rows.length;
-    const shown = this.filtered.length;
-    return shown === total ? `${total} models` : `${shown} of ${total} models`;
+  private saveState(): void { if (this.options.state) Object.assign(this.options.state, this.table.state); }
+  private currentRow(): RankedModel | undefined {
+    const value = this.table.currentItem()?.value;
+    return this.rows.find(row => toSelectItem(row).value === value);
   }
-
-  private currentRow(): RankedModel | null {
-    const item = this.list.getSelectedItem();
-    if (!item) return null;
-    const decoded = decodeValue(item.value);
-    if (!decoded) return null;
-    return (
-      this.filtered.find(
-        (r) => r.provider === decoded.provider && r.modelId === decoded.modelId,
-      ) ?? null
-    );
-  }
-
-  private loadSelected(): void {
+  private action(kind: PickerAction["kind"]): void {
+    this.saveState();
     const row = this.currentRow();
-    if (!row) return;
-    this.done({ kind: "load", provider: row.provider, modelId: row.modelId });
+    if (kind === "load" || kind === "set-default") {
+      if (row) this.done({ kind, provider: row.provider, modelId: row.modelId });
+    } else if (kind === "update" || kind === "delete") {
+      this.done({ kind, provider: row?.provider, modelId: row?.modelId });
+    } else this.done({ kind });
   }
-
-  /**
-   * Re-filter with fuzzyFilter rather than SelectList.setFilter, which only does
-   * a prefix match on item.value and would ignore the display name. Ranking is
-   * preserved because fuzzyFilter is stable over the already-sorted rows for
-   * equal scores, and exact-prefix hits still surface first.
-   */
-  private applyFilter(): void {
-    const query = this.search.getValue().trim();
-    this.filtered = query
-      ? fuzzyFilter(this.rows, query, (r) => `${r.label} ${r.modelId} ${r.provider}`)
-      : this.rows;
-
-    // Swap the list child in place; index 1 is the SelectList.
-    const next = this.buildList(this.filtered);
-    const idx = this.children.indexOf(this.list);
-    if (idx >= 0) this.children[idx] = next;
-    this.list = next;
-
-    const fg =
-      typeof this.theme?.fg === "function"
-        ? (role: string, t: string) => this.theme.fg(role, t)
-        : (_role: string, t: string) => t;
-    this.countText.setText(fg("dim", this.countLabel()));
+  private openMenu(): void {
+    const row = this.currentRow();
+    const actions: { value: PickerAction["kind"]; label: string }[] = [
+      ...(row ? [{ value: "load" as const, label: "Load selected model" },
+        { value: "set-default" as const, label: "Set selected model as default" }] : []),
+      { value: "add", label: "Add model" }, { value: "update", label: "Update model" },
+      { value: "delete", label: "Delete model" }, { value: "defaults", label: "Model and agent defaults" },
+      { value: "options", label: "Options" }, { value: "reset", label: "Reset usage ranking" },
+    ];
+    this.menu = new TableSelect({ title: "Models / Actions", rows: actions, search: false, initialValue: this.options.state?.menuValue,
+      hint: "↑↓ move · enter choose · esc back" }, this.theme, this.changed, value => {
+      if (this.options.state) {
+        if (value === undefined) delete this.options.state.menuValue;
+        else this.options.state.menuValue = value;
+      }
+      this.menu = undefined;
+      this.focused = this._focused;
+      if (value !== undefined) this.action(value as PickerAction["kind"]);
+      this.changed();
+    });
+    this.focused = this._focused;
+    this.changed();
   }
-
   handleInput(data: string): void {
-    if (matchesKey(data, "escape")) return this.done({ kind: "close" });
-    if (!this.assignment && matchesKey(data, "ctrl+g")) return this.done({ kind: "defaults" });
-    if (!this.assignment && matchesKey(data, "ctrl+d")) {
-      const row = this.currentRow();
-      if (row) this.done({ kind: "set-default", provider: row.provider, modelId: row.modelId });
-      return;
-    }
-    if (this.assignment && ["ctrl+a", "ctrl+o", "ctrl+r", "ctrl+u", "ctrl+x", "ctrl+d", "ctrl+g"].some(key => matchesKey(data, key as any))) return;
-    if (matchesKey(data, "ctrl+a")) return this.done({ kind: "add" });
-    if (matchesKey(data, "ctrl+o")) return this.done({ kind: "options" });
-    if (matchesKey(data, "ctrl+r")) return this.done({ kind: "reset" });
-
-    if (matchesKey(data, "ctrl+u")) {
-      const row = this.currentRow();
-      return this.done({ kind: "update", provider: row?.provider, modelId: row?.modelId });
-    }
-    if (matchesKey(data, "ctrl+x")) {
-      const row = this.currentRow();
-      return this.done({ kind: "delete", provider: row?.provider, modelId: row?.modelId });
+    if (this.menu) { this.menu.handleInput(data); return; }
+    const shortcuts: [string, PickerAction["kind"]][] = [
+      ["ctrl+a", "add"], ["ctrl+u", "update"], ["ctrl+x", "delete"], ["ctrl+d", "set-default"],
+      ["ctrl+g", "defaults"], ["ctrl+r", "reset"],
+    ];
+    if (matchesKey(data, "ctrl+o")) { if (!this.assignment) this.openMenu(); return; }
+    for (const [key, kind] of shortcuts) {
+      if (matchesKey(data, key as any)) { if (!this.assignment) this.action(kind); return; }
     }
-
-    // Navigation and submit belong to the list; everything else is search text.
-    if (
-      matchesKey(data, "up") ||
-      matchesKey(data, "down") ||
-      matchesKey(data, "pageUp") ||
-      matchesKey(data, "pageDown") ||
-      matchesKey(data, "enter")
-    ) {
-      this.list.handleInput(data);
-      this.onChange();
-      return;
-    }
-
-    const before = this.search.getValue();
-    this.search.handleInput(data);
-    if (this.search.getValue() !== before) this.applyFilter();
-    this.onChange();
+    this.table.handleInput(data);
   }
+  render(width: number): string[] { return (this.menu ?? this.table).render(width); }
+  invalidate(): void { this.table.invalidate(); this.menu?.invalidate(); }
 }

package/extensions/lib/store.ts

@@ -20,12 +20,14 @@ export const USAGE_PATH = (): string => join(getAgentDir(), "bms-usage.json");
 export interface BmsSettings {
   version: 1;
   writeMode: WriteMode;
+  resultPlacement: "above" | "below";
   disabledProviders: string[];
 }
 
 const DEFAULT_SETTINGS: BmsSettings = {
   version: 1,
   writeMode: "overlay",
+  resultPlacement: "below",
   disabledProviders: [],
 };
 
@@ -72,6 +74,7 @@ export function loadSettings(): BmsSettings {
     return {
       version: 1,
       writeMode: raw.writeMode === "direct" ? "direct" : "overlay",
+      resultPlacement: raw.resultPlacement === "above" ? "above" : "below",
       disabledProviders: Array.isArray(raw.disabledProviders)
         ? raw.disabledProviders.filter((value): value is string => typeof value === "string")
         : [],