shariq-pi-extensions 0.2.29 → 0.2.30

package/docs/EXTENSIONS.md

@@ -48,9 +48,9 @@ The extension supplies tools including `spawn_agent`, `task`, `check_agent`, `li
 
 ### [Orchestration](../extensions/orchestration/README.md)
 
-The Orchestration extension coordinates explicitly requested large tasks through a dedicated orchestrator plus configurable explorer, frontend, backend, general-worker, and reviewer models. `/orchestration` opens the dashboard and `/orchestration settings` configures global role models. It reuses the canonical Subagents runtime, maintains a 10-worker pool per project, isolates Git writers in task worktrees, resumes the original worker for substantial review fixes, and applies final reviewed changes without committing or pushing.
+The Orchestration extension coordinates explicitly requested large tasks through a dedicated orchestrator plus configurable explorer, frontend, backend, general-worker, and reviewer models. `/orchestration` opens the dashboard and `/orchestration settings` opens the interactive role-configuration panel with the Searchable Model Picker. It reuses the canonical Subagents runtime, maintains a 10-worker pool per project, isolates Git writers in task worktrees, resumes the original worker for substantial review fixes, and applies final reviewed changes without committing or pushing.
 
-The model-facing `create_orchestration` tool starts planning only after an explicit orchestration request. `get_orchestration` reports status without advancing work. Both use compact expandable timeline cards, and active runs share the full-screen Active work dock with explicit plan-ready, blocked, running, and paused states instead of duplicating workflow progress in the footer. The full-height framed dashboard runs editors and confirmations outside its overlay to avoid nested-input stalls. Interrupted runs recover paused under `<agent-dir>/orchestration/`.
+The model-facing `create_orchestration` tool starts planning only after an explicit orchestration request. `get_orchestration` reports status without advancing work. Both use compact expandable timeline cards, and active runs share the full-screen Active work dock with explicit plan-ready, blocked, running, and paused states instead of duplicating workflow progress in the footer. The full-height framed dashboard provides scrollable multi-task inspection and runs editors and confirmations outside its overlay to avoid nested-input stalls. Interrupted runs recover paused under `<agent-dir>/orchestration/`.
 
 ### [Smart Compaction](../extensions/smart-compaction/README.md)
 

package/extensions/orchestration/README.md

@@ -16,7 +16,7 @@ The orchestrator sleeps while agents work and wakes automatically at execution b
 
 ## Roles and settings
 
-Use `/orchestration settings` to choose a global provider/model and thinking level for:
+Use `/orchestration settings` (or `s` in the dashboard) to open the interactive role configuration panel. Navigate roles with `j`/`k`, press `Enter` to search and select models from all active providers in the Searchable Model Picker, press `t` or `Tab` to cycle thinking levels directly, and press `s` to save. Settings configure:
 
 - orchestrator
 - explorer

package/extensions/orchestration/dashboard.ts

@@ -28,6 +28,7 @@ class OrchestrationDashboard {
   private selected = 0;
   private selectedId?: string;
   private detail = false;
+  private detailScroll = 0;
   private unsubscribe: () => void;
   private readonly tui: TUI;
   private readonly theme: Theme;
@@ -74,28 +75,45 @@ class OrchestrationDashboard {
   handleInput(data: string) {
     const runs = this.engine.list();
     this.reconcileSelection(runs);
+    const rows = this.tui.terminal.rows || 30;
+    const bodyHeight = Math.max(8, rows - 5);
+
     if (matchesKey(data, Key.escape)) {
-      if (this.detail) this.detail = false;
-      else {
+      if (this.detail) {
+        this.detail = false;
+        this.detailScroll = 0;
+      } else {
         this.close({ kind: "close" });
         return;
       }
-    } else if (!this.detail && (this.keys.matches(data, "tui.select.up") || data === "k")) {
-      this.selected = Math.max(0, this.selected - 1);
-      this.selectedId = runs[this.selected]?.id;
-    } else if (!this.detail && (this.keys.matches(data, "tui.select.down") || data === "j")) {
-      this.selected = Math.min(Math.max(0, runs.length - 1), this.selected + 1);
-      this.selectedId = runs[this.selected]?.id;
-    } else if (!this.detail && this.keys.matches(data, "tui.select.confirm") && runs[this.selected]) {
-      this.detail = true;
-    } else if (data === "n") this.close({ kind: "create" });
-    else if (data === "s") this.close({ kind: "settings" });
-    else if (this.detail && runs[this.selected]) {
-      const run = runs[this.selected];
-      if (data === "a" && run.status === "awaiting-approval") this.close({ kind: "approve", id: run.id });
-      else if (data === "f" && run.status === "awaiting-approval") this.close({ kind: "feedback", id: run.id });
-      else if (data === "p") this.close({ kind: "toggle-pause", id: run.id });
-      else if (data === "x") this.close({ kind: "cancel", id: run.id });
+    } else if (this.detail) {
+      if (this.keys.matches(data, "tui.select.up") || data === "k" || matchesKey(data, Key.up)) {
+        this.detailScroll = Math.max(0, this.detailScroll - 1);
+      } else if (this.keys.matches(data, "tui.select.down") || data === "j" || matchesKey(data, Key.down)) {
+        this.detailScroll = this.detailScroll + 1;
+      } else if (matchesKey(data, Key.pageUp)) {
+        this.detailScroll = Math.max(0, this.detailScroll - Math.max(1, bodyHeight - 4));
+      } else if (matchesKey(data, Key.pageDown)) {
+        this.detailScroll = this.detailScroll + Math.max(1, bodyHeight - 4);
+      } else if (runs[this.selected]) {
+        const run = runs[this.selected];
+        if (data === "a" && run.status === "awaiting-approval") this.close({ kind: "approve", id: run.id });
+        else if (data === "f" && run.status === "awaiting-approval") this.close({ kind: "feedback", id: run.id });
+        else if (data === "p") this.close({ kind: "toggle-pause", id: run.id });
+        else if (data === "x") this.close({ kind: "cancel", id: run.id });
+      }
+    } else if (!this.detail) {
+      if (this.keys.matches(data, "tui.select.up") || data === "k" || matchesKey(data, Key.up)) {
+        this.selected = Math.max(0, this.selected - 1);
+        this.selectedId = runs[this.selected]?.id;
+      } else if (this.keys.matches(data, "tui.select.down") || data === "j" || matchesKey(data, Key.down)) {
+        this.selected = Math.min(Math.max(0, runs.length - 1), this.selected + 1);
+        this.selectedId = runs[this.selected]?.id;
+      } else if (this.keys.matches(data, "tui.select.confirm") && runs[this.selected]) {
+        this.detail = true;
+        this.detailScroll = 0;
+      } else if (data === "n") this.close({ kind: "create" });
+      else if (data === "s") this.close({ kind: "settings" });
     }
     this.tui.requestRender();
   }
@@ -107,12 +125,27 @@ class OrchestrationDashboard {
     const rows = this.tui.terminal.rows || 30;
     const bodyHeight = Math.max(8, rows - 5);
     const innerWidth = Math.max(1, width - 2);
-    const content = this.detail && selected
-      ? this.renderDetail(selected, innerWidth)
-      : this.renderList(runs, innerWidth);
-    const body = content.length > bodyHeight
-      ? [...content.slice(0, bodyHeight - 1), this.theme.fg("dim", "… more")]
-      : content;
+
+    let body: string[];
+    if (this.detail && selected) {
+      const allDetailLines = this.renderDetail(selected, innerWidth);
+      const maxScroll = Math.max(0, allDetailLines.length - bodyHeight);
+      this.detailScroll = Math.min(this.detailScroll, maxScroll);
+      const visible = allDetailLines.slice(this.detailScroll, this.detailScroll + bodyHeight);
+      if (this.detailScroll > 0 && visible.length > 0) {
+        visible[0] = this.theme.fg("dim", `  ↑ ${this.detailScroll} more lines`);
+      }
+      if (this.detailScroll + bodyHeight < allDetailLines.length && visible.length > 0) {
+        visible[visible.length - 1] = this.theme.fg("dim", `  ↓ ${allDetailLines.length - (this.detailScroll + bodyHeight)} more lines`);
+      }
+      body = visible;
+    } else {
+      const listContent = this.renderList(runs, innerWidth);
+      body = listContent.length > bodyHeight
+        ? [...listContent.slice(0, bodyHeight - 1), this.theme.fg("dim", "… more")]
+        : listContent;
+    }
+
     const status = runs.length
       ? `${runs.filter((run) => ["planning", "running"].includes(run.status)).length} active · ${runs.length} total`
       : "idle";
@@ -121,6 +154,7 @@ class OrchestrationDashboard {
           selected.status === "awaiting-approval" ? "a approve · f feedback" : "",
           ["paused", "interrupted", "blocked"].includes(selected.status) ? "p resume" : selected.status === "running" ? "p pause" : "",
           !["completed", "cancelled"].includes(selected.status) ? "x cancel" : "",
+          "j/k scroll",
           "esc back",
         ].filter(Boolean).join(" · ")
       : "j/k select · enter open · n new · s settings · esc close";

package/extensions/orchestration/settings-ui.ts

@@ -1,43 +1,213 @@
-import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { ORCHESTRATION_ROLES } from "./types.ts";
+import type {
+  ExtensionContext,
+  KeybindingsManager,
+  Theme,
+} from "@earendil-works/pi-coding-agent";
+import {
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  type TUI,
+} from "@earendil-works/pi-tui";
+import { openModelPicker } from "../shared/model-picker.ts";
+import { frameBottom, frameTop, framedRow, joinSides, padLine } from "../shared/tui-dashboard.ts";
 import {
   loadOrchestrationSettings,
   saveOrchestrationSettings,
 } from "./settings.ts";
+import {
+  ORCHESTRATION_ROLES,
+  type OrchestrationRole,
+  type OrchestrationSettings,
+} from "./types.ts";
 
 const THINKING = ["off", "minimal", "low", "medium", "high", "xhigh", "max"] as const;
 
-export async function openOrchestrationSettings(ctx: ExtensionContext) {
+export type OrchestrationSettingsAction =
+  | { kind: "close" }
+  | { kind: "save" }
+  | { kind: "pick-model"; role: OrchestrationRole };
+
+export class OrchestrationSettingsComponent {
+  private readonly tui: TUI;
+  private readonly theme: Theme;
+  private readonly keys: KeybindingsManager;
+  private readonly settings: OrchestrationSettings;
+  private readonly done: (action: OrchestrationSettingsAction) => void;
+  private selected = 0;
+  private closed = false;
+  public changed = false;
+
+  constructor(
+    tui: TUI,
+    theme: Theme,
+    keys: KeybindingsManager,
+    settings: OrchestrationSettings,
+    done: (action: OrchestrationSettingsAction) => void,
+  ) {
+    this.tui = tui;
+    this.theme = theme;
+    this.keys = keys;
+    this.settings = settings;
+    this.done = done;
+  }
+
+  private close(action: OrchestrationSettingsAction) {
+    if (this.closed) return;
+    this.closed = true;
+    this.done(action);
+  }
+
+  dispose() {
+    this.closed = true;
+  }
+
+  invalidate() {}
+
+  private cycleThinking(role: OrchestrationRole) {
+    const current = this.settings.roles[role].thinking;
+    const currentIndex = THINKING.indexOf(current as (typeof THINKING)[number]);
+    const nextIndex = currentIndex >= 0 ? (currentIndex + 1) % THINKING.length : 0;
+    this.settings.roles[role].thinking = THINKING[nextIndex];
+    this.changed = true;
+    this.tui.requestRender();
+  }
+
+  handleInput(data: string) {
+    if (matchesKey(data, Key.escape)) {
+      this.close({ kind: "close" });
+      return;
+    }
+
+    if (this.keys.matches(data, "tui.select.up") || data === "k" || matchesKey(data, Key.up)) {
+      this.selected = Math.max(0, this.selected - 1);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (this.keys.matches(data, "tui.select.down") || data === "j" || matchesKey(data, Key.down)) {
+      this.selected = Math.min(ORCHESTRATION_ROLES.length - 1, this.selected + 1);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.return) || matchesKey(data, Key.enter) || data === "e") {
+      const role = ORCHESTRATION_ROLES[this.selected];
+      if (role) this.close({ kind: "pick-model", role });
+      return;
+    }
+
+    if (data === "t" || matchesKey(data, Key.tab) || data === " ") {
+      const role = ORCHESTRATION_ROLES[this.selected];
+      if (role) this.cycleThinking(role);
+      return;
+    }
+
+    if (data === "s") {
+      this.close({ kind: "save" });
+      return;
+    }
+  }
+
+  render(width: number): string[] {
+    const rows = this.tui.terminal.rows || 30;
+    const bodyHeight = Math.max(8, rows - 5);
+    const innerWidth = Math.max(1, width - 2);
+
+    const bodyLines: string[] = [
+      ` ${this.theme.fg("muted", "Configure role models and reasoning effort.")}`,
+      this.theme.fg("borderMuted", "─".repeat(innerWidth)),
+      "",
+    ];
+
+    for (const [index, role] of ORCHESTRATION_ROLES.entries()) {
+      const isSel = index === this.selected;
+      const config = this.settings.roles[role] ?? { thinking: "medium" as const };
+      const marker = isSel ? this.theme.fg("accent", "❯") : " ";
+
+      const roleLabel = isSel
+        ? this.theme.fg("accent", this.theme.bold(role.padEnd(14)))
+        : this.theme.fg("text", role.padEnd(14));
+
+      const modelText = config.model
+        ? this.theme.fg("accent", config.model)
+        : this.theme.fg("error", "not configured (press Enter to choose)");
+
+      const thinkingText = this.theme.fg("dim", `⚡ ${config.thinking ?? "medium"}`);
+
+      const left = ` ${marker} ${roleLabel} ${modelText}`;
+      const row = joinSides(left, `${thinkingText} `, innerWidth);
+      bodyLines.push(isSel ? this.theme.bg("selectedBg", row) : row);
+    }
+
+    bodyLines.push("");
+    bodyLines.push(` ${this.theme.fg("dim", "Tips: Press Enter to open Searchable Model Picker · Press t / Tab to cycle thinking level")}`);
+
+    const lines = [
+      joinSides(`  ${this.theme.fg("accent", this.theme.bold("◆ ORCHESTRATION SETTINGS"))}`, `${this.theme.fg("muted", "5 roles")}  `, width),
+      frameTop(this.theme, width, "ROLE CONFIGURATION"),
+    ];
+
+    for (let row = 0; row < bodyHeight; row++) {
+      lines.push(framedRow(this.theme, bodyLines[row] ?? "", width));
+    }
+
+    lines.push(frameBottom(this.theme, width));
+    lines.push(truncateToWidth(this.theme.fg("dim", "  j/k navigate · enter pick model · t cycle thinking · s save · esc close"), width, ""));
+
+    return lines.map((line) => truncateToWidth(line, width, ""));
+  }
+}
+
+export async function openOrchestrationSettings(ctx: ExtensionContext): Promise<boolean> {
   const settings = loadOrchestrationSettings();
   let changed = false;
-  for (;;) {
-    const choices = [
-      ...ORCHESTRATION_ROLES.map((role) =>
-        `${role}: ${settings.roles[role].model ?? "not configured"} · ${settings.roles[role].thinking}`,
-      ),
-      "done",
-    ];
-    const selected = await ctx.ui.select("Orchestration role models", choices);
-    if (!selected || selected === "done") break;
-    const role = ORCHESTRATION_ROLES.find((candidate) => selected.startsWith(`${candidate}:`));
-    if (!role) continue;
-    const models = ctx.modelRegistry
-      .getAll()
-      .map((model) => `${model.provider}/${model.id}`)
-      .sort();
-    const model = await ctx.ui.select(`Model for ${role}`, models);
-    if (!model) continue;
-    const thinking = await ctx.ui.select(
-      `Thinking level for ${role}`,
-      [...THINKING],
+
+  if (!ctx.hasUI) return false;
+
+  while (true) {
+    let component: OrchestrationSettingsComponent | undefined;
+    const action = await ctx.ui.custom<OrchestrationSettingsAction>(
+      (tui, theme, keys, done) => {
+        component = new OrchestrationSettingsComponent(tui, theme, keys, settings, done);
+        return component;
+      },
+      {
+        overlay: true,
+        overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%" },
+      },
     );
-    settings.roles[role] = {
-      model,
-      thinking: (thinking as (typeof THINKING)[number] | undefined) ?? settings.roles[role].thinking,
-    };
+
+    if (component?.changed) changed = true;
+
+    if (!action || action.kind === "close") {
+      break;
+    }
+
+    if (action.kind === "save") {
+      if (changed) {
+        saveOrchestrationSettings(settings);
+        ctx.ui.notify("Orchestration settings saved.", "info");
+      }
+      return changed;
+    }
+
+    if (action.kind === "pick-model") {
+      const selectedModel = await openModelPicker(ctx, {
+        title: `Model for ${action.role}`,
+        currentModel: settings.roles[action.role].model,
+      });
+      if (selectedModel && selectedModel !== settings.roles[action.role].model) {
+        settings.roles[action.role].model = selectedModel;
+        changed = true;
+      }
+    }
+  }
+
+  if (changed) {
     saveOrchestrationSettings(settings);
-    changed = true;
+    ctx.ui.notify("Orchestration settings saved.", "info");
   }
-  if (changed) ctx.ui.notify("Orchestration settings saved.", "info");
   return changed;
 }

package/extensions/pi-memory/index.ts

@@ -1,6 +1,7 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { StringEnum } from "@earendil-works/pi-ai";
 import { Type } from "typebox";
+import { openModelPicker } from "../shared/model-picker.ts";
 import {
   defaultConfig,
   MEMORY_REASONING_LEVELS,
@@ -181,22 +182,25 @@ export default function piMemory(pi: ExtensionAPI) {
           return;
         }
         const current = config.extractionModel;
-        const providers = [...new Set(available.map((model) => model.provider))].sort();
-        providers.sort((a, b) => Number(b === current.provider) - Number(a === current.provider));
-        const provider = await ctx.ui.select("Pi Memory extraction provider", providers);
-        if (!provider) return;
+        const picked = await openModelPicker(ctx, {
+          title: "Pi Memory Extraction Model",
+          currentModel: `${current.provider}/${current.model}`,
+        });
+        if (!picked) return;
 
-        const providerModels = available.filter((model) => model.provider === provider);
-        providerModels.sort((a, b) => Number(b.id === current.model && provider === current.provider) - Number(a.id === current.model && provider === current.provider) || a.id.localeCompare(b.id));
-        const modelId = await ctx.ui.select("Pi Memory extraction model", providerModels.map((model) => model.id));
-        if (!modelId) return;
-        const model = providerModels.find((candidate) => candidate.id === modelId)!;
+        const [provider, ...rest] = picked.split("/");
+        const modelId = rest.join("/");
+        const model = available.find((candidate) => candidate.provider === provider && candidate.id === modelId);
+        if (!model) {
+          ctx.ui.notify(`Model ${picked} is not available.`, "error");
+          return;
+        }
 
         const levels = model.reasoning ? [...MEMORY_REASONING_LEVELS] : ["off" as const];
         levels.sort((a, b) => Number(b === current.reasoning) - Number(a === current.reasoning));
-        const reasoning = await ctx.ui.select("Pi Memory extraction reasoning", levels);
+        const reasoning = levels.length > 1 ? await ctx.ui.select("Pi Memory extraction reasoning", levels) : "off";
         if (!reasoning) return;
-        selected = { provider, model: modelId, reasoning: reasoning as MemoryReasoningLevel };
+        selected = { provider: provider!, model: modelId, reasoning: reasoning as MemoryReasoningLevel };
       }
 
       config.extractionModel = selected;

package/extensions/shared/README.md

@@ -9,6 +9,7 @@ Internal runtime utilities used by more than one extension. This directory is no
 - `child-session.ts` owns trust-aware child resources and bounded session shutdown.
 - `context-utilization.ts` formats model-context usage and capacity.
 - `dashboard-state.ts` keeps list selection stable as live rows change.
+- `model-picker.ts` provides a searchable, fuzzy-filtered model selection overlay with provider grouping, display metadata, context sizes, and keyboard navigation.
 - `settlement-delivery.ts` coordinates asynchronous output in a private package-wide queue and starts one custom-result turn at Pi's safe idle edge, guaranteeing model-visible context without user-authored or follow-up rendering.
 - `tool-call-timeout.ts` applies cancellation-aware execution limits to registered tools.
 - `tool-card.ts` provides compact lifecycle call/result cards with expandable tool output.

package/extensions/shared/model-picker.ts

@@ -0,0 +1,288 @@
+import type { ExtensionContext, KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import {
+  fuzzyFilter,
+  Input,
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  type TUI,
+} from "@earendil-works/pi-tui";
+import { frameBottom, frameTop, framedRow, joinSides, padLine } from "./tui-dashboard.ts";
+
+export type ModelPickerItem = {
+  provider: string;
+  id: string;
+  name?: string;
+  contextWindow?: number;
+  reasoning?: boolean;
+  isCurrent?: boolean;
+  description?: string;
+  value?: string;
+};
+
+export type ModelPickerOptions = {
+  title?: string;
+  currentModel?: string;
+  items?: ModelPickerItem[];
+  extraChoices?: { id: string; label: string; description?: string; value?: string }[];
+};
+
+function formatContextSize(tokens?: number): string {
+  if (!tokens || tokens <= 0) return "";
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(tokens % 1_000_000 === 0 ? 0 : 1)}M ctx`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k ctx`;
+  return `${tokens} ctx`;
+}
+
+export class ModelPickerComponent {
+  private readonly tui: TUI;
+  private readonly theme: Theme;
+  private readonly keys: KeybindingsManager;
+  private readonly done: (result: string | undefined) => void;
+  private readonly allItems: ModelPickerItem[];
+  private readonly title: string;
+  private readonly searchInput: Input;
+
+  private filteredItems: ModelPickerItem[];
+  private selected = 0;
+  private closed = false;
+
+  constructor(
+    tui: TUI,
+    theme: Theme,
+    keys: KeybindingsManager,
+    options: ModelPickerOptions,
+    items: ModelPickerItem[],
+    done: (result: string | undefined) => void,
+  ) {
+    this.tui = tui;
+    this.theme = theme;
+    this.keys = keys;
+    this.done = done;
+    this.allItems = items;
+    this.filteredItems = [...items];
+    this.title = options.title ?? "Select Model";
+    this.searchInput = new Input();
+
+    // If current model is present, highlight its index initially
+    const currentIndex = this.filteredItems.findIndex((item) => item.isCurrent);
+    if (currentIndex >= 0) this.selected = currentIndex;
+  }
+
+  private close(result: string | undefined) {
+    if (this.closed) return;
+    this.closed = true;
+    this.done(result);
+  }
+
+  dispose() {
+    this.closed = true;
+  }
+
+  invalidate() {}
+
+  private refilter() {
+    const query = this.searchInput.getValue();
+    if (!query.trim()) {
+      this.filteredItems = [...this.allItems];
+    } else {
+      this.filteredItems = fuzzyFilter(this.allItems, query, (item) =>
+        `${item.provider} ${item.id} ${item.name ?? ""} ${item.description ?? ""}`,
+      );
+    }
+    this.selected = Math.max(0, Math.min(this.selected, this.filteredItems.length - 1));
+  }
+
+  handleInput(data: string) {
+    if (matchesKey(data, Key.escape)) {
+      this.close(undefined);
+      return;
+    }
+
+    if (matchesKey(data, Key.return) || matchesKey(data, Key.enter)) {
+      const selectedItem = this.filteredItems[this.selected];
+      if (selectedItem) {
+        this.close(selectedItem.value ?? (selectedItem.provider === "special" ? selectedItem.id : `${selectedItem.provider}/${selectedItem.id}`));
+      } else {
+        this.close(undefined);
+      }
+      return;
+    }
+
+    if (matchesKey(data, Key.up) || matchesKey(data, Key.ctrl("p"))) {
+      this.selected = Math.max(0, this.selected - 1);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.down) || matchesKey(data, Key.ctrl("n"))) {
+      this.selected = Math.min(Math.max(0, this.filteredItems.length - 1), this.selected + 1);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.pageUp)) {
+      const pageSize = Math.max(1, (this.tui.terminal.rows || 30) - 8);
+      this.selected = Math.max(0, this.selected - pageSize);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, Key.pageDown)) {
+      const pageSize = Math.max(1, (this.tui.terminal.rows || 30) - 8);
+      this.selected = Math.min(Math.max(0, this.filteredItems.length - 1), this.selected + pageSize);
+      this.tui.requestRender();
+      return;
+    }
+
+    // Pass character/editing input to the search box
+    const previous = this.searchInput.getValue();
+    this.searchInput.handleInput(data);
+    if (this.searchInput.getValue() !== previous) {
+      this.refilter();
+    }
+    this.tui.requestRender();
+  }
+
+  render(width: number): string[] {
+    const rows = this.tui.terminal.rows || 30;
+    const bodyHeight = Math.max(8, rows - 6);
+    const innerWidth = Math.max(1, width - 2);
+
+    const lines: string[] = [];
+
+    // Search header line
+    const searchVal = this.searchInput.getValue();
+    const prompt = this.theme.fg("accent", "❯ ");
+    const placeholder = searchVal ? "" : this.theme.fg("dim", "type to filter models…");
+    const inputContent = `${prompt}${searchVal}${placeholder}`;
+
+    // Compute scroll window for items
+    const listHeight = Math.max(4, bodyHeight - 2); // 2 rows for search bar and separator
+    const total = this.filteredItems.length;
+    let start = 0;
+    if (total > listHeight) {
+      start = Math.min(
+        Math.max(0, this.selected - Math.floor(listHeight / 2)),
+        total - listHeight,
+      );
+    }
+    const visible = this.filteredItems.slice(start, start + listHeight);
+
+    const bodyLines: string[] = [
+      ` ${padLine(inputContent, innerWidth - 2)}`,
+      this.theme.fg("borderMuted", "─".repeat(innerWidth)),
+    ];
+
+    if (!visible.length) {
+      bodyLines.push(` ${this.theme.fg("muted", "No models match your search.")}`);
+    } else {
+      for (const [offset, item] of visible.entries()) {
+        const index = start + offset;
+        const isSel = index === this.selected;
+        const marker = isSel ? this.theme.fg("accent", "❯") : item.isCurrent ? this.theme.fg("success", "✓") : " ";
+
+        const providerBadge = item.provider === "special"
+          ? ""
+          : `${this.theme.fg("dim", "[")}${this.theme.fg("muted", item.provider)}${this.theme.fg("dim", "]")} `;
+
+        const nameText = item.name && item.name !== item.id
+          ? `${item.name} ${this.theme.fg("dim", `(${item.id})`)}`
+          : item.id;
+
+        const mainText = isSel
+          ? this.theme.fg("accent", this.theme.bold(nameText))
+          : this.theme.fg("text", nameText);
+
+        const metaParts: string[] = [];
+        if (item.contextWindow) metaParts.push(formatContextSize(item.contextWindow));
+        if (item.reasoning) metaParts.push("⚡ thinking");
+        if (item.description) metaParts.push(item.description);
+        const metaText = metaParts.length ? this.theme.fg("dim", metaParts.join(" · ")) : "";
+
+        const rowLeft = ` ${marker} ${providerBadge}${mainText}`;
+        const row = joinSides(rowLeft, metaText ? `${metaText} ` : " ", innerWidth);
+        bodyLines.push(isSel ? this.theme.bg("selectedBg", row) : row);
+      }
+    }
+
+    // Add scroll indicators if list overflows
+    if (start > 0 && bodyLines.length > 2) {
+      bodyLines[2] = ` ${this.theme.fg("dim", `↑ ${start} more`)}`;
+    }
+    const below = total - start - visible.length;
+    if (below > 0 && bodyLines.length > 2) {
+      bodyLines[bodyLines.length - 1] = ` ${this.theme.fg("dim", `↓ ${below} more`)}`;
+    }
+
+    // Top status line and framing
+    const status = `${this.filteredItems.length} model${this.filteredItems.length === 1 ? "" : "s"}`;
+    lines.push(
+      joinSides(`  ${this.theme.fg("accent", this.theme.bold("◆ " + this.title.toUpperCase()))}`, `${this.theme.fg("muted", status)}  `, width),
+      frameTop(this.theme, width, this.title),
+    );
+
+    // Frame each line
+    for (let i = 0; i < bodyHeight; i++) {
+      lines.push(framedRow(this.theme, bodyLines[i] ?? "", width));
+    }
+
+    lines.push(frameBottom(this.theme, width));
+    lines.push(truncateToWidth(this.theme.fg("dim", "  ↑/↓ navigate · enter select · esc cancel"), width, ""));
+
+    return lines.map((line) => truncateToWidth(line, width, ""));
+  }
+}
+
+export function buildModelPickerItems(
+  ctx: ExtensionContext,
+  options: ModelPickerOptions = {},
+): ModelPickerItem[] {
+  const items: ModelPickerItem[] = [];
+
+  if (options.extraChoices) {
+    for (const choice of options.extraChoices) {
+      items.push({
+        provider: "special",
+        id: choice.id,
+        name: choice.label,
+        description: choice.description,
+        value: choice.value ?? choice.id,
+        isCurrent: options.currentModel === choice.id || options.currentModel === choice.value,
+      });
+    }
+  }
+
+  const all = ctx.modelRegistry.getAll();
+  for (const model of all) {
+    const fullId = `${model.provider}/${model.id}`;
+    items.push({
+      provider: model.provider,
+      id: model.id,
+      name: model.name,
+      contextWindow: model.contextWindow,
+      reasoning: model.reasoning,
+      value: fullId,
+      isCurrent: options.currentModel === fullId || options.currentModel === model.id,
+    });
+  }
+
+  return items;
+}
+
+export async function openModelPicker(
+  ctx: ExtensionContext,
+  options: ModelPickerOptions = {},
+): Promise<string | undefined> {
+  const items = options.items ?? buildModelPickerItems(ctx, options);
+
+  return ctx.ui.custom<string | undefined>(
+    (tui, theme, keys, done) =>
+      new ModelPickerComponent(tui, theme, keys, options, items, done),
+    {
+      overlay: true,
+      overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%" },
+    },
+  );
+}

package/extensions/smart-compaction/index.ts

@@ -5,6 +5,7 @@ import type {
   ExtensionUIContext,
   SessionBeforeCompactEvent,
 } from "@earendil-works/pi-coding-agent";
+import { openModelPicker } from "../shared/model-picker.ts";
 import {
   loadSmartCompactionConfig,
   saveSmartCompactionConfig,
@@ -110,25 +111,21 @@ export function createSmartCompactionExtension(options: SmartCompactionExtension
         }
 
         if (cmdCtx.hasUI) {
-          const available = cmdCtx.modelRegistry.getAvailable();
-          const choices = [
-            `inherit (active session model: ${cmdCtx.model ? `${cmdCtx.model.provider}/${cmdCtx.model.id}` : "none"})`,
-            ...available.map((m) => `${m.provider}/${m.id}`),
-          ];
-
-          const selected = await cmdCtx.ui.select(
-            `Select Compaction Model (current: ${config.model})`,
-            choices,
-          );
+          const selected = await openModelPicker(cmdCtx as never, {
+            title: `Compaction Model (current: ${config.model})`,
+            currentModel: config.model,
+            extraChoices: [
+              {
+                id: "inherit",
+                label: "inherit",
+                description: `Use active session model (${cmdCtx.model ? `${cmdCtx.model.provider}/${cmdCtx.model.id}` : "none"})`,
+              },
+            ],
+          });
 
           if (!selected) return;
 
-          if (selected.startsWith("inherit")) {
-            config.model = "inherit";
-          } else {
-            config.model = selected;
-          }
-
+          config.model = selected;
           saveSmartCompactionConfig(config, options.configFile);
           updateStatus();
           cmdCtx.ui.notify(`Compaction model set to: ${config.model}`, "info");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shariq-pi-extensions",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "description": "Cross-platform extension suite for the Pi coding agent.",
   "license": "MIT",
   "author": "Shariq Riaz",