@railgun52/dsh-mcp-servers 0.1.0

package/lib/types/mcp-bridge.js

@@ -0,0 +1,100 @@
+/** Settings -> mcp-client bridge: live-mounts MCP servers from the settings document. */
+import * as McpClient from '@deepseek-ai/dsh-mcp-client';
+/**
+ * Build one mcp-client config from a settings entry. The settings service
+ * deeply freezes published values, while Schemastery's config parse fills
+ * defaults into the args array and env dict, so both are cloned first.
+ * @param server - one entry of the mcp-servers settings value.
+ * @returns validated mcp-client config for that server.
+ */
+function toClientConfig(server) {
+    if (server.transport === 'streamable-http') {
+        return McpClient.Config({
+            transport: 'streamable-http',
+            serverName: server.name,
+            url: server.url,
+            headers: {},
+            failOnStartupError: false,
+        });
+    }
+    return McpClient.Config({
+        transport: 'stdio',
+        serverName: server.name,
+        command: server.command,
+        args: [...server.args],
+        env: { ...server.env },
+        cwd: '',
+        failOnStartupError: false,
+    });
+}
+/**
+ * Mount and keep live mcp-client instances in sync with the `mcp-servers` settings
+ * namespace. Creates, rebuilds, and disposes instances by `serverName` so editing the
+ * settings page takes effect without a restart. All sync work is serialized on one
+ * promise chain so concurrent settings writes cannot race the instance map.
+ * @param ctx - Host context carrying the tool registry required by mcp-client.
+ * @param getValue - accessor for the resolved settings value (called at sync time).
+ * @returns a sync trigger (call on settings change) and a dispose that drains the chain
+ *  and tears down every live instance.
+ */
+export function applyMcpBridge(ctx, getValue) {
+    const instances = new Map();
+    let chain = Promise.resolve();
+    const syncOnce = async () => {
+        const servers = getValue()?.servers ?? [];
+        const next = new Map();
+        for (const server of servers) {
+            if (!server.enabled)
+                continue;
+            if (next.has(server.name))
+                continue;
+            next.set(server.name, server);
+        }
+        for (const [name, server] of next) {
+            const signature = JSON.stringify(server);
+            const existing = instances.get(name);
+            if (existing !== undefined && existing.signature === signature)
+                continue;
+            if (existing !== undefined) {
+                await existing.fiber.dispose();
+                instances.delete(name);
+            }
+            let config;
+            try {
+                config = toClientConfig(server);
+            }
+            catch (error) {
+                ctx.logger.warn('mcp-bridge: invalid server config for "%s": %s', name, String(error));
+                continue;
+            }
+            const fiber = ctx.plugin(McpClient, config);
+            instances.set(name, { fiber, signature });
+        }
+        for (const [name, { fiber }] of instances) {
+            if (!next.has(name)) {
+                await fiber.dispose();
+                instances.delete(name);
+            }
+        }
+    };
+    const sync = () => {
+        chain = chain.then(syncOnce).catch((error) => {
+            ctx.logger.warn('mcp-bridge: sync failed: %s', String(error));
+        });
+    };
+    const dispose = async () => {
+        chain = chain.finally(async () => {
+            for (const [, { fiber }] of instances) {
+                try {
+                    await fiber.dispose();
+                }
+                catch { /* instance already gone */ }
+            }
+            instances.clear();
+        });
+        await chain;
+    };
+    sync();
+    return { sync, dispose };
+}
+//# sourceMappingURL=mcp-bridge.js.map

package/lib/types/mcp-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-bridge.js","sourceRoot":"","sources":["../../src/mcp-bridge.ts"],"names":[],"mappings":"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"}

package/lib/types/mcp-servers-schema.d.ts

