Create command palette and add new features for search and actions (#728)

* refactor(ui): replace in-repo Command primitive with cmdk wrapper * feat(command-palette): add global Cmd+K palette with v1 actions * feat(command-palette): add session, file, and commit search sources * refactor: add provider names to model constants * feat(command-palette): add settings, navigation, message search, and ⌘K hints * feat(command-palette): add git fetch/pull/push and branch switch actions * refactor(command-palette): consolidate fetch source hooks behind useApiSource * refactor(command-palette): extract useCommandKey and SETTINGS_MAIN_TABS metadata * refactor(command-palette): extract groups into declarative registry * refactor(command-palette): wire openFile through PaletteOpsContext * refactor: migrate openSettings and refreshProjects from window.* to PaletteOpsContext * refactor(command-palette): inline groups and delete registry indirection * refactor(command-palette): return items array directly from source hooks * refactor(palette-ops): flatten Handle wrapper into ref-based registry * refactor: inline useCommandKey as MOD_KEY constant in two call sites * feat: introduce pages and fix bug on branch switching * fix: small labels * fix: coderabbit issues * fix: coderabbit comments * Update src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2026-05-11 23:34:42 +00:00 · 2026-04-30 14:48:48 +03:00
parent df3d5de8c1
commit 9f2afebc66
39 changed files with 1594 additions and 379 deletions
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -1,14 +1,25 @@
 import { useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+
 import Sidebar from '../sidebar/view/Sidebar';
 import MainContent from '../main-content/view/MainContent';
+import CommandPalette from '../command-palette/CommandPalette';
 import { useWebSocket } from '../../contexts/WebSocketContext';
+import { PaletteOpsProvider, usePaletteOpsRegister } from '../../contexts/PaletteOpsContext';
 import { useDeviceSettings } from '../../hooks/useDeviceSettings';
 import { useSessionProtection } from '../../hooks/useSessionProtection';
 import { useProjectsState } from '../../hooks/useProjectsState';

 export default function AppContent() {
+  return (
+    <PaletteOpsProvider>
+      <AppContentInner />
+    </PaletteOpsProvider>
+  );
+}
+
+function AppContentInner() {
  const navigate = useNavigate();
  const { sessionId } = useParams<{ sessionId?: string }>();
  const { t } = useTranslation('common');
@@ -40,6 +51,7 @@ export default function AppContent() {
    openSettings,
    refreshProjectsSilently,
    sidebarSharedProps,
+    handleNewSession,
  } = useProjectsState({
    sessionId,
    navigate,
@@ -48,27 +60,10 @@ export default function AppContent() {
    activeSessions,
  });

-  useEffect(() => {
-    // Expose a non-blocking refresh for chat/session flows.
-    // Full loading refreshes are still available through direct fetchProjects calls.
-    window.refreshProjects = refreshProjectsSilently;
-
-    return () => {
-      if (window.refreshProjects === refreshProjectsSilently) {
-        delete window.refreshProjects;
-      }
-    };
-  }, [refreshProjectsSilently]);
-
-  useEffect(() => {
-    window.openSettings = openSettings;
-
-    return () => {
-      if (window.openSettings === openSettings) {
-        delete window.openSettings;
-      }
-    };
-  }, [openSettings]);
+  usePaletteOpsRegister({
+    openSettings,
+    refreshProjects: refreshProjectsSilently,
+  });

  useEffect(() => {
    if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
@@ -202,6 +197,12 @@ export default function AppContent() {
        />
      </div>

+      <CommandPalette
+        selectedProject={selectedProject}
+        onStartNewChat={handleNewSession}
+        onOpenSettings={() => openSettings()}
+        onShowTab={setActiveTab}
+      />
    </div>
  );
 }
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
 import type { PendingPermissionRequest } from '../types/types';
 import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
 import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
@@ -99,6 +100,7 @@ export function useChatRealtimeHandlers({
  onWebSocketReconnect,
  sessionStore,
 }: UseChatRealtimeHandlersArgs) {
+  const paletteOps = usePaletteOps();
  const lastProcessedMessageRef = useRef<LatestChatMessage | null>(null);

  useEffect(() => {
@@ -280,9 +282,7 @@ export function useChatRealtimeHandlers({
            onNavigateToSession?.(actualId);
          }
          sessionStorage.removeItem('pendingSessionId');
-          if (window.refreshProjects) {
-            setTimeout(() => window.refreshProjects?.(), 500);
-          }
+          setTimeout(() => { void paletteOps.refreshProjects(); }, 500);
        }
        break;
      }
@@ -365,5 +365,6 @@ export function useChatRealtimeHandlers({
    onNavigateToSession,
    onWebSocketReconnect,
    sessionStore,
+    paletteOps,
  ]);
 }
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Check, ChevronDown } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";

 import { useServerPlatform } from "../../../../hooks/useServerPlatform";
 import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
@@ -9,6 +9,7 @@ import {
  CURSOR_MODELS,
  CODEX_MODELS,
  GEMINI_MODELS,
+  PROVIDERS,
 } from "../../../../../shared/modelConstants";
 import type { ProjectSession, LLMProvider } from "../../../../types/app";
 import { NextTaskBanner } from "../../../task-master";
@@ -26,6 +27,9 @@ import {
  Card,
 } from "../../../../shared/view/ui";

+const MOD_KEY =
+  typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+
 type ProviderSelectionEmptyStateProps = {
  selectedSession: ProjectSession | null;
  currentSessionId: string | null;
@@ -52,12 +56,11 @@ type ProviderGroup = {
  models: { value: string; label: string }[];
 };

-const PROVIDER_GROUPS: ProviderGroup[] = [
-  { id: "claude", name: "Anthropic", models: CLAUDE_MODELS.OPTIONS },
-  { id: "cursor", name: "Cursor", models: CURSOR_MODELS.OPTIONS },
-  { id: "codex", name: "OpenAI", models: CODEX_MODELS.OPTIONS },
-  { id: "gemini", name: "Google", models: GEMINI_MODELS.OPTIONS },
-];
+const PROVIDER_GROUPS: ProviderGroup[] = PROVIDERS.map((p) => ({
+  id: p.id as LLMProvider,
+  name: p.name,
+  models: p.models.OPTIONS,
+}));

 function getModelConfig(p: LLMProvider) {
  if (p === "claude") return CLAUDE_MODELS;
@@ -231,9 +234,14 @@ export default function ProviderSelectionEmptyState({
                      defaultValue: "No models found.",
                    })}
                  </CommandEmpty>
-                  {visibleProviderGroups.map((group) => (
+                  {visibleProviderGroups.map((group, idx) => (
                    <CommandGroup
                      key={group.id}
+                      className={
+                        idx > 0
+                          ? "border-t border-border/40 [&_[cmdk-group-heading]]:mt-1 [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider"
+                          : "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider"
+                      }
                      heading={
                        <span className="flex items-center gap-1.5">
                          <SessionProviderLogo provider={group.id} className="h-3.5 w-3.5 shrink-0" />
@@ -248,6 +256,7 @@ export default function ProviderSelectionEmptyState({
                            key={`${group.id}-${model.value}`}
                            value={`${group.name} ${model.label}`}
                            onSelect={() => handleModelSelect(group.id, model.value)}
+                            className="ml-4 border-l border-border/40 pl-4"
                          >
                            <span className="flex-1 truncate">{model.label}</span>
                            {isSelected && (
@@ -282,6 +291,18 @@ export default function ProviderSelectionEmptyState({
            }
          </p>

+          <p className="mt-3 flex items-center justify-center gap-1.5 text-center text-xs text-muted-foreground/60">
+            <Trans
+              i18nKey="providerSelection.pressToSearch"
+              values={{ shortcut: MOD_KEY === "⌘" ? "⌘K" : "Ctrl+K" }}
+              components={{
+                kbd: (
+                  <kbd className="inline-flex items-center gap-0.5 rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px]" />
+                ),
+              }}
+            />
+          </p>
+
          {provider && tasksEnabled && isTaskMasterInstalled && (
            <div className="mt-5">
              <NextTaskBanner
--- a/src/components/code-editor/view/CodeEditor.tsx
+++ b/src/components/code-editor/view/CodeEditor.tsx
@@ -3,6 +3,7 @@ import { unifiedMergeView } from '@codemirror/merge';
 import type { Extension } from '@codemirror/state';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
 import { useCodeEditorDocument } from '../hooks/useCodeEditorDocument';
 import { useCodeEditorSettings } from '../hooks/useCodeEditorSettings';
 import { useEditorKeyboardShortcuts } from '../hooks/useEditorKeyboardShortcuts';
@@ -36,6 +37,7 @@ export default function CodeEditor({
  onPopOut = null,
 }: CodeEditorProps) {
  const { t } = useTranslation('codeEditor');
+  const paletteOps = usePaletteOps();
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [showDiff, setShowDiff] = useState(Boolean(file.diffInfo));
  const [markdownPreview, setMarkdownPreview] = useState(false);
@@ -199,7 +201,7 @@ export default function CodeEditor({
            saving={saving}
            saveSuccess={saveSuccess}
            onToggleMarkdownPreview={() => setMarkdownPreview((previous) => !previous)}
-            onOpenSettings={() => window.openSettings?.('appearance')}
+            onOpenSettings={() => paletteOps.openSettings('appearance')}
            onDownload={handleDownload}
            onSave={handleSave}
            onToggleFullscreen={() => setIsFullscreen((previous) => !previous)}
--- a/src/components/command-palette/CommandPalette.tsx
+++ b/src/components/command-palette/CommandPalette.tsx
@@ -0,0 +1,373 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  ArrowDownToLine,
+  ArrowUpFromLine,
+  ChevronRight,
+  FileText,
+  GitCommit,
+  GitMerge,
+  MessageSquare,
+  MessageSquarePlus,
+  RefreshCw,
+  Settings,
+  SunMoon,
+  X,
+} from 'lucide-react';
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '../../shared/view/ui';
+import { useTheme } from '../../contexts/ThemeContext';
+import { usePaletteOps } from '../../contexts/PaletteOpsContext';
+import { SETTINGS_MAIN_TABS } from '../settings/constants/constants';
+import type { AppTab, Project } from '../../types/app';
+
+import { useSessionsSource } from './sources/useSessionsSource';
+import { useFilesSource } from './sources/useFilesSource';
+import { useCommitsSource } from './sources/useCommitsSource';
+import { useSessionMessageSearch } from './sources/useSessionMessageSearch';
+import { useBranchesSource } from './sources/useBranchesSource';
+import { useGitActions } from './sources/useGitActions';
+
+type Page = 'actions' | 'files' | 'sessions' | 'commits' | 'branches';
+
+const PAGE_LABELS: Record<Page, string> = {
+  actions: 'Actions',
+  files: 'Files',
+  sessions: 'Sessions',
+  commits: 'Commits',
+  branches: 'Branches',
+};
+
+type CommandPaletteProps = {
+  selectedProject: Project | null;
+  onStartNewChat: (project: Project) => void;
+  onOpenSettings: (tab?: string) => void;
+  onShowTab?: (tab: AppTab) => void;
+};
+
+const NAV_TABS: Array<{ id: AppTab; label: string; keywords: string }> = [
+  { id: 'chat', label: 'Go to Chat', keywords: 'chat messages conversation' },
+  { id: 'files', label: 'Go to Files', keywords: 'files file tree explorer' },
+  { id: 'shell', label: 'Go to Shell', keywords: 'shell terminal console' },
+  { id: 'git', label: 'Go to Git', keywords: 'git diff branches' },
+  { id: 'tasks', label: 'Go to Tasks', keywords: 'tasks taskmaster' },
+];
+
+export default function CommandPalette({
+  selectedProject,
+  onStartNewChat,
+  onOpenSettings,
+  onShowTab,
+}: CommandPaletteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+  const [pages, setPages] = React.useState<Page[]>([]);
+  const { toggleDarkMode } = useTheme();
+  const navigate = useNavigate();
+  const ops = usePaletteOps();
+
+  const page = pages.at(-1);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isCmdK = (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'k';
+      if (!isCmdK) return;
+      e.preventDefault();
+      setOpen((prev) => !prev);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) {
+      setSearch('');
+      setPages([]);
+    }
+  }, [open]);
+
+  const projectId = selectedProject?.projectId;
+
+  const showActions = !page || page === 'actions';
+  const showSessions = !page || page === 'sessions';
+  const showFiles = !page || page === 'files';
+  const showCommits = !page || page === 'commits';
+  const showBranches = !page || page === 'branches' || page === 'actions';
+
+  const sessions = useSessionsSource(projectId, open && showSessions);
+  const messageMatches = useSessionMessageSearch(projectId, search, open && showSessions);
+  const files = useFilesSource(projectId, open && showFiles);
+  const commits = useCommitsSource(projectId, open && showCommits);
+  const branches = useBranchesSource(projectId, open && showBranches);
+  const git = useGitActions(projectId);
+
+  const sessionRows = React.useMemo(() => {
+    if (!showSessions) return [];
+    type Row = { id: string; label: string; provider?: string; snippet?: string };
+    const byId = new Map<string, Row>();
+    for (const s of sessions) {
+      byId.set(s.id, { id: s.id, label: s.label, provider: s.provider });
+    }
+    for (const m of messageMatches) {
+      const existing = byId.get(m.sessionId);
+      if (existing) {
+        existing.snippet = m.snippet;
+      } else {
+        byId.set(m.sessionId, {
+          id: m.sessionId,
+          label: m.label,
+          provider: m.provider,
+          snippet: m.snippet,
+        });
+      }
+    }
+    return Array.from(byId.values());
+  }, [sessions, messageMatches, showSessions]);
+
+  const run = React.useCallback((fn: () => void) => {
+    setOpen(false);
+    fn();
+  }, []);
+
+  const pushPage = React.useCallback((next: Page) => {
+    setSearch('');
+    setPages((prev) => [...prev, next]);
+  }, []);
+
+  const popPage = React.useCallback(() => {
+    setSearch('');
+    setPages((prev) => prev.slice(0, -1));
+  }, []);
+
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Backspace' && !search && pages.length > 0) {
+      e.preventDefault();
+      popPage();
+    }
+  }, [search, pages.length, popPage]);
+
+  const startNewChatDisabled = !selectedProject;
+  const browseLimit = 5;
+  const filesShown = page === 'files' ? files : files.slice(0, browseLimit);
+  const commitsShown = page === 'commits' ? commits : commits.slice(0, browseLimit);
+  const sessionsShown = page === 'sessions' ? sessionRows : sessionRows.slice(0, browseLimit);
+  const branchesShown = page === 'branches' ? branches : branches.slice(0, browseLimit);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-xl overflow-hidden p-0">
+        <DialogTitle>Command palette</DialogTitle>
+        <Command label="Command palette" onKeyDown={handleKeyDown}>
+          {page && (
+            <div className="flex items-center gap-2 border-b px-3 py-2">
+              <span className="inline-flex items-center gap-1 rounded-md bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground">
+                {PAGE_LABELS[page]}
+                <button
+                  type="button"
+                  onClick={popPage}
+                  aria-label="Back to all"
+                  className="ml-0.5 rounded-sm opacity-70 hover:opacity-100"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </span>
+              <span className="text-xs text-muted-foreground">Backspace to go back</span>
+            </div>
+          )}
+          <CommandInput
+            placeholder={page ? `Search ${PAGE_LABELS[page].toLowerCase()}…` : 'Type to search anything…'}
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList>
+            <CommandEmpty>No results.</CommandEmpty>
+
+            {showActions && (
+              <CommandGroup heading="Actions">
+                <CommandItem
+                  value="Start new chat"
+                  disabled={startNewChatDisabled}
+                  onSelect={() => {
+                    if (!selectedProject) return;
+                    run(() => onStartNewChat(selectedProject));
+                  }}
+                >
+                  <MessageSquarePlus className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Start new chat</span>
+                  {startNewChatDisabled && (
+                    <span className="text-xs text-muted-foreground">Select a project first</span>
+                  )}
+                </CommandItem>
+                <CommandItem value="Open settings" onSelect={() => run(() => onOpenSettings())}>
+                  <Settings className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Open settings</span>
+                </CommandItem>
+                <CommandItem value="Toggle theme dark light mode" onSelect={() => run(toggleDarkMode)}>
+                  <SunMoon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Toggle theme</span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+
+            {showActions && (
+              <CommandGroup heading="Navigate">
+                {NAV_TABS.map((tab) => (
+                  <CommandItem
+                    key={tab.id as string}
+                    value={`${tab.label} ${tab.keywords}`}
+                    onSelect={() => run(() => onShowTab?.(tab.id))}
+                  >
+                    <span className="flex-1">{tab.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {showActions && projectId && (
+              <CommandGroup heading="Git">
+                <CommandItem
+                  value="Git Fetch remote"
+                  onSelect={() => run(() => { void git.fetch(); onShowTab?.('git'); })}
+                >
+                  <RefreshCw className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Git: Fetch</span>
+                </CommandItem>
+                <CommandItem
+                  value="Git Pull merge upstream"
+                  onSelect={() => run(() => { void git.pull(); onShowTab?.('git'); })}
+                >
+                  <ArrowDownToLine className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Git: Pull</span>
+                </CommandItem>
+                <CommandItem
+                  value="Git Push origin remote"
+                  onSelect={() => run(() => { void git.push(); onShowTab?.('git'); })}
+                >
+                  <ArrowUpFromLine className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex-1">Git: Push</span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+
+            {showActions && (
+              <CommandGroup heading="Settings">
+                {SETTINGS_MAIN_TABS.map(({ id, label, keywords, icon: Icon }) => (
+                  <CommandItem
+                    key={id}
+                    value={`Settings ${label} ${keywords}`}
+                    onSelect={() => run(() => onOpenSettings(id))}
+                  >
+                    <Icon className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="flex-1">Settings: {label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {showSessions && projectId && sessionsShown.length > 0 && (
+              <CommandGroup heading="Sessions">
+                {sessionsShown.map((s) => (
+                  <CommandItem
+                    key={s.id}
+                    value={`${s.label} ${s.snippet ?? ''} ${s.id}`.trim()}
+                    onSelect={() => run(() => navigate(`/session/${s.id}`))}
+                  >
+                    <MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <div className="flex min-w-0 flex-1 flex-col">
+                      <span className="truncate">{s.label}</span>
+                      {s.snippet && (
+                        <span className="truncate text-xs text-muted-foreground">{s.snippet}</span>
+                      )}
+                    </div>
+                    {s.provider && (
+                      <span className="text-xs text-muted-foreground">{s.provider}</span>
+                    )}
+                  </CommandItem>
+                ))}
+                {!page && sessionRows.length > browseLimit && (
+                  <BrowseAllItem label={`Browse all sessions (${sessionRows.length})`} onSelect={() => pushPage('sessions')} />
+                )}
+              </CommandGroup>
+            )}
+
+            {showFiles && projectId && filesShown.length > 0 && (
+              <CommandGroup heading="Files">
+                {filesShown.map((f) => (
+                  <CommandItem
+                    key={f.path}
+                    value={f.path}
+                    onSelect={() => run(() => ops.openFile(f.path))}
+                  >
+                    <FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="flex-1 truncate">{f.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">{f.path}</span>
+                  </CommandItem>
+                ))}
+                {!page && files.length > browseLimit && (
+                  <BrowseAllItem label={`Browse all files (${files.length})`} onSelect={() => pushPage('files')} />
+                )}
+              </CommandGroup>
+            )}
+
+            {showCommits && projectId && commitsShown.length > 0 && (
+              <CommandGroup heading="Commits">
+                {commitsShown.map((c) => (
+                  <CommandItem
+                    key={c.hash}
+                    value={`${c.message} ${c.author} ${c.shortHash}`}
+                    onSelect={() => run(() => onShowTab?.('git'))}
+                  >
+                    <GitCommit className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="font-mono text-xs text-muted-foreground">{c.shortHash}</span>
+                    <span className="flex-1 truncate">{c.message}</span>
+                    <span className="truncate text-xs text-muted-foreground">{c.author}</span>
+                  </CommandItem>
+                ))}
+                {!page && commits.length > browseLimit && (
+                  <BrowseAllItem label={`Browse all commits (${commits.length})`} onSelect={() => pushPage('commits')} />
+                )}
+              </CommandGroup>
+            )}
+
+            {showBranches && projectId && branchesShown.length > 0 && (
+              <CommandGroup heading="Branches">
+                {branchesShown.map((b) => (
+                  <CommandItem
+                    key={`branch-${b.name}`}
+                    value={b.name}
+                    onSelect={() => run(() => { void git.checkout(b.name); onShowTab?.('git'); })}
+                  >
+                    <GitMerge className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="flex-1 truncate">Switch to: {b.name}</span>
+                  </CommandItem>
+                ))}
+                {!page && branches.length > browseLimit && (
+                  <BrowseAllItem label={`Browse all branches (${branches.length})`} onSelect={() => pushPage('branches')} />
+                )}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function BrowseAllItem({ label, onSelect }: { label: string; onSelect: () => void }) {
+  return (
+    <CommandItem value={label} onSelect={onSelect}>
+      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+      <span className="flex-1 text-muted-foreground">{label}</span>
+    </CommandItem>
+  );
+}
--- a/src/components/command-palette/sources/useApiSource.ts
+++ b/src/components/command-palette/sources/useApiSource.ts
@@ -0,0 +1,37 @@
+import { useEffect, useState, type DependencyList } from 'react';
+
+export function useApiSource<T, R = unknown>(opts: {
+  enabled: boolean;
+  deps: DependencyList;
+  fetcher: (signal: AbortSignal) => Promise<Response>;
+  parse: (raw: R) => T[];
+}): T[] {
+  const [items, setItems] = useState<T[]>([]);
+  const { enabled, deps, fetcher, parse } = opts;
+
+  useEffect(() => {
+    if (!enabled) {
+      setItems([]);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    fetcher(controller.signal)
+      .then((r) => r.json() as Promise<R>)
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        setItems(parse(data));
+      })
+      .catch((err: unknown) => {
+        if (controller.signal.aborted) return;
+        if (err instanceof DOMException && err.name === 'AbortError') return;
+        setItems([]);
+      });
+
+    return () => controller.abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, ...deps]);
+
+  return items;
+}
--- a/src/components/command-palette/sources/useBranchesSource.ts
+++ b/src/components/command-palette/sources/useBranchesSource.ts
@@ -0,0 +1,21 @@
+import { authenticatedFetch } from '../../../utils/api';
+
+import { useApiSource } from './useApiSource';
+
+export type BranchResult = { name: string };
+
+interface BranchesResponse {
+  localBranches?: string[];
+}
+
+export function useBranchesSource(projectId: string | undefined, enabled: boolean) {
+  return useApiSource<BranchResult, BranchesResponse>({
+    enabled: enabled && !!projectId,
+    deps: [projectId],
+    fetcher: (signal) => {
+      const params = new URLSearchParams({ project: projectId! });
+      return authenticatedFetch(`/api/git/branches?${params.toString()}`, { signal });
+    },
+    parse: (data) => (data.localBranches ?? []).map((name) => ({ name })),
+  });
+}
--- a/src/components/command-palette/sources/useCommitsSource.ts
+++ b/src/components/command-palette/sources/useCommitsSource.ts
@@ -0,0 +1,35 @@
+import { authenticatedFetch } from '../../../utils/api';
+
+import { useApiSource } from './useApiSource';
+
+export type CommitResult = {
+  hash: string;
+  shortHash: string;
+  message: string;
+  author: string;
+};
+
+interface CommitsResponse {
+  commits?: Array<{ hash: string; message: string; author: string }>;
+  error?: string;
+}
+
+export function useCommitsSource(projectId: string | undefined, enabled: boolean) {
+  return useApiSource<CommitResult, CommitsResponse>({
+    enabled: enabled && !!projectId,
+    deps: [projectId],
+    fetcher: (signal) => {
+      const params = new URLSearchParams({ project: projectId!, limit: '50' });
+      return authenticatedFetch(`/api/git/commits?${params.toString()}`, { signal });
+    },
+    parse: (data) => {
+      if (!data.commits) return [];
+      return data.commits.map<CommitResult>((c) => ({
+        hash: c.hash,
+        shortHash: c.hash.slice(0, 7),
+        message: c.message,
+        author: c.author,
+      }));
+    },
+  });
+}
--- a/src/components/command-palette/sources/useFilesSource.ts
+++ b/src/components/command-palette/sources/useFilesSource.ts
@@ -0,0 +1,42 @@
+import { api } from '../../../utils/api';
+
+import { useApiSource } from './useApiSource';
+
+export type FileResult = {
+  path: string;
+  name: string;
+};
+
+interface FileNode {
+  type: 'file' | 'directory';
+  name: string;
+  path: string;
+  children?: FileNode[];
+}
+
+const MAX_FILES = 500;
+
+function flatten(nodes: FileNode[], out: FileResult[]): void {
+  for (const node of nodes) {
+    if (out.length >= MAX_FILES) return;
+    if (node.type === 'file') {
+      out.push({ path: node.path, name: node.name });
+    } else if (node.children && node.children.length > 0) {
+      flatten(node.children, out);
+    }
+  }
+}
+
+export function useFilesSource(projectId: string | undefined, enabled: boolean) {
+  return useApiSource<FileResult, unknown>({
+    enabled: enabled && !!projectId,
+    deps: [projectId],
+    fetcher: (signal) => api.getFiles(projectId!, { signal }),
+    parse: (data) => {
+      const tree: FileNode[] = Array.isArray(data) ? (data as FileNode[]) : [];
+      const flat: FileResult[] = [];
+      flatten(tree, flat);
+      return flat;
+    },
+  });
+}
--- a/src/components/command-palette/sources/useGitActions.ts
+++ b/src/components/command-palette/sources/useGitActions.ts
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { authenticatedFetch } from '../../../utils/api';
+
+async function postGit(path: string, body: Record<string, unknown>) {
+  const res = await authenticatedFetch(path, {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+export function useGitActions(projectId: string | undefined) {
+  const fetch = useCallback(() => {
+    if (!projectId) return Promise.resolve();
+    return postGit('/api/git/fetch', { project: projectId });
+  }, [projectId]);
+
+  const pull = useCallback(() => {
+    if (!projectId) return Promise.resolve();
+    return postGit('/api/git/pull', { project: projectId });
+  }, [projectId]);
+
+  const push = useCallback(() => {
+    if (!projectId) return Promise.resolve();
+    return postGit('/api/git/push', { project: projectId });
+  }, [projectId]);
+
+  const checkout = useCallback(
+    (branch: string) => {
+      if (!projectId) return Promise.resolve();
+      return postGit('/api/git/checkout', { project: projectId, branch });
+    },
+    [projectId],
+  );
+
+  return { fetch, pull, push, checkout };
+}
--- a/src/components/command-palette/sources/useSessionMessageSearch.ts
+++ b/src/components/command-palette/sources/useSessionMessageSearch.ts
@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { api } from '../../../utils/api';
+import type { LLMProvider } from '../../../types/app';
+
+export type SessionMessageMatch = {
+  sessionId: string;
+  label: string;
+  snippet: string;
+  provider: LLMProvider;
+};
+
+type ProjectResult = {
+  projectId: string | null;
+  projectName: string;
+  sessions: Array<{
+    sessionId: string;
+    provider: LLMProvider;
+    sessionSummary: string;
+    matches: Array<{ snippet: string }>;
+  }>;
+};
+
+const MIN_QUERY = 2;
+const DEBOUNCE_MS = 250;
+
+export function useSessionMessageSearch(
+  projectId: string | undefined,
+  query: string,
+  enabled: boolean,
+) {
+  const [items, setItems] = useState<SessionMessageMatch[]>([]);
+  const seqRef = useRef(0);
+  const esRef = useRef<EventSource | null>(null);
+
+  useEffect(() => {
+    const trimmed = query.trim();
+    if (!enabled || !projectId || trimmed.length < MIN_QUERY) {
+      setItems([]);
+      esRef.current?.close();
+      esRef.current = null;
+      return;
+    }
+
+    esRef.current?.close();
+    esRef.current = null;
+    seqRef.current++;
+
+    const handle = setTimeout(() => {
+      const seq = ++seqRef.current;
+      const url = api.searchConversationsUrl(trimmed);
+      const es = new EventSource(url);
+      esRef.current = es;
+      const accumulated: SessionMessageMatch[] = [];
+
+      es.addEventListener('result', (evt) => {
+        if (seq !== seqRef.current) {
+          es.close();
+          return;
+        }
+        try {
+          const data = JSON.parse((evt as MessageEvent).data) as { projectResult: ProjectResult };
+          const pr = data.projectResult;
+          if (pr.projectId !== projectId) return;
+          for (const s of pr.sessions) {
+            accumulated.push({
+              sessionId: s.sessionId,
+              label: s.sessionSummary || s.sessionId,
+              snippet: s.matches[0]?.snippet ?? '',
+              provider: s.provider,
+            });
+          }
+          setItems([...accumulated]);
+        } catch {
+          // ignore malformed
+        }
+      });
+
+      const finish = () => {
+        if (seq !== seqRef.current) return;
+        es.close();
+        esRef.current = null;
+      };
+      es.addEventListener('done', finish);
+      es.addEventListener('error', finish);
+    }, DEBOUNCE_MS);
+
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [projectId, query, enabled]);
+
+  useEffect(() => {
+    return () => {
+      esRef.current?.close();
+      esRef.current = null;
+    };
+  }, []);
+
+  return items;
+}
--- a/src/components/command-palette/sources/useSessionsSource.ts
+++ b/src/components/command-palette/sources/useSessionsSource.ts
@@ -0,0 +1,44 @@
+import { authenticatedFetch } from '../../../utils/api';
+import type { LLMProvider, ProjectSession } from '../../../types/app';
+
+import { useApiSource } from './useApiSource';
+
+export type SessionResult = {
+  id: string;
+  label: string;
+  provider?: LLMProvider;
+};
+
+interface SessionsResponse {
+  sessions?: ProjectSession[];
+  cursorSessions?: ProjectSession[];
+  codexSessions?: ProjectSession[];
+  geminiSessions?: ProjectSession[];
+}
+
+export function useSessionsSource(projectId: string | undefined, enabled: boolean) {
+  return useApiSource<SessionResult, SessionsResponse>({
+    enabled: enabled && !!projectId,
+    deps: [projectId],
+    fetcher: (signal) => {
+      const params = new URLSearchParams({ limit: '50', offset: '0' });
+      return authenticatedFetch(
+        `/api/projects/${encodeURIComponent(projectId!)}/sessions?${params.toString()}`,
+        { signal },
+      );
+    },
+    parse: (data) => {
+      const all: ProjectSession[] = [
+        ...(data.sessions ?? []),
+        ...(data.cursorSessions ?? []),
+        ...(data.codexSessions ?? []),
+        ...(data.geminiSessions ?? []),
+      ];
+      return all.map<SessionResult>((s) => ({
+        id: s.id,
+        label: (s.title || s.summary || s.name || s.id) as string,
+        provider: s.__provider,
+      }));
+    },
+  });
+}
--- a/src/components/main-content/view/MainContent.tsx
+++ b/src/components/main-content/view/MainContent.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+
 import ChatInterface from '../../chat/view/ChatInterface';
 import FileTree from '../../file-tree/view/FileTree';
 import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
@@ -6,12 +7,14 @@ import GitPanel from '../../git-panel/view/GitPanel';
 import PluginTabContent from '../../plugins/view/PluginTabContent';
 import type { MainContentProps } from '../types/types';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
+import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
 import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
 import EditorSidebar from '../../code-editor/view/EditorSidebar';
 import type { Project } from '../../../types/app';
 import { TaskMasterPanel } from '../../task-master';
+
 import MainContentHeader from './subcomponents/MainContentHeader';
 import MainContentStateView from './subcomponents/MainContentStateView';
 import ErrorBoundary from './ErrorBoundary';
@@ -89,6 +92,13 @@ function MainContent({
    }
  }, [shouldShowTasksTab, activeTab, setActiveTab]);

+  usePaletteOpsRegister({
+    openFile: (filePath: string) => {
+      setActiveTab('files');
+      handleFileOpen(filePath);
+    },
+  });
+
  if (isLoading) {
    return <MainContentStateView mode="loading" isMobile={isMobile} onMenuClick={onMenuClick} />;
  }
--- a/src/components/settings/constants/constants.ts
+++ b/src/components/settings/constants/constants.ts
@@ -1,3 +1,15 @@
+import type { ComponentType } from 'react';
+import {
+  Bell,
+  Bot,
+  GitBranch,
+  Info,
+  KeyRound,
+  ListChecks,
+  Palette,
+  Plug,
+} from 'lucide-react';
+
 import type {
  AgentCategory,
  AgentProvider,
@@ -7,13 +19,22 @@ import type {
  SettingsMainTab,
 } from '../types/types';

-export const SETTINGS_MAIN_TABS: SettingsMainTab[] = [
-  'agents',
-  'appearance',
-  'git',
-  'api',
-  'tasks',
-  'notifications',
+export type SettingsMainTabMeta = {
+  id: SettingsMainTab;
+  label: string;
+  keywords: string;
+  icon: ComponentType<{ className?: string }>;
+};
+
+export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [
+  { id: 'agents', label: 'Agents', keywords: 'agents subagents claude code', icon: Bot },
+  { id: 'appearance', label: 'Appearance', keywords: 'appearance theme dark light language', icon: Palette },
+  { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch },
+  { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound },
+  { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks },
+  { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell },
+  { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug },
+  { id: 'about', label: 'About', keywords: 'about version info', icon: Info },
 ];

 export const AGENT_PROVIDERS: AgentProvider[] = ['claude', 'cursor', 'codex', 'gemini'];
@@ -34,4 +55,3 @@ export const DEFAULT_CURSOR_PERMISSIONS: CursorPermissionsState = {
  disallowedCommands: [],
  skipPermissions: false,
 };
-
--- a/src/components/sidebar/hooks/useSidebarController.ts
+++ b/src/components/sidebar/hooks/useSidebarController.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { TFunction } from 'i18next';

 import { api } from '../../../utils/api';
+import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
 import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
 import type {
  DeleteProjectConfirmation,
@@ -95,6 +96,7 @@ export function useSidebarController({
  setSidebarVisible,
  sidebarVisible,
 }: UseSidebarControllerArgs) {
+  const paletteOps = usePaletteOps();
  const [expandedProjects, setExpandedProjects] = useState<Set<string>>(new Set());
  const [editingProject, setEditingProject] = useState<string | null>(null);
  const [showNewProject, setShowNewProject] = useState(false);
@@ -536,11 +538,7 @@ export function useSidebarController({
      try {
        const response = await api.renameProject(projectId, editingName);
        if (response.ok) {
-          if (window.refreshProjects) {
-            await window.refreshProjects();
-          } else {
-            window.location.reload();
-          }
+          await paletteOps.refreshProjects();
        } else {
          console.error('Failed to rename project');
        }
@@ -551,7 +549,7 @@ export function useSidebarController({
        setEditingName('');
      }
    },
-    [editingName],
+    [editingName, paletteOps],
  );

  const showDeleteSessionConfirmation = useCallback(
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@@ -6,6 +6,7 @@ import { useVersionCheck } from '../../../hooks/useVersionCheck';
 import { useUiPreferences } from '../../../hooks/useUiPreferences';
 import { useSidebarController } from '../hooks/useSidebarController';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
+import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import type { Project, LLMProvider } from '../../../types/app';
 import type { MCPServerStatus, SidebarProps } from '../types/types';
@@ -49,6 +50,7 @@ function Sidebar({
  const { sidebarVisible } = preferences;
  const { setCurrentProject, mcpServerStatus } = useTaskMaster() as TaskMasterSidebarContext;
  const { tasksEnabled } = useTasksSettings();
+  const paletteOps = usePaletteOps();

  const {
    isSidebarCollapsed,
@@ -128,12 +130,7 @@ function Sidebar({
  }, [isPWA]);

  const handleProjectCreated = () => {
-    if (window.refreshProjects) {
-      void window.refreshProjects();
-      return;
-    }
-
-    window.location.reload();
+    void paletteOps.refreshProjects();
  };

  const projectListProps: SidebarProjectListProps = {
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -5,6 +5,9 @@ import { IS_PLATFORM } from '../../../../constants/config';
 import { cn } from '../../../../lib/utils';
 import GitHubStarBadge from './GitHubStarBadge';

+const MOD_KEY =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl';
+
 type SearchMode = 'projects' | 'conversations';

 type SidebarHeaderProps = {
@@ -148,9 +151,9 @@ export default function SidebarHeader({
                placeholder={searchMode === 'conversations' ? t('search.conversationsPlaceholder') : t('projects.searchPlaceholder')}
                value={searchFilter}
                onChange={(event) => onSearchFilterChange(event.target.value)}
-                className="nav-search-input h-9 rounded-xl border-0 pl-9 pr-8 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
+                className="nav-search-input h-9 rounded-xl border-0 pl-9 pr-14 text-sm transition-all duration-200 placeholder:text-muted-foreground/40 focus-visible:ring-0 focus-visible:ring-offset-0"
              />
-              {searchFilter && (
+              {searchFilter ? (
                <button
                  onClick={onClearSearchFilter}
                  aria-label={t('tooltips.clearSearch')}
@@ -158,6 +161,15 @@ export default function SidebarHeader({
                >
                  <X className="h-3 w-3 text-muted-foreground" />
                </button>
+              ) : (
+                <kbd
+                  aria-hidden
+                  title={t('tooltips.openCommandPalette')}
+                  className="pointer-events-none absolute right-2.5 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground md:inline-flex"
+                >
+                  {MOD_KEY}
+                  <span>K</span>
+                </kbd>
              )}
            </div>
          </div>