feat(shell): keyboard shortcuts and command palette

[rivodotlove]

Summary

• Command palette (⌘K / ⌘⇧P) — fuzzy search over tools registry, opens tab on select
• Sidebar toggle (⌘B) — collapse/expand via panel imperative API, state persisted to localStorage
• Close active tab (⌘⌥W)
• Next / prev tab (⌘⌥→ / ⌘⌥←)
• Shortcuts cheatsheet (?) — Escape to close, status bar button also triggers it
• useShellStore (Zustand) — centralises palette/cheatsheet/sidebar state
• src/lib/hotkeys.ts — single source of truth for command strings, labels, display keys

Dependencies

• react-hotkeys-hook v5
• cmdk v1

Test plan

• ⌘K and ⌘⇧P open command palette
• Palette fuzzy filters tools, Enter navigates and opens tab
• Escape closes palette
• ⌘B toggles sidebar; collapsed state persists on reload
• ⌘⌥W closes active tab and navigates to next or home
• ⌘⌥→ / ⌘⌥← cycle through open tabs
• ? opens cheatsheet; Escape closes it
• Status bar Shortcuts button opens cheatsheet
• pnpm check clean

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Added command palette for quick tool access via keyboard shortcut.
  • Added keyboard shortcuts cheatsheet modal.
  • Introduced keyboard shortcuts for sidebar toggle, tab navigation, and palette access.
  • Added sidebar collapse/expand functionality.

• Chores

  • Updated dependencies to support keyboard shortcut functionality.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0ef1557d-91b4-4c7b-a448-4d1e7977a4cb

📥 Commits

Reviewing files that changed from the base of the PR and between 8dc9869 and 8b959cc.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• package.json
• src/components/shell/app-shell.tsx
• src/components/shell/command-palette.tsx
• src/components/shell/shortcuts-cheatsheet.tsx
• src/lib/hotkeys.ts
• src/routes/__root.tsx
• src/stores/use-shell-store.ts

---

📝 Walkthrough

Walkthrough

Adds hotkey infrastructure and shell UI components to enable keyboard-driven navigation. New dependencies include cmdk for command palette and react-hotkeys-hook for hotkey binding. A Zustand store manages palette/cheatsheet visibility and sidebar state. AppShell integrates hotkey handlers, wires updated TabBar and StatusBar components, and renders new CommandPalette and ShortcutsCheatsheet modals.

Changes

Shell UI with Hotkeys Infrastructure

Layer / File(s)	Summary
Hotkeys definitions and provider setup src/lib/hotkeys.ts, package.json, src/routes/__root.tsx	HOTKEYS constant exports palette, sidebar, cheatsheet, and tab navigation hotkey configurations. Dependencies on cmdk and react-hotkeys-hook are added. Root layout wraps AppShell and Outlet with HotkeysProvider to enable hotkey binding.
Shell UI state store src/stores/use-shell-store.ts	Zustand store manages paletteOpen, cheatsheetOpen, and sidebarCollapsed with actions to open/close modals and toggle sidebar. Persistence saves only sidebarCollapsed under devbox:shell key.
Command palette component src/components/shell/command-palette.tsx	CommandPalette renders a searchable, categorized tool list using cmdk primitives. Escape key closes palette; selecting a tool opens its tab, navigates to /tool/$toolId, and closes the palette.
Shortcuts cheatsheet component src/components/shell/shortcuts-cheatsheet.tsx	ShortcutsCheatsheet displays a modal overlay listing all shortcuts from HOTKEYS as kbd elements. Escape key or overlay click closes it.
App shell hotkey wiring and layout src/components/shell/app-shell.tsx	AppShell registers hotkeys for palette/sidebar/cheatsheet/tab operations via useShellStore state. TabBar now accepts sidebarCollapsed and onToggleSidebar props, rendering a sidebar-reveal button when collapsed. StatusBar accepts onShortcuts callback. Sidebar Panel connects to collapse/expand handlers with a collapsed size of 0. CommandPalette and ShortcutsCheatsheet are rendered with their state and handlers.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• rivodotlove/devbox#2: Both PRs refactor the TabBar component in src/components/shell/app-shell.tsx to accept props for sidebar collapse state and tab close/navigation behavior.

Poem

🐰 Hotkeys dance with shell delight,
Palette shines with sorted might,
Shortcuts bloom in cheat-sheet row,
App takes form with graceful flow. 🎹

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/keyboard-shortcuts

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	devbox	8b959cc	Commit Preview URL Branch Preview URL	May 29 2026, 07:06 PM