@trops/dash-core 0.1.70 → 0.1.71

package/dist/index.js

@@ -10525,7 +10525,8 @@ var McpServerPicker = function McpServerPicker(_ref) {
   var _testResult$tools;
   var isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
-    onSave = _ref.onSave;
+    onSave = _ref.onSave,
+    autoSelectId = _ref.autoSelectId;
   var appContext = React.useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
   var _useState = React.useState([]),
@@ -10557,29 +10558,47 @@ var McpServerPicker = function McpServerPicker(_ref) {
     isLoadingCatalog = _useState12[0],
     setIsLoadingCatalog = _useState12[1];
 
-  // Configuration form state
-  var _useState13 = React.useState(""),
+  // Stepper state
+  var _useState13 = React.useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    providerName = _useState14[0],
-    setProviderName = _useState14[1];
-  var _useState15 = React.useState({}),
+    wizardStep = _useState14[0],
+    setWizardStep = _useState14[1];
+  var _useState15 = React.useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    credentialData = _useState16[0],
-    setCredentialData = _useState16[1];
-  var _useState17 = React.useState({}),
+    isAuthorizing = _useState16[0],
+    setIsAuthorizing = _useState16[1];
+  var _useState17 = React.useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    formErrors = _useState18[0],
-    setFormErrors = _useState18[1];
-
-  // Advanced config row state
-  var _useState19 = React.useState([]),
+    authResult = _useState18[0],
+    setAuthResult = _useState18[1];
+  var _useState19 = React.useState(null),
     _useState20 = _slicedToArray(_useState19, 2),
-    envMappingRows = _useState20[0],
-    setEnvMappingRows = _useState20[1];
-  var _useState21 = React.useState([]),
+    selectedTools = _useState20[0],
+    setSelectedTools = _useState20[1];
+
+  // Configuration form state
+  var _useState21 = React.useState(""),
     _useState22 = _slicedToArray(_useState21, 2),
-    headerRows = _useState22[0],
-    setHeaderRows = _useState22[1];
+    providerName = _useState22[0],
+    setProviderName = _useState22[1];
+  var _useState23 = React.useState({}),
+    _useState24 = _slicedToArray(_useState23, 2),
+    credentialData = _useState24[0],
+    setCredentialData = _useState24[1];
+  var _useState25 = React.useState({}),
+    _useState26 = _slicedToArray(_useState25, 2),
+    formErrors = _useState26[0],
+    setFormErrors = _useState26[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];
   var rowIdRef = React.useRef(0);
   var nextRowId = function nextRowId() {
     return "pick_".concat(++rowIdRef.current);
@@ -10597,13 +10616,28 @@ var McpServerPicker = function McpServerPicker(_ref) {
     return deriveFormFields(effectiveMcpConfig, selectedServer.credentialSchema || {});
   }, [selectedServer, effectiveMcpConfig]);
 
+  // Dynamic wizard steps based on whether auth is needed
+  var hasAuth = !!(selectedServer !== null && selectedServer !== void 0 && selectedServer.authCommand);
+  var wizardSteps = hasAuth ? ["configure", "authorize", "testTools"] : ["configure", "testTools"];
+  var totalSteps = wizardSteps.length;
+  var currentStepType = wizardSteps[wizardStep];
+
   // Load catalog on open
   React.useEffect(function () {
     if (isOpen && dashApi && catalog.length === 0) {
       setIsLoadingCatalog(true);
       dashApi.mcpGetCatalog(function (event, result) {
-        setCatalog(result.catalog || []);
+        var loadedCatalog = result.catalog || [];
+        setCatalog(loadedCatalog);
         setIsLoadingCatalog(false);
+
+        // Auto-select if autoSelectId is provided
+        if (autoSelectId) {
+          var match = loadedCatalog.find(function (s) {
+            return s.id === autoSelectId;
+          });
+          if (match) handleSelectServer(match);
+        }
       }, function (event, err) {
         setIsLoadingCatalog(false);
       });
@@ -10611,6 +10645,17 @@ var McpServerPicker = function McpServerPicker(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, dashApi]);
 
+  // Auto-select from already-loaded catalog when autoSelectId changes
+  React.useEffect(function () {
+    if (isOpen && autoSelectId && catalog.length > 0 && !isConfiguring) {
+      var match = catalog.find(function (s) {
+        return s.id === autoSelectId;
+      });
+      if (match) handleSelectServer(match);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, autoSelectId]);
+
   // Filter catalog by search
   var filteredCatalog = catalog.filter(function (server) {
     if (!searchQuery) return true;
@@ -10620,15 +10665,33 @@ var McpServerPicker = function McpServerPicker(_ref) {
     });
   });
 
+  // Wizard step navigation with validation gates
+  var handleWizardStepChange = function handleWizardStepChange(newStep) {
+    if (newStep < wizardStep) {
+      setWizardStep(newStep);
+      return;
+    }
+    if (currentStepType === "configure" && newStep > wizardStep) {
+      if (!validateForm()) return;
+    }
+    if (currentStepType === "authorize" && newStep > wizardStep) {
+      if (!(authResult !== null && authResult !== void 0 && authResult.success)) return;
+    }
+    setWizardStep(newStep);
+  };
+
   // Handle server selection -> show configuration form
   var handleSelectServer = function handleSelectServer(server) {
     var _server$mcpConfig, _server$mcpConfig2;
     setSelectedServer(server);
     setIsConfiguring(true);
     setTestResult(null);
+    setAuthResult(null);
     setProviderName(server.name);
     setCredentialData({});
     setFormErrors({});
+    setWizardStep(0);
+    setSelectedTools(null);
     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));
   };
@@ -10685,6 +10748,11 @@ var McpServerPicker = function McpServerPicker(_ref) {
         message: "Connected! Found ".concat((result.tools || []).length, " tools.")
       });
 
+      // Pre-select all tools
+      setSelectedTools((result.tools || []).map(function (t) {
+        return t.name;
+      }));
+
       // Stop the test server
       dashApi.mcpStopServer(testName, function () {}, function () {});
       setIsTesting(false);
@@ -10697,33 +10765,66 @@ var McpServerPicker = function McpServerPicker(_ref) {
     });
   };
 
