Unify fixed-key hints with the shortcut chip

- Render fixed interaction keys with literal-mode `ShortcutChip`s so they match the rest of the app's shortcut styling: search empty-state tip (`⌘N` / `⌘H` / `⌘Enter`), the run button's `⏎`, the scope popover's `⌥C` / `⌥V`, the recent-items footer `⌘H` and popover `↑↓` / `Enter`, the viewer's binary-warning `⇧Space` / `Enter`, `LoadingIcon`'s cancel `Esc`, `PtpcameradDialog`'s `Ctrl+C`, and the network browser's `⌘R` refresh hint.
- Drop the now-dead ad-hoc `<kbd>` / hint-span styles each site carried; the chip is the single source of truth for the look.
- Keep, by design, the contexts where a boxed chip reads worse: the mode-chip `.tg-hint` glyphs, the query-dialog footer action-button suffix hints, and the viewer status-bar's dense one-line shortcut list. Rationale recorded in `lib/ui/CLAUDE.md`.
- Viewer bundle stays clean: the chip's deep-link helper is lazy-imported, so literal chips ship to the capability-restricted viewer window with zero Tauri window-creation surface at module eval.
- Update touched component tests and the `lib/ui` / `lib/query-ui` docs.

Author: vdavid

apps/desktop/src/lib/file-explorer/network/NetworkBrowser.svelte

@@ -36,6 +36,7 @@
     import { handleNavigationShortcut } from '../navigation/keyboard-shortcuts'
     import { confirmDialog } from '$lib/utils/confirm-dialog'
     import { addToast } from '$lib/ui/toast'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import { triggerNetworkDiscovery } from './lazy-trigger'
 
     /** Row height for host list (matches Full list) */
@@ -629,7 +630,7 @@
     {#if hosts.length > 0}
         <button class="network-status-bar" onclick={handleRefreshClick} aria-label="Refresh network hosts">
             <span class="status-text">{hosts.length} {hosts.length === 1 ? 'host' : 'hosts'}</span>
-            <span class="refresh-hint">Press ⌘R or click here to refresh</span>
+            <span class="refresh-hint">Press <ShortcutChip key="⌘R" size="sm" /> or click here to refresh</span>
         </button>
     {/if}
 </div>
@@ -811,5 +812,8 @@
         padding-left: var(--spacing-md);
         color: var(--color-text-tertiary);
         white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-xxs);
     }
 </style>

apps/desktop/src/lib/mtp/PtpcameradDialog.svelte

@@ -4,6 +4,7 @@
     import ModalDialog from '$lib/ui/ModalDialog.svelte'
     import CommandBox from '$lib/ui/CommandBox.svelte'
     import Button from '$lib/ui/Button.svelte'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
 
     interface Props {
         /** The process name that's blocking (like "pid 45145, ptpcamerad"). */
@@ -60,8 +61,8 @@
         </div>
 
         <p class="help-text">
-            This command continuously stops ptpcamerad while running. Press <kbd>Ctrl+C</kbd> in Terminal to stop it when
-            done.
+            This command continuously stops ptpcamerad while running. Press <ShortcutChip key="Ctrl+C" /> in Terminal to
+            stop it when done.
         </p>
 
         <div class="actions">
@@ -114,15 +115,6 @@
         line-height: 1.5;
     }
 
