@shipit-ai/cli 1.173.1 → 1.174.0

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-card.js

@@ -3,20 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { Card } from '../../ui/card.js';
 import { Badge } from '../../ui/badge.js';
-import { Server, Wifi, Terminal } from 'lucide-react';
-const TRANSPORT_ICONS = {
-    http: Server,
-    sse: Wifi,
-    stdio: Terminal,
-};
+import { McpServerIcon } from './mcp-server-icon.js';
 export function McpServerCard({ server, onSelect }) {
     const { t } = useTranslation('web');
-    const TransportIcon = TRANSPORT_ICONS[server.transport] ?? Server;
     const description = server.mcp_info?.description ?? '';
     return (_jsxs(Card, { className: "cursor-pointer p-5 transition-all duration-300 hover:scale-[1.02] hover:shadow-md hover:ring-slate-300 dark:hover:ring-slate-600", role: "button", tabIndex: 0, onClick: () => onSelect(server), onKeyDown: (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 onSelect(server);
             }
-        }, children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TransportIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), _jsx("h3", { className: "text-sm font-semibold", children: server.name })] }), _jsx(Badge, { variant: "outline", className: "shrink-0 text-xs", children: t(`mcpServers.transport.${server.transport}`, server.transport.toUpperCase()) })] }), description ? (_jsx("p", { className: "text-muted-foreground mt-2 line-clamp-2 text-xs", children: description })) : null, _jsx("div", { className: "mt-3 flex items-center gap-2", children: server.auth_type && server.auth_type !== 'none' ? (_jsx(Badge, { variant: "secondary", className: "text-xs", children: t(`mcpServers.authType.${server.auth_type}`, server.auth_type) })) : null })] }));
+        }, "data-testid": `mcp-server-card-${server.server_name}`, children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex size-11 shrink-0 items-center justify-center rounded-lg bg-slate-100 ring-1 ring-slate-200/50 dark:bg-slate-800 dark:ring-slate-700/50", children: _jsx(McpServerIcon, { serverName: server.server_name, url: server.url, transport: server.transport, size: "md" }) }), _jsx("h3", { className: "text-foreground mt-2 min-w-0 flex-1 truncate text-sm leading-tight font-bold tracking-tight", children: server.name })] }), description ? (_jsx("p", { className: "text-muted-foreground mt-3 line-clamp-2 text-xs leading-relaxed", children: description })) : null, _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: "outline", children: t(`mcpServers.transport.${server.transport}`, server.transport.toUpperCase()) }), server.auth_type && server.auth_type !== 'none' ? (_jsx(Badge, { variant: "secondary", children: t(`mcpServers.authType.${server.auth_type}`, server.auth_type) })) : null] })] }));
 }

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.d.ts

@@ -1,10 +1,10 @@
 import type { McpServerInfo } from '../../../../../../packages/core/src/application/ports/output/services/mcp-server-browser.interface.js';
 interface McpServerDetailDrawerProps {
     server: McpServerInfo | null;
-    serverNames: string[];
+    proxyBaseUrl: string;
     open: boolean;
     onClose: () => void;
 }
-export declare function McpServerDetailDrawer({ server, serverNames, open, onClose, }: McpServerDetailDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function McpServerDetailDrawer({ server, proxyBaseUrl, open, onClose, }: McpServerDetailDrawerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=mcp-server-detail-drawer.d.ts.map

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-server-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,aAAa,EAEd,MAAM,gFAAgF,CAAC;AAExF,UAAU,0BAA0B;IAClC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,OAAO,GACR,EAAE,0BAA0B,kDA+E5B"}
+{"version":3,"file":"mcp-server-detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,aAAa,EAEd,MAAM,gFAAgF,CAAC;AAExF,UAAU,0BAA0B;IAClC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,OAAO,GACR,EAAE,0BAA0B,kDA2J5B"}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.js

@@ -1,12 +1,16 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BaseDrawer } from '../../common/base-drawer/index.js';
 import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Separator } from '../../ui/separator.js';
 import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
+import { RefreshCw } from 'lucide-react';
 import { McpToolList } from './mcp-tool-list.js';
+import { McpConnectInstructions } from './mcp-connect-instructions.js';
+import { McpServerIcon } from './mcp-server-icon.js';
 import { fetchMcpServerToolsAction } from '../../../app/actions/fetch-mcp-server-tools.js';
 function isValidDisplayUrl(url) {
     if (!url)
@@ -19,19 +23,21 @@ function isValidDisplayUrl(url) {
         return false;
     }
 }
