feat: enhance marketplace data handling with improved error logging and user notifications

Author: daniel-lxs

src/core/webview/ClineProvider.ts

@@ -23,6 +23,7 @@ import {
 	type TerminalActionPromptType,
 	type HistoryItem,
 	type CloudUserInfo,
+	type MarketplaceItem,
 	requestyDefaultModelId,
 	openRouterDefaultModelId,
 	glamaDefaultModelId,
@@ -37,7 +38,7 @@ import { Package } from "../../shared/package"
 import { findLast } from "../../shared/array"
 import { supportPrompt } from "../../shared/support-prompt"
 import { GlobalFileNames } from "../../shared/globalFileNames"
-import { ExtensionMessage } from "../../shared/ExtensionMessage"
+import { ExtensionMessage, MarketplaceInstalledMetadata } from "../../shared/ExtensionMessage"
 import { Mode, defaultModeSlug } from "../../shared/modes"
 import { experimentDefault, experiments, EXPERIMENT_IDS } from "../../shared/experiments"
 import { formatLanguage } from "../../shared/language"
@@ -1260,8 +1261,14 @@ export class ClineProvider
 	async fetchMarketplaceData() {
 		try {
 			const [marketplaceItems, marketplaceInstalledMetadata] = await Promise.all([
-				this.marketplaceManager.getCurrentItems().catch(() => []),
-				this.marketplaceManager.getInstallationMetadata().catch(() => ({ project: {}, global: {} })),
+				this.marketplaceManager.getCurrentItems().catch((error) => {
+					console.error("Failed to fetch marketplace items:", error)
+					return [] as MarketplaceItem[]
+				}),
+				this.marketplaceManager.getInstallationMetadata().catch((error) => {
+					console.error("Failed to fetch installation metadata:", error)
+					return { project: {}, global: {} } as MarketplaceInstalledMetadata
+				}),
 			])
 
 			// Send marketplace data separately
@@ -1278,6 +1285,13 @@ export class ClineProvider
 				marketplaceItems: [],
 				marketplaceInstalledMetadata: { project: {}, global: {} },
 			})
+
+			// Show user-friendly error notification for network issues
+			if (error instanceof Error && error.message.includes("timeout")) {
+				vscode.window.showWarningMessage(
+					"Marketplace data could not be loaded due to network restrictions. Core functionality remains available.",
+				)
+			}
 		}
 	}
 
@@ -1369,18 +1383,12 @@ export class ClineProvider
 		const allowedCommands = vscode.workspace.getConfiguration(Package.name).get<string[]>("allowedCommands") || []
 		const cwd = this.cwd
 
