@trops/dash-core 0.1.65 → 0.1.67

package/dist/index.js

@@ -26533,94 +26533,105 @@ var ProviderDetail = function ProviderDetail(_ref) {
             text: isMcp ? "MCP Server" : "API Credentials"
           })]
         })]
-      }), isMcp && provider.mcpConfig && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-4",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "border-t border-white/10 pt-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider mb-3",
-            children: "MCP Server Configuration"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-2 text-sm",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-50 w-20",
-                children: "Transport:"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                children: provider.mcpConfig.transport === "streamable_http" ? "Streamable HTTP" : "stdio"
-              })]
-            }), provider.mcpConfig.transport === "streamable_http" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-50 w-20",
-                children: "Endpoint:"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs opacity-70",
-                children: "Remote hosted server"
-              })]
-            }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      }), isMcp && provider.mcpConfig && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-4",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "border-t border-white/10 pt-4",
+            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider mb-3",
+              children: "Server Configuration"
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "space-y-2 text-sm",
               children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex gap-2",
                 children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                   className: "opacity-50 w-20",
-                  children: "Command:"
-                }), /*#__PURE__*/jsxRuntime.jsxs("code", {
-                  className: "text-xs bg-white/5 px-2 py-0.5 rounded",
-                  children: [provider.mcpConfig.command, " ", (provider.mcpConfig.args || []).join(" ")]
+                  children: "Transport:"
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  children: provider.mcpConfig.transport === "streamable_http" ? "Streamable HTTP" : "stdio"
                 })]
-              }), provider.mcpConfig.envMapping && Object.keys(provider.mcpConfig.envMapping).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+              }), provider.mcpConfig.transport === "streamable_http" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex gap-2",
                 children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                   className: "opacity-50 w-20",
-                  children: "Env Vars:"
+                  children: "Endpoint:"
                 }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "text-xs",
-                  children: Object.keys(provider.mcpConfig.envMapping).join(", ")
+                  className: "text-xs opacity-70",
+                  children: "Remote hosted server"
+                })]
+              }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20",
+                    children: "Command:"
+                  }), /*#__PURE__*/jsxRuntime.jsxs("code", {
+                    className: "text-xs bg-white/5 px-2 py-0.5 rounded",
+                    children: [provider.mcpConfig.command, " ", (provider.mcpConfig.args || []).join(" ")]
+                  })]
+                }), provider.mcpConfig.envMapping && Object.keys(provider.mcpConfig.envMapping).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "opacity-50 w-20",
+                    children: "Env Vars:"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-xs",
+                    children: Object.keys(provider.mcpConfig.envMapping).join(", ")
+                  })]
                 })]
               })]
             })]
-          })]
-        }), authResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: authResult.success ? "circle-check" : "circle-exclamation"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: authResult.message
-            })]
-          })
-        }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: testResult.success ? "circle-check" : "circle-exclamation"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: testResult.message
-            })]
           })
-        }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
-          tools: testResult.tools,
-          selectedTools: selectedTools,
-          onSelectionChange: setSelectedTools
-        }), !testResult && (provider === null || provider === void 0 ? void 0 : provider.allowedTools) && provider.allowedTools.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "Allowed Tools"
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex flex-wrap gap-1",
-            children: provider.allowedTools.map(function (tool) {
-              return /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs font-mono px-2 py-0.5 rounded bg-white/5 opacity-70",
-                children: tool
-              }, tool);
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "border-t border-white/10 pt-4",
+            children: /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider mb-3",
+              children: "Connection & Tools"
             })
-          }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-            className: "text-xs opacity-40",
-            children: [provider.allowedTools.length, " tool", provider.allowedTools.length !== 1 ? "s" : "", " allowed \u2014 test connection to modify"]
+          }), authResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: authResult.success ? "circle-check" : "circle-exclamation"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: authResult.message
+              })]
+            })
+          }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: testResult.success ? "circle-check" : "circle-exclamation"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: testResult.message
+              })]
+            })
+          }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
+            tools: testResult.tools,
+            selectedTools: selectedTools,
+            onSelectionChange: setSelectedTools
+          }), !testResult && (provider === null || provider === void 0 ? void 0 : provider.allowedTools) && provider.allowedTools.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "space-y-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-wrap gap-1",
+              children: provider.allowedTools.map(function (tool) {
+                return /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-xs font-mono px-2 py-0.5 rounded bg-white/5 opacity-70",
+                  children: tool
+                }, tool);
+              })
+            }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+              className: "text-xs opacity-40",
+              children: [provider.allowedTools.length, " tool", provider.allowedTools.length !== 1 ? "s" : "", " allowed \u2014 test connection to modify"]
+            })]
+          }), !testResult && (!(provider !== null && provider !== void 0 && provider.allowedTools) || provider.allowedTools.length === 0) && /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: "text-sm opacity-40",
+            children: "No tools configured \u2014 use Test Connection to discover available tools."
           })]
         })]
       })]
@@ -26817,19 +26828,25 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     selectedTools = _useState22[0],
     setSelectedTools = _useState22[1];
 
-  // JSON editor state
-  var _useState23 = React.useState("form"),
+  // Wizard step state
+  var _useState23 = React.useState(0),
     _useState24 = _slicedToArray(_useState23, 2),
-    viewMode = _useState24[0],
-    setViewMode = _useState24[1]; // "form" | "json"
-  var _useState25 = React.useState(""),
+    wizardStep = _useState24[0],
+    setWizardStep = _useState24[1];
+
+  // JSON editor state
+  var _useState25 = React.useState("form"),
     _useState26 = _slicedToArray(_useState25, 2),
