refactor(marketplace): some UI adjustments (#13)

* refactor(marketplace): add installed tabs

* fix: missing settings button

* refactor(marketplace): better card UI

* refactor(marketplace): better error message for sources

* tests(marketplace): item card and source config

* refactor(marketplace): colocate local states

* refactor(marketplace): simplify tabs

* test: marketplace view

---------

Co-authored-by: elianiva <51877647+elianiva@users.noreply.github.com>

src/i18n/locales/en/marketplace.json

@@ -27,11 +27,6 @@
 		"installButton": "Install",
 		"cancelButton": "Cancel"
 	},
-	"install-sidebar": {
-		"title": "Install {{itemName}}",
-		"installButton": "Install",
-		"cancelButton": "Cancel"
-	},
 	"filters": {
 		"search": {
 			"placeholder": "Search marketplace..."
@@ -78,19 +73,20 @@
 			"current": {
 				"title": "Current Sources",
 				"empty": "No marketplace sources added yet.",
-				"emptyHint": "Add a source above to browse marketplace items."
-			},
-			"current": {
+				"emptyHint": "Add a source above to browse marketplace items.",
 				"refresh": "Refresh source",
 				"remove": "Remove source"
 			}
 		},
-		"tabs": {
-			"browse": "Browse",
-			"sources": "Sources"
-		},
 		"title": "Marketplace"
 	},
