fix: add visual indicators for custom mode sources (#6502) #6520
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add (G)/(P) indicators in mode dropdown for custom modes - Add (Global)/(Project) text in selected mode button - Built-in modes show no indicators - Add helper functions getModeSource() and getSourceDisplayText() - Use text-vscode-descriptionForeground for subtle styling - Add comprehensive tests for source indicator functionality - Add translation keys to all 18 supported languages
Closed
4 tasks
dosubot
bot
added
size:L
hannesrudolph
added
the
Issue/PR - Triage
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Thank you for your contribution! I've reviewed the changes and the implementation looks solid overall. The visual indicators for custom mode sources will definitely help users distinguish between global and project-level modes. I've left some suggestions inline to improve accessibility, performance, and type safety.
| )} | ||
| data-testid="mode-selector-item"> | ||
| <div className="flex-1 min-w-0"> | ||
| <div className="font-bold truncate"> |
Contributor
There was a problem hiding this comment.
Consider adding aria-label attributes for better accessibility. Screen reader users might not understand what "(G)" or "(P)" means. You could add:
Suggested change
| <div className="font-bold truncate"> | |
| <div className="font-bold truncate"> | |
| {mode.name} | |
| {modeSource && ( | |
| <span | |
| className="text-vscode-descriptionForeground font-normal" | |
| aria-label={modeSource === "global" ? "Global custom mode" : "Project custom mode"} | |
| > | |
| {getSourceDisplayText(modeSource, true)} | |
| </span> | |
| )} | |
| </div> |
| const { t } = useAppTranslation() | ||
|
|
||
| // Helper function to get mode source | ||
| const getModeSource = React.useCallback( |
Contributor
There was a problem hiding this comment.
The getModeSource function is called for every mode during rendering. Since custom modes are passed as props and don't change frequently, consider memoizing the source mapping:
Suggested change
| const getModeSource = React.useCallback( | |
| // Helper function to get mode source | |
| const modeSourceMap = React.useMemo(() => { | |
| const map = new Map<string, "global" | "project">(); | |
| customModes?.forEach(mode => { | |
| map.set(mode.slug, mode.source || "global"); | |
| }); | |
| return map; | |
| }, [customModes]); | |
| const getModeSource = React.useCallback( | |
| (modeSlug: string): "global" | "project" | null => { | |
| return modeSourceMap.get(modeSlug) || null; | |
| }, | |
| [modeSourceMap], | |
| ) |
| const { hasOpenedModeSelector, setHasOpenedModeSelector } = useExtensionState() | ||
| const { t } = useAppTranslation() | ||
|
|
||
| // Helper function to get mode source |
Contributor
There was a problem hiding this comment.
Consider adding JSDoc comments to explain the default behavior when source is undefined:
Suggested change
| // Helper function to get mode source | |
| /** | |
| * Gets the source of a custom mode (global or project). | |
| * @param modeSlug - The slug of the mode to check | |
| * @returns "global" or "project" for custom modes, null for built-in modes. | |
| * Defaults to "global" if a custom mode has no source field. | |
| */ | |
| const getModeSource = React.useCallback( |
| // Check trigger shows global source (default) | ||
| const trigger = screen.getByTestId("mode-selector-trigger") | ||
| expect(trigger.textContent).toContain("(common:customModes.scope.global)") | ||
| }) |
Contributor
There was a problem hiding this comment.
Consider adding a test case for invalid source values to ensure graceful handling:
Suggested change
| }) | |
| test("handles invalid source values gracefully", () => { | |
| const customModes: ModeConfig[] = [ | |
| { | |
| slug: "custom-invalid-source", | |
| name: "Custom Invalid Source", | |
| description: "A custom mode with invalid source", | |
| roleDefinition: "Role definition", | |
| groups: ["read"], | |
| source: "invalid" as any, // Invalid source value | |
| }, | |
| ]; | |
| mockModes = [...customModes]; | |
| render( | |
| <ModeSelector | |
| value={"custom-invalid-source" as Mode} | |
| onChange={vi.fn()} | |
| modeShortcutText="Ctrl+M" | |
| customModes={customModes} | |
| />, | |
| ); | |
| // Should handle gracefully - perhaps default to no indicator or "global" | |
| const trigger = screen.getByTestId("mode-selector-trigger"); | |
| expect(trigger.textContent).toContain("Custom Invalid Source"); | |
| // Add assertion for expected behavior with invalid source | |
| }); |
hannesrudolph
added
PR - Draft / In Progress
and removed
Issue/PR - Triage
github-project-automation
bot
moved this from PR [Draft / In Progress]
to Done
in Roo Code Roadmap
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related GitHub Issue
Closes: #6502
Roo Code Task Context (Optional)
No Roo Code task context for this PR
Description
This PR adds visual indicators to distinguish between global and project-level custom modes in the mode selector, addressing user confusion when working with modes at both levels.
Key implementation details:
getModeSource()andgetSourceDisplayText()to identify custom modes and format their source displaytext-vscode-descriptionForegroundcolor class for subtle, non-intrusive stylingTest Procedure
Automated Testing:
ModeSelector.spec.tsxcovering all scenarioscd webview-ui && npm test -- src/components/chat/__tests__/ModeSelector.spec.tsxManual Testing:
Pre-Submission Checklist
Screenshots / Videos
UI changes implemented but screenshots not available in this environment. The changes add text indicators "(G)"/"(P)" in dropdown and "(Global)"/"(Project)" in the selector button for custom modes.
Documentation Updates
Additional Notes
Get in Touch
@MuriloFP
Important
Adds visual indicators in
ModeSelector.tsxto distinguish global and project-level custom modes, with tests and localization updates.ModeSelector.tsxto distinguish between global and project-level modes.getModeSource()andgetSourceDisplayText()to determine and display mode source.ModeSelector.spec.tsxto verify source indicators for custom modes, absence for built-in modes, and default to global when source is undefined.This description was created by
for 8e396b9. You can customize this summary. It will automatically update as commits are pushed.