@shipit-ai/cli 1.171.0 → 1.172.0-pr16.b31ecd3

package/dist/src/presentation/web/app/actions/fetch-mcp-servers.js

@@ -0,0 +1,11 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+export async function fetchMcpServersAction() {
+    try {
+        const useCase = resolve('FetchMcpServersUseCase');
+        return await useCase.execute();
+    }
+    catch {
+        return { servers: [], error: 'Failed to fetch MCP servers' };
+    }
+}

package/dist/src/presentation/web/app/mcp-servers/page.d.ts

@@ -0,0 +1,2 @@
+export default function McpServersPage(): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=page.d.ts.map

package/dist/src/presentation/web/app/mcp-servers/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/mcp-servers/page.tsx"],"names":[],"mappings":"AAMA,wBAA8B,cAAc,qDAc3C"}

package/dist/src/presentation/web/app/mcp-servers/page.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notFound } from 'next/navigation';
+import { getFeatureFlags } from '../../lib/feature-flags.js';
+import { McpServersPageClient } from '../../components/features/mcp-servers/mcp-servers-page-client.js';
+import { resolve } from '../../lib/server-container.js';
+export default async function McpServersPage() {
+    const flags = await getFeatureFlags();
+    if (!flags.mcpServers)
+        notFound();
+    let proxyConfigured = false;
+    try {
+        const useCase = resolve('LoadSettingsUseCase');
+        const settings = await useCase.execute();
+        proxyConfigured = !!settings.litellmProxy?.baseUrl;
+    }
+    catch {
+        // Settings not available
+    }
+    return _jsx(McpServersPageClient, { proxyConfigured: proxyConfigured });
+}

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"repository-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAOvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAqB/C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAuBF,2EAA2E;AAC3E,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAmCF,0FAA0F;AAC1F,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC"}
+{"version":3,"file":"repository-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAOvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAqB/C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAuBF,2EAA2E;AAC3E,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAoCF,0FAA0F;AAC1F,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC"}

package/dist/src/presentation/web/components/common/repository-node/repository-drawer.stories.js

@@ -58,6 +58,7 @@ function WithGitOpsTemplate({ data }) {
         gitRebaseSync: true,
         reactFileManager: true,
         plugins: true,
+        mcpServers: true,
     };
     return (_jsx(FeatureFlagsProvider, { flags: allEnabledFlags, children: _jsxs("div", { style: { height: '100vh', background: '#f8fafc', padding: '2rem' }, children: [_jsx("button", { type: "button", onClick: () => setSelected(data), style: { padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }, children: "Open Drawer" }), _jsx(RepositoryDrawer, { data: selected, onClose: () => setSelected(null) })] }) }));
 }

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

