[FresnelR27]

Problem

Shortcut hints were rendered through overlapping implementations: KeyboardShortcut, the settings-only KeyBadge, raw sidebar text, and bespoke modal CSS. Their parsers, icon treatment, key widths, typography, and spacing had drifted, so letter keys did not occupy the same visual slot as SVG glyphs and Settings shortcuts behaved differently from other surfaces. The sidebar shortcut field also carried relative-time metadata, hiding which values represented actual keyboard chords.

Solution

Make KeyboardShortcut the canonical visual renderer across Settings, navigation rows, Quick Actions, API Calls, and the component-issue modal. It now supports the icon-backed keys and alternative chord parsing previously owned by KeyBadge; single-character letters use an icon-sized slot, shortcut text is reduced by one pixel at each pill size, and every pill size has 2px more left than right padding for optical balance.

Remove KeyBadge and its dedicated tests/CSS, remove the redundant workStation presentation variant, and move sidebar age metadata into a distinct trailingLabel field. Widen the shared panel-header subtitle to ReactNode so shortcut pills can be rendered without local wrappers. Update the cloud fork parent fixture to use the metadata field and assert that provenance text never renders as keyboard keys.

Potential risks

Centralizing parsing can change the appearance of uncommon shortcut encodings; coverage includes named modifiers, packed macOS chords, function keys, special keys, arrows, empty values, and alternative chords. The PanelHeader subtitle type broadens an internal rendering contract but remains source-compatible with existing strings. No persistence, configuration format, network, IPC, or wire behavior changes.

The padding and typography changes are user-visible. Automated markup assertions cover their tokens, but no post-change desktop screenshots were captured because Computer Use was not authorized; theme and live-layout appearance remain the primary unverified path.

Verification

• pnpm test -- src/components/KeyboardShortcut/index.test.ts src/components/KeyboardShortcut/index.bindings.test.ts src/modules/MainApp/Settings/sections/ShortcutsSection/ShortcutRecorder.test.ts src/scaffold/NavigationSidebar/components/NavigationMenu/NavigationMenu/NavigationMenuRow.test.ts src/scaffold/NavigationSidebar/connectors/WorkstationSidebarConnector/cloudSessionsSection.rowItemBuilder.test.ts src/scaffold/NavigationSidebar/connectors/useSessionMenuItems/__tests__/menuItemBuilders.test.ts src/scaffold/NavigationSidebar/connectors/__tests__/workstationSidebarMenuItems.test.ts — 51 tests passed across 7 files
• pnpm test -- src/features/Org2Cloud/cloudSessionThreads.test.ts src/scaffold/NavigationSidebar/components/NavigationMenu/NavigationMenu/NavigationMenuRow.test.ts — 36 tests passed across 2 files after reproducing the CI failure
• pnpm lint:file over all changed TypeScript/TSX files — passed
• pnpm typecheck:fast — passed
• git diff --check — passed
• Source sweep found no production KeyBadge imports or definitions and no production <kbd> outside KeyboardShortcut
• Final diff scan found no secrets, tokens, personal paths, debug artifacts, or unrelated files
• Desktop visual verification was not run because Computer Use was not authorized

Audit

Frontend UI audit: 2 fix, 2 keep with reason, 0 abstract. Report: docs/frontend-ui-audit-2026-09-15/ShortcutPresentationConsolidation.md.

Architecture review covered component ownership, public presentation types, import dependencies, dead-code removal, consumer migration, and regression boundaries. Rust, persistence, IPC/wire protocol, background lifecycle, and performance layers were skipped because this is a stateless frontend presentation refactor.