-export function McpServerDetailDrawer({ server, serverNames, open, onClose, }) {
+export function McpServerDetailDrawer({ server, proxyBaseUrl, open, onClose, }) {
     const { t } = useTranslation('web');
     const [tools, setTools] = useState([]);
     const [loadingTools, setLoadingTools] = useState(false);
     const [toolError, setToolError] = useState(null);
-    const loadTools = useCallback(async () => {
+    const [loadedServerName, setLoadedServerName] = useState(null);
+    const loadTools = useCallback(async (serverName) => {
         setLoadingTools(true);
         setToolError(null);
         try {
-            const result = await fetchMcpServerToolsAction();
+            const result = await fetchMcpServerToolsAction(serverName);
             setTools(result.tools);
             if (result.error)
                 setToolError(result.error);
+            setLoadedServerName(serverName);
         }
         catch {
             setToolError('Failed to load tools');
@@ -41,12 +47,23 @@ export function McpServerDetailDrawer({ server, serverNames, open, onClose, }) {
         }
     }, []);
     useEffect(() => {
-        if (open && server && tools.length === 0) {
-            loadTools();
-        }
-    }, [open, server, tools.length, loadTools]);
+        if (!open || !server)
+            return;
+        // Re-fetch whenever the drawer opens for a different server.
+        if (loadedServerName === server.server_name)
+            return;
+        loadTools(server.server_name);
+    }, [open, server, loadedServerName, loadTools]);
+    const handleRefresh = useCallback(() => {
+        if (!server)
+            return;
+        // Clear the cached server name to force a re-fetch and call loadTools
+        // directly for immediate feedback.
+        setLoadedServerName(null);
+        loadTools(server.server_name);
+    }, [server, loadTools]);
     if (!server)
         return null;
     const description = server.mcp_info?.description ?? '';
-    return (_jsxs(BaseDrawer, { open: open, onClose: onClose, children: [_jsx(DrawerTitle, { children: server.name }), description ? _jsx(DrawerDescription, { children: description }) : null, _jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('mcpServers.detail.serverName') }), _jsx("span", { className: "font-mono text-xs", children: server.server_name })] }), isValidDisplayUrl(server.url) ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('mcpServers.detail.url') }), _jsx("span", { className: "max-w-[200px] truncate font-mono text-xs", children: server.url })] })) : null, _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('mcpServers.detail.transport') }), _jsx(Badge, { variant: "outline", className: "text-xs", children: t(`mcpServers.transport.${server.transport}`, server.transport.toUpperCase()) })] }), server.auth_type && server.auth_type !== 'none' ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('mcpServers.detail.authType') }), _jsx(Badge, { variant: "secondary", className: "text-xs", children: t(`mcpServers.authType.${server.auth_type}`, server.auth_type) })] })) : null] }), _jsx(Separator, { className: "my-4" }), _jsx("h3", { className: "mb-3 text-sm font-semibold", children: t('mcpServers.tools.title') }), loadingTools ? (_jsxs("p", { className: "text-muted-foreground text-sm", children: [t('accessibility.loading'), "..."] })) : toolError ? (_jsx("p", { className: "text-destructive text-sm", children: toolError })) : (_jsx(McpToolList, { tools: tools, serverNames: serverNames }))] }));
+    return (_jsx(BaseDrawer, { open: open, onClose: onClose, "data-testid": "mcp-server-detail-drawer", children: _jsxs("div", { className: "flex flex-col gap-6 overflow-y-auto p-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("span", { className: "text-[10px] font-bold tracking-[0.2em] text-slate-400 uppercase", children: [t(`mcpServers.transport.${server.transport}`, server.transport.toUpperCase()), " \u00B7 MCP Server"] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-lg bg-slate-100 ring-1 ring-slate-200/50 dark:bg-slate-800 dark:ring-slate-700/50", children: _jsx(McpServerIcon, { serverName: server.server_name, url: server.url, transport: server.transport, size: "lg" }) }), _jsx(DrawerTitle, { className: "text-foreground mt-2 text-lg font-bold tracking-tight", children: server.name })] }), description ? (_jsx(DrawerDescription, { className: "text-muted-foreground text-sm leading-relaxed", children: description })) : null] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: t('mcpServers.detail.serverName') }), _jsx("span", { className: "font-mono text-xs", children: server.server_name })] }), isValidDisplayUrl(server.url) ? (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("span", { className: "text-muted-foreground shrink-0 text-xs font-medium", children: t('mcpServers.detail.url') }), _jsx("span", { className: "truncate font-mono text-xs", title: server.url, children: server.url })] })) : null, _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: t('mcpServers.detail.transport') }), _jsx(Badge, { variant: "outline", children: t(`mcpServers.transport.${server.transport}`, server.transport.toUpperCase()) })] }), server.auth_type && server.auth_type !== 'none' ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: t('mcpServers.detail.authType') }), _jsx(Badge, { variant: "secondary", children: t(`mcpServers.authType.${server.auth_type}`, server.auth_type) })] })) : null] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-foreground text-sm font-bold tracking-tight", children: t('mcpServers.tools.title') }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", onClick: handleRefresh, disabled: loadingTools, "aria-label": t('mcpServers.tools.refresh'), "data-testid": "mcp-tools-refresh", children: _jsx(RefreshCw, { className: `size-3.5 ${loadingTools ? 'animate-spin' : ''}` }) })] }), loadingTools ? (_jsxs("p", { className: "text-muted-foreground text-sm", children: [t('accessibility.loading'), "..."] })) : toolError ? (_jsx("p", { className: "text-destructive text-sm", children: toolError })) : (_jsx(McpToolList, { tools: tools, serverName: server.server_name }))] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-foreground text-sm font-bold tracking-tight", children: t('mcpServers.connect.title') }), _jsx(McpConnectInstructions, { proxyBaseUrl: proxyBaseUrl, serverName: server.server_name })] })] }) }));
 }

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.stories.d.ts