-    .help-text kbd {
-        background: var(--color-bg-tertiary);
-        padding: var(--spacing-xxs) var(--spacing-xs);
-        border-radius: var(--radius-sm);
-        font-family: var(--font-system);
-        font-size: var(--font-size-sm);
-        border: 1px solid var(--color-border-strong);
-    }
-
     .actions {
         display: flex;
         gap: var(--spacing-md);

apps/desktop/src/lib/query-ui/CLAUDE.md

@@ -191,6 +191,12 @@ Small contracts that apply to every consumer of the query UI:
 - Each chip's tooltip leads with the full text so a CSS-ellipsis-truncated chip stays readable on hover.
 - Path column font is `--font-size-sm` (matching the filename column) with `--spacing-xxs` row vertical padding so the
   row height stays compact.
+- **Fixed interaction keys render as literal `ShortcutChip`s** (`size="sm"` in dense slots): the run button's `⏎`, the
+  empty-state tip (`⌘N` / `⌘H` / `⌘Enter`, in `EmptyState.svelte`), the scope popover's `⌥C` / `⌥V`, and the recent-items
+  footer's `⌘H` and popover's `↑↓` / `Enter`. These are dialog-internal keys with no registry command, so the chip only
+  unifies their look — never clickable, never dynamic. The mode-chip `.tg-hint` glyphs (`⌥A` / `⌥F` / `⌥R`) and the
+  footer action-button hints (`Go to file ⏎`, `Show all in main window ⏎`) deliberately stay un-boxed; see
+  `lib/ui/CLAUDE.md` § ShortcutChip for the rationale.
 
 Chip-side behaviors live in [`filter-chips/CLAUDE.md`](filter-chips/CLAUDE.md); search-specific ones in
 `lib/search/CLAUDE.md`.

apps/desktop/src/lib/query-ui/EmptyState.svelte

@@ -15,6 +15,7 @@
      */
     import { formatNumber } from '$lib/file-explorer/selection/selection-info-utils'
     import { pluralize } from '$lib/utils/pluralize'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import type { SearchMode } from './query-filter-state.svelte'
 
     interface ExampleChip {
@@ -89,9 +90,9 @@
         <p class="index-status">Index ready · {formattedCount} {pluralize(indexEntryCount, 'entry', 'entries')}</p>
     {/if}
     <p class="tip">
-        Tip: <kbd>⌘N</kbd> starts fresh, <kbd>⌘H</kbd> shows recent searches{#if aiEnabled}, <kbd
-                >⌘Enter</kbd
-            > runs an AI search{/if}.
+        Tip: <ShortcutChip key="⌘N" /> starts fresh, <ShortcutChip key="⌘H" /> shows recent searches{#if aiEnabled}, <ShortcutChip
+                key="⌘Enter"
+            /> runs an AI search{/if}.
     </p>
 </div>
 
@@ -173,15 +174,10 @@
         color: var(--color-text-tertiary);
         font-size: var(--font-size-xs);
         margin: 0;
-    }
-
-    kbd {
-        font-family: var(--font-mono);
-        font-size: var(--font-size-xs);
-        background: var(--color-bg-tertiary);
-        border: 1px solid var(--color-border-subtle);
-        border-radius: var(--radius-xs);
-        padding: 0 var(--spacing-xxs);
-        color: var(--color-text-primary);
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-xxs);
     }
 </style>

apps/desktop/src/lib/query-ui/QueryBar.svelte

@@ -20,6 +20,7 @@
      *   - ⌘1/⌘2/⌘3 switch modes (numbering changes when AI is off).
      */
     import { tooltip } from '$lib/tooltip/tooltip'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import type { SearchMode } from './query-filter-state.svelte'
 
     interface Props {
@@ -122,7 +123,7 @@
         aria-label={runTitle}
     >
         <span class="run-label">Search</span>
-        {#if showEnterHint}<span class="run-enter-hint" aria-hidden="true">⏎</span>{/if}
+        {#if showEnterHint}<ShortcutChip key="⏎" size="sm" />{/if}
     </button>
 </div>
 
@@ -195,13 +196,6 @@
         line-height: 1;
     }
 
-    .run-enter-hint {
-        font-family: var(--font-mono);
-        font-size: var(--font-size-xs);
-        color: var(--color-text-tertiary);
-        opacity: 0.8;
-    }
-
     .run-button:hover:not(:disabled) {
         background: var(--color-bg-tertiary);
         color: var(--color-text-primary);

apps/desktop/src/lib/query-ui/QueryBar.svelte.test.ts

@@ -118,9 +118,10 @@ describe('SearchBar', () => {
     // No leading icon. The corner-down-left lucide icon used to live here.
     const svgs = button?.querySelectorAll('svg') ?? []
     expect(svgs.length).toBe(0)
-    // Exactly one "⏎" hint inside the button.
-    const enterHints = button?.querySelectorAll('.run-enter-hint') ?? []
+    // Exactly one "⏎" hint chip inside the button.
+    const enterHints = button?.querySelectorAll('.shortcut-chip') ?? []
     expect(enterHints.length).toBe(1)
+    expect(enterHints[0]?.textContent).toBe('⏎')
     // The visible label reads "Search ⏎" (a single space between "Search" and "⏎").
     const text = button?.textContent.replace(/\s+/g, ' ').trim()
     expect(text).toBe('Search ⏎')

apps/desktop/src/lib/query-ui/filter-chips/ScopeFilterPopover.svelte

@@ -9,6 +9,7 @@
      * stays in the parent so the dialog-level keymap lives next to the popovers it targets.
      */
     import FilterChipPopover from './FilterChipPopover.svelte'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import { tooltip } from '$lib/tooltip/tooltip'
     import './filter-popover.css'
 
@@ -126,7 +127,7 @@
                 }}
             >
                 Use current folder
-                <kbd class="footer-kbd">⌥C</kbd>
+                <ShortcutChip key="⌥C" size="sm" />
             </button>
             <button
                 type="button"
@@ -137,7 +138,7 @@
                 }}
             >
                 All folders
-                <kbd class="footer-kbd">⌥V</kbd>
+                <ShortcutChip key="⌥V" size="sm" />
             </button>
         </div>
     </div>
@@ -234,16 +235,4 @@
         opacity: 0.5;
         cursor: not-allowed;
     }
-
-    .footer-kbd {
-        font-family: var(--font-mono);
-        font-size: var(--font-size-xs);
-        font-weight: 500;
-        color: var(--color-accent-text);
-        background: var(--color-accent-subtle);
-        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-        padding: 1px 4px;
-        border-radius: var(--radius-sm);
-        line-height: 1;
-    }
 </style>

apps/desktop/src/lib/query-ui/recent-items/RecentItemsFooter.svelte

@@ -18,6 +18,7 @@
      */
     import { onDestroy, tick } from 'svelte'
     import { tooltip } from '$lib/tooltip/tooltip'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import { computeRecentChipsLayout } from '$lib/query-ui/recent-chips-layout'
     import { modeBadge } from './recent-items-utils'
     import type { RecentItemAdapter, RecentItemKey } from './recent-items-types'
@@ -210,7 +211,7 @@
             use:tooltip={{ text: trailingTooltipText, shortcut: trailingShortcut }}
             aria-label={ariaAllButtonLabel}
         >
-            {trailingLabel}<span class="shortcut-hint" aria-hidden="true">{trailingShortcut}</span>
+            {trailingLabel}<ShortcutChip key={trailingShortcut} size="sm" />
         </button>
     </div>
 {/if}
@@ -313,15 +314,4 @@
         font-style: italic;
         color: var(--color-text-tertiary);
     }
-
-    /* Inline ⌘H hint after the "All searches…" label. Tertiary color so it
-       reads as discoverability cue, not action label. */
-    .shortcut-hint {
-        margin-left: var(--spacing-xs);
-        font-family: var(--font-mono);
-        font-size: var(--font-size-xs);
-        color: var(--color-text-tertiary);
-        opacity: 0.8;
-        font-style: normal;
-    }
 </style>

apps/desktop/src/lib/query-ui/recent-items/RecentItemsPopover.svelte

@@ -19,6 +19,7 @@
      */
     import uFuzzy from '@leeoniya/ufuzzy'
     import FilterChipPopover from '../filter-chips/FilterChipPopover.svelte'
+    import ShortcutChip from '$lib/ui/ShortcutChip.svelte'
     import { modeBadge } from './recent-items-utils'
     import type { RecentItemAdapter, RecentItemKey, RecentItemView } from './recent-items-types'
 
@@ -195,7 +196,10 @@
                 {/each}
             {/if}
         </div>
-        <div class="hint">↑↓ to move · Enter to run · right-click to remove</div>
+        <div class="hint">
+            <ShortcutChip key="↑↓" size="sm" /> to move · <ShortcutChip key="Enter" size="sm" /> to run · right-click to
+            remove
+        </div>
     </div>
 </FilterChipPopover>
 
@@ -278,6 +282,10 @@
     }
 
     .hint {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing-xxs);
         color: var(--color-text-tertiary);
         font-size: var(--font-size-xs);
         padding-top: var(--spacing-xxs);

