🤖 refactor: make command palette a workspace switcher by default

Make the command palette primarily a workspace switcher while keeping all
commands accessible via prefix keys. This focuses the palette on the most
common use case (switching workspaces) without sacrificing functionality.

**Changes:**

- Default view shows only workspace commands (switch, create, rename, etc.)
- Type `>` prefix to see all commands across all sections
- Type `/` prefix for slash commands (existing behavior)
- Updated placeholder text to reflect new behavior

**Code quality improvements:**

- Extracted repeated state reset logic into `resetPaletteState()` helper
- Exported command section names as `COMMAND_SECTIONS` constant
- Removed unused `searchQuery` variable
- Updated documentation and Storybook stories

**Documentation:**

- Added command palette section to docs/keybinds.md explaining three modes
- Updated Storybook story with accurate feature descriptions

_Generated with `cmux`_

Author: ammar-agent

docs/keybinds.md

@@ -54,6 +54,16 @@ When documentation shows `Ctrl`, it means:
 | Open command palette | `Ctrl+Shift+P` |
 | Toggle sidebar       | `Ctrl+P`       |
 
+### Command Palette
+
+The command palette (`Ctrl+Shift+P`) is primarily a **workspace switcher** by default:
+
+- **Default**: Shows only workspace commands (switch, create, rename, etc.)
+- **`>` prefix**: Shows all commands (navigation, chat, modes, projects, etc.)
+- **`/` prefix**: Shows slash command suggestions for inserting into chat
+
+This design keeps the palette focused on the most common use case (workspace switching) while still providing quick access to all commands when needed.
+
 ## Tips
 
 - **Vim-inspired navigation**: We use `J`/`K` for next/previous navigation, similar to Vim

src/components/CommandPalette.stories.tsx

@@ -12,7 +12,7 @@ const mockCommands: CommandAction[] = [
     id: "workspace.create",
     title: "Create New Workspace",
     subtitle: "Start a new workspace in this project",
-    section: "Workspace",
+    section: "Workspaces",
     keywords: ["new", "add", "workspace"],
     shortcutHint: "⌘N",
     run: () => action("command-executed")("workspace.create"),
@@ -21,7 +21,7 @@ const mockCommands: CommandAction[] = [
     id: "workspace.switch",
     title: "Switch Workspace",
     subtitle: "Navigate to a different workspace",
-    section: "Workspace",
+    section: "Workspaces",
     keywords: ["change", "go to", "workspace"],
     shortcutHint: "⌘P",
     run: () => action("command-executed")("workspace.switch"),
@@ -30,7 +30,7 @@ const mockCommands: CommandAction[] = [
     id: "workspace.delete",
     title: "Delete Workspace",
     subtitle: "Remove the current workspace",
-    section: "Workspace",
+    section: "Workspaces",
     keywords: ["remove", "delete", "workspace"],
     run: () => action("command-executed")("workspace.delete"),
   },
@@ -185,15 +185,14 @@ export const Default: Story = {
         <br />
         <strong>Features:</strong>
         <br />
-        • Type to filter commands by title, subtitle, or keywords
+        • By default, shows workspace switching commands
+        <br />• Type <kbd>&gt;</kbd> to see all commands across all sections
+        <br />• Type <kbd>/</kbd> to see slash commands for chat input
         <br />
-        • Use ↑↓ arrow keys to navigate
-        <br />
-        • Press Enter to execute a command
+        • Use ↑↓ arrow keys to navigate, Enter to execute
         <br />
         • Press Escape to close
-        <br />• Start with <kbd>/</kbd> to see slash commands
-        <br />• Commands are organized into sections (Workspace, Chat, Mode, Settings, Project,
+        <br />• Commands are organized into sections (Workspaces, Chat, Mode, Settings, Project,
         Help)
       </div>
       <PaletteDemo />

src/components/CommandPalette.tsx

@@ -5,6 +5,7 @@ import type { CommandAction } from "@/contexts/CommandRegistryContext";
 import { formatKeybind, KEYBINDS, isEditableElement, matchesKeybind } from "@/utils/ui/keybinds";
 import { getSlashCommandSuggestions } from "@/utils/slashCommands/suggestions";
 import { CUSTOM_EVENTS } from "@/constants/events";
+import { COMMAND_SECTIONS } from "@/utils/commands/sources";
 
 interface CommandPaletteProps {
   getSlashContext?: () => { providerNames: string[]; workspaceId?: string };
@@ -42,32 +43,34 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
   }>(null);
   const [promptError, setPromptError] = useState<string | null>(null);
 
+  const resetPaletteState = useCallback(() => {
+    setActivePrompt(null);
+    setPromptError(null);
+    setQuery("");
+  }, []);
+
   // Close palette with Escape
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (matchesKeybind(e, KEYBINDS.CANCEL) && isOpen) {
         e.preventDefault();
-        setActivePrompt(null);
-        setPromptError(null);
-        setQuery("");
+        resetPaletteState();
         close();
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [isOpen, close]);
+  }, [isOpen, close, resetPaletteState]);
 
   // Reset state whenever palette visibility changes
   useEffect(() => {
     if (!isOpen) {
-      setActivePrompt(null);
-      setPromptError(null);
-      setQuery("");
+      resetPaletteState();
     } else {
       setPromptError(null);
       setQuery("");
     }
-  }, [isOpen]);
+  }, [isOpen, resetPaletteState]);
 
   const rawActions = getActions();
 