@@ -6,7 +6,7 @@ declare const meta: {
     args: {
         open: true;
         onClose: () => undefined;
-        serverNames: string[];
+        proxyBaseUrl: string;
     };
 };
 export default meta;

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.stories.js

@@ -5,7 +5,7 @@ const meta = {
     args: {
         open: true,
         onClose: () => undefined,
-        serverNames: ['deepwiki-mcp', 'github_mcp'],
+        proxyBaseUrl: 'http://localhost:4000',
     },
 };
 export default meta;

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-icon.d.ts

@@ -0,0 +1,45 @@
+import { type ComponentType } from 'react';
+interface McpServerIconProps {
+    serverName: string;
+    url?: string;
+    transport: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+type BrandIconComponent = ComponentType<{
+    className?: string;
+    size?: number;
+}>;
+export type VendorResolution = {
+    kind: 'inline';
+    component: BrandIconComponent;
+} | {
+    kind: 'simpleicons';
+    slug: string;
+} | {
+    kind: 'none';
+};
+/**
+ * Resolve a vendor icon for an MCP server by matching name and URL against
+ * the VENDOR_MAP patterns. Returns an inline component, a SimpleIcons slug,
+ * or 'none' (caller falls back to transport icon).
+ *
+ * Exported for unit testing.
+ */
+export declare function resolveVendorMapping(serverName: string, url?: string): VendorResolution;
+/**
+ * Renders an MCP server's brand icon when recognizable, falling back to the
+ * transport-type icon otherwise.
+ *
+ * Resolution order:
+ * 1. Inline brand SVG (Microsoft, Azure, DeepWiki, Firecrawl, AWS)
+ * 2. SimpleIcons CDN image (GitHub, Stripe, Postgres, etc.)
+ * 3. Transport fallback (Server/Wifi/Terminal from lucide-react)
+ *
+ * For SimpleIcons images, we handle `onError` by swapping to the transport
+ * fallback — this protects against SimpleIcons slug changes without breaking
+ * the UI.
+ */
+export declare function McpServerIcon({ serverName, url, transport, className, size, }: McpServerIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=mcp-server-icon.d.ts.map

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-icon.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAYrD,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,KAAK,kBAAkB,GAAG,aAAa,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AA4F/E,MAAM,MAAM,gBAAgB,GACxB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,kBAAkB,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,gBAAgB,CASvF;AAoBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,GAAG,EACH,SAAS,EACT,SAAS,EACT,IAAW,GACZ,EAAE,kBAAkB,2CA6BpB"}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-server-icon.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Server, Wifi, Terminal } from 'lucide-react';
+import { MicrosoftIcon, MicrosoftLearnIcon, AzureIcon, FirecrawlIcon, DeepWikiIcon, AwsIcon, } from './vendor-brand-icons.js';
+/**
+ * Vendor icon resolution map.
+ *
+ * Priority rules:
+ * 1. More-specific patterns FIRST (e.g. `microsoft_learn` before `microsoft`,
+ *    `github_copilot` before plain `github`).
+ * 2. Inline SVG brand icons take priority over SimpleIcons when both are
+ *    available — inline icons are guaranteed to render and have no CDN
+ *    dependency.
+ * 3. Verified slugs only. Every SimpleIcons slug in this file must return
+ *    HTTP 200 from https://cdn.simpleicons.org/{slug} as of the last audit.
+ *
+ * When no vendor matches, the `McpServerIcon` component falls back to the
+ * transport-type Lucide icon (Server/Wifi/Terminal).
+ *
+ * Exported `resolveVendorMapping` is the source of truth for tests.
+ */
+const VENDOR_MAP = [
+    // Microsoft (SimpleIcons removed all MS icons for legal reasons — use inline)
+    { match: /microsoft[_-]?learn|learn\.microsoft/, inlineIcon: MicrosoftLearnIcon },
+    { match: /foundry|ai\.azure|azure[_-]?foundry|bedrock[_-]?agentcore/, inlineIcon: AzureIcon },
+    { match: /\bazure\b/, inlineIcon: AzureIcon },
+    { match: /microsoft|\.microsoft\./, inlineIcon: MicrosoftIcon },
+    // GitHub / Copilot (SimpleIcons has these)
+    { match: /github[_-]?copilot|\bcopilot\b/, simpleIconSlug: 'githubcopilot' },
+    { match: /github|api\.github/, simpleIconSlug: 'github' },
+    { match: /gitlab/, simpleIconSlug: 'gitlab' },
+    { match: /bitbucket/, simpleIconSlug: 'bitbucket' },
+    // AI / LLM vendors
+    { match: /anthropic|\bclaude\b/, simpleIconSlug: 'anthropic' },
+    { match: /gemini|google[_-]?ai/, simpleIconSlug: 'googlegemini' },
+    { match: /perplexity/, simpleIconSlug: 'perplexity' },
+    // Documentation / knowledge (DeepWiki gets its own distinct mark)
+    { match: /deepwiki|deep[_-]?wiki/, inlineIcon: DeepWikiIcon },
+    { match: /notion/, simpleIconSlug: 'notion' },
+    { match: /confluence/, simpleIconSlug: 'confluence' },
+    { match: /readthedocs/, simpleIconSlug: 'readthedocs' },
+    { match: /mintlify/, simpleIconSlug: 'mintlify' },
+    // Web scraping / crawling (inline for Firecrawl — no SimpleIcons)
+    { match: /firecrawl/, inlineIcon: FirecrawlIcon },
+    // Cloud / infra
+    { match: /\baws\b|amazon[_-]?web|bedrock/, inlineIcon: AwsIcon },
+    { match: /cloudflare/, simpleIconSlug: 'cloudflare' },
+    { match: /vercel/, simpleIconSlug: 'vercel' },
+    { match: /netlify/, simpleIconSlug: 'netlify' },
+    { match: /digitalocean/, simpleIconSlug: 'digitalocean' },
+    { match: /railway/, simpleIconSlug: 'railway' },
+    // Databases
+    { match: /postgres/, simpleIconSlug: 'postgresql' },
+    { match: /mongodb/, simpleIconSlug: 'mongodb' },
+    { match: /\bredis\b/, simpleIconSlug: 'redis' },
+    { match: /mysql/, simpleIconSlug: 'mysql' },
+    { match: /sqlite/, simpleIconSlug: 'sqlite' },
+    { match: /supabase/, simpleIconSlug: 'supabase' },
+    { match: /planetscale/, simpleIconSlug: 'planetscale' },
+    // Productivity / collaboration
+    { match: /slack/, simpleIconSlug: 'slack' },
+    { match: /discord/, simpleIconSlug: 'discord' },
+    { match: /linear/, simpleIconSlug: 'linear' },
+    { match: /jira|atlassian/, simpleIconSlug: 'jira' },
+    { match: /asana/, simpleIconSlug: 'asana' },
+    { match: /zapier/, simpleIconSlug: 'zapier' },
+    // Observability
+    { match: /datadog/, simpleIconSlug: 'datadog' },
+    { match: /sentry/, simpleIconSlug: 'sentry' },
+    { match: /grafana/, simpleIconSlug: 'grafana' },
+    { match: /newrelic/, simpleIconSlug: 'newrelic' },
+    // Payments / commerce
+    { match: /stripe/, simpleIconSlug: 'stripe' },
+    { match: /shopify/, simpleIconSlug: 'shopify' },
+];
+/**
+ * Resolve a vendor icon for an MCP server by matching name and URL against
+ * the VENDOR_MAP patterns. Returns an inline component, a SimpleIcons slug,
+ * or 'none' (caller falls back to transport icon).
+ *
+ * Exported for unit testing.
+ */
+export function resolveVendorMapping(serverName, url) {
+    const haystack = `${serverName} ${url ?? ''}`.toLowerCase();
+    for (const entry of VENDOR_MAP) {
+        if (entry.match.test(haystack)) {
+            if (entry.inlineIcon)
+                return { kind: 'inline', component: entry.inlineIcon };
+            if (entry.simpleIconSlug)
+                return { kind: 'simpleicons', slug: entry.simpleIconSlug };
+        }
+    }
+    return { kind: 'none' };
+}
+const TRANSPORT_FALLBACKS = {
+    http: Server,
+    sse: Wifi,
+    stdio: Terminal,
+};
+const SIZE_CLASSES = {
+    sm: 'size-4',
+    md: 'size-5',
+    lg: 'size-6',
+};
+const SIZE_PIXELS = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+/**
+ * Renders an MCP server's brand icon when recognizable, falling back to the
+ * transport-type icon otherwise.
+ *
+ * Resolution order:
+ * 1. Inline brand SVG (Microsoft, Azure, DeepWiki, Firecrawl, AWS)
+ * 2. SimpleIcons CDN image (GitHub, Stripe, Postgres, etc.)
+ * 3. Transport fallback (Server/Wifi/Terminal from lucide-react)
+ *
+ * For SimpleIcons images, we handle `onError` by swapping to the transport
+ * fallback — this protects against SimpleIcons slug changes without breaking
+ * the UI.
+ */
+export function McpServerIcon({ serverName, url, transport, className, size = 'sm', }) {
+    const [imageFailed, setImageFailed] = useState(false);
+    const resolution = resolveVendorMapping(serverName, url);
+    const FallbackIcon = TRANSPORT_FALLBACKS[transport] ?? Server;
+    const sizeClass = SIZE_CLASSES[size];
+    const sizePx = SIZE_PIXELS[size];
+    if (resolution.kind === 'inline') {
+        const Brand = resolution.component;
+        return _jsx(Brand, { className: `${sizeClass} shrink-0 ${className ?? ''}`, size: sizePx });
+    }
+    if (resolution.kind === 'simpleicons' && !imageFailed) {
+        return (_jsx("img", { src: `https://cdn.simpleicons.org/${resolution.slug}`, alt: "", width: sizePx, height: sizePx, className: `${sizeClass} shrink-0 ${className ?? ''}`, onError: () => setImageFailed(true) }));
+    }
+    return (_jsx(FallbackIcon, { className: `text-muted-foreground ${sizeClass} shrink-0 ${className ?? ''}` }));
+}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.d.ts

@@ -1,6 +1,7 @@
 interface McpServersPageClientProps {
     proxyConfigured: boolean;
+    proxyBaseUrl: string;
 }
-export declare function McpServersPageClient({ proxyConfigured }: McpServersPageClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function McpServersPageClient({ proxyConfigured, proxyBaseUrl }: McpServersPageClientProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=mcp-servers-page-client.d.ts.map

package/dist/src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-servers-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.tsx"],"names":[],"mappings":"AAaA,UAAU,yBAAyB;IACjC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,wBAAgB,oBAAoB,CAAC,EAAE,eAAe,EAAE,EAAE,yBAAyB,2CA0HlF"}
+{"version":3,"file":"mcp-servers-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.tsx"],"names":[],"mappings":"AAcA,UAAU,yBAAyB;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAID,wBAAgB,oBAAoB,CAAC,EAAE,eAAe,EAAE,YAAY,EAAE,EAAE,yBAAyB,2CA2IhG"}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.js

@@ -4,13 +4,14 @@ import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertCircle, Search, Server } from 'lucide-react';
 import { Input } from '../../ui/input.js';
-import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
 import { EmptyState } from '../../common/empty-state/index.js';
+import { PageHeader } from '../../common/page-header/index.js';
 import { McpServerCard } from './mcp-server-card.js';
 import { McpServerDetailDrawer } from './mcp-server-detail-drawer.js';
 import { fetchMcpServersAction } from '../../../app/actions/fetch-mcp-servers.js';
 const TRANSPORT_FILTERS = ['all', 'http', 'sse', 'stdio'];
-export function McpServersPageClient({ proxyConfigured }) {
+export function McpServersPageClient({ proxyConfigured, proxyBaseUrl }) {
     const { t } = useTranslation('web');
     const [searchQuery, setSearchQuery] = useState('');
     const [transportFilter, setTransportFilter] = useState('all');
@@ -36,7 +37,6 @@ export function McpServersPageClient({ proxyConfigured }) {
             setLoading(false);
         });
     }, [proxyConfigured, t]);
-    const serverNames = useMemo(() => servers.map((s) => s.server_name), [servers]);
     const filtered = useMemo(() => {
         return servers.filter((server) => {
             const query = searchQuery.toLowerCase();
@@ -48,12 +48,12 @@ export function McpServersPageClient({ proxyConfigured }) {
         });
     }, [servers, searchQuery, transportFilter]);
     if (!proxyConfigured) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsx(EmptyState, { icon: _jsx(AlertCircle, { className: "h-8 w-8" }), title: t('mcpServers.noProxy') }) }));
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('mcpServers.title'), description: t('mcpServers.subtitle') }), _jsx(EmptyState, { icon: _jsx(AlertCircle, { className: "size-10" }), title: t('mcpServers.noProxy') })] }));
     }
     if (loading) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("p", { className: "text-muted-foreground", children: [t('accessibility.loading'), "..."] }) }));
