Modes selector improvements #4902

brunobergher · 2025-06-19T21:33:22Z

Description

Modes are one of RooCode's main differentiators – users who try different modes are much more likely to stick around.
But they can be hard to understand and can go unnoticed, especially as people are just getting started with the product.

This PR aims to improve that by:

Highlighting the mode selector for new users until they click it for the first time
Redesigning the mode selector to emphasize the list (no search, edit become settings)
Bringing in short descriptions to help users choose the right mow (not yet reflected in the marketplace, mind you)

Test Procedure

The majority of the changes are in the UI, so testing is manual.

Type of Change

🐛 Bug Fix: Non-breaking change that fixes an issue.
✨ New Feature: Non-breaking change that adds functionality.
💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
📚 Documentation: Updates to documentation files.
⚙️ Build/CI: Changes to the build process or CI configuration.
🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

Screenshots / Videos

Before

After

Documentation Updates

Does this PR necessitate updates to user-facing documentation?

No documentation updates are required.
Yes, documentation updates are required. (Please describe what needs to be updated or link to a PR in the docs repository).

Important

Enhances mode selector UI with a new component, state management for new user interactions, and telemetry tracking in TelemetryClient.ts.

UI Enhancements:
- Introduces ModeSelector component in ChatTextArea.tsx to replace SelectDropdown for mode selection.
- Highlights mode selector for new users until first interaction.
- Adds descriptions to modes in modes.ts for better user understanding.
State Management:
- Adds hasOpenedModeSelector to globalSettingsSchema in global-settings.ts and ExtensionState in ExtensionMessage.ts.
- Updates ClineProvider.ts and webviewMessageHandler.ts to manage hasOpenedModeSelector state.
Telemetry:
- Updates TelemetryClient.ts to track mode selector interactions with setPeopleProperty() and getPeopleProperty() methods.

^{This description was created by}^{for e45d2da. You can customize this summary. It will automatically update as commits are pushed.}

…ks it for the first time

packages/types/src/mode.ts

mrubens · 2025-06-20T02:07:51Z

webview-ui/src/components/chat/ModeSelector.tsx

+										vscode.postMessage({
+											type: "switchTab",
+											tab: "marketplace",
+										})


Would be nice if we could switch directly to the modes tab of the marketplace. We do something similar for links to settings, where we can deep link to a specific settings screen.

I built a whole thing for this, extending the ExtensionContext and such, but I wasn't too confident of the implementation. I'll take another stab at it, thanks for the pointer.

mrubens · 2025-06-20T02:08:13Z

webview-ui/src/components/chat/ModeSelector.tsx

+							</div>
+						</div>
+						<p className="my-0 text-sm">
+							Specialized personas that tailor Roo&apos;s behavior.


Let's internationalize this

I had done it but probably messed up staging my changes, the strings are all in the i18n files already, sorry.

mrubens · 2025-06-20T02:09:19Z

webview-ui/src/utils/TelemetryClient.ts

+	public setPeopleProperty(propertyName: string, value: any) {
+		if (TelemetryClient.telemetryEnabled) {
+			try {
+				posthog.people.set({ [propertyName]: value })
+			} catch (_error) {
+				// Silently fail if there's an error setting a property.
+			}
+		}
+	}
+
+	public getPeopleProperty(propertyName: string): any {
+		if (TelemetryClient.telemetryEnabled) {
+			try {
+				return posthog.get_property(propertyName)
+			} catch (_error) {
+				// Silently fail if there's an error getting a property.
+				return null
+			}
+		}
+		return null
+	}


I think we can probably exclude these changes from the PR

This is stupid, sorry 🤦
Remnants from my first attempt at tracking whether the user opened the mode selector

…ink from ModeSelector to the Modes subtab

…e in the ModeSelector

…ng built-in ones intact

…opened

daniel-lxs

This looks really nice!

I left a couple of minor suggestions, also can you take a look at the conflicts so I can move this PR for review?

Thank you!

webview-ui/src/components/chat/ModeSelector.tsx

brunobergher · 2025-06-23T06:27:13Z

src/core/webview/webviewMessageHandler.ts

