Add MCP section to config web UI

web/frontend/src/components/config/config-page.tsx

@@ -22,16 +22,19 @@ import {
   DevicesSection,
   ExecSection,
   LauncherSection,
+  MCPSection,
   RuntimeSection,
 } from "@/components/config/config-sections"
 import {
   type CoreConfigForm,
   EMPTY_FORM,
   EMPTY_LAUNCHER_FORM,
   type LauncherForm,
+  type MCPServerForm,
   buildFormFromConfig,
   parseCIDRText,
   parseIntField,
+  parseJSONObjectField,
   parseMultilineList,
 } from "@/components/config/form-model"
 import { PageHeader } from "@/components/page-header"
@@ -143,6 +146,44 @@ export function ConfigPage() {
     setLauncherForm((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleMCPServerAdd = () => {
+    const nextIndex = form.mcpServers.length + 1
+    const server: MCPServerForm = {
+      id: `mcp-${Date.now()}-${nextIndex}`,
+      name: "",
+      enabled: true,
+      deferredOverride: null,
+      type: "stdio",
+      url: "",
+      command: "",
+      argsText: "",
+      envText: "{}",
+      envFile: "",
+      headersText: "{}",
+    }
+    updateField("mcpServers", [...form.mcpServers, server])
+  }
+
+  const handleMCPServerRemove = (id: string) => {
+    updateField(
+      "mcpServers",
+      form.mcpServers.filter((server) => server.id !== id),
+    )
+  }
+
+  const handleMCPServerFieldChange = <K extends keyof MCPServerForm>(
+    id: string,
+    key: K,
+    value: MCPServerForm[K],
+  ) => {
+    updateField(
+      "mcpServers",
+      form.mcpServers.map((server) =>
+        server.id === id ? { ...server, [key]: value } : server,
+      ),
+    )
+  }
+
   const handleReset = () => {
     setForm(baseline)
     setLauncherForm(launcherBaseline)
@@ -178,6 +219,17 @@ export function ConfigPage() {
           throw new Error("Session scope is required.")
         }
 
+        if (
+          form.mcpEnabled &&
+          form.mcpDiscoveryEnabled &&
+          !form.mcpDiscoveryUseBM25 &&
+          !form.mcpDiscoveryUseRegex
+        ) {
+          throw new Error(
+            "MCP discovery requires at least one search method (BM25 or regex).",
+          )
+        }
+
         const maxTokens = parseIntField(form.maxTokens, "Max tokens", {
           min: 1,
         })
@@ -214,10 +266,144 @@ export function ConfigPage() {
           "Cron exec timeout",
           { min: 0 },
         )
+        const mcpDiscoveryValidationEnabled =
+          form.mcpEnabled && form.mcpDiscoveryEnabled
+        const mcpDiscoveryPatch: Record<string, unknown> = {
+          enabled: form.mcpDiscoveryEnabled,
+          use_bm25: form.mcpDiscoveryUseBM25,
+          use_regex: form.mcpDiscoveryUseRegex,
+        }
+
+        if (mcpDiscoveryValidationEnabled) {
+          mcpDiscoveryPatch.ttl = parseIntField(
+            form.mcpDiscoveryTTL,
+            "MCP discovery ttl",
+            {
+              min: 0,
+            },
+          )
+          mcpDiscoveryPatch.max_search_results = parseIntField(
+            form.mcpDiscoveryMaxSearchResults,
+            "MCP discovery max search results",
+            { min: 0 },
+          )
+        }
         const execConfigPatch: Record<string, unknown> = {
           enabled: form.execEnabled,
         }
 
+        const baselineServerNames = new Set(
+          baseline.mcpServers
+            .map((server) => server.name.trim())
+            .filter((name) => name !== ""),
+        )
+
+        const normalizedServers = form.mcpServers
+          .map((server) => ({
+            ...server,
+            name: server.name.trim(),
+            url: server.url.trim(),
+            command: server.command.trim(),
+            envFile: server.envFile.trim(),
+          }))
+          .filter((server) => server.name !== "")
+
+        const serverNameCounts = new Map<string, number>()
+        for (const server of normalizedServers) {
+          serverNameCounts.set(
+            server.name,
+            (serverNameCounts.get(server.name) ?? 0) + 1,
+          )
+        }
+
+        const duplicateNames = Array.from(serverNameCounts.entries())
+          .filter(([, count]) => count > 1)
+          .map(([name]) => name)
+          .sort((a, b) => a.localeCompare(b))
+
+        if (duplicateNames.length > 0) {
+          throw new Error(
+            `MCP server names must be unique. Duplicates: ${duplicateNames.join(", ")}.`,
+          )
+        }
+
+        const currentServerNames = new Set(
+          normalizedServers.map((server) => server.name),
+        )
+
+        const removedServerEntries = Array.from(baselineServerNames)
+          .filter((name) => !currentServerNames.has(name))
+          .map((name) => [name, null] as const)
+
+        const upsertServerEntries = normalizedServers.map((server) => {
+          const deferredPatch = { deferred: server.deferredOverride }
+
+          if (server.type !== "stdio") {
+            if (server.url === "") {
+              throw new Error(`MCP server ${server.name} requires a URL.`)
+            }
+
+            try {
+              const parsedURL = new URL(server.url)
+              if (
+                parsedURL.protocol !== "http:" &&
+                parsedURL.protocol !== "https:"
+              ) {
+                throw new Error("invalid protocol")
+              }
+            } catch {
+              throw new Error(
+                `MCP server ${server.name} requires a valid HTTP(S) URL.`,
+              )
+            }
+
+            return [
+              server.name,
+              {
+                ...deferredPatch,
+                enabled: server.enabled,
+                type: server.type,
+                url: server.url,
+                headers: parseJSONObjectField(
+                  server.headersText,
+                  `MCP server ${server.name} headers`,
+                ),
+                command: null,
+                args: null,
+                env: null,
+                env_file: null,
+              },
+            ] as const
+          }
+
+          if (server.command === "") {
+            throw new Error(`MCP server ${server.name} requires a command.`)
+          }
+
+          return [
+            server.name,
+            {
+              ...deferredPatch,
+              enabled: server.enabled,
+              type: "stdio",
+              command: server.command,
+              args: parseMultilineList(server.argsText),
+              env: parseJSONObjectField(
+                server.envText,
+                `MCP server ${server.name} env`,
+              ),
+              env_file: server.envFile === "" ? null : server.envFile,
+              url: null,
+              headers: null,
+            },
+          ] as const
+        })
+
+        const mcpServersPatch = Object.fromEntries([
+          ...upsertServerEntries,
+          ...removedServerEntries,
+        ])
+
         if (form.execEnabled) {
           execConfigPatch.allow_remote = form.allowRemote
           execConfigPatch.enable_deny_patterns = form.enableDenyPatterns
@@ -264,6 +450,11 @@ export function ConfigPage() {
               exec_timeout_minutes: cronExecTimeoutMinutes,
             },
             exec: execConfigPatch,
+            mcp: {
+              enabled: form.mcpEnabled,
+              discovery: mcpDiscoveryPatch,
+              servers: mcpServersPatch,
+            },
           },
           heartbeat: {
             enabled: form.heartbeatEnabled,
@@ -414,6 +605,14 @@ export function ConfigPage() {
 
               <RuntimeSection form={form} onFieldChange={updateField} />
 
+              <MCPSection
+                form={form}
+                onFieldChange={updateField}
+                onAddServer={handleMCPServerAdd}
+                onRemoveServer={handleMCPServerRemove}
+                onServerFieldChange={handleMCPServerFieldChange}
+              />
+
               <ExecSection form={form} onFieldChange={updateField} />
 
               <CronSection form={form} onFieldChange={updateField} />