+        return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('mcpServers.title'), description: t('mcpServers.subtitle') }), _jsxs("div", { className: "text-muted-foreground text-center text-sm", children: [t('accessibility.loading'), "..."] })] }));
     }
-    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold", children: t('mcpServers.title') }), error ? (_jsx("div", { className: "border-destructive/50 bg-destructive/10 mt-2 rounded-md border p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "text-destructive h-4 w-4" }), _jsx("p", { className: "text-destructive text-sm", children: error })] }) })) : null, _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: t('mcpServers.subtitle') })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Input, { placeholder: t('mcpServers.searchPlaceholder'), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "max-w-xs" }), _jsx("div", { className: "flex gap-1", children: TRANSPORT_FILTERS.map((filter) => (_jsx(Badge, { variant: transportFilter === filter ? 'default' : 'outline', className: "cursor-pointer", onClick: () => setTransportFilter(filter), children: filter === 'all'
-                                ? t('mcpServers.filter.all')
-                                : t(`mcpServers.transport.${filter}`, filter.toUpperCase()) }, filter))) })] }), filtered.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(EmptyState, { icon: servers.length === 0 ? _jsx(Server, { className: "h-8 w-8" }) : _jsx(Search, { className: "h-8 w-8" }), title: servers.length === 0 ? t('mcpServers.noServers') : t('mcpServers.noResults') }) })) : (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((server) => (_jsx(McpServerCard, { server: server, onSelect: setSelectedServer }, server.server_id))) })), _jsx(McpServerDetailDrawer, { server: selectedServer, serverNames: serverNames, open: !!selectedServer, onClose: () => setSelectedServer(null) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-8 p-8", children: [_jsx(PageHeader, { eyebrow: "Developer Portal", title: t('mcpServers.title'), description: t('mcpServers.subtitle') }), error ? (_jsxs("div", { role: "alert", className: "border-destructive/40 bg-destructive/10 editorial-shadow flex items-center gap-2 rounded-xl border px-4 py-3", children: [_jsx(AlertCircle, { className: "text-destructive size-4 shrink-0" }), _jsx("p", { className: "text-destructive text-sm font-medium", children: error })] })) : null, _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: t('mcpServers.searchPlaceholder'), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9", "data-testid": "mcp-servers-search" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: TRANSPORT_FILTERS.map((filter) => (_jsx(Button, { variant: transportFilter === filter ? 'default' : 'outline', size: "sm", onClick: () => setTransportFilter(filter), "data-testid": `mcp-servers-filter-${filter}`, children: filter === 'all'
+                        ? t('mcpServers.filter.all')
+                        : t(`mcpServers.transport.${filter}`, filter.toUpperCase()) }, filter))) }), filtered.length === 0 ? (_jsx(EmptyState, { icon: servers.length === 0 ? _jsx(Server, { className: "size-10" }) : _jsx(Search, { className: "size-10" }), title: servers.length === 0 ? t('mcpServers.noServers') : t('mcpServers.noResults') })) : (_jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((server) => (_jsx(McpServerCard, { server: server, onSelect: setSelectedServer }, server.server_id))) })), _jsx(McpServerDetailDrawer, { server: selectedServer, proxyBaseUrl: proxyBaseUrl, open: !!selectedServer, onClose: () => setSelectedServer(null) })] }));
 }

