pi-advisor-flow 0.6.0 → 0.8.0

package/src/ui/model-selector.ts

@@ -1,167 +1,20 @@
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import {
-  type Component,
-  type Focusable,
-  fuzzyFilter,
-  Input,
-  type Keybindings,
-  type KeybindingsManager,
-  truncateToWidth,
-} from "@earendil-works/pi-tui";
+import { ModelSelectorAdapter } from "./model-selector-adapter.ts";
+import { SearchableModelList } from "./searchable-model-list.ts";
 import type { SearchableModelSelectorOptions } from "./types.ts";
 
-export class SearchableModelSelector implements Component, Focusable {
-  private readonly tui: SearchableModelSelectorOptions["tui"];
-  private readonly searchInput: Input;
-  private readonly allOptions: string[];
-  private readonly currentOption: string | undefined;
-  private filteredOptions: string[];
-  private selectedIndex = 0;
-  private readonly title: string;
-  private readonly onSelect: (value: string) => void;
-  private readonly onCancel: () => void;
-  private readonly theme: Theme;
-  private readonly keybindings: KeybindingsManager;
-  private _focused = false;
-
-  get focused(): boolean {
-    return this._focused;
-  }
-  set focused(val: boolean) {
-    this._focused = val;
-    this.searchInput.focused = val;
-  }
-
+export class SearchableModelSelector extends ModelSelectorAdapter {
   constructor(options: SearchableModelSelectorOptions) {
-    this.tui = options.tui;
-    this.title = options.title;
-    this.currentOption =
-      options.currentOption &&
-      options.allOptions.includes(options.currentOption)
-        ? options.currentOption
-        : undefined;
-    this.allOptions = this.currentOption
-      ? [
-          this.currentOption,
-          ...options.allOptions.filter((item) => item !== this.currentOption),
-        ]
-      : options.allOptions;
-    this.theme = options.theme;
-    this.keybindings = options.keybindings;
-    this.onSelect = options.onSelect;
-    this.onCancel = options.onCancel;
-    this.searchInput = new Input();
-    this.filteredOptions = this.allOptions;
-  }
-
-  invalidate(): void {
-    this.searchInput.invalidate();
-  }
-
-  render(width: number): string[] {
-    const lines: string[] = [this.theme.fg("border", "─".repeat(width))];
-    lines.push(`  ${this.theme.fg("accent", this.theme.bold(this.title))}`);
-    const inputLines = this.searchInput.render(Math.max(1, width - 10));
-    lines.push(
-      `  ${this.theme.fg("accent", "Search: ")}${inputLines[0] || ""}`
-    );
-    lines.push("");
-
-    const query = this.searchInput.getValue().trim();
-    this.filteredOptions = query
-      ? fuzzyFilter(this.allOptions, query, (item) => item)
-      : this.allOptions;
-    this.selectedIndex = Math.min(
-      this.selectedIndex,
-      Math.max(0, this.filteredOptions.length - 1)
-    );
-
-    const maxVisible = 10;
-    const total = this.filteredOptions.length;
-    if (total === 0) {
-      lines.push(`  ${this.theme.fg("muted", "No matching models found.")}`);
-    } else {
-      const startIndex = Math.max(
-        0,
-        Math.min(
-          this.selectedIndex - Math.floor(maxVisible / 2),
-          total - maxVisible
-        )
-      );
-      const endIndex = Math.min(startIndex + maxVisible, total);
-      for (let i = startIndex; i < endIndex; i += 1) {
-        const item = this.filteredOptions[i];
-        const tick = item === this.currentOption ? "✓ " : "  ";
-        if (i === this.selectedIndex) {
-          lines.push(
-            `  ${this.theme.fg("accent", "→ ")}${this.theme.fg("accent", `${tick}${item}`)}`
-          );
-        } else {
-          lines.push(`    ${this.theme.fg("text", `${tick}${item}`)}`);
-        }
-      }
-      if (total > maxVisible) {
-        lines.push(
-          "  " +
-            this.theme.fg("muted", `  (${this.selectedIndex + 1}/${total})`)
-        );
-      }
-    }
-    lines.push("");
-    lines.push(
-      `  ${this.theme.fg("dim", "Type to search · ↑↓: navigate · Enter: select · Esc: cancel")}`
+    super(
+      new SearchableModelList({
+        ...options,
+        currentOptions: options.currentOption ? [options.currentOption] : [],
+        multiSelect: false,
+        onSelect: ([value]) => {
+          if (value !== undefined) {
+            options.onSelect(value);
+          }
+        },
+      })
     );
-    lines.push(this.theme.fg("border", "─".repeat(width)));
-    return lines.map((line) => truncateToWidth(line, width));
-  }
-
-  handleInput(keyData: string): void {
-    if (this.matchesAction(keyData, "tui.select.up", "\u001b[A")) {
-      this.moveSelection(-1);
-      return;
-    }
-    if (this.matchesAction(keyData, "tui.select.down", "\u001b[B")) {
-      this.moveSelection(1);
-      return;
-    }
-    if (
-      this.matchesAction(keyData, "tui.select.confirm", "\n") ||
-      keyData === "\r"
-    ) {
-      if (this.filteredOptions.length > 0) {
-        this.onSelect(this.filteredOptions[this.selectedIndex]);
-      }
-      return;
-    }
-    if (this.matchesAction(keyData, "tui.select.cancel", "\u001b")) {
-      this.onCancel();
-      return;
-    }
-    this.searchInput.handleInput(keyData);
-    this.selectedIndex = 0;
-    this.tui.requestRender();
-  }
-
-  private matchesAction(
-    keyData: string,
-    action: keyof Keybindings,
-    fallback: string
-  ) {
-    return this.keybindings.matches(keyData, action) || keyData === fallback;
-  }
-
-  private moveSelection(direction: -1 | 1) {
-    if (this.filteredOptions.length > 0) {
-      const lastIndex = this.filteredOptions.length - 1;
-      const nextIndex = this.selectedIndex + direction;
-      if (nextIndex < 0) {
-        this.selectedIndex = lastIndex;
-      } else if (nextIndex > lastIndex) {
-        this.selectedIndex = 0;
-      } else {
-        this.selectedIndex = nextIndex;
-      }
-    }
-    this.tui.requestRender();
   }
 }

package/src/ui/searchable-model-list.ts

@@ -0,0 +1,230 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { fuzzyFilter, Input, truncateToWidth } from "@earendil-works/pi-tui";
+import type {
+  Component,
+  Focusable,
+  Keybindings,
+  KeybindingsManager,
+} from "@earendil-works/pi-tui";
+
+import type { RenderRequester } from "./types.ts";
+
+interface SearchableModelListOptions {
+  allOptions: string[];
+  currentOptions: string[];
+  keybindings: KeybindingsManager;
+  multiSelect: boolean;
+  onCancel: () => void;
+  onSelect: (values: string[]) => void;
+  theme: Theme;
+  title: string;
+  tui: RenderRequester;
+}
+
+export class SearchableModelList implements Component, Focusable {
+  private readonly tui: RenderRequester;
+  private readonly searchInput: Input;
+  private readonly allOptions: string[];
+  private readonly currentOption: string | undefined;
+  private readonly multiSelect: boolean;
+  private readonly selected = new Set<string>();
+  private filteredOptions: string[];
+  private selectedIndex = 0;
+  private readonly title: string;
+  private readonly onSelect: (values: string[]) => void;
+  private readonly onCancel: () => void;
+  private readonly theme: Theme;
+  private readonly keybindings: KeybindingsManager;
+  private _focused = false;
+
+  get focused(): boolean {
+    return this._focused;
+  }
+  set focused(val: boolean) {
+    this._focused = val;
+    this.searchInput.focused = val;
+  }
+
+  constructor(options: SearchableModelListOptions) {
+    this.multiSelect = options.multiSelect;
+    this.tui = options.tui;
+    this.title = options.title;
+    const [requestedCurrentOption] = options.currentOptions;
+    this.currentOption =
+      !this.multiSelect &&
+      requestedCurrentOption &&
+      options.allOptions.includes(requestedCurrentOption)
+        ? requestedCurrentOption
+        : undefined;
+    let allOptions: string[];
+    if (this.multiSelect) {
+      allOptions = [...new Set(options.allOptions)].toSorted((left, right) =>
+        left.localeCompare(right)
+      );
+    } else if (this.currentOption) {
+      allOptions = [
+        this.currentOption,
+        ...options.allOptions.filter((item) => item !== this.currentOption),
+      ];
+    } else {
+      allOptions = [...options.allOptions];
+    }
+    this.allOptions = allOptions;
+    if (this.multiSelect) {
+      for (const value of options.currentOptions) {
+        if (this.allOptions.includes(value)) {
+          this.selected.add(value);
+        }
+      }
+    }
+    this.theme = options.theme;
+    this.keybindings = options.keybindings;
+    this.onSelect = options.onSelect;
+    this.onCancel = options.onCancel;
+    this.searchInput = new Input();
+    this.filteredOptions = this.allOptions;
+  }
+
+  invalidate(): void {
+    this.searchInput.invalidate();
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = [this.theme.fg("border", "─".repeat(width))];
+    lines.push(`  ${this.theme.fg("accent", this.theme.bold(this.title))}`);
+    const inputLines = this.searchInput.render(Math.max(1, width - 10));
+    lines.push(
+      `  ${this.theme.fg("accent", "Search: ")}${inputLines[0] || ""}`,
+      ""
+    );
+
+    const query = this.searchInput.getValue().trim();
+    this.filteredOptions = query
+      ? fuzzyFilter(this.allOptions, query, (item) => item)
+      : this.allOptions;
+    this.selectedIndex = Math.min(
+      this.selectedIndex,
+      Math.max(0, this.filteredOptions.length - 1)
+    );
+
+    const maxVisible = 10;
+    const total = this.filteredOptions.length;
+    if (total === 0) {
+      lines.push(`  ${this.theme.fg("muted", "No matching models found.")}`);
+    } else {
+      const startIndex = Math.max(
+        0,
+        Math.min(
+          this.selectedIndex - Math.floor(maxVisible / 2),
+          total - maxVisible
+        )
+      );
+      const endIndex = Math.min(startIndex + maxVisible, total);
+      for (let i = startIndex; i < endIndex; i += 1) {
+        lines.push(this.renderOption(this.filteredOptions[i], i));
+      }
+      if (total > maxVisible) {
+        lines.push(
+          `  ${this.theme.fg(
+            "muted",
+            `  (${this.selectedIndex + 1}/${total})`
+          )}`
+        );
+      }
+    }
+    lines.push(
+      "",
+      `  ${this.theme.fg("dim", this.interactionHint())}`,
+      this.theme.fg("border", "─".repeat(width))
+    );
+    return lines.map((line) => truncateToWidth(line, width));
+  }
+
+  handleInput(keyData: string): void {
+    if (this.matchesAction(keyData, "tui.select.up", "\u001B[A")) {
+      this.moveSelection(-1);
+      return;
+    }
+    if (this.matchesAction(keyData, "tui.select.down", "\u001B[B")) {
+      this.moveSelection(1);
+      return;
+    }
+    if (this.multiSelect && keyData === " ") {
+      const item = this.filteredOptions[this.selectedIndex];
+      if (item) {
+        if (this.selected.has(item)) {
+          this.selected.delete(item);
+        } else {
+          this.selected.add(item);
+        }
+      }
+      this.tui.requestRender();
+      return;
+    }
+    if (
+      this.matchesAction(keyData, "tui.select.confirm", "\n") ||
+      keyData === "\r"
+    ) {
+      if (this.multiSelect) {
+        this.onSelect(
+          this.allOptions.filter((item) => this.selected.has(item))
+        );
+      } else {
+        const selectedOption = this.filteredOptions[this.selectedIndex];
+        if (selectedOption !== undefined) {
+          this.onSelect([selectedOption]);
+        }
+      }
+      return;
+    }
+    if (this.matchesAction(keyData, "tui.select.cancel", "\u001B")) {
+      this.onCancel();
+      return;
+    }
+    this.searchInput.handleInput(keyData);
+    this.selectedIndex = 0;
+    this.tui.requestRender();
+  }
+
+  private interactionHint(): string {
+    return this.multiSelect
+      ? "Type to search · ↑↓: navigate · Space: toggle · Enter: apply · Esc: cancel"
+      : "Type to search · ↑↓: navigate · Enter: select · Esc: cancel";
+  }
+
+  private renderOption(item: string, index: number): string {
+    let tick = "  ";
+    if (
+      this.multiSelect ? this.selected.has(item) : item === this.currentOption
+    ) {
+      tick = "✓ ";
+    }
+    if (index === this.selectedIndex) {
+      return `  ${this.theme.fg("accent", `→ ${tick}${item}`)}`;
+    }
+    return `    ${this.theme.fg("text", `${tick}${item}`)}`;
+  }
+
+  private matchesAction(
+    keyData: string,
+    action: keyof Keybindings,
+    fallback: string
+  ) {
+    return this.keybindings.matches(keyData, action) || keyData === fallback;
+  }
+
+  private moveSelection(direction: -1 | 1) {
+    if (this.filteredOptions.length > 0) {
+      const lastIndex = this.filteredOptions.length - 1;
+      const nextIndex = this.selectedIndex + direction;
+      if (nextIndex < 0) {
+        this.selectedIndex = lastIndex;
+      } else if (nextIndex > lastIndex) {
+        this.selectedIndex = 0;
+      } else {
+        this.selectedIndex = nextIndex;
+      }
+    }
+    this.tui.requestRender();
+  }
+}

package/src/ui/settings-formatting.ts

@@ -1,4 +1,5 @@
 import { visibleWidth } from "@earendil-works/pi-tui";
+
 import { DEFAULT_EFFORT_LEVEL } from "../commands/model-options.ts";
 import type { ContextPreset } from "./types.ts";
 
@@ -20,7 +21,7 @@ export const withCurrentValue = (current: string, values: string[]) =>
 
 export const numericValues = (current: number, values: number[]) => {
   const all = values.includes(current) ? values : [...values, current];
-  return all.sort((a, b) => a - b).map(String);
+  return all.toSorted((a, b) => a - b).map(String);
 };
 
 export const maxCallValues = (current: string) => {
@@ -53,6 +54,22 @@ export const currentContextLabel = (
   presets.find((preset) => preset.value === contextMaxChars)?.label ??
   String(contextMaxChars);
 
+const closestPresetIndex = (
+  presets: ContextPreset[],
+  contextMaxChars: number
+): number => {
+  let closestIndex = 0;
+  for (let index = 0; index < presets.length; index += 1) {
+    if (
+      Math.abs(presets[index].value - contextMaxChars) <
+      Math.abs(presets[closestIndex].value - contextMaxChars)
+    ) {
+      closestIndex = index;
+    }
+  }
+  return closestIndex;
+};
+
 export const contextDescription = (
   presets: ContextPreset[],
   contextMaxChars: number
@@ -61,16 +78,9 @@ export const contextDescription = (
     (preset) => preset.value === contextMaxChars
   );
   const selectedIndex =
-    exactIndex >= 0
-      ? exactIndex
-      : presets.reduce(
-          (closestIndex, preset, index) =>
-            Math.abs(preset.value - contextMaxChars) <
-            Math.abs(presets[closestIndex].value - contextMaxChars)
-              ? index
-              : closestIndex,
-          0
-        );
+    exactIndex === -1
+      ? closestPresetIndex(presets, contextMaxChars)
+      : exactIndex;
   const selectedPreset = presets[selectedIndex];
   const isFullContext =
     selectedPreset?.value === Number.MAX_SAFE_INTEGER ||
@@ -100,7 +110,7 @@ export const contextDescription = (
   );
   const markerLabel = `${" ".repeat(labelStart)}${label}`;
   const description =
-    exactIndex >= 0 ? selectedPreset?.description : "Custom context limit.";
+    exactIndex === -1 ? "Custom context limit." : selectedPreset?.description;
   return `${description ?? "Custom context limit."}\n${meterPrefix}${meter}  full\n${markerLabel}`;
 };
 
@@ -126,8 +136,8 @@ export const rainbowGradient = (text: string, startedAt: number): string => {
       const red = Math.round(baseRed + (255 - baseRed) * brightness);
       const green = Math.round(baseGreen + (255 - baseGreen) * brightness);
       const blue = Math.round(baseBlue + (255 - baseBlue) * brightness);
-      return `\x1b[38;2;${red};${green};${blue}m${character}`;
+      return `\u001B[38;2;${red};${green};${blue}m${character}`;
     })
     .join("")
-    .concat("\x1b[0m");
+    .concat("\u001B[0m");
 };