-    jsonText = _useState26[0],
-    setJsonText = _useState26[1];
-  var _useState27 = React.useState(null),
+    viewMode = _useState26[0],
+    setViewMode = _useState26[1]; // "form" | "json"
+  var _useState27 = React.useState(""),
     _useState28 = _slicedToArray(_useState27, 2),
-    jsonError = _useState28[0],
-    setJsonError = _useState28[1];
+    jsonText = _useState28[0],
+    setJsonText = _useState28[1];
+  var _useState29 = React.useState(null),
+    _useState30 = _slicedToArray(_useState29, 2),
+    jsonError = _useState30[0],
+    setJsonError = _useState30[1];
 
   // Clear credential data when transport changes (derived fields change entirely)
   // Only in create mode — in edit mode the initial transport is set correctly
@@ -26840,6 +26857,23 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     }
   }, [transport, isEditMode]);
 
+  // Wizard step navigation with validation gates
+  var handleWizardStepChange = function handleWizardStepChange(newStep) {
+    if (newStep < wizardStep) {
+      setWizardStep(newStep);
+      return;
+    }
+    // Step 0→1: validate form (skip validation in JSON mode, handled on save)
+    if (wizardStep === 0 && newStep >= 1) {
+      if (viewMode === "form" && !validateForm()) return;
+    }
+    // Step 1→2: require test success OR edit mode with existing tools
+    if (wizardStep === 1 && newStep >= 2) {
+      if (!(testResult !== null && testResult !== void 0 && testResult.success) && !(isEditMode && initialAllowedTools)) return;
+    }
+    setWizardStep(newStep);
+  };
+
   // Build mcpConfig from current state
   var mcpConfig = React.useMemo(function () {
     return buildMcpConfig(transport, {
@@ -26851,6 +26885,16 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     });
   }, [transport, command, args, envMappingRows, url, headerRows]);
 
+  // Invalidate test result when config changes after a test
+  var mcpConfigRef = React.useRef(mcpConfig);
+  React.useEffect(function () {
+    if (mcpConfigRef.current !== mcpConfig && testResult) {
+      setTestResult(null);
+      setSelectedTools(initialAllowedTools);
+    }
+    mcpConfigRef.current = mcpConfig;
+  }, [mcpConfig, testResult, initialAllowedTools]);
+
   // Derive credential fields from the live mcpConfig
   var formFields = React.useMemo(function () {
     return deriveFormFields(mcpConfig, initialCredentialSchema);
@@ -27051,414 +27095,487 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col flex-1 min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-5",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          onClick: onBack,
-          className: "text-gray-400 hover:text-gray-200 transition-colors",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "arrow-left",
-            className: "text-lg"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: isEditMode ? "Edit MCP Server" : "Configure Custom MCP Server",
-            padding: false
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm opacity-50 mt-1",
-            children: isEditMode ? "Modify this MCP server configuration" : "Define a custom MCP server connection"
-          })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-          label: "Provider Name",
-          required: true
-        }), /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-sm opacity-50",
-          children: "A name to identify this MCP server (e.g., \"My Custom Server\")"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-          value: providerName,
-          onChange: function onChange(value) {
-            setProviderName(value);
-            if (formErrors.providerName && value !== null && value !== void 0 && value.trim()) {
-              setFormErrors(function (prev) {
-                var next = _objectSpread$5({}, prev);
-                delete next.providerName;
-                return next;
-              });
-            }
-          },
-          placeholder: "Enter provider name"
-        }), formErrors.providerName && /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-sm text-red-400",
-          children: formErrors.providerName
-        })]
+      className: "flex items-center gap-3 px-6 pt-6 pb-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+        onClick: onBack,
+        className: "text-gray-400 hover:text-gray-200 transition-colors",
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "text-lg"
+        })
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-1",
-        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          onClick: function onClick() {
-            if (viewMode === "json") handleSwitchToForm();
-          },
-          className: "px-3 py-1 text-xs font-medium rounded-l transition-colors ".concat(viewMode === "form" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
-          children: "Form"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          onClick: function onClick() {
-            if (viewMode === "form") handleSwitchToJson();
-          },
-          className: "px-3 py-1 text-xs font-medium rounded-r transition-colors ".concat(viewMode === "json" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
-          children: "JSON"
-        })]
-      }), jsonError && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-sm text-red-400",
-        children: jsonError
-      }), viewMode === "json" && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-          children: "MCP Server Configuration (JSON)"
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+          title: isEditMode ? "Edit MCP Server" : "Configure Custom MCP Server",
+          padding: false
         }), /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-sm opacity-50",
-          children: "Paste a standard MCP config JSON (compatible with Claude Desktop, Cursor, etc.)"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.CodeEditorInline, {
-          code: jsonText,
-          setCode: function setCode(val) {
-            setJsonText(val);
-            setJsonError(null);
-          },
-          language: "json",
-          placeholder: '{\n  "type": "stdio",\n  "command": "npx",\n  "args": ["-y", "package-name"],\n  "env": {\n    "API_KEY": "${API_KEY}"\n  }\n}'
+          className: "text-sm opacity-50 mt-1",
+          children: isEditMode ? "Modify this MCP server configuration" : "Define a custom MCP server connection"
         })]
-      }), viewMode === "form" && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "Transport Type"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "grid grid-cols-2 gap-3",
-            children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
-              hover: true,
-              selected: transport === "stdio",
-              onClick: function onClick() {
-                return setTransport("stdio");
-              },
-              className: "text-left",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-2 mb-1",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
-                  icon: "terminal"
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "font-semibold text-sm",
-                  children: "Local Process (stdio)"
-                })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 min-h-0 flex flex-col",
+      children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+        activeStep: wizardStep,
+        onStepChange: handleWizardStepChange,
+        showNavigation: false,
+        className: "flex-1 min-h-0 flex flex-col px-6 pt-4",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Configure",
+          description: "Server & credentials",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex flex-col gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                label: "Provider Name",
+                required: true
               }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-xs opacity-50",