package/dist/src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.stories.js

@@ -5,8 +5,8 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    args: { proxyConfigured: true },
+    args: { proxyConfigured: true, proxyBaseUrl: 'http://localhost:4000' },
 };
 export const NoProxy = {
-    args: { proxyConfigured: false },
+    args: { proxyConfigured: false, proxyBaseUrl: '' },
 };

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.d.ts

@@ -1,23 +1,27 @@
 import type { McpToolInfo } from '../../../../../../packages/core/src/application/ports/output/services/mcp-server-browser.interface.js';
 interface McpToolListProps {
     tools: McpToolInfo[];
-    serverNames: string[];
-}
-interface GroupedTools {
+    /**
+     * The server name that these tools belong to. Used to strip the
+     * `{serverName}-` prefix from tool names for nicer display.
+     */
     serverName: string;
-    tools: {
-        displayName: string;
-        description?: string;
-    }[];
+}
+interface DisplayTool {
+    displayName: string;
+    description?: string;
+    key: string;
 }
 /**
- * Groups tools by server name prefix.
+ * Normalize tools by stripping the `{serverName}-` prefix if present.
+ *
+ * LiteLLM sometimes prefixes tool names with the server alias (e.g.,
+ * `github_mcp-list_issues`). When we're displaying tools for a single
+ * known server, the prefix is redundant — strip it for cleaner UI.
  *
- * LiteLLM prefixes tool names with `{server_name}-` (e.g., `github_mcp-list_issues`).
- * We match each tool's name against known server names and strip the prefix for display.
- * Tools with no matching prefix go in an "Other" group.
+ * Exported for unit testing.
  */