@@ -0,0 +1,8 @@
+import type { McpServerInfo } from '../../../../../../packages/core/src/application/ports/output/services/mcp-server-browser.interface.js';
+interface McpServerCardProps {
+    server: McpServerInfo;
+    onSelect: (server: McpServerInfo) => void;
+}
+export declare function McpServerCard({ server, onSelect }: McpServerCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=mcp-server-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gFAAgF,CAAC;AAEpH,UAAU,kBAAkB;IAC1B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAQD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAyCrE"}

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

@@ -0,0 +1,22 @@
+'use client';
+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,
+};
+export function McpServerCard({ server, onSelect }) {
+    const { t } = useTranslation();
+    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 })] }));
+}

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { McpServerCard } from './mcp-server-card.js';
+declare const meta: {
+    title: string;
+    component: typeof McpServerCard;
+    args: {
+        onSelect: () => undefined;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const HttpTransport: Story;
+export declare const SseTransport: Story;
+export declare const StdioTransport: Story;
+//# sourceMappingURL=mcp-server-card.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-card.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAA,MAAM,IAAI;;;;;;CAM4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC"}

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

@@ -0,0 +1,56 @@
+import { McpServerCard } from './mcp-server-card.js';
+const meta = {
+    title: 'Features/McpServers/McpServerCard',
+    component: McpServerCard,
+    args: {
+        onSelect: () => undefined,
+    },
+};
+export default meta;
+export const HttpTransport = {
+    args: {
+        server: {
+            server_id: 'a1b2c3d4',
+            name: 'deepwiki-mcp',
+            server_name: 'deepwiki-mcp',
+            url: 'https://mcp.deepwiki.com/mcp',
+            transport: 'http',
+            auth_type: 'none',
+            mcp_info: {
+                server_name: 'deepwiki-mcp',
+                description: 'Search and read documentation from any public repository',
+            },
+        },
+    },
+};
+export const SseTransport = {
+    args: {
+        server: {
+            server_id: 'b2c3d4e5',
+            name: 'github-mcp',
+            server_name: 'github_mcp',
+            url: 'https://api.githubcopilot.com/mcp',
+            transport: 'sse',
+            auth_type: 'bearer_token',
+            mcp_info: {
+                server_name: 'github_mcp',
+                description: 'Interact with GitHub repositories, issues, and pull requests',
+            },
+        },
+    },
+};
+export const StdioTransport = {
+    args: {
+        server: {
+            server_id: 'c3d4e5f6',
+            name: 'local-db-tools',
+            server_name: 'local_db_tools',
+            transport: 'stdio',
+            auth_type: 'none',
+            mcp_info: {
+                server_name: 'local_db_tools',
+                description: 'Query and manage local development databases',
+            },
+        },
+    },
+};

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

@@ -0,0 +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[];
+    open: boolean;
+    onClose: () => void;
+}
+export declare function McpServerDetailDrawer({ server, serverNames, 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

@@ -0,0 +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,kDAqE5B"}

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } 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 { McpToolList } from './mcp-tool-list.js';
+import { fetchMcpServerToolsAction } from '../../../app/actions/fetch-mcp-server-tools.js';
+function isValidDisplayUrl(url) {
+    if (!url)
+        return false;
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+export function McpServerDetailDrawer({ server, serverNames, open, onClose, }) {
+    const { t } = useTranslation();
+    const [tools, setTools] = useState([]);
+    const [loadingTools, setLoadingTools] = useState(false);
+    const loadTools = useCallback(async () => {
+        setLoadingTools(true);
+        const result = await fetchMcpServerToolsAction();
+        setTools(result.tools);
+        setLoadingTools(false);
+    }, []);
+    useEffect(() => {
+        if (open && server && tools.length === 0) {
+            loadTools();
+        }
+    }, [open, server, tools.length, 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'), "..."] })) : (_jsx(McpToolList, { tools: tools, serverNames: serverNames }))] }));
+}

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { McpServerDetailDrawer } from './mcp-server-detail-drawer.js';
+declare const meta: {
+    title: string;
+    component: typeof McpServerDetailDrawer;
+    args: {
+        open: true;
+        onClose: () => undefined;
+        serverNames: string[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithTools: Story;
+export declare const NoTools: Story;
+//# sourceMappingURL=mcp-server-detail-drawer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-server-detail-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-server-detail-drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,QAAA,MAAM,IAAI;;;;;;;;CAQoC,CAAC;AAE/C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC"}

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

@@ -0,0 +1,42 @@
+import { McpServerDetailDrawer } from './mcp-server-detail-drawer.js';
+const meta = {
+    title: 'Features/McpServers/McpServerDetailDrawer',
+    component: McpServerDetailDrawer,
+    args: {
+        open: true,
+        onClose: () => undefined,
+        serverNames: ['deepwiki-mcp', 'github_mcp'],
+    },
+};
+export default meta;
+export const WithTools = {
+    args: {
+        server: {
+            server_id: 'a1b2c3d4',
+            name: 'deepwiki-mcp',
+            server_name: 'deepwiki-mcp',
+            url: 'https://mcp.deepwiki.com/mcp',
+            transport: 'http',
+            auth_type: 'none',
+            mcp_info: {
+                server_name: 'deepwiki-mcp',
+                description: 'Search and read documentation from any public repository',
+            },
+        },
+    },
+};
+export const NoTools = {
+    args: {
+        server: {
+            server_id: 'c3d4e5f6',
+            name: 'empty-server',
+            server_name: 'empty_server',
+            transport: 'stdio',
+            auth_type: 'none',
+            mcp_info: {
+                server_name: 'empty_server',
+                description: 'A server with no tools configured',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,6 @@
+interface McpServersPageClientProps {
+    proxyConfigured: boolean;
+}
+export declare function McpServersPageClient({ proxyConfigured }: 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

@@ -0,0 +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,2CA0GlF"}

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

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { EmptyState } from '../../common/empty-state/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 }) {
+    const { t } = useTranslation();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [transportFilter, setTransportFilter] = useState('all');
+    const [selectedServer, setSelectedServer] = useState(null);
+    const [servers, setServers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        if (!proxyConfigured) {
+            setLoading(false);
+            return;
+        }
+        fetchMcpServersAction().then((result) => {
+            setServers(result.servers);
+            setLoading(false);
+        });
+    }, [proxyConfigured]);
+    const serverNames = useMemo(() => servers.map((s) => s.server_name), [servers]);
+    const filtered = useMemo(() => {
+        return servers.filter((server) => {
+            const query = searchQuery.toLowerCase();
+            const matchesQuery = !query ||
+                server.name.toLowerCase().includes(query) ||
+                (server.mcp_info?.description ?? '').toLowerCase().includes(query);
+            const matchesTransport = transportFilter === 'all' || server.transport === transportFilter;
+            return matchesQuery && matchesTransport;
+        });
+    }, [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') }) }));
+    }
+    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: "space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold", children: t('mcpServers.title') }), _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) })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { McpServersPageClient } from './mcp-servers-page-client.js';
+declare const meta: {
+    title: string;
+    component: typeof McpServersPageClient;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NoProxy: Story;
+//# sourceMappingURL=mcp-servers-page-client.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-servers-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/mcp-servers/mcp-servers-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,QAAA,MAAM,IAAI;;;CAGmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { McpServersPageClient } from './mcp-servers-page-client.js';
+const meta = {
+    title: 'Features/McpServers/McpServersPageClient',
+    component: McpServersPageClient,
+};
+export default meta;
+export const Default = {
+    args: { proxyConfigured: true },
+};
+export const NoProxy = {
+    args: { proxyConfigured: false },
+};

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

@@ -0,0 +1,23 @@
+import type { McpToolInfo } from '../../../../../../packages/core/src/application/ports/output/services/mcp-server-browser.interface.js';
+interface McpToolListProps {
+    tools: McpToolInfo[];
+    serverNames: string[];
+}
+interface GroupedTools {
+    serverName: string;
+    tools: {
+        displayName: string;
+        description?: string;
+    }[];
+}
+/**
+ * Groups tools by server name prefix.
+ *
+ * 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.
+ */
+export declare function groupToolsByServer(tools: McpToolInfo[], serverNames: string[]): GroupedTools[];
+export declare function McpToolList({ tools, serverNames }: 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

@@ -0,0 +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,2CAiCnE"}

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '../../ui/badge.js';
+/**
+ * Groups tools by server name prefix.
+ *
+ * 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.
+ */
+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 McpToolList({ tools, serverNames }) {
+    const { t } = useTranslation();
+    const grouped = useMemo(() => groupToolsByServer(tools, serverNames), [tools, serverNames]);
+    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] }, tool.displayName))) })] }, group.serverName))) }));
+}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,yCAAyC,CAAC;AAGtF,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CAkJzF"}
+{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,yCAAyC,CAAC;AAGtF,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,gCAAgC,2CAqKzF"}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.js

@@ -18,6 +18,7 @@ export function FeatureFlagsSettingsSection({ settings }) {
         gitRebaseSync: false,
         reactFileManager: false,
         plugins: false,
+        mcpServers: false,
     };
     const [flags, setFlags] = useState({ ...featureFlags });
     function save(payload) {
@@ -62,5 +63,11 @@ export function FeatureFlagsSettingsSection({ settings }) {
                     const newFlags = { ...flags, plugins: v };
                     setFlags(newFlags);
                     save({ featureFlags: newFlags });
+                } }), _jsx(SwitchRow, { label: t('settings.featureFlags.mcpServers'), description: settings.litellmProxy?.baseUrl
+                    ? t('settings.featureFlags.mcpServersDescription')
+                    : `${t('settings.featureFlags.mcpServersDescription')} — ${t('mcpServers.noProxy')}`, tooltip: "Enables the MCP Servers page for viewing MCP servers deployed on your LiteLLM proxy. Requires a LiteLLM proxy URL to be configured.", id: "flag-mcp-servers", testId: "switch-flag-mcp-servers", checked: flags.mcpServers, disabled: !settings.litellmProxy?.baseUrl, onChange: (v) => {
+                    const newFlags = { ...flags, mcpServers: v };
+                    setFlags(newFlags);
+                    save({ featureFlags: newFlags });
                 } })] }));
 }

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAK/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC"}
+{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAK/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAC"}

package/dist/src/presentation/web/components/features/settings/feature-flags-settings-section.stories.js

@@ -28,6 +28,7 @@ export const AllEnabled = {
                 gitRebaseSync: true,
                 reactFileManager: true,
                 plugins: true,
+                mcpServers: true,
             },
         },
     },
@@ -45,6 +46,7 @@ export const AllDisabled = {
                 gitRebaseSync: false,
                 reactFileManager: false,
                 plugins: false,
+                mcpServers: false,
             },
         },
     },

package/dist/src/presentation/web/components/features/settings/litellm-proxy-routing-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"litellm-proxy-routing-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-routing-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAaxE,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,+BAA+B,2CAwLvF"}
+{"version":3,"file":"litellm-proxy-routing-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/litellm-proxy-routing-section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAaxE,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAyCD,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,+BAA+B,2CAuQvF"}