-                children: "Spawn a local command as a child process"
+                className: "text-sm opacity-50",
+                children: "A name to identify this MCP server (e.g., \"My Custom Server\")"
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                value: providerName,
+                onChange: function onChange(value) {
+                  setProviderName(value);
+                  if (formErrors.providerName && value !== null && value !== void 0 && value.trim()) {
+                    setFormErrors(function (prev) {
+                      var next = _objectSpread$5({}, prev);
+                      delete next.providerName;
+                      return next;
+                    });
+                  }
+                },
+                placeholder: "Enter provider name"
+              }), formErrors.providerName && /*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm text-red-400",
+                children: formErrors.providerName
               })]
-            }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
-              hover: true,
-              selected: transport === "streamable_http",
-              onClick: function onClick() {
-                return setTransport("streamable_http");
-              },
-              className: "text-left",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-2 mb-1",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
-                  icon: "globe"
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "font-semibold text-sm",
-                  children: "Remote Server (HTTP)"
-                })]
-              }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-xs opacity-50",
-                children: "Connect to a remote MCP server via HTTP"
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-1",
+              children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                onClick: function onClick() {
+                  if (viewMode === "json") handleSwitchToForm();
+                },
+                className: "px-3 py-1 text-xs font-medium rounded-l transition-colors ".concat(viewMode === "form" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
+                children: "Form"
+              }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                onClick: function onClick() {
+                  if (viewMode === "form") handleSwitchToJson();
+                },
+                className: "px-3 py-1 text-xs font-medium rounded-r transition-colors ".concat(viewMode === "json" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
+                children: "JSON"
               })]
-            })]
-          })]
-        }), transport === "stdio" && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "border-t border-white/10 pt-4",
-            children: /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-              children: "Process Configuration"
-            })
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-              label: "Command",
-              required: true
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm opacity-50",
-              children: "The executable to run (e.g., npx, node, python)"
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-              value: command,
-              onChange: function onChange(value) {
-                setCommand(value);
-                if (formErrors.command && value !== null && value !== void 0 && value.trim()) {
-                  setFormErrors(function (prev) {
-                    var next = _objectSpread$5({}, prev);
-                    delete next.command;
-                    return next;
-                  });
-                }
-              },
-              placeholder: "e.g., npx"
-            }), formErrors.command && /*#__PURE__*/jsxRuntime.jsx("p", {
+            }), jsonError && /*#__PURE__*/jsxRuntime.jsx("p", {
               className: "text-sm text-red-400",
-              children: formErrors.command
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-              label: "Arguments"
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm opacity-50",
-              children: "Space-separated arguments passed to the command"
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-              value: args,
-              onChange: setArgs,
-              placeholder: "e.g., -y @modelcontextprotocol/server-github"
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-3",
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex items-center justify-between",
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-                  label: "Environment Variable Mapping"
-                }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                  className: "text-sm opacity-50 mt-1",
-                  children: "Map environment variables to credential fields"
+              children: jsonError
+            }), viewMode === "json" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "space-y-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                children: "MCP Server Configuration (JSON)"
+              }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm opacity-50",
+                children: "Paste a standard MCP config JSON (compatible with Claude Desktop, Cursor, etc.)"
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.CodeEditorInline, {
+                code: jsonText,
+                setCode: function setCode(val) {
+                  setJsonText(val);
+                  setJsonError(null);
+                },
+                language: "json",
+                placeholder: '{\n  "type": "stdio",\n  "command": "npx",\n  "args": ["-y", "package-name"],\n  "env": {\n    "API_KEY": "${API_KEY}"\n  }\n}'
+              })]
+            }), viewMode === "form" && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                  children: "Transport Type"
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "grid grid-cols-2 gap-3",
+                  children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
+                    hover: true,
+                    selected: transport === "stdio",
+                    onClick: function onClick() {
+                      return setTransport("stdio");
+                    },
+                    className: "text-left",
+                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-2 mb-1",
+                      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
+                        icon: "terminal"
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "font-semibold text-sm",
+                        children: "Local Process (stdio)"
+                      })]
+                    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-xs opacity-50",
+                      children: "Spawn a local command as a child process"
+                    })]
+                  }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
+                    hover: true,
+                    selected: transport === "streamable_http",
+                    onClick: function onClick() {
+                      return setTransport("streamable_http");
+                    },
+                    className: "text-left",
+                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-2 mb-1",
+                      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
+                        icon: "globe"
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "font-semibold text-sm",
+                        children: "Remote Server (HTTP)"
+                      })]
+                    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-xs opacity-50",
+                      children: "Connect to a remote MCP server via HTTP"
+                    })]
+                  })]
                 })]
-              })
-            }), envMappingRows.map(function (row) {
-              return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-2",
+              }), transport === "stdio" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-4",
                 children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    value: row.envVar,
-                    onChange: function onChange(value) {
-                      return updateEnvRow(row.id, "envVar", value);
-                    },
-                    placeholder: "ENV_VAR_NAME"
+                  className: "border-t border-white/10 pt-4",
+                  children: /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                    children: "Process Configuration"
                   })
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "opacity-30 text-sm shrink-0",
-                  children: "\u2192"
-                }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    value: row.credField,
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-col gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                    label: "Command",
+                    required: true
+                  }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-sm opacity-50",
+                    children: "The executable to run (e.g., npx, node, python)"
+                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: command,
                     onChange: function onChange(value) {
-                      return updateEnvRow(row.id, "credField", value);
+                      setCommand(value);
+                      if (formErrors.command && value !== null && value !== void 0 && value.trim()) {
+                        setFormErrors(function (prev) {
+                          var next = _objectSpread$5({}, prev);
+                          delete next.command;
+                          return next;
+                        });
+                      }
                     },