+  // Handle authorize (OAuth browser flow)
+  var handleAuthorize = function handleAuthorize() {
+    if (!dashApi || !(selectedServer !== null && selectedServer !== void 0 && selectedServer.authCommand)) return;
+    setIsAuthorizing(true);
+    setAuthResult(null);
+    dashApi.mcpRunAuth(effectiveMcpConfig, credentialData, selectedServer.authCommand, function (event, result) {
+      if (result.error) {
+        setAuthResult({
+          success: false,
+          message: result.message
+        });
+      } else {
+        setAuthResult({
+          success: true,
+          message: "Authorized!"
+        });
+      }
+      setIsAuthorizing(false);
+    }, function (event, err) {
+      setAuthResult({
+        success: false,
+        message: (err === null || err === void 0 ? void 0 : err.message) || "Authorization failed"
+      });
+      setIsAuthorizing(false);
+    });
+  };
+
   // Handle save - create the MCP provider
   var handleSaveProvider = function handleSaveProvider() {
     if (!selectedServer || !validateForm()) return;
-    onSave(providerName.trim(), selectedServer.id, credentialData, effectiveMcpConfig);
+    onSave(providerName.trim(), selectedServer.id, credentialData, effectiveMcpConfig, selectedTools);
     handleClose();
   };
   var handleClose = function handleClose() {
     setSelectedServer(null);
     setIsConfiguring(false);
     setTestResult(null);
+    setAuthResult(null);
+    setSelectedTools(null);
     setSearchQuery("");
     setProviderName("");
     setCredentialData({});
     setFormErrors({});
     setEnvMappingRows([]);
     setHeaderRows([]);
+    setWizardStep(0);
     setIsOpen(false);
   };
   var handleBack = function handleBack() {
     setSelectedServer(null);
     setIsConfiguring(false);
     setTestResult(null);
+    setAuthResult(null);
+    setSelectedTools(null);
     setProviderName("");
     setCredentialData({});
     setFormErrors({});
     setEnvMappingRows([]);
     setHeaderRows([]);
+    setWizardStep(0);
   };
 
   // Prune credential data when form fields change (advanced config removed a field)
@@ -10859,153 +10960,268 @@ var McpServerPicker = function McpServerPicker(_ref) {
             })]
           }) :
           /*#__PURE__*/
-          // MCP Server Configuration Form
+          // MCP Server Configuration — Stepper
           jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-6 p-6",
-            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(" ")]
+            className: "flex flex-col h-full",
+            children: [/*#__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 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$o({}, 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: "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.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);
+                      })]
                     })]
-                  }), 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(", ")
+                  })
+                }), hasAuth && /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+                  label: "Authorize",
+                  description: "OAuth authentication",
+                  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 max-w-md",
+                        children: "This server requires OAuth authorization. Click the button below to open a browser window and complete the authentication flow."
+                      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                        title: isAuthorizing ? "Authorizing..." : "Authorize",
+                        onClick: handleAuthorize,
+                        size: "md"
+                      })]
+                    }), 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
+                        })]
+                      })
+                    }), authResult && !authResult.success && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+                        className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                        children: "Troubleshooting"
+                      }), /*#__PURE__*/jsxRuntime.jsxs("ul", {
+                        className: "text-sm opacity-60 space-y-1 list-disc list-inside",
+                        children: [/*#__PURE__*/jsxRuntime.jsx("li", {
+                          children: "Ensure Node.js and npx are available in your PATH"
+                        }), /*#__PURE__*/jsxRuntime.jsx("li", {
+                          children: "Try running the auth command manually in your terminal"
+                        }), /*#__PURE__*/jsxRuntime.jsx("li", {
+                          children: "Check that your OAuth credentials file is valid"
+                        }), /*#__PURE__*/jsxRuntime.jsx("li", {
+                          children: "If using nvm, ensure the correct Node version is active"
+                        })]
+                      })]
                     })]
