@d3ara1n/pi-command-palette 0.5.3 → 0.7.0

package/README.md

@@ -34,12 +34,16 @@ Or add to `~/.pi/agent/settings.json`:
 |----------|--------|
 | `Ctrl+Shift+P` _(default, configurable)_ | Open command palette |
 
-The palette lists:
+The palette opens as a single macOS-launcher-style overlay with nested pages. The root page mixes leaves and sub-pages: built-in actions and the model selector sit directly on the root, while the remaining categories open as sub-pages — selecting one with **Enter** replaces the current list in the same overlay instead of opening a second overlay. Press **Backspace** with an empty search field to return to the parent page; press **Esc** to close the palette immediately.
 
-- **Built-in actions** — curated shortcuts for common operations (detailed below)
-- **Native commands** — entries registered by other extensions that run a callback directly (see below)
-- **Extension commands** — All registered `/command` entries
-- **Skills & Templates** — Skill commands and prompt templates
+The root page lists:
+
+- **Built-in actions** — curated shortcuts for common operations, shown directly on the root page so urgent entries like Restore never hide behind a sub-page (detailed below)
+- **Models** — a sub-page listing every model with a configured API key (see below)
+- **Extension Actions** — a sub-page of entries registered by other extensions that run a callback directly (see below)
+- **Commands** / **Skills** / **Templates** — sub-pages for all registered `/command` entries, installed skills, and prompt templates; entries are labeled with their bare `/name` since the breadcrumb already names the category
+
+Use **↑/↓** to move through entries and **←/→** to edit the search cursor. Search is fuzzy within the current page and updates as you type; searching the root page also matches entries from every sub-page, with each match's category shown next to its description. Backspace uses the normal text-editing behavior while the query is non-empty.
 
 ### Built-in actions
 
@@ -49,7 +53,6 @@ Built-in actions are grouped by how they run:
 
 | Action | What it does |
 |--------|--------------|
-| Model: Switch Model | Open a model selector overlay; switch instantly |
 | Session: Compact | Compact the conversation right away |
 | Editor: Copy Content | Copy current editor text to the clipboard |
 | Editor: Clear Content | Clear the editor, saving the current text to the restore buffer |
@@ -90,7 +93,7 @@ When a command replaces your editor text, or you run **Editor: Clear Content**,
 
 ### Model selector
 
-The "Model: Switch Model" action opens a secondary overlay listing all models with configured API keys. Select one to switch instantly — no need to go through `/model` or `Ctrl+P`.
+The "Models" entry opens a model page inside the same overlay. Models are loaded when the page is first entered, then can be searched and selected without stacking another overlay.
 
 **Scoped models float to the top**, marked with a ★ (favorite) prefix. "Scoped" here means the same set pi uses for its built-in selector's scoped tab and `Ctrl+P` cycling — the `enabledModels` patterns in your `settings.json` (project `.pi/settings.json` overrides global `~/.pi/agent/settings.json`). Everything else follows alphabetically. Filtering preserves that boundary too — scoped matches stay above the rest while you type, rather than collapsing into one score-ordered list. If no scope is configured, the list is a plain alphabetical roster — nothing breaks.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3ara1n/pi-command-palette",
-  "version": "0.5.3",
+  "version": "0.7.0",
   "type": "module",
   "description": "Global command palette for pi — press Ctrl+Shift+P to search and run commands from anywhere",
   "main": "src/index.ts",

package/src/index.test.ts

@@ -1,37 +1,22 @@
 /**
- * Regression tests for model reference parsing, the partitioned fuzzy
- * filter that keeps scoped models on top while searching, and the palette
- * item ordering that keeps built-ins → native commands → editor-fill entries.
+ * Regression tests for the partitioned fuzzy filter that keeps scoped
+ * models on top while searching, and the palette item ordering that keeps
+ * built-ins → native commands → editor-fill entries.
  */
 
 import assert from "node:assert/strict";
 import { after, test } from "node:test";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { paletteCommandRegistry } from "@d3ara1n/pi-command-palette-core";
-import { buildPaletteItems, parseModelRef, partitionedFuzzyFilter } from "./index.ts";
+import { buildPaletteItems, partitionedFuzzyFilter } from "./index.ts";
 
 /** Minimal fake of the pi API surface buildPaletteItems uses. */
