feat: upgrade MCP to Docker-based architecture (Beta)

Each MCP server can now run as its own Docker container on a dedicated
per-project bridge network, enabling proper isolation and lifecycle
management. SSE transport is removed (deprecated per MCP spec) with
backward-compatible serde alias. Docker socket access is auto-enabled
when stdio+Docker MCP servers are configured.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/src/components/layout/Sidebar.tsx

@@ -24,7 +24,7 @@ export default function Sidebar() {
           Projects
         </button>
         <button onClick={() => setSidebarView("mcp")} className={tabCls("mcp")}>
-          MCP
+          MCP <span className="text-[0.6rem] px-1 py-0.5 rounded bg-yellow-500/20 text-yellow-400 ml-0.5">Beta</span>
         </button>
         <button onClick={() => setSidebarView("settings")} className={tabCls("settings")}>
           Settings

app/src/components/mcp/McpPanel.tsx

@@ -26,7 +26,10 @@ export default function McpPanel() {
   return (
     <div className="space-y-3 p-2">
       <div>
-        <h2 className="text-sm font-semibold text-[var(--text-primary)]">MCP Servers</h2>
+        <h2 className="text-sm font-semibold text-[var(--text-primary)]">
+          MCP Servers{" "}
+          <span className="text-xs px-1.5 py-0.5 rounded bg-yellow-500/20 text-yellow-400">Beta</span>
+        </h2>
         <p className="text-xs text-[var(--text-secondary)] mt-0.5">
           Define MCP servers globally, then enable them per-project.
         </p>

app/src/components/mcp/McpServerCard.tsx

@@ -16,6 +16,8 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
   const [envPairs, setEnvPairs] = useState<[string, string][]>(Object.entries(server.env));
   const [url, setUrl] = useState(server.url ?? "");
   const [headerPairs, setHeaderPairs] = useState<[string, string][]>(Object.entries(server.headers));
+  const [dockerImage, setDockerImage] = useState(server.docker_image ?? "");
+  const [containerPort, setContainerPort] = useState(server.container_port?.toString() ?? "3000");
 
   useEffect(() => {
     setName(server.name);
@@ -25,6 +27,8 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
     setEnvPairs(Object.entries(server.env));
     setUrl(server.url ?? "");
     setHeaderPairs(Object.entries(server.headers));
+    setDockerImage(server.docker_image ?? "");
+    setContainerPort(server.container_port?.toString() ?? "3000");
   }, [server]);
 
   const saveServer = async (patch: Partial<McpServer>) => {
@@ -57,6 +61,15 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
     saveServer({ url: url || null });
   };
 
+  const handleDockerImageBlur = () => {
+    saveServer({ docker_image: dockerImage || null });
+  };
+
+  const handleContainerPortBlur = () => {
+    const port = parseInt(containerPort, 10);
+    saveServer({ container_port: isNaN(port) ? null : port });
+  };
+
   const saveEnv = (pairs: [string, string][]) => {
     const env: Record<string, string> = {};
     for (const [k, v] of pairs) {
@@ -75,12 +88,15 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
 
   const inputCls = "w-full px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]";
 
+  const isDocker = !!dockerImage;
+
   const transportBadge = {
     stdio: "Stdio",
     http: "HTTP",
-    sse: "SSE",
   }[transportType];
 
+  const modeBadge = isDocker ? "Docker" : "Manual";
+
   return (
     <div className="border border-[var(--border-color)] rounded bg-[var(--bg-primary)]">
       {/* Header */}
@@ -94,6 +110,9 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
           <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)]">
             {transportBadge}
           </span>
+          <span className={`text-xs px-1.5 py-0.5 rounded ${isDocker ? "bg-blue-500/20 text-blue-400" : "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"}`}>
+            {modeBadge}
+          </span>
         </button>
         <button
           onClick={() => { if (confirm(`Remove MCP server "${server.name}"?`)) onRemove(server.id); }}
@@ -117,11 +136,26 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
             />
           </div>
 
+          {/* Docker Image (primary field — determines Docker vs Manual mode) */}
+          <div>
+            <label className="block text-xs text-[var(--text-secondary)] mb-0.5">Docker Image</label>
+            <input
+              value={dockerImage}
+              onChange={(e) => setDockerImage(e.target.value)}
+              onBlur={handleDockerImageBlur}
+              placeholder="e.g. mcp/filesystem:latest (leave empty for manual mode)"
+              className={inputCls}
+            />
+            <p className="text-xs text-[var(--text-secondary)] mt-0.5 opacity-60">
+              Set a Docker image to run this MCP server as a container. Leave empty for manual mode.
+            </p>
+          </div>
+
           {/* Transport type */}
           <div>
             <label className="block text-xs text-[var(--text-secondary)] mb-0.5">Transport</label>
             <div className="flex items-center gap-1">
-              {(["stdio", "http", "sse"] as McpTransportType[]).map((t) => (
+              {(["stdio", "http"] as McpTransportType[]).map((t) => (
                 <button
                   key={t}
                   onClick={() => handleTransportChange(t)}
@@ -131,12 +165,29 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
                       : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]"
                   }`}
                 >
-                  {t === "stdio" ? "Stdio" : t === "http" ? "HTTP" : "SSE"}
+                  {t === "stdio" ? "Stdio" : "HTTP"}
                 </button>
               ))}
             </div>
           </div>
 
+          {/* Container Port (HTTP+Docker only) */}
+          {transportType === "http" && isDocker && (
+            <div>
+              <label className="block text-xs text-[var(--text-secondary)] mb-0.5">Container Port</label>
+              <input
+                value={containerPort}
+                onChange={(e) => setContainerPort(e.target.value)}
+                onBlur={handleContainerPortBlur}
+                placeholder="3000"
+                className={inputCls}
+              />
+              <p className="text-xs text-[var(--text-secondary)] mt-0.5 opacity-60">
+                Port inside the MCP container (default: 3000)
+              </p>
+            </div>
+          )}
+
           {/* Stdio fields */}
           {transportType === "stdio" && (
             <>
@@ -146,7 +197,7 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
                   value={command}
                   onChange={(e) => setCommand(e.target.value)}
                   onBlur={handleCommandBlur}
-                  placeholder="npx"
+                  placeholder={isDocker ? "Command inside container" : "npx"}
                   className={inputCls}
                 />
               </div>
@@ -169,8 +220,8 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
             </>
           )}
 
-          {/* HTTP/SSE fields */}
-          {(transportType === "http" || transportType === "sse") && (
+          {/* HTTP fields (only for manual mode — Docker mode auto-generates URL) */}
+          {transportType === "http" && !isDocker && (
             <>
               <div>
                 <label className="block text-xs text-[var(--text-secondary)] mb-0.5">URL</label>
@@ -190,6 +241,16 @@ export default function McpServerCard({ server, onUpdate, onRemove }: Props) {
               />
             </>
           )}
+
+          {/* Environment variables for HTTP+Docker */}
+          {transportType === "http" && isDocker && (
+            <KeyValueEditor
+              label="Environment Variables"
+              pairs={envPairs}
+              onChange={(pairs) => { setEnvPairs(pairs); }}
+              onSave={saveEnv}
+            />
+          )}
         </div>
       )}
     </div>

app/src/components/projects/ProjectCard.tsx

@@ -622,6 +622,7 @@ export default function ProjectCard({ project }: Props) {
                   <div className="space-y-1">
                     {mcpServers.map((server) => {
                       const enabled = project.enabled_mcp_servers.includes(server.id);
+                      const isDocker = !!server.docker_image;
                       return (
                         <label key={server.id} className="flex items-center gap-2 cursor-pointer">
                           <input
@@ -642,10 +643,18 @@ export default function ProjectCard({ project }: Props) {
                           />
                           <span className="text-xs text-[var(--text-primary)]">{server.name}</span>
                           <span className="text-xs text-[var(--text-secondary)]">({server.transport_type})</span>
+                          <span className={`text-xs px-1 py-0.5 rounded ${isDocker ? "bg-blue-500/20 text-blue-400" : "bg-[var(--bg-secondary)] text-[var(--text-secondary)]"}`}>
+                            {isDocker ? "Docker" : "Manual"}
+                          </span>
                         </label>
                       );
                     })}
                   </div>
+                  {mcpServers.some((s) => s.docker_image && s.transport_type === "stdio" && project.enabled_mcp_servers.includes(s.id)) && (
+                    <p className="text-xs text-[var(--text-secondary)] mt-1 opacity-70">
+                      Docker access will be auto-enabled for stdio+Docker MCP servers.
+                    </p>
+                  )}
                 </div>
               )}