Remove problematic debounce logic

Author: Smartsheet-JB-Brown

src/services/package-manager/PackageManagerManager.ts

@@ -344,33 +344,47 @@ export class PackageManagerManager {
 
 		// Apply filters
 		const filteredItems = clonedItems.filter((item) => {
-			// Check if item itself matches type filter
-			const itemTypeMatch = !filters.type || item.type === filters.type
-
-			// Check if any subcomponents match type filter
-			const subcomponentTypeMatch =
-				item.items?.some((subItem) => !filters.type || subItem.type === filters.type) ?? false
-
-			// Type filter - include if item or any subcomponent matches
-			if (filters.type && !itemTypeMatch && !subcomponentTypeMatch) {
-				return false
+			// Check parent item matches
+			const itemMatches = {
+				type: !filters.type || item.type === filters.type,
+				search: !searchTerm || containsSearchTerm(item.name) || containsSearchTerm(item.description),
+				tags: !filters.tags?.length || (item.tags && filters.tags.some((tag) => item.tags!.includes(tag))),
 			}
 
-			// Search filter
-			if (searchTerm) {
-				const nameMatch = containsSearchTerm(item.name)
-				const descMatch = containsSearchTerm(item.description)
-				const subcomponentMatch =
-					item.items?.some(
-						(subItem) =>
-							subItem.metadata &&
-							(containsSearchTerm(subItem.metadata.name) ||
-								containsSearchTerm(subItem.metadata.description)),
-					) ?? false
-				return nameMatch || descMatch || subcomponentMatch
-			}
+			// Check subcomponent matches
+			const subcomponentMatches =
+				item.items?.some((subItem) => {
+					const subMatches = {
+						type: !filters.type || subItem.type === filters.type,
+						search:
+							!searchTerm ||
+							(subItem.metadata &&
+								(containsSearchTerm(subItem.metadata.name) ||
+									containsSearchTerm(subItem.metadata.description))),
+						tags:
+							!filters.tags?.length ||
+							(subItem.metadata?.tags &&
+								filters.tags.some((tag) => subItem.metadata!.tags!.includes(tag))),
+					}
 
-			return true
+					// When filtering by type, require exact type match
+					// For other filters (search/tags), any match is sufficient
+					return (
+						subMatches.type &&
+						(!searchTerm || subMatches.search) &&
+						(!filters.tags?.length || subMatches.tags)
+					)
+				}) ?? false
+
+			// Include item if either:
+			// 1. Parent matches all active filters, or
+			// 2. Parent is a package and any subcomponent matches any active filter
+			const hasActiveFilters = filters.type || searchTerm || filters.tags?.length
+			if (!hasActiveFilters) return true
+
+			const parentMatchesAll = itemMatches.type && itemMatches.search && itemMatches.tags
+			const isPackageWithMatchingSubcomponent = item.type === "package" && subcomponentMatches
+			return parentMatchesAll || isPackageWithMatchingSubcomponent
 		})
 
 		console.log("Filtered items:", {
@@ -380,40 +394,45 @@ export class PackageManagerManager {
 		})
 		// Add match info to filtered items
 		return filteredItems.map((item) => {
-			const nameMatch = searchTerm ? containsSearchTerm(item.name) : true
-			const descMatch = searchTerm ? containsSearchTerm(item.description) : true
-			const typeMatch = filters.type ? item.type === filters.type : true
+			// Calculate parent item matches
+			const itemMatches = {
+				type: !filters.type || item.type === filters.type,
+				search: !searchTerm || containsSearchTerm(item.name) || containsSearchTerm(item.description),
+				tags: !filters.tags?.length || (item.tags && filters.tags.some((tag) => item.tags!.includes(tag))),
+			}
 
-			// Process subcomponents first to determine if any match
+			// Process subcomponents
 			let hasMatchingSubcomponents = false
 			if (item.items) {
 				item.items = item.items.map((subItem) => {
-					// Calculate matches
-					const subNameMatch =
-						searchTerm && subItem.metadata ? containsSearchTerm(subItem.metadata.name) : true
-					const subDescMatch =
-						searchTerm && subItem.metadata ? containsSearchTerm(subItem.metadata.description) : true
-
-					// Only calculate type match if type filter is active
-					const subTypeMatch = filters.type ? subItem.type === filters.type : false
+					// Calculate individual filter matches for subcomponent
+					const subMatches = {
+						type: !filters.type || subItem.type === filters.type,
+						search:
+							!searchTerm ||
+							(subItem.metadata &&
+								(containsSearchTerm(subItem.metadata.name) ||
+									containsSearchTerm(subItem.metadata.description))),
+						tags:
+							!filters.tags?.length ||
+							(subItem.metadata?.tags &&
+								filters.tags.some((tag) => subItem.metadata!.tags!.includes(tag))),
+					}
 
-					// Determine if item matches based on active filters
-					const subMatched = filters.type
-						? subNameMatch || subDescMatch || subTypeMatch
-						: subNameMatch || subDescMatch
+					// A subcomponent matches if it matches all active filters
+					const subMatched = subMatches.type && subMatches.search && subMatches.tags
 
 					if (subMatched) {
 						hasMatchingSubcomponents = true
-
-						// Only include matchReason if the item matches
+						// Build match reason for matched subcomponent
 						const matchReason: Record<string, boolean> = {
-							nameMatch: subNameMatch,
-							descriptionMatch: subDescMatch,
-						}
-
-						// Only include type match in reason if type filter is active
-						if (filters.type) {
-							matchReason.typeMatch = subTypeMatch
+							...(searchTerm && {
+								nameMatch: !!subItem.metadata && containsSearchTerm(subItem.metadata.name),
+								descriptionMatch:
+									!!subItem.metadata && containsSearchTerm(subItem.metadata.description),
+							}),
+							...(filters.type && { typeMatch: subMatches.type }),
+							...(filters.tags?.length && { tagMatch: !!subMatches.tags }),
 						}
 
 						subItem.matchInfo = {
@@ -430,21 +449,34 @@ export class PackageManagerManager {
 				})
 			}
 
+			// Build match reason for parent item
 			const matchReason: Record<string, boolean> = {
-				nameMatch,
-				descriptionMatch: descMatch,
+				nameMatch: searchTerm ? containsSearchTerm(item.name) : true,
+				descriptionMatch: searchTerm ? containsSearchTerm(item.description) : true,
 			}
 
-			// Only include typeMatch and hasMatchingSubcomponents in matchReason if relevant
 			if (filters.type) {
-				matchReason.typeMatch = typeMatch
+				matchReason.typeMatch = itemMatches.type
+			}
+			if (filters.tags?.length) {
+				matchReason.tagMatch = !!itemMatches.tags
 			}
 			if (hasMatchingSubcomponents) {
 				matchReason.hasMatchingSubcomponents = true
 			}
 
+			// Parent item is matched if:
+			// 1. It matches all active filters directly, or
+			// 2. It's a package and has any matching subcomponents
+			const parentMatchesAll =
+				(!filters.type || itemMatches.type) &&
+				(!searchTerm || itemMatches.search) &&
+				(!filters.tags?.length || itemMatches.tags)
+
+			const isPackageWithMatchingSubcomponent = item.type === "package" && hasMatchingSubcomponents
+
 			item.matchInfo = {
-				matched: nameMatch || descMatch || typeMatch || hasMatchingSubcomponents,
+				matched: parentMatchesAll || isPackageWithMatchingSubcomponent,
 				matchReason,
 			}
 

src/services/package-manager/__tests__/PackageManagerManager.test.ts

@@ -131,6 +131,80 @@ describe("PackageManagerManager", () => {
 	describe("Type Filter Behavior", () => {
 		let typeFilterTestItems: PackageManagerItem[]
 
+		test("should include package with MCP server subcomponent when filtering by type 'mcp server'", () => {
+			const items: PackageManagerItem[] = [
+				{
+					name: "Data Platform Package",
+					description: "A package containing MCP servers",
+					type: "package" as ComponentType,
+					url: "test/package",
+					repoUrl: "https://example.com",
+					items: [
+						{
+							type: "mcp server" as ComponentType,
+							path: "test/server",
+							metadata: {
+								name: "Data Validator",
+								description: "An MCP server",
+								version: "1.0.0",
+								type: "mcp server" as ComponentType,
+							},
+						},
+					],
+				},
+				{
+					name: "Standalone Server",
+					description: "A standalone MCP server",
+					type: "mcp server" as ComponentType,
+					url: "test/server",
+					repoUrl: "https://example.com",
+				},
+			]
+
+			const filtered = manager.filterItems(items, { type: "mcp server" })
+			expect(filtered.length).toBe(2)
+			expect(filtered.map((item) => item.name)).toContain("Data Platform Package")
+			expect(filtered.map((item) => item.name)).toContain("Standalone Server")
+
+			// Verify package is included because of its MCP server subcomponent
+			const pkg = filtered.find((item) => item.name === "Data Platform Package")
+			expect(pkg?.matchInfo?.matched).toBe(true)
+			expect(pkg?.matchInfo?.matchReason?.hasMatchingSubcomponents).toBe(true)
+			expect(pkg?.items?.[0].matchInfo?.matched).toBe(true)
+			expect(pkg?.items?.[0].matchInfo?.matchReason?.typeMatch).toBe(true)
+		})
+
+		test("should include package when filtering by subcomponent type", () => {
+			const items: PackageManagerItem[] = [
+				{
+					name: "Data Platform Package",
+					description: "A package containing MCP servers",
+					type: "package" as ComponentType,
+					url: "test/package",
+					repoUrl: "https://example.com",
+					items: [
+						{
+							type: "mcp server" as ComponentType,
+							path: "test/server",
+							metadata: {
+								name: "Data Validator",
+								description: "An MCP server",
+								version: "1.0.0",
+								type: "mcp server" as ComponentType,
+							},
+						},
+					],
+				},
+			]
+
+			const filtered = manager.filterItems(items, { type: "mcp server" })
+			expect(filtered.length).toBe(1)
+			expect(filtered[0].name).toBe("Data Platform Package")
+			expect(filtered[0].matchInfo?.matched).toBe(true)
+			expect(filtered[0].items?.[0].matchInfo?.matched).toBe(true)
+			expect(filtered[0].items?.[0].matchInfo?.matchReason?.typeMatch).toBe(true)
+		})
+
 		beforeEach(() => {
 			// Create test items
 			typeFilterTestItems = [

webview-ui/src/components/package-manager/PackageManagerView.tsx

@@ -4,7 +4,6 @@ import { Tab, TabContent, TabHeader } from "../common/Tab"
 import { cn } from "@/lib/utils"
 import { PackageManagerSource } from "../../../../src/services/package-manager/types"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "cmdk"
-import { isFilterActive as checkFilterActive } from "./selectors"
 import { PackageManagerItemCard } from "./components/PackageManagerItemCard"
 import { useStateManager } from "./useStateManager"
 
@@ -85,8 +84,11 @@ const PackageManagerView: React.FC<PackageManagerViewProps> = ({ onDone }) => {
 							<div className="flex flex-col gap-3 mt-2">
 								<div className="flex flex-wrap justify-between gap-2">
 									<div className="whitespace-nowrap">
-										<label className="mr-2">Filter by type:</label>
+										<label htmlFor="type-filter" className="mr-2">
+											Filter by type:
+										</label>
 										<select
+											id="type-filter"
 											value={state.filters.type}
 											onChange={(e) =>
 												manager.transition({
@@ -239,10 +241,8 @@ const PackageManagerView: React.FC<PackageManagerViewProps> = ({ onDone }) => {
 						</div>
 
 						{(() => {
-							// Debug log state
-							const items = checkFilterActive(state.filters)
-								? state.displayItems || []
-								: state.allItems || []
+							// Use items directly from backend
+							const items = state.displayItems || []
 							const isEmpty = items.length === 0
 							const isLoading = state.isFetching
 							console.log("=== Rendering PackageManagerView ===")
@@ -256,7 +256,11 @@ const PackageManagerView: React.FC<PackageManagerViewProps> = ({ onDone }) => {
 							})
 
 							// Show loading state if fetching and not filtering
-							if (isLoading && !checkFilterActive(state.filters)) {
+							// Only show loading state if we're fetching and not filtering
+							if (
+								isLoading &&
+								!(state.filters.type || state.filters.search || state.filters.tags.length > 0)
+							) {
 								console.log("Rendering loading state due to isFetching=true")
 								return (
 									<div className="flex flex-col items-center justify-center h-64 text-vscode-descriptionForeground">
@@ -280,7 +284,7 @@ const PackageManagerView: React.FC<PackageManagerViewProps> = ({ onDone }) => {
 							return (
 								<div>
 									<p className="text-vscode-descriptionForeground mb-4">
-										{checkFilterActive(state.filters)
+										{state.filters.type || state.filters.search || state.filters.tags.length > 0
 											? `${items.length} items found (filtered)`
 											: `${items.length} ${items.length === 1 ? "item" : "items"} total`}
 									</p>