@@ -0,0 +1,66 @@
+/** MCP servers settings schema (host + browser shared). */
+import type { Volatile } from '@deepseek-ai/cordis';
+import z from '@deepseek-ai/schemastery';
+/** Settings namespace owned by the MCP servers settings bridge. */
+export declare const MCP_SERVERS_NAMESPACE = "mcp-servers";
+/** One MCP server declaration as stored in the user-settings document. */
+export interface McpServerConfig {
+    name: string;
+    command: string;
+    args: string[];
+    env: Record<string, string>;
+    transport: 'stdio' | 'streamable-http';
+    url: string;
+    enabled: boolean;
+}
+/** Durable MCP servers section shared by the Host schema and the browser scope. */
+export interface McpServersSettings {
+    servers: McpServerConfig[];
+}
+/**
+ * Durable MCP servers schema. `servers` is volatile so the profile-config
+ * settings model exposes it as a live-editable field (the plugin is not
+ * remounted on edit; the bridge re-syncs on `loader/volatile-update`).
+ */
+export declare const McpServersSchema: z<Schemastery.ObjectS<NoInfer<{
+    servers: z<NoInfer<({
+        name?: string | null;
+        command?: string | null;
+        args?: string[] | null;
+        env?: import("@deepseek-ai/cosmokit").Dict<string, string> | null;
+        transport?: "stdio" | "streamable-http" | null;
+        url?: string | null;
+        enabled?: boolean | null;
+    } & import("@deepseek-ai/cosmokit").Dict)[]>, NoInfer<Schemastery.ObjectT<NoInfer<{
+        name: z<string, string, "defined">;
+        command: z<string, string, "plain">;
+        args: z<string[], string[], "defined">;
+        env: z<import("@deepseek-ai/cosmokit").Dict<string, string>, import("@deepseek-ai/cosmokit").Dict<string, string>, "defined">;
+        transport: z<"stdio" | "streamable-http", "stdio" | "streamable-http", "defined">;
+        url: z<string, string, "defined">;
+        enabled: z<boolean, boolean, "defined">;
+    }>>[]>, "volatile-defined">;
+}>>, Schemastery.ObjectT<NoInfer<{
+    servers: z<NoInfer<({
+        name?: string | null;
+        command?: string | null;
+        args?: string[] | null;
+        env?: import("@deepseek-ai/cosmokit").Dict<string, string> | null;
+        transport?: "stdio" | "streamable-http" | null;
+        url?: string | null;
+        enabled?: boolean | null;
+    } & import("@deepseek-ai/cosmokit").Dict)[]>, NoInfer<Schemastery.ObjectT<NoInfer<{
+        name: z<string, string, "defined">;
+        command: z<string, string, "plain">;
+        args: z<string[], string[], "defined">;
+        env: z<import("@deepseek-ai/cosmokit").Dict<string, string>, import("@deepseek-ai/cosmokit").Dict<string, string>, "defined">;
+        transport: z<"stdio" | "streamable-http", "stdio" | "streamable-http", "defined">;
+        url: z<string, string, "defined">;
+        enabled: z<boolean, boolean, "defined">;
+    }>>[]>, "volatile-defined">;
+}>>, "plain">;
+/** Resolved Host config; the volatile field is read through its live reference. */
+export type McpServersHostConfig = {
+    servers: Volatile<McpServerConfig[]>;
+};
+//# sourceMappingURL=mcp-servers-schema.d.ts.map

package/lib/types/mcp-servers-schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-servers-schema.d.ts","sourceRoot":"","sources":["../../src/mcp-servers-schema.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAExC,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,gBAAgB,CAAA;AAElD,0EAA0E;AAC1E,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC3B,SAAS,EAAE,OAAO,GAAG,iBAAiB,CAAA;IACtC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,eAAe,EAAE,CAAA;CAC3B;AAYD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAE3B,CAAA;AAEF,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG;IAAE,OAAO,EAAE,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAA;CAAE,CAAA"}

package/lib/types/mcp-servers-schema.js

