Command palette shows your real shortcuts, up to three

vdavid · vdavid · commit 87df2ed951b7 · 2026-06-07T19:12:55.000+02:00
- Palette rows now read live effective bindings via `getEffectiveShortcutsReactive(command.id)` instead of the registry defaults in `command.shortcuts`, fixing the long-standing bug where a rebound command showed a combo that no longer worked.
- Each combo renders as a non-clickable, dense `ShortcutChip` (the row already owns the click); cap raised from two to three so power users can discover alternates like `⌘3` / `⌘F3`.
- Open palette stays in sync: a Settings/MCP rebind updates the rendered row live (reactive store subscription).
- Added a `size="sm"` variant to `ShortcutChip` (tighter padding + radius) for dense rows; first consumer is the palette. Catalog section + docs updated.
- On the accent-subtle cursor row, chip background lifts to `--color-bg-secondary` so chips stay legible against the tint in both themes.
- Removed the dead `formatShortcuts` helper (only used here).
- Tests: palette now pins effective-over-default, the three-cap, and live reactivity on rebind.
diff --git a/apps/desktop/src/lib/command-palette/CLAUDE.md b/apps/desktop/src/lib/command-palette/CLAUDE.md
@@ -58,7 +58,13 @@ scrollable-region rule has nothing to flag in the empty state, and `aria-expande
 **Fuzzy highlight rendering**: `highlightMatches()` converts the flat `matchedIndices` set into `{ text, highlighted }`
 segments and renders `<mark class="match-highlight">` for matched chars.
 
-**Shortcut display**: `formatShortcuts()` calls `.slice(0, 2)`; at most 2 shortcuts are shown per command.
+**Shortcut display**: each row reads `getEffectiveShortcutsReactive(command.id)` (live effective bindings, NOT the
+registry defaults in `command.shortcuts`), caps at three (`MAX_SHORTCUTS_SHOWN`), and renders each combo as a
+non-clickable, dense (`size="sm"`) `ShortcutChip`. The chips track rebinds live: `getEffectiveShortcutsReactive`
+subscribes the component to the shortcuts-store version, so a Settings/MCP rebind updates the open palette without a
+reopen. Chips are non-clickable because the whole row already owns the click (decision (a) in
+`docs/specs/shortcut-display-unification-plan.md`). On the accent-subtle cursor row, the chip background is lifted to
+`--color-bg-secondary` so it stays legible against the tint (both themes).
 
 **jsdom limitation**: `scrollIntoView` is not implemented in jsdom; tests mock it via
 `Element.prototype.scrollIntoView = vi.fn()`.
@@ -97,9 +103,13 @@ enough for ~60 commands that debouncing would only add latency. The `$derived` r
 synchronously on every keystroke, keeping results perfectly in sync with the input. Debouncing would be needed if the
 command list grew to thousands.
 
-**Decision**: `formatShortcuts()` caps display at 2 shortcuts via `.slice(0, 2)`. **Why**: Some commands have many
-shortcuts (e.g., `nav.parent` has `Backspace` and `Cmd+Up`). Showing all of them would crowd the result row. Two is
-enough for discoverability; the full list lives in the shortcut settings.
+**Decision**: Shortcut display caps at three (`MAX_SHORTCUTS_SHOWN`) and reads the live effective bindings via
+`getEffectiveShortcutsReactive`, not the registry defaults. **Why**: Some commands have many shortcuts (for example,
+`nav.parent` has `Backspace` and `⌘↑`); showing all crowds the row. Three is the product-decided cap (power users use
+the palette to discover alternates like `⌘3` / `⌘F3`) — the dense `size="sm"` chip keeps three legible without dropping
+the count. Reading the effective bindings (instead of `command.shortcuts`) fixes the long-standing bug where a rebound
+command showed a combo that no longer worked; the reactive read also keeps an open palette in sync with a mid-session
+rebind. The full list still lives in the shortcut settings.
 
 ## Gotchas
 
@@ -128,4 +138,6 @@ Add the command to `$lib/commands/command-registry.ts` and handle the ID in the
 
 - `$lib/commands`: `searchCommands`, `getPaletteCommands`, `CommandMatch`
 - `$lib/app-status-store`: `pruneRecentCommands`, `pushRecentCommand`
+- `$lib/shortcuts/reactive-shortcuts.svelte`: `getEffectiveShortcutsReactive` (live effective bindings per row)
+- `$lib/ui/ShortcutChip.svelte`: renders each combo (literal `key` mode, `size="sm"`, non-clickable)
 - CSS variables from `app.css` (`--z-modal`, `--color-accent-subtle`, `--color-bg-secondary`, etc.)
diff --git a/apps/desktop/src/lib/command-palette/CommandPalette.svelte b/apps/desktop/src/lib/command-palette/CommandPalette.svelte
@@ -11,6 +11,11 @@
     import { onDestroy, onMount, tick } from 'svelte'
     import { searchCommands, getPaletteCommands, type CommandMatch, type CommandId } from '$lib/commands'
     import { pruneRecentCommands, pushRecentCommand } from '$lib/app-status-store'
+    import { getEffectiveShortcutsReactive } from '$lib/shortcuts/reactive-shortcuts.svelte'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
+
+    /** How many shortcut chips a palette row shows (power users discover alternates). */
+    const MAX_SHORTCUTS_SHOWN = 3
 
     interface Props {
         /** Called when user selects a command */
@@ -167,11 +172,6 @@
 
         return segments
     }
-
-    /** Format shortcuts for display */
-    function formatShortcuts(shortcuts: string[]): string {
-        return shortcuts.slice(0, 2).join(' / ')
-    }
 </script>
 
 <div
@@ -214,6 +214,7 @@
                 tabindex="-1"
             >
                 {#each results as match, index (match.command.id)}
+                    {@const shortcuts = getEffectiveShortcutsReactive(match.command.id).slice(0, MAX_SHORTCUTS_SHOWN)}
                     {#if recentCount > 0 && index === 0}
                         <div class="group-heading">Recent</div>
                     {/if}
@@ -247,8 +248,14 @@
                                 {/if}
                             {/each}
                         </span>
-                        {#if match.command.shortcuts.length > 0}
-                            <span class="shortcuts">{formatShortcuts(match.command.shortcuts)}</span>
+                        {#if shortcuts.length > 0}
+                            <span class="shortcuts">
+                                <!-- Key by index, not the combo string: a user can bind the same
+                                     combo twice, and a keyed-by-value each would throw on the dupe. -->
+                                {#each shortcuts as shortcut, i (i)}
+                                    <ShortcutChip key={shortcut} size="sm" clickable={false} />
+                                {/each}
+                            </span>
                         {/if}
                     </div>
                 {/each}
@@ -351,8 +358,10 @@
         background: var(--color-accent-subtle);
     }
 
-    .result-item.is-under-cursor .shortcuts {
-        color: var(--color-text-secondary);
+    /* On the accent-subtle cursor row, lift the chips off the tinted background so
+       they stay legible (the default tertiary bg blends into the highlight). */
+    .result-item.is-under-cursor :global(.shortcut-chip) {
+        background: var(--color-bg-secondary);
     }
 
     .command-name {
@@ -378,9 +387,9 @@
     }
 
     .shortcuts {
+        display: flex;
+        gap: var(--spacing-xs);
         margin-left: var(--spacing-lg);
-        font-size: var(--font-size-sm);
-        color: var(--color-text-tertiary);
         flex-shrink: 0;
     }
 
diff --git a/apps/desktop/src/lib/command-palette/CommandPalette.test.ts b/apps/desktop/src/lib/command-palette/CommandPalette.test.ts
@@ -1,9 +1,13 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { mount, unmount } from 'svelte'
-import { tick } from 'svelte'
+import { tick, flushSync } from 'svelte'
 import CommandPalette from './CommandPalette.svelte'
 import { pruneRecentCommands, pushRecentCommand } from '$lib/app-status-store'
+import { setShortcut, resetShortcut } from '$lib/shortcuts/shortcuts-store'
 
+// These ids are real command-registry entries, so the palette's effective-shortcut
+// reads (which hit the real registry + store, not the mocked `$lib/commands`)
+// resolve against known bindings. `app.quit` defaults to ⌘Q, `app.about` is unbound.
 const ALL_COMMANDS = [
   { id: 'app.quit', name: 'Quit Cmdr', scope: 'App', shortcuts: ['⌘Q'], showInPalette: true },
   { id: 'app.about', name: 'About Cmdr', scope: 'App', shortcuts: [], showInPalette: true },
@@ -17,6 +21,33 @@ vi.mock('$lib/app-status-store', () => ({
   pushRecentCommand: vi.fn().mockResolvedValue(undefined),
 }))
 
+// The shortcuts store persists to a Tauri plugin store and syncs menu accelerators;
+// stub both so the palette can read/rebind effective shortcuts in jsdom.
+vi.mock('@tauri-apps/plugin-store', () => ({
+  load: vi.fn(() =>
+    Promise.resolve({
+      get: vi.fn(() => Promise.resolve(undefined)),
+      set: vi.fn(() => Promise.resolve()),
+      save: vi.fn(() => Promise.resolve()),
+      keys: vi.fn(() => Promise.resolve([])),
+      delete: vi.fn(() => Promise.resolve()),
+    }),
+  ),
+}))
+
+vi.mock('$lib/ipc/bindings', () => ({
+  commands: { updateMenuAccelerator: vi.fn(() => Promise.resolve({ status: 'ok' })) },
+}))
+
+/** Read the chip text inside the row for a given command id. */
+function shortcutTextsFor(target: HTMLElement, commandId: string): string[] {
+  // Attribute selector, not `#palette-option-app.quit` — a dotted command id would
+  // parse the part after the dot as a class selector.
+  const row = target.querySelector(`[id="palette-option-${commandId}"]`)
+  if (!row) return []
+  return Array.from(row.querySelectorAll('.shortcuts .shortcut-chip')).map((el) => el.textContent)
+}
+
 // Mock the commands module to provide test data
 vi.mock('$lib/commands', () => ({
   getPaletteCommands: vi.fn(() => ALL_COMMANDS),
@@ -51,6 +82,12 @@ describe('CommandPalette', () => {
     vi.mocked(pushRecentCommand).mockClear()
   })
 
+  afterEach(() => {
+    // Drop any rebinds so a custom shortcut doesn't leak into the next test.
+    resetShortcut('app.quit')
+    resetShortcut('view.showHidden')
+  })
+
   it('renders the modal with search input', async () => {
     const target = document.createElement('div')
     mount(CommandPalette, {
@@ -449,6 +486,58 @@ describe('CommandPalette', () => {
     expect(input?.getAttribute('aria-expanded')).toBe('false')
   })
 
+  it('renders the effective custom binding, not the registry default', async () => {
+    // app.quit defaults to ⌘Q; rebind it and the row must show the custom combo.
+    setShortcut('app.quit', 0, '⌘0')
+
+    const target = document.createElement('div')
+    mount(CommandPalette, {
+      target,
+      props: { onExecute: mockOnExecute, onClose: mockOnClose },
+    })
+    await tick()
+
+    expect(shortcutTextsFor(target, 'app.quit')).toEqual(['⌘0'])
+  })
+
+  it('caps the shown shortcuts at three', async () => {
+    // Bind four shortcuts; only the first three render.
+    setShortcut('view.showHidden', 0, '⌘1')
+    setShortcut('view.showHidden', 1, '⌘2')
+    setShortcut('view.showHidden', 2, '⌘3')
+    setShortcut('view.showHidden', 3, '⌘4')
+
+    const target = document.createElement('div')
+    mount(CommandPalette, {
+      target,
+      props: { onExecute: mockOnExecute, onClose: mockOnClose },
+    })
+    await tick()
+
+    expect(shortcutTextsFor(target, 'view.showHidden')).toEqual(['⌘1', '⌘2', '⌘3'])
+  })
+
+  it('updates a rendered row live when the binding changes while the palette is open', async () => {
+    // Custom bindings are stored verbatim (no platform conversion), so they assert
+    // cleanly regardless of the test platform.
+    setShortcut('app.quit', 0, '⌘7')
+
+    const target = document.createElement('div')
+    mount(CommandPalette, {
+      target,
+      props: { onExecute: mockOnExecute, onClose: mockOnClose },
+    })
+    await tick()
+
+    expect(shortcutTextsFor(target, 'app.quit')).toEqual(['⌘7'])
+
+    // Simulate a rebind (the MCP / Settings path) while the palette stays open.
+    setShortcut('app.quit', 0, '⌘8')
+    flushSync()
+
+    expect(shortcutTextsFor(target, 'app.quit')).toEqual(['⌘8'])
+  })
+
   it('does not throw if the previously focused element is no longer in the DOM', async () => {
     const trigger = document.createElement('button')
     document.body.appendChild(trigger)
diff --git a/apps/desktop/src/lib/ui/CLAUDE.md b/apps/desktop/src/lib/ui/CLAUDE.md
@@ -338,11 +338,12 @@ the per-component tier rules in `age-tier-utils.ts`, and the HTML-string variant
 `ShortcutChip.svelte`: the one component that renders a keyboard shortcut anywhere in the UI, so the look stays uniform
 and new call sites can't hand-roll a divergent style. Two mutually exclusive modes:
 
-| Prop        | Type         | Notes                                                                                                    |
-| ----------- | ------------ | -------------------------------------------------------------------------------------------------------- |
-| `commandId` | `CommandId?` | Dynamic mode. Renders the command's first effective shortcut via `getFirstShortcutReactive`, reactively. |
-| `key`       | `string?`    | Literal mode. A fixed key string (toast snapshots, fixed interaction keys). Never clickable.             |
-| `clickable` | `boolean?`   | Default `true` in `commandId` mode; ignored (forced non-clickable) in literal mode.                      |
+| Prop        | Type            | Notes                                                                                                    |
+| ----------- | --------------- | -------------------------------------------------------------------------------------------------------- |
+| `commandId` | `CommandId?`    | Dynamic mode. Renders the command's first effective shortcut via `getFirstShortcutReactive`, reactively. |
+| `key`       | `string?`       | Literal mode. A fixed key string (toast snapshots, fixed interaction keys). Never clickable.             |
+| `clickable` | `boolean?`      | Default `true` in `commandId` mode; ignored (forced non-clickable) in literal mode.                      |
+| `size`      | `'sm' \| 'md'?` | Visual density. `md` (default) is the standalone pill; `sm` tightens padding + radius for dense rows.    |
 
 Exactly one of `commandId` / `key` must be set (a dev-time error otherwise).
 
@@ -367,7 +368,9 @@ loads it via dynamic `import()` inside the click handler only. Keep it that way.
 **Visual.** Neutral pill modeled on the Settings `.shortcut-pill` (`--color-bg-tertiary` background, 1px
 `--color-border`, `--radius-sm`, `--font-size-xs`), NOT the tooltip's accent chip (`.cmdr-tooltip-kbd` stays its accent
 look — different context). The clickable variant adds an accent border + `--color-accent-text` on hover; cursor stays
-`default` per the app-wide convention (only `LinkButton` opts into `cursor: pointer`).
+`default` per the app-wide convention (only `LinkButton` opts into `cursor: pointer`). `size="sm"` shrinks padding to
+`0 var(--spacing-xs)` and the corner radius to `--radius-xs` for dense rows where several chips sit side by side — the
+command palette (up to three chips per row) is the first consumer.
 
 The `shortcut-<commandId>` anchor-id convention (shared with the Settings section the deep link targets) lives as the
 exported `shortcutAnchorId(commandId)` in `lib/settings/settings-window.ts` so it can't drift.
diff --git a/apps/desktop/src/lib/ui/ShortcutChip.svelte b/apps/desktop/src/lib/ui/ShortcutChip.svelte
@@ -41,9 +41,15 @@
          * rows, F-key bar buttons) where a nested click target would double-activate.
          */
         clickable?: boolean
+        /**
+         * Visual density. `md` (default) is the standalone pill. `sm` tightens the
+         * padding and corner radius for dense rows where several chips sit side by
+         * side (the command palette caps at three).
+         */
+        size?: 'sm' | 'md'
     }
 
-    const { commandId, key, clickable = true }: Props = $props()
+    const { commandId, key, clickable = true, size = 'md' }: Props = $props()
 
     if ((commandId === undefined) === (key === undefined)) {
         throw new Error('ShortcutChip: set exactly one of `commandId` or `key`')
@@ -69,14 +75,15 @@
         <button
             type="button"
             class="shortcut-chip clickable"
+            class:sm={size === 'sm'}
             aria-label="Customize the {commandName} shortcut"
             onclick={handleClick}
             use:tooltip={'Customize this shortcut'}
         >
             <kbd>{value}</kbd>
         </button>
     {:else}
-        <kbd class="shortcut-chip">{value}</kbd>
+        <kbd class="shortcut-chip" class:sm={size === 'sm'}>{value}</kbd>
     {/if}
 {/if}
 
@@ -98,6 +105,13 @@
         white-space: nowrap;
     }
 
+    /* Dense variant: tighter padding + corner radius so several chips fit a row
+       (the command palette shows up to three). */
+    .shortcut-chip.sm {
+        padding: 0 var(--spacing-xs);
+        border-radius: var(--radius-xs);
+    }
+
     /* The clickable variant is a real <button> wrapping the <kbd>. Reset the button
        chrome so it reads as the same pill; the inner <kbd> carries no border of its own. */
     button.shortcut-chip {
diff --git a/apps/desktop/src/lib/ui/ShortcutChip.test.ts b/apps/desktop/src/lib/ui/ShortcutChip.test.ts
@@ -102,7 +102,9 @@ describe('ShortcutChip', () => {
 
     button?.click()
     // The dynamic import resolves on a microtask; let the event loop drain.
-    await vi.waitFor(() => { expect(openShortcutCustomization).toHaveBeenCalledWith('downloads.goToLatest'); })
+    await vi.waitFor(() => {
+      expect(openShortcutCustomization).toHaveBeenCalledWith('downloads.goToLatest')
+    })
   })
 
   it('renders a non-clickable kbd when clickable is false', () => {
diff --git a/apps/desktop/src/routes/dev/components/sections/ShortcutChip.svelte b/apps/desktop/src/routes/dev/components/sections/ShortcutChip.svelte
@@ -30,6 +30,16 @@
             <span class="row-note">For chips nested inside another interactive control (palette rows, F-key bar)</span>
         </div>
 
+        <div class="row">
+            <span class="row-label">Dense (size="sm")</span>
+            <div class="chips">
+                <ShortcutChip key="⌘1" size="sm" />
+                <ShortcutChip key="⌘2" size="sm" />
+                <ShortcutChip key="⌘3" size="sm" />
+            </div>
+            <span class="row-note">Tighter padding + radius for dense rows (the command palette)</span>
+        </div>
+
         <div class="row">
             <span class="row-label">Command (unbound)</span>
             <div class="chips">
