Redesign model picker with favorites and search (pingdotgg#2153)

Co-authored-by: Julius Marminge <julius0216@outlook.com>

Author: 2 people

apps/desktop/src/clientPersistence.test.ts

@@ -52,6 +52,7 @@ const clientSettings: ClientSettings = {
   confirmThreadArchive: true,
   confirmThreadDelete: false,
   diffWordWrap: true,
+  favorites: [],
   sidebarProjectGroupingMode: "repository_path",
   sidebarProjectGroupingOverrides: {
     "environment-1:/tmp/project-a": "separate",

apps/server/src/keybindings.test.ts

@@ -207,6 +207,9 @@ it.layer(NodeServices.layer)("keybindings", (it) => {
       assert.equal(defaultsByCommand.get("thread.next"), "mod+shift+]");
       assert.equal(defaultsByCommand.get("thread.jump.1"), "mod+1");
       assert.equal(defaultsByCommand.get("thread.jump.9"), "mod+9");
+      assert.equal(defaultsByCommand.get("modelPicker.toggle"), "mod+shift+m");
+      assert.equal(defaultsByCommand.get("modelPicker.jump.1"), "mod+1");
+      assert.equal(defaultsByCommand.get("modelPicker.jump.9"), "mod+9");
     }),
   );
 

apps/server/src/keybindings.ts

@@ -13,6 +13,7 @@ import {
   KeybindingShortcut,
   KeybindingWhenNode,
   MAX_KEYBINDINGS_COUNT,
+  MODEL_PICKER_JUMP_KEYBINDING_COMMANDS,
   MAX_WHEN_EXPRESSION_DEPTH,
   ResolvedKeybindingRule,
   ResolvedKeybindingsConfig,
@@ -80,13 +81,19 @@ export const DEFAULT_KEYBINDINGS: ReadonlyArray<KeybindingRule> = [
   { key: "mod+n", command: "chat.new", when: "!terminalFocus" },
   { key: "mod+shift+o", command: "chat.new", when: "!terminalFocus" },
   { key: "mod+shift+n", command: "chat.newLocal", when: "!terminalFocus" },
+  { key: "mod+shift+m", command: "modelPicker.toggle", when: "!terminalFocus" },
   { key: "mod+o", command: "editor.openFavorite" },
   { key: "mod+shift+[", command: "thread.previous" },
   { key: "mod+shift+]", command: "thread.next" },
   ...THREAD_JUMP_KEYBINDING_COMMANDS.map((command, index) => ({
     key: `mod+${index + 1}`,
     command,
   })),
+  ...MODEL_PICKER_JUMP_KEYBINDING_COMMANDS.map((command, index) => ({
+    key: `mod+${index + 1}`,
+    command,
+    when: "modelPickerOpen",
+  })),
 ];
 
 function normalizeKeyToken(token: string): string {

apps/server/src/provider/opencodeRuntime.test.ts

@@ -1,37 +1,36 @@
-import assert from "node:assert/strict";
+import { describe, expect, it } from "vitest";
 
-import { describe, it, vi } from "vitest";
+import { DEFAULT_OPENCODE_MODEL_CAPABILITIES, flattenOpenCodeModels } from "./opencodeRuntime.ts";
 
-const childProcessMock = vi.hoisted(() => ({
-  execFileSync: vi.fn((command: string, args: ReadonlyArray<string>) => {
-    if (command === "which" && args[0] === "opencode") {
-      return "/opt/homebrew/bin/opencode\n";
-    }
-    return "";
-  }),
-  spawn: vi.fn(),
-}));
-
-vi.mock("node:child_process", () => childProcessMock);
-
-describe("resolveOpenCodeBinaryPath", () => {
-  it("returns absolute binary paths without PATH lookup", async () => {
-    const { resolveOpenCodeBinaryPath } = await import("./opencodeRuntime.ts");
-
-    assert.equal(resolveOpenCodeBinaryPath("/usr/local/bin/opencode"), "/usr/local/bin/opencode");
-    assert.equal(childProcessMock.execFileSync.mock.calls.length, 0);
-  });
-
-  it("resolves command names through PATH", async () => {
-    const { resolveOpenCodeBinaryPath } = await import("./opencodeRuntime.ts");
+describe("flattenOpenCodeModels", () => {
+  it("keeps the canonical model name separate from the subprovider label", () => {
+    const models = flattenOpenCodeModels({
+      providerList: {
+        connected: ["github-copilot"],
+        all: [
+          {
+            id: "github-copilot",
+            name: "GitHub Copilot",
+            models: {
+              "claude-opus-4.5": {
+                id: "claude-opus-4.5",
+                name: "Claude Opus 4.5",
+                variants: {},
+              },
+            },
+          },
+        ],
+      },
+      agents: [],
+    } as unknown as Parameters<typeof flattenOpenCodeModels>[0]);
 
-    assert.equal(resolveOpenCodeBinaryPath("opencode"), "/opt/homebrew/bin/opencode");
-    assert.deepEqual(childProcessMock.execFileSync.mock.calls[0], [
-      "which",
-      ["opencode"],
+    expect(models).toEqual([
       {
-        encoding: "utf8",
-        timeout: 3_000,
+        slug: "github-copilot/claude-opus-4.5",
+        name: "Claude Opus 4.5",
+        subProvider: "GitHub Copilot",
+        isCustom: false,
+        capabilities: DEFAULT_OPENCODE_MODEL_CAPABILITIES,
       },
     ]);
   });

apps/server/src/provider/opencodeRuntime.ts

@@ -586,7 +586,8 @@ export function flattenOpenCodeModels(
     for (const model of Object.values(provider.models)) {
       models.push({
         slug: toOpenCodeModelSlug(provider.id, model.id),
-        name: `${provider.name} · ${model.name}`,
+        name: model.name,
+        subProvider: provider.name,
         isCustom: false,
         capabilities: openCodeCapabilitiesForModel({
           providerID: provider.id,

apps/web/src/components/AppSidebarLayout.tsx

@@ -3,23 +3,49 @@ import { useNavigate } from "@tanstack/react-router";
 
 import ThreadSidebar from "./Sidebar";
 import { Sidebar, SidebarProvider, SidebarRail } from "./ui/sidebar";
+import {
+  clearShortcutModifierState,
+  syncShortcutModifierStateFromKeyboardEvent,
+} from "../shortcutModifierState";
 
 const THREAD_SIDEBAR_WIDTH_STORAGE_KEY = "chat_thread_sidebar_width";
 const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16;
 const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16;
-
 export function AppSidebarLayout({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const onWindowKeyDown = (event: KeyboardEvent) => {
+      syncShortcutModifierStateFromKeyboardEvent(event);
+    };
+    const onWindowKeyUp = (event: KeyboardEvent) => {
+      syncShortcutModifierStateFromKeyboardEvent(event);
+    };
+    const onWindowBlur = () => {
+      clearShortcutModifierState();
+    };
+
+    window.addEventListener("keydown", onWindowKeyDown, true);
+    window.addEventListener("keyup", onWindowKeyUp, true);
+    window.addEventListener("blur", onWindowBlur);
+
+    return () => {
+      window.removeEventListener("keydown", onWindowKeyDown, true);
+      window.removeEventListener("keyup", onWindowKeyUp, true);
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, []);
+
   useEffect(() => {
     const onMenuAction = window.desktopBridge?.onMenuAction;
     if (typeof onMenuAction !== "function") {
       return;
     }
 
     const unsubscribe = onMenuAction((action) => {
-      if (action !== "open-settings") return;
-      void navigate({ to: "/settings" });
+      if (action === "open-settings") {
+        void navigate({ to: "/settings" });
+      }
     });
 
     return () => {