@@ -0,0 +1,22 @@
+/** MCP servers settings schema (host + browser shared). */
+import z from '@deepseek-ai/schemastery';
+/** Settings namespace owned by the MCP servers settings bridge. */
+export const MCP_SERVERS_NAMESPACE = 'mcp-servers';
+const McpServerSchema = z.object({
+    name: z.string().required(),
+    command: z.string(),
+    args: z.array(String).default([]),
+    env: z.dict(String).default({}),
+    transport: z.union(['stdio', 'streamable-http']).default('stdio'),
+    url: z.string().default(''),
+    enabled: z.boolean().default(true),
+});
+/**
+ * Durable MCP servers schema. `servers` is volatile so the profile-config
+ * settings model exposes it as a live-editable field (the plugin is not
+ * remounted on edit; the bridge re-syncs on `loader/volatile-update`).
+ */
+export const McpServersSchema = z.object({
+    servers: z.array(McpServerSchema).default([]).volatile(),
+});
+//# sourceMappingURL=mcp-servers-schema.js.map

package/lib/types/mcp-servers-schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-servers-schema.js","sourceRoot":"","sources":["../../src/mcp-servers-schema.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAG3D,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAExC,mEAAmE;AACnE,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAA;AAkBlD,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE;IACnB,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;IACjC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;IAC/B,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC;IACjE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;IAC3B,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;CACnC,CAAC,CAAA;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC;IACvC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE;CACzD,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@railgun52/dsh-mcp-servers",
+  "description": "MCP servers settings page for the dsh web GUI: a JSON editor over a profile-config namespace that mounts live mcp-client instances from the saved servers",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "icon": "icon.svg",
+  "type": "module",
+  "packageManager": "pnpm@11.7.0",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b && tsdown",
+    "bundle": "tsdown",
+    "watch": "tsdown --watch",
+    "typecheck": "tsc -b --pretty false"
+  },
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.js.map",
+    "lib/**/*.d.ts",
+    "lib/**/*.d.ts.map",
+    "src",
+    "cordis.patch.yml",
+    "icon.svg"
+  ],
+  "license": "MIT",
+  "dsh": {
+    "engines": {
+      "dsh": ">=0.1.7-rc.1"
+    },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-api-remotes"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "^3.18.4"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh": ">=0.1.7-rc.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.4",
+    "@deepseek-ai/dsh-api-remotes": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-connection": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-mcp-client": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-settings": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-tools": "^0.1.7-rc.1",
+    "@types/react": "~18.3.1",
+    "lightningcss": "^1.32.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsdown": "^0.22.2",
+    "typescript": "^6.0.3",
+    "vite-tsconfig-paths": "^6.1.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/railgun52/dsh-mcp-servers.git"
+  }
+}

package/src/client/McpSection.module.css

@@ -0,0 +1,143 @@
+.section {
+  padding: 24px;
+  max-width: 800px;
+}
+.header {
+  margin-bottom: 24px;
+}
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+.intro {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: 14px;
+}
+.toolbar {
+  margin-bottom: 16px;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-3);
+  transition: box-shadow 0.15s;
+}
+.card:hover {
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+}
+.cardBody {
+  flex: 1;
+  min-width: 0;
+}
+.cardName {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cardMeta {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cardMeta code {
+  font-size: 12px;
+}
+.cardActions {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.statusOn {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+  display: inline-block;
+}
+.statusOff {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #888;
+  display: inline-block;
+}
+.deleteBtn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+}
+.deleteBtn:hover {
+  background: var(--bg-hover);
+  color: var(--text-error);
+}
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-secondary);
+}
+.error {
+  padding: 8px 12px;
+  background: var(--bg-error);
+  color: var(--text-error);
+  border-radius: 6px;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-secondary);
+}
+.modalBody {
+  padding: 0;
+}
+.modalBody p {
+  padding: 0 16px;
+}
+.modalActions {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  justify-content: flex-end;
+}
+.jsonEditor {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  background: var(--bg-input);
+  color: var(--text-primary);
+  box-sizing: border-box;
+  min-height: 300px;
+  outline: none;
+}
+.jsonEditor:focus {
+  background: var(--bg-input-focus);
+}
+.dialogMcp {
+  width: min(720px, 100%);
+}

