refactor(shell): decompose app-shell into focused components

[rivodotlove]

Summary

• Split monolithic app-shell.tsx (~300 lines) into focused sub-components: sidebar.tsx, tab-bar.tsx, tab-item.tsx, status-bar.tsx, category-section.tsx, sidebar-tool-link.tsx
• Extracted co-located hooks: use-active-tool-id, use-category-section, use-command-palette, use-shell-shortcuts, use-tab-bar
• Added tool-host/ sub-components (tool-loading, tool-placeholder, unknown-tool) and simplified tool.$toolId route handler
• Added shadcn primitives: collapsible, command, dialog
• Installed shadcn skill and pull-request Claude command

Verification

• Pre-commit hook ran vp check --fix — passed clean
• Shell decomposition is structural only; no logic changes

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added comprehensive shadcn/ui documentation covering CLI usage, customization, registry management, component composition, forms, styling, and icons.
  • Refactored shell UI with modularized sidebar, tab bar, and status bar components.
  • Improved command palette with Dialog-based interface.
  • Enhanced shortcuts cheatsheet with improved UI styling.

• Documentation

  • Added shadcn skill guides and CLI reference documentation.
  • Added Claude pull request workflow command documentation.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces comprehensive shadcn/ui skill documentation alongside a major refactoring of the application shell. The shell refactor extracts modular UI components and state management, introduces shared Radix UI wrappers, and delegates hotkey/navigation logic to centralized custom hooks. Supporting updates include a new Claude pull-request command and gitignore configuration.

Changes

shadcn Skill Documentation & Configuration

Layer / File(s)	Summary
Core shadcn Skill Definition .agents/skills/shadcn/SKILL.md, .agents/skills/shadcn/agents/openai.yml	Defines shadcn skill metadata, accepted CLI commands, core principles, critical rules links, component selection reference table, project context fields, and workflows for adding/updating/switching presets. Includes agent interface configuration with display name, description, and icon paths.
Component Composition & Styling Rules .agents/skills/shadcn/rules/forms.md, .agents/skills/shadcn/rules/composition.md, .agents/skills/shadcn/rules/styling.md, .agents/skills/shadcn/rules/icons.md, .agents/skills/shadcn/rules/base-vs-radix.md	Specifies standardized guidelines for forms (FieldGroup/Field, InputGroup, FieldSet patterns), component composition (grouping, Alert/Empty/toast, Dialog/Sheet/Drawer titles, Card/Button/Avatar structure), semantic color/spacing rules, icon usage conventions, and base vs Radix component API differences (Select, ToggleGroup, Slider, Accordion).
CLI, Registry, Customization & Evaluation .agents/skills/shadcn/cli.md, .agents/skills/shadcn/registry.md, .agents/skills/shadcn/customization.md, .agents/skills/shadcn/mcp.md, .agents/skills/shadcn/evals/evals.json	Complete CLI command reference (init, apply, add, search, view, docs, info, build) with dry-run/diff/view workflows; registry authoring guidance covering structure, item fields, address schemes, GitHub registries, and CLI validation commands; customization guide explaining CSS variable→Tailwind pipeline, dark mode setup, custom colors, and component variant patterns; MCP server setup and tool documentation; three evaluation test cases for AI-assisted component generation.
Skill Configuration & Lockfile .claude/skills/shadcn (symlink), skills-lock.json	Symbolic link pointing to .agents/skills/shadcn, and skills lockfile entry for shadcn skill source tracking and hash validation.

Shell UI Refactoring & Component Library

Layer / File(s)	Summary
Shared UI Component Primitives src/shared/ui/collapsible.tsx, src/shared/ui/command.tsx, src/shared/ui/dialog.tsx	Re-exports Radix UI Collapsible primitives (Root, Trigger, Content) and introduces styled wrappers for Command (Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem) and Dialog (Dialog, DialogTrigger, DialogClose, DialogTitle, DialogDescription, DialogOverlay, DialogContent) that apply consistent theming and behavior.
Tool Host Fallback Components & Route Refactoring src/app/tool-host/tool-loading.tsx, src/app/tool-host/tool-placeholder.tsx, src/app/tool-host/unknown-tool.tsx, src/routes/tool.$toolId.tsx	New fallback components render "Loading…" during Suspense, "Not implemented yet" placeholder, and unknown tool error messages. Refactored route imports these shared components instead of inline rendering, simplifying conditional logic.
Shell State & Navigation Hooks src/app/shell/use-active-tool-id.ts, src/app/shell/use-category-section.ts, src/app/shell/use-command-palette.ts, src/app/shell/use-tab-bar.ts, src/app/shell/use-shell-shortcuts.ts	Custom hooks manage active tool id from router state, category collapse/peek behavior, command palette tool selection with navigation/tab opening, tab closing with intelligent routing, and centralized keyboard shortcut dispatch for palette, sidebar toggle, cheatsheet, and tab cycling.
Modular Shell UI Components src/app/shell/sidebar.tsx, src/app/shell/category-section.tsx, src/app/shell/sidebar-tool-link.tsx, src/app/shell/tab-bar.tsx, src/app/shell/tab-item.tsx, src/app/shell/status-bar.tsx, src/app/shell/command-palette.tsx, src/app/shell/shortcuts-cheatsheet.tsx	Extracted components implement sidebar with collapsible categories and tool links, tab bar with active highlighting and close behavior (plus sidebar-reveal button when collapsed), status bar with quick-access shortcuts/info/settings buttons, and refactored CommandPalette and ShortcutsCheatsheet as Dialog-based modals using shared Command UI components.
AppShell Refactoring & Orchestration src/app/shell/app-shell.tsx	Simplified main shell component that imports modular UI components (Sidebar, TabBar, StatusBar) and centralizes hotkey/navigation behavior via useShellShortcuts({ toggleSidebar }), delegating previous inline rendering and keyboard handling logic to extracted modules.

Supporting Infrastructure & Configuration

Layer / File(s)	Summary
Pull Request Command Specification .claude/commands/pull-request.md	New command that syncs main, creates/switches to feature branch, commits with Conventional-Commits message and Claude co-author trailer, pushes branch, creates non-draft PR via gh, and conditionally assigns claude[bot] based on commit metadata.
Gitignore & Skill Symlink .gitignore, .claude/skills/shadcn	Added .playwright-mcp/ ignore rule for MCP artifacts; created symlink to .agents/skills/shadcn for skill configuration.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• rivodotlove/devbox#5: Implements keyboard shortcuts and command palette logic that directly overlaps with the main PR's hotkey registration and navigation behavior in useShellShortcuts and CommandPalette.
• rivodotlove/devbox#4: Refactors the shell layout to include a bottom status bar with Shortcuts/Info/Settings actions, matching the StatusBar component and AppShell layout changes in this PR.
• rivodotlove/devbox#1: Implements collapsible sidebar categories and tool selection that corresponds to the new Sidebar, CategorySection, and /tool/$toolId route logic in this PR.

Poem

🐰 A rabbit emerges from the warren of commands,
Organizing shells and skill-docs by hand,
Dialog boxes dance, Radix spirits align,
The UI finds modular peace, component design!
Hooks orchestrate nav like a burgrow's grand plan,
Shadcn rules painted for all in the clan. 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 73.08% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the primary change: refactoring the monolithic app-shell.tsx into focused, modular components, which is the main structural objective of this changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 refactor/shell-decompose

---

_{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	e46e2cc	Commit Preview URL Branch Preview URL	Jun 02 2026, 10:20 AM