-                  })]
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+                  label: "Test & Tools",
+                  description: "Verify & select tools",
+                  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex-1 min-h-0 flex flex-col pb-4 space-y-4",
+                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-3",
+                      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                        title: isTesting ? "Fetching..." : "Fetch Tools",
+                        onClick: handleTestConnection,
+                        size: "sm"
+                      }), testResult && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                        className: "text-sm ".concat(testResult.success ? "text-green-400" : "text-red-400"),
+                        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                          icon: testResult.success ? "circle-check" : "circle-exclamation",
+                          className: "mr-1"
+                        }), 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 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-center py-8 opacity-50",
+                      children: "Click \"Fetch Tools\" to test the connection and discover available tools."
+                    })]
+                  })
                 })]
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx(AdvancedMcpConfig, {
-              transport: effectiveMcpConfig.transport || "stdio",
-              envMappingRows: envMappingRows,
-              onEnvMappingRowsChange: setEnvMappingRows,
-              headerRows: headerRows,
-              onHeaderRowsChange: setHeaderRows
+              })
             }), /*#__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 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$o({}, 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: "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(DashReact.InputText, {
-                    type: field.secret ? "password" : "text",
-                    value: credentialData[field.key] || "",
-                    onChange: function onChange(value) {
-                      return handleCredentialChange(field.key, value);
-                    },
-                    placeholder: "Enter ".concat(field.displayName.toLowerCase())
-                  }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
-                    className: "text-sm text-red-400",
-                    children: formErrors[field.key]
-                  })]
-                }, field.key);
-              })]
-            }), testResult && /*#__PURE__*/jsxRuntime.jsxs("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"),
+              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 items-center gap-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                  icon: testResult.success ? "circle-check" : "circle-exclamation"
-                }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                  children: testResult.message
+                className: "flex flex-row gap-2",
+                children: [wizardStep === 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: "Cancel",
+                  onClick: handleBack,
+                  size: "sm"
+                }), wizardStep > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: "Back",
+                  onClick: function onClick() {
+                    return setWizardStep(wizardStep - 1);
+                  },
+                  size: "sm"
                 })]
-              }), testResult.success && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "mt-2 ml-6 space-y-1",
-                children: testResult.tools.map(function (tool) {
-                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "text-xs",
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "font-mono",
-                      children: tool.name
-                    }), tool.description && /*#__PURE__*/jsxRuntime.jsxs("span", {
-                      className: "opacity-60 ml-2",
-                      children: ["- ", tool.description]
-                    })]
-                  }, tool.name);
+              }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "flex-1 text-center",
+                children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  className: "text-xs opacity-40",
+                  children: ["Step ", wizardStep + 1, " of ", totalSteps]
                 })
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex gap-3 justify-end pt-4 border-t border-white/10",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-                title: "Cancel",
-                onClick: handleBack,
-                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"
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex flex-row gap-2",
+                children: [currentStepType === "configure" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: "Next",
+                  onClick: function onClick() {
+                    return handleWizardStepChange(wizardStep + 1);
+                  },
+                  size: "sm"
+                }), currentStepType === "authorize" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: "Next",
+                  onClick: function onClick() {
+                    return handleWizardStepChange(wizardStep + 1);
+                  },
+                  disabled: !(authResult !== null && authResult !== void 0 && authResult.success),
+                  size: "sm"
+                }), currentStepType === "testTools" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                  title: "Save MCP Server",
+                  onClick: handleSaveProvider,
+                  size: "sm"
+                })]
               })]
             })]
           })
@@ -11562,7 +11778,7 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
       });
     }
   }
-  function handleMcpProviderSave(providerName, providerType, mcpCredentials, mcpConfig) {
+  function handleMcpProviderSave(providerName, providerType, mcpCredentials, mcpConfig, allowedTools) {
     var _dashboardContext$cre2;
     var appId = dashboardContext === null || dashboardContext === void 0 || (_dashboardContext$cre2 = dashboardContext.credentials) === null || _dashboardContext$cre2 === void 0 ? void 0 : _dashboardContext$cre2.appId;
     if (dashboardContext !== null && dashboardContext !== void 0 && dashboardContext.dashApi && appId) {
@@ -11570,7 +11786,8 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
         providerType: providerType,
         credentials: mcpCredentials,
         providerClass: "mcp",
-        mcpConfig: mcpConfig
+        mcpConfig: mcpConfig,
+        allowedTools: allowedTools
       }, function () {
         handleSelectProvider(mcpPickerWidgetId, mcpPickerProviderType, providerName);
         setIsMcpPickerOpen(false);
@@ -11905,7 +12122,8 @@ var LayoutBuilder = function LayoutBuilder(_ref) {
         }), /*#__PURE__*/jsxRuntime.jsx(McpServerPicker, {
           isOpen: isMcpPickerOpen,
           setIsOpen: setIsMcpPickerOpen,
-          onSave: handleMcpProviderSave
+          onSave: handleMcpProviderSave,
+          autoSelectId: mcpPickerProviderType
         })]
       })]
     }, "layout-builder")