-                    placeholder: "credentialField"
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsx("button", {
-                  onClick: function onClick() {
-                    return removeEnvRow(row.id);
-                  },
-                  className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "times",
-                    className: "text-sm"
-                  })
-                })]
-              }, row.id);
-            }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-              onClick: addEnvRow,
-              className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "plus",
-                className: "text-xs"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                children: "Add Environment Variable"
-              })]
-            })]
-          })]
-        }), transport === "streamable_http" && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "border-t border-white/10 pt-4",
-            children: /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-              children: "Server Configuration"
-            })
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-              label: "Server URL",
-              required: true
-            }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-              className: "text-sm opacity-50",
-              children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
-                className: "text-xs bg-white/10 px-1 py-0.5 rounded",
-                children: "{{fieldName}}"
-              }), " ", "for values provided as credentials"]
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-              value: url,
-              onChange: function onChange(value) {
-                setUrl(value);
-                if (formErrors.url && value !== null && value !== void 0 && value.trim()) {
-                  setFormErrors(function (prev) {
-                    var next = _objectSpread$5({}, prev);
-                    delete next.url;
-                    return next;
-                  });
-                }
-              },
-              placeholder: "e.g., https://mcp.example.com/sse"
-            }), formErrors.url && /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm text-red-400",
-              children: formErrors.url
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-3",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-                label: "Request Headers"
-              }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-                className: "text-sm opacity-50 mt-1",
-                children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
-                  className: "text-xs bg-white/10 px-1 py-0.5 rounded",
-                  children: "{{fieldName}}"
-                }), " ", "in values for credential placeholders"]
-              })]
-            }), headerRows.map(function (row) {
-              return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-2",
+                    placeholder: "e.g., npx"
+                  }), formErrors.command && /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-sm text-red-400",
+                    children: formErrors.command
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-col gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                    label: "Arguments"
+                  }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-sm opacity-50",
+                    children: "Space-separated arguments passed to the command"
+                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: args,
+                    onChange: setArgs,
+                    placeholder: "e.g., -y @modelcontextprotocol/server-github"
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "space-y-3",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "flex items-center justify-between",
+                    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                        label: "Environment Variable Mapping"
+                      }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                        className: "text-sm opacity-50 mt-1",
+                        children: "Map environment variables to credential fields"
+                      })]
+                    })
+                  }), envMappingRows.map(function (row) {
+                    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          value: row.envVar,
+                          onChange: function onChange(value) {
+                            return updateEnvRow(row.id, "envVar", value);
+                          },
+                          placeholder: "ENV_VAR_NAME"
+                        })
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "opacity-30 text-sm shrink-0",
+                        children: "\u2192"
+                      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          value: row.credField,
+                          onChange: function onChange(value) {
+                            return updateEnvRow(row.id, "credField", value);
+                          },
+                          placeholder: "credentialField"
+                        })
+                      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                        onClick: function onClick() {
+                          return removeEnvRow(row.id);
+                        },
+                        className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                          icon: "times",
+                          className: "text-sm"
+                        })
+                      })]
+                    }, row.id);
+                  }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+                    onClick: addEnvRow,
+                    className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                      icon: "plus",
+                      className: "text-xs"
+                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                      children: "Add Environment Variable"
+                    })]
+                  })]
+                })]
+              }), transport === "streamable_http" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-4",
                 children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    value: row.headerName,
-                    onChange: function onChange(value) {
-                      return updateHeaderRow(row.id, "headerName", value);
-                    },
-                    placeholder: "Header-Name"
+                  className: "border-t border-white/10 pt-4",
+                  children: /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                    children: "Server Configuration"
                   })
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "opacity-30 text-sm shrink-0",
-                  children: ":"
-                }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    value: row.headerValue,
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-col gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                    label: "Server URL",
+                    required: true
+                  }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+                    className: "text-sm opacity-50",
+                    children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+                      className: "text-xs bg-white/10 px-1 py-0.5 rounded",
+                      children: "{{fieldName}}"
+                    }), " ", "for values provided as credentials"]
+                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: url,
                     onChange: function onChange(value) {
-                      return updateHeaderRow(row.id, "headerValue", value);
+                      setUrl(value);
+                      if (formErrors.url && value !== null && value !== void 0 && value.trim()) {
+                        setFormErrors(function (prev) {
+                          var next = _objectSpread$5({}, prev);
+                          delete next.url;
+                          return next;
+                        });
+                      }
                     },