package/src/client/McpSection.tsx

@@ -0,0 +1,248 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Button, IconPlusOutlineRegular, IconTrashOutlineRegular, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { McpKey } from './locales.ts'
+import styles from './McpSection.module.css'
+
+interface McpServer {
+  name: string
+  command: string
+  args: string[]
+  env: Record<string, string>
+  transport: 'stdio' | 'streamable-http'
+  url: string
+  enabled: boolean
+}
+
+export interface McpSectionInjected {
+  load: () => unknown[]
+  save: (servers: unknown[]) => Promise<void>
+  t: (key: McpKey) => string
+}
+
+export type McpSectionProps = Partial<McpSectionInjected>
+
+function serversToJson(servers: McpServer[]): string {
+  const mcpServers: Record<string, Record<string, unknown>> = {}
+  for (const s of servers) {
+    const entry: Record<string, unknown> = { command: s.command }
+    if (s.args.length > 0) entry.args = s.args
+    if (Object.keys(s.env).length > 0) entry.env = s.env
+    if (s.transport === 'streamable-http') entry.transport = 'streamable-http'
+    if (s.url) entry.url = s.url
+    mcpServers[s.name] = entry
+  }
+  return JSON.stringify({ mcpServers }, null, 2)
+}
+
+function jsonToServers(text: string): McpServer[] {
+  const parsed = JSON.parse(text)
+  const map = parsed.mcpServers
+  if (!map || typeof map !== 'object') throw new Error('Missing "mcpServers" key')
+  return Object.entries(map).map(([name, config]) => {
+    const c = config as Record<string, unknown>
+    const args = Array.isArray(c.args) ? c.args.map(String) : []
+    const env = c.env && typeof c.env === 'object'
+      ? Object.fromEntries(Object.entries(c.env).map(([k, v]) => [k, String(v)]))
+      : {}
+    return {
+      name,
+      command: String(c.command ?? ''),
+      args,
+      env,
+      transport: c.transport === 'streamable-http' ? 'streamable-http' as const : 'stdio' as const,
+      url: String(c.url ?? ''),
+      enabled: c.enabled !== false,
+    }
+  })
+}
+
+const EMPTY_TEMPLATE = JSON.stringify({
+  mcpServers: {
+    'my-server': {
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-filesystem', '/path'],
+    },
+  },
+}, null, 2)
+
+export function McpSection({ load, save, t: t_ }: McpSectionProps) {
+  const t = t_ ?? ((key: string) => key)
+  const [servers, setServers] = useState<McpServer[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [editJson, setEditJson] = useState('')
+  const [editIndex, setEditIndex] = useState<number | null>(null)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [editError, setEditError] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<{ name: string; index: number } | null>(null)
+
+  const loadConfig = useCallback(() => {
+    setLoading(true)
+    setError(null)
+    try {
+      const loaded = load?.() ?? []
+      setServers(loaded as McpServer[])
+    } catch (e) {
+      setError(t('loadFailed'))
+    } finally {
+      setLoading(false)
+    }
+  }, [load, t])
+
+  useEffect(() => { loadConfig() }, [loadConfig])
+
+  const saveConfig = async (newServers: McpServer[]) => {
+    setSaving(true)
+    setError(null)
+    try {
+      await save?.(newServers)
+      setServers(newServers)
+    } catch (e) {
+      setError(t('saveFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleAdd = () => {
+    setEditJson(EMPTY_TEMPLATE)
+    setEditIndex(null)
+    setEditError(null)
+    setShowEditModal(true)
+  }
+
+  const handleEdit = (index: number) => {
+    const server = servers[index]
+    if (!server) return
+    setEditJson(serversToJson([server]))
+    setEditIndex(index)
+    setEditError(null)
+    setShowEditModal(true)
+  }
+
+  const handleSaveJson = async () => {
+    try {
+      const parsed = jsonToServers(editJson)
+      if (parsed.length === 0) {
+        setEditError('No servers found in JSON')
+        return
+      }
+      if (editIndex !== null) {
+        const newServers = [...servers]
+        newServers[editIndex] = parsed[0]!
+        await saveConfig(newServers)
+      } else {
+        const merged = new Map(servers.map(s => [s.name, s]))
+        for (const s of parsed) merged.set(s.name, s)
+        await saveConfig(Array.from(merged.values()).filter((s): s is McpServer => s !== undefined))
+      }
+      setShowEditModal(false)
+    } catch (e) {
+      setEditError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  const handleDelete = async (index: number) => {
+    const newServers = servers.filter((_, i) => i !== index)
+    await saveConfig(newServers)
+    setDeleteTarget(null)
+  }
+
+  if (loading) {
+    return <div className={styles.section}><div className={styles.loading}>Loading...</div></div>
+  }
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <h2 className={styles.title}>{t('title')}</h2>
+        <p className={styles.intro}>{t('intro')}</p>
+      </div>
+
+      {error && <div className={styles.error}>{error}</div>}
+
+      <div className={styles.toolbar}>
+        <Button onClick={handleAdd} disabled={saving}>
+          <IconPlusOutlineRegular /> {t('add')}
+        </Button>
+      </div>
+
+      {servers.length === 0 && (
+        <div className={styles.empty}>{t('noServers')}</div>
+      )}
+
+      <div className={styles.list}>
+        {servers.map((server, i) => (
+          <div key={i} className={styles.card}>
+            <div className={styles.cardBody}>
+              <div className={styles.cardName}>
+                <span className={server.enabled ? styles.statusOn : styles.statusOff} />
+                {server.name}
+              </div>
+              <div className={styles.cardMeta}>
+                <code>{server.command} {server.args.join(' ')}</code>
+              </div>
+            </div>
+            <div className={styles.cardActions}>
+              <Button onClick={() => handleEdit(i)}>{t('edit')}</Button>
+              <button className={styles.deleteBtn} onClick={() => setDeleteTarget({ name: server.name, index: i })}>
+                <IconTrashOutlineRegular />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {showEditModal && (
+        <Modal
+          open
+          onClose={() => setShowEditModal(false)}
+          title={editIndex !== null ? t('edit') : t('add')}
+          closeLabel={t('close')}
+          className={styles.dialogMcp ?? ''}
+          footer={(
+            <>
+              <Button onClick={handleSaveJson} disabled={saving}>{t('save')}</Button>
+              <Button onClick={() => setShowEditModal(false)}>{t('cancel')}</Button>
+            </>
+          )}
+        >
+          <div className={styles.modalBody}>
+            {editError && <div className={styles.error}>{editError}</div>}
+            <textarea
+              className={styles.jsonEditor}
+              value={editJson}
+              onChange={e => setEditJson(e.target.value)}
+              rows={16}
+              spellCheck={false}
+            />
+          </div>
+        </Modal>
+      )}
+
+      {deleteTarget && (
+        <Modal
+          open
+          onClose={() => setDeleteTarget(null)}
+          title={t('remove')}
+          closeLabel={t('close')}
+          className={styles.dialogMcp ?? ''}
+          footer={(
+            <>
+              <Button onClick={() => handleDelete(deleteTarget.index)}>{t('remove')}</Button>
+              <Button onClick={() => setDeleteTarget(null)}>{t('cancel')}</Button>
+            </>
+          )}
+        >
+          <div className={styles.modalBody}>
+            <p>{t('deleteConfirm').replace('{server}', deleteTarget.name)}</p>
+            <p>{t('deleteDescription')}</p>
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+