Add visual indicator to show if a mode is global or project-based in the mode edit screen #6502
Description
What specific problem does this solve?
Issue Content:
What specific problem does this solve?
Users who have both global and project-level custom modes cannot distinguish between them in the mode edit screen. This creates confusion, especially when:
- A user has created modes at both levels and forgets which is which
- A project-level mode with the same name as a global mode is loaded (project takes priority)
- Users want to know if they're editing a mode that affects all projects or just the current one
Who is affected: All users who use custom modes at both global and project levels
When this happens:
- When selecting a mode from the mode dropdown
- When viewing the currently selected mode
- When editing mode properties
Current behavior: The UI shows only the mode name with no indication of its source
Expected behavior: Users should see a clear indicator (like "Global" or "Project") next to custom mode names
Impact: Users waste time checking configuration files or making test changes to determine mode scope. This is particularly problematic when troubleshooting why a mode behaves differently across projects.
Additional context (optional)
No response
Roo Code Task Links (Optional)
No response
Request checklist
- I've searched existing Issues and Discussions for duplicates
- This describes a specific problem with clear impact and context
Interested in implementing this?
- Yes, I'd like to help implement this feature
Implementation requirements
- I understand this needs approval before implementation begins
How should this be solved? (REQUIRED if contributing, optional otherwise)
Add a small text indicator next to mode names in the mode selector to show their source. The implementation would:
- Mode selector button: When a custom mode is selected, show the mode name followed by "(Global)" or "(Project)" in smaller, muted text
- Mode dropdown list: Show abbreviated indicators "G" or "P" next to each custom mode name for space efficiency
- Internationalization: Add translation keys for these labels to all supported languages
The visual design would use the existing text-vscode-descriptionForeground color class to keep the indicators subtle and non-intrusive, similar to how the marketplace shows installation status.
How will we know it works? (Acceptance Criteria - REQUIRED if contributing, optional otherwise)
Given I have both global and project-level custom modes
When I open the mode selector dropdown
Then I see "(G)" next to global custom modes
And I see "(P)" next to project custom modes
But built-in modes show no indicator
Given I have a global mode "assistant" and project mode "assistant"
When I view the mode selector
Then I see only "assistant (P)" since project takes precedence
And I understand the project mode is overriding the global one
Given I select a custom mode
When I view the mode selector button
Then I see "ModeName (Global)" or "ModeName (Project)"
And the indicator uses muted text color
But the indicator doesn't make the UI feel cluttered
Technical considerations (REQUIRED if contributing, optional otherwise)
- Implementation is straightforward - just displaying existing data from
customMode.source - The
sourcefield already defaults to "global" when undefined (backward compatibility) - Need to check if mode is custom using
findModeBySlug(slug, customModes)before showing indicator - All changes are in the frontend - no backend modifications needed
Trade-offs and risks (REQUIRED if contributing, optional otherwise)
Alternatives considered:
- Using badges (like marketplace) - more visually prominent but could clutter the UI
- Using icons (globe/folder) - no translation needed but less clear meaning
- Showing only in mode edit screen - less discoverable
Chosen approach: Simple text indicators provide the clearest communication with minimal visual impact
Risks:
- Very minimal - just displaying existing data
- No breaking changes or migrations needed
- No performance impact
Key verifications made:
- ✓ Backend already tracks source as "global" or "project" in CustomModesManager.ts
- ✓ Frontend receives this data but doesn't display it
- ✓ Marketplace uses similar patterns for showing installation location
- ✓ No existing visual indicators for mode source