@@ -202,7 +205,15 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
       } satisfies { groups: PaletteGroup[]; emptyText: string | undefined };
     }
 
-    const filtered = [...rawActions].sort((a, b) => {
+    // Filter actions based on prefix
+    const showAllCommands = q.startsWith(">");
+
+    // When no prefix is used, only show workspace-related commands
+    const actionsToShow = showAllCommands
+      ? rawActions
+      : rawActions.filter((action) => action.section === COMMAND_SECTIONS.WORKSPACES);
+
+    const filtered = [...actionsToShow].sort((a, b) => {
       const ai = recentIndex.has(a.id) ? recentIndex.get(a.id)! : 9999;
       const bi = recentIndex.has(b.id) ? recentIndex.get(b.id)! : 9999;
       if (ai !== bi) return ai - bi;
@@ -300,7 +311,10 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
   }, [currentField, activePrompt]);
 
   const isSlashQuery = !currentField && query.trim().startsWith("/");
-  const shouldUseCmdkFilter = currentField ? currentField.type === "select" : !isSlashQuery;
+  const isCommandQuery = !currentField && query.trim().startsWith(">");
+  const shouldUseCmdkFilter = currentField
+    ? currentField.type === "select"
+    : !isSlashQuery && !isCommandQuery;
 
   let groups: PaletteGroup[] = generalResults.groups;
   let emptyText: string | undefined = generalResults.emptyText;
@@ -357,16 +371,26 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
     <div
       className="fixed inset-0 z-[2000] flex items-start justify-center bg-black/40 pt-[10vh]"
       onMouseDown={() => {
-        setActivePrompt(null);
-        setPromptError(null);
-        setQuery("");
+        resetPaletteState();
         close();
       }}
     >
       <Command
         className="bg-separator border-border text-lighter font-primary w-[min(720px,92vw)] overflow-hidden rounded-lg border shadow-[0_10px_40px_rgba(0,0,0,0.4)]"
         onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
         shouldFilter={shouldUseCmdkFilter}
+        filter={(value, search) => {
+          // When using ">" prefix, filter using the text after ">"
+          if (isCommandQuery && search.startsWith(">")) {
+            const actualSearch = search.slice(1).trim().toLowerCase();
+            if (!actualSearch) return 1;
+            if (value.toLowerCase().includes(actualSearch)) return 1;
+            return 0;
+          }
+          // Default cmdk filtering for other cases
+          if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+          return 0;
+        }}
       >
         <Command.Input
           className="bg-darker text-lighter border-hover w-full border-b border-none px-3.5 py-3 text-sm outline-none"
@@ -377,7 +401,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
               ? currentField.type === "text"
                 ? (currentField.placeholder ?? "Type value…")
                 : (currentField.placeholder ?? "Search options…")
-              : `Type a command… (${formatKeybind(KEYBINDS.CANCEL)} to close, ${formatKeybind(KEYBINDS.SEND_MESSAGE)} to send in chat)`
+              : `Switch workspaces or type > for all commands, / for slash commands…`
           }
           autoFocus
           onKeyDown={(e: React.KeyboardEvent) => {
@@ -391,9 +415,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
               } else if (e.key === "Escape") {
                 e.preventDefault();
                 e.stopPropagation();
-                setActivePrompt(null);
-                setPromptError(null);
-                setQuery("");
+                resetPaletteState();
                 close();
               }
               return;

src/utils/commands/sources.ts

@@ -44,13 +44,26 @@ export interface BuildSourcesParams {
 
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
+/**
+ * Command palette section names
+ * Exported for use in filtering and command organization
+ */
+export const COMMAND_SECTIONS = {
+  WORKSPACES: "Workspaces",
+  NAVIGATION: "Navigation",
+  CHAT: "Chat",
+  MODE: "Modes & Model",
+  HELP: "Help",
+  PROJECTS: "Projects",
+} as const;
+
 const section = {
-  workspaces: "Workspaces",
-  navigation: "Navigation",
-  chat: "Chat",
-  mode: "Modes & Model",
-  help: "Help",
-  projects: "Projects",
+  workspaces: COMMAND_SECTIONS.WORKSPACES,
+  navigation: COMMAND_SECTIONS.NAVIGATION,
+  chat: COMMAND_SECTIONS.CHAT,
+  mode: COMMAND_SECTIONS.MODE,
+  help: COMMAND_SECTIONS.HELP,
+  projects: COMMAND_SECTIONS.PROJECTS,
 };
 
 export function buildCoreSources(p: BuildSourcesParams): Array<() => CommandAction[]> {