feat: add mode dropdown to change skill mode dynamically (#10513)

[SannidhyaSah]

Related GitHub Issue

Related to: #10513

Roo Code Task Context (Optional)

No Roo Code task context for this PR

Description

This PR enhances the Skills management UI by adding the ability to dynamically change which mode a skill applies to, building upon the Skills UI improvements in #10513.

Key Implementation Details:

1. Backend (moveSkill() method): Uses fs.rename() to move skill directories between mode-specific folders (e.g., .roo/skills-code/ → .roo/skills-architect/). Automatically cleans up empty parent directories after moving.

2. UI Enhancement: Replaced the static mode badge in SkillItem.tsx with an interactive dropdown that:

   • Shows current mode or "Any mode" for generic skills
   • Lists all available modes (built-in + custom)
   • Automatically moves the skill when selection changes
   • Is disabled for built-in skills (shows static badge instead)

3. Message Flow: Added moveSkill message type with routing through webviewMessageHandler.ts → skillsMessageHandler.ts → SkillsManager.ts

4. Smart Cleanup: After moving a skill, the system checks if the source directory is empty and automatically removes it to keep the .roo/ directory clean.

Design Trade-offs:

• Used inline dropdown instead of a separate edit dialog for faster mode changes
• Silently ignore cleanup errors (permissions/race conditions) to ensure move operation always succeeds
• Empty directory cleanup only happens for mode-specific directories (not the generic skills/ directory)

Test Procedure

Automated Tests:

# Backend tests (42 tests passing)
cd src && npx vitest run services/skills/__tests__/SkillsManager.spec.ts

# Message handler tests (21 tests passing)
cd src && npx vitest run core/webview/__tests__/skillsMessageHandler.spec.ts

# UI component tests (16 tests passing)
cd webview-ui && npx vitest run src/components/settings/__tests__/SkillItem.spec.tsx

Manual Testing Steps:

1. Open Settings → Skills section
2. Create a new project skill with a specific mode (e.g., "code")
3. Verify the skill appears with a mode dropdown showing "💻 Code"
4. Change the mode dropdown to a different mode (e.g., "🏗️ Architect")
5. Verify the skill directory moved from .roo/skills-code/ to .roo/skills-architect/
6. Verify the old .roo/skills-code/ directory was automatically deleted (if it was empty)
7. Try changing a skill to "Any mode" and verify it moves to .roo/skills/
8. Verify built-in skills show a static badge and cannot be moved or deleted

Test Coverage:

• ✅ Move from generic to mode-specific
• ✅ Move between different modes
• ✅ Move from mode-specific to generic
• ✅ Empty directory cleanup
• ✅ Conflict detection (skill already exists at destination)
• ✅ Built-in skill protection
• ✅ Error handling for missing skills

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Screenshot shows the mode dropdown integrated into the skill item UI

Documentation Updates

• No documentation updates are required.
• Yes, documentation updates are required. The Skills documentation should mention that skill modes can be changed after creation using the dropdown in the Settings → Skills UI.

Additional Notes

Implementation Notes:

• The mode dropdown uses the same MODE_ANY sentinel pattern (__any__) as CreateSkillDialog.tsx for consistency
• Empty directory cleanup is wrapped in try/catch to ensure the move operation succeeds even if cleanup fails
• File watchers automatically detect the directory changes and refresh the skills list
• All existing skills tests continue to pass without modification

Future Enhancements:

• Could add a confirmation dialog for moves that would override global skills
• Could add undo/redo functionality for skill moves
• Could batch-move multiple skills at once

Get in Touch

Sa..

---

Important

Adds dynamic skill mode change feature in Skills UI with backend support for moving skill directories and UI dropdown for mode selection.

• Behavior:
  • Adds moveSkill() method in SkillsManager.ts to move skill directories between mode-specific folders using fs.rename(), with cleanup of empty directories.
  • Replaces static mode badge with interactive dropdown in SkillItem.tsx to change skill modes dynamically.
  • Introduces moveSkill message type in webviewMessageHandler.ts and skillsMessageHandler.ts.
• UI:
  • Dropdown in SkillItem.tsx lists all modes, allows changing modes, and is disabled for built-in skills.
• Testing:
  • Adds tests for handleMoveSkill in skillsMessageHandler.spec.ts and moveSkill in SkillsManager.spec.ts.
  • Updates SkillItem.spec.tsx to test dropdown functionality and message sending.
• Localization:
  • Updates translation files for new strings related to skill mode changes.

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

[roomote]

Rooviewer   See task on Roo Cloud

All issues resolved. The unused variable newModeInfo has been removed.

• Remove unused variable newModeInfo in SkillsManager.ts (dead code)

Previous reviews

• 23a7f55: Review #1
• 9dc53c6: Review #2

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

[SannidhyaSah]

@brunobergher Please take a look at this PR. It works, but if you think the UI/UX flow should be different, let me know.

[brunobergher]

Seems ok for now, I'll redesign that stuff soon enough.