feat: tab management with open/close and active highlight

[rivodotlove]

Summary

• Opening a tool route registers it as a tab; tabs persist across reloads via zustand
• TabBar renders open tools with active highlight, icon, and close affordance
• Close via X or middle-click; closing the active tab navigates to the next/prev tab (or /)
• Also migrates remaining Tailwind arbitrary CSS-var classes to the v4 (--var) shorthand

Test plan

• Open several tools — each appears as a tab and the active one is highlighted
• Reload the page — tabs persist, active tab still matches the current route
• Close a non-active tab — active tab is unaffected
• Close the active tab — navigation falls back to the next tab (or / when none remain)
• Middle-click on a tab — closes it

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Tab closing now automatically navigates to the next tab or home; opening a tool via URL now activates its tab.
  • Simplified tab persistence and behavior for more reliable tab management.

• Style

  • Updated side panel and tab bar visuals: refined active/hover colors, updated close icon, and a redesigned empty placeholder when no tabs are open.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 511c08f1-6df6-4c2c-8eb0-3bc72033fdfc

📥 Commits

Reviewing files that changed from the base of the PR and between 41bc854 and 4b08c42.

📒 Files selected for processing (1)

• src/components/shell/app-shell.tsx

---

📝 Walkthrough

Walkthrough

The PR simplifies tab state to a string[] with open/close methods, calls open(toolId) from the tool route on load, and updates AppShell UI and TabBar to close tabs via store.close() with navigation; CSS variable Tailwind syntax is updated throughout.

Changes

Tab Management System Refactoring

Layer / File(s)	Summary
Tab store contract and methods src/stores/use-tabs-store.ts	TabsState simplifies tabs to string[] and replaces activeToolId tracking with open(toolId) and `close(toolId): string
Route integration and tab opening src/routes/tool.$toolId.tsx	Route imports useTabsStore and calls open(toolId) in a useEffect when the resolved tool is available; UI fallback/header classes use the new CSS-variable class syntax.
AppShell UI refactoring with tab close and CSS updates src/components/shell/app-shell.tsx	Adds useNavigate and X icon, updates Tailwind CSS-variable function syntax across panel, icon rail, sidebar and tab styling. TabBar adds handleClose(e, toolId) that prevents default/propagation, calls useTabsStore.close, and navigates to the next tool or /; "No tabs open" text replaced with an empty styled bar.

Sequence Diagram

sequenceDiagram
  participant User
  participant Route as tool.$toolId
  participant TabsStore
  participant TabBar
  participant Router
  User->>Route: navigate to /tool/:toolId
  Route->>TabsStore: open(toolId)
  TabsStore->>TabsStore: append toolId if missing
  Route->>Route: render tool with tabs
  User->>TabBar: click close on tab
  TabBar->>TabsStore: close(toolId)
  TabsStore->>TabBar: return nextToolId or null
  TabBar->>Router: navigate to nextToolId or /

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A rabbit hops through tabs so neat,
Opens a tool, then makes it fleet.
With an X to close and routes that steer,
Tabs shuffle on, the path stays clear. 🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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 'feat: tab management with open/close and active highlight' directly and accurately summarizes the main changes: implementing tab management with open/close functionality and active tab highlighting across the codebase.
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 feature/tab-management

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/shell/app-shell.tsx`:
- Around line 223-226: The close button in app-shell.tsx is currently icon-only
and relies on title for accessibility; update the button rendered where
onClick={(e) => handleClose(e, toolId)} is used to include an explicit
accessible name by adding an aria-label (e.g., aria-label="Close") so assistive
tech can identify it; ensure the aria-label text matches the intended
action/context (use toolId if needed for specificity) and keep the existing
title and handleClose handler unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 45e57edc-62f7-4ceb-85ae-008a867a41c6

📥 Commits

Reviewing files that changed from the base of the PR and between 534bd1b and 41bc854.

📒 Files selected for processing (3)

• src/components/shell/app-shell.tsx
• src/routes/tool.$toolId.tsx
• src/stores/use-tabs-store.ts

[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	Updated (UTC)
❌ Deployment failed View logs	devbox	4b08c42	May 24 2026, 04:10 PM