feat: add "Installed" filter to Roo Marketplace #7007

roomote · 2025-08-12T17:19:13Z

This PR adds an "Installed" filter to the Roo Marketplace to help users easily find and manage their installed MCPs and modes.

Changes

Added installed boolean filter to ViewState interface
Implemented UI checkbox for "Show installed only" filter
Updated filterItems method to filter by installation status
Added translation strings for the new filter
Updated tests to include the new filter property

Screenshots

The new filter appears as a checkbox below the search input:

When unchecked: Shows all marketplace items (default behavior)
When checked: Shows only installed items

Testing

All existing tests pass
Updated test files to include the new installed property in filter objects

Fixes #7004

Important

Adds 'Installed' filter to Roo Marketplace, allowing users to filter items by installation status, with updates to UI, state management, and translations.

Behavior:
- Adds 'Installed' filter to MarketplaceListView.tsx allowing users to filter items by installation status.
- Updates filterItems in MarketplaceViewStateManager.ts to handle 'installed', 'not_installed', and 'all' states.
- UI checkbox for 'Show installed only' added.
State Management:
- Adds installed filter to ViewState in MarketplaceViewStateManager.ts.
- Updates handleMessage and transition methods to manage installed metadata.
Translations:
- Adds translation strings for 'Installed' filter in multiple language files including en/marketplace.json, es/marketplace.json, and fr/marketplace.json.
Testing:
- Updates tests in MarketplaceListView.spec.tsx and MarketplaceViewStateManager.spec.ts to include 'installed' filter scenarios.

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

- Added installed boolean filter to ViewState interface - Implemented UI checkbox for "Show installed only" filter - Updated filterItems method to filter by installation status - Added translation strings for the new filter - Updated tests to include the new filter property Fixes #7004

roomote

Reviewing my own code is like debugging in production - technically possible but morally questionable.

roomote · 2025-08-12T17:25:54Z

webview-ui/src/components/marketplace/MarketplaceListView.tsx

+				payload: { filters: state.filters },
+			})
+		}
+	}, [marketplaceInstalledMetadata, state.installedMetadata, state.filters, manager])


Is this useEffect intentional? It seems redundant since the state manager already handles installedMetadata updates through the handleMessage method. This could cause unnecessary re-renders and state updates when the metadata changes.

roomote · 2025-08-12T17:25:54Z

webview-ui/src/components/marketplace/MarketplaceListView.tsx

+					<label className="flex items-center gap-2 cursor-pointer">
+						<input
+							type="checkbox"
+							className="rounded border-vscode-input-border"


Could we add proper ARIA labels here for better accessibility? Screen reader users might have difficulty understanding the purpose of this checkbox without proper labeling.

Suggested change

className="rounded border-vscode-input-border"

<input

type="checkbox"

className="rounded border-vscode-input-border"

checked={state.filters.installed}

aria-label="Show installed items only"

onChange={(e) =>

roomote · 2025-08-12T17:25:54Z

webview-ui/src/components/marketplace/MarketplaceViewStateManager.ts

 	}
+	installedMetadata?: any // Store installed metadata for filtering


Type safety concern: Consider creating a proper TypeScript interface for the installed metadata structure instead of using any. This would improve type safety and make the code more maintainable.

Suggested change

installedMetadata?: any // Store installed metadata for filtering

installedMetadata?: {

global?: Record<string, any>;

project?: Record<string, any>;

} // Store installed metadata for filtering

roomote · 2025-08-12T17:25:54Z

webview-ui/src/components/marketplace/MarketplaceViewStateManager.ts

@@ -65,6 +67,7 @@
 				type: "",
 				search: "",
 				tags: [],
+				installed: false,
 			},


The installedMetadata field should be initialized in the getDefaultState() method to avoid potential undefined behavior on first load. Consider adding:

Suggested change

},

installed: false,

},

installedMetadata: undefined,

roomote · 2025-08-12T17:25:55Z

webview-ui/src/components/marketplace/MarketplaceViewStateManager.ts

