feat: Import export modes

[hannesrudolph]

Description

Adds the ability to import and export custom modes, including any associated rules from the .roo/rules-{slug}/ folders. This feature makes it easy to share custom modes between projects and users.

Feature Overview

The import/export feature provides:

• Export any mode (built-in or custom) to a YAML file
• Include rules from .roo/rules-{slug}/ folders in the export
• Import modes at either global or project level
• Preserve rules structure for project-level imports
• Merge rules into custom instructions for global imports

Implementation Details

Backend Changes

src/core/config/CustomModesManager.ts

• Added checkRulesDirectoryHasContent() - checks if a mode has rules to include in export
• Added exportModeWithRules() - exports mode configuration with rules files
• Added importModeWithRules() - imports mode and handles rules based on target level

Message Handling

• src/shared/WebviewMessage.ts - Added exportMode, importMode, and checkRulesDirectory message types
• src/shared/ExtensionMessage.ts - Added result message types for UI feedback
• src/core/webview/webviewMessageHandler.ts - Added handlers for import/export operations

Frontend Changes

webview-ui/src/components/modes/ModesView.tsx

• Added export button that appears when a mode is selected
• Added import button with dialog to choose import level (global/project)
• Shows loading state during export operation
• Tracks which modes have rules to export

UI/UX Features

• Export: Click export button to save mode as YAML file with all rules included
• Import Dialog: Choose between global (all projects) or project-level import
• Smart Rules Handling:
  • Project imports preserve .roo/rules-{slug}/ folder structure
  • Global imports merge rules into custom instructions field
• Loading States: Shows "Exporting..." during export operation

Internationalization

Translation Support (18 languages)

• Added exportMode section with title, description, and exporting state
• Added importMode section with level selection and descriptions
• Supports all 18 languages in the extension

User Workflow

Export

1. Select any mode in the modes view
2. Click "Export Mode" button
3. Choose save location for YAML file
4. Mode and rules are exported together

Import

1. Click "Import Mode" button
2. Select YAML file to import
3. Choose import level:
   • Project: Mode available only in current workspace, rules preserved in .roo/rules-{slug}/
   • Global: Mode available in all projects, rules merged into custom instructions

Technical Approach

• Non-destructive: Original files remain unchanged during export
• Flexible Import: Different handling for project vs global imports
• Clean: Removes old rules folders before importing new ones
• Portable: Self-contained YAML files for easy sharing

Benefits

• Sharing: Easy to share custom modes with team members
• Backup: Export modes before making changes
• Templates: Create mode templates for different project types
• Migration: Move modes between global and project levels

Verification

• All existing tests pass
• No TypeScript errors
• No linting errors
• Export creates valid YAML files
• Import correctly handles both levels
• Rules are properly included/excluded based on content
• UI provides clear feedback during operations

---

Important

Adds import/export functionality for custom modes with rules, supporting global and project-level imports, and updates UI and translations for 18 languages.

• Behavior:
  • Adds import/export functionality for modes, including rules from .roo/rules-{slug}/.
  • Supports global and project-level imports, preserving or merging rules accordingly.
• Backend:
  • CustomModesManager.ts: Implements checkRulesDirectoryHasContent(), exportModeWithRules(), and importModeWithRules().
  • webviewMessageHandler.ts: Handles exportMode, importMode, and checkRulesDirectory messages.
• Frontend:
  • ModesView.tsx: Adds UI for exporting and importing modes, including loading states and import level selection.
• Internationalization:
  • Updates translation files for 18 languages to support new import/export features.

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

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to 23f5bca.

Security Overview

• 🔎 Scanned files: 43 changed file(s)

Detected Code Changes

The diff is too large to display a summary of code changes.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

[hannesrudolph]

Thanks for addressing all the feedback from the Copilot review! I can confirm that all the critical issues have been fixed in the latest commit:

✅ Localization is now properly handled - The confirmation check now uses t("prompts:consolidateRules.confirmText").toLowerCase() instead of the hard-coded "confirm"
✅ Translation parameters are correct - Using { slug: consolidateRulesMode } to match the expected parameter
✅ All UI text is localized - Including the "Advanced" section title
✅ Dead code removed - The unused loadRuleFiles call has been cleaned up

The consolidate rules feature is a valuable addition that makes custom modes more portable and easier to share. The implementation is solid with:

• Proper error handling
• Comprehensive i18n support across 18 languages
• Clean UI with loading states and confirmation dialogs
• Good separation of concerns between frontend and backend

One minor note: there's still an unused import for loadRuleFiles on line 14 of CustomModesManager.ts, but that's a trivial cleanup that doesn't affect functionality.

Great work on this feature! 🚀

[daniel-lxs]

I updated the code so the button is hidden if the .roomodes file doesn’t exist or doesn’t include the selected mode.

Previously, the button was always visible, and clicking 'Confirm' would silently fail if the file was missing or didn’t contain the selected mode.

[hannesrudolph]

Wow @mrubens this is a really good idea. Brilliant really.

[mrubens]

What do you think the main use case is here? People sharing modes with each other? If so, I wonder if we should just have an export button instead of deleting the rules files and moving the rules into the extension state. Maybe also worth thinking a little about where we want these rules to evolve in the long term.

[Copilot]

Pull Request Overview

This PR implements import/export functionality for custom modes, including their associated rules, and updates the backend, frontend, internationalization, and tests to support these new features.

• Adds export/import message types and handlers in the webview and extension message interfaces.
• Updates the UI in ModesView.tsx to incorporate export/import buttons and dialogs including loading state feedback.
• Enhances the CustomModesManager to read, merge, and write custom modes along with rules files, and updates tests and global settings accordingly.

Reviewed Changes

Copilot reviewed 43 out of 43 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webview-ui/src/i18n/locales/*/prompts.json	Added new translation keys for import/export modes in multiple locales.
webview-ui/src/components/modes/ModesView.tsx	Added export/import states, buttons, dialogs, and related message handling for mode exports/imports.
src/shared/WebviewMessage.ts & ExtensionMessage.ts	Introduced new message types to support export/import operations.
src/core/webview/webviewMessageHandler.ts	Implemented message handler cases for exportMode, importMode, and checkRulesDirectory.
src/core/config/CustomModesManager.ts	Extended backend logic to support exporting and importing mode configurations and associated rule files.
src/core/config/tests/CustomModesManager.spec.ts	Updated tests to validate import/export behavior and rules folder handling.
packages/types/src/global-settings.ts	Extended global settings schema to include lastModeExportPath and lastModeImportPath.

Comments suppressed due to low confidence (1)