-function fakePi(commands: { name: string; description?: string }[]): ExtensionAPI {
+function fakePi(
+  commands: { name: string; description?: string; source?: "extension" | "skill" | "template" }[],
+): ExtensionAPI {
   return { getCommands: () => commands } as unknown as ExtensionAPI;
 }
 
-test("parseModelRef splits provider and model at the first slash", () => {
-  assert.deepEqual(parseModelRef("anthropic/claude-sonnet"), {
-    provider: "anthropic",
-    modelId: "claude-sonnet",
-  });
-  assert.deepEqual(parseModelRef("openrouter/vendor/model/with/slashes"), {
-    provider: "openrouter",
-    modelId: "vendor/model/with/slashes",
-  });
-});
-
-test("parseModelRef preserves empty provider or model segments", () => {
-  assert.equal(parseModelRef("model-without-provider"), undefined);
-  assert.deepEqual(parseModelRef("/model"), { provider: "", modelId: "model" });
-  assert.deepEqual(parseModelRef("provider/"), { provider: "provider", modelId: "" });
-});
-
 // ── partitionedFuzzyFilter ─────────────────────────────────────────
 
 test("partitionedFuzzyFilter concatenates partitions unchanged for empty query", () => {
@@ -108,7 +93,7 @@ test("buildPaletteItems orders built-ins above native commands above editor fill
   });
 
   const items = buildPaletteItems(
-    fakePi([{ name: "some-command", description: "extension command" }]),
+    fakePi([{ name: "some-command", description: "extension command", source: "extension" }]),
   );
 
   const ranks = items.map((item) =>
@@ -122,6 +107,14 @@ test("buildPaletteItems orders built-ins above native commands above editor fill
   assert.ok(native);
   assert.equal(native.label, "Peek: Ask This Session");
   assert.equal(native.action.type, "native");
+
+  // Command/skill/template labels carry no category prefix — the page
+  // breadcrumb already names the category, and root search shows it via
+  // the description decoration.
+  const cmd = items.find((item) => item.value === "cmd:some-command");
+  assert.ok(cmd);
+  assert.equal(cmd.label, "/some-command");
+  assert.equal(cmd.category, "Command");
 });
 
 test("buildPaletteItems picks up native commands registered after load", () => {

package/src/index.ts

@@ -5,9 +5,11 @@
  * regardless of whether the editor has content.
  *
  * Features:
- * - Lists extension commands, skills, and prompt templates (from pi.getCommands())
- * - Built-in actions: model selector, new session, compact, reload
- * - Fuzzy search via SelectList
+ * - Single overlay with nested pages: built-in actions on the root page,
+ *   extension actions / commands / skills / templates as sub-pages, models
+ *   loaded on first visit
+ * - Fuzzy search within the current page; searching the root page matches
+ *   every leaf across sub-pages
  * - Floating overlay on top of existing content
  * - Saves editor text before overwriting; offers "Restore" in palette
  * - Clear editor into the restore buffer
@@ -20,10 +22,12 @@ import {
   Container,
   type SelectItem,
   fuzzyFilter,
+  Input,
   Key,
   matchesKey,
   SelectList,
   Text,
+  type TUI,
 } from "@earendil-works/pi-tui";
 import { resolveShortcutKey } from "./config.ts";
 
@@ -32,7 +36,7 @@ import { resolveShortcutKey } from "./config.ts";
 type CommandAction =
   | { type: "editor"; text: string }
   | { type: "native"; id: string }
-  | { type: "model-select" }
+  | { type: "model"; provider: string; modelId: string }
   | { type: "compact" }
   | { type: "reload" }
   | { type: "restore" }
@@ -58,10 +62,9 @@ let savedEditorText: string | null = null;
  * non-built-in entries always sort after built-ins.
  */
 const BUILTIN_ORDER: Record<string, number> = {
-  __model_select: 0,
-  __restore: 1,
-  __copy_editor: 2,
-  __clear_editor: 3,
+  __restore: 0,
+  __copy_editor: 1,
+  __clear_editor: 2,
 };
 
 // ── Helpers ────────────────────────────────────────────────────────
@@ -98,14 +101,6 @@ export function buildPaletteItems(pi: ExtensionAPI): PaletteItem[] {
   }
 
   // ── Built-in actions ──────────────────────────────────────────
-  items.push({
-    value: "__model_select",
-    label: "Model: Switch Model",
-    description: "Select a model from the registry",
-    category: "Built-in",
-    action: { type: "model-select" },
-  });
-
   items.push({
     value: "__new_session",
     label: "Session: New",
@@ -193,7 +188,7 @@ export function buildPaletteItems(pi: ExtensionAPI): PaletteItem[] {
 
     items.push({
       value: `cmd:${cmd.name}`,
-      label: `${sourceLabel}: /${cmd.name}`,
+      label: `/${cmd.name}`,
       description: cmd.description ?? "",
       category: sourceLabel,
       action: { type: "editor", text: editorText },
@@ -217,22 +212,6 @@ export function buildPaletteItems(pi: ExtensionAPI): PaletteItem[] {
   return items;
 }
 
-// ── Model selector ─────────────────────────────────────────────────
-
-const STAR = "★ ";
-
-/**
- * @internal — exported for testing; parses the selector's `provider/model-id` values.
- */
-export function parseModelRef(modelRef: string): { provider: string; modelId: string } | undefined {
-  const slash = modelRef.indexOf("/");
-  if (slash === -1) return undefined;
-  return {
-    provider: modelRef.slice(0, slash),
-    modelId: modelRef.slice(slash + 1),
-  };
-}
-
 // ── Partitioned fuzzy filter ───────────────────────────────────────
 
 /**
@@ -257,231 +236,254 @@ export function partitionedFuzzyFilter<T>(
   return [...fuzzyFilter(primary, query, getText), ...fuzzyFilter(secondary, query, getText)];
 }
 
-async function showModelSelector(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
-  let models: Awaited<ReturnType<typeof ctx.modelRegistry.getAvailable>>;
-  try {
-    models = await ctx.modelRegistry.getAvailable();
-  } catch {
-    ctx.ui.notify("Cannot enumerate models. Use Ctrl+L instead.", "warning");
-    return;
-  }
+// ── Command palette overlay ────────────────────────────────────────
 
-  if (models.length === 0) {
-    ctx.ui.notify("No models available.", "warning");
-    return;
-  }
+interface PageEntry {
+  type: "page";
+  value: string;
+  label: string;
+  description: string;
+  page: PalettePage;
+}
 
-  const scopedIds = new Set(ctx.scopedModels.map((s) => `${s.model.provider}/${s.model.id}`));
+interface PalettePage {
+  title: string;
+  items: Array<PaletteItem | PageEntry>;
+}
 
-  // Build each model's SelectItem alongside whether it's scope-pinned, then
-  // sort into two stable groups — scoped first (★), then the rest —
-  // alphabetical within each. We keep the groups as separate arrays so the
-  // search pipeline below can re-apply the same partitioning.
-  const decorated = models
-    .map((m) => {
-      const value = `${m.provider}/${m.id}`;
-      const scoped = scopedIds.has(value);
-      return {
-        scoped,
-        item: {
-          value,
+function pageItem(value: string, label: string, description: string, page: PalettePage): PageEntry {
+  return { type: "page", value, label, description, page };
+}
+
+async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
+  if (ctx.mode !== "tui") return;
+
+  const paletteItems = buildPaletteItems(pi);
+  const leaves = (category: string) =>
+    paletteItems.filter((item) => item.category === category);
+  const leafPage = (title: string, items: PaletteItem[]): PalettePage => ({ title, items });
+
+  const builtins = leaves("Built-in");
+  const native = leaves("Native");
+  const commands = leaves("Command");
+  const skills = leaves("Skill");
+  const templates = leaves("Template");
+  // Leaves reachable only through sub-pages — merged into the root list
+  // while searching there. Built-in leaves live on the root page itself.
+  const subLeaves = paletteItems.filter((item) => item.category !== "Built-in");
+  const modelPage: PalettePage = { title: "Models", items: [] };
+  const rootItems: PalettePage["items"] = [
+    pageItem("models", "Models", "Switch the active model", modelPage),
+    // Built-in actions sit directly on the root page so urgent entries like
+    // Restore are visible without descending into a sub-page.
+    ...builtins,
+    ...(native.length ? [pageItem("native", "Extension Actions", "Actions provided by extensions", leafPage("Extension Actions", native))] : []),
+    ...(commands.length ? [pageItem("commands", "Commands", "Extension slash commands", leafPage("Commands", commands))] : []),
+    ...(skills.length ? [pageItem("skills", "Skills", "Installed skills", leafPage("Skills", skills))] : []),
+    ...(templates.length ? [pageItem("templates", "Templates", "Prompt templates", leafPage("Templates", templates))] : []),
+  ];
+  const root: PalettePage = { title: "Command Palette", items: rootItems };
+
+  // Captured from the overlay factory so palette actions can request a
+  // render after mutating editor state (see the action switch below).
+  let tuiRef: TUI | undefined;
+
+  /** Scoped-model marker prefix (★). */
+  const STAR = "★ ";
+
+  /**
+   * Build the model list for the Models page: scoped models (★) first, then
+   * the rest — alphabetical within each group. Reads the registry
+   * synchronously; throws if enumeration fails.
+   */
+  function buildModelItems(): PaletteItem[] {
+    const scopedIds = new Set(ctx.scopedModels.map((s) => `${s.model.provider}/${s.model.id}`));
+    return ctx.modelRegistry
+      .getAvailable()
+      .map((m): PaletteItem => {
+        const scoped = scopedIds.has(`${m.provider}/${m.id}`);
+        return {
+          value: `${m.provider}/${m.id}`,
           label: scoped ? `${STAR}${m.name}` : m.name,
           description: m.provider,
-        } satisfies SelectItem,
-      };
-    })
-    .sort((a, b) => {
-      if (a.scoped !== b.scoped) return a.scoped ? -1 : 1;
-      return a.item.label.localeCompare(b.item.label);
-    });
-
-  // Scoped models (★) stay above the rest whether browsing or filtering: each
-  // group is filtered and ranked independently, then concatenated, so a search
-  // never merges the two into one score-ordered list.
-  const scopedItems: SelectItem[] = decorated.filter((d) => d.scoped).map((d) => d.item);
-  const otherItems: SelectItem[] = decorated.filter((d) => !d.scoped).map((d) => d.item);
-  const items: SelectItem[] = [...scopedItems, ...otherItems];
+          category: "Models",
+          action: { type: "model", provider: m.provider, modelId: m.id },
+        };
+      })
+      .sort((a, b) => {
+        const aScoped = scopedIds.has(a.value);
+        const bScoped = scopedIds.has(b.value);
+        if (aScoped !== bScoped) return aScoped ? -1 : 1;
+        return a.label.localeCompare(b.label);
+      });
+  }
 
-  const result = await ctx.ui.custom<string | null>(
+  const result = await ctx.ui.custom<PaletteItem | null>(
     (tui, theme, _kb, done) => {
+      tuiRef = tui;
       const container = new Container();
-      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-      container.addChild(new Text(theme.fg("accent", theme.bold("Switch Model")), 1, 0));
-
-      const selectList = new SelectList(items, Math.min(items.length, 12), {
+      const listHost = new Container();
+      const queryInput = new Input();
+      let focused = true;
+      const stack: Array<{ page: PalettePage; input: string; selectedValue?: string }> = [
+        { page: root, input: "" },
+      ];
+      let selectList!: SelectList;
+      let visibleItems: Array<PaletteItem | PageEntry> = [];
+
+      const listTheme = {
         selectedPrefix: (t: string) => theme.fg("accent", t),
         selectedText: (t: string) => theme.fg("accent", t),
         description: (t: string) => theme.fg("muted", t),
         scrollInfo: (t: string) => theme.fg("dim", t),
         noMatch: (t: string) => theme.fg("warning", t),
-      });
-
-      selectList.onSelect = (item) => done(item.value);
-      selectList.onCancel = () => done(null);
-
-      // Type-to-filter state
-      let query = "";
-      const queryText = new Text(theme.fg("accent", "> "), 1, 0);
+      };
 
-      function applyQuery() {
-        const filtered = partitionedFuzzyFilter(
-          scopedItems,
-          otherItems,
-          query,
-          (item: SelectItem) => `${item.label} ${item.description ?? ""}`,
-        );
-        // FRAGILE: SelectList has no public filter/setItems API, so we poke its
-        // private filteredItems directly. If pi-tui renames it, filtering breaks
-        // silently with no compile error.
-        (selectList as any).filteredItems = filtered;
-        selectList.setSelectedIndex(0);
-        queryText.setText(theme.fg("accent", `> ${query}▎`));
-        container.invalidate();
-        tui.requestRender();
+      function current() {
+        return stack[stack.length - 1]!;
       }
 
-      container.addChild(queryText);
-      container.addChild(selectList);
-      container.addChild(
-        new Text(theme.fg("dim", "type to filter • ↑↓ navigate • enter select • esc cancel"), 1, 0),
-      );
-      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-
-      return {
-        render(w: number) {
-          return container.render(w);
-        },
-        invalidate() {
-          container.invalidate();
-        },
-        handleInput(data: string) {
-          // Backspace → trim query
-          if (matchesKey(data, Key.backspace)) {
-            if (query.length > 0) {
-              query = query.slice(0, -1);
-              applyQuery();
-            }
+      function rebuild() {
+        const { page } = current();
+        const query = queryInput.getValue();
+        visibleItems =
+          page === root && query.trim() ? [...root.items, ...subLeaves] : page.items;
+        const items = visibleItems.map((item) => ({
+          value: item.value,
+          label: item.label,
+          description:
+            page === root && query.trim() && !("page" in item)
+              ? `${item.category} › ${item.description}`
+              : item.description,
+        }));
+        const getText = (item: SelectItem) => `${item.label} ${item.description ?? ""}`;
+        const filtered = query
+          ? page === modelPage
+            ? partitionedFuzzyFilter(
+                items.filter((item) => item.label.startsWith(STAR)),
+                items.filter((item) => !item.label.startsWith(STAR)),
+                query,
+                getText,
+              )
+            : fuzzyFilter(items, query, getText)
+          : items;
+        selectList = new SelectList(filtered, Math.min(Math.max(filtered.length, 1), 15), listTheme);
+        const restoredIndex = filtered.findIndex(
+          (item) => item.value === current().selectedValue,
+        );
+        if (restoredIndex >= 0) selectList.setSelectedIndex(restoredIndex);
+        listHost.clear();
+        listHost.addChild(selectList);
+        selectList.onSelect = (selected) => {
+          current().selectedValue = selected.value;
+          const item = visibleItems.find((candidate) => candidate.value === selected.value);
+          if (!item) return;
+          if (!("page" in item)) {
+            done(item);
             return;
           }
-          // Printable character → append to query
-          if (data.length === 1 && data.charCodeAt(0) >= 32) {
-            query += data;
-            applyQuery();
-            return;
+          // Entering the Models page loads the registry once per palette
+          // session; later visits reuse the cached list.
+          if (item.page === modelPage && item.page.items.length === 0) {
+            try {
+              item.page.items = buildModelItems();
+            } catch {
+              ctx.ui.notify("Cannot enumerate models. Use Ctrl+L instead.", "warning");
+              return;
+            }
+            if (item.page.items.length === 0) {
+              ctx.ui.notify("No models available.", "warning");
+              return;
+            }
           }
-          // Navigation / confirm / cancel → pass to SelectList
-          selectList.handleInput(data);
-          tui.requestRender();
-        },
-      };
-    },
-    { overlay: true },
-  );
-
-  if (!result) return;
-
-  const parsed = parseModelRef(result);
-  if (!parsed) return;
-  const { provider, modelId } = parsed;
-  const model = ctx.modelRegistry.find(provider, modelId);
-  if (model) {
-    const success = await pi.setModel(model);
-    if (success) {
-      ctx.ui.notify(`Model: ${provider}/${modelId}`, "info");
-    } else {
-      ctx.ui.notify(`No API key for ${provider}/${modelId}`, "error");
-    }
-  }
-}
-
-// ── Command palette overlay ────────────────────────────────────────
-
-async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
-  if (!ctx.hasUI) return;
-
-  const paletteItems = buildPaletteItems(pi);
-  const selectItems: SelectItem[] = paletteItems.map((item) => ({
-    value: item.value,
-    label: item.label,
-    description: item.description,
-  }));
-
-  const result = await ctx.ui.custom<PaletteItem | null>(
-    (tui, theme, _kb, done) => {
-      const container = new Container();
-      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-      container.addChild(new Text(theme.fg("accent", theme.bold("Command Palette")), 1, 0));
+          pushPage(item.page);
+        };
+        selectList.onSelectionChange = (selected) => {
+          current().selectedValue = selected.value;
+        };
+      }
 
-      const selectList = new SelectList(selectItems, Math.min(selectItems.length, 15), {
-        selectedPrefix: (t: string) => theme.fg("accent", t),
-        selectedText: (t: string) => theme.fg("accent", t),
-        description: (t: string) => theme.fg("muted", t),
-        scrollInfo: (t: string) => theme.fg("dim", t),
-        noMatch: (t: string) => theme.fg("warning", t),
-      });
+      // Breadcrumb title: updated in place whenever the page stack changes.
+      const titleText = new Text(theme.fg("accent", theme.bold(root.title)), 1, 0);
 
-      selectList.onSelect = (item) => {
-        const paletteItem = paletteItems.find((p) => p.value === item.value);
-        done(paletteItem ?? null);
-      };
-      selectList.onCancel = () => done(null);
+      function updateTitle() {
+        titleText.setText(
+          theme.fg("accent", theme.bold(stack.map((frame) => frame.page.title).join(" › "))),
+        );
+      }
 
-      // Type-to-filter state
-      let query = "";
-      const queryText = new Text(theme.fg("accent", "> "), 1, 0);
+      function pushPage(page: PalettePage) {
+        current().input = queryInput.getValue();
+        stack.push({ page, input: "" });
+        queryInput.setValue("");
+        updateTitle();
+        rebuild();
+        tui.requestRender();
+      }
 
-      function applyQuery() {
-        const filtered = query
-          ? fuzzyFilter(
-              selectItems,
-              query,
-              (item: SelectItem) => `${item.label} ${item.description ?? ""}`,
-            )
-          : selectItems;
-        // FRAGILE: see model selector — depends on SelectList.filteredItems.
-        (selectList as any).filteredItems = filtered;
-        selectList.setSelectedIndex(0);
-        queryText.setText(theme.fg("accent", `> ${query}▎`));
-        container.invalidate();
+      function popPage() {
+        if (stack.length <= 1) return;
+        stack.pop();
+        queryInput.setValue(current().input);
+        updateTitle();
+        rebuild();
         tui.requestRender();
       }
 
-      container.addChild(queryText);
-      container.addChild(selectList);
+      rebuild();
+      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+      container.addChild(titleText);
+      container.addChild(queryInput);
+      container.addChild(listHost);
       container.addChild(
-        new Text(theme.fg("dim", "type to filter • ↑↓ navigate • enter select • esc cancel"), 1, 0),
+        new Text(theme.fg("dim", "↑↓ navigate • enter open/select • backspace go back • esc close"), 1, 0),
       );
       container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
 
       return {
+        get focused() {
+          return focused;
+        },
+        set focused(value: boolean) {
+          focused = value;
+          queryInput.focused = value;
+        },
         render(w: number) {
           return container.render(w);
         },
         invalidate() {
           container.invalidate();
+          queryInput.invalidate();
+          selectList.invalidate();
         },
         handleInput(data: string) {
-          // Backspace → trim query
-          if (matchesKey(data, Key.backspace)) {
-            if (query.length > 0) {
-              query = query.slice(0, -1);
-              applyQuery();
-            }
+          if (matchesKey(data, Key.escape)) {
+            done(null);
             return;
           }
-          // Printable character → append to query
-          if (data.length === 1 && data.charCodeAt(0) >= 32) {
-            query += data;
-            applyQuery();
+          if (matchesKey(data, Key.backspace) && queryInput.getValue().length === 0) {
+            popPage();
             return;
           }
-          // Navigation / confirm / cancel → pass to SelectList
-          selectList.handleInput(data);
+          if (
+            matchesKey(data, Key.up) ||
+            matchesKey(data, Key.down) ||
+            matchesKey(data, Key.enter)
+          ) {
+            selectList.handleInput(data);
+          } else {
+            const before = queryInput.getValue();
+            queryInput.handleInput(data);
+            if (queryInput.getValue() !== before) {
+              current().selectedValue = undefined;
+              rebuild();
+            }
+          }
           tui.requestRender();
         },
       };
     },
-    { overlay: true },
+    { overlay: true, overlayOptions: { width: "70%", maxHeight: "80%", minWidth: 50 } },
   );
 
   if (!result) return;
@@ -519,8 +521,15 @@ async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Prom
       ctx.ui.setEditorText(action.text);
       break;
     }
-    case "model-select": {
-      await showModelSelector(pi, ctx);
+    case "model": {
+      const model = ctx.modelRegistry.find(action.provider, action.modelId);
+      if (model) {
+        const success = await pi.setModel(model);
+        ctx.ui.notify(
+          success ? `Model: ${action.provider}/${action.modelId}` : `No API key for ${action.provider}/${action.modelId}`,
+          success ? "info" : "error",
+        );
+      }
       break;
     }
     case "compact": {
@@ -562,6 +571,11 @@ async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Prom
       break;
     }
   }
+
+  // The overlay close renders the underlying UI before this promise
+  // resolves, and setEditorText mutates state without requesting a render —
+  // without this, the editor shows stale text until the next keypress.
+  tuiRef?.requestRender();
 }
 
 // ── Extension entry point ──────────────────────────────────────────