+				if (installed && installedMetadata) {
+					const isInstalledGlobally = !!installedMetadata?.global?.[item.id]
+					const isInstalledInProject = !!installedMetadata?.project?.[item.id]
+					installedMatch = isInstalledGlobally || isInstalledInProject


Performance consideration: The installed filter logic checks both global and project metadata for every item when the filter is active. Could we memoize the installed status calculation or compute it once when metadata updates rather than on every filter operation? This would improve performance for large item lists.

semidark · 2025-08-12T18:32:36Z

@roomote-agent Can you please add the missing Translations for this new feature? Currently the QA Roo Code Checks for translation fail. All Other CI/CD Tests seam to work fine.

roomote · 2025-08-12T18:34:25Z

Hi @semidark! I see the issue with the missing translations for the "Installed" filter feature. I'll add the missing translations to all language files right away to fix the failing CI check.

- Added "filters.installed.label" and "filters.installed.description" keys - Updated all backend marketplace.json files (src/i18n/locales/*/marketplace.json) - Updated all frontend marketplace.json files (webview-ui/src/i18n/locales/*/marketplace.json) - All translation checks now pass successfully

roomote · 2025-08-12T18:59:16Z

@semidark The missing translations have been successfully added! ✅

The check-translations CI job is now passing. I added the required translations for filters.installed.label and filters.installed.description to all 18 supported languages in both backend and frontend marketplace.json files.

Total files modified: 35
Commit: 3e0e0e0

- Replace plain HTML checkbox with UI library Checkbox component for consistency - Add proper TypeScript typing for installedMetadata (MarketplaceInstalledMetadata) - Optimize filterItems method to avoid unnecessary object copying - Remove dead code for subcomponent filtering

- Replace checkbox with dropdown for better UX - Place dropdown inline with search field for better layout - Add three filter options: All Items, Installed Only, Not Installed - Update filter logic to handle all three states - Improve translation labels to clarify it's a filter - Optimize filterItems method for better performance - Add proper TypeScript types throughout

- Set both Select and Button components to h-7 for visual consistency - Installation status dropdown and tags dropdown now have identical height - Improved visual alignment for better UX

…e-render loop; rely on state manager handleMessage sync

- Replace checkbox-based installed keys with dropdown keys: { label, all, installed, notInstalled } - Updated both frontend and backend marketplace.json files for all non-English locales - Ensures translation completeness for CI check

…oss all locales (frontend + backend)

daniel-lxs · 2025-08-18T21:51:42Z

Here's how it looks:

daniel-lxs

LGTM

roomote bot requested review from mrubens, cte and jr as code owners August 12, 2025 17:19

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Aug 12, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Aug 12, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Aug 12, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. enhancement New feature or request labels Aug 12, 2025

roomote bot mentioned this pull request Aug 12, 2025

"Installed" filter in Roo Marketplace #7004

Closed

1 task

roomote bot commented Aug 12, 2025

View reviewed changes

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

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

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

daniel-lxs added 6 commits August 18, 2025 15:10

fix: ensure both filter dropdowns have matching height

f0d881a

- Set both Select and Button components to h-7 for visual consistency - Installation status dropdown and tags dropdown now have identical height - Improved visual alignment for better UX

chore: remove redundant useEffect in MarketplaceListView to prevent r…

048b86e

…e-render loop; rely on state manager handleMessage sync

i18n: change Installed option text to 'Installed' (remove 'Only') acr…

0bf4e0c

…oss all locales (frontend + backend)

daniel-lxs moved this from PR [Needs Prelim Review] to PR [Needs Review] in Roo Code Roadmap Aug 18, 2025

daniel-lxs approved these changes Aug 18, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Aug 18, 2025

hannesrudolph added PR - Needs Review and removed PR - Needs Preliminary Review labels Aug 18, 2025

mrubens approved these changes Aug 21, 2025

View reviewed changes

mrubens merged commit 007b58d into main Aug 21, 2025
16 checks passed

mrubens deleted the feature/add-installed-filter-marketplace branch August 21, 2025 09:17

github-project-automation bot moved this from New to Done in Roo Code Roadmap Aug 21, 2025

github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Aug 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add "Installed" filter to Roo Marketplace #7007

feat: add "Installed" filter to Roo Marketplace #7007

Uh oh!

roomote bot commented Aug 12, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot left a comment

Uh oh!

roomote bot Aug 12, 2025

Uh oh!

roomote bot Aug 12, 2025

Uh oh!

roomote bot Aug 12, 2025

Uh oh!

roomote bot Aug 12, 2025

Uh oh!

roomote bot Aug 12, 2025

Uh oh!

semidark commented Aug 12, 2025

Uh oh!

roomote bot commented Aug 12, 2025

Uh oh!

roomote bot commented Aug 12, 2025

Uh oh!

daniel-lxs commented Aug 18, 2025

Uh oh!

daniel-lxs left a comment

Uh oh!

Uh oh!

Uh oh!

		}
		installedMetadata?: any // Store installed metadata for filtering

-	installedMetadata?: any // Store installed metadata for filtering
+	installedMetadata?: {
+		global?: Record<string, any>;
+		project?: Record<string, any>;
+	} // Store installed metadata for filtering

feat: add "Installed" filter to Roo Marketplace #7007

feat: add "Installed" filter to Roo Marketplace #7007

Uh oh!

Conversation

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

Uh oh!

Changes

Screenshots

Testing

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

semidark commented Aug 12, 2025

Uh oh!

roomote bot commented Aug 12, 2025

Uh oh!

roomote bot commented Aug 12, 2025

Uh oh!

daniel-lxs commented Aug 18, 2025

Uh oh!

daniel-lxs left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

roomote bot commented Aug 12, 2025 •

edited by ellipsis-dev bot

Loading