feat(web): add mcp server toggle and fix dialog overflow

Author: notdp

web/src/components/CommandsManager.tsx

@@ -263,12 +263,12 @@ export default function CommandsManager() {
 
       {/* Add Dialog */}
       <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-2xl h-[min(80vh,600px)] flex flex-col">
           <DialogHeader>
             <DialogTitle>Create New Command</DialogTitle>
             <DialogDescription>Create a new command with name, description and content.</DialogDescription>
           </DialogHeader>
-          <div className="space-y-4">
+          <div className="flex flex-col flex-1 min-h-0 gap-4">
             <div className="space-y-2">
               <label className="text-sm font-medium">Name (without slash)</label>
               <Input
@@ -285,10 +285,10 @@ export default function CommandsManager() {
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewCommandDescription(e.target.value)}
               />
             </div>
-            <div className="space-y-2">
+            <div className="flex flex-col flex-1 min-h-0 space-y-2">
               <label className="text-sm font-medium">Content</label>
               <Textarea
-                className="min-h-[200px] font-mono"
+                className="flex-1 min-h-[100px] font-mono resize-none"
                 placeholder="# Your Command&#10;&#10;Instructions here..."
                 value={newCommandContent}
                 onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewCommandContent(e.target.value)}

web/src/components/McpManager.tsx

@@ -15,6 +15,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Switch } from '@/components/ui/switch';
 import { listMcpServers, removeMcpServer, updateMcpServer, type McpServer } from '@/utils/api';
 
 export default function McpManager() {
@@ -63,10 +64,27 @@ export default function McpManager() {
     setEditConfig(getServerConfig(server));
   };
 
+  const parseServerConfig = (json: string, serverName: string) => {
+    const parsed = JSON.parse(json);
+    // Handle full mcpServers format: { "mcpServers": { "name": { ... } } }
+    if (parsed.mcpServers && typeof parsed.mcpServers === 'object') {
+      const servers = parsed.mcpServers;
+      const keys = Object.keys(servers);
+      if (keys.length === 1) {
+        return servers[keys[0]];
+      }
+      if (servers[serverName]) {
+        return servers[serverName];
+      }
+      throw new Error(`Server "${serverName}" not found in mcpServers`);
+    }
+    return parsed;
+  };
+
   const handleSaveEdit = async () => {
     if (!editingServer) return;
     try {
-      const config = JSON.parse(editConfig);
+      const config = parseServerConfig(editConfig, editingServer.name);
       await updateMcpServer(editingServer.name, config);
       setEditingServer(null);
       await loadServers();
@@ -78,7 +96,7 @@ export default function McpManager() {
   const handleAdd = async () => {
     if (!newServerName.trim()) return;
     try {
-      const config = JSON.parse(newServerConfig);
+      const config = parseServerConfig(newServerConfig, newServerName.trim());
       await updateMcpServer(newServerName.trim(), config);
       setNewServerName('');
       setNewServerConfig('{\n  "type": "stdio",\n  "command": "npx",\n  "args": ["-y", "package-name"]\n}');
@@ -100,6 +118,17 @@ export default function McpManager() {
     setServerToDelete(null);
   };
 
+  const handleToggleEnabled = async (server: McpServer) => {
+    try {
+      const config = { ...server, disabled: !server.disabled };
+      delete (config as Record<string, unknown>).name;
+      await updateMcpServer(server.name, config);
+      await loadServers();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to toggle');
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -163,6 +192,13 @@ export default function McpManager() {
                     className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-muted/50"
                     onClick={() => setExpandedServer(isExpanded ? null : server.name)}
                   >
+                    <div onClick={(e) => e.stopPropagation()}>
+                      <Switch
+                        checked={!server.disabled}
+                        onCheckedChange={() => handleToggleEnabled(server)}
+                        title={server.disabled ? 'Enable' : 'Disable'}
+                      />
+                    </div>
                     <div className="text-muted-foreground">
                       {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                     </div>
@@ -178,33 +214,33 @@ export default function McpManager() {
                       </p>
                     </div>
                     <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => e.stopPropagation()}>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={() => handleCopy(server)}
-                        title="Copy config"
-                      >
-                        {copiedServer === server.name ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={() => handleEdit(server)}
-                        title="Edit"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-                        onClick={() => setServerToDelete(server.name)}
-                        title="Delete"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => handleCopy(server)}
+                          title="Copy config"
+                        >
+                          {copiedServer === server.name ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => handleEdit(server)}
+                          title="Edit"
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                          onClick={() => setServerToDelete(server.name)}
+                          title="Delete"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
                     </div>
                   </div>
                   {isExpanded && (

web/src/utils/api.ts

@@ -228,6 +228,9 @@ export interface McpServer {
   args?: string[];
   url?: string;
   env?: Record<string, string>;
+  disabled?: boolean;
+  alwaysAllow?: string[];
+  [key: string]: unknown;
 }
 
 export interface CustomModel {