@yancyyu/openhermit 1.5.8

package/src/renderer/components/extensions/mcp/McpServersPanel.tsx

@@ -0,0 +1,543 @@
+/**
+ * McpServersPanel — search and browse the MCP server catalog.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Badge } from '@renderer/components/ui/badge';
+import { Button } from '@renderer/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@renderer/components/ui/select';
+import { useStore } from '@renderer/store';
+import { formatRelativeTime } from '@renderer/utils/formatters';
+import { getRuntimeDisplayName } from '@renderer/utils/runtimeDisplayName';
+import { CLI_NOT_FOUND_MARKER } from '@shared/constants/cli';
+import {
+  getMcpDiagnosticKey,
+  getMcpOperationKey,
+  getMcpProjectStateKey,
+  getPreferredMcpInstallationEntry,
+  sanitizeMcpServerName,
+} from '@shared/utils/extensionNormalizers';
+import { AlertTriangle, RefreshCw, Search, Server, Trash2 } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { SearchInput } from '../common/SearchInput';
+
+import { McpServerCard } from './McpServerCard';
+import { McpServerDetailDialog } from './McpServerDetailDialog';
+
+import type { CliInstallationStatus } from '@shared/types';
+import type {
+  InstalledMcpEntry,
+  InstallScope,
+  McpCatalogItem,
+  McpServerDiagnostic,
+} from '@shared/types/extensions';
+
+type McpSortValue = 'name-asc' | 'name-desc' | 'tools-desc';
+
+const MCP_SORT_OPTIONS: { value: McpSortValue; label: string }[] = [
+  { value: 'name-asc', label: 'Name A→Z' },
+  { value: 'name-desc', label: 'Name Z→A' },
+  { value: 'tools-desc', label: 'Most tools' },
+];
+
+function sortMcpServers(servers: McpCatalogItem[], sort: McpSortValue): McpCatalogItem[] {
+  return [...servers].sort((a, b) => {
+    switch (sort) {
+      case 'name-asc':
+        return a.name.localeCompare(b.name);
+      case 'name-desc':
+        return b.name.localeCompare(a.name);
+      case 'tools-desc':
+        return b.tools.length - a.tools.length;
+      default:
+        return 0;
+    }
+  });
+}
+
+interface McpServersPanelProps {
+  projectPath: string | null;
+  mcpSearchQuery: string;
+  mcpSearch: (query: string) => void;
+  mcpSearchResults: McpCatalogItem[];
+  mcpSearchLoading: boolean;
+  mcpSearchWarnings: string[];
+  selectedMcpServerId: string | null;
+  setSelectedMcpServerId: (id: string | null) => void;
+  cliStatus?: Pick<
+    CliInstallationStatus,
+    | 'installed'
+    | 'authLoggedIn'
+    | 'binaryPath'
+    | 'launchError'
+    | 'flavor'
+    | 'displayName'
+    | 'providers'
+  > | null;
+  cliStatusLoading?: boolean;
+}
+
+export const McpServersPanel = ({
+  projectPath,
+  mcpSearchQuery,
+  mcpSearch,
+  mcpSearchResults,
+  mcpSearchLoading,
+  mcpSearchWarnings,
+  selectedMcpServerId,
+  setSelectedMcpServerId,
+  cliStatus: cliStatusOverride,
+  cliStatusLoading: cliStatusLoadingOverride,
+}: McpServersPanelProps): React.JSX.Element => {
+  const projectStateKey = getMcpProjectStateKey(projectPath);
+  const {
+    browseCatalog,
+    browseNextCursor,
+    browseLoading,
+    browseError,
+    mcpBrowse,
+    installedServersByProjectPath,
+    installedServersFallback,
+    fetchMcpGitHubStars,
+    mcpDiagnosticsByProjectPath,
+    mcpDiagnosticsFallback,
+    mcpDiagnosticsLoadingByProjectPath,
+    mcpDiagnosticsLoadingFallback,
+    mcpDiagnosticsErrorByProjectPath,
+    mcpDiagnosticsErrorFallback,
+    mcpDiagnosticsLastCheckedAtByProjectPath,
+    mcpDiagnosticsLastCheckedAtFallback,
+    runMcpDiagnostics,
+    uninstallMcpServer,
+    mcpInstallProgress,
+  } = useStore(
+    useShallow((s) => ({
+      browseCatalog: s.mcpBrowseCatalog,
+      browseNextCursor: s.mcpBrowseNextCursor,
+      browseLoading: s.mcpBrowseLoading,
+      browseError: s.mcpBrowseError,
+      mcpBrowse: s.mcpBrowse,
+      installedServersByProjectPath: s.mcpInstalledServersByProjectPath,
+      installedServersFallback: s.mcpInstalledServers,
+      fetchMcpGitHubStars: s.fetchMcpGitHubStars,
+      mcpDiagnosticsByProjectPath: s.mcpDiagnosticsByProjectPath,
+      mcpDiagnosticsFallback: s.mcpDiagnostics,
+      mcpDiagnosticsLoadingByProjectPath: s.mcpDiagnosticsLoadingByProjectPath,
+      mcpDiagnosticsLoadingFallback: s.mcpDiagnosticsLoading,
+      mcpDiagnosticsErrorByProjectPath: s.mcpDiagnosticsErrorByProjectPath,
+      mcpDiagnosticsErrorFallback: s.mcpDiagnosticsError,
+      mcpDiagnosticsLastCheckedAtByProjectPath: s.mcpDiagnosticsLastCheckedAtByProjectPath,
+      mcpDiagnosticsLastCheckedAtFallback: s.mcpDiagnosticsLastCheckedAt,
+      runMcpDiagnostics: s.runMcpDiagnostics,
+      uninstallMcpServer: s.uninstallMcpServer,
+      mcpInstallProgress: s.mcpInstallProgress,
+    }))
+  );
+  const storedCliStatus = useStore((s) => s.cliStatus);
+  const storedCliStatusLoading = useStore((s) => s.cliStatusLoading);
+  const cliStatus = cliStatusOverride ?? storedCliStatus;
+  const cliStatusLoading = cliStatusLoadingOverride ?? storedCliStatusLoading;
+  const installedServers =
+    installedServersByProjectPath?.[projectStateKey] ?? installedServersFallback ?? [];
+  const mcpDiagnostics =
+    mcpDiagnosticsByProjectPath?.[projectStateKey] ?? mcpDiagnosticsFallback ?? {};
+  const mcpDiagnosticsLoading =
+    mcpDiagnosticsLoadingByProjectPath?.[projectStateKey] ?? mcpDiagnosticsLoadingFallback ?? false;
+  const mcpDiagnosticsError =
+    mcpDiagnosticsErrorByProjectPath?.[projectStateKey] ?? mcpDiagnosticsErrorFallback ?? null;
+  const mcpDiagnosticsLastCheckedAt =
+    mcpDiagnosticsLastCheckedAtByProjectPath?.[projectStateKey] ??
+    mcpDiagnosticsLastCheckedAtFallback ??
+    null;
+
+  const [mcpSort, setMcpSort] = useState<McpSortValue>('name-asc');
+
+  // Load initial browse data
+  useEffect(() => {
+    if (browseCatalog.length === 0 && !browseLoading && !browseError) {
+      void mcpBrowse();
+    }
+  }, [browseCatalog.length, browseError, browseLoading, mcpBrowse]);
+
+  const diagnosticsDisableReason = useMemo(() => {
+    if (cliStatus === null || typeof cliStatus === 'undefined') {
+      return cliStatusLoading ? '正在检查运行时状态...' : '正在检查运行时可用性...';
+    }
+
+    if (cliStatus?.installed === false) {
+      if (cliStatus.binaryPath && cliStatus.launchError) {
+        return '已找到配置的运行时，但启动失败。请前往首页修复或重新安装。';
+      }
+      return '需要配置运行时。请前往首页安装或修复。';
+    }
+
+    return null;
+  }, [cliStatus, cliStatusLoading]);
+
+  useEffect(() => {
+    if (diagnosticsDisableReason) {
+      return;
+    }
+    void runMcpDiagnostics(projectPath ?? undefined);
+  }, [diagnosticsDisableReason, projectPath, runMcpDiagnostics]);
+
+  // Fetch GitHub stars after catalog loads (fire-and-forget)
+  useEffect(() => {
+    const urls = browseCatalog.map((s) => s.repositoryUrl).filter((u): u is string => !!u);
+    if (urls.length > 0) {
+      fetchMcpGitHubStars(urls);
+    }
+  }, [browseCatalog, fetchMcpGitHubStars]);
+
+  // Decide which list to show: search results or browse
+  const isSearching = mcpSearchQuery.trim().length > 0;
+  const rawServers = isSearching ? mcpSearchResults : browseCatalog;
+  const isLoading = isSearching ? mcpSearchLoading : browseLoading;
+  const warnings = isSearching ? mcpSearchWarnings : [];
+
+  // Installed lookup set (lowercase CLI names)
+  const installedNames = useMemo(
+    () => new Set(installedServers.map((s) => s.name.toLowerCase())),
+    [installedServers]
+  );
+
+  const installedEntriesByName = useMemo(() => {
+    const entriesByName = new Map<string, InstalledMcpEntry[]>();
+    for (const entry of installedServers) {
+      const key = entry.name.toLowerCase();
+      entriesByName.set(key, [...(entriesByName.get(key) ?? []), entry]);
+    }
+    return entriesByName;
+  }, [installedServers]);
+
+  /** Check if a catalog server is installed by comparing sanitized names */
+  const isServerInstalled = (server: McpCatalogItem): boolean =>
+    installedNames.has(sanitizeMcpServerName(server.name));
+
+  const getInstalledEntries = (server: McpCatalogItem): InstalledMcpEntry[] =>
+    installedEntriesByName.get(sanitizeMcpServerName(server.name)) ?? [];
+
+  const getInstalledEntry = (server: McpCatalogItem): InstalledMcpEntry | null =>
+    getPreferredMcpInstallationEntry(getInstalledEntries(server));
+
+  const getDiagnostic = (server: McpCatalogItem): McpServerDiagnostic | null => {
+    const installedEntry = getInstalledEntry(server);
+    return installedEntry
+      ? (mcpDiagnostics[getMcpDiagnosticKey(installedEntry.name, installedEntry.scope)] ??
+          mcpDiagnostics[getMcpDiagnosticKey(installedEntry.name)] ??
+          mcpDiagnostics[installedEntry.name] ??
+          null)
+      : null;
+  };
+
+  const allDiagnostics = useMemo(
+    () => Object.values(mcpDiagnostics).sort((a, b) => a.name.localeCompare(b.name)),
+    [mcpDiagnostics]
+  );
+
+  const getDiagnosticBadgeClass = (status: McpServerDiagnostic['status']): string => {
+    switch (status) {
+      case 'connected':
+        return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400';
+      case 'needs-authentication':
+        return 'border-amber-500/30 bg-amber-500/10 text-amber-400';
+      case 'failed':
+        return 'border-red-500/30 bg-red-500/10 text-red-400';
+      default:
+        return 'border-border bg-surface-raised text-text-muted';
+    }
+  };
+
+  // Sort displayed servers
+  const displayServers = useMemo(() => sortMcpServers(rawServers, mcpSort), [rawServers, mcpSort]);
+  const runtimeLabel = getRuntimeDisplayName(cliStatus, true);
+
+  // Find selected server (search in both lists to avoid losing selection during search toggle)
+  const selectedServer = useMemo(() => {
+    if (!selectedMcpServerId) return null;
+    return (
+      displayServers.find((s) => s.id === selectedMcpServerId) ??
+      browseCatalog.find((s) => s.id === selectedMcpServerId) ??
+      mcpSearchResults.find((s) => s.id === selectedMcpServerId) ??
+      null
+    );
+  }, [displayServers, browseCatalog, mcpSearchResults, selectedMcpServerId]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-md border border-black/10 bg-surface-raised px-4 py-3 dark:border-white/10">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-sm font-medium text-text">MCP 健康状态</p>
+            <p className="text-xs text-text-muted">
+              {mcpDiagnosticsLoading ? (
+                <>正在通过 {runtimeLabel} 检查已安装的 MCP 服务器...</>
+              ) : diagnosticsDisableReason ? (
+                diagnosticsDisableReason
+              ) : mcpDiagnosticsLastCheckedAt ? (
+                `上次检查：${formatRelativeTime(new Date(mcpDiagnosticsLastCheckedAt).toISOString())}`
+              ) : (
+                <>在此页面运行诊断，以验证已安装 MCP 的连接状态。</>
+              )}
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void runMcpDiagnostics(projectPath ?? undefined)}
+            disabled={mcpDiagnosticsLoading || Boolean(diagnosticsDisableReason)}
+            className="whitespace-nowrap"
+          >
+            <RefreshCw
+              className={`mr-1.5 size-3.5 ${mcpDiagnosticsLoading ? 'animate-spin' : ''}`}
+            />
+            {mcpDiagnosticsLoading ? '检查中...' : '检查状态'}
+          </Button>
+        </div>
+
+        {(mcpDiagnosticsLoading || allDiagnostics.length > 0) && (
+          <div className="mt-4 border-t border-black/10 pt-4 dark:border-white/10">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <p className="text-sm font-medium text-text">运行时 MCP 诊断</p>
+              {allDiagnostics.length > 0 && (
+                <span className="text-xs text-text-muted">{allDiagnostics.length} 个服务器</span>
+              )}
+            </div>
+            {allDiagnostics.length > 0 ? (
+              <div className="mcp-diagnostics-list max-h-[18.5rem] space-y-2 overflow-y-auto pr-1">
+                {allDiagnostics.map((diagnostic) => {
+                  const opKey = getMcpOperationKey(
+                    diagnostic.name,
+                    (diagnostic.scope as InstallScope) || 'user',
+                    projectPath
+                  );
+                  const uninstalling = mcpInstallProgress[opKey] === 'pending';
+                  return (
+                    <div
+                      key={getMcpDiagnosticKey(diagnostic.name, diagnostic.scope)}
+                      className="flex items-start justify-between gap-3 rounded-md border border-black/10 px-3 py-2 dark:border-white/10"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2">
+                          <p className="text-sm text-text">{diagnostic.name}</p>
+                          {diagnostic.scope && (
+                            <span className="rounded-full border border-border bg-surface-raised px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-text-muted">
+                              {diagnostic.scope}
+                            </span>
+                          )}
+                        </div>
+                        <p
+                          className="truncate font-mono text-[11px] text-text-muted"
+                          title={diagnostic.target}
+                        >
+                          {diagnostic.target}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Badge
+                          className={getDiagnosticBadgeClass(diagnostic.status)}
+                          variant="outline"
+                        >
+                          {diagnostic.statusLabel}
+                        </Badge>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="size-6 p-0 text-red-300 hover:text-red-200"
+                          disabled={uninstalling}
+                          onClick={() => {
+                            void uninstallMcpServer(
+                              diagnostic.name,
+                              diagnostic.name,
+                              diagnostic.scope || undefined,
+                              projectPath ?? undefined
+                            );
+                          }}
+                          title={`卸载 ${diagnostic.name}`}
+                        >
+                          <Trash2 className="size-3.5" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <p className="text-xs text-text-muted">正在等待诊断结果...</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Search + sort row */}
+      <div className="flex items-center gap-3">
+        <div className="flex-1">
+          <SearchInput
+            value={mcpSearchQuery}
+            onChange={mcpSearch}
+            placeholder="搜索 MCP 服务器..."
+          />
+        </div>
+        <Select value={mcpSort} onValueChange={(v) => setMcpSort(v as McpSortValue)}>
+          <SelectTrigger className="w-36">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {MCP_SORT_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Warnings */}
+      {warnings.length > 0 && (
+        <div className="flex flex-col gap-1">
+          {warnings.map((w, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-400"
+            >
+              <AlertTriangle className="size-3.5 shrink-0" />
+              {w}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Skeleton loading */}
+      {isLoading && displayServers.length === 0 && (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: 6 }, (_, i) => (
+            <div
+              key={i}
+              className="skeleton-card flex flex-col gap-2 rounded-lg border border-border p-4"
+              style={{ animationDelay: `${i * 80}ms` }}
+            >
+              <div className="flex items-start gap-2.5">
+                <div className="size-9 rounded-lg bg-surface-raised" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-4 w-32 rounded bg-surface-raised" />
+                  <div className="h-3 w-16 rounded-full bg-surface-raised" />
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <div className="h-3 w-full rounded bg-surface-raised" />
+                <div className="h-3 w-2/3 rounded bg-surface-raised" />
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="h-5 w-12 rounded-full bg-surface-raised" />
+                <div className="h-7 w-16 rounded bg-surface-raised" />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {browseError && !isSearching && (
+        <div className="rounded-md border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-400">
+          {browseError}
+        </div>
+      )}
+
+      {mcpDiagnosticsError &&
+        (mcpDiagnosticsError.includes(CLI_NOT_FOUND_MARKER) ? (
+          <div className="flex items-start gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-400" />
+            <div>
+              <p className="text-sm font-medium text-amber-300">
+                {cliStatus?.flavor === 'agent_teams_orchestrator'
+                  ? `${runtimeLabel} not available`
+                  : `${runtimeLabel} not installed`}
+              </p>
+              <p className="mt-0.5 text-xs text-text-muted">
+                MCP health checks require {runtimeLabel}. Go to the Dashboard to install or repair
+                it.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="rounded-md border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-400">
+            {mcpDiagnosticsError}
+          </div>
+        ))}
+
+      {/* Empty state */}
+      {!isLoading && displayServers.length === 0 && (
+        <div className="flex flex-col items-center gap-3 rounded-sm border border-dashed border-border px-8 py-16">
+          <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-surface-raised">
+            {isSearching ? (
+              <Search className="size-5 text-text-muted" />
+            ) : (
+              <Server className="size-5 text-text-muted" />
+            )}
+          </div>
+          <p className="text-sm text-text-secondary">
+            {isSearching ? '没有找到服务器' : '暂无 MCP 服务器'}
+          </p>
+          <p className="text-xs text-text-muted">
+            {isSearching ? '试试其他搜索词' : '稍后再回来查看新服务器'}
+          </p>
+        </div>
+      )}
+
+      {displayServers.length > 0 && (
+        <div className="mcp-servers-grid grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {displayServers.map((server) => (
+            <McpServerCard
+              key={server.id}
+              server={server}
+              isInstalled={isServerInstalled(server)}
+              installedEntry={getInstalledEntry(server)}
+              installedEntries={getInstalledEntries(server)}
+              diagnostic={getDiagnostic(server)}
+              diagnosticsLoading={mcpDiagnosticsLoading}
+              onClick={setSelectedMcpServerId}
+              cliStatus={cliStatus}
+              cliStatusLoading={cliStatusLoading}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Load more for browse */}
+      {!isSearching && browseNextCursor && (
+        <div className="flex justify-center py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={browseLoading}
+            onClick={() => void mcpBrowse(browseNextCursor)}
+          >
+            Load more
+          </Button>
+        </div>
+      )}
+
+      {/* Detail dialog */}
+      <McpServerDetailDialog
+        server={selectedServer}
+        isInstalled={selectedServer ? isServerInstalled(selectedServer) : false}
+        installedEntry={selectedServer ? getInstalledEntry(selectedServer) : null}
+        installedEntries={selectedServer ? getInstalledEntries(selectedServer) : []}
+        diagnostic={selectedServer ? getDiagnostic(selectedServer) : null}
+        diagnosticsLoading={mcpDiagnosticsLoading}
+        projectPath={projectPath}
+        open={selectedMcpServerId !== null}
+        onClose={() => setSelectedMcpServerId(null)}
+        cliStatus={cliStatus}
+        cliStatusLoading={cliStatusLoading}
+      />
+    </div>
+  );
+};

package/src/renderer/components/extensions/plugins/CapabilityChips.tsx

@@ -0,0 +1,70 @@
+/**
+ * CapabilityChips — filter chips for plugin capability types.
+ */
+
+import { useMemo } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { getCapabilityLabel, inferCapabilities } from '@shared/utils/extensionNormalizers';
+
+import type { EnrichedPlugin, PluginCapability } from '@shared/types/extensions';
+
+const ALL_CAPABILITIES: PluginCapability[] = ['lsp', 'mcp', 'agent', 'command', 'hook', 'skill'];
+
+interface CapabilityChipsProps {
+  plugins: EnrichedPlugin[];
+  selected: PluginCapability[];
+  onToggle: (capability: PluginCapability) => void;
+}
+
+export const CapabilityChips = ({
+  plugins,
+  selected,
+  onToggle,
+}: CapabilityChipsProps): React.JSX.Element => {
+  const capabilityCounts = useMemo(() => {
+    const counts = new Map<PluginCapability, number>();
+    for (const p of plugins) {
+      const caps = inferCapabilities(p);
+      for (const cap of caps) {
+        counts.set(cap, (counts.get(cap) ?? 0) + 1);
+      }
+    }
+    return counts;
+  }, [plugins]);
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {ALL_CAPABILITIES.map((cap) => {
+        const count = capabilityCounts.get(cap) ?? 0;
+        if (count === 0) return null;
+        const isActive = selected.includes(cap);
+        return (
+          <Button
+            key={cap}
+            variant="ghost"
+            size="sm"
+            onClick={() => onToggle(cap)}
+            aria-pressed={isActive}
+            className={`h-7 rounded-full border px-2.5 text-[11px] font-medium transition-all ${
+              isActive
+                ? 'border-purple-500/40 bg-purple-500/15 text-purple-300 shadow-sm'
+                : 'hover:bg-surface-raised/60 border-border bg-transparent text-text-secondary hover:border-border-emphasis hover:text-text'
+            }`}
+          >
+            <span>{getCapabilityLabel(cap)}</span>
+            <span
+              className={`ml-1.5 rounded-full px-1 py-0.5 text-[9px] leading-none ${
+                isActive
+                  ? 'bg-surface-raised text-text-secondary'
+                  : 'bg-surface-raised/70 text-text-muted'
+              }`}
+            >
+              {count}
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+};

package/src/renderer/components/extensions/plugins/CategoryChips.tsx

@@ -0,0 +1,67 @@
+/**
+ * CategoryChips — horizontal filter chips for plugin categories.
+ */
+
+import { useMemo } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { normalizeCategory } from '@shared/utils/extensionNormalizers';
+
+import type { EnrichedPlugin } from '@shared/types/extensions';
+
+interface CategoryChipsProps {
+  plugins: EnrichedPlugin[];
+  selected: string[];
+  onToggle: (category: string) => void;
+}
+
+export const CategoryChips = ({
+  plugins,
+  selected,
+  onToggle,
+}: CategoryChipsProps): React.JSX.Element => {
+  const categoryCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const p of plugins) {
+      const cat = normalizeCategory(p.category);
+      counts.set(cat, (counts.get(cat) ?? 0) + 1);
+    }
+    // Sort by count descending
+    return [...counts.entries()].sort((a, b) => b[1] - a[1]);
+  }, [plugins]);
+
+  if (categoryCounts.length === 0) return <></>;
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {categoryCounts.map(([category, count]) => {
+        const isActive = selected.includes(category);
+        return (
+          <Button
+            key={category}
+            variant="ghost"
+            size="sm"
+            onClick={() => onToggle(category)}
+            aria-pressed={isActive}
+            className={`h-7 rounded-full border px-2.5 text-[11px] font-medium transition-all ${
+              isActive
+                ? 'border-blue-500/40 bg-blue-500/15 text-blue-300 shadow-sm'
+                : 'hover:bg-surface-raised/60 border-border bg-transparent text-text-secondary hover:border-border-emphasis hover:text-text'
+            }`}
+          >
+            <span>{category}</span>
+            <span
+              className={`ml-1.5 rounded-full px-1 py-0.5 text-[9px] leading-none ${
+                isActive
+                  ? 'bg-surface-raised text-text-secondary'
+                  : 'bg-surface-raised/70 text-text-muted'
+              }`}
+            >
+              {count}
+            </span>
+          </Button>
+        );
+      })}
+    </div>
+  );
+};