ompchamber 2.0.2 → 3.1.0

package/src/client/components/workspace/diff-panel/index.tsx

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { useFetcher } from '@/client/lib/router/fetcher';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useSessionUiState } from '@/client/hooks/workspace/session-state';
 import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
 import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
-import { DiffToolbar } from '@/client/components/workspace/diff-panel/Toolbar';
+import { DiffToolbar, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
 import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
 import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
@@ -30,62 +29,94 @@ export function DiffPanel({
   className = '',
 }: DiffPanelProps) {
   // Read and persist view mode & whitespace preference in session_ui_state
-  const [viewMode, setViewMode] = useSessionUiState<'unified' | 'split'>('diff.viewMode', 'unified');
+  const [viewMode, setViewMode] = useSessionUiState<DiffViewMode>('diff.viewMode', 'unified');
   const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
 
   const [rawDiff, setRawDiff] = useState<string>('');
   const [currentStatus, setCurrentStatus] = useState<string>(status);
   const [currentStaged, setCurrentStaged] = useState<boolean>(isStaged);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isBusy, setIsBusy] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
 
-  const fetcher = useFetcher();
+  /**
+   * The staged flag / status the next fetch must ask for. The state copies lag
+   * a click by a render, and keeping them in `fetchDiff`'s dependency list made
+   * every response re-key the callback and fire another fetch. Refs keep the
+   * callback stable and always read the post-action value.
+   */
+  const stagedRef = useRef<boolean>(isStaged);
+  const statusRef = useRef<string>(status);
+  const fetchSeqRef = useRef(0);
 
-  const fetchDiff = useCallback(async () => {
+  const fetchDiff = useCallback(async (overrides: { staged?: boolean; status?: string } = {}) => {
     if (!filePath) return;
+    const seq = ++fetchSeqRef.current;
     setIsLoading(true);
     setErrorMessage(null);
     try {
+      const staged = overrides.staged ?? stagedRef.current;
+      const statusForFetch = overrides.status ?? statusRef.current;
       const params = new URLSearchParams({
         fileDiff: '1',
         file: filePath,
-        staged: currentStaged ? '1' : '0',
+        staged: staged ? '1' : '0',
         repo: repo || '.',
       });
-      if (status || currentStatus) params.set('status', status || currentStatus);
+      if (statusForFetch) params.set('status', statusForFetch);
       if (root) params.set('root', root);
 
       const res = await fetch(`/api/fs/git?${params.toString()}`);
-      const data = await res.json();
-      if (data.success) {
+      const data = (await res.json().catch(() => null)) as {
+        success?: boolean;
+        diff?: string;
+        status?: string;
+        staged?: boolean;
+        error?: string;
+      } | null;
+      // A slower earlier read must not overwrite a newer one (the action path
+      // fires a fetch of its own while the initial one is still in flight).
+      if (seq !== fetchSeqRef.current) return;
+      if (data?.success) {
         setRawDiff(data.diff || '');
-        if (data.status) setCurrentStatus(data.status);
+        if (data.status) {
+          statusRef.current = data.status;
+          setCurrentStatus(data.status);
+        }
+        if (typeof data.staged === 'boolean') {
+          stagedRef.current = data.staged;
+          setCurrentStaged(data.staged);
+        }
       } else {
-        setErrorMessage(data.error || 'Failed to load file diff');
+        setErrorMessage(data?.error || `Failed to load file diff (HTTP ${res.status})`);
       }
-    } catch (err: any) {
-      setErrorMessage(err.message || 'Error fetching diff');
+    } catch (err: unknown) {
+      if (seq !== fetchSeqRef.current) return;
+      setErrorMessage(err instanceof Error ? err.message : 'Error fetching diff');
     } finally {
-      setIsLoading(false);
+      if (seq === fetchSeqRef.current) setIsLoading(false);
     }
-  }, [filePath, currentStaged, repo, root]);
+  }, [filePath, repo, root]);
 
   useEffect(() => {
     setCurrentStatus(status);
     setCurrentStaged(isStaged);
+    stagedRef.current = isStaged;
+    statusRef.current = status;
   }, [status, isStaged, filePath]);
 
   useEffect(() => {
-    fetchDiff();
+    void fetchDiff();
   }, [fetchDiff]);
 
   const parsed = parseUnifiedDiff(rawDiff, ignoreWhitespace);
   const language = getLanguageFromPath(filePath);
 
-  const handleToggleViewMode = () => {
-    setViewMode(viewMode === 'unified' ? 'split' : 'unified');
+  const handleSetViewMode = (mode: DiffViewMode) => {
+    setViewMode(mode);
   };
 
   const handleToggleWhitespace = () => {
@@ -94,44 +125,82 @@ export function DiffPanel({
 
   const handleCopyDiff = () => {
     if (!rawDiff) return;
-    navigator.clipboard.writeText(rawDiff);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 2000);
+    void navigator.clipboard.writeText(rawDiff).then(
+      () => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      },
+      () => setActionError('Clipboard write was refused by the browser'),
+    );
   };
 
-  const handleStageUnstage = () => {
-    const actionType = currentStaged ? 'unstage' : 'stage';
-    const fd = new FormData();
-    fd.set('actionType', actionType);
-    fd.set('file', filePath);
-    fd.set('repo', repo || '.');
-    if (root) fd.set('root', root);
-
-    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
-    setCurrentStaged(!currentStaged);
-    setTimeout(() => {
-      fetchDiff();
+  /**
+   * POST one git action and report whether it landed. The panel used to fire
+   * and forget (`fetcher.submit` + an optimistic flip + a 300ms timer), which
+   * made a rejected action indistinguishable from a successful one: the badge
+   * flipped and the diff silently stayed put.
+   */
+  const runGitAction = useCallback(
+    async (fields: Record<string, string>): Promise<boolean> => {
+      const fd = new FormData();
+      for (const [key, value] of Object.entries(fields)) fd.set(key, value);
+      fd.set('repo', repo || '.');
+      if (root) fd.set('root', root);
+      try {
+        const res = await fetch('/api/fs/git', { method: 'POST', body: fd });
+        const data = (await res.json().catch(() => null)) as { success?: boolean; error?: string } | null;
+        if (!res.ok || !data?.success) {
+          setActionError(data?.error || `Request failed (HTTP ${res.status})`);
+          return false;
+        }
+        setActionError(null);
+        return true;
+      } catch (err: unknown) {
+        setActionError(err instanceof Error ? err.message : 'Request failed');
+        return false;
+      }
+    },
+    [repo, root],
+  );
+
+  const handleStageUnstage = async () => {
+    if (isBusy) return;
+    const nextStaged = !currentStaged;
+    setIsBusy(true);
+    try {
+      const ok = await runGitAction({
+        actionType: currentStaged ? 'unstage' : 'stage',
+        file: filePath,
+      });
+      if (!ok) return;
+      stagedRef.current = nextStaged;
+      setCurrentStaged(nextStaged);
       onFileSaved?.();
-    }, 300);
+      await fetchDiff({ staged: nextStaged });
+    } finally {
+      setIsBusy(false);
+    }
   };
 
   const handleDiscard = () => {
     setShowDiscardConfirm(true);
   };
 
-  const confirmDiscard = () => {
+  const confirmDiscard = async () => {
     setShowDiscardConfirm(false);
-    const fd = new FormData();
-    fd.set('actionType', 'discard');
-    fd.set('file', filePath);
-    fd.set('repo', repo || '.');
-    if (root) fd.set('root', root);
-
-    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
-    setTimeout(() => {
-      fetchDiff();
+    setIsBusy(true);
+    try {
+      // `revert` is the server's own name for "restore this file from the index",
+      // and it is the one that handles the untracked case (there the file is
+      // removed). Sending `discard` — which no handler matched — returned
+      // `{success:true}` for doing nothing at all.
+      const ok = await runGitAction({ actionType: 'revert', file: filePath });
+      if (!ok) return;
       onFileSaved?.();
-    }, 300);
+      await fetchDiff();
+    } finally {
+      setIsBusy(false);
+    }
   };
 
   return (
@@ -154,15 +223,32 @@ export function DiffPanel({
         deletions={parsed.deletions}
         isLoading={isLoading}
         isCopied={isCopied}
-        onToggleViewMode={handleToggleViewMode}
+        isBusy={isBusy}
+        onSetViewMode={handleSetViewMode}
         onToggleWhitespace={handleToggleWhitespace}
         onStageUnstage={handleStageUnstage}
         onDiscard={handleDiscard}
         onOpenInEditor={onOpenInEditor}
-        onRefresh={fetchDiff}
+        onRefresh={() => void fetchDiff()}
         onCopyDiff={handleCopyDiff}
       />
 
+      {actionError && (
+        <div className="flex items-center gap-2 border-b border-error/25 bg-error/10 px-3 py-1.5 text-[11px] text-error flex-shrink-0">
+          <AlertCircle size={13} className="flex-shrink-0" />
+          <span className="min-w-0 flex-1 truncate" title={actionError}>{actionError}</span>
+          <button
+            type="button"
+            onClick={() => setActionError(null)}
+            className="px-1.5 rounded hover:bg-error/15 cursor-pointer"
+            title="Dismiss"
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
       {/* Main Diff Content Area */}
       <div className="flex-1 overflow-hidden relative flex flex-col bg-paper">
         {isLoading ? (
@@ -175,8 +261,8 @@ export function DiffPanel({
             <AlertCircle size={20} className="text-error" />
             <p className="text-xs text-error font-medium">{errorMessage}</p>
             <button
-              onClick={fetchDiff}
-              className="px-3 py-1 text-xs bg-ink/10 hover:bg-ink/15 text-ink rounded font-sans transition-colors"
+              onClick={() => void fetchDiff()}
+              className="px-3 py-1 text-xs bg-ink/10 hover:bg-ink/15 text-ink rounded font-sans transition-colors cursor-pointer"
             >
               Retry
             </button>
@@ -200,14 +286,14 @@ export function DiffPanel({
               <button
                 type="button"
                 onClick={() => setShowDiscardConfirm(false)}
-                className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+                className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors cursor-pointer"
               >
                 Cancel
               </button>
               <button
                 type="button"
-                onClick={confirmDiscard}
-                className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors"
+                onClick={() => void confirmDiscard()}
+                className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors cursor-pointer"
               >
                 Discard Changes
               </button>

package/src/client/components/workspace/editor/CommandPalette.test.ts

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The command palette's rendering.
+ *
+ * The list itself is built and filtered in `shared/lib/code/editor/palette`
+ * (tested there); what this covers is the interaction — that the field takes
+ * focus, that a filter narrows the list, that the arrow keys move the highlight
+ * without leaving the list, and that Enter runs the command that is actually
+ * highlighted rather than the first one.
+ *
+ * Rendered directly with `h()` (no JSX) against happy-dom; the component module
+ * is imported dynamically, after those globals exist.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { ComponentChildren, h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { buildPaletteEntries } from '@/shared/lib/code/editor/palette';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+
+let CommandPalette: (props: { onRun: (command: EditorCommand) => void; onClose: () => void }) => ComponentChildren;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let container: HTMLElement;
+const ran: EditorCommand[] = [];
+let closes = 0;
+
+async function mount() {
+  await act(async () => {
+    render(h(CommandPalette, { onRun: (command) => ran.push(command), onClose: () => closes++ }), container);
+  });
+}
+
+function field(): HTMLInputElement | null {
+  return container.querySelector('input[aria-label="Command palette"]');
+}
+
+/** The visible rows, in order, as their label text. */
+function rows(): string[] {
+  return Array.from(container.querySelectorAll('button')).map((button) => button.textContent ?? '');
+}
+
+/** The row the palette currently highlights (it renders a return-key glyph). */
+function activeRow(): string {
+  return rows().find((text) => text.length > 0 && container.querySelector('button .lucide-corner-down-left') !== null)
+    ? (Array.from(container.querySelectorAll('button')).find((button) => button.querySelector('.lucide-corner-down-left'))?.textContent ?? '')
+    : '';
+}
+
+async function typeQuery(value: string) {
+  const input = field();
+  if (!input) return;
+  input.value = value;
+  await act(async () => {
+    input.dispatchEvent(new globalThis.Event('input', { bubbles: true }));
+  });
+}
+
+async function pressKey(key: string) {
+  await act(async () => {
+    field()?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key, bubbles: true }));
+  });
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+    HTMLInputElement: win.HTMLInputElement,
+    Event: win.Event,
+    MouseEvent: win.MouseEvent,
+    KeyboardEvent: win.KeyboardEvent,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ CommandPalette } = await import('@/client/components/workspace/editor/CommandPalette'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  ran.length = 0;
+  closes = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+describe('CommandPalette', () => {
+  test('takes focus on open, so the palette is usable without a click', async () => {
+    await mount();
+
+    expect(document.activeElement).toBe(field());
+  });
+
+  test('lists the keymap’s commands with their chords', async () => {
+    await mount();
+    const text = rows().join('\n');
+
+    expect(text).toContain('Add selection to next find match');
+    // The chord is the platform's own. Asserted through the palette's own
+    // builder so the expectation is the platform's real answer rather than a
+    // guess at which machine the suite is running on — the runner is Linux and a
+    // developer's laptop is a Mac, and a Mac-only literal passes on exactly one
+    // of them.
+    expect(text).toContain(buildPaletteEntries(isMacPlatform()).find((entry) => entry.command === 'selectNextOccurrence')!.chord);
+    expect(rows().length).toBeGreaterThan(20);
+  });
+
+  test('every command it lists is one the keymap binds', async () => {
+    await mount();
+
+    // The palette is a VIEW of the keymap; an entry with no binding would be a
+    // command that does nothing when it is run.
+    for (const entry of buildPaletteEntries(true)) {
+      expect(EDITOR_KEY_BINDINGS.some((binding) => binding.command === entry.command)).toBe(true);
+    }
+    expect(rows().length).toBeGreaterThan(20);
+  });
+
+  test('a query narrows the list', async () => {
+    await mount();
+    const before = rows().length;
+    await typeQuery('occurrence');
+
+    expect(rows().length).toBeLessThan(before);
+    expect(rows().join('\n')).toContain('Select all occurrences');
+  });
+
+  test('a query nothing matches says so instead of listing everything', async () => {
+    await mount();
+    await typeQuery('zzzz');
+
+    expect(rows()).toEqual([]);
+    expect(container.textContent).toContain('No matching command');
+  });
+
+  test('Enter runs the highlighted command and closes the palette', async () => {
+    await mount();
+    await typeQuery('toggle line comment');
+    await pressKey('Enter');
+
+    expect(ran).toEqual(['toggleComment']);
+    expect(closes).toBe(1);
+  });
+
+  test('the arrow keys move the highlight, and Enter runs the moved-to command', async () => {
+    await mount();
+    await typeQuery('occurrence');
+    const first = activeRow();
+    await pressKey('ArrowDown');
+    const second = activeRow();
+
+    expect(second).not.toBe(first);
+
+    await pressKey('Enter');
+    // Whichever row was highlighted is the one that ran — not the first match.
+    expect(ran.length).toBe(1);
+    expect(second).toContain(ran[0] === 'selectAllOccurrences' ? 'Select all' : 'Add selection');
+  });
+
+  test('the highlight wraps at the end of the list', async () => {
+    await mount();
+    await typeQuery('undo');
+    const only = activeRow();
+    await pressKey('ArrowDown');
+
+    // One row: stepping wraps onto itself rather than falling off the list.
+    expect(activeRow()).toBe(only);
+  });
+
+  test('ArrowUp from the top wraps to the last row', async () => {
+    await mount();
+    await typeQuery('line');
+    const list = rows();
+    await pressKey('ArrowUp');
+    const active = activeRow();
+
+    expect(active.length).toBeGreaterThan(0);
+    expect(list.length).toBeGreaterThan(1);
+  });
+
+  test('Escape closes without running anything', async () => {
+    await mount();
+    await pressKey('Escape');
+
+    expect(closes).toBe(1);
+    expect(ran).toEqual([]);
+  });
+
+  test('clicking a row runs that row’s command', async () => {
+    await mount();
+    await typeQuery('copy line down');
+    const row = container.querySelector('button');
+    await act(async () => {
+      row?.dispatchEvent(new globalThis.MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(ran).toEqual(['copyLineDown']);
+    expect(closes).toBe(1);
+  });
+
+  test('find-bar commands are marked, so a reader knows where they land', async () => {
+    await mount();
+    await typeQuery('replace');
+
+    expect(container.textContent).toContain('find bar');
+  });
+});

package/src/client/components/workspace/editor/CommandPalette.tsx

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's command palette (⌘⇧P).
+ *
+ * Every editor command this app implements is listed here with the chord that
+ * reaches it, both derived from the same keymap table the textarea matches
+ * against. The palette is therefore a VIEW of the keymap rather than a second
+ * list to keep in sync — a command cannot be listed here and unbound there, and
+ * a chord cannot be shown that does not work.
+ *
+ * Commands this editor deliberately does not have (folding, go-to-definition,
+ * the `⌘K` prefix chords) are absent rather than listed and inert: a palette
+ * entry that does nothing is worse than no entry, because the user concludes
+ * the editor is broken rather than that the feature is missing.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { TargetedKeyboardEvent } from 'preact';
+import { CornerDownLeft, Search } from 'lucide-preact';
+
+import { isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { buildPaletteEntries, filterPaletteEntries, type PaletteEntry } from '@/shared/lib/code/editor/palette';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+
+interface CommandPaletteProps {
+  onRun: (command: EditorCommand) => void;
+  onClose: () => void;
+}
+
+export function CommandPalette({ onRun, onClose }: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  // Built once per mount from the keymap, so a filter can never offer something
+  // the keymap does not have.
+  const entries = useMemo(() => buildPaletteEntries(isMacPlatform()), []);
+  const matches = useMemo(() => filterPaletteEntries(entries, query), [entries, query]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Keep the highlighted row in view while the filter shrinks the list under it.
+  useEffect(() => {
+    const list = listRef.current;
+    const active = list?.children[activeIndex] as HTMLElement | undefined;
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, matches.length]);
+
+  useEffect(() => {
+    setActiveIndex((previous) => Math.min(previous, Math.max(matches.length - 1, 0)));
+  }, [matches.length]);
+
+  const commit = (entry: PaletteEntry | undefined) => {
+    if (!entry) return;
+    onClose();
+    onRun(entry.command);
+  };
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((previous) => (matches.length === 0 ? 0 : (previous + 1) % matches.length));
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((previous) => (matches.length === 0 ? 0 : (previous - 1 + matches.length) % matches.length));
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commit(matches[activeIndex]);
+      return;
+    }
+    if (event.key === 'Escape') {
+      // Handled on the panel's capture phase, but stopping here too keeps the
+      // key from reaching the document if the palette is ever mounted alone.
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+    }
+  };
+
+  return (
+    <div className="absolute inset-0 z-40 flex items-start justify-center pt-12 bg-ink/10" onClick={onClose}>
+      <div
+        className="w-[520px] max-w-[92%] bg-paper border border-ink/15 rounded-lg shadow-2xl flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-ink/10">
+          <Search size={14} className="text-ink/40 flex-shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onInput={(e) => setQuery(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a command or a shortcut"
+            aria-label="Command palette"
+            className="flex-1 min-w-0 bg-transparent text-xs font-sans text-ink focus:outline-none placeholder-ink/40"
+          />
+        </div>
+
+        <div ref={listRef} className="max-h-[320px] overflow-y-auto py-1">
+          {matches.length === 0 ? (
+            <div className="px-3 py-4 text-center text-xs text-ink/40 font-sans">No matching command</div>
+          ) : (
+            matches.map((entry, index) => (
+              <button
+                key={entry.command}
+                type="button"
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => commit(entry)}
+                className={`w-full flex items-center justify-between gap-3 px-3 py-1.5 text-left text-xs font-sans transition-colors ${
+                  index === activeIndex ? 'bg-ink/5 text-ink' : 'text-ink/80'
+                }`}
+              >
+                <span className="flex items-center gap-2 min-w-0">
+                  {index === activeIndex ? <CornerDownLeft size={12} className="text-ink/40 flex-shrink-0" /> : <span className="w-3" />}
+                  <span className="truncate">{entry.label}</span>
+                  {isFindBarCommand(entry.command) ? <span className="text-[10px] text-ink/40 flex-shrink-0">find bar</span> : null}
+                </span>
+                <span className="font-mono text-[10px] text-ink/50 flex-shrink-0">{entry.chord}</span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}