-export declare function groupToolsByServer(tools: McpToolInfo[], serverNames: string[]): GroupedTools[];
-export declare function McpToolList({ tools, serverNames }: McpToolListProps): import("react/jsx-runtime").JSX.Element;
+export declare function stripServerPrefix(tools: McpToolInfo[], serverName: string): DisplayTool[];
+export declare function McpToolList({ tools, serverName }: McpToolListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=mcp-tool-list.d.ts.map

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-tool-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-tool-list.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gFAAgF,CAAC;AAElH,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CA2B9F;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CAoCnE"}
+{"version":3,"file":"mcp-tool-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-tool-list.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gFAAgF,CAAC;AAElH,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAW;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,UAAU,EAAE,MAAM,GAAG,WAAW,EAAE,CAYzF;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAwBlE"}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.js

@@ -4,45 +4,32 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Badge } from '../../ui/badge.js';
 /**
- * Groups tools by server name prefix.
+ * Normalize tools by stripping the `{serverName}-` prefix if present.
  *
- * LiteLLM prefixes tool names with `{server_name}-` (e.g., `github_mcp-list_issues`).
- * We match each tool's name against known server names and strip the prefix for display.
- * Tools with no matching prefix go in an "Other" group.
+ * LiteLLM sometimes prefixes tool names with the server alias (e.g.,
+ * `github_mcp-list_issues`). When we're displaying tools for a single
+ * known server, the prefix is redundant — strip it for cleaner UI.
+ *
+ * Exported for unit testing.
  */
