feat: add Claude Opus 4.5 model selection

[vdaubry]

Summary

• Add model selection dropdown for Claude provider
• Support switching between Opus 4.5 and Sonnet 4
• Update claude-agent-sdk to v0.1.60 for Opus 4.5 compatibility
• Persist model preference in localStorage

Test plan

• Select Claude provider and verify model dropdown appears
• Switch between Opus 4.5 and Sonnet 4
• Verify model preference persists after page reload
• Send a message and confirm correct model is used

Summary by CodeRabbit

• New Features
  • Users can now select their preferred Claude model (Opus 4.5 or Sonnet 4) via a model selector
  • Added model selection support for Cursor with GPT-5, Sonnet-4, and Opus 4.1 options
  • Model preferences are automatically saved for persistent selection

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Updated @anthropic-ai/claude-agent-sdk dependency from ^0.1.29 to ^0.1.60. Enhanced ChatInterface to support dynamic Claude model selection (Opus 4.5 and Sonnet 4) with localStorage persistence while maintaining existing Cursor model support.

Changes

Cohort / File(s)	Change Summary
Dependency Update package.json	Updated @anthropic-ai/claude-agent-sdk from ^0.1.29 to ^0.1.60
Model Selection Enhancement src/components/ChatInterface.jsx	Added new claudeModel state with localStorage persistence (default 'opus'). Reworked model selector UI to dynamically display Claude options (Opus 4.5, Sonnet 4) or Cursor options (GPT-5, Sonnet-4, Opus 4.1) based on active provider. Updated context/model field, command, and session payloads to use claudeModel for Claude provider. Revised readiness messages and dependency arrays accordingly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• State setup and persistence: Verify localStorage initialization and synchronization of claudeModel state
• Conditional rendering logic: Confirm all provider branches (Claude vs. Cursor) render correct model options and labels
• Dependency array completeness: Check that all useEffect and useMemo hooks include claudeModel where needed
• Payload updates: Validate that claudeModel is correctly threaded through command, context, and session payloads

Poem

🐰 A rabbit hops through model selection with glee,
Opus and Sonnet now dance wild and free,
localStorage remembers each choice with care,
Claude and Cursor options floating in air! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature being added—Claude model selection capability with Opus 4.5 support—which aligns with the primary changes across package.json and ChatInterface.jsx.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/ChatInterface.jsx (1)

2038-2090: executeCommand closes over claudeModel but doesn’t list it in deps

context.model switches between cursorModel and claudeModel, but the useCallback deps omit claudeModel. If the user changes the Claude model and then runs a slash command, executeCommand can still send the old model value until something else in the deps changes.

Recommend adding claudeModel to the dependency array:

-  }, [input, selectedProject, currentSessionId, provider, cursorModel, tokenBudget]);
+  }, [input, selectedProject, currentSessionId, provider, cursorModel, claudeModel, tokenBudget]);

🧹 Nitpick comments (2)

src/components/ChatInterface.jsx (2)

1702-1710: Claude model state + persistence wiring look good

Initializing claudeModel from localStorage('claude-model') and using it consistently in UI and payloads is sound. If you want full consistency with other persisted bits (like drafts/history), you could eventually route the setItem/getItem calls for claude-model through safeLocalStorage, but it’s not required for correctness.

---

4278-4319: Model selector UX for Claude/Cursor is clear; minor nits only

The shared “Select Model” block and per‑provider <select>s look good, and the readiness copy correctly maps claudeModel === 'opus'/'sonnet' to “Opus 4.5” / “Sonnet 4” while using cursorModel verbatim for Cursor.

Two optional polish points:

• The label text for Cursor uses "Sonnet-4" while the Claude readiness text says "Sonnet 4" – you might standardize the naming for consistency.
• disabled={provider !== 'cursor'} on the Cursor <select> is redundant inside the provider === 'claude' ? … : … conditional but harmless.

No functional issues here.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3a72a26 and 42e8288.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• package.json (1 hunks)
• src/components/ChatInterface.jsx (5 hunks)

🔇 Additional comments (2)

package.json (1)

43-43: Dependency bump for @anthropic-ai/claude-agent-sdk – confirm compatibility

Updating to ^0.1.60 looks straightforward; just make sure the backend/CLI pieces that consume model and images options are compatible with this version and run the usual test suite after npm install.

src/components/ChatInterface.jsx (1)

3849-3879: Claude submit path now passes images + selected model – aligns with new selector

Including both images: uploadedImages and model: claudeModel in the claude-command options keeps the backend in sync with the new UI state and uploaded attachments. The dependency list for handleSubmit already includes claudeModel, so this will update correctly when the user changes models.

Please just confirm the backend handler for claude-command expects options.model to be the short key ('opus' | 'sonnet') and options.images in this shape, or perform any necessary mapping server-side.