feat: add "Installed" filter to Roo Marketplace

- 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

Author: roomote

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

@@ -27,6 +27,17 @@ export function MarketplaceListView({ stateManager, allTags, filteredTags, filte
 	const allItems = state.displayItems || []
 	const organizationMcps = state.displayOrganizationMcps || []
 
+	// Update state manager with installed metadata when it changes
+	React.useEffect(() => {
+		if (marketplaceInstalledMetadata && state.installedMetadata !== marketplaceInstalledMetadata) {
+			// Update the state manager's installed metadata
+			manager.transition({
+				type: "UPDATE_FILTERS",
+				payload: { filters: state.filters },
+			})
+		}
+	}, [marketplaceInstalledMetadata, state.installedMetadata, state.filters, manager])
+
 	// Filter items by type if specified
 	const items = filterByType ? allItems.filter((item) => item.type === filterByType) : allItems
 	const orgMcps = filterByType === "mcp" ? organizationMcps : []
@@ -55,6 +66,28 @@ export function MarketplaceListView({ stateManager, allTags, filteredTags, filte
 						}
 					/>
 				</div>
+				{/* Installed filter toggle */}
+				<div className="mt-2 flex items-center gap-2">
+					<label className="flex items-center gap-2 cursor-pointer">
+						<input
+							type="checkbox"
+							className="rounded border-vscode-input-border"
+							checked={state.filters.installed}
+							onChange={(e) =>
+								manager.transition({
+									type: "UPDATE_FILTERS",
+									payload: { filters: { installed: e.target.checked } },
+								})
+							}
+						/>
+						<span className="text-sm">{t("marketplace:filters.installed.label")}</span>
+					</label>
+					{state.filters.installed && (
+						<span className="text-xs text-vscode-descriptionForeground">
+							({t("marketplace:filters.installed.description")})
+						</span>
+					)}
+				</div>
 				{allTags.length > 0 && (
 					<div className="mt-2">
 						<div className="flex items-center justify-between mb-1">
@@ -187,7 +220,7 @@ export function MarketplaceListView({ stateManager, allTags, filteredTags, filte
 						onClick={() =>
 							manager.transition({
 								type: "UPDATE_FILTERS",
-								payload: { filters: { search: "", type: "", tags: [] } },
+								payload: { filters: { search: "", type: "", tags: [], installed: false } },
 							})
 						}
 						className="mt-4 bg-vscode-button-secondaryBackground text-vscode-button-secondaryForeground hover:bg-vscode-button-secondaryHoverBackground transition-colors">

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

@@ -26,7 +26,9 @@ export interface ViewState {
 		type: string
 		search: string
 		tags: string[]
+		installed: boolean // New filter to show only installed items
 	}
+	installedMetadata?: any // Store installed metadata for filtering
 }
 
 type TransitionPayloads = {
@@ -65,6 +67,7 @@ export class MarketplaceViewStateManager {
 				type: "",
 				search: "",
 				tags: [],
+				installed: false,
 			},
 		}
 	}
@@ -189,8 +192,11 @@ export class MarketplaceViewStateManager {
 				let newDisplayItems: MarketplaceItem[]
 				let newDisplayOrganizationMcps: MarketplaceItem[]
 				if (this.isFilterActive()) {
-					newDisplayItems = this.filterItems([...items])
-					newDisplayOrganizationMcps = this.filterItems([...this.state.organizationMcps])
+					newDisplayItems = this.filterItems([...items], this.state.installedMetadata)
+					newDisplayOrganizationMcps = this.filterItems(
+						[...this.state.organizationMcps],
+						this.state.installedMetadata,
+					)
 				} else {
 					// No filters active - show all items
 					newDisplayItems = [...items]
@@ -251,6 +257,7 @@ export class MarketplaceViewStateManager {
 					type: filters.type !== undefined ? filters.type : this.state.filters.type,
 					search: filters.search !== undefined ? filters.search : this.state.filters.search,
 					tags: filters.tags !== undefined ? filters.tags : this.state.filters.tags,
+					installed: filters.installed !== undefined ? filters.installed : this.state.filters.installed,
 				}
 
 				// Update filters first
@@ -260,8 +267,11 @@ export class MarketplaceViewStateManager {
 				}
 
 				// Apply filters to displayItems and displayOrganizationMcps with the updated filters
-				const newDisplayItems = this.filterItems(this.state.allItems)
-				const newDisplayOrganizationMcps = this.filterItems(this.state.organizationMcps)
+				const newDisplayItems = this.filterItems(this.state.allItems, this.state.installedMetadata)
+				const newDisplayOrganizationMcps = this.filterItems(
+					this.state.organizationMcps,
+					this.state.installedMetadata,
+				)
 
 				// Update state with filtered items
 				this.state = {
@@ -284,11 +294,16 @@ export class MarketplaceViewStateManager {
 	}
 
 	public isFilterActive(): boolean {
-		return !!(this.state.filters.type || this.state.filters.search || this.state.filters.tags.length > 0)
+		return !!(
+			this.state.filters.type ||
+			this.state.filters.search ||
+			this.state.filters.tags.length > 0 ||
+			this.state.filters.installed
+		)
 	}
 
-	public filterItems(items: MarketplaceItem[]): MarketplaceItem[] {
-		const { type, search, tags } = this.state.filters
+	public filterItems(items: MarketplaceItem[], installedMetadata?: any): MarketplaceItem[] {
+		const { type, search, tags, installed } = this.state.filters
 
 		return items
 			.map((item) => {
@@ -303,9 +318,20 @@ export class MarketplaceViewStateManager {
 					: false
 				const tagMatch = tags.length > 0 ? item.tags?.some((tag) => tags.includes(tag)) : false
 
+				// Check installed status if filter is active
+				let installedMatch = true
+				if (installed && installedMetadata) {
+					const isInstalledGlobally = !!installedMetadata?.global?.[item.id]
+					const isInstalledInProject = !!installedMetadata?.project?.[item.id]
+					installedMatch = isInstalledGlobally || isInstalledInProject
+				}
+
 				// Determine if the main item matches all filters
 				const mainItemMatches =
-					typeMatch && (!search || nameMatch || descriptionMatch) && (!tags.length || tagMatch)
+					typeMatch &&
+					(!search || nameMatch || descriptionMatch) &&
+					(!tags.length || tagMatch) &&
+					installedMatch
 
 				const hasMatchingSubcomponents = false
 
@@ -343,20 +369,29 @@ export class MarketplaceViewStateManager {
 			// Handle state updates for marketplace items
 			// The state.marketplaceItems come from ClineProvider, see the file src/core/webview/ClineProvider.ts
 			const marketplaceItems = message.state.marketplaceItems
+			const marketplaceInstalledMetadata = message.state.marketplaceInstalledMetadata
 
 			if (marketplaceItems !== undefined) {
 				// Always use the marketplace items from the extension when they're provided
 				// This ensures fresh data is always displayed
 				const items = [...marketplaceItems]
 
+				// Update installed metadata if provided
+				if (marketplaceInstalledMetadata !== undefined) {
+					this.state.installedMetadata = marketplaceInstalledMetadata
+				}
+
 				// Calculate display items based on current filters
 				// If no filters are active, show all items
 				// If filters are active, apply filtering
 				let newDisplayItems: MarketplaceItem[]
 				let newDisplayOrganizationMcps: MarketplaceItem[]
 				if (this.isFilterActive()) {
-					newDisplayItems = this.filterItems(items)
-					newDisplayOrganizationMcps = this.filterItems(this.state.organizationMcps)
+					newDisplayItems = this.filterItems(items, this.state.installedMetadata)
+					newDisplayOrganizationMcps = this.filterItems(
+						this.state.organizationMcps,
+						this.state.installedMetadata,
+					)
 				} else {
 					// No filters active - show all items
 					newDisplayItems = items
@@ -370,6 +405,7 @@ export class MarketplaceViewStateManager {
 					allItems: items,
 					displayItems: newDisplayItems,
 					displayOrganizationMcps: newDisplayOrganizationMcps,
+					installedMetadata: marketplaceInstalledMetadata || this.state.installedMetadata,
 				}
 				// Notification is handled below after all state parts are processed
 			}
@@ -411,14 +447,25 @@ export class MarketplaceViewStateManager {
 		if (message.type === "marketplaceData") {
 			const marketplaceItems = message.marketplaceItems
 			const organizationMcps = message.organizationMcps || []
+			const marketplaceInstalledMetadata = message.marketplaceInstalledMetadata
 
 			if (marketplaceItems !== undefined) {
 				// Always use the marketplace items from the extension when they're provided
 				// This ensures fresh data is always displayed
 				const items = [...marketplaceItems]
 				const orgMcps = [...organizationMcps]
-				const newDisplayItems = this.isFilterActive() ? this.filterItems(items) : items
-				const newDisplayOrganizationMcps = this.isFilterActive() ? this.filterItems(orgMcps) : orgMcps
+
+				// Update installed metadata if provided
+				if (marketplaceInstalledMetadata !== undefined) {
+					this.state.installedMetadata = marketplaceInstalledMetadata
+				}
+
+				const newDisplayItems = this.isFilterActive()
+					? this.filterItems(items, this.state.installedMetadata)
+					: items
+				const newDisplayOrganizationMcps = this.isFilterActive()
+					? this.filterItems(orgMcps, this.state.installedMetadata)
+					: orgMcps
 
 				// Update state in a single operation
 				this.state = {
@@ -428,6 +475,7 @@ export class MarketplaceViewStateManager {
 					organizationMcps: orgMcps,
 					displayItems: newDisplayItems,
 					displayOrganizationMcps: newDisplayOrganizationMcps,
+					installedMetadata: marketplaceInstalledMetadata || this.state.installedMetadata,
 				}
 			}
 

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

@@ -27,6 +27,7 @@ const mockState: ViewState = {
 		type: "",
 		search: "",
 		tags: [],
+		installed: false,
 	},
 }
 

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

@@ -64,6 +64,7 @@ describe("MarketplaceViewStateManager", () => {
 				type: "",
 				search: "",
 				tags: [],
+				installed: false,
 			})
 		})
 

webview-ui/src/components/marketplace/components/__tests__/MarketplaceItemCard.spec.tsx

@@ -78,6 +78,7 @@ describe("MarketplaceItemCard", () => {
 			type: "",
 			search: "",
 			tags: [],
+			installed: false,
 		},
 		setFilters: vi.fn(),
 		installed: {
@@ -158,7 +159,7 @@ describe("MarketplaceItemCard", () => {
 			renderWithProviders(
 				<MarketplaceItemCard
 					item={item}
-					filters={{ type: "", search: "", tags: [] }}
+					filters={{ type: "", search: "", tags: [], installed: false }}
 					setFilters={setFilters}
 					installed={{
 						project: undefined,

webview-ui/src/i18n/locales/en/marketplace.json

@@ -13,6 +13,10 @@
 			"placeholderMcp": "Search MCPs...",
 			"placeholderMode": "Search Modes..."
 		},
+		"installed": {
+			"label": "Show installed only",
+			"description": "Filtering by installed items"
+		},
 		"type": {
 			"label": "Filter by type:",
 			"all": "All types",