@d3ara1n/pi-command-palette 0.5.2 → 0.6.0

package/README.md

@@ -1,5 +1,7 @@
 # pi-command-palette
 
+[![npm version](https://img.shields.io/npm/v/@d3ara1n/pi-command-palette)](https://www.npmjs.com/package/@d3ara1n/pi-command-palette) [![npm downloads](https://img.shields.io/npm/dm/@d3ara1n/pi-command-palette)](https://www.npmjs.com/package/@d3ara1n/pi-command-palette) [![license](https://img.shields.io/npm/l/@d3ara1n/pi-command-palette)](https://www.npmjs.com/package/@d3ara1n/pi-command-palette)
+
 Global command palette for [Pi Coding Agent](https://pi.dev) — press **Ctrl+Shift+P** to search and run commands from anywhere.
 
 ## Why?
@@ -8,7 +10,7 @@ Pi's slash commands (`/model`, `/compact`, extension commands, etc.) only work w
 
 ## Dependencies
 
-None.
+- [`@d3ara1n/pi-command-palette-core`](../pi-command-palette-core) — shared registry for native palette commands (pure npm library, installed automatically)
 
 ## Installation
 
@@ -32,11 +34,17 @@ Or add to `~/.pi/agent/settings.json`:
 |----------|--------|
 | `Ctrl+Shift+P` _(default, configurable)_ | Open command palette |
 
+The palette opens as a single macOS-launcher-style overlay with nested pages. Selecting a category 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.
+
 The palette lists:
 
-- **Built-in actions** — curated shortcuts for common operations (detailed below)
-- **Extension commands** — All registered `/command` entries
-- **Skills & Templates** — Skill commands and prompt templates
+- **Built-in Actions** — curated shortcuts for common operations (detailed below)
+- **Extension Actions** — entries registered by other extensions that run a callback directly (see below)
+- **Commands** — all registered `/command` entries
+- **Skills** — installed skill commands
+- **Templates** — prompt templates
+
+Use **↑/↓** to move through entries and **←/→** to edit the search cursor. Search is fuzzy within the current page and updates as you type; Backspace uses the normal text-editing behavior while the query is non-empty.
 
 ### Built-in actions
 
@@ -64,13 +72,30 @@ Built-in actions are grouped by how they run:
 
 > Pi ships with more built-in slash commands (e.g. `/export`, `/share`, `/name`, `/settings`). This palette only surfaces a curated subset above — for the rest, type them directly into the editor.
 
+### Native commands from other extensions
+
+Extensions built on [`@d3ara1n/pi-command-palette-core`](../pi-command-palette-core) can register palette entries backed by a **direct callback** instead of a `/command` editor fill. They appear above the extension-command entries, and selecting one runs the callback in place — your editor text is never touched, saved, or restored:
+
+```ts
+import { paletteCommandRegistry } from "@d3ara1n/pi-command-palette-core";
+
+paletteCommandRegistry.register({
+  id: "my-plugin:do-thing",
+  label: "My Plugin: Do the Thing",
+  description: "Runs immediately, without touching the editor",
+  run: (pi, ctx) => { /* ... */ },
+});
+```
+
+The registry is read every time the palette opens, so commands can be registered and unregistered at any time. Failures inside `run` are caught and surfaced as an error notification. See the [core package](../pi-command-palette-core) for the full API.
+
 ### Editor text preservation
 
 When a command replaces your editor text, or you run **Editor: Clear Content**, the original content is saved and a **Restore: Previous Editor Text** entry appears at the top of the palette. Select it to get your text back.
 
 ### 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 "Model: Switch Model" 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,9 +1,12 @@
 {
   "name": "@d3ara1n/pi-command-palette",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "description": "Global command palette for pi — press Ctrl+Shift+P to search and run commands from anywhere",
   "main": "src/index.ts",
+  "dependencies": {
+    "@d3ara1n/pi-command-palette-core": "*"
+  },
   "keywords": [
     "pi-package",
     "pi",

package/src/index.test.ts

@@ -1,11 +1,19 @@
 /**
- * Regression tests for model reference parsing and the partitioned fuzzy
- * filter that keeps scoped models on top while searching.
+ * 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.
  */
 
 import assert from "node:assert/strict";
-import { test } from "node:test";
-import { parseModelRef, partitionedFuzzyFilter } from "./index.ts";
+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";
+
+/** Minimal fake of the pi API surface buildPaletteItems uses. */
+function fakePi(commands: { name: string; description?: string }[]): ExtensionAPI {
+  return { getCommands: () => commands } as unknown as ExtensionAPI;
+}
 
 test("parseModelRef splits provider and model at the first slash", () => {
   assert.deepEqual(parseModelRef("anthropic/claude-sonnet"), {
@@ -64,7 +72,10 @@ test("partitionedFuzzyFilter drops non-matches independently per partition", ()
 
   const result = partitionedFuzzyFilter(primary, secondary, "keep", getText);
 
-  assert.deepEqual(result.map((m) => m.label), ["keep-scoped", "keep-other"]);
+  assert.deepEqual(
+    result.map((m) => m.label),
+    ["keep-scoped", "keep-other"],
+  );
 });
 
 test("partitionedFuzzyFilter returns only primary matches when secondary has none", () => {
@@ -74,5 +85,50 @@ test("partitionedFuzzyFilter returns only primary matches when secondary has non
 
   const result = partitionedFuzzyFilter(primary, secondary, "son", getText);
 
-  assert.deepEqual(result.map((m) => m.label), ["sonnet"]);
+  assert.deepEqual(
+    result.map((m) => m.label),
+    ["sonnet"],
+  );
+});
+
+// ── buildPaletteItems ordering ─────────────────────────────────────
+
+const idsBefore = new Set(paletteCommandRegistry.getAll().map((c) => c.id));
+after(() => {
+  for (const c of paletteCommandRegistry.getAll()) {
+    if (!idsBefore.has(c.id)) paletteCommandRegistry.unregister(c.id);
+  }
+});
+
+test("buildPaletteItems orders built-ins above native commands above editor fills", () => {
+  paletteCommandRegistry.register({
+    id: "test:peek",
+    label: "Peek: Ask This Session",
+    run: () => {},
+  });
+
+  const items = buildPaletteItems(
+    fakePi([{ name: "some-command", description: "extension command" }]),
+  );
+
+  const ranks = items.map((item) =>
+    item.category === "Built-in" ? 0 : item.action.type === "native" ? 1 : 2,
+  );
+  // Monotonically non-decreasing → no editor-fill entry sits above a native
+  // entry, and no native entry sits above a built-in.
+  assert.ok(ranks.every((r, i) => i === 0 || ranks[i - 1] <= r));
+
+  const native = items.find((item) => item.value === "native:test:peek");
+  assert.ok(native);
+  assert.equal(native.label, "Peek: Ask This Session");
+  assert.equal(native.action.type, "native");
+});
+
+test("buildPaletteItems picks up native commands registered after load", () => {
+  // The registry is read at palette-open time, so a late registration must
+  // show up on the next build without any re-init.
+  paletteCommandRegistry.register({ id: "test:late", label: "Registered Late", run: () => {} });
+
+  const items = buildPaletteItems(fakePi([]));
+  assert.ok(items.some((item) => item.value === "native:test:late"));
 });

package/src/index.ts

@@ -14,14 +14,13 @@
  */
 
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import {
-  copyToClipboard,
-  DynamicBorder,
-} from "@earendil-works/pi-coding-agent";
+import { copyToClipboard, DynamicBorder } from "@earendil-works/pi-coding-agent";
+import { paletteCommandRegistry } from "@d3ara1n/pi-command-palette-core";
 import {
   Container,
   type SelectItem,
   fuzzyFilter,
+  Input,
   Key,
   matchesKey,
   SelectList,
@@ -33,7 +32,9 @@ 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" }
@@ -67,7 +68,22 @@ const BUILTIN_ORDER: Record<string, number> = {
 
 // ── Helpers ────────────────────────────────────────────────────────
 
-function buildPaletteItems(pi: ExtensionAPI, ctx: ExtensionContext): PaletteItem[] {
+/**
+ * Sort ranks: built-in actions first, then native commands registered by other
+ * extensions (direct callbacks), then everything that fills the editor with a
+ * `/command`. Lower rank = higher up in the palette.
+ */
+function paletteSortRank(item: PaletteItem): number {
+  if (item.category === "Built-in") return 0;
+  if (item.action.type === "native") return 1;
+  return 2;
+}
+
+/**
+ * @internal — exported for testing; builds the palette item list from
+ * built-ins, the native-command registry, and pi's command registry.
+ */
+export function buildPaletteItems(pi: ExtensionAPI): PaletteItem[] {
   const items: PaletteItem[] = [];
 
   // ── Restore option (if previous editor text was saved) ────────
@@ -156,6 +172,20 @@ function buildPaletteItems(pi: ExtensionAPI, ctx: ExtensionContext): PaletteItem
     action: { type: "clear-editor" },
   });
 
+  // ── Native commands from other extensions ────────────────────
+  // Direct callbacks registered via @d3ara1n/pi-command-palette-core —
+  // executed in place, never touching the editor. Read at palette-open time,
+  // so late registrations are visible the next time the palette opens.
+  for (const cmd of paletteCommandRegistry.getAll()) {
+    items.push({
+      value: `native:${cmd.id}`,
+      label: cmd.label,
+      description: cmd.description ?? "",
+      category: "Native",
+      action: { type: "native", id: cmd.id },
+    });
+  }
+
   // ── Extension commands, skills, templates ────────────────────
   const commands = pi.getCommands();
   for (const cmd of commands) {
@@ -172,13 +202,13 @@ function buildPaletteItems(pi: ExtensionAPI, ctx: ExtensionContext): PaletteItem
     });
   }
 
-  // Sort: built-in actions first, ordered by BUILTIN_ORDER (then alphabetical
-  // for unlisted built-ins); extension commands follow alphabetically.
+  // Sort: built-in actions first (ordered by BUILTIN_ORDER, then alphabetical),
+  // then native commands, then editor-fill entries — each group alphabetical.
   items.sort((a, b) => {
-    const aBuilt = a.category === "Built-in";
-    const bBuilt = b.category === "Built-in";
-    if (aBuilt !== bBuilt) return aBuilt ? -1 : 1;
-    if (aBuilt) {
+    const ar = paletteSortRank(a);
+    const br = paletteSortRank(b);
+    if (ar !== br) return ar - br;
+    if (ar === 0) {
       const ai = BUILTIN_ORDER[a.value] ?? Number.MAX_SAFE_INTEGER;
       const bi = BUILTIN_ORDER[b.value] ?? Number.MAX_SAFE_INTEGER;
       if (ai !== bi) return ai - bi;
@@ -226,237 +256,243 @@ export function partitionedFuzzyFilter<T>(
   getText: (item: T) => string,
 ): T[] {
   if (!query.trim()) return [...primary, ...secondary];
-  return [
-    ...fuzzyFilter(primary, query, getText),
-    ...fuzzyFilter(secondary, query, getText),
-  ];
+  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;
-  }
-
-  if (models.length === 0) {
-    ctx.ui.notify("No models available.", "warning");
-    return;
-  }
-
-  const scopedIds = new Set(ctx.scopedModels.map((s) => `${s.model.provider}/${s.model.id}`));
-
-  // 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,
-          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];
-
-  const result = await ctx.ui.custom<string | 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("Switch Model")), 1, 0));
-
-      const selectList = new SelectList(items, Math.min(items.length, 12), {
-        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();
-      }
-
-      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();
-            }
-            return;
-          }
-          // Printable character → append to query
-          if (data.length === 1 && data.charCodeAt(0) >= 32) {
-            query += data;
-            applyQuery();
-            return;
-          }
-          // Navigation / confirm / cancel → pass to SelectList
-          selectList.handleInput(data);
-          tui.requestRender();
-        },
-      };
-    },
-    { overlay: true },
-  );
-
-  if (!result) return;
+// ── Command palette overlay ────────────────────────────────────────
 
-  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");
-    }
-  }
+interface PalettePage {
+  title: string;
+  items: Array<PaletteItem | { type: "page"; value: string; label: string; description: string; page: PalettePage }>;
 }
 
-// ── Command palette overlay ────────────────────────────────────────
+function pageItem(
+  value: string,
+  label: string,
+  description: string,
+  page: PalettePage,
+): PalettePage["items"][number] {
+  return { type: "page", value, label, description, page };
+}
 
 async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
-  if (!ctx.hasUI) return;
-
-  const paletteItems = buildPaletteItems(pi, ctx);
-  const selectItems: SelectItem[] = paletteItems.map((item) => ({
-    value: item.value,
-    label: item.label,
-    description: item.description,
-  }));
+  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").filter((item) => item.action.type !== "model-select");
+  const native = leaves("Native");
+  const commands = leaves("Command");
+  const skills = leaves("Skill");
+  const templates = leaves("Template");
+  const modelPage: PalettePage = { title: "Models", items: [] };
+  const rootItems: PalettePage["items"] = [
+    pageItem("models", "Model: Switch Model", "Choose a model", modelPage),
+    ...(builtins.length ? [pageItem("builtins", "Built-in Actions", "Session and editor actions", leafPage("Built-in Actions", 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 };
 
   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));
-
-      const selectList = new SelectList(selectItems, Math.min(selectItems.length, 15), {
+      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: PalettePage["items"] = [];
+      let modelLoading = false;
+
+      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) => {
-        const paletteItem = paletteItems.find((p) => p.value === item.value);
-        done(paletteItem ?? null);
       };
-      selectList.onCancel = () => done(null);
 
-      // Type-to-filter state
-      let query = "";
-      const queryText = new Text(theme.fg("accent", "> "), 1, 0);
+      function current() {
+        return stack[stack.length - 1]!;
+      }
 
-      function applyQuery() {
+      function rebuild() {
+        const { page } = current();
+        const query = queryInput.getValue();
+        visibleItems =
+          page === root && query.trim()
+            ? [
+                ...root.items,
+                ...paletteItems.filter((item) => item.action.type !== "model-select"),
+              ]
+            : 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
-          ? 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();
+          ? 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) {
+            if (item.value === "models" && !modelLoading && item.page.items.length === 0) {
+              modelLoading = true;
+              try {
+                const models = ctx.modelRegistry.getAvailable();
+                const scopedIds = new Set(
+                  ctx.scopedModels.map((s) => `${s.model.provider}/${s.model.id}`),
+                );
+                const decorated = models
+                  .map((m) => {
+                    const value = `${m.provider}/${m.id}`;
+                    const scoped = scopedIds.has(value);
+                    return {
+                      scoped,
+                      item: {
+                        value,
+                        label: scoped ? `${STAR}${m.name}` : m.name,
+                        description: m.provider,
+                        category: "Built-in",
+                        action: { type: "model", provider: m.provider, modelId: m.id } as CommandAction,
+                      },
+                    };
+                  })
+                  .sort((a, b) =>
+                    a.scoped === b.scoped
+                      ? a.item.label.localeCompare(b.item.label)
+                      : a.scoped
+                        ? -1
+                        : 1,
+                  );
+                item.page.items = decorated.map((d) => d.item);
+                modelLoading = false;
+                if (item.page.items.length === 0) {
+                  ctx.ui.notify("No models available.", "warning");
+                  return;
+                }
+                pushPage(item.page);
+              } catch {
+                modelLoading = false;
+                ctx.ui.notify("Cannot enumerate models.", "warning");
+              }
+              return;
+            }
+            pushPage(item.page);
+          } else {
+            done(item);
+          }
+        };
+        selectList.onSelectionChange = (selected) => {
+          current().selectedValue = selected.value;
+        };
+        selectList.onCancel = () => done(null);
+        if (modelLoading && page.title === "Models") {
+          listHost.clear();
+          listHost.addChild(new Text(theme.fg("muted", "Loading models…"), 1, 0));
+        }
+      }
+
+      function pushPage(page: PalettePage) {
+        current().input = queryInput.getValue();
+        stack.push({ page, input: "" });
+        queryInput.setValue("");
+        rebuild();
+        tui.requestRender();
+      }
+
+      function popPage() {
+        if (stack.length <= 1) return;
+        stack.pop();
+        queryInput.setValue(current().input);
+        rebuild();
         tui.requestRender();
       }
 
-      container.addChild(queryText);
-      container.addChild(selectList);
-      container.addChild(
-        new Text(theme.fg("dim", "type to filter • ↑↓ navigate • enter select • esc cancel"), 1, 0),
-      );
+      rebuild();
+      container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
+      container.addChild(new Text(theme.fg("accent", theme.bold(root.title)), 1, 0));
+      container.addChild(queryInput);
+      container.addChild(listHost);
+      container.addChild(new Text(theme.fg("dim", "↑↓ navigate • enter open/select • backspace on empty returns • esc closes"), 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);
+          const lines = container.render(w);
+          const title = stack.map((frame) => frame.page.title).join(" › ");
+          lines[1] = theme.fg("accent", theme.bold(title));
+          return lines;
         },
         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;
@@ -464,6 +500,24 @@ async function showCommandPalette(pi: ExtensionAPI, ctx: ExtensionContext): Prom
   // Execute the selected action
   const action = result.action;
   switch (action.type) {
+    case "native": {
+      const cmd = paletteCommandRegistry.get(action.id);
+      if (!cmd) {
+        ctx.ui.notify(`Palette command not found: ${action.id}`, "warning");
+        break;
+      }
+      try {
+        await cmd.run(pi, ctx);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        ctx.ui.notify(`Palette command "${cmd.label}" failed: ${message}`, "error");
+      }
+      break;
+    }
+    case "model-select": {
+      // Kept for compatibility with callers that may construct this action.
+      break;
+    }
     case "restore": {
       if (savedEditorText !== null) {
         ctx.ui.setEditorText(savedEditorText);
@@ -480,8 +534,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": {