-                    placeholder: "Bearer {{apiKey}}"
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsx("button", {
-                  onClick: function onClick() {
-                    return removeHeaderRow(row.id);
-                  },
-                  className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "times",
-                    className: "text-sm"
-                  })
+                    placeholder: "e.g., https://mcp.example.com/sse"
+                  }), formErrors.url && /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-sm text-red-400",
+                    children: formErrors.url
+                  })]
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "space-y-3",
+                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                      label: "Request Headers"
+                    }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+                      className: "text-sm opacity-50 mt-1",
+                      children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+                        className: "text-xs bg-white/10 px-1 py-0.5 rounded",
+                        children: "{{fieldName}}"
+                      }), " ", "in values for credential placeholders"]
+                    })]
+                  }), headerRows.map(function (row) {
+                    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          value: row.headerName,
+                          onChange: function onChange(value) {
+                            return updateHeaderRow(row.id, "headerName", value);
+                          },
+                          placeholder: "Header-Name"
+                        })
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "opacity-30 text-sm shrink-0",
+                        children: ":"
+                      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          value: row.headerValue,
+                          onChange: function onChange(value) {
+                            return updateHeaderRow(row.id, "headerValue", value);
+                          },
+                          placeholder: "Bearer {{apiKey}}"
+                        })
+                      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                        onClick: function onClick() {
+                          return removeHeaderRow(row.id);
+                        },
+                        className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                          icon: "times",
+                          className: "text-sm"
+                        })
+                      })]
+                    }, row.id);
+                  }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+                    onClick: addHeaderRow,
+                    className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                      icon: "plus",
+                      className: "text-xs"
+                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                      children: "Add Header"
+                    })]
+                  })]
+                })]
+              }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "border-t border-white/10 pt-4",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                    children: "Credentials"
+                  }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-sm opacity-50 mt-1",
+                    children: "Values for the fields referenced in your configuration above"
+                  })]
+                }), formFields.map(function (field) {
+                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex flex-col gap-2",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                      label: field.displayName,
+                      required: field.required
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          type: field.secret ? "password" : "text",
+                          value: credentialData[field.key] || "",
+                          onChange: function onChange(value) {
+                            return handleCredentialChange(field.key, value);
+                          },
+                          placeholder: field.type === "file" ? "Select a file..." : "Enter ".concat(field.displayName.toLowerCase())
+                        })
+                      }), field.type === "file" && /*#__PURE__*/jsxRuntime.jsx("button", {
+                        onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                          var filepath;
+                          return _regeneratorRuntime.wrap(function (_context) {
+                            while (1) switch (_context.prev = _context.next) {
+                              case 0:
+                                _context.next = 1;
+                                return window.mainApi.dialog.chooseFile(true, ["json"]);
+                              case 1:
+                                filepath = _context.sent;
+                                if (filepath) handleCredentialChange(field.key, filepath);
+                              case 2:
+                              case "end":
+                                return _context.stop();
+                            }
+                          }, _callee);
+                        })),
+                        className: "px-3 py-1.5 text-sm rounded bg-white/10 hover:bg-white/20 transition-colors",
+                        children: "Browse"
+                      })]
+                    }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-sm text-red-400",
+                      children: formErrors[field.key]
+                    })]
+                  }, field.key);
                 })]
-              }, row.id);
-            }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-              onClick: addHeaderRow,
-              className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "plus",
-                className: "text-xs"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                children: "Add Header"
               })]
             })]
-          })]
-        }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "border-t border-white/10 pt-4",
-            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-              children: "Credentials"
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm opacity-50 mt-1",
-              children: "Values for the fields referenced in your configuration above"
-            })]
-          }), formFields.map(function (field) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-col gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-                label: field.displayName,
-                required: field.required
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex gap-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    type: field.secret ? "password" : "text",
-                    value: credentialData[field.key] || "",
-                    onChange: function onChange(value) {
-                      return handleCredentialChange(field.key, value);
-                    },
-                    placeholder: field.type === "file" ? "Select a file..." : "Enter ".concat(field.displayName.toLowerCase())
-                  })
-                }), field.type === "file" && /*#__PURE__*/jsxRuntime.jsx("button", {
-                  onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-                    var filepath;
-                    return _regeneratorRuntime.wrap(function (_context) {
-                      while (1) switch (_context.prev = _context.next) {
-                        case 0:
-                          _context.next = 1;
-                          return window.mainApi.dialog.chooseFile(true, ["json"]);
-                        case 1:
-                          filepath = _context.sent;
-                          if (filepath) handleCredentialChange(field.key, filepath);
-                        case 2:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }, _callee);
-                  })),
-                  className: "px-3 py-1.5 text-sm rounded bg-white/10 hover:bg-white/20 transition-colors",
-                  children: "Browse"
-                })]
-              }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-sm text-red-400",
-                children: formErrors[field.key]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Test",
+          description: "Verify connection",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex flex-col items-center justify-center py-8 space-y-4",
+              children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm opacity-60 text-center",
+                children: "Test the connection to verify your configuration is correct."
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                title: isTesting ? "Testing..." : "Test Connection",
+                onClick: handleTestConnection,
+                size: "md"
               })]
-            }, field.key);
-          })]
+            }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: testResult.success ? "circle-check" : "circle-exclamation"
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  children: testResult.message
+                })]
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+          label: "Tools",
+          description: "Select allowed tools",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: testResult !== null && testResult !== void 0 && testResult.success && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools ? /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
+              tools: testResult.tools,
+              selectedTools: selectedTools,
+              onSelectionChange: setSelectedTools
+            }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "text-center py-8 opacity-50",
+              children: "No tools available. Go back and test the connection first."
+            })
+          })
         })]
-      }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: testResult.success ? "circle-check" : "circle-exclamation"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: testResult.message
-          })]
-        })
-      }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
-        tools: testResult.tools,
-        selectedTools: selectedTools,
-        onSelectionChange: setSelectedTools
-      })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Cancel",
-        onClick: onBack,
-        size: "sm"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: isTesting ? "Testing..." : "Test Connection",
-        onClick: handleTestConnection,
-        size: "sm"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: isEditMode ? "Save Changes" : "Save MCP Server",
-        onClick: handleSave,
-        size: "sm"
+      className: "flex-shrink-0 flex flex-row items-center px-6 py-4 border-t border-white/10",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [wizardStep === 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Cancel",
+          onClick: onBack,
+          size: "sm"
+        }), wizardStep > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Back",
+          onClick: function onClick() {
+            return setWizardStep(wizardStep - 1);
+          },
+          size: "sm"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 text-center",
+        children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "text-xs opacity-40",
+          children: ["Step ", wizardStep + 1, " of 3"]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [wizardStep === 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Next",
+          onClick: function onClick() {
+            return handleWizardStepChange(1);
+          },
+          size: "sm"
+        }), wizardStep === 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: isTesting ? "Testing..." : "Test Connection",
+            onClick: handleTestConnection,
+            size: "sm"
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleWizardStepChange(2);
+            },
+            disabled: !(testResult !== null && testResult !== void 0 && testResult.success) && !(isEditMode && initialAllowedTools),
+            size: "sm"
+          })]
+        }), wizardStep === 2 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: isEditMode ? "Save Changes" : "Save MCP Server",
+          onClick: handleSave,
+          size: "sm"
+        })]
       })]
     })]
   });