+	"done": "Done",
+	"refresh": "Refresh",
+	"tabs": {
+		"installed": "Installed",
+		"browse": "Browse",
+		"settings": "Settings"
+	},
 	"items": {
 		"refresh": {
 			"refreshing": "Refreshing marketplace items..."

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

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Button } from "@/components/ui/button"
@@ -13,24 +14,23 @@ export interface MarketplaceListViewProps {
 	stateManager: MarketplaceViewStateManager
 	allTags: string[]
 	filteredTags: string[]
-	tagSearch: string
-	setTagSearch: (value: string) => void
-	isTagPopoverOpen: boolean
-	setIsTagPopoverOpen: (value: boolean) => void
+	showInstalledOnly?: boolean
 }
 
 export function MarketplaceListView({
 	stateManager,
 	allTags,
 	filteredTags,
-	tagSearch,
-	setTagSearch,
-	isTagPopoverOpen,
-	setIsTagPopoverOpen,
+	showInstalledOnly = false,
 }: MarketplaceListViewProps) {
 	const [state, manager] = useStateManager(stateManager)
 	const { t } = useAppTranslation()
-	const items = state.displayItems || []
+	const [isTagPopoverOpen, setIsTagPopoverOpen] = React.useState(false)
+	const [tagSearch, setTagSearch] = React.useState("")
+	const allItems = state.displayItems || []
+	const items = showInstalledOnly
+		? allItems.filter((item) => state.installedMetadata.project[item.id] || state.installedMetadata.global[item.id])
+		: allItems
 	const isEmpty = items.length === 0
 
 	return (
@@ -142,7 +142,7 @@ export function MarketplaceListView({
 											},
 										})
 									}
-									className="shadow-none bg-vscode-input-background px-2">
+									className="shadow-none bg-vscode-dropdown-background px-2">
 									{state.sortConfig.order === "asc" ? "↑" : "↓"}
 								</Button>
 							</div>
@@ -176,7 +176,7 @@ export function MarketplaceListView({
 								)}
 							</div>
 
-							<Popover open={isTagPopoverOpen} onOpenChange={setIsTagPopoverOpen}>
+							<Popover open={isTagPopoverOpen} onOpenChange={(open) => setIsTagPopoverOpen(open)}>
 								<PopoverTrigger asChild>
 									<Button
 										variant="combobox"
@@ -193,7 +193,9 @@ export function MarketplaceListView({
 										<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 									</Button>
 								</PopoverTrigger>
-								<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+								<PopoverContent
+									className="w-[var(--radix-popover-trigger-width)] p-0"
+									onClick={(e) => e.stopPropagation()}>
 									<Command>
 										<div className="relative">
 											<CommandInput
@@ -238,7 +240,10 @@ export function MarketplaceListView({
 														}}
 														data-selected={state.filters.tags.includes(tag)}
 														className="grid grid-cols-[1rem_1fr] gap-2 cursor-pointer text-sm capitalize"
-														onMouseDown={(e) => e.preventDefault()}>
+														onMouseDown={(e) => {
+															e.stopPropagation()
+															e.preventDefault()
+														}}>
 														{state.filters.tags.includes(tag) ? (
 															<span className="codicon codicon-check" />
 														) : (
@@ -265,7 +270,7 @@ export function MarketplaceListView({
 				</div>
 			</div>
 
-			{state.isFetching && (
+			{state.isFetching && isEmpty && (
 				<div className="flex flex-col items-center justify-center h-64 text-vscode-descriptionForeground animate-fade-in">
 					<div className="animate-spin mb-4">
 						<span className="codicon codicon-sync text-3xl"></span>

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

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Checkbox } from "@/components/ui/checkbox"
 import { useStateManager } from "./useStateManager"
-import { validateSource } from "@roo/shared/MarketplaceValidation"
+import { validateSource, ValidationError } from "@roo/shared/MarketplaceValidation"
 import { cn } from "@src/lib/utils"
 
 export interface MarketplaceSourcesConfigProps {
@@ -19,6 +19,62 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 	const [newSourceUrl, setNewSourceUrl] = useState("")
 	const [newSourceName, setNewSourceName] = useState("")
 	const [error, setError] = useState("")
+	const [fieldErrors, setFieldErrors] = useState<{
+		name?: string
+		url?: string
+	}>({})
+
+	// Check if name contains emoji characters
+	const containsEmoji = (str: string): boolean => {
+		// Simple emoji detection using common emoji ranges
+		// This avoids using Unicode property escapes which require ES2018+
+		return (
+			/[\ud83c\ud83d\ud83e][\ud000-\udfff]/.test(str) || // Common emoji surrogate pairs
+			/[\u2600-\u27BF]/.test(str) || // Misc symbols and pictographs
+			/[\u2300-\u23FF]/.test(str) || // Miscellaneous Technical
+			/[\u2700-\u27FF]/.test(str) || // Dingbats
+			/[\u2B50\u2B55]/.test(str) || // Star, Circle
+			/[\u203C\u2049\u20E3\u2122\u2139\u2194-\u2199\u21A9\u21AA]/.test(str)
+		) // Punctuation
+	}
+
+	// Validate input fields without submitting
+	const validateFields = () => {
+		const newErrors: { name?: string; url?: string } = {}
+
+		// Validate name if provided
+		if (newSourceName) {
+			if (newSourceName.length > 20) {
+				newErrors.name = t("marketplace:sources.errors.nameTooLong")
+			} else if (containsEmoji(newSourceName)) {
+				newErrors.name = t("marketplace:sources.errors.emojiName")
+			} else {
+				// Check for duplicate names
+				const hasDuplicateName = state.sources.some(
+					(source) => source.name && source.name.toLowerCase() === newSourceName.toLowerCase(),
+				)
+				if (hasDuplicateName) {
+					newErrors.name = t("marketplace:sources.errors.duplicateName")
+				}
+			}
+		}
+
+		// Validate URL
+		if (!newSourceUrl.trim()) {
+			newErrors.url = t("marketplace:sources.errors.emptyUrl")
+		} else {
+			// Check for duplicate URLs
+			const hasDuplicateUrl = state.sources.some(
+				(source) => source.url.toLowerCase().trim() === newSourceUrl.toLowerCase().trim(),
+			)
+			if (hasDuplicateUrl) {
+				newErrors.url = t("marketplace:sources.errors.duplicateUrl")
+			}
+		}
+
+		setFieldErrors(newErrors)
+		return Object.keys(newErrors).length === 0
+	}
 
 	const handleAddSource = () => {
 		const MAX_SOURCES = 10
@@ -26,11 +82,27 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 			setError(t("marketplace:sources.errors.maxSources", { max: MAX_SOURCES }))
 			return
 		}
+
+		// Clear previous errors
+		setError("")
+
+		// Perform quick validation first
+		if (!validateFields()) {
+			// If we have specific field errors, show the first one as the main error
+			if (fieldErrors.url) {
+				setError(fieldErrors.url)
+			} else if (fieldErrors.name) {
+				setError(fieldErrors.name)
+			}
+			return
+		}
+
 		const sourceToValidate: MarketplaceSource = {
-			url: newSourceUrl,
-			name: newSourceName || undefined,
+			url: newSourceUrl.trim(),
+			name: newSourceName.trim() || undefined,
 			enabled: true,
 		}
+
 		const validationErrors = validateSource(sourceToValidate, state.sources)
 		if (validationErrors.length > 0) {
 			const errorMessages: Record<string, string> = {
@@ -42,7 +114,34 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 				"name:nonvisible": "marketplace:sources.errors.nonVisibleCharsName",
 				"name:duplicate": "marketplace:sources.errors.duplicateName",
 			}
-			const error = validationErrors[0]
+
+			// Group errors by field for better user feedback
+			const fieldErrorMap: Record<string, ValidationError[]> = {}
+			for (const error of validationErrors) {
+				if (!fieldErrorMap[error.field]) {
+					fieldErrorMap[error.field] = []
+				}
+				fieldErrorMap[error.field].push(error)
+			}
+
+			// Update field-specific errors
+			const newFieldErrors: { name?: string; url?: string } = {}
+			if (fieldErrorMap.name) {
+				const error = fieldErrorMap.name[0]
+				const errorKey = `name:${error.message.toLowerCase().split(" ")[0]}`
+				newFieldErrors.name = t(errorMessages[errorKey] || error.message)
+			}
+
+			if (fieldErrorMap.url) {
+				const error = fieldErrorMap.url[0]
+				const errorKey = `url:${error.message.toLowerCase().split(" ")[0]}`
+				newFieldErrors.url = t(errorMessages[errorKey] || error.message)
+			}
+
+			setFieldErrors(newFieldErrors)
+
+			// Set the main error message (prioritize URL errors)
+			const error = fieldErrorMap.url?.[0] || validationErrors[0]
 			const errorKey = `${error.field}:${error.message.toLowerCase().split(" ")[0]}`
 			setError(t(errorMessages[errorKey] || "marketplace:sources.errors.invalidGitUrl"))
 			return
@@ -97,16 +196,40 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 							onChange={(e) => {
 								setNewSourceName(e.target.value.slice(0, 20))
 								setError("")
+								setFieldErrors((prev) => ({ ...prev, name: undefined }))
+
+								// Live validation for emojis and length
+								const value = e.target.value
+								if (value && containsEmoji(value)) {
+									setFieldErrors((prev) => ({
+										...prev,
+										name: t("marketplace:sources.errors.emojiName"),
+									}))
+								} else if (value.length >= 20) {
+									setFieldErrors((prev) => ({
+										...prev,
+										name: t("marketplace:sources.errors.nameTooLong"),
+									}))
+								}
 							}}
 							maxLength={20}
-							className="pl-10"
+							className={cn("pl-10", {
+								"border-red-500 focus-visible:ring-red-500": fieldErrors.name,
+							})}
+							onBlur={() => validateFields()}
 						/>
 						<span className="absolute left-3 top-1/2 -translate-y-1/2 text-vscode-descriptionForeground">
 							<span className="codicon codicon-tag"></span>
 						</span>
-						<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-vscode-descriptionForeground">
+						<span
+							className={cn(
+								"absolute right-3 top-1/2 -translate-y-1/2 text-xs",
+								newSourceName.length >= 18 ? "text-amber-500" : "text-vscode-descriptionForeground",
+								newSourceName.length >= 20 ? "text-red-500" : "",
+							)}>
 							{newSourceName.length}/20
 						</span>
+						{fieldErrors.name && <p className="text-xs text-red-500 mt-1 mb-0">{fieldErrors.name}</p>}
 					</div>
 					<div className="relative">
 						<Input
@@ -116,12 +239,25 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 							onChange={(e) => {
 								setNewSourceUrl(e.target.value)
 								setError("")
+								setFieldErrors((prev) => ({ ...prev, url: undefined }))
+
+								// Live validation for empty URL
+								if (!e.target.value.trim()) {
+									setFieldErrors((prev) => ({
+										...prev,
+										url: t("marketplace:sources.errors.emptyUrl"),
+									}))
+								}
 							}}
-							className="pl-10"
+							className={cn("pl-10", {
+								"border-red-500 focus-visible:ring-red-500": fieldErrors.url,
+							})}
+							onBlur={() => validateFields()}
 						/>
 						<span className="absolute left-3 top-1/2 -translate-y-1/2 text-vscode-descriptionForeground">
 							<span className="codicon codicon-link"></span>
 						</span>
+						{fieldErrors.url && <p className="text-xs text-red-500 mt-1 mb-0">{fieldErrors.url}</p>}
 					</div>
 					<p className="text-xs text-vscode-descriptionForeground m-0">
 						{t("marketplace:sources.add.urlFormats")}
@@ -135,7 +271,10 @@ export function MarketplaceSourcesConfig({ stateManager }: MarketplaceSourcesCon
 						</p>
 					</div>
 				)}
-				<Button onClick={handleAddSource} className="mt-2 w-full shadow-none border-none">
+				<Button
+					onClick={handleAddSource}
+					className="mt-2 w-full shadow-none border-none"
+					disabled={!!fieldErrors.name || !!fieldErrors.url || !newSourceUrl.trim()}>
 					<span className="codicon codicon-add"></span>
 					{t("marketplace:sources.add.button")}
 				</Button>

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

@@ -13,19 +13,17 @@ import { RocketConfig } from "config-rocket"
 import { MarketplaceSourcesConfig } from "./MarketplaceSourcesConfigView"
 import { MarketplaceListView } from "./MarketplaceListView"
 import { cn } from "@/lib/utils"
-import { Package, RefreshCw, Server } from "lucide-react"
+import { RefreshCw } from "lucide-react"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
 interface MarketplaceViewProps {
 	onDone?: () => void
 	stateManager: MarketplaceViewStateManager
 }
-export function MarketplaceView({ stateManager }: MarketplaceViewProps) {
+export function MarketplaceView({ stateManager, onDone }: MarketplaceViewProps) {
 	const { t } = useAppTranslation()
 	const [state, manager] = useStateManager(stateManager)
 
-	const [tagSearch, setTagSearch] = useState("")
-	const [isTagPopoverOpen, setIsTagPopoverOpen] = useState(false)
 	const [showInstallSidebar, setShowInstallSidebar] = useState<
 		| {
 				item: MarketplaceItem
@@ -84,11 +82,7 @@ export function MarketplaceView({ stateManager }: MarketplaceViewProps) {
 	)
 
 	// Memoize filtered tags
-	const filteredTags = useMemo(
-		() =>
-			tagSearch ? allTags.filter((tag: string) => tag.toLowerCase().includes(tagSearch.toLowerCase())) : allTags,
-		[allTags, tagSearch],
-	)
+	const filteredTags = useMemo(() => allTags, [allTags])
 
 	return (
 		<TooltipProvider>
@@ -96,53 +90,51 @@ export function MarketplaceView({ stateManager }: MarketplaceViewProps) {
 				<TabHeader className="flex flex-col sticky top-0 z-10 px-3 py-2">
 					<div className="flex justify-between items-center px-2">
 						<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
-						<Button
-							className={cn("h-4 px-0", {
-								flex: state.activeTab === "browse",
-								hidden: state.activeTab === "sources",
-							})}
-							variant="ghost"
-							size="sm"
-							onClick={() => manager.transition({ type: "FETCH_ITEMS" })}>
-							<RefreshCw className={cn("size-4", state.isFetching && "animate-spin")} />
-						</Button>
+						<div className="flex gap-2 items-center">
+							<Button variant="secondary" onClick={() => manager.transition({ type: "FETCH_ITEMS" })}>
+								<RefreshCw className={cn("size-4", { "animate-spin": state.isFetching })} />
+								{t("marketplace:refresh")}
+							</Button>
+							<Button variant="default" onClick={onDone}>
+								{t("marketplace:done")}
+							</Button>
+						</div>
 					</div>
+
 					<div className="w-full mt-2">
-						<div className="bg-vscode-input-background rounded-md flex relative py-1">
-							<div
-								className={cn(
-									"absolute w-1/2 h-full top-0 rounded-sm bg-vscode-button-background transition-all duration-300 ease-in-out",
-									{
-										"left-0": state.activeTab === "browse",
-										"left-1/2": state.activeTab === "sources",
-									},
-								)}
-							/>
+						<div className="flex relative py-1">
+							<div className="absolute w-full h-[2px] -bottom-[2px] bg-vscode-input-border">
+								<div
+									className={cn(
+										"absolute w-1/3 h-[2px] bottom-0 bg-vscode-button-background transition-all duration-300 ease-in-out",
+										{
+											"left-0": state.activeTab === "browse",
+											"left-1/3": state.activeTab === "installed",
+											"left-2/3": state.activeTab === "settings",
+										},
+									)}
+								/>
+							</div>
 							<button
-								className={cn(
-									"flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10",
-									state.activeTab === "browse"
-										? "text-vscode-button-foreground"
-										: "text-vscode-foreground hover:text-vscode-button-background",
-								)}
+								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() =>
 									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "browse" } })
 								}>
-								<Package className="h-4 w-4" />
 								{t("marketplace:tabs.browse")}
 							</button>
 							<button
-								className={cn(
-									"flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10",
-									state.activeTab === "sources"
-										? "text-vscode-button-foreground"
-										: "text-vscode-foreground hover:text-vscode-button-background",
-								)}
+								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() =>
-									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "sources" } })
+									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "installed" } })
 								}>
-								<Server className="h-4 w-4" />
-								{t("marketplace:tabs.sources")}
+								{t("marketplace:tabs.installed")}
+							</button>
+							<button
+								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
+								onClick={() =>
+									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "settings" } })
+								}>
+								{t("marketplace:tabs.settings")}
 							</button>
 						</div>
 					</div>
@@ -153,23 +145,35 @@ export function MarketplaceView({ stateManager }: MarketplaceViewProps) {
 						<div
 							className={cn("absolute w-full transition-all duration-300 ease-in-out", {
 								"translate-x-0 opacity-100 z-10": state.activeTab === "browse",
-								"translate-x-[-100%] opacity-0 z-0": state.activeTab === "sources",
+								"translate-x-[-100%] opacity-0 z-0": state.activeTab === "installed",
+								"translate-x-[-200%] opacity-0 z-0": state.activeTab === "settings",
 							})}>
 							<MarketplaceListView
 								stateManager={stateManager}
 								allTags={allTags}
 								filteredTags={filteredTags}
-								tagSearch={tagSearch}
-								setTagSearch={setTagSearch}
-								isTagPopoverOpen={isTagPopoverOpen}
-								setIsTagPopoverOpen={setIsTagPopoverOpen}
 							/>
 						</div>
 
 						<div
 							className={cn("absolute w-full transition-all duration-300 ease-in-out", {
-								"translate-x-0 opacity-100 z-10": state.activeTab === "sources",
 								"translate-x-[100%] opacity-0 z-0": state.activeTab === "browse",
+								"translate-x-0 opacity-100 z-10": state.activeTab === "installed",
+								"translate-x-[-100%] opacity-0 z-0": state.activeTab === "settings",
+							})}>
+							<MarketplaceListView
+								stateManager={stateManager}
+								allTags={allTags}
+								filteredTags={filteredTags}
+								showInstalledOnly={true}
+							/>
+						</div>
+
+						<div
+							className={cn("absolute w-full transition-all duration-300 ease-in-out", {
+								"translate-x-[200%] opacity-0 z-0": state.activeTab === "browse",
+								"translate-x-[100%] opacity-0 z-0": state.activeTab === "installed",
+								"translate-x-0 opacity-100 z-10": state.activeTab === "settings",
 							})}>
 							<MarketplaceSourcesConfig stateManager={stateManager} />
 						</div>

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

@@ -21,7 +21,7 @@ export interface ViewState {
 	allItems: MarketplaceItem[]
 	displayItems?: MarketplaceItem[] // Items currently being displayed (filtered or all)
 	isFetching: boolean
-	activeTab: "browse" | "sources"
+	activeTab: "browse" | "installed" | "settings"
 	refreshingUrls: string[]
 	sources: MarketplaceSource[]
 	installedMetadata: FullInstallatedMetadata
@@ -285,8 +285,8 @@ export class MarketplaceViewStateManager {
 					activeTab: tab,
 				}
 
-				// If switching to browse tab, trigger fetch
-				if (tab === "browse") {
+				// If switching to browse or installed tab, trigger fetch
+				if (tab === "browse" || tab === "installed") {
 					this.state.isFetching = true
 
 					vscode.postMessage({

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

@@ -3,6 +3,7 @@ import { MarketplaceListView } from "../MarketplaceListView"
 import { MarketplaceItem } from "../../../../../src/services/marketplace/types"
 import { ViewState } from "../MarketplaceViewStateManager"
 import userEvent from "@testing-library/user-event"
+import { TooltipProvider } from "@/components/ui/tooltip"
 
 // Mock translation hook
 jest.mock("@/i18n/TranslationContext", () => ({
@@ -68,10 +69,6 @@ const defaultProps = {
 	stateManager: {} as any,
 	allTags: ["tag1", "tag2"],
 	filteredTags: ["tag1", "tag2"],
-	tagSearch: "",
-	setTagSearch: jest.fn(),
-	isTagPopoverOpen: false,
-	setIsTagPopoverOpen: jest.fn(),
 }
 
 describe("MarketplaceListView", () => {
@@ -82,29 +79,36 @@ describe("MarketplaceListView", () => {
 		mockState.displayItems = []
 	})
 
+	const renderWithProviders = (props = {}) =>
+		render(
+			<TooltipProvider>
+				<MarketplaceListView {...defaultProps} {...props} />
+			</TooltipProvider>,
+		)
+
 	it("renders search input", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		const searchInput = screen.getByPlaceholderText("marketplace:filters.search.placeholder")
 		expect(searchInput).toBeInTheDocument()
 	})
 
 	it("renders type filter", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:filters.type.label")).toBeInTheDocument()
 		expect(screen.getByText("marketplace:filters.type.all")).toBeInTheDocument()
 	})
 
 	it("renders sort options", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:filters.sort.label")).toBeInTheDocument()
 		expect(screen.getByText("marketplace:filters.sort.name")).toBeInTheDocument()
 	})
 
 	it("renders tags section when tags are available", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:filters.tags.label")).toBeInTheDocument()
 		expect(screen.getByText("(2)")).toBeInTheDocument() // Shows tag count
@@ -113,14 +117,14 @@ describe("MarketplaceListView", () => {
 	it("shows loading state when fetching", () => {
 		mockState.isFetching = true
 
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:items.refresh.refreshing")).toBeInTheDocument()
 		expect(screen.getByText("This may take a moment...")).toBeInTheDocument()
 	})
 
 	it("shows empty state when no items and not fetching", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:items.empty.noItems")).toBeInTheDocument()
 		expect(screen.getByText("Try adjusting your filters or search terms")).toBeInTheDocument()
@@ -153,13 +157,13 @@ describe("MarketplaceListView", () => {
 		]
 		mockState.displayItems = mockItems
 
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		expect(screen.getByText("marketplace:items.count")).toBeInTheDocument()
 	})
 
 	it("updates search filter when typing", () => {
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		const searchInput = screen.getByPlaceholderText("marketplace:filters.search.placeholder")
 		fireEvent.change(searchInput, { target: { value: "test" } })
@@ -174,7 +178,7 @@ describe("MarketplaceListView", () => {
 		const user = userEvent.setup()
 		mockState.filters.tags = ["tag1"]
 
-		render(<MarketplaceListView {...defaultProps} />)
+		renderWithProviders()
 
 		const clearButton = screen.getByText("marketplace:filters.tags.clear")
 		expect(clearButton).toBeInTheDocument()

webview-ui/src/components/marketplace/__tests__/MarketplaceSourcesConfig.test.tsx

@@ -1,6 +1,7 @@
-import { render, fireEvent, screen } from "@testing-library/react"
+import { render, fireEvent, screen, waitFor } from "@testing-library/react"
 import { MarketplaceSourcesConfig } from "../MarketplaceSourcesConfigView"
 import { MarketplaceViewStateManager } from "../MarketplaceViewStateManager"
+import { validateSource, ValidationError } from "@roo/shared/MarketplaceValidation"
 
 // Mock the translation hook
 jest.mock("@/i18n/TranslationContext", () => ({
@@ -9,6 +10,11 @@ jest.mock("@/i18n/TranslationContext", () => ({
 	}),
 }))
 
+// Mock the validateSource function
+jest.mock("@roo/shared/MarketplaceValidation", () => ({
+	validateSource: jest.fn(),
+}))
+
 describe("MarketplaceSourcesConfig", () => {
 	let stateManager: MarketplaceViewStateManager
 
@@ -20,6 +26,8 @@ describe("MarketplaceSourcesConfig", () => {
 			payload: { sources: [] },
 		})
 		jest.clearAllMocks()
+		// Default mock implementation for validateSource
+		;(validateSource as jest.Mock).mockReturnValue([])
 	})
 
 	it("shows source count", () => {
@@ -68,17 +76,42 @@ describe("MarketplaceSourcesConfig", () => {
 		})
 	})
 
-	it("shows error when URL is empty", () => {
+	it("shows error when URL is empty on add (via client-side validation)", async () => {
 		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
 
-		const addButton = screen.getByText("marketplace:sources.add.button")
-		fireEvent.click(addButton)
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		fireEvent.change(urlInput, { target: { value: "" } }) // Set URL to empty
+		fireEvent.blur(urlInput) // Trigger blur to activate client-side validation
 
-		const errorElement = screen.getByText("marketplace:sources.errors.invalidGitUrl")
-		expect(errorElement).toBeInTheDocument()
+		// This error is displayed as a field-specific error message
+		const errorMessage = await screen.findByText("marketplace:sources.errors.emptyUrl", {
+			selector: "p.text-xs.text-red-500",
+		})
+		expect(errorMessage).toBeInTheDocument()
 	})
 
-	it("shows error when max sources reached", () => {
+	it("shows error when URL is empty on blur", async () => {
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+
+		fireEvent.change(urlInput, { target: { value: "some-url" } })
+		fireEvent.blur(urlInput)
+		await waitFor(() => {
+			expect(
+				screen.queryByText("marketplace:sources.errors.emptyUrl", { selector: "p.text-xs.text-red-500" }),
+			).not.toBeInTheDocument()
+		})
+
+		fireEvent.change(urlInput, { target: { value: "" } })
+		fireEvent.blur(urlInput)
+		await waitFor(() => {
+			expect(
+				screen.getByText("marketplace:sources.errors.emptyUrl", { selector: "p.text-xs.text-red-500" }),
+			).toBeInTheDocument()
+		})
+	})
+
+	it("shows error when max sources reached", async () => {
 		// Add max number of sources with unique URLs
 		const maxSources = Array(10)
 			.fill(null)
@@ -100,8 +133,10 @@ describe("MarketplaceSourcesConfig", () => {
 		const addButton = screen.getByText("marketplace:sources.add.button")
 		fireEvent.click(addButton)
 
-		const errorElement = screen.getByText("marketplace:sources.errors.maxSources")
-		expect(errorElement).toBeInTheDocument()
+		await waitFor(() => {
+			const errorMessage = screen.getByText("marketplace:sources.errors.maxSources")
+			expect(errorMessage).toHaveClass("text-red-500", "p-2", "bg-red-100")
+		})
 	})
 
 	it("accepts multi-part corporate git URLs", async () => {
@@ -211,7 +246,7 @@ describe("MarketplaceSourcesConfig", () => {
 		expect(screen.getByText("11/20")).toBeInTheDocument()
 	})
 
-	it("clears inputs after adding source", () => {
+	it("clears inputs after adding source", async () => {
 		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
 
 		const nameInput = screen.getByPlaceholderText("marketplace:sources.add.namePlaceholder")
@@ -224,7 +259,109 @@ describe("MarketplaceSourcesConfig", () => {
 		const addButton = screen.getByText("marketplace:sources.add.button")
 		fireEvent.click(addButton)
 
-		expect(nameInput).toHaveValue("")
-		expect(urlInput).toHaveValue("")
+		await waitFor(() => {
+			expect(nameInput).toHaveValue("")
+			expect(urlInput).toHaveValue("")
+		})
+	})
+
+	it("shows error when name is too long on change", async () => {
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const nameInput = screen.getByPlaceholderText("marketplace:sources.add.namePlaceholder")
+		fireEvent.change(nameInput, { target: { value: "This name is way too long for the input field" } })
+		await waitFor(() => {
+			expect(
+				screen.getByText("marketplace:sources.errors.nameTooLong", { selector: "p.text-xs.text-red-500" }),
+			).toBeInTheDocument()
+		})
+	})
+
+	it("shows error when name contains emoji on change", async () => {
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const nameInput = screen.getByPlaceholderText("marketplace:sources.add.namePlaceholder")
+		fireEvent.change(nameInput, { target: { value: "Name with emoji 🚀" } })
+		await waitFor(() => {
+			expect(
+				screen.getByText("marketplace:sources.errors.emojiName", { selector: "p.text-xs.text-red-500" }),
+			).toBeInTheDocument()
+		})
+	})
+
+	it("shows error when URL is invalid after validation", async () => {
+		;(validateSource as jest.Mock).mockReturnValue([{ field: "url", message: "invalid" } as ValidationError])
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		fireEvent.change(urlInput, { target: { value: "invalid-url" } })
+		const addButton = screen.getByText("marketplace:sources.add.button")
+		fireEvent.click(addButton)
+		await waitFor(() => {
+			const errorMessages = screen.queryAllByText("marketplace:sources.errors.invalidGitUrl")
+			const fieldErrorMessage = errorMessages.find((el) => el.classList.contains("text-xs"))
+			expect(fieldErrorMessage).toBeInTheDocument()
+		})
+	})
+
+	it("shows error when URL is a duplicate after validation", async () => {
+		stateManager.transition({
+			type: "UPDATE_SOURCES",
+			payload: { sources: [{ url: "https://github.com/existing/repo", enabled: true }] },
+		})
+		;(validateSource as jest.Mock).mockReturnValue([{ field: "url", message: "duplicate" } as ValidationError])
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		fireEvent.change(urlInput, { target: { value: "https://github.com/existing/repo" } })
+		const addButton = screen.getByText("marketplace:sources.add.button")
+		fireEvent.click(addButton)
+		await waitFor(() => {
+			const errorMessages = screen.queryAllByText("marketplace:sources.errors.duplicateUrl")
+			const fieldErrorMessage = errorMessages.find((el) => el.classList.contains("text-xs"))
+			expect(fieldErrorMessage).toBeInTheDocument()
+		})
+	})
+
+	it("shows error when name is a duplicate after validation", async () => {
+		stateManager.transition({
+			type: "UPDATE_SOURCES",
+			payload: { sources: [{ name: "Existing Name", url: "https://github.com/existing/repo", enabled: true }] },
+		})
+		;(validateSource as jest.Mock).mockReturnValue([{ field: "name", message: "duplicate" } as ValidationError])
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const nameInput = screen.getByPlaceholderText("marketplace:sources.add.namePlaceholder")
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		fireEvent.change(nameInput, { target: { value: "Existing Name" } })
+		fireEvent.change(urlInput, { target: { value: "https://github.com/new/repo" } })
+		const addButton = screen.getByText("marketplace:sources.add.button")
+		fireEvent.click(addButton)
+		await waitFor(() => {
+			const errorMessages = screen.queryAllByText("marketplace:sources.errors.duplicateName")
+			const fieldErrorMessage = errorMessages.find((el) => el.classList.contains("text-xs"))
+			expect(fieldErrorMessage).toBeInTheDocument()
+		})
+	})
+
+	it("disables add button when name has error", async () => {
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const nameInput = screen.getByPlaceholderText("marketplace:sources.add.namePlaceholder")
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		const addButton = screen.getByText("marketplace:sources.add.button")
+
+		fireEvent.change(nameInput, { target: { value: "This name is way too long for the input field" } })
+		fireEvent.change(urlInput, { target: { value: "https://valid.com/repo" } })
+
+		await waitFor(() => {
+			expect(addButton).toBeDisabled()
+		})
+	})
+
+	it("disables add button when URL is empty", async () => {
+		render(<MarketplaceSourcesConfig stateManager={stateManager} />)
+		const urlInput = screen.getByPlaceholderText("marketplace:sources.add.urlPlaceholder")
+		const addButton = screen.getByText("marketplace:sources.add.button")
+
+		fireEvent.change(urlInput, { target: { value: "" } })
+
+		await waitFor(() => {
+			expect(addButton).toBeDisabled()
+		})
 	})
 })

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

@@ -0,0 +1,480 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { MarketplaceView } from "../MarketplaceView"
+import { MarketplaceItem } from "../../../../../src/services/marketplace/types"
+import { ViewState } from "../MarketplaceViewStateManager"
+import userEvent from "@testing-library/user-event"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { RocketConfig } from "config-rocket"
+import { ExtensionStateContext } from "@/context/ExtensionStateContext"
+
+// Mock vscode API - IMPORTANT: This mock must be at the very top of the file
+const mockPostMessage = jest.fn()
+jest.mock("@src/utils/vscode", () => ({
+	vscode: {
+		postMessage: mockPostMessage,
+		getState: jest.fn(() => ({})), // Mock getState as well if it's used
+		setState: jest.fn(),
+	},
+}))
+
+// Mock translation hook
+jest.mock("@/i18n/TranslationContext", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => key, // Return the key as-is for easy testing
+	}),
+}))
+
+// Mock useEvent from react-use
+let mockUseEventHandler: ((event: MessageEvent) => void) | undefined // Declare outside mock
+jest.mock("react-use", () => ({
+	useEvent: jest.fn((eventName, handler) => {
+		if (eventName === "message") {
+			mockUseEventHandler = handler
+		}
+	}),
+}))
+
+// Mock ResizeObserver
+class MockResizeObserver {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+global.ResizeObserver = MockResizeObserver
+
+const mockStateManager = {
+	state: {} as ViewState,
+	transition: jest.fn(),
+}
+
+jest.mock("../useStateManager", () => ({
+	useStateManager: jest.fn(() => [mockStateManager.state, { transition: mockStateManager.transition }]),
+}))
+
+jest.mock("lucide-react", () => {
+	return new Proxy(
+		{},
+		{
+			get: function (obj, prop) {
+				if (prop === "__esModule") {
+					return true
+				}
+				return ({ className, ...rest }: any) => (
+					<div data-testid={`${String(prop)}-icon`} className={className} {...rest}>
+						{String(prop)}
+					</div>
+				)
+			},
+		},
+	)
+})
+
+const defaultProps = {
+	stateManager: {} as any, // Mocked by useStateManager
+	onDone: jest.fn(),
+}
+
+describe("MarketplaceView", () => {
+	beforeEach(() => {
+		jest.clearAllMocks()
+		mockStateManager.state = {
+			allItems: [],
+			displayItems: [],
+			isFetching: false,
+			activeTab: "browse",
+			refreshingUrls: [],
+			sources: [],
+			installedMetadata: {
+				project: {},
+				global: {},
+			},
+			filters: {
+				type: "",
+				search: "",
+				tags: [],
+			},
+			sortConfig: {
+				by: "name",
+				order: "asc",
+			},
+		}
+		mockStateManager.transition.mockClear()
+		mockStateManager.transition.mockImplementation((action: any) => {
+			if (action.type === "FETCH_ITEMS") {
+				mockStateManager.state = { ...mockStateManager.state, isFetching: true }
+			} else if (action.type === "SET_ACTIVE_TAB") {
+				mockStateManager.state = { ...mockStateManager.state, activeTab: action.payload.tab }
+			} else if (action.type === "UPDATE_FILTERS") {
+				mockStateManager.state = {
+					...mockStateManager.state,
+					filters: { ...mockStateManager.state.filters, ...action.payload.filters },
+				}
+			}
+		})
+
+		window.removeEventListener("message", expect.any(Function))
+		mockUseEventHandler = undefined // Reset the event handler mock
+	})
+
+	const renderWithProviders = (props = {}) =>
+		render(
+			<ExtensionStateContext.Provider
+				value={{
+					didHydrateState: true,
+					showWelcome: false,
+					theme: {},
+					mcpServers: [],
+					hasSystemPromptOverride: false,
+					currentCheckpoint: undefined,
+					filePaths: [],
+					openedTabs: [],
+					setApiConfiguration: jest.fn(),
+					setCustomInstructions: jest.fn(),
+					setAlwaysAllowReadOnly: jest.fn(),
+					setAlwaysAllowReadOnlyOutsideWorkspace: jest.fn(),
+					setAlwaysAllowWrite: jest.fn(),
+					setAlwaysAllowWriteOutsideWorkspace: jest.fn(),
+					setAlwaysAllowExecute: jest.fn(),
+					setAlwaysAllowBrowser: jest.fn(),
+					setAlwaysAllowMcp: jest.fn(),
+					setAlwaysAllowModeSwitch: jest.fn(),
+					setAlwaysAllowSubtasks: jest.fn(),
+					setBrowserToolEnabled: jest.fn(),
+					showRooIgnoredFiles: true,
+					setShowRooIgnoredFiles: jest.fn(),
+					setShowAnnouncement: jest.fn(),
+					setAllowedCommands: jest.fn(),
+					setAllowedMaxRequests: jest.fn(),
+					setSoundEnabled: jest.fn(),
+					setSoundVolume: jest.fn(),
+					terminalShellIntegrationTimeout: 4000,
+					setTerminalShellIntegrationTimeout: jest.fn(),
+					terminalShellIntegrationDisabled: false,
+					setTerminalShellIntegrationDisabled: jest.fn(),
+					terminalZdotdir: false,
+					setTerminalZdotdir: jest.fn(),
+					setTtsEnabled: jest.fn(),
+					setTtsSpeed: jest.fn(),
+					setDiffEnabled: jest.fn(),
+					setEnableCheckpoints: jest.fn(),
+					setBrowserViewportSize: jest.fn(),
+					setFuzzyMatchThreshold: jest.fn(),
+					writeDelayMs: 1000,
+					setWriteDelayMs: jest.fn(),
+					screenshotQuality: 75,
+					setScreenshotQuality: jest.fn(),
+					terminalOutputLineLimit: 500,
+					setTerminalOutputLineLimit: jest.fn(),
+					mcpEnabled: true,
+					setMcpEnabled: jest.fn(),
+					enableMcpServerCreation: true,
+					setEnableMcpServerCreation: jest.fn(),
+					alwaysApproveResubmit: false,
+					setAlwaysApproveResubmit: jest.fn(),
+					requestDelaySeconds: 5,
+					setRequestDelaySeconds: jest.fn(),
+					setCurrentApiConfigName: jest.fn(),
+					setListApiConfigMeta: jest.fn(),
+					mode: "code",
+					setMode: jest.fn(),
+					setCustomModePrompts: jest.fn(),
+					setCustomSupportPrompts: jest.fn(),
+					enhancementApiConfigId: "",
+					setEnhancementApiConfigId: jest.fn(),
+					setExperimentEnabled: jest.fn(),
+					setAutoApprovalEnabled: jest.fn(),
+					customModes: [],
+					setCustomModes: jest.fn(),
+					maxOpenTabsContext: 20,
+					setMaxOpenTabsContext: jest.fn(),
+					maxWorkspaceFiles: 200,
+					setMaxWorkspaceFiles: jest.fn(),
+					telemetrySetting: "unset",
+					setTelemetrySetting: jest.fn(),
+					remoteBrowserEnabled: false,
+					setRemoteBrowserEnabled: jest.fn(),
+					awsUsePromptCache: false,
+					setAwsUsePromptCache: jest.fn(),
+					maxReadFileLine: 500,
+					setMaxReadFileLine: jest.fn(),
+					machineId: "mock-machine-id",
+					pinnedApiConfigs: {},
+					setPinnedApiConfigs: jest.fn(),
+					togglePinnedApiConfig: jest.fn(),
+					terminalCompressProgressBar: true,
+					setTerminalCompressProgressBar: jest.fn(),
+					historyPreviewCollapsed: false,
+					setHistoryPreviewCollapsed: jest.fn(),
+					setMarketplaceSources: jest.fn(),
+					version: "1.0.0",
+					clineMessages: [],
+					taskHistory: [],
+					shouldShowAnnouncement: false,
+					allowedCommands: [],
+					allowedMaxRequests: Infinity,
+					soundEnabled: false,
+					ttsEnabled: false,
+					diffEnabled: false,
+					enableCheckpoints: true,
+					browserViewportSize: "900x600",
+					apiConfiguration: {},
+					customInstructions: "",
+					alwaysAllowReadOnly: false,
+					alwaysAllowReadOnlyOutsideWorkspace: false,
+					alwaysAllowWrite: false,
+					alwaysAllowWriteOutsideWorkspace: false,
+					alwaysAllowExecute: false,
+					alwaysAllowBrowser: false,
+					alwaysAllowMcp: false,
+					alwaysAllowModeSwitch: false,
+					alwaysAllowSubtasks: false,
+					renderContext: "sidebar",
+					terminalZshOhMy: false,
+					terminalZshP10k: false,
+					experiments: {
+						autoCondenseContext: false,
+						powerSteering: false,
+					},
+					marketplaceSources: [],
+				}}>
+				<TooltipProvider>
+					<MarketplaceView {...defaultProps} {...props} />
+				</TooltipProvider>
+			</ExtensionStateContext.Provider>,
+		)
+
+	it("renders title and action buttons", () => {
+		renderWithProviders()
+
+		expect(screen.getByText("marketplace:title")).toBeInTheDocument()
+		expect(screen.getByText("marketplace:refresh")).toBeInTheDocument()
+		expect(screen.getByText("marketplace:done")).toBeInTheDocument()
+	})
+
+	it("calls onDone when Done button is clicked", async () => {
+		const user = userEvent.setup()
+		const onDoneMock = jest.fn()
+		renderWithProviders({ onDone: onDoneMock })
+
+		await user.click(screen.getByText("marketplace:done"))
+		expect(onDoneMock).toHaveBeenCalledTimes(1)
+	})
+
+	it("calls FETCH_ITEMS when Refresh button is clicked", async () => {
+		const user = userEvent.setup()
+		renderWithProviders()
+
+		await user.click(screen.getByText("marketplace:refresh"))
+		expect(mockStateManager.transition).toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+
+	it("displays spinning icon when fetching", async () => {
+		mockStateManager.state.isFetching = true
+		renderWithProviders()
+
+		await waitFor(() => {
+			expect(screen.getByTestId("RefreshCw-icon")).toHaveClass("animate-spin")
+		})
+	})
+
+	it("switches tabs when tab buttons are clicked", async () => {
+		const user = userEvent.setup()
+		renderWithProviders()
+
+		// Click Installed tab
+		await user.click(screen.getByText("marketplace:tabs.installed"))
+		expect(mockStateManager.transition).toHaveBeenCalledWith({
+			type: "SET_ACTIVE_TAB",
+			payload: { tab: "installed" },
+		})
+
+		// Click Settings tab
+		await user.click(screen.getByText("marketplace:tabs.settings"))
+		expect(mockStateManager.transition).toHaveBeenCalledWith({
+			type: "SET_ACTIVE_TAB",
+			payload: { tab: "settings" },
+		})
+
+		// Click Browse tab
+		await user.click(screen.getByText("marketplace:tabs.browse"))
+		expect(mockStateManager.transition).toHaveBeenCalledWith({
+			type: "SET_ACTIVE_TAB",
+			payload: { tab: "browse" },
+		})
+	})
+
+	it("sends installMarketplaceItemWithParameters message on handleInstallSubmit", () => {
+		renderWithProviders()
+
+		const mockItem: MarketplaceItem = {
+			id: "test-item",
+			repoUrl: "test-url",
+			name: "Test Item",
+			type: "mode",
+			description: "A test item",
+			url: "https://example.com",
+			version: "1.0.0",
+			author: "Test Author",
+			lastUpdated: "2023-01-01",
+		}
+		const mockConfig: RocketConfig = {
+			parameters: [],
+		}
+
+		// Simulate opening the sidebar and then submitting
+		fireEvent(
+			window,
+			new MessageEvent("message", {
+				data: {
+					type: "openMarketplaceInstallSidebarWithConfig",
+					payload: { item: mockItem, config: mockConfig },
+				},
+			}),
+		)
+
+		// The InstallSidebar component is mocked, so we can't directly interact with its submit.
+		// Instead, we'll directly call the handleInstallSubmit function that would be passed to it.
+		// This requires a slight adjustment to how we test, or a more elaborate mock for InstallSidebar.
+		// For now, let's test the effect of the message event.
+		// The actual submission logic is within handleInstallSubmit, which is passed to InstallSidebar.
+		// We need to ensure that when InstallSidebar calls onSubmit, it triggers the postMessage.
+
+		// To properly test handleInstallSubmit, we need to mock InstallSidebar and its onSubmit prop.
+		// For now, let's focus on the message handling and the initial fetch effects.
+		// A more complete test would involve mocking InstallSidebar and triggering its onSubmit.
+	})
+
+	it("opens install sidebar on 'openMarketplaceInstallSidebarWithConfig' message", async () => {
+		renderWithProviders()
+
+		const mockItem: MarketplaceItem = {
+			id: "test-item",
+			repoUrl: "test-url",
+			name: "Test Item",
+			type: "mode",
+			description: "A test item",
+			url: "https://example.com",
+			version: "1.0.0",
+			author: "Test Author",
+			lastUpdated: "2023-01-01",
+		}
+		const mockConfig: RocketConfig = {
+			parameters: [],
+		}
+
+		// Trigger the message event manually via the mocked handler
+		if (mockUseEventHandler) {
+			mockUseEventHandler(
+				new MessageEvent("message", {
+					data: {
+						type: "openMarketplaceInstallSidebarWithConfig",
+						payload: { item: mockItem, config: mockConfig },
+					},
+				}),
+			)
+		} else {
+			throw new Error("mockUseEventHandler was not set!")
+		}
+
+		await waitFor(() => {
+			expect(screen.getByTestId("install-sidebar")).toBeInTheDocument() // Use data-testid from the mock
+		})
+	})
+
+	it("fetches items on initial mount if allItems is empty and not fetching", () => {
+		renderWithProviders()
+		expect(mockStateManager.transition).toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+
+	it("does not fetch items on initial mount if allItems is not empty", () => {
+		mockStateManager.state.allItems = [
+			{
+				id: "1",
+				name: "test",
+				repoUrl: "url",
+				type: "mode",
+				description: "desc",
+				url: "url",
+				version: "1.0.0",
+				author: "author",
+				lastUpdated: "date",
+			},
+		]
+		renderWithProviders()
+		expect(mockStateManager.transition).not.toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+
+	it("fetches items when webview becomes visible and on browse tab", async () => {
+		mockStateManager.state.activeTab = "browse"
+		mockStateManager.state.isFetching = false
+		renderWithProviders()
+
+		// Clear initial call from useEffect
+		mockStateManager.transition.mockClear()
+
+		fireEvent(window, new MessageEvent("message", { data: { type: "webviewVisible", visible: true } }))
+
+		expect(mockStateManager.transition).toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+
+	it("does not fetch items when webview becomes visible but not on browse tab", () => {
+		mockStateManager.state.activeTab = "installed"
+		mockStateManager.state.isFetching = false
+		renderWithProviders()
+
+		// Clear initial call from useEffect
+		mockStateManager.transition.mockClear()
+
+		fireEvent(window, new MessageEvent("message", { data: { type: "webviewVisible", visible: true } }))
+
+		expect(mockStateManager.transition).not.toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+
+	it("does not fetch items when webview becomes visible but is already fetching", () => {
+		mockStateManager.state.activeTab = "browse"
+		mockStateManager.state.isFetching = true
+		renderWithProviders()
+
+		// Clear initial call from useEffect
+		mockStateManager.transition.mockClear()
+
+		fireEvent(window, new MessageEvent("message", { data: { type: "webviewVisible", visible: true } }))
+
+		expect(mockStateManager.transition).not.toHaveBeenCalledWith({ type: "FETCH_ITEMS" })
+	})
+})
+
+// Mock InstallSidebar and MarketplaceSourcesConfig for simpler testing of MarketplaceView
+jest.mock("../InstallSidebar", () => ({
+	__esModule: true,
+	default: function MockInstallSidebar({ onSubmit, onClose, item }: any) {
+		return (
+			<div data-testid="install-sidebar">
+				InstallSidebar
+				<button onClick={() => onSubmit(item, { param: "value" })}>Submit Install</button>
+				<button onClick={onClose}>Close Install</button>
+			</div>
+		)
+	},
+}))
+
+jest.mock("../MarketplaceSourcesConfigView", () => ({
+	__esModule: true,
+	MarketplaceSourcesConfig: function MockMarketplaceSourcesConfig() {
+		return <div data-testid="marketplace-sources-config-view">MarketplaceSourcesConfig</div>
+	},
+}))
+
+// Mock MarketplaceListView
+jest.mock("../MarketplaceListView", () => ({
+	__esModule: true,
+	MarketplaceListView: function MockMarketplaceListView({ showInstalledOnly = false }: any) {
+		return (
+			<div data-testid="marketplace-list-view">
+				MarketplaceListView
+				{showInstalledOnly && <span>(Installed Only)</span>}
+			</div>
+		)
+	},
+}))

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

@@ -9,7 +9,6 @@ import {
 } from "../../../../../src/services/marketplace/types"
 import { vscode } from "@/utils/vscode"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { isValidUrl } from "@roo/utils/url"
 import { ItemInstalledMetadata } from "@roo/services/marketplace/InstalledMetadataManager"
 
 interface MarketplaceItemActionsMenuProps {
@@ -18,16 +17,17 @@ interface MarketplaceItemActionsMenuProps {
 		project: ItemInstalledMetadata | undefined
 		global: ItemInstalledMetadata | undefined
 	}
+	triggerNode?: React.ReactNode
 }
 
-export const MarketplaceItemActionsMenu: React.FC<MarketplaceItemActionsMenuProps> = ({ item, installed }) => {
+export const MarketplaceItemActionsMenu: React.FC<MarketplaceItemActionsMenuProps> = ({
+	item,
+	installed,
+	triggerNode,
+}) => {
 	const { t } = useAppTranslation()
 
 	const itemSourceUrl = useMemo(() => {
-		if (item.sourceUrl && isValidUrl(item.sourceUrl)) {
-			return item.sourceUrl
-		}
-
 		let url = item.repoUrl
 		if (item.defaultBranch) {
 			url = `${url}/tree/${item.defaultBranch}`
@@ -36,8 +36,9 @@ export const MarketplaceItemActionsMenu: React.FC<MarketplaceItemActionsMenuProp
 				url = `${url}/${normalizedPath}`
 			}
 		}
+
 		return url
-	}, [item.sourceUrl, item.repoUrl, item.defaultBranch, item.path])
+	}, [item.repoUrl, item.defaultBranch, item.path])
 
 	const handleOpenSourceUrl = useCallback(() => {
 		vscode.postMessage({
@@ -65,43 +66,32 @@ export const MarketplaceItemActionsMenu: React.FC<MarketplaceItemActionsMenuProp
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button
-					className="px-2 w-4"
-					variant="ghost"
-					size="icon"
-					aria-label={t("marketplace:items.card.actionsMenuLabel") || "Actions"}>
-					<MoreVertical className="size-4" />
-				</Button>
+				{triggerNode ?? (
+					<Button
+						className="px-2 w-4"
+						variant="ghost"
+						size="icon"
+						aria-label={t("marketplace:items.card.actionsMenuLabel") || "Actions"}>
+						<MoreVertical className="size-4" />
+					</Button>
+				)}
 			</DropdownMenuTrigger>
-			<DropdownMenuContent align="start" side="bottom">
+			<DropdownMenuContent align="start" side="left">
 				{/* View Source / External Link Item */}
 				<DropdownMenuItem aria-label={item.sourceName} onClick={handleOpenSourceUrl}>
-					<ExternalLink className="mr-2 h-4 w-4" />
+					<ExternalLink className="mr-1 size-3" />
 					<span>{t("marketplace:items.card.viewSource")}</span>
 				</DropdownMenuItem>
 
-				{/* Remove (Project) */}
-				{installed.project ? (
-					<DropdownMenuItem onClick={() => handleRemove({ target: "project" })}>
-						<Trash className="mr-2 h-4 w-4" />
-						<span>{t("marketplace:items.card.removeProject")}</span>
-					</DropdownMenuItem>
-				) : (
-					<DropdownMenuItem className="" onClick={() => handleInstall({ target: "project" })}>
-						<Download className="mr-2 h-4 w-4" />
-						<span>{t("marketplace:items.card.installProject")}</span>
-					</DropdownMenuItem>
-				)}
-
 				{/* Remove (Global) */}
 				{installed.global ? (
 					<DropdownMenuItem onClick={() => handleRemove({ target: "global" })}>
-						<Trash className="mr-2 h-4 w-4" />
+						<Trash className="mr-1 size-3" />
 						<span>{t("marketplace:items.card.removeGlobal")}</span>
 					</DropdownMenuItem>
 				) : (
 					<DropdownMenuItem onClick={() => handleInstall({ target: "global" })}>
-						<Download className="mr-2 h-4 w-4" />
+						<Download className="mr-1 size-3" />
 						<span>{t("marketplace:items.card.installGlobal")}</span>
 					</DropdownMenuItem>
 				)}

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

@@ -12,7 +12,7 @@ import { ItemInstalledMetadata } from "@roo/services/marketplace/InstalledMetada
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { Rocket, Server, Package, Sparkles, Download } from "lucide-react"
+import { Rocket, Server, Package, Sparkles, ChevronDown } from "lucide-react"
 
 interface MarketplaceItemCardProps {
 	item: MarketplaceItem
@@ -27,10 +27,10 @@ interface MarketplaceItemCardProps {
 }
 
 const icons = {
-	mode: <Rocket className="h-4 w-4" />,
-	mcp: <Server className="h-4 w-4" />,
-	package: <Package className="h-4 w-4" />,
-	prompt: <Sparkles className="h-4 w-4" />,
+	mode: <Rocket className="size-3" />,
+	mcp: <Server className="size-3" />,
+	package: <Package className="size-3" />,
+	prompt: <Sparkles className="size-3" />,
 }
 
 export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({
@@ -65,63 +65,34 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({
 
 	return (
 		<div className="border border-vscode-panel-border rounded-sm p-3 bg-vscode-editor-background">
-			<div className="mb-2 flex gap-2">
-				{installed.project && (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<span
-								className={cn(
-									"px-2 py-1 text-xs rounded-sm flex items-center gap-1.5 w-fit",
-									"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground",
-								)}
-								aria-label="Installed in project">
-								<Download className="h-3.5 w-3.5" aria-hidden="true" />
-								<span>Project</span>
-							</span>
-						</TooltipTrigger>
-						<TooltipContent>This package is installed in your current project workspace</TooltipContent>
-					</Tooltip>
-				)}
-				{installed.global && (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<span
-								className={cn(
-									"px-2 py-1 text-xs rounded-sm flex items-center gap-1.5 w-fit",
-									"bg-vscode-badge-background text-vscode-badge-foreground",
-								)}
-								aria-label="Installed globally">
-								<Download className="h-3.5 w-3.5" aria-hidden="true" />
-								<span>Global</span>
-							</span>
-						</TooltipTrigger>
-						<TooltipContent>This package is installed globally on your system</TooltipContent>
-					</Tooltip>
-				)}
-			</div>
-			<div className="flex justify-between items-start">
+			<div className="flex gap-2 items-start">
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<span
+							className={cn(
+								"p-2 text-xs rounded-sm flex gap-1 items-center bg-primary text-vscode-button-foreground",
+							)}>
+							{icons[item.type]}
+						</span>
+					</TooltipTrigger>
+					<TooltipContent>{typeLabel}</TooltipContent>
+				</Tooltip>
 				<div>
 					<h3 className="text-lg font-semibold text-vscode-foreground mt-0 mb-1 leading-none">{item.name}</h3>
-					<AuthorInfo item={item} />
+					<AuthorInfo item={item} typeLabel={typeLabel} />
 				</div>
-				<span
-					className={cn(
-						"px-2 py-1 text-xs rounded-md flex gap-1 items-center bg-primary text-vscode-button-foreground",
-					)}>
-					{icons[item.type]} {typeLabel}
-				</span>
 			</div>
 
 			<p className="my-2 text-vscode-foreground">{item.description}</p>
 
 			{item.tags && item.tags.length > 0 && (
-				<div className="flex flex-wrap gap-1 my-2">
+				<div className="relative flex gap-1 my-2 overflow-x-auto scrollbar-hide">
 					{item.tags.map((tag) => (
 						<Button
 							key={tag}
 							size="sm"
 							variant={filters.tags.includes(tag) ? "default" : "secondary"}
-							className="shadow-none border-none rounded-sm capitalize text-xs px-2 h-5"
+							className="rounded-sm capitalize text-xs px-2 h-5 border-dashed"
 							onClick={() => {
 								const newTags = filters.tags.includes(tag)
 									? filters.tags.filter((t: string) => t !== tag)
@@ -163,7 +134,46 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({
 					)}
 				</div>
 
-				<MarketplaceItemActionsMenu item={item} installed={installed} />
+				<div className="flex items-center">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								size="sm"
+								variant="default"
+								className="text-xs h-5 rounded-r-none py-0 px-2"
+								onClick={() =>
+									vscode.postMessage({
+										type: installed.project
+											? "removeInstalledMarketplaceItem"
+											: "installMarketplaceItem",
+										mpItem: item,
+										mpInstallOptions: { target: "project" },
+									})
+								}>
+								{installed.project
+									? t("marketplace:items.card.removeProject")
+									: t("marketplace:items.card.installProject")}
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>
+							{installed.project
+								? t("marketplace:items.card.removeProject")
+								: t("marketplace:items.card.installProject")}
+						</TooltipContent>
+					</Tooltip>
+					<MarketplaceItemActionsMenu
+						item={item}
+						installed={installed}
+						triggerNode={
+							<Button
+								size="sm"
+								variant="default"
+								className="h-5 px-1 py-0 rounded-l-none border-l border-l-white/10">
+								<ChevronDown className="size-3" />
+							</Button>
+						}
+					/>
+				</div>
 			</div>
 
 			{item.type === "package" && (
@@ -185,9 +195,10 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({
 
 interface AuthorInfoProps {
 	item: MarketplaceItem
+	typeLabel: string
 }
 
-const AuthorInfo: React.FC<AuthorInfoProps> = ({ item }) => {
+const AuthorInfo: React.FC<AuthorInfoProps> = ({ item, typeLabel }) => {
 	const { t } = useAppTranslation()
 
 	const handleOpenAuthorUrl = () => {
@@ -199,6 +210,7 @@ const AuthorInfo: React.FC<AuthorInfoProps> = ({ item }) => {
 	if (item.author) {
 		return (
 			<p className="text-sm text-vscode-descriptionForeground my-0">
+				{typeLabel}{" "}
 				{item.authorUrl && isValidUrl(item.authorUrl) ? (
 					<Button
 						variant="link"

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

@@ -5,6 +5,7 @@ import { vscode } from "@/utils/vscode"
 import { MarketplaceItem } from "@roo/services/marketplace/types"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { AccordionTrigger } from "@/components/ui/accordion"
+type MarketplaceItemType = "mode" | "prompt" | "package" | "mcp"
 
 // Mock vscode API
 jest.mock("@/utils/vscode", () => ({
@@ -39,14 +40,20 @@ jest.mock("@/i18n/TranslationContext", () => ({
 			if (key === "marketplace:items.card.by") {
 				return `by ${params.author}`
 			}
-			const translations: Record<string, string> = {
+			const translations: Record<string, any> = {
 				"marketplace:filters.type.mode": "Mode",
 				"marketplace:filters.type.mcp server": "MCP Server",
 				"marketplace:filters.type.prompt": "Prompt",
 				"marketplace:filters.type.package": "Package",
 				"marketplace:filters.tags.clear": "Remove filter",
 				"marketplace:filters.tags.clickToFilter": "Add filter",
-				"marketplace:items.components": "Components",
+				"marketplace:items.components": "Components", // This should be a string for the title prop
+				"marketplace:items.card.installProject": "Install Project",
+				"marketplace:items.card.removeProject": "Remove Project",
+			}
+			// Special handling for "marketplace:items.components" when it's used as a badge with count
+			if (key === "marketplace:items.components" && params?.count !== undefined) {
+				return `${params.count} Components`
 			}
 			return translations[key] || key
 		},
@@ -60,6 +67,7 @@ jest.mock("lucide-react", () => ({
 	Package: () => <div data-testid="package-icon" />,
 	Sparkles: () => <div data-testid="sparkles-icon" />,
 	Download: () => <div data-testid="download-icon" />,
+	ChevronDown: () => <div data-testid="chevron-down-icon" />, // Added ChevronDown mock
 }))
 
 const renderWithProviders = (ui: React.ReactElement) => {
@@ -122,8 +130,8 @@ describe("MarketplaceItemCard", () => {
 			/>,
 		)
 
-		expect(screen.getByText("Project")).toBeInTheDocument()
-		expect(screen.getByLabelText("Installed in project")).toBeInTheDocument()
+		// When installed in project, the button should say "Remove Project"
+		expect(screen.getByText("Remove Project")).toBeInTheDocument()
 	})
 
 	it("renders global installation badge", () => {
@@ -137,8 +145,10 @@ describe("MarketplaceItemCard", () => {
 			/>,
 		)
 
-		expect(screen.getByText("Global")).toBeInTheDocument()
-		expect(screen.getByLabelText("Installed globally")).toBeInTheDocument()
+		// The global installation is handled by MarketplaceItemActionsMenu, which is mocked.
+		// So, we can't directly assert on "Global" text unless it's explicitly rendered outside the menu.
+		// For now, we'll rely on the actions menu being present.
+		expect(screen.getByTestId("actions-menu")).toBeInTheDocument()
 	})
 
 	it("renders type with appropriate icon", () => {
@@ -212,7 +222,210 @@ describe("MarketplaceItemCard", () => {
 
 		renderWithProviders(<MarketplaceItemCard {...defaultProps} item={itemWithInvalidUrl} />)
 
-		const authorText = screen.getByText("by Test Author")
+		const authorText = screen.getByText(/by Test Author/) // Changed to regex
 		expect(authorText.tagName).not.toBe("BUTTON")
 	})
+
+	describe("MarketplaceItemCard install/remove button", () => {
+		it("posts install message when not installed in project", () => {
+			const setFilters = jest.fn()
+			const setActiveTab = jest.fn()
+			const item: MarketplaceItem = {
+				id: "test-item",
+				name: "Test Item",
+				description: "Test Description",
+				type: "mode" as MarketplaceItemType,
+				version: "1.0.0",
+				author: "Test Author",
+				authorUrl: "https://example.com",
+				lastUpdated: "2024-01-01",
+				tags: ["test", "example"],
+				url: "https://example.com/item",
+				repoUrl: "https://github.com/test/repo",
+			}
+			const installed = {
+				project: undefined,
+				global: undefined,
+			}
+			renderWithProviders(
+				<MarketplaceItemCard
+					item={item}
+					installed={installed}
+					filters={{ type: "", search: "", tags: [] }}
+					setFilters={setFilters}
+					activeTab="browse"
+					setActiveTab={setActiveTab}
+				/>,
+			)
+
+			const installButton = screen.getByRole("button", { name: "Install Project" }) // Changed to exact string
+			installButton.click()
+
+			expect(vscode.postMessage).toHaveBeenCalledWith({
+				type: "installMarketplaceItem",
+				mpItem: item,
+				mpInstallOptions: { target: "project" },
+			})
+		})
+
+		it("posts remove message when installed in project", () => {
+			const setFilters = jest.fn()
+			const setActiveTab = jest.fn()
+			const item: MarketplaceItem = {
+				id: "test-item",
+				name: "Test Item",
+				description: "Test Description",
+				type: "mode" as MarketplaceItemType,
+				version: "1.0.0",
+				author: "Test Author",
+				authorUrl: "https://example.com",
+				lastUpdated: "2024-01-01",
+				tags: ["test", "example"],
+				url: "https://example.com/item",
+				repoUrl: "https://github.com/test/repo",
+			}
+			const installed = {
+				project: { version: "1.0.0" },
+				global: undefined,
+			}
+			renderWithProviders(
+				<MarketplaceItemCard
+					item={item}
+					installed={installed}
+					filters={{ type: "", search: "", tags: [] }}
+					setFilters={setFilters}
+					activeTab="browse"
+					setActiveTab={setActiveTab}
+				/>,
+			)
+
+			const removeButton = screen.getByRole("button", { name: "Remove Project" }) // Changed to exact string
+			removeButton.click()
+
+			expect(vscode.postMessage).toHaveBeenCalledWith({
+				type: "removeInstalledMarketplaceItem",
+				mpItem: item,
+				mpInstallOptions: { target: "project" },
+			})
+		})
+	})
+
+	describe("MarketplaceItemCard expandable section badge", () => {
+		it("shows badge count for matched sub-items", () => {
+			const packageItem: MarketplaceItem = {
+				id: "package-item",
+				name: "Package Item",
+				description: "Package Description",
+				type: "package" as MarketplaceItemType,
+				version: "1.0.0",
+				author: "Package Author",
+				authorUrl: "https://example.com",
+				lastUpdated: "2024-01-01",
+				tags: ["package"],
+				url: "https://example.com/package",
+				repoUrl: "https://github.com/package/repo",
+				items: [
+					{
+						type: "mode" as MarketplaceItemType,
+						path: "path1",
+						matchInfo: { matched: true },
+						metadata: {
+							name: "Comp1",
+							description: "",
+							type: "mode" as MarketplaceItemType,
+							version: "1.0.0",
+						},
+					},
+					{
+						type: "mode" as MarketplaceItemType,
+						path: "path2",
+						matchInfo: { matched: false },
+						metadata: {
+							name: "Comp2",
+							description: "",
+							type: "mode" as MarketplaceItemType,
+							version: "1.0.0",
+						},
+					},
+					{
+						type: "mode" as MarketplaceItemType,
+						path: "path3",
+						matchInfo: { matched: true },
+						metadata: {
+							name: "Comp3",
+							description: "",
+							type: "mode" as MarketplaceItemType,
+							version: "1.0.0",
+						},
+					},
+				],
+			}
+			renderWithProviders(
+				<MarketplaceItemCard
+					item={packageItem}
+					installed={{ project: undefined, global: undefined }}
+					filters={{ type: "", search: "", tags: [] }}
+					setFilters={jest.fn()}
+					activeTab="browse"
+					setActiveTab={jest.fn()}
+				/>,
+			)
+
+			const badge = screen.getByText("2 Components")
+			expect(badge).toBeInTheDocument()
+		})
+
+		it("does not show badge if no matched sub-items", () => {
+			const packageItem: MarketplaceItem = {
+				id: "package-item",
+				name: "Package Item",
+				description: "Package Description",
+				type: "package" as MarketplaceItemType,
+				version: "1.0.0",
+				author: "Package Author",
+				authorUrl: "https://example.com",
+				lastUpdated: "2024-01-01",
+				tags: ["package"],
+				url: "https://example.com/package",
+				repoUrl: "https://github.com/package/repo",
+				items: [
+					{
+						type: "mode" as MarketplaceItemType,
+						path: "path1",
+						matchInfo: { matched: false },
+						metadata: {
+							name: "Comp1",
+							description: "",
+							type: "mode" as MarketplaceItemType,
+							version: "1.0.0",
+						},
+					},
+					{
+						type: "mode" as MarketplaceItemType,
+						path: "path2",
+						matchInfo: { matched: false },
+						metadata: {
+							name: "Comp2",
+							description: "",
+							type: "mode" as MarketplaceItemType,
+							version: "1.0.0",
+						},
+					},
+				],
+			}
+			renderWithProviders(
+				<MarketplaceItemCard
+					item={packageItem}
+					installed={{ project: undefined, global: undefined }}
+					filters={{ type: "", search: "", tags: [] }}
+					setFilters={jest.fn()}
+					activeTab="browse"
+					setActiveTab={jest.fn()}
+				/>,
+			)
+
+			const badge = screen.queryByText("Components", { selector: ".bg-vscode-badge-background" })
+			expect(badge).toBeNull()
+		})
+	})
 })

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Instal·lat",
+		"settings": "Configuració",
 		"browse": "Explorar",
 		"sources": "Fonts"
 	},
@@ -12,9 +14,9 @@
 			"label": "Filtrar per tipus:",
 			"all": "Tots els tipus",
 			"mode": "Mode",
-			"mcp": "Servidor MCP",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
-			"package": "Paquet"
+			"package": "Package"
 		},
 		"sort": {
 			"label": "Ordenar per:",
@@ -25,11 +27,11 @@
 		"tags": {
 			"label": "Filtrar per etiquetes:",
 			"available": "{{count}} disponibles",
-			"clear": "Netejar etiquetes ({{count}})",
 			"placeholder": "Escriu per cercar i seleccionar etiquetes...",
 			"noResults": "No s'han trobat etiquetes coincidents",
-			"selected": "Mostrant elements amb qualsevol de les etiquetes seleccionades ({{count}} seleccionades)",
-			"clickToFilter": "Fes clic a les etiquetes per filtrar elements"
+			"clickToFilter": "Fes clic a les etiquetes per filtrar elements",
+			"clear": "Netejar {{count}} etiqueta{{count !== 1 ? 's' : ''}} seleccionada",
+			"selected": "{{count}} etiqueta{{count !== 1 ? 's' : ''}} seleccionada"
 		}
 	},
 	"type-group": {
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "No s'han trobat elements al marketplace",
 			"withFilters": "Prova d'ajustar els filtres",
-			"noSources": "Prova d'afegir una font a la pestanya Fonts"
+			"noSources": "Prova d'afegir una font a la pestanya Fonts",
+			"adjustFilters": "Prova d'ajustar els filtres o els termes de cerca",
+			"clearAllFilters": "Esborrar tots els filtres"
 		},
-		"count": "S'han trobat {{count}} elements",
+		"count": "{{count}} element{{count !== 1 ? 's' : ''}} trobats",
 		"components": "{{count}} components",
 		"refresh": {
 			"button": "Actualitzar",
-			"refreshing": "Actualitzant..."
+			"refreshing": "Actualitzant...",
+			"mayTakeMoment": "Això pot trigar un moment."
 		},
 		"card": {
 			"by": "per {{author}}",
 			"from": "de {{source}}",
+			"installProject": "Instal·lar",
+			"installGlobal": "Instal·lar (Global),",
+			"removeProject": "Eliminar",
+			"removeGlobal": "Eliminar (Global)",
 			"viewSource": "Veure",
 			"viewOnSource": "Veure a {{source}}"
 		}
 	},
+	"installProjectTooltip": "Instal·lació del projecte",
 	"sources": {
-		"title": "Configurar fonts del Marketplace",
-		"description": "Afegeix repositoris Git que continguin elements del marketplace. Aquests repositoris es descarregaran quan s'explori el marketplace.",
+		"title": "Fonts del Marketplace",
+		"description": "Afegeix o gestiona fonts per als elements del marketplace. Cada font és un repositori Git que conté definicions d'elements del marketplace.",
 		"add": {
 			"title": "Afegir nova font",
-			"urlPlaceholder": "URL del repositori Git (p. ex., https://github.com/username/repo)",
-			"urlFormats": "Formats admesos: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git), o protocol Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nom a mostrar (màx. 20 caràcters)",
+			"urlPlaceholder": "URL del repositori Git (p. ex., 'https://github.com/user/repo.git')",
+			"urlFormats": "Formats admesos: HTTPS, SSH o ruta de fitxer local.",
+			"namePlaceholder": "Nom de font opcional (p. ex., 'El meu repositori privat')",
 			"button": "Afegir font"
 		},
 		"current": {
 			"title": "Fonts actuals",
-			"count": "{{current}}/{{max}} màx.",
-			"empty": "No hi ha fonts configurades. Afegeix una font per començar.",
-			"refresh": "Actualitzar aquesta font",
+			"empty": "Encara no s'ha afegit cap font del marketplace.",
+			"emptyHint": "Afegeix una font a dalt per explorar els elements del marketplace.",
+			"refresh": "Actualitzar font",
 			"remove": "Eliminar font"
 		},
 		"errors": {
-			"emptyUrl": "L'URL no pot estar buida",
-			"invalidUrl": "Format d'URL no vàlid",
-			"nonVisibleChars": "L'URL conté caràcters no visibles diferents d'espais",
-			"invalidGitUrl": "L'URL ha de ser una URL vàlida de repositori Git (p. ex., https://github.com/username/repo)",
-			"duplicateUrl": "Aquesta URL ja és a la llista (coincidència insensible a majúscules i espais)",
-			"nameTooLong": "El nom ha de tenir 20 caràcters o menys",
-			"nonVisibleCharsName": "El nom conté caràcters no visibles diferents d'espais",
-			"duplicateName": "Aquest nom ja està en ús (coincidència insensible a majúscules i espais)",
-			"maxSources": "Màxim de {{max}} fonts permeses"
+			"maxSources": "S'ha permès un màxim de {{max}} fonts.",
+			"emptyUrl": "L'URL no pot estar buit.",
+			"nonVisibleChars": "L'URL conté caràcters no visibles.",
+			"invalidGitUrl": "Format d'URL de Git no vàlid.",
+			"duplicateUrl": "Ja existeix una font amb aquest URL.",
+			"nameTooLong": "El nom no pot superar els 20 caràcters.",
+			"nonVisibleCharsName": "El nom conté caràcters no visibles.",
+			"duplicateName": "Ja existeix una font amb aquest nom.",
+			"invalidUrl": "Invalid URL format"
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Installiert",
+		"settings": "Einstellungen",
 		"browse": "Durchsuchen",
 		"sources": "Quellen"
 	},
@@ -12,7 +14,7 @@
 			"label": "Nach Typ filtern:",
 			"all": "Alle Typen",
 			"mode": "Modus",
-			"mcp": "MCP-Server",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Paket"
 		},
@@ -25,67 +27,76 @@
 		"tags": {
 			"label": "Nach Tags filtern:",
 			"available": "{{count}} verfügbar",
-			"clear": "Tags löschen ({{count}})",
 			"placeholder": "Tippen Sie, um Tags zu suchen und auszuwählen...",
 			"noResults": "Keine passenden Tags gefunden",
-			"selected": "Zeige Einträge mit beliebigen ausgewählten Tags ({{count}} ausgewählt)",
-			"clickToFilter": "Klicken Sie auf Tags zum Filtern"
+			"clickToFilter": "Klicken Sie auf Tags zum Filtern",
+			"clear": "Lösche {{count}} ausgewählte Tags",
+			"selected": "{{count}} ausgewählte Tags"
 		}
 	},
 	"type-group": {
 		"match": "Treffer",
 		"modes": "Modi",
-		"mcps": "MCP-Server",
+		"mcps": "MCP Servers",
 		"prompts": "Prompts",
 		"packages": "Pakete",
 		"generic-type": "{{type}}"
 	},
 	"items": {
-		"empty": {
-			"noItems": "Keine Marketplace-Einträge gefunden",
-			"withFilters": "Versuchen Sie, die Filter anzupassen",
-			"noSources": "Versuchen Sie, eine Quelle im Quellen-Tab hinzuzufügen"
-		},
 		"count": "{{count}} Einträge gefunden",
 		"components": "{{count}} Komponenten",
 		"refresh": {
 			"button": "Aktualisieren",
-			"refreshing": "Aktualisiere..."
+			"refreshing": "Aktualisiere...",
+			"mayTakeMoment": "Das kann einen Moment dauern..."
+		},
+		"empty": {
+			"noItems": "Keine Marketplace-Einträge gefunden",
+			"withFilters": "Versuche, deine Filter anzupassen",
+			"noSources": "Versuche, eine Quelle im Quellen-Tab hinzuzufügen",
+			"adjustFilters": "Versuche, deine Filter oder Suchbegriffe anzupassen",
+			"clearAllFilters": "Alle Filter löschen"
 		},
 		"card": {
 			"by": "von {{author}}",
 			"from": "von {{source}}",
+			"installProject": "Installieren",
+			"installGlobal": "Installieren (Global)",
+			"removeProject": "Entfernen",
+			"removeGlobal": "Entfernen (Global)",
 			"viewSource": "Ansehen",
 			"viewOnSource": "Auf {{source}} ansehen"
 		}
 	},
+	"installProjectTooltip": "Projektinstallation",
 	"sources": {
-		"title": "Marketplace-Quellen konfigurieren",
-		"description": "Fügen Sie Git-Repositories hinzu, die Marketplace-Einträge enthalten. Diese Repositories werden beim Durchsuchen des Marketplaces abgerufen.",
+		"title": "Marketplace Quellen",
+		"description": "Füge Quellen für Marketplace-Elemente hinzu oder verwalte sie. Jede Quelle ist ein Git-Repository, das Marketplace-Elementdefinitionen enthält.",
 		"add": {
 			"title": "Neue Quelle hinzufügen",
-			"urlPlaceholder": "Git-Repository-URL (z.B. https://github.com/username/repo)",
-			"urlFormats": "Unterstützte Formate: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) oder Git-Protokoll (git://github.com/username/repo.git)",
-			"namePlaceholder": "Anzeigename (max. 20 Zeichen)",
+			"urlPlaceholder": "Git-Repository-URL (z. B. 'https://github.com/user/repo.git')",
+			"urlFormats": "Unterstützte Formate: HTTPS, SSH oder lokaler Dateipfad.",
+			"namePlaceholder": "Optionaler Quellenname (z. B. 'Mein privates Repo')",
 			"button": "Quelle hinzufügen"
 		},
 		"current": {
 			"title": "Aktuelle Quellen",
-			"count": "{{current}}/{{max}} max.",
-			"empty": "Keine Quellen konfiguriert. Fügen Sie eine Quelle hinzu, um zu beginnen.",
-			"refresh": "Diese Quelle aktualisieren",
+			"empty": "Noch keine Marketplace-Quellen hinzugefügt.",
+			"emptyHint": "Füge oben eine Quelle hinzu, um Marketplace-Elemente zu durchsuchen.",
+			"refresh": "Quelle aktualisieren",
 			"remove": "Quelle entfernen"
 		},
 		"errors": {
-			"emptyUrl": "URL darf nicht leer sein",
-			"invalidUrl": "Ungültiges URL-Format",
-			"nonVisibleChars": "URL enthält unsichtbare Zeichen außer Leerzeichen",
-			"invalidGitUrl": "URL muss eine gültige Git-Repository-URL sein (z.B. https://github.com/username/repo)",
-			"duplicateUrl": "Diese URL ist bereits in der Liste (Groß-/Kleinschreibung und Leerzeichen werden ignoriert)",
-			"nameTooLong": "Name darf maximal 20 Zeichen lang sein",
-			"nonVisibleCharsName": "Name enthält unsichtbare Zeichen außer Leerzeichen",
-			"duplicateName": "Dieser Name wird bereits verwendet (Groß-/Kleinschreibung und Leerzeichen werden ignoriert)",
-			"maxSources": "Maximal {{max}} Quellen erlaubt"
+			"maxSources": "Maximal {{max}} Quellen erlaubt.",
+			"emptyUrl": "Die URL darf nicht leer sein.",
+			"nonVisibleChars": "Die URL enthält nicht sichtbare Zeichen.",
+			"invalidGitUrl": "Ungültiges Git-URL-Format.",
+			"duplicateUrl": "Eine Quelle mit dieser URL ist bereits vorhanden.",
+			"nameTooLong": "Der Name darf 20 Zeichen nicht überschreiten.",
+			"nonVisibleCharsName": "Der Name enthält nicht sichtbare Zeichen.",
+			"duplicateName": "Eine Quelle mit diesem Namen ist bereits vorhanden.",
+			"emojiName": "Emoji-Zeichen können Anzeigeprobleme verursachen.",
+			"invalidUrl": "Invalid URL format"
 		}
 	}
 }

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

@@ -1,9 +1,12 @@
 {
 	"title": "Marketplace",
 	"tabs": {
-		"browse": "Browse",
-		"sources": "Sources"
+		"installed": "Installed",
+		"settings": "Settings",
+		"browse": "Browse"
 	},
+	"done": "Done",
+	"refresh": "Refresh",
 	"filters": {
 		"search": {
 			"placeholder": "Search marketplace items..."
@@ -44,20 +47,23 @@
 		"empty": {
 			"noItems": "No marketplace items found",
 			"withFilters": "Try adjusting your filters",
-			"noSources": "Try adding a source in the Sources tab"
+			"noSources": "Try adding a source in the Sources tab",
+			"adjustFilters": "Try adjusting your filters or search terms",
+			"clearAllFilters": "Clear all filters"
 		},
 		"count": "{{count}} items found",
 		"components": "{{count}} components",
 		"refresh": {
 			"button": "Refresh",
-			"refreshing": "Refreshing..."
+			"refreshing": "Refreshing...",
+			"mayTakeMoment": "This may take a moment."
 		},
 		"card": {
 			"by": "by {{author}}",
 			"from": "from {{source}}",
-			"installProject": "Install (Project)",
+			"installProject": "Install",
 			"installGlobal": "Install (Global)",
-			"removeProject": "Remove (Project)",
+			"removeProject": "Remove",
 			"removeGlobal": "Remove (Global)",
 			"viewSource": "View",
 			"viewOnSource": "View on {{source}}"
@@ -88,6 +94,7 @@
 			"nameTooLong": "Name must be 20 characters or less",
 			"nonVisibleCharsName": "Name contains non-visible characters other than spaces",
 			"duplicateName": "This name is already in use (case and whitespace insensitive match)",
+			"emojiName": "Emoji characters may cause display issues",
 			"maxSources": "Maximum of {{max}} sources allowed"
 		}
 	}

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Instalado",
+		"settings": "Configuración",
 		"browse": "Explorar",
 		"sources": "Fuentes"
 	},
@@ -12,7 +14,7 @@
 			"label": "Filtrar por tipo:",
 			"all": "Todos los tipos",
 			"mode": "Modo",
-			"mcp": "Servidor MCP",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Paquete"
 		},
@@ -25,11 +27,11 @@
 		"tags": {
 			"label": "Filtrar por etiquetas:",
 			"available": "{{count}} disponibles",
-			"clear": "Limpiar etiquetas ({{count}})",
 			"placeholder": "Escriba para buscar y seleccionar etiquetas...",
 			"noResults": "No se encontraron etiquetas coincidentes",
-			"selected": "Mostrando elementos con cualquiera de las etiquetas seleccionadas ({{count}} seleccionadas)",
-			"clickToFilter": "Haga clic en las etiquetas para filtrar elementos"
+			"clickToFilter": "Haga clic en las etiquetas para filtrar elementos",
+			"clear": "Limpiar {{count}} etiqueta{{count !== 1 ? 's' : ''}} seleccionada",
+			"selected": "{{count}} etiqueta{{count !== 1 ? 's' : ''}} seleccionada"
 		}
 	},
 	"type-group": {
@@ -41,51 +43,60 @@
 		"generic-type": "{{type}}"
 	},
 	"items": {
-		"empty": {
-			"noItems": "No se encontraron elementos en el marketplace",
-			"withFilters": "Intente ajustar los filtros",
-			"noSources": "Intente agregar una fuente en la pestaña Fuentes"
-		},
-		"count": "{{count}} elementos encontrados",
+		"count": "{{count}} elemento{{count !== 1 ? 's' : ''}} encontrados",
 		"components": "{{count}} componentes",
 		"refresh": {
 			"button": "Actualizar",
-			"refreshing": "Actualizando..."
+			"refreshing": "Actualizando...",
+			"mayTakeMoment": "Esto puede tardar un momento..."
+		},
+		"empty": {
+			"noItems": "No se encontraron elementos en el marketplace",
+			"withFilters": "Intente ajustar los filtros",
+			"noSources": "Intente agregar una fuente en la pestaña Fuentes",
+			"adjustFilters": "Intenta ajustar tus filtros o términos de búsqueda",
+			"clearAllFilters": "Borrar todos los filtros"
 		},
 		"card": {
 			"by": "por {{author}}",
 			"from": "de {{source}}",
+			"installProject": "Instalar",
+			"installGlobal": "Instalar (Global)",
+			"removeProject": "Eliminar",
+			"removeGlobal": "Eliminar (Global)",
 			"viewSource": "Ver",
 			"viewOnSource": "Ver en {{source}}"
 		}
 	},
+	"installProjectTooltip": "Instalación del proyecto",
 	"sources": {
-		"title": "Configurar fuentes del Marketplace",
-		"description": "Agregue repositorios Git que contengan elementos del marketplace. Estos repositorios se descargarán al explorar el marketplace.",
+		"title": "Fuentes del Marketplace",
+		"description": "Agregue o administre fuentes para los elementos del marketplace. Cada fuente es un repositorio Git que contiene definiciones de elementos del marketplace.",
 		"add": {
 			"title": "Agregar nueva fuente",
-			"urlPlaceholder": "URL del repositorio Git (ej., https://github.com/username/repo)",
-			"urlFormats": "Formatos admitidos: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) o protocolo Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nombre para mostrar (máx. 20 caracteres)",
+			"urlPlaceholder": "URL del repositorio Git (ej., 'https://github.com/user/repo.git')",
+			"urlFormats": "Formatos admitidos: HTTPS, SSH o ruta de archivo local.",
+			"namePlaceholder": "Nombre de fuente opcional (ej., 'Mi repositorio privado')",
 			"button": "Agregar fuente"
 		},
 		"current": {
 			"title": "Fuentes actuales",
-			"count": "{{current}}/{{max}} máx.",
-			"empty": "No hay fuentes configuradas. Agregue una fuente para comenzar.",
-			"refresh": "Actualizar esta fuente",
+			"empty": "Aún no se han agregado fuentes de marketplace.",
+			"emptyHint": "Agregue una fuente arriba para explorar los elementos del marketplace.",
+			"refresh": "Actualizar fuente",
 			"remove": "Eliminar fuente"
 		},
 		"errors": {
-			"emptyUrl": "La URL no puede estar vacía",
-			"invalidUrl": "Formato de URL no válido",
-			"nonVisibleChars": "La URL contiene caracteres no visibles distintos de espacios",
-			"invalidGitUrl": "La URL debe ser una URL válida de repositorio Git (ej., https://github.com/username/repo)",
-			"duplicateUrl": "Esta URL ya está en la lista (coincidencia insensible a mayúsculas y espacios)",
-			"nameTooLong": "El nombre debe tener 20 caracteres o menos",
-			"nonVisibleCharsName": "El nombre contiene caracteres no visibles distintos de espacios",
-			"duplicateName": "Este nombre ya está en uso (coincidencia insensible a mayúsculas y espacios)",
-			"maxSources": "Máximo de {{max}} fuentes permitidas"
+			"maxSources": "Se permite un máximo de {{max}} fuentes.",
+			"emptyUrl": "La URL no puede estar vacía.",
+			"invalidUrl": "Formato de URL no válido.",
+			"nonVisibleChars": "La URL contiene caracteres no visibles.",
+			"invalidGitUrl": "Formato de URL Git no válido.",
+			"duplicateUrl": "Ya existe una fuente con esta URL.",
+			"nameTooLong": "El nombre no puede exceder los 20 caracteres.",
+			"nonVisibleCharsName": "El nombre contiene caracteres no visibles.",
+			"duplicateName": "Ya existe una fuente con este nombre.",
+			"emojiName": "Los caracteres emoji pueden causar problemas de visualización."
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Installé",
+		"settings": "Paramètres",
 		"browse": "Parcourir",
 		"sources": "Sources"
 	},
@@ -12,7 +14,7 @@
 			"label": "Filtrer par type :",
 			"all": "Tous les types",
 			"mode": "Mode",
-			"mcp": "Serveur MCP",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Paquet"
 		},
@@ -25,11 +27,11 @@
 		"tags": {
 			"label": "Filtrer par tags :",
 			"available": "{{count}} disponibles",
-			"clear": "Effacer les tags ({{count}})",
 			"placeholder": "Tapez pour rechercher et sélectionner des tags...",
 			"noResults": "Aucun tag correspondant trouvé",
-			"selected": "Affichage des éléments avec l'un des tags sélectionnés ({{count}} sélectionnés)",
-			"clickToFilter": "Cliquez sur les tags pour filtrer les éléments"
+			"clickToFilter": "Cliquez sur les tags pour filtrer les éléments",
+			"clear": "Effacer {{count}} tag{{count !== 1 ? 's' : ''}} sélectionné{{count !== 1 ? 's' : ''}}",
+			"selected": "{{count}} tag{{count !== 1 ? 's' : ''}} sélectionné{{count !== 1 ? 's' : ''}}"
 		}
 	},
 	"type-group": {
@@ -41,51 +43,60 @@
 		"generic-type": "{{type}}"
 	},
 	"items": {
-		"empty": {
-			"noItems": "Aucun élément trouvé dans le marketplace",
-			"withFilters": "Essayez d'ajuster les filtres",
-			"noSources": "Essayez d'ajouter une source dans l'onglet Sources"
-		},
-		"count": "{{count}} éléments trouvés",
+		"count": "{{count}} élément{{count !== 1 ? 's' : ''}} trouvé{{count !== 1 ? 's' : ''}}",
 		"components": "{{count}} composants",
 		"refresh": {
 			"button": "Actualiser",
-			"refreshing": "Actualisation..."
+			"refreshing": "Actualisation...",
+			"mayTakeMoment": "Cela peut prendre un moment..."
+		},
+		"empty": {
+			"noItems": "Aucun élément trouvé dans le marketplace",
+			"withFilters": "Essayez d'ajuster les filtres",
+			"noSources": "Essayez d'ajouter une source dans l'onglet Sources",
+			"adjustFilters": "Essaie d'ajuster tes filtres ou tes termes de recherche",
+			"clearAllFilters": "Effacer tous les filtres"
 		},
 		"card": {
 			"by": "par {{author}}",
 			"from": "de {{source}}",
+			"installProject": "Installer",
+			"installGlobal": "Installer (Global)",
+			"removeProject": "Supprimer",
+			"removeGlobal": "Supprimer (Global)",
 			"viewSource": "Voir",
 			"viewOnSource": "Voir sur {{source}}"
 		}
 	},
+	"installProjectTooltip": "Installation du projet",
 	"sources": {
-		"title": "Configurer les sources du Marketplace",
-		"description": "Ajoutez des dépôts Git contenant des éléments du marketplace. Ces dépôts seront récupérés lors de la navigation dans le marketplace.",
+		"title": "Sources du Marketplace",
+		"description": "Ajoutez ou gérez les sources des éléments du marketplace. Chaque source est un dépôt Git contenant les définitions des éléments du marketplace.",
 		"add": {
 			"title": "Ajouter une nouvelle source",
-			"urlPlaceholder": "URL du dépôt Git (ex., https://github.com/username/repo)",
-			"urlFormats": "Formats pris en charge : HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) ou protocole Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nom d'affichage (max. 20 caractères)",
+			"urlPlaceholder": "URL du dépôt Git (ex., 'https://github.com/user/repo.git')",
+			"urlFormats": "Formats pris en charge : HTTPS, SSH ou chemin de fichier local.",
+			"namePlaceholder": "Nom de source facultatif (par ex., 'Mon dépôt privé')",
 			"button": "Ajouter la source"
 		},
 		"current": {
 			"title": "Sources actuelles",
-			"count": "{{current}}/{{max}} max.",
-			"empty": "Aucune source configurée. Ajoutez une source pour commencer.",
-			"refresh": "Actualiser cette source",
+			"empty": "Aucune source de marketplace ajoutée pour le moment.",
+			"emptyHint": "Ajoutez une source ci-dessus pour parcourir les éléments du marketplace.",
+			"refresh": "Actualiser la source",
 			"remove": "Supprimer la source"
 		},
 		"errors": {
-			"emptyUrl": "L'URL ne peut pas être vide",
-			"invalidUrl": "Format d'URL invalide",
-			"nonVisibleChars": "L'URL contient des caractères non visibles autres que des espaces",
-			"invalidGitUrl": "L'URL doit être une URL de dépôt Git valide (ex., https://github.com/username/repo)",
-			"duplicateUrl": "Cette URL est déjà dans la liste (correspondance insensible à la casse et aux espaces)",
-			"nameTooLong": "Le nom doit faire 20 caractères ou moins",
-			"nonVisibleCharsName": "Le nom contient des caractères non visibles autres que des espaces",
-			"duplicateName": "Ce nom est déjà utilisé (correspondance insensible à la casse et aux espaces)",
-			"maxSources": "Maximum de {{max}} sources autorisées"
+			"maxSources": "Maximum de {{max}} sources autorisées.",
+			"emptyUrl": "L'URL ne peut pas être vide.",
+			"nonVisibleChars": "L'URL contient des caractères non visibles.",
+			"invalidGitUrl": "Format d'URL Git non valide.",
+			"duplicateUrl": "Une source avec cette URL existe déjà.",
+			"nameTooLong": "Le nom ne peut pas dépasser 20 caractères.",
+			"nonVisibleCharsName": "Le nom contient des caractères non visibles.",
+			"duplicateName": "Une source avec ce nom existe déjà.",
+			"emojiName": "Les caractères emoji peuvent causer des problèmes d'affichage.",
+			"invalidUrl": "Invalid URL format"
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "मार्केटप्लेस",
 	"tabs": {
+		"installed": "इंस्टॉल किया गया",
+		"settings": "सेटिंग्स",
 		"browse": "ब्राउज़ करें",
 		"sources": "स्रोत"
 	},
@@ -12,8 +14,8 @@
 			"label": "प्रकार से फ़िल्टर करें:",
 			"all": "सभी प्रकार",
 			"mode": "मोड",
-			"mcp": "एमसीपी सर्वर",
-			"prompt": "प्रॉम्प्ट",
+			"mcp server": "MCP Server",
+			"prompt": "Prompt",
 			"package": "पैकेज"
 		},
 		"sort": {
@@ -25,18 +27,18 @@
 		"tags": {
 			"label": "टैग से फ़िल्टर करें:",
 			"available": "{{count}} उपलब्ध",
-			"clear": "टैग साफ़ करें ({{count}})",
 			"placeholder": "टैग खोजने और चुनने के लिए टाइप करें...",
 			"noResults": "कोई मिलान टैग नहीं मिला",
-			"selected": "चयनित टैग वाले आइटम दिखा रहे हैं ({{count}} चयनित)",
-			"clickToFilter": "आइटम फ़िल्टर करने के लिए टैग पर क्लिक करें"
+			"clickToFilter": "आइटम फ़िल्टर करने के लिए टैग पर क्लिक करें",
+			"clear": "{{count}} चयनित टैग साफ़ करें",
+			"selected": "{{count}} चयनित टैग"
 		}
 	},
 	"type-group": {
 		"match": "मिलान",
 		"modes": "मोड्स",
-		"mcps": "एमसीपी सर्वर",
-		"prompts": "प्रॉम्प्ट्स",
+		"mcps": "MCP Servers",
+		"prompts": "Prompts",
 		"packages": "पैकेज",
 		"generic-type": "{{type}}"
 	},
@@ -44,48 +46,57 @@
 		"empty": {
 			"noItems": "कोई मार्केटप्लेस आइटम नहीं मिला",
 			"withFilters": "फ़िल्टर समायोजित करने का प्रयास करें",
-			"noSources": "स्रोत टैब में एक स्रोत जोड़ने का प्रयास करें"
+			"noSources": "स्रोत टैब में एक स्रोत जोड़ने का प्रयास करें",
+			"adjustFilters": "अपने फ़िल्टर या खोज शब्दों को समायोजित करने का प्रयास करें",
+			"clearAllFilters": "सभी फ़िल्टर साफ़ करें"
 		},
-		"count": "{{count}} आइटम मिले",
+		"count": "{{count}} आइटम{{count !== 1 ? 's' : ''}} मिले",
 		"components": "{{count}} कंपोनेंट",
 		"refresh": {
 			"button": "रीफ्रेश करें",
-			"refreshing": "रीफ्रेश हो रहा है..."
+			"refreshing": "रीफ्रेश हो रहा है...",
+			"mayTakeMoment": "इसमें थोड़ा समय लग सकता है।"
 		},
 		"card": {
 			"by": "{{author}} द्वारा",
 			"from": "{{source}} से",
+			"installProject": "इंस्टॉल करें",
+			"installGlobal": "इंस्टॉल करें (ग्लोबल)",
+			"removeProject": "हटाएं",
+			"removeGlobal": "हटाएं (ग्लोबल)",
 			"viewSource": "देखें",
 			"viewOnSource": "{{source}} पर देखें"
 		}
 	},
+	"installProjectTooltip": "परियोजना स्थापना",
 	"sources": {
-		"title": "मार्केटप्लेस स्रोत कॉन्फ़िगर करें",
-		"description": "मार्केटप्लेस आइटम वाले Git रिपॉजिटरी जोड़ें। मार्केटप्लेस ब्राउज़ करते समय इन रिपॉजिटरी को फ़ेच किया जाएगा।",
+		"title": "Marketplace स्रोत",
+		"description": "Marketplace आइटम के लिए स्रोत जोड़ें या प्रबंधित करें. प्रत्येक स्रोत एक Git रिपॉजिटरी है जिसमें Marketplace आइटम परिभाषाएँ हैं।",
 		"add": {
 			"title": "नया स्रोत जोड़ें",
-			"urlPlaceholder": "Git रिपॉजिटरी URL (उदा., https://github.com/username/repo)",
-			"urlFormats": "समर्थित प्रारूप: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git), या Git प्रोटोकॉल (git://github.com/username/repo.git)",
-			"namePlaceholder": "प्रदर्शन नाम (अधिकतम 20 अक्षर)",
+			"urlPlaceholder": "Git रिपॉजिटरी URL (उदा. 'https://github.com/user/repo.git')",
+			"urlFormats": "समर्थित प्रारूप: HTTPS, SSH या स्थानीय फ़ाइल पथ।",
+			"namePlaceholder": "वैकल्पिक स्रोत नाम (जैसे 'मेरा निजी रेपो')",
 			"button": "स्रोत जोड़ें"
 		},
 		"current": {
 			"title": "वर्तमान स्रोत",
-			"count": "{{current}}/{{max}} अधिकतम",
-			"empty": "कोई स्रोत कॉन्फ़िगर नहीं किया गया। शुरू करने के लिए एक स्रोत जोड़ें।",
-			"refresh": "इस स्रोत को रीफ्रेश करें",
+			"empty": "अभी तक कोई Marketplace स्रोत नहीं जोड़ा गया है.",
+			"emptyHint": "Marketplace आइटम ब्राउज़ करने के लिए ऊपर एक स्रोत जोड़ें.",
+			"refresh": "स्रोत ताज़ा करें",
 			"remove": "स्रोत हटाएं"
 		},
 		"errors": {
-			"emptyUrl": "URL खाली नहीं हो सकता",
-			"invalidUrl": "अमान्य URL प्रारूप",
-			"nonVisibleChars": "URL में स्पेस के अलावा अदृश्य वर्ण हैं",
-			"invalidGitUrl": "URL एक वैध Git रिपॉजिटरी URL होना चाहिए (उदा., https://github.com/username/repo)",
-			"duplicateUrl": "यह URL पहले से सूची में है (केस और व्हाइटस्पेस असंवेदनशील मिलान)",
-			"nameTooLong": "नाम 20 अक्षरों या उससे कम का होना चाहिए",
-			"nonVisibleCharsName": "नाम में स्पेस के अलावा अदृश्य वर्ण हैं",
-			"duplicateName": "यह नाम पहले से उपयोग में है (केस और व्हाइटस्पेस असंवेदनशील मिलान)",
-			"maxSources": "अधिकतम {{max}} स्रोत की अनुमति है"
+			"maxSources": "अधिकतम {{max}} स्रोतों की अनुमति है.",
+			"emptyUrl": "URL खाली नहीं हो सकता.",
+			"nonVisibleChars": "URL में गैर-दृश्यमान वर्ण हैं.",
+			"invalidGitUrl": "अमान्य Git URL स्वरूप.",
+			"duplicateUrl": "इस URL वाला स्रोत पहले से मौजूद है.",
+			"nameTooLong": "नाम 20 अक्षरों से अधिक नहीं हो सकता.",
+			"nonVisibleCharsName": "नाम में गैर-दृश्यमान वर्ण हैं.",
+			"duplicateName": "इस नाम वाला स्रोत पहले से मौजूद है.",
+			"emojiName": "इमोजी वर्णों के कारण प्रदर्शन संबंधी समस्याएँ हो सकती हैं.",
+			"invalidUrl": "Invalid URL format"
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Installati",
+		"settings": "Impostazioni",
 		"browse": "Sfoglia",
 		"sources": "Fonti"
 	},
@@ -12,7 +14,7 @@
 			"label": "Filtra per tipo:",
 			"all": "Tutti i tipi",
 			"mode": "Modalità",
-			"mcp": "Server MCP",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Pacchetto"
 		},
@@ -25,17 +27,17 @@
 		"tags": {
 			"label": "Filtra per tag:",
 			"available": "{{count}} disponibili",
-			"clear": "Cancella tag ({{count}})",
 			"placeholder": "Digita per cercare e selezionare i tag...",
 			"noResults": "Nessun tag corrispondente trovato",
-			"selected": "Mostrando elementi con uno qualsiasi dei tag selezionati ({{count}} selezionati)",
-			"clickToFilter": "Clicca sui tag per filtrare gli elementi"
+			"clickToFilter": "Clicca sui tag per filtrare gli elementi",
+			"clear": "Cancella {{count}} tag selezionati",
+			"selected": "{{count}} tag selezionati"
 		}
 	},
 	"type-group": {
 		"match": "Corrispondenza",
 		"modes": "Modalità",
-		"mcps": "Server MCP",
+		"mcps": "MCP Server",
 		"prompts": "Prompt",
 		"packages": "Pacchetti",
 		"generic-type": "{{type}}"
@@ -44,48 +46,57 @@
 		"empty": {
 			"noItems": "Nessun elemento trovato nel marketplace",
 			"withFilters": "Prova a modificare i filtri",
-			"noSources": "Prova ad aggiungere una fonte nella scheda Fonti"
+			"noSources": "Prova ad aggiungere una fonte nella scheda Fonti",
+			"adjustFilters": "Prova a regolare i tuoi filtri o termini di ricerca",
+			"clearAllFilters": "Cancella tutti i filtri"
 		},
 		"count": "{{count}} elementi trovati",
 		"components": "{{count}} componenti",
 		"refresh": {
 			"button": "Aggiorna",
-			"refreshing": "Aggiornamento in corso..."
+			"refreshing": "Aggiornamento in corso...",
+			"mayTakeMoment": "Questo potrebbe richiedere un momento."
 		},
 		"card": {
 			"by": "di {{author}}",
 			"from": "da {{source}}",
+			"installProject": "Installa",
+			"installGlobal": "Installa (Globale)",
+			"removeProject": "Rimuovi",
+			"removeGlobal": "Rimuovi (Globale)",
 			"viewSource": "Visualizza",
 			"viewOnSource": "Visualizza su {{source}}"
 		}
 	},
+	"installProjectTooltip": "Installazione del progetto",
 	"sources": {
-		"title": "Configura fonti del Marketplace",
-		"description": "Aggiungi repository Git che contengono elementi del marketplace. Questi repository verranno recuperati durante la navigazione nel marketplace.",
+		"title": "Fonti del Marketplace",
+		"description": "Aggiungi o gestisci le fonti per gli elementi del marketplace. Ogni fonte è un repository Git che contiene le definizioni degli elementi del marketplace.",
 		"add": {
 			"title": "Aggiungi nuova fonte",
-			"urlPlaceholder": "URL del repository Git (es., https://github.com/username/repo)",
-			"urlFormats": "Formati supportati: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) o protocollo Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nome visualizzato (max 20 caratteri)",
+			"urlPlaceholder": "URL del repository Git (es., 'https://github.com/user/repo.git')",
+			"urlFormats": "Formati supportati: HTTPS, SSH o percorso file locale.",
+			"namePlaceholder": "Nome fonte opzionale (es., 'Il mio repository privato')",
 			"button": "Aggiungi fonte"
 		},
 		"current": {
 			"title": "Fonti attuali",
-			"count": "{{current}}/{{max}} max",
-			"empty": "Nessuna fonte configurata. Aggiungi una fonte per iniziare.",
-			"refresh": "Aggiorna questa fonte",
+			"empty": "Nessuna fonte Marketplace aggiunta finora.",
+			"emptyHint": "Aggiungi una fonte sopra per esplorare gli elementi del Marketplace.",
+			"refresh": "Aggiorna fonte",
 			"remove": "Rimuovi fonte"
 		},
 		"errors": {
-			"emptyUrl": "L'URL non può essere vuoto",
-			"invalidUrl": "Formato URL non valido",
-			"nonVisibleChars": "L'URL contiene caratteri non visibili diversi dagli spazi",
-			"invalidGitUrl": "L'URL deve essere un URL valido di un repository Git (es., https://github.com/username/repo)",
-			"duplicateUrl": "Questo URL è già presente nell'elenco (corrispondenza insensibile a maiuscole/minuscole e spazi)",
-			"nameTooLong": "Il nome deve essere di 20 caratteri o meno",
-			"nonVisibleCharsName": "Il nome contiene caratteri non visibili diversi dagli spazi",
-			"duplicateName": "Questo nome è già in uso (corrispondenza insensibile a maiuscole/minuscole e spazi)",
-			"maxSources": "Massimo {{max}} fonti consentite"
+			"maxSources": "Massimo {{max}} fonti consentite.",
+			"emptyUrl": "L'URL non può essere vuoto.",
+			"invalidUrl": "Formato URL non valido.",
+			"nonVisibleChars": "L'URL contiene caratteri non visibili.",
+			"invalidGitUrl": "Formato URL Git non valido.",
+			"duplicateUrl": "Una fonte con questo URL esiste già.",
+			"nameTooLong": "Il nome non può superare i 20 caratteri.",
+			"nonVisibleCharsName": "Il nome contiene caratteri non visibili.",
+			"duplicateName": "Una fonte con questo nome esiste già.",
+			"emojiName": "I caratteri emoji possono causare problemi di visualizzazione."
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "マーケットプレイス",
 	"tabs": {
+		"installed": "インストール済み",
+		"settings": "設定",
 		"browse": "ブラウズ",
 		"sources": "ソース"
 	},
@@ -12,7 +14,7 @@
 			"label": "タイプでフィルター:",
 			"all": "すべてのタイプ",
 			"mode": "モード",
-			"mcp": "MCPサーバー",
+			"mcp server": "MCP Server",
 			"prompt": "プロンプト",
 			"package": "パッケージ"
 		},
@@ -25,17 +27,17 @@
 		"tags": {
 			"label": "タグでフィルター:",
 			"available": "{{count}}個利用可能",
-			"clear": "タグをクリア ({{count}})",
 			"placeholder": "タグを検索して選択...",
 			"noResults": "一致するタグが見つかりません",
-			"selected": "選択したタグのいずれかを含むアイテムを表示中 ({{count}}個選択)",
-			"clickToFilter": "タグをクリックしてアイテムをフィルター"
+			"clickToFilter": "タグをクリックしてアイテムをフィルター",
+			"clear": "{{count}}個の選択されたタグをクリア",
+			"selected": "{{count}}個の選択されたタグ"
 		}
 	},
 	"type-group": {
 		"match": "一致",
 		"modes": "モード",
-		"mcps": "MCPサーバー",
+		"mcps": "MCP Servers",
 		"prompts": "プロンプト",
 		"packages": "パッケージ",
 		"generic-type": "{{type}}"
@@ -44,48 +46,57 @@
 		"empty": {
 			"noItems": "マーケットプレイスのアイテムが見つかりません",
 			"withFilters": "フィルターを調整してみてください",
-			"noSources": "ソースタブでソースを追加してみてください"
+			"noSources": "ソースタブでソースを追加してみてください",
+			"adjustFilters": "フィルターまたは検索語を調整してみてください",
+			"clearAllFilters": "すべてのフィルターをクリア"
 		},
-		"count": "{{count}}個のアイテムが見つかりました",
+		"count": "{{count}}個のアイテム",
 		"components": "{{count}}個のコンポーネント",
 		"refresh": {
 			"button": "更新",
-			"refreshing": "更新中..."
+			"refreshing": "更新中...",
+			"mayTakeMoment": "これには少し時間がかかる場合があります。"
 		},
 		"card": {
 			"by": "作者: {{author}}",
 			"from": "ソース: {{source}}",
+			"installProject": "インストール",
+			"installGlobal": "インストール (グローバル)",
+			"removeProject": "削除",
+			"removeGlobal": "削除 (グローバル)",
 			"viewSource": "表示",
 			"viewOnSource": "{{source}}で表示"
 		}
 	},
+	"installProjectTooltip": "プロジェクトのインストール",
 	"sources": {
-		"title": "マーケットプレイスのソースを設定",
-		"description": "マーケットプレイスのアイテムを含むGitリポジトリを追加します。これらのリポジトリはマーケットプレイスの閲覧時に取得されます。",
+		"title": "マーケットプレイスソース",
+		"description": "マーケットプレイスアイテムのソースを追加または管理します。各ソースは、マーケットプレイスアイテムの定義を含むGitリポジトリです。",
 		"add": {
 			"title": "新しいソースを追加",
-			"urlPlaceholder": "GitリポジトリのURL (例: https://github.com/username/repo)",
-			"urlFormats": "サポートされている形式: HTTPS (https://github.com/username/repo)、SSH (git@github.com:username/repo.git)、またはGitプロトコル (git://github.com/username/repo.git)",
-			"namePlaceholder": "表示名 (最大20文字)",
+			"urlPlaceholder": "GitリポジトリのURL (例: 'https://github.com/user/repo.git')",
+			"urlFormats": "サポートされている形式: HTTPS、SSH、またはローカルファイルパス。",
+			"namePlaceholder": "オプションのソース名 (例: 'マイプライベートリポジトリ')",
 			"button": "ソースを追加"
 		},
 		"current": {
 			"title": "現在のソース",
-			"count": "{{current}}/{{max}}個まで",
-			"empty": "ソースが設定されていません。ソースを追加して始めましょう。",
-			"refresh": "このソースを更新",
+			"empty": "まだMarketplaceソースが追加されていません。",
+			"emptyHint": "Marketplaceアイテムを閲覧するには、上にソースを追加してください。",
+			"refresh": "ソースを更新",
 			"remove": "ソースを削除"
 		},
 		"errors": {
-			"emptyUrl": "URLを入力してください",
-			"invalidUrl": "無効なURL形式です",
-			"nonVisibleChars": "URLにスペース以外の不可視文字が含まれています",
-			"invalidGitUrl": "URLは有効なGitリポジトリのURLである必要があります (例: https://github.com/username/repo)",
-			"duplicateUrl": "このURLは既にリストに存在します (大文字小文字とスペースを区別しない一致)",
-			"nameTooLong": "名前は20文字以内である必要があります",
-			"nonVisibleCharsName": "名前にスペース以外の不可視文字が含まれています",
-			"duplicateName": "この名前は既に使用されています (大文字小文字とスペースを区別しない一致)",
-			"maxSources": "最大{{max}}個のソースまで追加できます"
+			"maxSources": "最大{{max}}個のソースが許可されています。",
+			"emptyUrl": "URLは空にできません。",
+			"invalidUrl": "無効なURL形式です。",
+			"nonVisibleChars": "URLに表示されない文字が含まれています。",
+			"invalidGitUrl": "無効なGit URL形式。",
+			"duplicateUrl": "このURLを持つソースはすでに存在します。",
+			"nameTooLong": "名前は20文字を超えることはできません。",
+			"nonVisibleCharsName": "名前に表示されない文字が含まれています。",
+			"duplicateName": "この名前のソースはすでに存在します.",
+			"emojiName": "絵文字は表示上の問題を引き起こす可能性があります。"
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "마켓플레이스",
 	"tabs": {
+		"installed": "설치됨",
+		"settings": "설정",
 		"browse": "찾아보기",
 		"sources": "소스"
 	},
@@ -12,7 +14,7 @@
 			"label": "유형별 필터:",
 			"all": "모든 유형",
 			"mode": "모드",
-			"mcp": "MCP 서버",
+			"mcp server": "MCP Server",
 			"prompt": "프롬프트",
 			"package": "패키지"
 		},
@@ -25,17 +27,17 @@
 		"tags": {
 			"label": "태그별 필터:",
 			"available": "{{count}}개 사용 가능",
-			"clear": "태그 지우기 ({{count}})",
 			"placeholder": "태그 검색 및 선택...",
 			"noResults": "일치하는 태그가 없습니다",
-			"selected": "선택한 태그가 있는 항목 표시 중 ({{count}}개 선택됨)",
-			"clickToFilter": "태그를 클릭하여 항목 필터링"
+			"clickToFilter": "태그를 클릭하여 항목 필터링",
+			"clear": "{{count}}개의 선택된 태그 지우기",
+			"selected": "{{count}}개의 선택된 태그"
 		}
 	},
 	"type-group": {
 		"match": "일치",
 		"modes": "모드",
-		"mcps": "MCP 서버",
+		"mcps": "MCP Servers",
 		"prompts": "프롬프트",
 		"packages": "패키지",
 		"generic-type": "{{type}}"
@@ -44,48 +46,57 @@
 		"empty": {
 			"noItems": "마켓플레이스 항목을 찾을 수 없습니다",
 			"withFilters": "필터를 조정해 보세요",
-			"noSources": "소스 탭에서 소스를 추가해 보세요"
+			"noSources": "소스 탭에서 소스를 추가해 보세요",
+			"adjustFilters": "필터 또는 검색어를 조정해 보세요",
+			"clearAllFilters": "모든 필터 지우기"
 		},
-		"count": "{{count}}개 항목 찾음",
+		"count": "{{count}}개 항목",
 		"components": "{{count}}개 구성 요소",
 		"refresh": {
 			"button": "새로 고침",
-			"refreshing": "새로 고치는 중..."
+			"refreshing": "새로 고치는 중...",
+			"mayTakeMoment": "잠시 시간이 걸릴 수 있습니다."
 		},
 		"card": {
 			"by": "작성자: {{author}}",
 			"from": "출처: {{source}}",
+			"installProject": "설치",
+			"installGlobal": "설치 (글로벌)",
+			"removeProject": "제거",
+			"removeGlobal": "제거 (글로벌)",
 			"viewSource": "보기",
 			"viewOnSource": "{{source}}에서 보기"
 		}
 	},
+	"installProjectTooltip": "프로젝트 설치",
 	"sources": {
-		"title": "마켓플레이스 소스 구성",
-		"description": "마켓플레이스 항목이 포함된 Git 저장소를 추가합니다. 마켓플레이스를 탐색할 때 이러한 저장소를 가져옵니다.",
+		"title": "마켓플레이스 소스",
+		"description": "마켓플레이스 항목의 소스를 추가하거나 관리합니다. 각 소스는 마켓플레이스 항목 정의가 포함된 Git 리포지토리입니다.",
 		"add": {
 			"title": "새 소스 추가",
-			"urlPlaceholder": "Git 저장소 URL (예: https://github.com/username/repo)",
-			"urlFormats": "지원되는 형식: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) 또는 Git 프로토콜 (git://github.com/username/repo.git)",
-			"namePlaceholder": "표시 이름 (최대 20자)",
+			"urlPlaceholder": "Git 저장소 URL (예: 'https://github.com/user/repo.git')",
+			"urlFormats": "지원되는 형식: HTTPS, SSH 또는 로컬 파일 경로.",
+			"namePlaceholder": "선택적 소스 이름 (예: '내 개인 리포지토리')",
 			"button": "소스 추가"
 		},
 		"current": {
 			"title": "현재 소스",
-			"count": "{{current}}/{{max}} 최대",
-			"empty": "구성된 소스가 없습니다. 소스를 추가하여 시작하세요.",
-			"refresh": "이 소스 새로 고침",
+			"empty": "아직 Marketplace 소스가 추가되지 않았습니다.",
+			"emptyHint": "Marketplace 항목을 찾아보려면 위에 소스를 추가하세요.",
+			"refresh": "소스 새로 고침",
 			"remove": "소스 제거"
 		},
 		"errors": {
-			"emptyUrl": "URL을 입력해야 합니다",
-			"invalidUrl": "잘못된 URL 형식",
-			"nonVisibleChars": "URL에 공백 이외의 보이지 않는 문자가 포함되어 있습니다",
-			"invalidGitUrl": "URL은 유효한 Git 저장소 URL이어야 합니다 (예: https://github.com/username/repo)",
-			"duplicateUrl": "이 URL은 이미 목록에 있습니다 (대소문자 및 공백 구분 없이 일치)",
-			"nameTooLong": "이름은 20자 이하여야 합니다",
-			"nonVisibleCharsName": "이름에 공백 이외의 보이지 않는 문자가 포함되어 있습니다",
-			"duplicateName": "이 이름은 이미 사용 중입니다 (대소문자 및 공백 구분 없이 일치)",
-			"maxSources": "최대 {{max}}개의 소스만 허용됩니다"
+			"maxSources": "최대 {{max}}개의 소스가 허용됩니다.",
+			"emptyUrl": "URL을 비워 둘 수 없습니다.",
+			"invalidUrl": "잘못된 URL 형식입니다.",
+			"nonVisibleChars": "URL에 표시되지 않는 문자가 포함되어 있습니다.",
+			"invalidGitUrl": "잘못된 Git URL 형식입니다.",
+			"duplicateUrl": "이 URL이 있는 소스가 이미 있습니다.",
+			"nameTooLong": "이름은 20자를 초과할 수 없습니다.",
+			"nonVisibleCharsName": "이름에 표시되지 않는 문자가 포함되어 있습니다.",
+			"duplicateName": "이 이름의 소스가 이미 있습니다.",
+			"emojiName": "이모티콘 문자는 표시 문제를 일으킬 수 있습니다."
 		}
 	}
 }

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

@@ -0,0 +1,102 @@
+{
+	"title": "Marketplace",
+	"tabs": {
+		"installed": "Geïnstalleerd",
+		"settings": "Instellingen",
+		"browse": "Bladeren",
+		"sources": "Bronnen"
+	},
+	"filters": {
+		"search": {
+			"placeholder": "Zoek marketplace items..."
+		},
+		"type": {
+			"label": "Filter op type:",
+			"all": "Alle types",
+			"mode": "Modus",
+			"mcp server": "MCP Server",
+			"prompt": "Prompt",
+			"package": "Pakket"
+		},
+		"sort": {
+			"label": "Sorteer op:",
+			"name": "Naam",
+			"author": "Auteur",
+			"lastUpdated": "Laatst bijgewerkt"
+		},
+		"tags": {
+			"label": "Filter op tags:",
+			"available": "{{count}} beschikbaar",
+			"placeholder": "Typ om tags te zoeken en selecteren...",
+			"noResults": "Geen overeenkomende tags gevonden",
+			"clickToFilter": "Klik op tags om items te filteren",
+			"clear": "Wis {{count}} geselecteerde tags",
+			"selected": "{{count}} geselecteerde tags"
+		}
+	},
+	"type-group": {
+		"match": "Overeenkomst",
+		"modes": "Modes",
+		"mcps": "MCP Servers",
+		"prompts": "Prompts",
+		"packages": "Pakketten",
+		"generic-type": "{{type}}"
+	},
+	"items": {
+		"empty": {
+			"noItems": "Geen marketplace items gevonden",
+			"withFilters": "Probeer je filters aan te passen",
+			"noSources": "Probeer een bron toe te voegen in het tabblad Bronnen",
+			"adjustFilters": "Probeer je filters of zoektermen aan te passen",
+			"clearAllFilters": "Alle filters wissen"
+		},
+		"count": "{{count}} items gevonden",
+		"components": "{{count}} componenten",
+		"refresh": {
+			"button": "Vernieuwen",
+			"refreshing": "Vernieuwen...",
+			"mayTakeMoment": "Dit kan even duren."
+		},
+		"card": {
+			"by": "door {{author}}",
+			"from": "van {{source}}",
+			"installProject": "Installeren",
+			"installGlobal": "Installeren (Globaal)",
+			"removeProject": "Verwijderen",
+			"removeGlobal": "Verwijderen (Globaal)",
+			"viewSource": "Bekijken",
+			"viewOnSource": "Bekijken op {{source}}"
+		}
+	},
+	"installProjectTooltip": "Projectinstallatie",
+	"sources": {
+		"title": "Marketplace bronnen",
+		"description": "Voeg bronnen voor Marketplace-items toe of beheer ze. Elke bron is een Git-repository die Marketplace-itemdefinities bevat.",
+		"add": {
+			"title": "Nieuwe bron toevoegen",
+			"urlPlaceholder": "Git repository URL (bijv. 'https://github.com/user/repo.git')",
+			"urlFormats": "Ondersteunde formaten: HTTPS, SSH of lokaal bestandspad.",
+			"namePlaceholder": "Optionele bronnaam (bijv. 'Mijn privé-repo')",
+			"button": "Bron toevoegen"
+		},
+		"current": {
+			"title": "Huidige bronnen",
+			"empty": "Nog geen Marketplace-bronnen toegevoegd.",
+			"emptyHint": "Voeg hierboven een bron toe om door Marketplace-items te bladeren.",
+			"refresh": "Bron vernieuwen",
+			"remove": "Bron verwijderen"
+		},
+		"errors": {
+			"maxSources": "Maximaal {{max}} bronnen toegestaan.",
+			"emptyUrl": "URL mag niet leeg zijn.",
+			"invalidUrl": "Ongeldig URL-formaat.",
+			"nonVisibleChars": "URL bevat niet-zichtbare tekens.",
+			"invalidGitUrl": "Ongeldige Git URL-indeling.",
+			"duplicateUrl": "Een bron met deze URL bestaat al.",
+			"nameTooLong": "Naam mag niet langer zijn dan 20 tekens.",
+			"nonVisibleCharsName": "Naam bevat niet-zichtbare tekens.",
+			"duplicateName": "Een bron met deze naam bestaat al.",
+			"emojiName": "Emoji-tekens kunnen weergaveproblemen veroorzaken."
+		}
+	}
+}

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Zainstalowane",
+		"settings": "Ustawienia",
 		"browse": "Przeglądaj",
 		"sources": "Źródła"
 	},
@@ -12,7 +14,7 @@
 			"label": "Filtruj według typu:",
 			"all": "Wszystkie typy",
 			"mode": "Tryb",
-			"mcp": "Serwer MCP",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Pakiet"
 		},
@@ -25,17 +27,17 @@
 		"tags": {
 			"label": "Filtruj według tagów:",
 			"available": "{{count}} dostępnych",
-			"clear": "Wyczyść tagi ({{count}})",
 			"placeholder": "Wpisz, aby wyszukać i wybrać tagi...",
 			"noResults": "Nie znaleziono pasujących tagów",
-			"selected": "Pokazywanie elementów z wybranymi tagami (wybrano {{count}})",
-			"clickToFilter": "Kliknij tagi, aby filtrować elementy"
+			"clickToFilter": "Kliknij tagi, aby filtrować elementy",
+			"clear": "Wyczyść {{count}} wybranych tagów",
+			"selected": "{{count}} wybranych tagów"
 		}
 	},
 	"type-group": {
 		"match": "Dopasowanie",
 		"modes": "Tryby",
-		"mcps": "Serwery MCP",
+		"mcps": "MCP Servers",
 		"prompts": "Prompty",
 		"packages": "Pakiety",
 		"generic-type": "{{type}}"
@@ -44,48 +46,57 @@
 		"empty": {
 			"noItems": "Nie znaleziono elementów marketplace",
 			"withFilters": "Spróbuj dostosować filtry",
-			"noSources": "Spróbuj dodać źródło w zakładce Źródła"
+			"noSources": "Spróbuj dodać źródło w zakładce Źródła",
+			"adjustFilters": "Spróbuj dostosować filtry lub wyszukiwane hasła",
+			"clearAllFilters": "Wyczyść wszystkie filtry"
 		},
 		"count": "Znaleziono {{count}} elementów",
 		"components": "{{count}} komponentów",
 		"refresh": {
 			"button": "Odśwież",
-			"refreshing": "Odświeżanie..."
+			"refreshing": "Odświeżanie...",
+			"mayTakeMoment": "To może chwilę potrwać."
 		},
 		"card": {
 			"by": "autor: {{author}}",
 			"from": "z {{source}}",
+			"installProject": "Zainstaluj",
+			"installGlobal": "Zainstaluj (Globalny)",
+			"removeProject": "Usuń",
+			"removeGlobal": "Usuń (Globalny)",
 			"viewSource": "Zobacz",
 			"viewOnSource": "Zobacz na {{source}}"
 		}
 	},
+	"installProjectTooltip": "Instalacja projektu",
 	"sources": {
-		"title": "Konfiguruj źródła Marketplace",
-		"description": "Dodaj repozytoria Git zawierające elementy marketplace. Te repozytoria będą pobierane podczas przeglądania marketplace.",
+		"title": "Źródła Marketplace",
+		"description": "Dodaj lub zarządzaj źródłami dla elementów Marketplace. Każde źródło to repozytorium Git zawierające definicje elementów Marketplace.",
 		"add": {
 			"title": "Dodaj nowe źródło",
-			"urlPlaceholder": "URL repozytorium Git (np. https://github.com/username/repo)",
-			"urlFormats": "Obsługiwane formaty: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) lub protokół Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nazwa wyświetlana (maks. 20 znaków)",
+			"urlPlaceholder": "URL repozytorium Git (np. 'https://github.com/user/repo.git')",
+			"urlFormats": "Obsługiwane formaty: HTTPS, SSH lub lokalna ścieżka pliku.",
+			"namePlaceholder": "Opcjonalna nazwa źródła (np. 'Moje prywatne repozytorium')",
 			"button": "Dodaj źródło"
 		},
 		"current": {
 			"title": "Obecne źródła",
-			"count": "{{current}}/{{max}} maks.",
-			"empty": "Brak skonfigurowanych źródeł. Dodaj źródło, aby rozpocząć.",
-			"refresh": "Odśwież to źródło",
+			"empty": "Nie dodano jeszcze żadnych źródeł Marketplace.",
+			"emptyHint": "Dodaj źródło powyżej, aby przeglądać elementy Marketplace.",
+			"refresh": "Odśwież źródło",
 			"remove": "Usuń źródło"
 		},
 		"errors": {
-			"emptyUrl": "URL nie może być pusty",
-			"invalidUrl": "Nieprawidłowy format URL",
-			"nonVisibleChars": "URL zawiera niewidoczne znaki inne niż spacje",
-			"invalidGitUrl": "URL musi być prawidłowym URL-em repozytorium Git (np. https://github.com/username/repo)",
-			"duplicateUrl": "Ten URL już znajduje się na liście (dopasowanie niewrażliwe na wielkość liter i spacje)",
-			"nameTooLong": "Nazwa musi mieć 20 znaków lub mniej",
-			"nonVisibleCharsName": "Nazwa zawiera niewidoczne znaki inne niż spacje",
-			"duplicateName": "Ta nazwa jest już używana (dopasowanie niewrażliwe na wielkość liter i spacje)",
-			"maxSources": "Maksymalnie dozwolone {{max}} źródeł"
+			"maxSources": "Dozwolona jest maksymalnie liczba źródeł: {{max}}.",
+			"emptyUrl": "Adres URL nie może być pusty.",
+			"invalidUrl": "Nieprawidłowy format adresu URL.",
+			"nonVisibleChars": "Adres URL zawiera niewidoczne znaki.",
+			"invalidGitUrl": "Nieprawidłowy format adresu URL Git.",
+			"duplicateUrl": "Źródło o tym adresie URL już istnieje.",
+			"nameTooLong": "Nazwa nie może przekraczać 20 znaków.",
+			"nonVisibleCharsName": "Nazwa zawiera niewidoczne znaki.",
+			"duplicateName": "Źródło o tej nazwie już istnieje.",
+			"emojiName": "Znaki emoji mogą powodować problemy z wyświetlaniem."
 		}
 	}
 }

webview-ui/src/i18n/locales/pt-BR/marketplace.json

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Instalado",
+		"settings": "Configurações",
 		"browse": "Explorar",
 		"sources": "Fontes"
 	},
@@ -12,7 +14,7 @@
 			"label": "Filtrar por tipo:",
 			"all": "Todos os tipos",
 			"mode": "Modo",
-			"mcp": "Servidor MCP",
+			"mcp server": "Servidor MCP",
 			"prompt": "Prompt",
 			"package": "Pacote"
 		},
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "Nenhum item encontrado no marketplace",
 			"withFilters": "Tente ajustar os filtros",
-			"noSources": "Tente adicionar uma fonte na aba Fontes"
+			"noSources": "Tente adicionar uma fonte na aba Fontes",
+			"adjustFilters": "Tente ajustar seus filtros ou termos de pesquisa",
+			"clearAllFilters": "Limpar todos os filtros"
 		},
 		"count": "{{count}} itens encontrados",
 		"components": "{{count}} componentes",
 		"refresh": {
 			"button": "Atualizar",
-			"refreshing": "Atualizando..."
+			"refreshing": "Atualizando...",
+			"mayTakeMoment": "Isso pode levar um momento."
 		},
 		"card": {
 			"by": "por {{author}}",
 			"from": "de {{source}}",
+			"installProject": "Instalar",
+			"installGlobal": "Instalar (Global)",
+			"removeProject": "Remover",
+			"removeGlobal": "Remover (Global)",
 			"viewSource": "Ver",
-			"viewOnSource": "Ver no {{source}}"
+			"viewOnSource": "Ver no {{source}}",
+			"installProjectTooltip": "Instalação do projeto"
 		}
 	},
 	"sources": {
-		"title": "Configurar Fontes do Marketplace",
-		"description": "Adicione repositórios Git que contenham itens do marketplace. Estes repositórios serão buscados ao navegar pelo marketplace.",
+		"title": "Fontes do Marketplace",
+		"description": "Adicione ou gerencie fontes para os itens do Marketplace. Cada fonte é um repositório Git que contém definições de itens do Marketplace.",
 		"add": {
 			"title": "Adicionar Nova Fonte",
-			"urlPlaceholder": "URL do repositório Git (ex., https://github.com/username/repo)",
-			"urlFormats": "Formatos suportados: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) ou protocolo Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Nome de exibição (máx. 20 caracteres)",
+			"urlPlaceholder": "URL do repositório Git (ex., 'https://github.com/user/repo.git')",
+			"urlFormats": "Formatos suportados: HTTPS, SSH ou caminho de arquivo local.",
+			"namePlaceholder": "Nome de fonte opcional (ex., 'Meu repositório particular')",
 			"button": "Adicionar Fonte"
 		},
 		"current": {
 			"title": "Fontes Atuais",
-			"count": "{{current}}/{{max}} máx.",
-			"empty": "Nenhuma fonte configurada. Adicione uma fonte para começar.",
-			"refresh": "Atualizar esta fonte",
+			"empty": "Nenhuma fonte do Marketplace adicionada ainda.",
+			"emptyHint": "Adicione uma fonte acima para procurar itens do Marketplace.",
+			"refresh": "Atualizar fonte",
 			"remove": "Remover fonte"
 		},
 		"errors": {
-			"emptyUrl": "A URL não pode estar vazia",
-			"invalidUrl": "Formato de URL inválido",
-			"nonVisibleChars": "A URL contém caracteres não visíveis além de espaços",
-			"invalidGitUrl": "A URL deve ser uma URL válida de repositório Git (ex., https://github.com/username/repo)",
-			"duplicateUrl": "Esta URL já está na lista (correspondência insensível a maiúsculas/minúsculas e espaços)",
-			"nameTooLong": "O nome deve ter 20 caracteres ou menos",
-			"nonVisibleCharsName": "O nome contém caracteres não visíveis além de espaços",
-			"duplicateName": "Este nome já está em uso (correspondência insensível a maiúsculas/minúsculas e espaços)",
-			"maxSources": "Máximo de {{max}} fontes permitidas"
+			"maxSources": "Máximo de {{max}} fontes permitidas.",
+			"emptyUrl": "A URL não pode estar vazia.",
+			"nonVisibleChars": "A URL contém caracteres não visíveis.",
+			"invalidGitUrl": "Formato de URL Git inválido.",
+			"duplicateUrl": "Já existe uma fonte com este URL.",
+			"nameTooLong": "O nome não pode exceder 20 caracteres.",
+			"nonVisibleCharsName": "O nome contém caracteres não visíveis.",
+			"duplicateName": "Já existe uma fonte com este nome.",
+			"emojiName": "Caracteres emoji podem causar problemas de exibição."
 		}
 	}
 }

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

@@ -0,0 +1,101 @@
+{
+	"title": "Marketplace",
+	"tabs": {
+		"installed": "Установлено",
+		"settings": "Настройки",
+		"browse": "Обзор",
+		"sources": "Источники"
+	},
+	"filters": {
+		"search": {
+			"placeholder": "Поиск элементов marketplace..."
+		},
+		"type": {
+			"label": "Фильтр по типу:",
+			"all": "Все типы",
+			"mode": "Режим",
+			"mcp server": "MCP Server",
+			"prompt": "Prompt",
+			"package": "Пакет"
+		},
+		"sort": {
+			"label": "Сортировать по:",
+			"name": "Имя",
+			"author": "Автор",
+			"lastUpdated": "Последнее обновление"
+		},
+		"tags": {
+			"label": "Фильтр по тегам:",
+			"available": "{{count}} доступно",
+			"clear": "Очистить теги ({{count}})",
+			"placeholder": "Введите для поиска и выбора тегов...",
+			"noResults": "Совпадающие теги не найдены",
+			"selected": "Показаны элементы с любым из выбранных тегов ({{count}} выбрано)",
+			"clickToFilter": "Щелкните теги для фильтрации элементов"
+		}
+	},
+	"type-group": {
+		"match": "Совпадение",
+		"modes": "Режимы",
+		"mcps": "MCP Servers",
+		"prompts": "Prompts",
+		"packages": "Пакеты",
+		"generic-type": "{{type}}"
+	},
+	"items": {
+		"empty": {
+			"noItems": "Элементы marketplace не найдены",
+			"withFilters": "Попробуйте настроить фильтры",
+			"noSources": "Попробуйте добавить источник на вкладке «Источники»",
+			"adjustFilters": "Попробуйте настроить фильтры или условия поиска",
+			"clearAllFilters": "Очистить все фильтры"
+		},
+		"count": "{{count}} элементов найдено",
+		"components": "{{count}} компонентов",
+		"refresh": {
+			"button": "Обновить",
+			"refreshing": "Обновление...",
+			"mayTakeMoment": "Это может занять некоторое время."
+		},
+		"card": {
+			"by": "от {{author}}",
+			"from": "из {{source}}",
+			"installProject": "Установить",
+			"installGlobal": "Установить (Глобально)",
+			"removeProject": "Удалить",
+			"removeGlobal": "Удалить (Глобально)",
+			"viewSource": "Просмотреть",
+			"viewOnSource": "Просмотреть на {{source}}",
+			"installProjectTooltip": "Установка проекта"
+		}
+	},
+	"sources": {
+		"title": "Источники Marketplace",
+		"description": "Добавьте или управляйте источниками для элементов Marketplace. Каждый источник — это репозиторий Git, содержащий определения элементов Marketplace.",
+		"add": {
+			"title": "Добавить новый источник",
+			"urlPlaceholder": "URL-адрес репозитория Git (например, 'https://github.com/user/repo.git')",
+			"urlFormats": "Поддерживаемые форматы: HTTPS, SSH или локальный файловый путь.",
+			"namePlaceholder": "Необязательное имя источника (например, «Мой частный репозиторий»)",
+			"button": "Добавить источник"
+		},
+		"current": {
+			"title": "Текущие источники",
+			"empty": "Пока не добавлено ни одного источника Marketplace.",
+			"emptyHint": "Добавьте источник выше, чтобы просмотреть элементы Marketplace.",
+			"refresh": "Обновить источник",
+			"remove": "Удалить источник"
+		},
+		"errors": {
+			"maxSources": "Разрешено не более {{max}} источников.",
+			"emptyUrl": "URL-адрес не может быть пустым.",
+			"nonVisibleChars": "URL-адрес содержит невидимые символы.",
+			"invalidGitUrl": "Недопустимый формат URL-адреса Git.",
+			"duplicateUrl": "Источник с этим URL-адресом уже существует.",
+			"nameTooLong": "Имя не может превышать 20 символов.",
+			"nonVisibleCharsName": "Имя содержит невидимые символы.",
+			"duplicateName": "Источник с этим именем уже существует.",
+			"emojiName": "Символы эмодзи могут вызвать проблемы с отображением."
+		}
+	}
+}

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Yüklendi",
+		"settings": "Ayarlar",
 		"browse": "Göz At",
 		"sources": "Kaynaklar"
 	},
@@ -12,7 +14,7 @@
 			"label": "Türe göre filtrele:",
 			"all": "Tüm türler",
 			"mode": "Mod",
-			"mcp": "MCP Sunucusu",
+			"mcp server": "MCP Server",
 			"prompt": "Prompt",
 			"package": "Paket"
 		},
@@ -25,18 +27,18 @@
 		"tags": {
 			"label": "Etiketlere göre filtrele:",
 			"available": "{{count}} mevcut",
-			"clear": "Etiketleri temizle ({{count}})",
+			"clear": "{{count}} seçili etiketi temizle",
 			"placeholder": "Etiket aramak ve seçmek için yazın...",
 			"noResults": "Eşleşen etiket bulunamadı",
-			"selected": "Seçili etiketlerden herhangi birine sahip öğeler gösteriliyor ({{count}} seçili)",
+			"selected": "{{count}} seçili etiket",
 			"clickToFilter": "Öğeleri filtrelemek için etiketlere tıklayın"
 		}
 	},
 	"type-group": {
 		"match": "Eşleşme",
 		"modes": "Modlar",
-		"mcps": "MCP Sunucuları",
-		"prompts": "Promptlar",
+		"mcps": "MCP Servers",
+		"prompts": "Prompts",
 		"packages": "Paketler",
 		"generic-type": "{{type}}"
 	},
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "Marketplace öğesi bulunamadı",
 			"withFilters": "Filtreleri ayarlamayı deneyin",
-			"noSources": "Kaynaklar sekmesinde bir kaynak eklemeyi deneyin"
+			"noSources": "Kaynaklar sekmesinde bir kaynak eklemeyi deneyin",
+			"adjustFilters": "Filtrelerinizi veya arama terimlerinizi ayarlamayı deneyin",
+			"clearAllFilters": "Tüm filtreleri temizle"
 		},
 		"count": "{{count}} öğe bulundu",
 		"components": "{{count}} bileşen",
 		"refresh": {
 			"button": "Yenile",
-			"refreshing": "Yenileniyor..."
+			"refreshing": "Yenileniyor...",
+			"mayTakeMoment": "Bu biraz zaman alabilir."
 		},
 		"card": {
 			"by": "yazar: {{author}}",
 			"from": "kaynak: {{source}}",
+			"installProject": "Yükle",
+			"installGlobal": "Yükle (Global)",
+			"removeProject": "Kaldır",
+			"removeGlobal": "Kaldır (Global)",
 			"viewSource": "Görüntüle",
-			"viewOnSource": "{{source}} üzerinde görüntüle"
+			"viewOnSource": "{{source}} üzerinde görüntüle",
+			"installProjectTooltip": "Proje kurulumu"
 		}
 	},
 	"sources": {
-		"title": "Marketplace Kaynaklarını Yapılandır",
-		"description": "Marketplace öğeleri içeren Git depolarını ekleyin. Bu depolar marketplace'de gezinirken getirilecektir.",
+		"title": "Marketplace Kaynakları",
+		"description": "Marketplace öğeleri için kaynak ekleyin veya yönetin. Her kaynak, Marketplace öğe tanımlarını içeren bir Git deposudur.",
 		"add": {
 			"title": "Yeni Kaynak Ekle",
-			"urlPlaceholder": "Git deposu URL'si (örn., https://github.com/username/repo)",
-			"urlFormats": "Desteklenen formatlar: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) veya Git protokolü (git://github.com/username/repo.git)",
-			"namePlaceholder": "Görünen ad (maks. 20 karakter)",
+			"urlPlaceholder": "Git deposu URL'si (örn. 'https://github.com/user/repo.git')",
+			"urlFormats": "Desteklenen biçimler: HTTPS, SSH veya yerel dosya yolu.",
+			"namePlaceholder": "İsteğe bağlı kaynak adı (örn. 'Özel Depom')",
 			"button": "Kaynak Ekle"
 		},
 		"current": {
 			"title": "Mevcut Kaynaklar",
-			"count": "{{current}}/{{max}} maks.",
-			"empty": "Yapılandırılmış kaynak yok. Başlamak için bir kaynak ekleyin.",
-			"refresh": "Bu kaynağı yenile",
+			"empty": "Henüz Marketplace kaynağı eklenmedi.",
+			"emptyHint": "Marketplace öğelerine göz atmak için yukarıda bir kaynak ekleyin.",
+			"refresh": "Kaynağı yenile",
 			"remove": "Kaynağı kaldır"
 		},
 		"errors": {
-			"emptyUrl": "URL boş olamaz",
-			"invalidUrl": "Geçersiz URL formatı",
-			"nonVisibleChars": "URL boşluk dışında görünmeyen karakterler içeriyor",
-			"invalidGitUrl": "URL geçerli bir Git deposu URL'si olmalıdır (örn., https://github.com/username/repo)",
+			"maxSources": "Maksimum {{max}} kaynağa izin verilir.",
+			"emptyUrl": "URL boş olamaz.",
+			"nonVisibleChars": "URL görünmeyen karakterler içeriyor.",
+			"invalidGitUrl": "Geçersiz Git URL biçimi.",
 			"duplicateUrl": "Bu URL zaten listede (büyük/küçük harf ve boşluk duyarsız eşleşme)",
-			"nameTooLong": "İsim 20 karakter veya daha az olmalıdır",
-			"nonVisibleCharsName": "İsim boşluk dışında görünmeyen karakterler içeriyor",
-			"duplicateName": "Bu isim zaten kullanımda (büyük/küçük harf ve boşluk duyarsız eşleşme)",
-			"maxSources": "Maksimum {{max}} kaynak izin veriliyor"
+			"nameTooLong": "İsim 20 karakteri geçemez.",
+			"nonVisibleCharsName": "Ad görünmeyen karakterler içeriyor.",
+			"duplicateName": "Bu ada sahip bir kaynak zaten var.",
+			"emojiName": "Emoji karakterleri görüntüleme sorunlarına neden olabilir."
 		}
 	}
 }

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

@@ -1,6 +1,8 @@
 {
 	"title": "Marketplace",
 	"tabs": {
+		"installed": "Đã cài đặt",
+		"settings": "Cài đặt",
 		"browse": "Duyệt",
 		"sources": "Nguồn"
 	},
@@ -12,7 +14,7 @@
 			"label": "Lọc theo loại:",
 			"all": "Tất cả các loại",
 			"mode": "Chế độ",
-			"mcp": "Máy chủ MCP",
+			"mcp server": "Máy chủ MCP",
 			"prompt": "Prompt",
 			"package": "Gói"
 		},
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "Không tìm thấy mục marketplace nào",
 			"withFilters": "Thử điều chỉnh bộ lọc",
-			"noSources": "Thử thêm nguồn trong tab Nguồn"
+			"noSources": "Thử thêm nguồn trong tab Nguồn",
+			"adjustFilters": "Thử điều chỉnh bộ lọc hoặc cụm từ tìm kiếm của bạn",
+			"clearAllFilters": "Xóa tất cả bộ lọc"
 		},
 		"count": "Tìm thấy {{count}} mục",
 		"components": "{{count}} thành phần",
 		"refresh": {
 			"button": "Làm mới",
-			"refreshing": "Đang làm mới..."
+			"refreshing": "Đang làm mới...",
+			"mayTakeMoment": "Việc này có thể mất một chút thời gian."
 		},
 		"card": {
 			"by": "bởi {{author}}",
 			"from": "từ {{source}}",
+			"installProject": "Cài đặt",
+			"installGlobal": "Cài đặt (Toàn cục)",
+			"removeProject": "Gỡ cài đặt",
+			"removeGlobal": "Gỡ cài đặt (Toàn cục)",
 			"viewSource": "Xem",
-			"viewOnSource": "Xem trên {{source}}"
+			"viewOnSource": "Xem trên {{source}}",
+			"installProjectTooltip": "Cài đặt dự án"
 		}
 	},
 	"sources": {
-		"title": "Cấu hình Nguồn Marketplace",
-		"description": "Thêm kho Git chứa các mục marketplace. Các kho này sẽ được tải khi duyệt marketplace.",
+		"title": "Nguồn Marketplace",
+		"description": "Thêm hoặc quản lý nguồn cho các mục Marketplace. Mỗi nguồn là một kho Git chứa các định nghĩa mục Marketplace.",
 		"add": {
 			"title": "Thêm Nguồn Mới",
-			"urlPlaceholder": "URL kho Git (ví dụ: https://github.com/username/repo)",
-			"urlFormats": "Định dạng được hỗ trợ: HTTPS (https://github.com/username/repo), SSH (git@github.com:username/repo.git) hoặc giao thức Git (git://github.com/username/repo.git)",
-			"namePlaceholder": "Tên hiển thị (tối đa 20 ký tự)",
+			"urlPlaceholder": "URL kho Git (ví dụ: 'https://github.com/user/repo.git')",
+			"urlFormats": "Định dạng được hỗ trợ: HTTPS, SSH hoặc đường dẫn tệp cục bộ.",
+			"namePlaceholder": "Tên nguồn tùy chọn (ví dụ: 'Kho riêng của tôi')",
 			"button": "Thêm Nguồn"
 		},
 		"current": {
 			"title": "Nguồn Hiện Tại",
-			"count": "{{current}}/{{max}} tối đa",
-			"empty": "Chưa có nguồn nào được cấu hình. Thêm một nguồn để bắt đầu.",
-			"refresh": "Làm mới nguồn này",
+			"empty": "Chưa có nguồn Marketplace nào được thêm.",
+			"emptyHint": "Thêm một nguồn ở trên để duyệt các mục Marketplace.",
+			"refresh": "Làm mới nguồn",
 			"remove": "Xóa nguồn"
 		},
 		"errors": {
-			"emptyUrl": "URL không được để trống",
-			"invalidUrl": "Định dạng URL không hợp lệ",
-			"nonVisibleChars": "URL chứa ký tự không nhìn thấy ngoài dấu cách",
-			"invalidGitUrl": "URL phải là URL kho Git hợp lệ (ví dụ: https://github.com/username/repo)",
-			"duplicateUrl": "URL này đã có trong danh sách (khớp không phân biệt chữ hoa/thường và dấu cách)",
-			"nameTooLong": "Tên phải có 20 ký tự trở xuống",
-			"nonVisibleCharsName": "Tên chứa ký tự không nhìn thấy ngoài dấu cách",
-			"duplicateName": "Tên này đã được sử dụng (khớp không phân biệt chữ hoa/thường và dấu cách)",
-			"maxSources": "Cho phép tối đa {{max}} nguồn"
+			"maxSources": "Cho phép tối đa {{max}} nguồn.",
+			"emptyUrl": "Không được để trống URL.",
+			"nonVisibleChars": "URL chứa các ký tự không hiển thị.",
+			"invalidGitUrl": "Định dạng URL Git không hợp lệ.",
+			"duplicateUrl": "Đã có một nguồn có URL này.",
+			"nameTooLong": "Tên không được dài hơn 20 ký tự.",
+			"nonVisibleCharsName": "Tên chứa các ký tự không hiển thị.",
+			"duplicateName": "Đã có một nguồn có tên này.",
+			"emojiName": "Ký tự biểu tượng cảm xúc có thể gây ra sự cố hiển thị."
 		}
 	}
 }

webview-ui/src/i18n/locales/zh-CN/marketplace.json

@@ -1,6 +1,8 @@
 {
 	"title": "市场",
 	"tabs": {
+		"installed": "已安装",
+		"settings": "设置",
 		"browse": "浏览",
 		"sources": "来源"
 	},
@@ -12,7 +14,7 @@
 			"label": "按类型筛选：",
 			"all": "所有类型",
 			"mode": "模式",
-			"mcp": "MCP 服务器",
+			"mcp server": "MCP 服务器",
 			"prompt": "提示",
 			"package": "包"
 		},
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "未找到市场项目",
 			"withFilters": "尝试调整筛选条件",
-			"noSources": "尝试在来源标签页中添加来源"
+			"noSources": "尝试在来源标签页中添加来源",
+			"adjustFilters": "尝试调整你的筛选器或搜索词",
+			"clearAllFilters": "清除所有筛选器"
 		},
 		"count": "找到 {{count}} 个项目",
 		"components": "{{count}} 个组件",
 		"refresh": {
 			"button": "刷新",
-			"refreshing": "正在刷新..."
+			"refreshing": "正在刷新...",
+			"mayTakeMoment": "这可能需要一些时间。"
 		},
 		"card": {
 			"by": "作者：{{author}}",
 			"from": "来自：{{source}}",
+			"installProject": "安装",
+			"installGlobal": "安装（全局）",
+			"removeProject": "移除（项目）",
+			"removeGlobal": "移除（全局）",
 			"viewSource": "查看",
-			"viewOnSource": "在 {{source}} 上查看"
+			"viewOnSource": "在 {{source}} 上查看",
+			"installProjectTooltip": "项目安装"
 		}
 	},
 	"sources": {
-		"title": "配置市场来源",
-		"description": "添加包含市场项目的 Git 仓库。浏览市场时将获取这些仓库。",
+		"title": "市场来源",
+		"description": "添加或管理 Marketplace 项目的来源。每个来源都是包含 Marketplace 项目定义的 Git 存储库。",
 		"add": {
 			"title": "添加新来源",
-			"urlPlaceholder": "Git 仓库 URL（例如：https://github.com/username/repo）",
-			"urlFormats": "支持的格式：HTTPS (https://github.com/username/repo)、SSH (git@github.com:username/repo.git) 或 Git 协议 (git://github.com/username/repo.git)",
-			"namePlaceholder": "显示名称（最多 20 个字符）",
+			"urlPlaceholder": "Git 仓库 URL（例如“https://github.com/user/repo.git”)",
+			"urlFormats": "支持的格式：HTTPS、SSH 或本地文件路径。",
+			"namePlaceholder": "可选来源名称（例如“我的私有仓库”）",
 			"button": "添加来源"
 		},
 		"current": {
 			"title": "当前来源",
-			"count": "{{current}}/{{max}} 个上限",
-			"empty": "未配置来源。添加一个来源以开始。",
-			"refresh": "刷新此来源",
+			"empty": "尚未添加任何 Marketplace 来源。",
+			"emptyHint": "在上方添加一个来源以浏览 Marketplace 项目。",
+			"refresh": "刷新来源",
 			"remove": "移除来源"
 		},
 		"errors": {
-			"emptyUrl": "URL 不能为空",
-			"invalidUrl": "无效的 URL 格式",
-			"nonVisibleChars": "URL 包含空格以外的不可见字符",
-			"invalidGitUrl": "URL 必须是有效的 Git 仓库 URL（例如：https://github.com/username/repo）",
-			"duplicateUrl": "此 URL 已在列表中（不区分大小写和空格的匹配）",
-			"nameTooLong": "名称必须不超过 20 个字符",
-			"nonVisibleCharsName": "名称包含空格以外的不可见字符",
-			"duplicateName": "此名称已被使用（不区分大小写和空格的匹配）",
-			"maxSources": "最多允许 {{max}} 个来源"
+			"maxSources": "最多允许 {{max}} 个来源。",
+			"emptyUrl": "URL 不能为空。",
+			"nonVisibleChars": "URL 包含不可见字符。",
+			"invalidGitUrl": "无效的 Git URL 格式。",
+			"duplicateUrl": "具有此 URL 的来源已存在。",
+			"nameTooLong": "名称不得超过 20 个字符。",
+			"nonVisibleCharsName": "名称包含不可见字符。",
+			"duplicateName": "具有此名称的来源已存在。",
+			"emojiName": "表情符号可能导致显示问题。"
 		}
 	}
 }

webview-ui/src/i18n/locales/zh-TW/marketplace.json

@@ -1,6 +1,8 @@
 {
 	"title": "市集",
 	"tabs": {
+		"installed": "已安裝",
+		"settings": "設定",
 		"browse": "瀏覽",
 		"sources": "來源"
 	},
@@ -12,7 +14,7 @@
 			"label": "依類型篩選：",
 			"all": "所有類型",
 			"mode": "模式",
-			"mcp": "MCP 伺服器",
+			"mcp server": "MCP 伺服器",
 			"prompt": "提示",
 			"package": "套件"
 		},
@@ -44,48 +46,56 @@
 		"empty": {
 			"noItems": "未找到市集項目",
 			"withFilters": "嘗試調整篩選條件",
-			"noSources": "嘗試在來源分頁中新增來源"
+			"noSources": "嘗試在來源分頁中新增來源",
+			"adjustFilters": "嘗試調整你的篩選器或搜尋詞",
+			"clearAllFilters": "清除所有篩選器"
 		},
 		"count": "找到 {{count}} 個項目",
 		"components": "{{count}} 個元件",
 		"refresh": {
 			"button": "重新整理",
-			"refreshing": "重新整理中..."
+			"refreshing": "重新整理中...",
+			"mayTakeMoment": "這可能需要一些時間。"
 		},
 		"card": {
 			"by": "作者：{{author}}",
 			"from": "來自：{{source}}",
+			"installProject": "安裝",
+			"installGlobal": "安裝 (全域)",
+			"removeProject": "移除",
+			"removeGlobal": "移除 (全域)",
 			"viewSource": "檢視",
-			"viewOnSource": "在 {{source}} 上檢視"
+			"viewOnSource": "在 {{source}} 上檢視",
+			"installProjectTooltip": "專案安裝"
 		}
 	},
 	"sources": {
-		"title": "設定市集來源",
-		"description": "新增包含市集項目的 Git 儲存庫。瀏覽市集時將擷取這些儲存庫。",
+		"title": "市集來源",
+		"description": "新增或管理 Marketplace 項目的來源。每個來源都是包含 Marketplace 項目定義的 Git 儲存庫。",
 		"add": {
 			"title": "新增來源",
-			"urlPlaceholder": "Git 儲存庫 URL（例如：https://github.com/username/repo）",
-			"urlFormats": "支援的格式：HTTPS (https://github.com/username/repo)、SSH (git@github.com:username/repo.git) 或 Git 協定 (git://github.com/username/repo.git)",
-			"namePlaceholder": "顯示名稱（最多 20 個字元）",
+			"urlPlaceholder": "Git 儲存庫 URL (例如：「https://github.com/user/repo.git」)",
+			"urlFormats": "支援的格式：HTTPS、SSH 或本機檔案路徑。",
+			"namePlaceholder": "選用來源名稱 (例如：「我的私有儲存庫」)",
 			"button": "新增來源"
 		},
 		"current": {
 			"title": "目前來源",
-			"count": "{{current}}/{{max}} 個上限",
-			"empty": "未設定來源。新增一個來源以開始。",
-			"refresh": "重新整理此來源",
+			"empty": "尚未新增任何 Marketplace 來源。",
+			"emptyHint": "在上方新增一個來源以瀏覽 Marketplace 項目。",
+			"refresh": "重新整理來源",
 			"remove": "移除來源"
 		},
 		"errors": {
-			"emptyUrl": "URL 不能為空",
-			"invalidUrl": "無效的 URL 格式",
-			"nonVisibleChars": "URL 包含空格以外的不可見字元",
-			"invalidGitUrl": "URL 必須是有效的 Git 儲存庫 URL（例如：https://github.com/username/repo）",
-			"duplicateUrl": "此 URL 已在清單中（不區分大小寫和空格的符合）",
-			"nameTooLong": "名稱必須不超過 20 個字元",
-			"nonVisibleCharsName": "名稱包含空格以外的不可見字元",
-			"duplicateName": "此名稱已被使用（不區分大小寫和空格的符合）",
-			"maxSources": "最多允許 {{max}} 個來源"
+			"maxSources": "最多允許 {{max}} 個來源。",
+			"emptyUrl": "URL 不能為空。",
+			"nonVisibleChars": "URL 包含不可見字元。",
+			"invalidGitUrl": "無效的 Git URL 格式。",
+			"duplicateUrl": "具有此 URL 的來源已存在。",
+			"nameTooLong": "名稱不得超過 20 個字元。",
+			"nonVisibleCharsName": "名稱包含不可見字元。",
+			"duplicateName": "具有此名稱的來源已存在。",
+			"emojiName": "表情符號可能會導致顯示問題。"
 		}
 	}
 }