-		// Initialize marketplace data as empty - will be fetched on demand
-		let marketplaceItems: any[] = []
-		let marketplaceInstalledMetadata: any = { project: {}, global: {} }
-
 		// Check if there's a system prompt override for the current mode
 		const currentMode = mode ?? defaultModeSlug
 		const hasSystemPromptOverride = await this.hasFileBasedSystemPromptOverride(currentMode)
 
 		return {
 			version: this.context.extension?.packageJSON?.version ?? "",
-			marketplaceItems,
-			marketplaceInstalledMetadata,
 			apiConfiguration,
 			customInstructions,
 			alwaysAllowReadOnly: alwaysAllowReadOnly ?? false,

src/shared/ExtensionMessage.ts

@@ -18,6 +18,12 @@ import { Mode } from "./modes"
 import { RouterModels } from "./api"
 import type { MarketplaceItem } from "@roo-code/types"
 
+// Type for marketplace installed metadata
+export interface MarketplaceInstalledMetadata {
+	project: Record<string, { type: string }>
+	global: Record<string, { type: string }>
+}
+
 // Indexing status types
 export interface IndexingStatus {
 	systemStatus: string
@@ -138,7 +144,7 @@ export interface ExtensionMessage {
 	organizationAllowList?: OrganizationAllowList
 	tab?: string
 	marketplaceItems?: MarketplaceItem[]
-	marketplaceInstalledMetadata?: { project: Record<string, any>; global: Record<string, any> }
+	marketplaceInstalledMetadata?: MarketplaceInstalledMetadata
 }
 
 export type ExtensionState = Pick<

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

@@ -34,6 +34,7 @@ export function MarketplaceView({ stateManager, onDone }: MarketplaceViewProps)
 		// send back the full state including all marketplace items.
 		if (!hasReceivedInitialState && state.allItems.length === 0) {
 			// Fetch marketplace data on demand
+			// Note: isFetching is already true by default for initial load
 			vscode.postMessage({
 				type: "fetchMarketplaceData",
 			})

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

@@ -55,7 +55,7 @@ export class MarketplaceViewStateManager {
 		return {
 			allItems: [],
 			displayItems: [], // Always initialize as empty array, not undefined
-			isFetching: false,
+			isFetching: true, // Start with loading state for initial load
 			activeTab: "mcp",
 			filters: {
 				type: "",
@@ -148,8 +148,12 @@ export class MarketplaceViewStateManager {
 	public async transition(transition: ViewStateTransition): Promise<void> {
 		switch (transition.type) {
 			case "FETCH_ITEMS": {
-				// Fetch functionality removed - data comes automatically from extension
-				// No manual fetching needed since we removed caching
+				// Set fetching state to show loading indicator
+				this.state = {
+					...this.state,
+					isFetching: true,
+				}
+				this.notifyStateChange()
 				break
 			}
 
@@ -225,12 +229,21 @@ export class MarketplaceViewStateManager {
 					tags: filters.tags !== undefined ? filters.tags : this.state.filters.tags,
 				}
 
-				// Update state
+				// Update filters first
 				this.state = {
 					...this.state,
 					filters: updatedFilters,
 				}
 
+				// Apply filters to displayItems with the updated filters
+				const newDisplayItems = this.filterItems(this.state.allItems)
+
+				// Update state with filtered items
+				this.state = {
+					...this.state,
+					displayItems: newDisplayItems,
+				}
+
 				// Send filter message
 				vscode.postMessage({
 					type: "filterMarketplaceItems",

webview-ui/src/context/ExtensionStateContext.tsx

@@ -10,7 +10,7 @@ import {
 	ORGANIZATION_ALLOW_ALL,
 } from "@roo-code/types"
 
-import { ExtensionMessage, ExtensionState } from "@roo/ExtensionMessage"
+import { ExtensionMessage, ExtensionState, MarketplaceInstalledMetadata } from "@roo/ExtensionMessage"
 import { findLastIndex } from "@roo/array"
 import { McpServer } from "@roo/mcp"
 import { checkExistKey } from "@roo/checkExistApiConfig"
@@ -43,7 +43,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	customCondensingPrompt?: string
 	setCustomCondensingPrompt: (value: string) => void
 	marketplaceItems?: any[]
-	marketplaceInstalledMetadata?: { project: Record<string, any>; global: Record<string, any> }
+	marketplaceInstalledMetadata?: MarketplaceInstalledMetadata
 	setApiConfiguration: (config: ProviderSettings) => void
 	setCustomInstructions: (value?: string) => void
 	setAlwaysAllowReadOnly: (value: boolean) => void
@@ -220,10 +220,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	const [currentCheckpoint, setCurrentCheckpoint] = useState<string>()
 	const [extensionRouterModels, setExtensionRouterModels] = useState<RouterModels | undefined>(undefined)
 	const [marketplaceItems, setMarketplaceItems] = useState<any[]>([])
-	const [marketplaceInstalledMetadata, setMarketplaceInstalledMetadata] = useState<{
-		project: Record<string, any>
-		global: Record<string, any>
-	}>({ project: {}, global: {} })
+	const [marketplaceInstalledMetadata, setMarketplaceInstalledMetadata] = useState<MarketplaceInstalledMetadata>({
+		project: {},
+		global: {},
+	})
 
 	const setListApiConfigMeta = useCallback(
 		(value: ProviderSettingsEntry[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),