@@ -27545,30 +27662,34 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     _useState20 = _slicedToArray(_useState19, 2),
     selectedTools = _useState20[0],
     setSelectedTools = _useState20[1];
+  var _useState21 = React.useState(0),
+    _useState22 = _slicedToArray(_useState21, 2),
+    wizardStep = _useState22[0],
+    setWizardStep = _useState22[1];
 
   // Configuration form state
-  var _useState21 = React.useState(""),
-    _useState22 = _slicedToArray(_useState21, 2),
-    providerName = _useState22[0],
-    setProviderName = _useState22[1];
-  var _useState23 = React.useState({}),
+  var _useState23 = React.useState(""),
     _useState24 = _slicedToArray(_useState23, 2),
-    credentialData = _useState24[0],
-    setCredentialData = _useState24[1];
+    providerName = _useState24[0],
+    setProviderName = _useState24[1];
   var _useState25 = React.useState({}),
     _useState26 = _slicedToArray(_useState25, 2),
-    formErrors = _useState26[0],
-    setFormErrors = _useState26[1];
+    credentialData = _useState26[0],
+    setCredentialData = _useState26[1];
+  var _useState27 = React.useState({}),
+    _useState28 = _slicedToArray(_useState27, 2),
+    formErrors = _useState28[0],
+    setFormErrors = _useState28[1];
 
   // Advanced config row state
-  var _useState27 = React.useState([]),
-    _useState28 = _slicedToArray(_useState27, 2),
-    envMappingRows = _useState28[0],
-    setEnvMappingRows = _useState28[1];
   var _useState29 = React.useState([]),
     _useState30 = _slicedToArray(_useState29, 2),
-    headerRows = _useState30[0],
-    setHeaderRows = _useState30[1];
+    envMappingRows = _useState30[0],
+    setEnvMappingRows = _useState30[1];
+  var _useState31 = React.useState([]),
+    _useState32 = _slicedToArray(_useState31, 2),
+    headerRows = _useState32[0],
+    setHeaderRows = _useState32[1];
   var rowIdRef = React.useRef(0);
   var nextRowId = function nextRowId() {
     return "cat_".concat(++rowIdRef.current);
@@ -27609,6 +27730,25 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     });
   });
 
+  // Wizard step navigation with validation gates
+  var handleWizardStepChange = function handleWizardStepChange(newStep) {
+    // Allow backward navigation freely
+    if (newStep < wizardStep) {
+      setWizardStep(newStep);
+      return;
+    }
+    // Step 0→1: validate the configure form + auth gate
+    if (wizardStep === 0 && newStep >= 1) {
+      if (!validateForm()) return;
+      if (selectedServer !== null && selectedServer !== void 0 && selectedServer.authCommand && !(authResult !== null && authResult !== void 0 && authResult.success)) return;
+    }
+    // Step 1→2: require successful test
+    if (wizardStep === 1 && newStep >= 2) {
+      if (!(testResult !== null && testResult !== void 0 && testResult.success)) return;
+    }
+    setWizardStep(newStep);
+  };
+
   // Handle server selection -> show configuration form
   var handleSelectServer = function handleSelectServer(server) {
     var _server$mcpConfig, _server$mcpConfig2;
@@ -27619,6 +27759,7 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     setProviderName(server.name);
     setCredentialData({});
     setFormErrors({});
+    setWizardStep(0);
     setEnvMappingRows(envMappingToRows((_server$mcpConfig = server.mcpConfig) === null || _server$mcpConfig === void 0 ? void 0 : _server$mcpConfig.envMapping, nextRowId));
     setHeaderRows(headerTemplateToRows((_server$mcpConfig2 = server.mcpConfig) === null || _server$mcpConfig2 === void 0 ? void 0 : _server$mcpConfig2.headerTemplate, nextRowId));
   };
@@ -27749,6 +27890,7 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     setFormErrors({});
     setEnvMappingRows([]);
     setHeaderRows([]);
+    setWizardStep(0);
   };
 
   // Prune credential data when form fields change (advanced config removed a field)
@@ -27776,205 +27918,281 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     });
   }
 
