feat: refine dark theme, sidebar styling, and simplify agent selector

[Israeltheminer]

Summary

• Updated dark mode CSS variables to a blue-tinted palette for better visual depth and contrast
• Added dedicated --sidebar color variable and applied bg-sidebar to navigation components (desktop + mobile)
• Simplified agent selector by removing configure button, radio indicators, and settings navigation
• Removed ring border from conversations empty state
• Fixed dev script to re-read CONVEX_DEPLOYMENT from .env.local after Convex backend starts (handles fresh DB scenario)
• Updated Convex generated types (removed deprecated select field)

Test plan

• Verify dark mode colors look correct across all pages
• Confirm sidebar has distinct background color in both light and dark modes
• Test agent selector opens, searches, and selects agents correctly
• Verify mobile navigation renders properly with new sidebar background
• Test dev script with fresh Convex deployment picks up new CONVEX_DEPLOYMENT

Summary by CodeRabbit

• Style

  • Updated navigation and sidebar backgrounds with new color theming system
  • Expanded dark-mode color palette with dedicated sidebar color token
  • Adjusted agent selector dropdown width

• Chores

  • Removed agent configuration functionality and associated tests
  • Improved development environment deployment detection

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates navigation theming and removes agent configuration UI functionality. It changes background styling from bg-background to bg-sidebar across multiple navigation components and the dashboard layout. The agent-selector component is simplified by removing useNavigate-based configuration flows, the showRadio and optionAction props from SearchableSelect, and three related tests. The globals.css file introduces a new --sidebar CSS variable and updates the dark mode color palette with deeper, more saturated HSL values. The dev script is enhanced to preserve the CONVEX_DEPLOYMENT environment variable from the platform/.env.local file after Convex initialization.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(ui): add SearchableSelect component with keyboard navigation #594: Modifies agent-selector.tsx SearchableSelect usage and removes optionAction/showRadio props in alignment with the agent-selector simplification here.
• chore(platform): improve local Convex dev setup #424: Updates CONVEX_DEPLOYMENT environment variable handling in dev scripts, directly related to the dev.ts changes.
• feat: chat ux improvements and mobile responsiveness fixes #150: Modifies app theming and sidebar styling with CSS variables and layout adjustments, related to the globals.css and navigation background color updates.

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main changes: dark theme refinement, sidebar styling updates, and agent selector simplification.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/dark-theme-navigation-refinements

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@services/platform/app/features/chat/components/agent-selector.tsx`:
- Line 87: The dropdown in agent-selector.tsx currently hardcodes
contentClassName="w-[16.25rem]"; replace this literal width with a design token
or CSS variable (e.g., use a Tailwind custom utility class or a CSS var like
var(--dropdown-width)) so the size is centralized and reusable; update the
component to reference that token/class (where contentClassName is assigned) and
ensure any corresponding CSS/Tailwind config defines the token (or utility) to
match the previous 16.25rem value.

🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 72d3c6b8-a1af-4e73-9966-f83b8ceeacdb

📥 Commits

Reviewing files that changed from the base of the PR and between 613f4fd and 1057dbf.

⛔ Files ignored due to path filters (2)

• services/platform/convex/_generated/api.d.ts is excluded by !**/_generated/**
• services/platform/convex/betterAuth/_generated/component.ts is excluded by !**/_generated/**

📒 Files selected for processing (10)

• services/platform/app/components/ui/navigation/mobile-navigation.stories.tsx
• services/platform/app/components/ui/navigation/mobile-navigation.tsx
• services/platform/app/components/ui/navigation/navigation.stories.tsx
• services/platform/app/components/ui/navigation/navigation.tsx
• services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
• services/platform/app/features/chat/components/agent-selector.tsx
• services/platform/app/features/conversations/components/activate-conversations-empty-state.tsx
• services/platform/app/globals.css
• services/platform/app/routes/dashboard/$id.tsx
• services/platform/scripts/dev.ts

💤 Files with no reviewable changes (1)

• services/platform/app/features/chat/components/tests/agent-selector.test.tsx

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Consider using a design token for the dropdown width.

The specific width 16.25rem (260px) works, but if this value is used elsewhere or needs to stay consistent with other UI elements, consider extracting it to a CSS variable or design token for maintainability.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@services/platform/app/features/chat/components/agent-selector.tsx` at line
87, The dropdown in agent-selector.tsx currently hardcodes
contentClassName="w-[16.25rem]"; replace this literal width with a design token
or CSS variable (e.g., use a Tailwind custom utility class or a CSS var like
var(--dropdown-width)) so the size is centralized and reusable; update the
component to reference that token/class (where contentClassName is assigned) and
ensure any corresponding CSS/Tailwind config defines the token (or utility) to
match the previous 16.25rem value.