-export function groupToolsByServer(tools, serverNames) {
-    const groups = new Map();
-    for (const tool of tools) {
-        let matched = false;
-        for (const serverName of serverNames) {
-            const prefix = `${serverName}-`;
-            if (tool.name.startsWith(prefix)) {
-                const displayName = tool.name.slice(prefix.length);
-                if (!groups.has(serverName))
-                    groups.set(serverName, []);
-                groups.get(serverName).push({ displayName, description: tool.description });
-                matched = true;
-                break;
-            }
-        }
-        if (!matched) {
-            if (!groups.has('other'))
-                groups.set('other', []);
-            groups.get('other').push({ displayName: tool.name, description: tool.description });
-        }
-    }
-    return Array.from(groups.entries())
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([serverName, tools]) => ({
-        serverName,
-        tools: tools.sort((a, b) => a.displayName.localeCompare(b.displayName)),
-    }));
+export function stripServerPrefix(tools, serverName) {
+    const prefix = `${serverName}-`;
+    return tools
+        .map((tool) => {
+        const displayName = tool.name.startsWith(prefix) ? tool.name.slice(prefix.length) : tool.name;
+        return {
+            displayName,
+            description: tool.description,
+            key: tool.name,
+        };
+    })
+        .sort((a, b) => a.displayName.localeCompare(b.displayName));
 }