-  // ── Stage 2: Configuration Form ──
+  // ── Stage 2: Configuration Form (3-step Stepper) ──
   if (isConfiguring && selectedServer) {
     var _testResult$tools;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col flex-1 min-h-0",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-5",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-            onClick: handleBack,
-            className: "text-gray-400 hover:text-gray-200 transition-colors",
-            children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: "arrow-left",
-              className: "text-lg"
-            })
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-              title: "Configure ".concat(selectedServer.name),
-              padding: false
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm opacity-50 mt-1",
-              children: selectedServer.description || "Configure the MCP server connection"
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "MCP Server Connection"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-2 text-sm",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-50 w-24 shrink-0",
-                children: "Transport:"
-              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
-                text: effectiveMcpConfig.transport === "streamable_http" ? "Streamable HTTP" : "stdio"
-              })]
-            }), effectiveMcpConfig.transport === "streamable_http" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-50 w-24 shrink-0",
-                children: "Endpoint:"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs opacity-70",
-                children: "Remote hosted server (URL provided below)"
-              })]
-            }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex gap-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "opacity-50 w-24 shrink-0",
-                  children: "Command:"
-                }), /*#__PURE__*/jsxRuntime.jsxs("code", {
-                  className: "text-xs bg-white/5 px-2 py-0.5 rounded",
-                  children: [effectiveMcpConfig.command, " ", (effectiveMcpConfig.args || []).join(" ")]
-                })]
-              }), effectiveMcpConfig.envMapping && Object.keys(effectiveMcpConfig.envMapping).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex gap-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "opacity-50 w-24 shrink-0",
-                  children: "Env Vars:"
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "text-xs opacity-70",
-                  children: Object.keys(effectiveMcpConfig.envMapping).join(", ")
-                })]
-              })]
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx(AdvancedMcpConfig, {
-          transport: effectiveMcpConfig.transport || "stdio",
-          envMappingRows: envMappingRows,
-          onEnvMappingRowsChange: setEnvMappingRows,
-          headerRows: headerRows,
-          onHeaderRowsChange: setHeaderRows
+        className: "flex items-center gap-3 px-6 pt-6 pb-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: handleBack,
+          className: "text-gray-400 hover:text-gray-200 transition-colors",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "arrow-left",
+            className: "text-lg"
+          })
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-            label: "Provider Name",
-            required: true
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+            title: "Configure ".concat(selectedServer.name),
+            padding: false
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm opacity-50",
-            children: "A name to identify this MCP server instance (e.g., \"Algolia Production\")"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            value: providerName,
-            onChange: function onChange(value) {
-              setProviderName(value);
-              if (formErrors.providerName && value !== null && value !== void 0 && value.trim()) {
-                setFormErrors(function (prev) {
-                  var next = _objectSpread$4({}, prev);
-                  delete next.providerName;
-                  return next;
-                });
-              }
-            },
-            placeholder: "Enter provider name"
-          }), formErrors.providerName && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm text-red-400",
-            children: formErrors.providerName
+            className: "text-sm opacity-50 mt-1",
+            children: selectedServer.description || "Configure the MCP server connection"
           })]
-        }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "border-t border-white/10 pt-4",
-            children: /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-              children: effectiveMcpConfig.transport === "streamable_http" ? "Server Configuration" : "Authentication"
-            })
-          }), formFields.map(function (field) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-col gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-                label: field.displayName,
-                required: field.required
-              }), field.instructions && /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-sm opacity-50",
-                children: field.instructions
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 min-h-0 flex flex-col",
+        children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+          activeStep: wizardStep,
+          onStepChange: handleWizardStepChange,
+          showNavigation: false,
+          className: "flex-1 min-h-0 flex flex-col px-6 pt-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+            label: "Configure",
+            description: "Name & credentials",
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-3",
+                children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                  children: "MCP Server Connection"
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "space-y-2 text-sm",
+                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex gap-2",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "opacity-50 w-24 shrink-0",
+                      children: "Transport:"
+                    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
+                      text: effectiveMcpConfig.transport === "streamable_http" ? "Streamable HTTP" : "stdio"
+                    })]
+                  }), effectiveMcpConfig.transport === "streamable_http" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex gap-2",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "opacity-50 w-24 shrink-0",
+                      children: "Endpoint:"
+                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "text-xs opacity-70",
+                      children: "Remote hosted server (URL provided below)"
+                    })]
+                  }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "opacity-50 w-24 shrink-0",
+                        children: "Command:"
+                      }), /*#__PURE__*/jsxRuntime.jsxs("code", {
+                        className: "text-xs bg-white/5 px-2 py-0.5 rounded",
+                        children: [effectiveMcpConfig.command, " ", (effectiveMcpConfig.args || []).join(" ")]
+                      })]
+                    }), effectiveMcpConfig.envMapping && Object.keys(effectiveMcpConfig.envMapping).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "opacity-50 w-24 shrink-0",
+                        children: "Env Vars:"
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "text-xs opacity-70",
+                        children: Object.keys(effectiveMcpConfig.envMapping).join(", ")
+                      })]
+                    })]
+                  })]
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx(AdvancedMcpConfig, {
+                transport: effectiveMcpConfig.transport || "stdio",
+                envMappingRows: envMappingRows,
+                onEnvMappingRowsChange: setEnvMappingRows,
+                headerRows: headerRows,
+                onHeaderRowsChange: setHeaderRows
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex gap-2",
+                className: "flex flex-col gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                  label: "Provider Name",
+                  required: true
+                }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-sm opacity-50",
+                  children: "A name to identify this MCP server instance (e.g., \"Algolia Production\")"
+                }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                  value: providerName,
+                  onChange: function onChange(value) {
+                    setProviderName(value);
+                    if (formErrors.providerName && value !== null && value !== void 0 && value.trim()) {
+                      setFormErrors(function (prev) {
+                        var next = _objectSpread$4({}, prev);
+                        delete next.providerName;
+                        return next;
+                      });
+                    }
+                  },
+                  placeholder: "Enter provider name"
+                }), formErrors.providerName && /*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-sm text-red-400",
+                  children: formErrors.providerName
+                })]
+              }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex-1",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    type: field.secret ? "password" : "text",
-                    value: credentialData[field.key] || "",
-                    onChange: function onChange(value) {
-                      return handleCredentialChange(field.key, value);
-                    },
-                    placeholder: field.type === "file" ? "Select a file..." : "Enter ".concat(field.displayName.toLowerCase())
+                  className: "border-t border-white/10 pt-4",
+                  children: /*#__PURE__*/jsxRuntime.jsx("p", {
+                    className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                    children: effectiveMcpConfig.transport === "streamable_http" ? "Server Configuration" : "Authentication"
                   })
