feat(chat): add radio select and config button to agent selector

[Israeltheminer]

Summary

• Add showRadio and optionAction props to SearchableSelect for radio-style selection indicators and per-option action slots
• Update agent selector to use radio indicators and a settings button that navigates to the agent configuration page
• Add tests for new radio and option action functionality

Test plan

• Open chat, click agent selector — verify radio indicators appear instead of checkmarks
• Verify settings icon appears on each agent option (for users with write permission)
• Click settings icon — verify navigation to /dashboard/$id/custom-agents/$agentId
• Verify settings icon is hidden for users without customAgents write permission
• Run searchable-select.test.tsx and agent-selector.test.tsx — all tests pass

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Searchable select now supports optional radio-style selection indicators
  • Searchable select now supports customizable per-option action buttons
  • Agent selector now includes a configure button for authorized users to access agent configuration settings

[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 extends the SearchableSelect component with two new optional features: a showRadio boolean flag to render radio-style indicators instead of checkmarks, and an optionAction callback to render per-option action elements. The AgentSelector component is updated to leverage these new props, adding per-option configuration buttons that navigate to an agent config page for users with appropriate permissions. Corresponding tests verify the new radio indicator rendering, option action rendering, and the agent configuration button's visibility and navigation behavior. A new localization entry is added for the "Configure agent" label.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(ui): add SearchableSelect component with keyboard navigation #594: Introduces the base SearchableSelect component that this PR extends with new optional props (showRadio, optionAction) and updates AgentSelector to utilize them.

🚥 Pre-merge checks | ✅ 3

✅ 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 changes: adding radio select functionality and a config button to the agent selector component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/agent-selector-radio-config

📝 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 generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

[coderabbitai]

Actionable comments posted: 1

Caution

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

⚠️ Outside diff range comments (1)

services/platform/app/components/ui/forms/searchable-select.tsx (1)

332-377: ⚠️ Potential issue | 🟠 Major

Isolate option actions from the option's select handler.

action is rendered inside the clickable option container, so any interactive action that does not manually call stopPropagation() will also trigger onSelect(option.value). That makes the new optionAction API easy to misuse and can select/close the list when the user intended only the secondary action.

Proposed fix

-      {action}
+      {action && (
+        <div
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          {action}
+        </div>
+      )}

🤖 Prompt for AI Agents

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

In `@services/platform/app/components/ui/forms/searchable-select.tsx` around lines
332 - 377, The option's clickable container calls onSelect(option.value) on its
onClick, but the rendered action node (action / optionAction) sits inside that
container so clicks on the action also trigger selection; update how action is
rendered so it cannot bubble into the option onClick: render the action in a
wrapper that stops propagation (e.g. onClick={e => e.stopPropagation()} and
forwards the action's click) or move the action outside the option container;
change the rendering around the action symbol (action / optionAction) so its
clicks do not call onSelect and ensure any provided action handlers are invoked
after stopping propagation.

🤖 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/__tests__/agent-selector.test.tsx`:
- Around line 250-262: The test fails because multiple "Configure agent" buttons
exist; scope the query to the specific option before clicking: after rendering
AgentSelector and clicking the trigger (screen.getByLabelText('Select agent')),
locate the specific option element for the agent you want (e.g., find by visible
agent label/text like 'root-2' or by a containing role) and call
within(optionElement).getByLabelText('Configure agent') to get and click the
correct button; add "within" to the test imports from `@testing-library/react` and
keep the expect against mockNavigate as-is.

---

Outside diff comments:
In `@services/platform/app/components/ui/forms/searchable-select.tsx`:
- Around line 332-377: The option's clickable container calls
onSelect(option.value) on its onClick, but the rendered action node (action /
optionAction) sits inside that container so clicks on the action also trigger
selection; update how action is rendered so it cannot bubble into the option
onClick: render the action in a wrapper that stops propagation (e.g. onClick={e
=> e.stopPropagation()} and forwards the action's click) or move the action
outside the option container; change the rendering around the action symbol
(action / optionAction) so its clicks do not call onSelect and ensure any
provided action handlers are invoked after stopping propagation.

🪄 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: 087afdb0-8c63-462c-b009-c14efc8dfecf

📥 Commits

Reviewing files that changed from the base of the PR and between 64b17b9 and 74d89db.

📒 Files selected for processing (5)

• services/platform/app/components/ui/forms/searchable-select.test.tsx
• services/platform/app/components/ui/forms/searchable-select.tsx
• services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
• services/platform/app/features/chat/components/agent-selector.tsx
• services/platform/messages/en.json