apps/desktop/src/lib/ui/CLAUDE.md

@@ -184,7 +184,8 @@ Progressive status text driven by props (mutually exclusive, evaluated top-down)
 3. `openingFolder` true → "Opening folder..."
 4. Default → "Loading..."
 
-`showCancelHint` adds "Press ESC to cancel and go back" below the spinner. The container uses a 400ms `fadeIn` animation
+`showCancelHint` adds "Press [Esc] to cancel and go back" (the key rendered as a literal `ShortcutChip`) below the
+spinner. The container uses a 400ms `fadeIn` animation
 where the first 50% is invisible (effectively 200ms before fade begins), avoiding flash for fast loads.
 
 ## ProgressBar
@@ -375,6 +376,31 @@ 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.
 
+**Where literal chips render the fixed interaction keys (Class B).** Beyond the live `commandId` sites, literal-mode
+chips give the uniform key look to fixed (non-customizable) interaction keys: the search dialog's empty-state tip
+(`⌘N` / `⌘H` / `⌘Enter`), the run button's `⏎`, the scope popover's `⌥C` / `⌥V`, the recent-items footer's `⌘H` and
+popover's `↑↓` / `Enter`, the viewer's binary-warning `⇧Space` / `Enter`, `LoadingIcon`'s `Esc` cancel hint, the
+`PtpcameradDialog` `Ctrl+C`, and the network browser's `⌘R` refresh hint. These keys are static by nature (no registry
+command, never clickable); the chip only unifies their appearance.
+
+**Class B sites kept un-migrated (deliberate exceptions):**
+
+- **`ModeChips` / `ToggleGroup` `.tg-hint` glyphs** (`⌥A` / `⌥F` / `⌥R`): these are whisper-quiet tertiary mono text
+  baked into a segmented-control cell. A boxed chip reads heavier than the surrounding cell label and fights the
+  control's calm rhythm, so the hint style stays. (Pre-decided in the plan.)
+- **The `QueryDialog` footer action-button hints** (`.shortcut-hint` / `.shortcut-on-primary`, e.g. `Go to file ⏎`,
+  `Show all in main window ⏎`): the key reads as a suffix fused into the button's own label ("Go to file" + "⏎" is one
+  phrase). Boxing it fragments the label from the key and the neutral pill clashes on the accent primary button. Kept as
+  integrated microcopy, same call as the F-key bar in M4.
+- **`ViewerStatusBar`'s shortcut line** (`W wrap · F tail · ⌘A select all · …`): a dense single tertiary line of six
+  key+description pairs. Boxing each key would make the calm status bar loud and risk overflow; the run-on prose form is
+  the right treatment here.
+- **`KeyboardShortcutsSection`'s "Press ESC to clear"**: lives inside the Settings shortcuts editor, which is out of
+  scope for chip migration (it IS the editor).
+
+The litmus test for a future Class B site: migrate when the chip reads same-or-better than the current treatment; keep
+the current treatment (and note it here) when the boxed pill genuinely reads worse in a dense or label-fused context.
+
 ## SectionCard
 
 The canonical "grouped card" primitive that mirrors macOS System Settings on Tahoe: an optional label sitting on its own