-                }), field.type === "file" && /*#__PURE__*/jsxRuntime.jsx("button", {
-                  onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-                    var filepath;
-                    return _regeneratorRuntime.wrap(function (_context) {
-                      while (1) switch (_context.prev = _context.next) {
-                        case 0:
-                          _context.next = 1;
-                          return window.mainApi.dialog.chooseFile(true, ["json"]);
-                        case 1:
-                          filepath = _context.sent;
-                          if (filepath) handleCredentialChange(field.key, filepath);
-                        case 2:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }, _callee);
-                  })),
-                  className: "px-3 py-1.5 text-sm rounded bg-white/10 hover:bg-white/20 transition-colors",
-                  children: "Browse"
+                }), formFields.map(function (field) {
+                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex flex-col gap-2",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                      label: field.displayName,
+                      required: field.required
+                    }), field.instructions && /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-sm opacity-50",
+                      children: field.instructions
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                          type: field.secret ? "password" : "text",
+                          value: credentialData[field.key] || "",
+                          onChange: function onChange(value) {
+                            return handleCredentialChange(field.key, value);
+                          },
+                          placeholder: field.type === "file" ? "Select a file..." : "Enter ".concat(field.displayName.toLowerCase())
+                        })
+                      }), field.type === "file" && /*#__PURE__*/jsxRuntime.jsx("button", {
+                        onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                          var filepath;
+                          return _regeneratorRuntime.wrap(function (_context) {
+                            while (1) switch (_context.prev = _context.next) {
+                              case 0:
+                                _context.next = 1;
+                                return window.mainApi.dialog.chooseFile(true, ["json"]);
+                              case 1:
+                                filepath = _context.sent;
+                                if (filepath) handleCredentialChange(field.key, filepath);
+                              case 2:
+                              case "end":
+                                return _context.stop();
+                            }
+                          }, _callee);
+                        })),
+                        className: "px-3 py-1.5 text-sm rounded bg-white/10 hover:bg-white/20 transition-colors",
+                        children: "Browse"
+                      })]
+                    }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-sm text-red-400",
+                      children: formErrors[field.key]
+                    })]
+                  }, field.key);
                 })]
-              }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-sm text-red-400",
-                children: formErrors[field.key]
+              }), authResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: authResult.success ? "circle-check" : "circle-exclamation"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: authResult.message
+                  })]
+                })
               })]
-            }, field.key);
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+            label: "Test",
+            description: "Verify connection",
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex flex-col items-center justify-center py-8 space-y-4",
+                children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-sm opacity-60 text-center",
+                  children: "Test the connection to verify your configuration is correct."
+                }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: isTesting ? "Testing..." : "Test Connection",
+                  onClick: handleTestConnection,
+                  size: "md"
+                })]
+              }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: testResult.success ? "circle-check" : "circle-exclamation"
+                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                    children: testResult.message
+                  })]
+                })
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+            label: "Tools",
+            description: "Select allowed tools",
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+              children: testResult !== null && testResult !== void 0 && testResult.success && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools ? /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
+                tools: testResult.tools,
+                selectedTools: selectedTools,
+                onSelectionChange: setSelectedTools
+              }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-center py-8 opacity-50",
+                children: "No tools available. Go back and test the connection first."
+              })
+            })
           })]
-        }), authResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: authResult.success ? "circle-check" : "circle-exclamation"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: authResult.message
-            })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center px-6 py-4 border-t border-white/10",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row gap-2",
+          children: [wizardStep === 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: "Cancel",
+            onClick: onCancel,
+            size: "sm"
+          }), wizardStep > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: "Back",
+            onClick: function onClick() {
+              return setWizardStep(wizardStep - 1);
+            },
+            size: "sm"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1 text-center",
+          children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "text-xs opacity-40",
+            children: ["Step ", wizardStep + 1, " of 3"]
           })
-        }), testResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: testResult.success ? "circle-check" : "circle-exclamation"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: testResult.message
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row gap-2",
+          children: [wizardStep === 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [(selectedServer === null || selectedServer === void 0 ? void 0 : selectedServer.authCommand) && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: isAuthorizing ? "Authorizing..." : "Authorize",
+              onClick: handleAuthorize,
+              size: "sm"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: "Next",
+              onClick: function onClick() {
+                return handleWizardStepChange(1);
+              },
+              disabled: (selectedServer === null || selectedServer === void 0 ? void 0 : selectedServer.authCommand) && !(authResult !== null && authResult !== void 0 && authResult.success),
+              size: "sm"
             })]
-          })
-        }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
-          tools: testResult.tools,
-          selectedTools: selectedTools,
-          onSelectionChange: setSelectedTools
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Cancel",
-          onClick: onCancel,
-          size: "sm"
-        }), (selectedServer === null || selectedServer === void 0 ? void 0 : selectedServer.authCommand) && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: isAuthorizing ? "Authorizing..." : "Authorize",
-          onClick: handleAuthorize,
-          size: "sm"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: isTesting ? "Testing..." : "Test Connection",
-          onClick: handleTestConnection,
-          size: "sm"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Save MCP Server",
-          onClick: handleSaveProvider,
-          size: "sm"
+          }), wizardStep === 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: isTesting ? "Testing..." : "Test Connection",
+              onClick: handleTestConnection,
+              size: "sm"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: "Next",
+              onClick: function onClick() {
+                return handleWizardStepChange(2);
+              },
+              disabled: !(testResult !== null && testResult !== void 0 && testResult.success),
+              size: "sm"
+            })]
+          }), wizardStep === 2 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: "Save MCP Server",
+            onClick: handleSaveProvider,
+            size: "sm"
+          })]
         })]
       })]
     });