-export function McpToolList({ tools, serverNames }) {
+export function McpToolList({ tools, serverName }) {
     const { t } = useTranslation('web');
-    const grouped = useMemo(() => groupToolsByServer(tools, serverNames), [tools, serverNames]);
+    const displayTools = useMemo(() => stripServerPrefix(tools, serverName), [tools, serverName]);
     if (tools.length === 0) {
         return _jsx("p", { className: "text-muted-foreground text-sm", children: t('mcpServers.tools.noTools') });
     }
-    return (_jsx("div", { className: "space-y-4", children: grouped.map((group) => (_jsxs("div", { children: [_jsx("h4", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: group.serverName === 'other' ? t('mcpServers.tools.other') : group.serverName }), _jsx("div", { className: "space-y-2", children: group.tools.map((tool) => (_jsxs("div", { className: "rounded-md border p-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: tool.displayName }) }), tool.description ? (_jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tool.description })) : null] }, `${group.serverName}-${tool.displayName}`))) })] }, group.serverName))) }));
+    return (_jsx("div", { className: "space-y-2", children: displayTools.map((tool) => (_jsxs("div", { className: "rounded-md border p-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: tool.displayName }) }), tool.description ? (_jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tool.description })) : null] }, tool.key))) }));
 }

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.stories.d.ts

@@ -8,5 +8,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const WithTools: Story;
 export declare const NoTools: Story;
-export declare const UnmatchedTools: Story;
+export declare const UnprefixedTools: Story;
 //# sourceMappingURL=mcp-tool-list.stories.d.ts.map

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-tool-list.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-tool-list.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAA,MAAM,IAAI;;;CAG0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC"}
+{"version":3,"file":"mcp-tool-list.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-tool-list.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAA,MAAM,IAAI;;;CAG0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC"}

package/dist/src/presentation/web/components/features/mcp-servers/mcp-tool-list.stories.js

@@ -6,27 +6,26 @@ const meta = {
 export default meta;
 export const WithTools = {
     args: {
-        serverNames: ['deepwiki-mcp', 'github_mcp'],
+        serverName: 'deepwiki-mcp',
         tools: [
             { name: 'deepwiki-mcp-read_wiki', description: 'Read wiki contents' },
             { name: 'deepwiki-mcp-search', description: 'Search documentation' },
-            { name: 'github_mcp-list_issues', description: 'List GitHub issues' },
-            { name: 'github_mcp-create_issue', description: 'Create a new issue' },
+            { name: 'deepwiki-mcp-list_repos', description: 'List indexed repositories' },
         ],
     },
 };
 export const NoTools = {
     args: {
-        serverNames: ['deepwiki-mcp'],
+        serverName: 'empty_server',
         tools: [],
     },
 };
-export const UnmatchedTools = {
+export const UnprefixedTools = {
     args: {
-        serverNames: ['deepwiki-mcp'],
+        serverName: 'my_server',
         tools: [
-            { name: 'deepwiki-mcp-read_wiki', description: 'Read wiki contents' },
-            { name: 'unknown-server-tool', description: 'Tool from unknown server' },
+            { name: 'query', description: 'Execute a query' },
+            { name: 'list_tables', description: 'List all tables' },
         ],
     },
 };