+
+				if (TelemetryService.hasInstance()) {
+					// Determine which setting was changed by comparing objects
+					const oldPrompt = existingPrompts[message.promptMode] || {}


I don't love the complexity of this logic and the fact it's repeated elsewhere, but this was Roo's insistent suggestion on how to determine the changed setting and I couldn't figure out a different one which didn't lead to much more complex changes (eg one global event per setting change)

mrubens · 2025-06-23T13:54:05Z

src/core/webview/webviewMessageHandler.ts

+				// This could be more generic, but keeping it specific for now
+				if (message.tab === "modes" && TelemetryService.hasInstance()) {
+					TelemetryService.instance.captureModesViewShown()
+				}


I kind of like the idea of a "Tab Shown" event - I might look into replacing this with that quickly.

…ements

Bruno Bergher added 11 commits June 19, 2025 21:56

Makes it possible to hide typeahead search in dropdowns

f4fb0bf

Redesigns the mode selector

1837400

Only shows the mode marketplace button if the setting is enabled

5ac5a4e

Opens the marketplace from the mode selector

b4bdeb2

Only show mode description is available

aea3481

Adds short descriptions to default modes

489d4a2

Conditionally highlights the mode selector button until the user clic…

52c5e95

…ks it for the first time

Refactors the way to track whether the user has opened the mode selector

5835621

Localizes ModeSelector strings

1da0fd8

Makes Marketplace icon not conditional on dead experiment

7ef7202

Fixes type errors

e45d2da

brunobergher requested review from mrubens, cte and jr as code owners June 19, 2025 21:33

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Jun 19, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Jun 19, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Jun 19, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused labels Jun 19, 2025

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jun 19, 2025

daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Jun 19, 2025

mrubens reviewed Jun 20, 2025

View reviewed changes

packages/types/src/mode.ts Show resolved Hide resolved

mrubens reviewed Jun 20, 2025

View reviewed changes

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Jun 20, 2025

Bruno Bergher added 2 commits June 20, 2025 09:37

Internationalizes ModeSelector strings once again

fdb92d9

Removes unnecessary Telemetry code

c903eb8

Enables deep linking into subtabs of MarketplaceView and uses it to l…

dcb2cab

…ink from ModeSelector to the Modes subtab

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Jun 20, 2025

Bruno Bergher added 10 commits June 20, 2025 13:37

Uses short mode description by default in the slash command picker

df5574f

Removes the Modes settings icon from the top bar, deferring to the on…

b0d714f

…e in the ModeSelector

Makes mode short descriptions editable

3dc4df6

Some visual cleanup of ModesView, as I add yet another section

3afab13

Properly loads short descriptions in settings

df7a9c3

Fixes saving of description when creating and editing modes

5dc5c31

Only allow for customizing shoprt descriptions of custom modes, leavi…

a5018d5

…ng built-in ones intact

Updates strings to reflect there's no Modes tab anymore, but settings

9f126dc

Localized strings for mode configuration UI

19ef6f2

Adds telemetry for modes: mode created, mode modified, mode settings …

f489b0b

…opened

daniel-lxs reviewed Jun 22, 2025

View reviewed changes

webview-ui/src/components/chat/ModeSelector.tsx Outdated Show resolved Hide resolved

webview-ui/src/components/chat/ModeSelector.tsx Outdated Show resolved Hide resolved

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Changes Requested] in Roo Code Roadmap Jun 22, 2025

hannesrudolph added PR - Changes Requested and removed PR - Needs Preliminary Review labels Jun 22, 2025

Bruno Bergher added 3 commits June 23, 2025 07:22

Better type safety

61d1799

Removes unnecessary fallback case

7302a3e

Removes PR cruft

0185d09

brunobergher commented Jun 23, 2025

View reviewed changes

mrubens reviewed Jun 23, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into modes-selector-improv…

75dc3db

…ements

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Modes selector improvements #4902

Modes selector improvements #4902

brunobergher commented Jun 19, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

Uh oh!

mrubens Jun 20, 2025

Uh oh!

brunobergher Jun 20, 2025

Uh oh!

mrubens Jun 20, 2025

Uh oh!

brunobergher Jun 20, 2025

Uh oh!

mrubens Jun 20, 2025

Uh oh!

brunobergher Jun 20, 2025 •

edited

Loading

Uh oh!

daniel-lxs left a comment

Uh oh!

Uh oh!

Uh oh!

brunobergher Jun 23, 2025

Uh oh!

mrubens Jun 23, 2025

Uh oh!

Uh oh!

Modes selector improvements #4902

Are you sure you want to change the base?

Modes selector improvements #4902

Conversation

brunobergher commented Jun 19, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test Procedure

Type of Change

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Uh oh!

Uh oh!

mrubens Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

mrubens Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

mrubens Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

brunobergher Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daniel-lxs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

brunobergher Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

mrubens Jun 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brunobergher commented Jun 19, 2025 •

edited by ellipsis-dev bot

Loading

brunobergher Jun 20, 2025 •

edited

Loading