@trops/dash-core 0.1.69 → 0.1.70

package/dist/index.js

@@ -7338,195 +7338,710 @@ var ProviderForm = function ProviderForm(_ref) {
   });
 };
 
-function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$8(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$8(r, a) : void 0; } }
-function _arrayLikeToArray$8(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var ToolSelector = function ToolSelector(_ref) {
+  var _ref$tools = _ref.tools,
+    tools = _ref$tools === void 0 ? [] : _ref$tools,
+    _ref$selectedTools = _ref.selectedTools,
+    selectedTools = _ref$selectedTools === void 0 ? [] : _ref$selectedTools,
+    onSelectionChange = _ref.onSelectionChange;
+  if (!tools || tools.length === 0) return null;
+  var allSelected = selectedTools.length === tools.length;
+  var handleToggleAll = function handleToggleAll() {
+    if (allSelected) {
+      onSelectionChange([]);
+    } else {
+      onSelectionChange(tools.map(function (t) {
+        return t.name;
+      }));
+    }
+  };
+  var handleToggle = function handleToggle(toolName) {
+    if (selectedTools.includes(toolName)) {
+      onSelectionChange(selectedTools.filter(function (t) {
+        return t !== toolName;
+      }));
+    } else {
+      onSelectionChange([].concat(_toConsumableArray(selectedTools), [toolName]));
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-2 flex-1 flex flex-col min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+        children: "Allowed Tools"
+      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+        onClick: handleToggleAll,
+        className: "text-xs text-blue-400 hover:text-blue-300 transition-colors",
+        children: allSelected ? "Deselect All" : "Select All"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+      className: "text-sm opacity-50",
+      children: "Choose which tools this provider can expose to widgets"
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "space-y-1 flex-1 min-h-0 overflow-y-auto",
+      children: tools.map(function (tool) {
+        var checked = selectedTools.includes(tool.name);
+        return /*#__PURE__*/jsxRuntime.jsxs("label", {
+          className: "flex items-start gap-2 p-1.5 rounded hover:bg-white/5 cursor-pointer",
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "checkbox",
+            checked: checked,
+            onChange: function onChange() {
+              return handleToggle(tool.name);
+            },
+            className: "mt-0.5 rounded border-white/20 bg-white/5 text-blue-500 focus:ring-blue-500/30"
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex-1 min-w-0",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-xs font-mono",
+              children: tool.name
+            }), tool.description && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs opacity-50 ml-2",
+              children: ["\u2014 ", tool.description]
+            })]
+          })]
+        }, tool.name);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+      className: "text-xs opacity-40",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "shield-halved",
+        className: "mr-1"
+      }), selectedTools.length, " of ", tools.length, " tools selected"]
+    })]
+  });
+};
+
 function ownKeys$r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    onSelectWidget = _ref.onSelectWidget;
-    _ref.workspaceType;
-  var _useContext = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var _useContext2 = React.useContext(AppContext),
-    _useContext2$provider = _useContext2.providers,
-    availableProviders = _useContext2$provider === void 0 ? {} : _useContext2$provider,
-    dashApi = _useContext2.dashApi,
-    credentials = _useContext2.credentials,
-    refreshProviders = _useContext2.refreshProviders;
+/**
+ * Shared MCP utility functions.
+ *
+ * Extracted from McpServerPicker so ProviderDetail (and any future consumer)
+ * can reuse the same field-derivation logic.
+ */
 
-  // State management
-  var _useState = React.useState("Installed"),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedSource = _useState2[0],
-    setSelectedSource = _useState2[1]; // "Installed" | "Discover"
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedWidget = _useState4[0],
-    setSelectedWidget = _useState4[1];
-  var _useState5 = React.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    widgets = _useState6[0],
-    setWidgets = _useState6[1];
+/**
+ * Derive required form fields from an mcpConfig, using credentialSchema
+ * as optional enrichment for display names, instructions, and secret flags.
+ *
+ * For streamable_http: extracts {{placeholder}} fields from url and headerTemplate.
+ * For stdio: extracts credential field names from envMapping values.
+ *
+ * @param {object} mcpConfig - The MCP server configuration
+ * @param {object} credentialSchema - Optional metadata for field labels/instructions
+ * @returns {Array<{ key, displayName, required, secret, instructions, type }>}
+ */
+function deriveFormFields(mcpConfig) {
+  var credentialSchema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var fieldKeys = new Set();
+  if (mcpConfig.transport === "streamable_http") {
+    // Extract {{field}} placeholders from url
+    if (mcpConfig.url) {
+      var urlMatches = mcpConfig.url.match(/\{\{(\w+)\}\}/g) || [];
+      urlMatches.forEach(function (m) {
+        return fieldKeys.add(m.slice(2, -2));
+      });
+    }
+    // Extract {{field}} placeholders from headerTemplate values
+    if (mcpConfig.headerTemplate) {
+      Object.values(mcpConfig.headerTemplate).forEach(function (template) {
+        var matches = template.match(/\{\{(\w+)\}\}/g) || [];
+        matches.forEach(function (m) {
+          return fieldKeys.add(m.slice(2, -2));
+        });
+      });
+    }
+  } else {
+    // stdio: extract credential field names from envMapping values
+    if (mcpConfig.envMapping) {
+      Object.values(mcpConfig.envMapping).forEach(function (credField) {
+        fieldKeys.add(credField);
+      });
+    }
+  }
 
-  // Filter state
-  var _useState7 = React.useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    searchQuery = _useState8[0],
-    setSearchQuery = _useState8[1];
-  var _useState9 = React.useState("all"),
-    _useState0 = _slicedToArray(_useState9, 2),
-    selectedAuthor = _useState0[0],
-    setSelectedAuthor = _useState0[1];
-  var _useState1 = React.useState("all"),
-    _useState10 = _slicedToArray(_useState1, 2),
-    selectedProvider = _useState10[0],
-    setSelectedProvider = _useState10[1];
+  // Also include any fields defined in credentialSchema that aren't already derived
+  if (credentialSchema) {
+    Object.keys(credentialSchema).forEach(function (key) {
+      return fieldKeys.add(key);
+    });
+  }
 
-  // Phase 2: Provider and userConfig state
-  var _useState11 = React.useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedProviders = _useState12[0],
-    setSelectedProviders = _useState12[1];
-  var _useState13 = React.useState({}),
-    _useState14 = _slicedToArray(_useState13, 2),
-    userConfigValues = _useState14[0],
-    setUserConfigValues = _useState14[1];
+  // Build the field list with metadata from credentialSchema or auto-generated defaults
+  return Array.from(fieldKeys).map(function (key) {
+    var schemaMeta = credentialSchema[key];
+    if (schemaMeta) {
+      return {
+        key: key,
+        displayName: schemaMeta.displayName || formatFieldName(key),
+        required: schemaMeta.required === true,
+        secret: schemaMeta.secret || false,
+        instructions: schemaMeta.instructions || null,
+        type: schemaMeta.type || "text"
+      };
+    }
 
-  // Phase 3: Recent widgets state
-  var _useState15 = React.useState([]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    recentWidgets = _useState16[0],
-    setRecentWidgets = _useState16[1];
+    // Auto-generate defaults from the field name
+    return {
+      key: key,
+      displayName: formatFieldName(key),
+      required: false,
+      secret: isLikelySecret(key),
+      instructions: null,
+      type: "text"
+    };
+  });
+}
 
-  // Inline provider creation state
-  var _useState17 = React.useState(null),
-    _useState18 = _slicedToArray(_useState17, 2),
-    inlineCreateType = _useState18[0],
-    setInlineCreateType = _useState18[1];
-  var _useState19 = React.useState({}),
-    _useState20 = _slicedToArray(_useState19, 2),
-    inlineCreateSchema = _useState20[0],
-    setInlineCreateSchema = _useState20[1];
-  var _useState21 = React.useState(null),
-    _useState22 = _slicedToArray(_useState21, 2),
-    inlineCreateError = _useState22[0],
-    setInlineCreateError = _useState22[1];
-  var _useState23 = React.useState(false),
-    _useState24 = _slicedToArray(_useState23, 2),
-    isCreatingProvider = _useState24[0],
-    setIsCreatingProvider = _useState24[1];
+/**
+ * Convert a camelCase field name to a human-readable title.
+ * e.g., "apiKey" → "API Key", "url" → "URL", "botToken" → "Bot Token"
+ */
+function formatFieldName(name) {
+  var acronyms = {
+    url: "URL",
+    api: "API",
+    id: "ID",
+    mcp: "MCP"
+  };
+  return name.replace(/([A-Z])/g, " $1").replace(/^./, function (s) {
+    return s.toUpperCase();
+  }).trim().split(" ").map(function (word) {
+    return acronyms[word.toLowerCase()] || word;
+  }).join(" ");
+}
 
-  // Installed widget grouping
-  var _useState25 = React.useState(new Set()),
-    _useState26 = _slicedToArray(_useState25, 2),
-    expandedGroups = _useState26[0],
-    setExpandedGroups = _useState26[1];
+/**
+ * Heuristic: does this field name likely contain a secret value?
+ */
+function isLikelySecret(name) {
+  var lower = name.toLowerCase();
+  return /key|token|secret|password|credential|auth/.test(lower);
+}
 
-  // Registry state
-  var _useState27 = React.useState(false),
-    _useState28 = _slicedToArray(_useState27, 2),
-    isLoadingRegistry = _useState28[0],
-    setIsLoadingRegistry = _useState28[1];
-  var _useState29 = React.useState(null),
-    _useState30 = _slicedToArray(_useState29, 2),
-    registryError = _useState30[0],
-    setRegistryError = _useState30[1];
-  var _useState31 = React.useState([]),
-    _useState32 = _slicedToArray(_useState31, 2),
-    registryPackages = _useState32[0],
-    setRegistryPackages = _useState32[1];
-  var _useState33 = React.useState("packages"),
-    _useState34 = _slicedToArray(_useState33, 2),
-    registryViewMode = _useState34[0],
-    setRegistryViewMode = _useState34[1]; // "packages" | "widgets"
-  var _useState35 = React.useState(new Set()),
-    _useState36 = _slicedToArray(_useState35, 2),
-    expandedPackages = _useState36[0],
-    setExpandedPackages = _useState36[1];
-  var _useState37 = React.useState(null),
-    _useState38 = _slicedToArray(_useState37, 2),
-    selectedPackage = _useState38[0],
-    setSelectedPackage = _useState38[1];
-  var _useState39 = React.useState(false),
-    _useState40 = _slicedToArray(_useState39, 2),
-    isInstalling = _useState40[0],
-    setIsInstalling = _useState40[1];
-  var _useState41 = React.useState(null),
-    _useState42 = _slicedToArray(_useState41, 2),
-    installError = _useState42[0],
-    setInstallError = _useState42[1];
-
-  // Phase 3: Recent Widgets - localStorage functions
-  var loadRecentWidgets = function loadRecentWidgets() {
-    try {
-      var stored = localStorage.getItem("recentWidgets");
-      var recentData = stored ? JSON.parse(stored) : [];
-
-      // Get widget details from ComponentManager
-      var allWidgets = ComponentManager.map();
-      var enrichedRecent = recentData.slice(0, 5) // Show top 5
-      .map(function (entry) {
-        var widget = allWidgets[entry.widgetKey];
-        if (!widget) return null; // Widget no longer exists
-        return _objectSpread$r(_objectSpread$r({
-          key: entry.widgetKey
-        }, widget), {}, {
-          savedProviders: entry.providers || {},
-          savedUserConfig: entry.userConfig || {},
-          timestamp: entry.timestamp
-        });
-      }).filter(Boolean); // Remove null entries
+/**
+ * Build an mcpConfig by overlaying advanced-section rows onto a catalog base config.
+ *
+ * For stdio: replaces `envMapping` with the rows from the advanced section.
+ * For streamable_http: replaces `headerTemplate` with the rows from the advanced section.
+ *
+ * @param {object} baseMcpConfig - The catalog's original mcpConfig
+ * @param {Array<{ envVar: string, credField: string }>} envMappingRows - Current env var rows
+ * @param {Array<{ headerName: string, headerValue: string }>} headerRows - Current header rows
+ * @returns {object} A new mcpConfig with overridden envMapping or headerTemplate
+ */
+function buildMcpConfigFromOverrides(baseMcpConfig, envMappingRows, headerRows) {
+  if (baseMcpConfig.transport === "streamable_http") {
+    var headerTemplate = {};
+    headerRows.forEach(function (row) {
+      var name = row.headerName.trim();
+      var value = row.headerValue.trim();
+      if (name && value) {
+        headerTemplate[name] = value;
+      }
+    });
+    var config = _objectSpread$r({}, baseMcpConfig);
+    if (Object.keys(headerTemplate).length > 0) {
+      config.headerTemplate = headerTemplate;
+    } else {
+      delete config.headerTemplate;
+    }
+    return config;
+  }
 
-      setRecentWidgets(enrichedRecent);
-    } catch (error) {
-      setRecentWidgets([]);
+  // stdio
+  var envMapping = {};
+  envMappingRows.forEach(function (row) {
+    var env = row.envVar.trim();
+    var cred = row.credField.trim();
+    if (env && cred) {
+      envMapping[env] = cred;
     }
-  };
-  var saveToRecent = function saveToRecent(widget, providers, userConfig) {
-    try {
-      var stored = localStorage.getItem("recentWidgets");
-      var recent = stored ? JSON.parse(stored) : [];
+  });
+  return _objectSpread$r(_objectSpread$r({}, baseMcpConfig), {}, {
+    envMapping: envMapping
+  });
+}
 
-      // Create new entry
-      var newEntry = {
-        widgetKey: widget.key,
-        timestamp: Date.now(),
-        providers: providers || {},
-        userConfig: userConfig || {}
-      };
+/**
+ * Convert an envMapping object into row state for the advanced config UI.
+ *
+ * @param {object} envMapping - e.g. { SLACK_BOT_TOKEN: "botToken" }
+ * @param {Function} nextRowId - Function that returns a unique row ID
+ * @returns {Array<{ id: string, envVar: string, credField: string }>}
+ */
+function envMappingToRows(envMapping, nextRowId) {
+  if (!envMapping) return [];
+  return Object.entries(envMapping).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      envVar = _ref2[0],
+      credField = _ref2[1];
+    return {
+      id: nextRowId(),
+      envVar: envVar,
+      credField: credField
+    };
+  });
+}
 
-      // Remove existing entry for this widget (if any) and add new one at front
-      var updated = [newEntry].concat(_toConsumableArray(recent.filter(function (r) {
-        return r.widgetKey !== widget.key;
-      }))).slice(0, 10); // Keep max 10
+/**
+ * Convert a headerTemplate object into row state for the advanced config UI.
+ *
+ * @param {object} headerTemplate - e.g. { "Authorization": "Bearer {{apiKey}}" }
+ * @param {Function} nextRowId - Function that returns a unique row ID
+ * @returns {Array<{ id: string, headerName: string, headerValue: string }>}
+ */
+function headerTemplateToRows(headerTemplate, nextRowId) {
+  if (!headerTemplate) return [];
+  return Object.entries(headerTemplate).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      headerName = _ref4[0],
+      headerValue = _ref4[1];
+    return {
+      id: nextRowId(),
+      headerName: headerName,
+      headerValue: headerValue
+    };
+  });
+}
 
-      localStorage.setItem("recentWidgets", JSON.stringify(updated));
+/**
+ * Serialize the current form state into a bare MCP JSON config string.
+ *
+ * Output format (stdio):
+ * {
+ *   "type": "stdio",
+ *   "command": "npx",
+ *   "args": ["-y", "package-name"],
+ *   "env": { "API_KEY": "${API_KEY}" }
+ * }
+ *
+ * Output format (HTTP):
+ * {
+ *   "type": "streamable_http",
+ *   "url": "https://example.com/mcp",
+ *   "headerTemplate": { "Authorization": "Bearer {{apiKey}}" }
+ * }
+ *
+ * Credential values are NOT embedded — env values use ${FIELD_NAME} syntax
+ * to reference credential fields entered separately in the form.
+ *
+ * @param {string} name - The provider name (unused in output, kept for API compat)
+ * @param {string} transport - "stdio" or "streamable_http"
+ * @param {object} fields - { command, args, envMappingRows, url, headerRows }
+ * @returns {string} Formatted JSON string
+ */
+function formStateToMcpJson(name, transport, fields) {
+  var _fields$command = fields.command,
+    command = _fields$command === void 0 ? "" : _fields$command,
+    _fields$args = fields.args,
+    args = _fields$args === void 0 ? "" : _fields$args,
+    _fields$envMappingRow = fields.envMappingRows,
+    envMappingRows = _fields$envMappingRow === void 0 ? [] : _fields$envMappingRow,
+    _fields$url = fields.url,
+    url = _fields$url === void 0 ? "" : _fields$url,
+    _fields$headerRows = fields.headerRows,
+    headerRows = _fields$headerRows === void 0 ? [] : _fields$headerRows;
+  var serverConfig;
+  if (transport === "stdio") {
+    var argsArray = args.trim().split(/\s+/).filter(Boolean);
+    var env = {};
+    envMappingRows.forEach(function (row) {
+      var envVar = row.envVar.trim();
+      var credField = row.credField.trim();
+      if (envVar && credField) {
+        env[envVar] = "${".concat(credField, "}");
+      }
+    });
+    serverConfig = {
+      type: "stdio",
+      command: command.trim()
+    };
+    if (argsArray.length > 0) serverConfig.args = argsArray;
+    if (Object.keys(env).length > 0) serverConfig.env = env;
+  } else {
+    // streamable_http
+    serverConfig = {
+      type: "streamable_http",
+      url: url.trim()
+    };
+    var headerTemplate = {};
+    headerRows.forEach(function (row) {
+      var hName = row.headerName.trim();
+      var hValue = row.headerValue.trim();
+      if (hName && hValue) {
+        headerTemplate[hName] = hValue;
+      }
+    });
+    if (Object.keys(headerTemplate).length > 0) serverConfig.headerTemplate = headerTemplate;
+  }
+  return JSON.stringify(serverConfig, null, 2);
+}
 
-      // Reload recent widgets to update UI
-      loadRecentWidgets();
-    } catch (error) {
+/**
+ * Parse an MCP JSON config string back into form state.
+ *
+ * Accepts multiple input formats:
+ * - Bare config: { "command": ..., "args": [...], "env": { "KEY": "${FIELD}" } }
+ * - Wrapped: { "mcpServers": { "name": { ... } } } — unwraps and uses key as providerName
+ *
+ * Transport detection:
+ * - Explicit `type` or `transport` field
+ * - Inferred: `url` present → streamable_http, `command` present → stdio
+ *
+ * stdio env value parsing:
+ * - "${FIELD_NAME}" → envVar = key, credField = FIELD_NAME (reference syntax)
+ * - "literal-value" → envVar = key, credField = key, credentialData[key] = value
+ *
+ * @param {string} jsonString - The JSON to parse
+ * @param {Function} nextRowId - Function that returns a unique row ID
+ * @returns {{ providerName, transport, command, args, envMappingRows, url, headerRows, credentialData, error }}
+ */
+function mcpJsonToFormState(jsonString, nextRowId) {
+  var parsed;
+  try {
+    parsed = JSON.parse(jsonString);
+  } catch (e) {
+    return {
+      error: "Invalid JSON: ".concat(e.message)
+    };
+  }
+  var providerName = "";
+  var serverConfig;
+  if (parsed.mcpServers && _typeof(parsed.mcpServers) === "object") {
+    var entries = Object.entries(parsed.mcpServers);
+    if (entries.length === 0) {
+      return {
+        error: "No server found in mcpServers"
+      };
     }
-  };
-  var handleRecentClick = function handleRecentClick(recentWidget) {
-    setSelectedWidget(recentWidget);
-    setSelectedProviders(recentWidget.savedProviders || {});
-    setUserConfigValues(recentWidget.savedUserConfig || {});
-    // Reset inline provider creation form
-    setInlineCreateType(null);
-    setInlineCreateSchema({});
-    setInlineCreateError(null);
-  };
-
-  // Fetch widgets when modal opens
-  React.useEffect(function () {
-    if (isOpen) {
-      loadWidgets();
-      loadRecentWidgets(); // Phase 3: Load recent widgets
-      // Reset filters when modal opens
-      setSearchQuery("");
+    var _entries$ = _slicedToArray(entries[0], 2);
+    providerName = _entries$[0];
+    serverConfig = _entries$[1];
+  } else if (parsed.command || parsed.url || parsed.type || parsed.transport) {
+    serverConfig = parsed;
+  } else {
+    return {
+      error: "Unrecognized format: expected a server config with command, url, or type"
+    };
+  }
+
+  // Determine transport from type/transport field or infer from contents
+  var explicitType = serverConfig.type || serverConfig.transport;
+  var transport;
+  if (explicitType) {
+    transport = explicitType === "stdio" ? "stdio" : "streamable_http";
+  } else {
+    transport = serverConfig.url ? "streamable_http" : "stdio";
+  }
+  var result = {
+    providerName: providerName,
+    transport: transport,
+    command: "",
+    args: "",
+    envMappingRows: [],
+    url: "",
+    headerRows: [],
+    credentialData: {},
+    error: null
+  };
+  if (transport === "stdio") {
+    result.command = serverConfig.command || "";
+    result.args = (serverConfig.args || []).join(" ");
+    if (serverConfig.env && _typeof(serverConfig.env) === "object") {
+      Object.entries(serverConfig.env).forEach(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          envVar = _ref6[0],
+          value = _ref6[1];
+        // Check for ${FIELD_NAME} reference syntax
+        var refMatch = typeof value === "string" && value.match(/^\$\{(.+)\}$/);
+        if (refMatch) {
+          // Reference syntax — credField is the extracted name, no credential value
+          result.envMappingRows.push({
+            id: nextRowId(),
+            envVar: envVar,
+            credField: refMatch[1]
+          });
+        } else {
+          // Literal value — use envVar as credField and store the value
+          result.envMappingRows.push({
+            id: nextRowId(),
+            envVar: envVar,
+            credField: envVar
+          });
+          result.credentialData[envVar] = value || "";
+        }
+      });
+    }
+  } else {
+    result.url = serverConfig.url || "";
+    var headers = serverConfig.headers || serverConfig.headerTemplate || {};
+    if (_typeof(headers) === "object") {
+      Object.entries(headers).forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          headerName = _ref8[0],
+          headerValue = _ref8[1];
+        result.headerRows.push({
+          id: nextRowId(),
+          headerName: headerName,
+          headerValue: headerValue
+        });
+      });
+    }
+  }
+  return result;
+}
+
+function _createForOfIteratorHelper$8(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$8(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$8(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$8(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$8(r, a) : void 0; } }
+function _arrayLikeToArray$8(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onSelectWidget = _ref.onSelectWidget;
+    _ref.workspaceType;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var _useContext2 = React.useContext(AppContext),
+    _useContext2$provider = _useContext2.providers,
+    availableProviders = _useContext2$provider === void 0 ? {} : _useContext2$provider,
+    dashApi = _useContext2.dashApi,
+    credentials = _useContext2.credentials,
+    refreshProviders = _useContext2.refreshProviders;
+
+  // State management
+  var _useState = React.useState("Installed"),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedSource = _useState2[0],
+    setSelectedSource = _useState2[1]; // "Installed" | "Discover"
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedWidget = _useState4[0],
+    setSelectedWidget = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    widgets = _useState6[0],
+    setWidgets = _useState6[1];
+
+  // Filter state
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = React.useState("all"),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedAuthor = _useState0[0],
+    setSelectedAuthor = _useState0[1];
+  var _useState1 = React.useState("all"),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedProvider = _useState10[0],
+    setSelectedProvider = _useState10[1];
+
+  // Phase 2: Provider and userConfig state
+  var _useState11 = React.useState({}),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedProviders = _useState12[0],
+    setSelectedProviders = _useState12[1];
+  var _useState13 = React.useState({}),
+    _useState14 = _slicedToArray(_useState13, 2),
+    userConfigValues = _useState14[0],
+    setUserConfigValues = _useState14[1];
+
+  // Phase 3: Recent widgets state
+  var _useState15 = React.useState([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    recentWidgets = _useState16[0],
+    setRecentWidgets = _useState16[1];
+
+  // Inline provider creation state
+  var _useState17 = React.useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    inlineCreateType = _useState18[0],
+    setInlineCreateType = _useState18[1];
+  var _useState19 = React.useState({}),
+    _useState20 = _slicedToArray(_useState19, 2),
+    inlineCreateSchema = _useState20[0],
+    setInlineCreateSchema = _useState20[1];
+  var _useState21 = React.useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    inlineCreateError = _useState22[0],
+    setInlineCreateError = _useState22[1];
+  var _useState23 = React.useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    isCreatingProvider = _useState24[0],
+    setIsCreatingProvider = _useState24[1];
+
+  // MCP catalog for inline stepper creation
+  var _useState25 = React.useState([]),
+    _useState26 = _slicedToArray(_useState25, 2),
+    mcpCatalog = _useState26[0],
+    setMcpCatalog = _useState26[1];
+  var _useState27 = React.useState(null),
+    _useState28 = _slicedToArray(_useState27, 2),
+    inlineCatalogEntry = _useState28[0],
+    setInlineCatalogEntry = _useState28[1];
+
+  // Inline MCP stepper state
+  var _useState29 = React.useState(0),
+    _useState30 = _slicedToArray(_useState29, 2),
+    inlineWizardStep = _useState30[0],
+    setInlineWizardStep = _useState30[1];
+  var _useState31 = React.useState({}),
+    _useState32 = _slicedToArray(_useState31, 2),
+    inlineCredentialData = _useState32[0],
+    setInlineCredentialData = _useState32[1];
+  var _useState33 = React.useState(""),
+    _useState34 = _slicedToArray(_useState33, 2),
+    inlineProviderName = _useState34[0],
+    setInlineProviderName = _useState34[1];
+  var _useState35 = React.useState({}),
+    _useState36 = _slicedToArray(_useState35, 2),
+    inlineFormErrors = _useState36[0],
+    setInlineFormErrors = _useState36[1];
+  var _useState37 = React.useState(null),
+    _useState38 = _slicedToArray(_useState37, 2),
+    inlineTestResult = _useState38[0],
+    setInlineTestResult = _useState38[1];
+  var _useState39 = React.useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    inlineIsTesting = _useState40[0],
+    setInlineIsTesting = _useState40[1];
+  var _useState41 = React.useState(null),
+    _useState42 = _slicedToArray(_useState41, 2),
+    inlineAuthResult = _useState42[0],
+    setInlineAuthResult = _useState42[1];
+  var _useState43 = React.useState(false),
+    _useState44 = _slicedToArray(_useState43, 2),
+    inlineIsAuthorizing = _useState44[0],
+    setInlineIsAuthorizing = _useState44[1];
+  var _useState45 = React.useState(null),
+    _useState46 = _slicedToArray(_useState45, 2),
+    inlineSelectedTools = _useState46[0],
+    setInlineSelectedTools = _useState46[1];
+
+  // Installed widget grouping
+  var _useState47 = React.useState(new Set()),
+    _useState48 = _slicedToArray(_useState47, 2),
+    expandedGroups = _useState48[0],
+    setExpandedGroups = _useState48[1];
+
+  // Registry state
+  var _useState49 = React.useState(false),
+    _useState50 = _slicedToArray(_useState49, 2),
+    isLoadingRegistry = _useState50[0],
+    setIsLoadingRegistry = _useState50[1];
+  var _useState51 = React.useState(null),
+    _useState52 = _slicedToArray(_useState51, 2),
+    registryError = _useState52[0],
+    setRegistryError = _useState52[1];
+  var _useState53 = React.useState([]),
+    _useState54 = _slicedToArray(_useState53, 2),
+    registryPackages = _useState54[0],
+    setRegistryPackages = _useState54[1];
+  var _useState55 = React.useState("packages"),
+    _useState56 = _slicedToArray(_useState55, 2),
+    registryViewMode = _useState56[0],
+    setRegistryViewMode = _useState56[1]; // "packages" | "widgets"
+  var _useState57 = React.useState(new Set()),
+    _useState58 = _slicedToArray(_useState57, 2),
+    expandedPackages = _useState58[0],
+    setExpandedPackages = _useState58[1];
+  var _useState59 = React.useState(null),
+    _useState60 = _slicedToArray(_useState59, 2),
+    selectedPackage = _useState60[0],
+    setSelectedPackage = _useState60[1];
+  var _useState61 = React.useState(false),
+    _useState62 = _slicedToArray(_useState61, 2),
+    isInstalling = _useState62[0],
+    setIsInstalling = _useState62[1];
+  var _useState63 = React.useState(null),
+    _useState64 = _slicedToArray(_useState63, 2),
+    installError = _useState64[0],
+    setInstallError = _useState64[1];
+
+  // Phase 3: Recent Widgets - localStorage functions
+  var loadRecentWidgets = function loadRecentWidgets() {
+    try {
+      var stored = localStorage.getItem("recentWidgets");
+      var recentData = stored ? JSON.parse(stored) : [];
+
+      // Get widget details from ComponentManager
+      var allWidgets = ComponentManager.map();
+      var enrichedRecent = recentData.slice(0, 5) // Show top 5
+      .map(function (entry) {
+        var widget = allWidgets[entry.widgetKey];
+        if (!widget) return null; // Widget no longer exists
+        return _objectSpread$q(_objectSpread$q({
+          key: entry.widgetKey
+        }, widget), {}, {
+          savedProviders: entry.providers || {},
+          savedUserConfig: entry.userConfig || {},
+          timestamp: entry.timestamp
+        });
+      }).filter(Boolean); // Remove null entries
+
+      setRecentWidgets(enrichedRecent);
+    } catch (error) {
+      setRecentWidgets([]);
+    }
+  };
+  var saveToRecent = function saveToRecent(widget, providers, userConfig) {
+    try {
+      var stored = localStorage.getItem("recentWidgets");
+      var recent = stored ? JSON.parse(stored) : [];
+
+      // Create new entry
+      var newEntry = {
+        widgetKey: widget.key,
+        timestamp: Date.now(),
+        providers: providers || {},
+        userConfig: userConfig || {}
+      };
+
+      // Remove existing entry for this widget (if any) and add new one at front
+      var updated = [newEntry].concat(_toConsumableArray(recent.filter(function (r) {
+        return r.widgetKey !== widget.key;
+      }))).slice(0, 10); // Keep max 10
+
+      localStorage.setItem("recentWidgets", JSON.stringify(updated));
+
+      // Reload recent widgets to update UI
+      loadRecentWidgets();
+    } catch (error) {
+    }
+  };
+  var handleRecentClick = function handleRecentClick(recentWidget) {
+    setSelectedWidget(recentWidget);
+    setSelectedProviders(recentWidget.savedProviders || {});
+    setUserConfigValues(recentWidget.savedUserConfig || {});
+    // Reset inline provider creation form
+    setInlineCreateType(null);
+    setInlineCreateSchema({});
+    setInlineCreateError(null);
+  };
+
+  // Fetch MCP catalog for inline stepper creation
+  React.useEffect(function () {
+    if (isOpen && dashApi && mcpCatalog.length === 0) {
+      dashApi.mcpGetCatalog(function (event, result) {
+        return setMcpCatalog((result === null || result === void 0 ? void 0 : result.catalog) || []);
+      }, function () {});
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, dashApi]);
+
+  // Fetch widgets when modal opens
+  React.useEffect(function () {
+    if (isOpen) {
+      loadWidgets();
+      loadRecentWidgets(); // Phase 3: Load recent widgets
+      // Reset filters when modal opens
+      setSearchQuery("");
       setSelectedAuthor("all");
       setSelectedProvider("all");
       setExpandedGroups(new Set()); // Start with all groups collapsed
@@ -7612,7 +8127,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
       // Get widgets from ComponentManager
       var allWidgets = ComponentManager.map();
       var widgetList = Object.keys(allWidgets).map(function (key) {
-        return _objectSpread$r({
+        return _objectSpread$q({
           key: key
         }, allWidgets[key]);
       }).filter(function (widget) {
@@ -7812,21 +8327,37 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
   };
   var handleProviderSelect = function handleProviderSelect(providerType, providerName) {
     if (providerName === "__create_new__") {
-      // Find credential schema for this provider type
       var providerReq = selectedWidget.providers.find(function (p) {
         return p.type === providerType;
       });
 
-      // Show inline creation form
+      // Look up full catalog entry for MCP providers
+      var catalogEntry = mcpCatalog.find(function (s) {
+        return s.id === providerType;
+      });
       setInlineCreateType(providerType);
-      setInlineCreateSchema((providerReq === null || providerReq === void 0 ? void 0 : providerReq.credentialSchema) || {});
+      setInlineCreateSchema((catalogEntry === null || catalogEntry === void 0 ? void 0 : catalogEntry.credentialSchema) || (providerReq === null || providerReq === void 0 ? void 0 : providerReq.credentialSchema) || {});
       setInlineCreateError(null);
+
+      // Initialize stepper state for MCP providers
+      if (catalogEntry) {
+        setInlineCatalogEntry(catalogEntry);
+        setInlineProviderName(catalogEntry.name);
+        setInlineCredentialData({});
+        setInlineFormErrors({});
+        setInlineWizardStep(0);
+        setInlineTestResult(null);
+        setInlineAuthResult(null);
+        setInlineSelectedTools(null);
+      } else {
+        setInlineCatalogEntry(null);
+      }
     } else {
       // Normal provider selection - also close any open inline form
       setInlineCreateType(null);
       setInlineCreateSchema({});
       setInlineCreateError(null);
-      setSelectedProviders(_objectSpread$r(_objectSpread$r({}, selectedProviders), {}, _defineProperty({}, providerType, providerName)));
+      setSelectedProviders(_objectSpread$q(_objectSpread$q({}, selectedProviders), {}, _defineProperty({}, providerType, providerName)));
     }
   };
   var handleInlineProviderSubmit = function handleInlineProviderSubmit(formData) {
@@ -7847,7 +8378,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
 
       // Auto-select the newly created provider
       setSelectedProviders(function (prev) {
-        return _objectSpread$r(_objectSpread$r({}, prev), {}, _defineProperty({}, providerType, providerName));
+        return _objectSpread$q(_objectSpread$q({}, prev), {}, _defineProperty({}, providerType, providerName));
       });
 
       // Collapse the inline form
@@ -7863,9 +8394,163 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
     setInlineCreateType(null);
     setInlineCreateSchema({});
     setInlineCreateError(null);
+    setInlineCatalogEntry(null);
+    setInlineWizardStep(0);
+    setInlineCredentialData({});
+    setInlineProviderName("");
+    setInlineFormErrors({});
+    setInlineTestResult(null);
+    setInlineAuthResult(null);
+    setInlineSelectedTools(null);
+    setInlineIsTesting(false);
+    setInlineIsAuthorizing(false);
   };
-  var handleConfigChange = function handleConfigChange(key, value) {
-    setUserConfigValues(_objectSpread$r(_objectSpread$r({}, userConfigValues), {}, _defineProperty({}, key, value)));
+
+  // ── Inline MCP Stepper Handlers ──
+
+  var inlineFormFields = React.useMemo(function () {
+    if (!(inlineCatalogEntry !== null && inlineCatalogEntry !== void 0 && inlineCatalogEntry.mcpConfig)) return [];
+    return deriveFormFields(inlineCatalogEntry.mcpConfig, inlineCatalogEntry.credentialSchema || {});
+  }, [inlineCatalogEntry]);
+  var inlineHasAuth = !!(inlineCatalogEntry !== null && inlineCatalogEntry !== void 0 && inlineCatalogEntry.authCommand);
+  var inlineWizardSteps = inlineHasAuth ? ["configure", "authorize", "testTools"] : ["configure", "testTools"];
+  var inlineTotalSteps = inlineWizardSteps.length;
+  var inlineCurrentStepType = inlineWizardSteps[inlineWizardStep];
+  var inlineValidateForm = function inlineValidateForm() {
+    var errors = {};
+    if (!(inlineProviderName !== null && inlineProviderName !== void 0 && inlineProviderName.trim())) {
+      errors.providerName = "Provider name is required";
+    }
+    inlineFormFields.forEach(function (field) {
+      var _inlineCredentialData;
+      if (field.required && !((_inlineCredentialData = inlineCredentialData[field.key]) !== null && _inlineCredentialData !== void 0 && _inlineCredentialData.trim())) {
+        errors[field.key] = "".concat(field.displayName, " is required");
+      }
+    });
+    setInlineFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+  var inlineHandleCredentialChange = function inlineHandleCredentialChange(fieldName, value) {
+    setInlineCredentialData(function (prev) {
+      return _objectSpread$q(_objectSpread$q({}, prev), {}, _defineProperty({}, fieldName, value));
+    });
+    if (inlineFormErrors[fieldName] && value !== null && value !== void 0 && value.trim()) {
+      setInlineFormErrors(function (prev) {
+        var next = _objectSpread$q({}, prev);
+        delete next[fieldName];
+        return next;
+      });
+    }
+  };
+  var inlineHandleWizardStepChange = function inlineHandleWizardStepChange(newStep) {
+    if (newStep < inlineWizardStep) {
+      setInlineWizardStep(newStep);
+      return;
+    }
+    if (inlineCurrentStepType === "configure" && newStep > inlineWizardStep) {
+      if (!inlineValidateForm()) return;
+    }
+    if (inlineCurrentStepType === "authorize" && newStep > inlineWizardStep) {
+      if (!(inlineAuthResult !== null && inlineAuthResult !== void 0 && inlineAuthResult.success)) return;
+    }
+    setInlineWizardStep(newStep);
+  };
+  var inlineHandleTestConnection = function inlineHandleTestConnection() {
+    if (!dashApi || !(inlineCatalogEntry !== null && inlineCatalogEntry !== void 0 && inlineCatalogEntry.mcpConfig)) return;
+    setInlineIsTesting(true);
+    setInlineTestResult(null);
+    var testName = "__test__".concat(inlineCatalogEntry.id);
+    dashApi.mcpStartServer(testName, inlineCatalogEntry.mcpConfig, inlineCredentialData, function (event, result) {
+      if (result.error) {
+        setInlineTestResult({
+          success: false,
+          message: result.message
+        });
+        setInlineIsTesting(false);
+        return;
+      }
+      setInlineTestResult({
+        success: true,
+        tools: result.tools || [],
+        message: "Connected! Found ".concat((result.tools || []).length, " tools.")
+      });
+      setInlineSelectedTools((result.tools || []).map(function (t) {
+        return t.name;
+      }));
+      dashApi.mcpStopServer(testName, function () {}, function () {});
+      setInlineIsTesting(false);
+    }, function (event, err) {
+      setInlineTestResult({
+        success: false,
+        message: (err === null || err === void 0 ? void 0 : err.message) || "Connection failed"
+      });
+      setInlineIsTesting(false);
+    });
+  };
+  var inlineHandleAuthorize = function inlineHandleAuthorize() {
+    if (!dashApi || !(inlineCatalogEntry !== null && inlineCatalogEntry !== void 0 && inlineCatalogEntry.mcpConfig) || !(inlineCatalogEntry !== null && inlineCatalogEntry !== void 0 && inlineCatalogEntry.authCommand)) return;
+    setInlineIsAuthorizing(true);
+    setInlineAuthResult(null);
+    dashApi.mcpRunAuth(inlineCatalogEntry.mcpConfig, inlineCredentialData, inlineCatalogEntry.authCommand, function (event, result) {
+      if (result.error) {
+        setInlineAuthResult({
+          success: false,
+          message: result.message
+        });
+      } else {
+        setInlineAuthResult({
+          success: true,
+          message: "Authorized!"
+        });
+      }
+      setInlineIsAuthorizing(false);
+    }, function (event, err) {
+      setInlineAuthResult({
+        success: false,
+        message: (err === null || err === void 0 ? void 0 : err.message) || "Authorization failed"
+      });
+      setInlineIsAuthorizing(false);
+    });
+  };
+  var inlineHandleSave = function inlineHandleSave() {
+    if (!inlineCatalogEntry || !inlineValidateForm()) return;
+    var providerType = inlineCreateType;
+    var providerName = inlineProviderName.trim();
+    setIsCreatingProvider(true);
+    setInlineCreateError(null);
+    dashApi.saveProvider(credentials.appId, providerName, {
+      providerType: providerType,
+      credentials: inlineCredentialData,
+      providerClass: "mcp",
+      mcpConfig: inlineCatalogEntry.mcpConfig,
+      allowedTools: inlineSelectedTools
+    }, function (event, result) {
+      if (refreshProviders) {
+        refreshProviders();
+      }
+      setSelectedProviders(function (prev) {
+        return _objectSpread$q(_objectSpread$q({}, prev), {}, _defineProperty({}, providerType, providerName));
+      });
+
+      // Reset stepper state
+      setInlineCreateType(null);
+      setInlineCreateSchema({});
+      setInlineCatalogEntry(null);
+      setIsCreatingProvider(false);
+      setInlineWizardStep(0);
+      setInlineCredentialData({});
+      setInlineProviderName("");
+      setInlineFormErrors({});
+      setInlineTestResult(null);
+      setInlineAuthResult(null);
+      setInlineSelectedTools(null);
+    }, function (event, error) {
+      setInlineCreateError("Failed to create provider: ".concat((error === null || error === void 0 ? void 0 : error.message) || "Unknown error"));
+      setIsCreatingProvider(false);
+    });
+  };
+  var handleConfigChange = function handleConfigChange(key, value) {
+    setUserConfigValues(_objectSpread$q(_objectSpread$q({}, userConfigValues), {}, _defineProperty({}, key, value)));
   };
 
   // Install a package from the registry
@@ -7955,7 +8640,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
 
       // Phase 3: Save to recent widgets
       saveToRecent(selectedWidget, selectedProviders, userConfigValues);
-      onSelectWidget(_objectSpread$r(_objectSpread$r({}, selectedWidget), {}, {
+      onSelectWidget(_objectSpread$q(_objectSpread$q({}, selectedWidget), {}, {
         selectedProviders: selectedProviders,
         // Pass to parent
         userConfigValues: userConfigValues // Pass to parent
@@ -8496,6 +9181,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                         }), /*#__PURE__*/jsxRuntime.jsx("div", {
                           className: "space-y-2",
                           children: selectedWidget.providers.map(function (providerReq, idx) {
+                            var _inlineCatalogEntry$m, _inlineCatalogEntry$m2, _inlineCatalogEntry$m3, _inlineCatalogEntry$m4, _inlineCatalogEntry$m5, _inlineTestResult$too;
                             // Get available providers of this type
                             var providersOfType = Object.values(availableProviders).filter(function (p) {
                               return p.type === providerReq.type;
@@ -8540,7 +9226,227 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                                     className: "text-xs text-red-400",
                                     children: inlineCreateError
                                   })
-                                }), /*#__PURE__*/jsxRuntime.jsx(ProviderForm, {
+                                }), inlineCatalogEntry ?
+                                /*#__PURE__*/
+                                /* MCP Provider: Stepper-based creation */
+                                jsxRuntime.jsxs("div", {
+                                  className: "space-y-3",
+                                  children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+                                    activeStep: inlineWizardStep,
+                                    onStepChange: inlineHandleWizardStepChange,
+                                    showNavigation: false,
+                                    className: "flex-1 min-h-0 flex flex-col",
+                                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+                                      label: "Configure",
+                                      description: "Name & credentials",
+                                      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                        className: "space-y-4 pb-2",
+                                        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                                          className: "bg-white/5 border border-white/10 rounded-lg p-3 space-y-2",
+                                          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-1 text-sm",
+                                            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                                              className: "flex gap-2",
+                                              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                                                className: "opacity-50 w-20 shrink-0",
+                                                children: "Transport:"
+                                              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
+                                                text: ((_inlineCatalogEntry$m = inlineCatalogEntry.mcpConfig) === null || _inlineCatalogEntry$m === void 0 ? void 0 : _inlineCatalogEntry$m.transport) === "streamable_http" ? "Streamable HTTP" : "stdio"
+                                              })]
+                                            }), ((_inlineCatalogEntry$m2 = inlineCatalogEntry.mcpConfig) === null || _inlineCatalogEntry$m2 === void 0 ? void 0 : _inlineCatalogEntry$m2.transport) !== "streamable_http" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                              className: "flex gap-2",
+                                              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                                                className: "opacity-50 w-20 shrink-0",
+                                                children: "Command:"
+                                              }), /*#__PURE__*/jsxRuntime.jsxs("code", {
+                                                className: "text-xs bg-white/5 px-2 py-0.5 rounded",
+                                                children: [(_inlineCatalogEntry$m3 = inlineCatalogEntry.mcpConfig) === null || _inlineCatalogEntry$m3 === void 0 ? void 0 : _inlineCatalogEntry$m3.command, " ", (((_inlineCatalogEntry$m4 = inlineCatalogEntry.mcpConfig) === null || _inlineCatalogEntry$m4 === void 0 ? void 0 : _inlineCatalogEntry$m4.args) || []).join(" ")]
+                                              })]
+                                            })]
+                                          })]
+                                        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                          className: "flex flex-col gap-1",
+                                          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                                            label: "Provider Name",
+                                            required: true
+                                          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                                            value: inlineProviderName,
+                                            onChange: function onChange(value) {
+                                              setInlineProviderName(value);
+                                              if (inlineFormErrors.providerName && value !== null && value !== void 0 && value.trim()) {
+                                                setInlineFormErrors(function (prev) {
+                                                  var next = _objectSpread$q({}, prev);
+                                                  delete next.providerName;
+                                                  return next;
+                                                });
+                                              }
+                                            },
+                                            placeholder: "Enter provider name"
+                                          }), inlineFormErrors.providerName && /*#__PURE__*/jsxRuntime.jsx("p", {
+                                            className: "text-xs text-red-400",
+                                            children: inlineFormErrors.providerName
+                                          })]
+                                        }), inlineFormFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                                            className: "border-t border-white/10 pt-3",
+                                            children: /*#__PURE__*/jsxRuntime.jsx("p", {
+                                              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                                              children: ((_inlineCatalogEntry$m5 = inlineCatalogEntry.mcpConfig) === null || _inlineCatalogEntry$m5 === void 0 ? void 0 : _inlineCatalogEntry$m5.transport) === "streamable_http" ? "Server Configuration" : "Authentication"
+                                            })
+                                          }), inlineFormFields.map(function (field) {
+                                            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                              className: "flex flex-col gap-1",
+                                              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                                                label: field.displayName,
+                                                required: field.required
+                                              }), field.instructions && /*#__PURE__*/jsxRuntime.jsx("p", {
+                                                className: "text-xs 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: inlineCredentialData[field.key] || "",
+                                                    onChange: function onChange(value) {
+                                                      return inlineHandleCredentialChange(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 _callee3() {
+                                                    var filepath;
+                                                    return _regeneratorRuntime.wrap(function (_context3) {
+                                                      while (1) switch (_context3.prev = _context3.next) {
+                                                        case 0:
+                                                          _context3.next = 1;
+                                                          return window.mainApi.dialog.chooseFile(true, ["json"]);
+                                                        case 1:
+                                                          filepath = _context3.sent;
+                                                          if (filepath) inlineHandleCredentialChange(field.key, filepath);
+                                                        case 2:
+                                                        case "end":
+                                                          return _context3.stop();
+                                                      }
+                                                    }, _callee3);
+                                                  })),
+                                                  className: "px-3 py-1.5 text-sm rounded bg-white/10 hover:bg-white/20 transition-colors",
+                                                  children: "Browse"
+                                                })]
+                                              }), inlineFormErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
+                                                className: "text-xs text-red-400",
+                                                children: inlineFormErrors[field.key]
+                                              })]
+                                            }, field.key);
+                                          })]
+                                        })]
+                                      })
+                                    }), inlineHasAuth && /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+                                      label: "Authorize",
+                                      description: "OAuth authentication",
+                                      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                        className: "space-y-4 pb-2",
+                                        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                                          className: "flex flex-col items-center justify-center py-6 space-y-3",
+                                          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: inlineIsAuthorizing ? "Authorizing..." : "Authorize",
+                                            onClick: inlineHandleAuthorize,
+                                            size: "sm"
+                                          })]
+                                        }), inlineAuthResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+                                          className: "p-3 rounded-lg text-sm ".concat(inlineAuthResult.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: inlineAuthResult.success ? "circle-check" : "circle-exclamation"
+                                            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                                              children: inlineAuthResult.message
+                                            })]
+                                          })
+                                        })]
+                                      })
+                                    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+                                      label: "Test & Tools",
+                                      description: "Verify & select tools",
+                                      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                        className: "space-y-3 pb-2",
+                                        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                                          className: "flex items-center gap-3",
+                                          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                            title: inlineIsTesting ? "Fetching..." : "Fetch Tools",
+                                            onClick: inlineHandleTestConnection,
+                                            size: "sm"
+                                          }), inlineTestResult && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                                            className: "text-sm ".concat(inlineTestResult.success ? "text-green-400" : "text-red-400"),
+                                            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                                              icon: inlineTestResult.success ? "circle-check" : "circle-exclamation",
+                                              className: "mr-1"
+                                            }), inlineTestResult.message]
+                                          })]
+                                        }), (inlineTestResult === null || inlineTestResult === void 0 ? void 0 : inlineTestResult.success) && ((_inlineTestResult$too = inlineTestResult.tools) === null || _inlineTestResult$too === void 0 ? void 0 : _inlineTestResult$too.length) > 0 && inlineSelectedTools && /*#__PURE__*/jsxRuntime.jsx(ToolSelector, {
+                                          tools: inlineTestResult.tools,
+                                          selectedTools: inlineSelectedTools,
+                                          onSelectionChange: setInlineSelectedTools
+                                        }), !inlineTestResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+                                          className: "text-center py-6 opacity-50 text-sm",
+                                          children: "Click \"Fetch Tools\" to test the connection and discover available tools."
+                                        })]
+                                      })
+                                    })]
+                                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                    className: "flex flex-row items-center pt-3 border-t border-white/10",
+                                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                                      className: "flex flex-row gap-2",
+                                      children: [inlineWizardStep === 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                        title: "Cancel",
+                                        onClick: handleInlineProviderCancel,
+                                        size: "sm"
+                                      }), inlineWizardStep > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                        title: "Back",
+                                        onClick: function onClick() {
+                                          return setInlineWizardStep(inlineWizardStep - 1);
+                                        },
+                                        size: "sm"
+                                      })]
+                                    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                                      className: "flex-1 text-center",
+                                      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+                                        className: "text-xs opacity-40",
+                                        children: ["Step ", inlineWizardStep + 1, " of ", inlineTotalSteps]
+                                      })
+                                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                      className: "flex flex-row gap-2",
+                                      children: [inlineCurrentStepType === "configure" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                        title: "Next",
+                                        onClick: function onClick() {
+                                          return inlineHandleWizardStepChange(inlineWizardStep + 1);
+                                        },
+                                        size: "sm"
+                                      }), inlineCurrentStepType === "authorize" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                        title: "Next",
+                                        onClick: function onClick() {
+                                          return inlineHandleWizardStepChange(inlineWizardStep + 1);
+                                        },
+                                        disabled: !(inlineAuthResult !== null && inlineAuthResult !== void 0 && inlineAuthResult.success),
+                                        size: "sm"
+                                      }), inlineCurrentStepType === "testTools" && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+                                        title: isCreatingProvider ? "Saving..." : "Save MCP Server",
+                                        onClick: inlineHandleSave,
+                                        size: "sm"
+                                      })]
+                                    })]
+                                  })]
+                                }) :
+                                /*#__PURE__*/
+                                /* Credential Provider: flat form fallback */
+                                jsxRuntime.jsx(ProviderForm, {
                                   credentialSchema: inlineCreateSchema,
                                   onSubmit: handleInlineProviderSubmit,
                                   onCancel: handleInlineProviderCancel,
@@ -8559,10 +9465,10 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                           children: "CONFIGURATION"
                         }), /*#__PURE__*/jsxRuntime.jsx("div", {
                           className: "space-y-2",
-                          children: Object.entries(selectedWidget.userConfig).map(function (_ref8) {
-                            var _ref9 = _slicedToArray(_ref8, 2),
-                              key = _ref9[0],
-                              config = _ref9[1];
+                          children: Object.entries(selectedWidget.userConfig).map(function (_ref9) {
+                            var _ref0 = _slicedToArray(_ref9, 2),
+                              key = _ref0[0],
+                              config = _ref0[1];
                             return /*#__PURE__*/jsxRuntime.jsxs("div", {
                               className: "space-y-1",
                               children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
@@ -9047,748 +9953,367 @@ var WidgetCardHeader = function WidgetCardHeader(_ref) {
           position: "absolute top-full right-0 mt-1",
           portal: true,
           align: "right",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.DropdownPanel.Header, {
-            children: "Actions"
-          }), overflowActions.map(function (action) {
-            return /*#__PURE__*/jsxRuntime.jsxs(DashReact.MenuItem2, {
-              onClick: action.onClick,
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: action.icon,
-                className: "w-4 text-center opacity-60"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                children: action.label
-              })]
-            }, action.label);
-          })]
-        })]
-      }) : null
-    })]
-  });
-};
-
-/**
- * WidgetCard
- *
- * Wrapper component for widgets that provides:
- * - Header with drag handle, provider controls, actions (edit mode only)
- * - Body with padding around widget content (edit mode only)
- * - Footer for future features (edit mode only)
- *
- * In preview mode (preview === true):
- * - Only renders the widget content without any wrapper
- *
- * In edit mode (preview === false):
- * - Renders header + padded content + optional footer
- */
-
-var WidgetCardContext = /*#__PURE__*/React.createContext({
-  preview: false
-});
-
-/**
- * WidgetCard.Header - Header section with controls
- * Only renders in edit mode (preview === false)
- */
-var WidgetCardHeader_Component = function WidgetCardHeader_Component(_ref) {
-  var item = _ref.item,
-    _ref$cellNumber = _ref.cellNumber,
-    cellNumber = _ref$cellNumber === void 0 ? null : _ref$cellNumber,
-    _ref$providers = _ref.providers,
-    providers = _ref$providers === void 0 ? [] : _ref$providers,
-    _ref$selectedProvider = _ref.selectedProviders,
-    selectedProviders = _ref$selectedProvider === void 0 ? {} : _ref$selectedProvider,
-    onProviderChange = _ref.onProviderChange,
-    onConfigure = _ref.onConfigure,
-    onDelete = _ref.onDelete,
-    _ref$onSplitHorizonta = _ref.onSplitHorizontal,
-    onSplitHorizontal = _ref$onSplitHorizonta === void 0 ? null : _ref$onSplitHorizonta,
-    _ref$onSplitVertical = _ref.onSplitVertical,
-    onSplitVertical = _ref$onSplitVertical === void 0 ? null : _ref$onSplitVertical,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$isSelectable = _ref.isSelectable,
-    isSelectable = _ref$isSelectable === void 0 ? true : _ref$isSelectable,
-    _ref$onToggleSelect = _ref.onToggleSelect,
-    onToggleSelect = _ref$onToggleSelect === void 0 ? null : _ref$onToggleSelect;
-  var _React$useContext = React.useContext(WidgetCardContext),
-    preview = _React$useContext.preview;
-
-  // Don't render header in preview mode
-  if (preview === true) {
-    return null;
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(WidgetCardHeader, {
-    item: item,
-    cellNumber: cellNumber,
-    providers: providers,
-    selectedProviders: selectedProviders,
-    onProviderChange: onProviderChange,
-    onConfigure: onConfigure,
-    onDelete: onDelete,
-    onSplitHorizontal: onSplitHorizontal,
-    onSplitVertical: onSplitVertical,
-    isSelected: isSelected,
-    isSelectable: isSelectable,
-    onToggleSelect: onToggleSelect
-  });
-};
-
-/**
- * WidgetCard.Body - Body section with widget content
- * In edit mode: adds padding around content
- * In preview mode: renders content without padding
- */
-var WidgetCardBody = function WidgetCardBody(_ref2) {
-  var children = _ref2.children,
-    _ref2$padding = _ref2.padding,
-    padding = _ref2$padding === void 0 ? "p-2" : _ref2$padding,
-    _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? "" : _ref2$className;
-  var _React$useContext2 = React.useContext(WidgetCardContext),
-    preview = _React$useContext2.preview;
-
-  // In preview mode, render children without padding wrapper
-  if (preview === true) {
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: children
-    });
-  }
-
-  // In edit mode, render with padding
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex-1 min-h-0 overflow-auto ".concat(padding, " ").concat(className),
-    children: children
-  });
-};
-
-/**
- * WidgetCard.Footer - Footer section with handler warnings
- * Only renders in edit mode (preview === false)
- * Shows amber warning when widget has eventHandlers that lack listener connections
- */
-var WidgetCardFooter = function WidgetCardFooter(_ref3) {
-  var children = _ref3.children,
-    _ref3$item = _ref3.item,
-    item = _ref3$item === void 0 ? null : _ref3$item,
-    _ref3$onConfigure = _ref3.onConfigure,
-    onConfigure = _ref3$onConfigure === void 0 ? null : _ref3$onConfigure,
-    _ref3$className = _ref3.className,
-    className = _ref3$className === void 0 ? "" : _ref3$className;
-  var _React$useContext3 = React.useContext(WidgetCardContext),
-    preview = _React$useContext3.preview;
-  if (preview === true) return null;
-
-  // Compute unconfigured handlers
-  var widgetConfig = item !== null && item !== void 0 && item.component ? ComponentManager.config(item.component, item) : null;
-  var eventHandlers = (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.eventHandlers) || [];
-  var listeners = (item === null || item === void 0 ? void 0 : item.listeners) || {};
-  var unconfiguredCount = eventHandlers.filter(function (h) {
-    return !listeners[h] || listeners[h].length === 0;
-  }).length;
-
-  // Don't render if no children AND no warnings
-  if (!children && unconfiguredCount === 0) return null;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "border-t border-gray-700 px-3 py-1.5 bg-transparent ".concat(className),
-    children: [children, unconfiguredCount > 0 && /*#__PURE__*/jsxRuntime.jsxs("button", {
-      type: "button",
-      onClick: function onClick() {
-        return onConfigure && onConfigure(item, "handlers");
-      },
-      className: "inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border bg-amber-900/20 border-amber-700/50 text-amber-400 hover:bg-amber-900/30 hover:border-amber-600/50 transition-all cursor-pointer",
-      title: "Click to configure listeners",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-        icon: "phone",
-        className: "text-[10px]"
-      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-        children: [unconfiguredCount, " listener", unconfiguredCount > 1 ? "s" : "", " not connected"]
-      })]
-    })]
-  });
-};
-
-/**
- * WidgetCard - Main wrapper component
- *
- * In preview mode: renders children without any wrapper
- * In edit mode: wraps children in a container
- */
-var WidgetCard = function WidgetCard(_ref4) {
-  var _ref4$preview = _ref4.preview,
-    preview = _ref4$preview === void 0 ? false : _ref4$preview,
-    children = _ref4.children,
-    _ref4$className = _ref4.className,
-    className = _ref4$className === void 0 ? "" : _ref4$className;
-  // In preview mode, render children without wrapper
-  if (preview === true) {
-    return /*#__PURE__*/jsxRuntime.jsx(WidgetCardContext.Provider, {
-      value: {
-        preview: preview
-      },
-      children: children
-    });
-  }
-
-  // In edit mode, render with wrapper (no padding - Body handles padding)
-  return /*#__PURE__*/jsxRuntime.jsx(WidgetCardContext.Provider, {
-    value: {
-      preview: preview
-    },
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex flex-col w-full h-full min-h-0 overflow-hidden rounded border border-dashed border-gray-700 ".concat(className),
-      children: children
-    })
-  });
-};
-
-// Attach subcomponents
-WidgetCard.Header = WidgetCardHeader_Component;
-WidgetCard.Body = WidgetCardBody;
-WidgetCard.Footer = WidgetCardFooter;
-
-var ProviderSelector = function ProviderSelector(_ref) {
-  var isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    providerType = _ref.providerType,
-    _ref$existingProvider = _ref.existingProviders,
-    existingProviders = _ref$existingProvider === void 0 ? [] : _ref$existingProvider,
-    _ref$credentialSchema = _ref.credentialSchema,
-    credentialSchema = _ref$credentialSchema === void 0 ? {} : _ref$credentialSchema,
-    onSelect = _ref.onSelect,
-    onCreate = _ref.onCreate;
-  var _useState = React.useState("select"),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1]; // "select" or "create"
-
-  /**
-   * Filter providers by type
-   */
-  var filteredProviders = existingProviders.filter(function (p) {
-    return p.type === providerType;
-  });
-
-  /**
-   * Handle provider selection
-   */
-  var handleSelectProvider = function handleSelectProvider(providerName) {
-    onSelect(providerName);
-    setIsOpen(false);
-  };
-
-  /**
-   * Handle new provider creation
-   */
-  var handleCreateProvider = function handleCreateProvider(formData) {
-    // formData now contains { name, credentials }
-    var providerName = formData.name,
-      credentials = formData.credentials;
-    onCreate(providerName, credentials);
-    setIsOpen(false);
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
-    isOpen: isOpen,
-    setIsOpen: setIsOpen,
-    width: "w-11/12 xl:w-5/6",
-    height: "h-5/6",
-    children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Panel, {
-      border: true,
-      padding: false,
-      backgroundColor: "bg-gray-800",
-      borderColor: "border-gray-700",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Header, {
-        border: true,
-        borderColor: "border-gray-700",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col w-full space-y-4",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-row justify-between items-start",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
-                className: "text-2xl font-bold text-gray-100",
-                children: providerType ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: ["Manage ", /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "capitalize",
-                    children: providerType
-                  }), " ", "Providers"]
-                }) : "Select Provider"
-              }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-sm text-gray-400 mt-1",
-                children: activeTab === "select" ? "Select an existing ".concat(providerType, " provider or create a new one") : "Create a new ".concat(providerType, " provider")
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx("button", {
-              onClick: function onClick() {
-                return setIsOpen(false);
-              },
-              className: "ml-4 text-gray-400 hover:text-gray-200 transition-colors",
-              children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "times",
-                className: "text-xl"
-              })
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-              title: "Select Existing (".concat(filteredProviders.length, ")"),
-              onClick: function onClick() {
-                return setActiveTab("select");
-              },
-              backgroundColor: activeTab === "select" ? "bg-blue-600" : "bg-gray-700",
-              hoverBackgroundColor: activeTab === "select" ? "hover:bg-blue-700" : "hover:bg-gray-600",
-              padding: "px-4 py-2",
-              textSize: "text-sm"
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-              title: "Create New",
-              onClick: function onClick() {
-                return setActiveTab("create");
-              },
-              backgroundColor: activeTab === "create" ? "bg-blue-600" : "bg-gray-700",
-              hoverBackgroundColor: activeTab === "create" ? "hover:bg-blue-700" : "hover:bg-gray-600",
-              padding: "px-4 py-2",
-              textSize: "text-sm"
-            })]
-          })]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-full overflow-y-auto",
-          children: activeTab === "select" ?
-          /*#__PURE__*/
-          // Select Tab
-          jsxRuntime.jsx("div", {
-            className: "p-6",
-            children: filteredProviders.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "space-y-3",
-              children: filteredProviders.map(function (provider) {
-                return /*#__PURE__*/jsxRuntime.jsxs("button", {
-                  onClick: function onClick() {
-                    return handleSelectProvider(provider.name);
-                  },
-                  className: "w-full text-left p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all",
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "font-semibold",
-                    children: provider.name
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "text-sm opacity-70 mt-1",
-                    children: ["Type:", " ", /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "capitalize",
-                      children: provider.type
-                    })]
-                  }), provider.credentials && Object.keys(provider.credentials).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "text-xs opacity-50 mt-2",
-                    children: ["Fields:", " ", Object.keys(provider.credentials).join(", ")]
-                  })]
-                }, provider.name);
-              })
-            }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "text-center py-12",
-              children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.SubHeading3, {
-                className: "opacity-50",
-                children: ["No ", providerType, " providers found"]
-              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-                className: "mt-2 opacity-70",
-                children: "Create one using the \"Create New\" tab"
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.DropdownPanel.Header, {
+            children: "Actions"
+          }), overflowActions.map(function (action) {
+            return /*#__PURE__*/jsxRuntime.jsxs(DashReact.MenuItem2, {
+              onClick: action.onClick,
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: action.icon,
+                className: "w-4 text-center opacity-60"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: action.label
               })]
-            })
-          }) :
-          /*#__PURE__*/
-          // Create Tab
-          jsxRuntime.jsx(ProviderForm, {
-            credentialSchema: credentialSchema,
-            onSubmit: handleCreateProvider,
-            onCancel: function onCancel() {
-              return setIsOpen(false);
-            },
-            submitLabel: "Create Provider",
-            providerType: providerType
-          })
-        })
-      })]
-    })
+            }, action.label);
+          })]
+        })]
+      }) : null
+    })]
   });
 };
 
-function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Shared MCP utility functions.
+ * WidgetCard
  *
- * Extracted from McpServerPicker so ProviderDetail (and any future consumer)
- * can reuse the same field-derivation logic.
- */
-
-/**
- * Derive required form fields from an mcpConfig, using credentialSchema
- * as optional enrichment for display names, instructions, and secret flags.
+ * Wrapper component for widgets that provides:
+ * - Header with drag handle, provider controls, actions (edit mode only)
+ * - Body with padding around widget content (edit mode only)
+ * - Footer for future features (edit mode only)
  *
- * For streamable_http: extracts {{placeholder}} fields from url and headerTemplate.
- * For stdio: extracts credential field names from envMapping values.
+ * In preview mode (preview === true):
+ * - Only renders the widget content without any wrapper
  *
- * @param {object} mcpConfig - The MCP server configuration
- * @param {object} credentialSchema - Optional metadata for field labels/instructions
- * @returns {Array<{ key, displayName, required, secret, instructions, type }>}
+ * In edit mode (preview === false):
+ * - Renders header + padded content + optional footer
  */
-function deriveFormFields(mcpConfig) {
-  var credentialSchema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var fieldKeys = new Set();
-  if (mcpConfig.transport === "streamable_http") {
-    // Extract {{field}} placeholders from url
-    if (mcpConfig.url) {
-      var urlMatches = mcpConfig.url.match(/\{\{(\w+)\}\}/g) || [];
-      urlMatches.forEach(function (m) {
-        return fieldKeys.add(m.slice(2, -2));
-      });
-    }
-    // Extract {{field}} placeholders from headerTemplate values
-    if (mcpConfig.headerTemplate) {
-      Object.values(mcpConfig.headerTemplate).forEach(function (template) {
-        var matches = template.match(/\{\{(\w+)\}\}/g) || [];
-        matches.forEach(function (m) {
-          return fieldKeys.add(m.slice(2, -2));
-        });
-      });
-    }
-  } else {
-    // stdio: extract credential field names from envMapping values
-    if (mcpConfig.envMapping) {
-      Object.values(mcpConfig.envMapping).forEach(function (credField) {
-        fieldKeys.add(credField);
-      });
-    }
-  }
-
-  // Also include any fields defined in credentialSchema that aren't already derived
-  if (credentialSchema) {
-    Object.keys(credentialSchema).forEach(function (key) {
-      return fieldKeys.add(key);
-    });
-  }
-
-  // Build the field list with metadata from credentialSchema or auto-generated defaults
-  return Array.from(fieldKeys).map(function (key) {
-    var schemaMeta = credentialSchema[key];
-    if (schemaMeta) {
-      return {
-        key: key,
-        displayName: schemaMeta.displayName || formatFieldName(key),
-        required: schemaMeta.required === true,
-        secret: schemaMeta.secret || false,
-        instructions: schemaMeta.instructions || null,
-        type: schemaMeta.type || "text"
-      };
-    }
 
-    // Auto-generate defaults from the field name
-    return {
-      key: key,
-      displayName: formatFieldName(key),
-      required: false,
-      secret: isLikelySecret(key),
-      instructions: null,
-      type: "text"
-    };
-  });
-}
+var WidgetCardContext = /*#__PURE__*/React.createContext({
+  preview: false
+});
 
 /**
- * Convert a camelCase field name to a human-readable title.
- * e.g., "apiKey" → "API Key", "url" → "URL", "botToken" → "Bot Token"
+ * WidgetCard.Header - Header section with controls
+ * Only renders in edit mode (preview === false)
  */
-function formatFieldName(name) {
-  var acronyms = {
-    url: "URL",
-    api: "API",
-    id: "ID",
-    mcp: "MCP"
-  };
-  return name.replace(/([A-Z])/g, " $1").replace(/^./, function (s) {
-    return s.toUpperCase();
-  }).trim().split(" ").map(function (word) {
-    return acronyms[word.toLowerCase()] || word;
-  }).join(" ");
-}
+var WidgetCardHeader_Component = function WidgetCardHeader_Component(_ref) {
+  var item = _ref.item,
+    _ref$cellNumber = _ref.cellNumber,
+    cellNumber = _ref$cellNumber === void 0 ? null : _ref$cellNumber,
+    _ref$providers = _ref.providers,
+    providers = _ref$providers === void 0 ? [] : _ref$providers,
+    _ref$selectedProvider = _ref.selectedProviders,
+    selectedProviders = _ref$selectedProvider === void 0 ? {} : _ref$selectedProvider,
+    onProviderChange = _ref.onProviderChange,
+    onConfigure = _ref.onConfigure,
+    onDelete = _ref.onDelete,
+    _ref$onSplitHorizonta = _ref.onSplitHorizontal,
+    onSplitHorizontal = _ref$onSplitHorizonta === void 0 ? null : _ref$onSplitHorizonta,
+    _ref$onSplitVertical = _ref.onSplitVertical,
+    onSplitVertical = _ref$onSplitVertical === void 0 ? null : _ref$onSplitVertical,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isSelectable = _ref.isSelectable,
+    isSelectable = _ref$isSelectable === void 0 ? true : _ref$isSelectable,
+    _ref$onToggleSelect = _ref.onToggleSelect,
+    onToggleSelect = _ref$onToggleSelect === void 0 ? null : _ref$onToggleSelect;
+  var _React$useContext = React.useContext(WidgetCardContext),
+    preview = _React$useContext.preview;
 
-/**
- * Heuristic: does this field name likely contain a secret value?
- */
-function isLikelySecret(name) {
-  var lower = name.toLowerCase();
-  return /key|token|secret|password|credential|auth/.test(lower);
-}
+  // Don't render header in preview mode
+  if (preview === true) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(WidgetCardHeader, {
+    item: item,
+    cellNumber: cellNumber,
+    providers: providers,
+    selectedProviders: selectedProviders,
+    onProviderChange: onProviderChange,
+    onConfigure: onConfigure,
+    onDelete: onDelete,
+    onSplitHorizontal: onSplitHorizontal,
+    onSplitVertical: onSplitVertical,
+    isSelected: isSelected,
+    isSelectable: isSelectable,
+    onToggleSelect: onToggleSelect
+  });
+};
 
 /**
- * Build an mcpConfig by overlaying advanced-section rows onto a catalog base config.
- *
- * For stdio: replaces `envMapping` with the rows from the advanced section.
- * For streamable_http: replaces `headerTemplate` with the rows from the advanced section.
- *
- * @param {object} baseMcpConfig - The catalog's original mcpConfig
- * @param {Array<{ envVar: string, credField: string }>} envMappingRows - Current env var rows
- * @param {Array<{ headerName: string, headerValue: string }>} headerRows - Current header rows
- * @returns {object} A new mcpConfig with overridden envMapping or headerTemplate
+ * WidgetCard.Body - Body section with widget content
+ * In edit mode: adds padding around content
+ * In preview mode: renders content without padding
  */
-function buildMcpConfigFromOverrides(baseMcpConfig, envMappingRows, headerRows) {
-  if (baseMcpConfig.transport === "streamable_http") {
-    var headerTemplate = {};
-    headerRows.forEach(function (row) {
-      var name = row.headerName.trim();
-      var value = row.headerValue.trim();
-      if (name && value) {
-        headerTemplate[name] = value;
-      }
+var WidgetCardBody = function WidgetCardBody(_ref2) {
+  var children = _ref2.children,
+    _ref2$padding = _ref2.padding,
+    padding = _ref2$padding === void 0 ? "p-2" : _ref2$padding,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className;
+  var _React$useContext2 = React.useContext(WidgetCardContext),
+    preview = _React$useContext2.preview;
+
+  // In preview mode, render children without padding wrapper
+  if (preview === true) {
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: children
     });
-    var config = _objectSpread$q({}, baseMcpConfig);
-    if (Object.keys(headerTemplate).length > 0) {
-      config.headerTemplate = headerTemplate;
-    } else {
-      delete config.headerTemplate;
-    }
-    return config;
   }
 
-  // stdio
-  var envMapping = {};
-  envMappingRows.forEach(function (row) {
-    var env = row.envVar.trim();
-    var cred = row.credField.trim();
-    if (env && cred) {
-      envMapping[env] = cred;
-    }
-  });
-  return _objectSpread$q(_objectSpread$q({}, baseMcpConfig), {}, {
-    envMapping: envMapping
-  });
-}
-
-/**
- * Convert an envMapping object into row state for the advanced config UI.
- *
- * @param {object} envMapping - e.g. { SLACK_BOT_TOKEN: "botToken" }
- * @param {Function} nextRowId - Function that returns a unique row ID
- * @returns {Array<{ id: string, envVar: string, credField: string }>}
- */
-function envMappingToRows(envMapping, nextRowId) {
-  if (!envMapping) return [];
-  return Object.entries(envMapping).map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      envVar = _ref2[0],
-      credField = _ref2[1];
-    return {
-      id: nextRowId(),
-      envVar: envVar,
-      credField: credField
-    };
+  // In edit mode, render with padding
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex-1 min-h-0 overflow-auto ".concat(padding, " ").concat(className),
+    children: children
   });
-}
+};
 
 /**
- * Convert a headerTemplate object into row state for the advanced config UI.
- *
- * @param {object} headerTemplate - e.g. { "Authorization": "Bearer {{apiKey}}" }
- * @param {Function} nextRowId - Function that returns a unique row ID
- * @returns {Array<{ id: string, headerName: string, headerValue: string }>}
+ * WidgetCard.Footer - Footer section with handler warnings
+ * Only renders in edit mode (preview === false)
+ * Shows amber warning when widget has eventHandlers that lack listener connections
  */
-function headerTemplateToRows(headerTemplate, nextRowId) {
-  if (!headerTemplate) return [];
-  return Object.entries(headerTemplate).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      headerName = _ref4[0],
-      headerValue = _ref4[1];
-    return {
-      id: nextRowId(),
-      headerName: headerName,
-      headerValue: headerValue
-    };
+var WidgetCardFooter = function WidgetCardFooter(_ref3) {
+  var children = _ref3.children,
+    _ref3$item = _ref3.item,
+    item = _ref3$item === void 0 ? null : _ref3$item,
+    _ref3$onConfigure = _ref3.onConfigure,
+    onConfigure = _ref3$onConfigure === void 0 ? null : _ref3$onConfigure,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className;
+  var _React$useContext3 = React.useContext(WidgetCardContext),
+    preview = _React$useContext3.preview;
+  if (preview === true) return null;
+
+  // Compute unconfigured handlers
+  var widgetConfig = item !== null && item !== void 0 && item.component ? ComponentManager.config(item.component, item) : null;
+  var eventHandlers = (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.eventHandlers) || [];
+  var listeners = (item === null || item === void 0 ? void 0 : item.listeners) || {};
+  var unconfiguredCount = eventHandlers.filter(function (h) {
+    return !listeners[h] || listeners[h].length === 0;
+  }).length;
+
+  // Don't render if no children AND no warnings
+  if (!children && unconfiguredCount === 0) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border-t border-gray-700 px-3 py-1.5 bg-transparent ".concat(className),
+    children: [children, unconfiguredCount > 0 && /*#__PURE__*/jsxRuntime.jsxs("button", {
+      type: "button",
+      onClick: function onClick() {
+        return onConfigure && onConfigure(item, "handlers");
+      },
+      className: "inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border bg-amber-900/20 border-amber-700/50 text-amber-400 hover:bg-amber-900/30 hover:border-amber-600/50 transition-all cursor-pointer",
+      title: "Click to configure listeners",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "phone",
+        className: "text-[10px]"
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        children: [unconfiguredCount, " listener", unconfiguredCount > 1 ? "s" : "", " not connected"]
+      })]
+    })]
   });
-}
+};
 
 /**
- * Serialize the current form state into a bare MCP JSON config string.
- *
- * Output format (stdio):
- * {
- *   "type": "stdio",
- *   "command": "npx",
- *   "args": ["-y", "package-name"],
- *   "env": { "API_KEY": "${API_KEY}" }
- * }
- *
- * Output format (HTTP):
- * {
- *   "type": "streamable_http",
- *   "url": "https://example.com/mcp",
- *   "headerTemplate": { "Authorization": "Bearer {{apiKey}}" }
- * }
- *
- * Credential values are NOT embedded — env values use ${FIELD_NAME} syntax
- * to reference credential fields entered separately in the form.
+ * WidgetCard - Main wrapper component
  *
- * @param {string} name - The provider name (unused in output, kept for API compat)
- * @param {string} transport - "stdio" or "streamable_http"
- * @param {object} fields - { command, args, envMappingRows, url, headerRows }
- * @returns {string} Formatted JSON string
+ * In preview mode: renders children without any wrapper
+ * In edit mode: wraps children in a container
  */
-function formStateToMcpJson(name, transport, fields) {
-  var _fields$command = fields.command,
-    command = _fields$command === void 0 ? "" : _fields$command,
-    _fields$args = fields.args,
-    args = _fields$args === void 0 ? "" : _fields$args,
-    _fields$envMappingRow = fields.envMappingRows,
-    envMappingRows = _fields$envMappingRow === void 0 ? [] : _fields$envMappingRow,
-    _fields$url = fields.url,
-    url = _fields$url === void 0 ? "" : _fields$url,
-    _fields$headerRows = fields.headerRows,
-    headerRows = _fields$headerRows === void 0 ? [] : _fields$headerRows;
-  var serverConfig;
-  if (transport === "stdio") {
-    var argsArray = args.trim().split(/\s+/).filter(Boolean);
-    var env = {};
-    envMappingRows.forEach(function (row) {
-      var envVar = row.envVar.trim();
-      var credField = row.credField.trim();
-      if (envVar && credField) {
-        env[envVar] = "${".concat(credField, "}");
-      }
-    });
-    serverConfig = {
-      type: "stdio",
-      command: command.trim()
-    };
-    if (argsArray.length > 0) serverConfig.args = argsArray;
-    if (Object.keys(env).length > 0) serverConfig.env = env;
-  } else {
-    // streamable_http
-    serverConfig = {
-      type: "streamable_http",
-      url: url.trim()
-    };
-    var headerTemplate = {};
-    headerRows.forEach(function (row) {
-      var hName = row.headerName.trim();
-      var hValue = row.headerValue.trim();
-      if (hName && hValue) {
-        headerTemplate[hName] = hValue;
-      }
+var WidgetCard = function WidgetCard(_ref4) {
+  var _ref4$preview = _ref4.preview,
+    preview = _ref4$preview === void 0 ? false : _ref4$preview,
+    children = _ref4.children,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? "" : _ref4$className;
+  // In preview mode, render children without wrapper
+  if (preview === true) {
+    return /*#__PURE__*/jsxRuntime.jsx(WidgetCardContext.Provider, {
+      value: {
+        preview: preview
+      },
+      children: children
     });
-    if (Object.keys(headerTemplate).length > 0) serverConfig.headerTemplate = headerTemplate;
   }
-  return JSON.stringify(serverConfig, null, 2);
-}
 
-/**
- * Parse an MCP JSON config string back into form state.
- *
- * Accepts multiple input formats:
- * - Bare config: { "command": ..., "args": [...], "env": { "KEY": "${FIELD}" } }
- * - Wrapped: { "mcpServers": { "name": { ... } } } — unwraps and uses key as providerName
- *
- * Transport detection:
- * - Explicit `type` or `transport` field
- * - Inferred: `url` present → streamable_http, `command` present → stdio
- *
- * stdio env value parsing:
- * - "${FIELD_NAME}" → envVar = key, credField = FIELD_NAME (reference syntax)
- * - "literal-value" → envVar = key, credField = key, credentialData[key] = value
- *
- * @param {string} jsonString - The JSON to parse
- * @param {Function} nextRowId - Function that returns a unique row ID
- * @returns {{ providerName, transport, command, args, envMappingRows, url, headerRows, credentialData, error }}
- */
-function mcpJsonToFormState(jsonString, nextRowId) {
-  var parsed;
-  try {
-    parsed = JSON.parse(jsonString);
-  } catch (e) {
-    return {
-      error: "Invalid JSON: ".concat(e.message)
-    };
-  }
-  var providerName = "";
-  var serverConfig;
-  if (parsed.mcpServers && _typeof(parsed.mcpServers) === "object") {
-    var entries = Object.entries(parsed.mcpServers);
-    if (entries.length === 0) {
-      return {
-        error: "No server found in mcpServers"
-      };
-    }
-    var _entries$ = _slicedToArray(entries[0], 2);
-    providerName = _entries$[0];
-    serverConfig = _entries$[1];
-  } else if (parsed.command || parsed.url || parsed.type || parsed.transport) {
-    serverConfig = parsed;
-  } else {
-    return {
-      error: "Unrecognized format: expected a server config with command, url, or type"
-    };
-  }
+  // In edit mode, render with wrapper (no padding - Body handles padding)
+  return /*#__PURE__*/jsxRuntime.jsx(WidgetCardContext.Provider, {
+    value: {
+      preview: preview
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-col w-full h-full min-h-0 overflow-hidden rounded border border-dashed border-gray-700 ".concat(className),
+      children: children
+    })
+  });
+};
 
-  // Determine transport from type/transport field or infer from contents
-  var explicitType = serverConfig.type || serverConfig.transport;
-  var transport;
-  if (explicitType) {
-    transport = explicitType === "stdio" ? "stdio" : "streamable_http";
-  } else {
-    transport = serverConfig.url ? "streamable_http" : "stdio";
-  }
-  var result = {
-    providerName: providerName,
-    transport: transport,
-    command: "",
-    args: "",
-    envMappingRows: [],
-    url: "",
-    headerRows: [],
-    credentialData: {},
-    error: null
+// Attach subcomponents
+WidgetCard.Header = WidgetCardHeader_Component;
+WidgetCard.Body = WidgetCardBody;
+WidgetCard.Footer = WidgetCardFooter;
+
+var ProviderSelector = function ProviderSelector(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    providerType = _ref.providerType,
+    _ref$existingProvider = _ref.existingProviders,
+    existingProviders = _ref$existingProvider === void 0 ? [] : _ref$existingProvider,
+    _ref$credentialSchema = _ref.credentialSchema,
+    credentialSchema = _ref$credentialSchema === void 0 ? {} : _ref$credentialSchema,
+    onSelect = _ref.onSelect,
+    onCreate = _ref.onCreate;
+  var _useState = React.useState("select"),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1]; // "select" or "create"
+
+  /**
+   * Filter providers by type
+   */
+  var filteredProviders = existingProviders.filter(function (p) {
+    return p.type === providerType;
+  });
+
+  /**
+   * Handle provider selection
+   */
+  var handleSelectProvider = function handleSelectProvider(providerName) {
+    onSelect(providerName);
+    setIsOpen(false);
   };
-  if (transport === "stdio") {
-    result.command = serverConfig.command || "";
-    result.args = (serverConfig.args || []).join(" ");
-    if (serverConfig.env && _typeof(serverConfig.env) === "object") {
-      Object.entries(serverConfig.env).forEach(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          envVar = _ref6[0],
-          value = _ref6[1];
-        // Check for ${FIELD_NAME} reference syntax
-        var refMatch = typeof value === "string" && value.match(/^\$\{(.+)\}$/);
-        if (refMatch) {
-          // Reference syntax — credField is the extracted name, no credential value
-          result.envMappingRows.push({
-            id: nextRowId(),
-            envVar: envVar,
-            credField: refMatch[1]
-          });
-        } else {
-          // Literal value — use envVar as credField and store the value
-          result.envMappingRows.push({
-            id: nextRowId(),
-            envVar: envVar,
-            credField: envVar
-          });
-          result.credentialData[envVar] = value || "";
-        }
-      });
-    }
-  } else {
-    result.url = serverConfig.url || "";
-    var headers = serverConfig.headers || serverConfig.headerTemplate || {};
-    if (_typeof(headers) === "object") {
-      Object.entries(headers).forEach(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-          headerName = _ref8[0],
-          headerValue = _ref8[1];
-        result.headerRows.push({
-          id: nextRowId(),
-          headerName: headerName,
-          headerValue: headerValue
-        });
-      });
-    }
-  }
-  return result;
-}
+
+  /**
+   * Handle new provider creation
+   */
+  var handleCreateProvider = function handleCreateProvider(formData) {
+    // formData now contains { name, credentials }
+    var providerName = formData.name,
+      credentials = formData.credentials;
+    onCreate(providerName, credentials);
+    setIsOpen(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    width: "w-11/12 xl:w-5/6",
+    height: "h-5/6",
+    children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Panel, {
+      border: true,
+      padding: false,
+      backgroundColor: "bg-gray-800",
+      borderColor: "border-gray-700",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Header, {
+        border: true,
+        borderColor: "border-gray-700",
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col w-full space-y-4",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row justify-between items-start",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex-1",
+              children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
+                className: "text-2xl font-bold text-gray-100",
+                children: providerType ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                  children: ["Manage ", /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "capitalize",
+                    children: providerType
+                  }), " ", "Providers"]
+                }) : "Select Provider"
+              }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm text-gray-400 mt-1",
+                children: activeTab === "select" ? "Select an existing ".concat(providerType, " provider or create a new one") : "Create a new ".concat(providerType, " provider")
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx("button", {
+              onClick: function onClick() {
+                return setIsOpen(false);
+              },
+              className: "ml-4 text-gray-400 hover:text-gray-200 transition-colors",
+              children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "times",
+                className: "text-xl"
+              })
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: "Select Existing (".concat(filteredProviders.length, ")"),
+              onClick: function onClick() {
+                return setActiveTab("select");
+              },
+              backgroundColor: activeTab === "select" ? "bg-blue-600" : "bg-gray-700",
+              hoverBackgroundColor: activeTab === "select" ? "hover:bg-blue-700" : "hover:bg-gray-600",
+              padding: "px-4 py-2",
+              textSize: "text-sm"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              title: "Create New",
+              onClick: function onClick() {
+                return setActiveTab("create");
+              },
+              backgroundColor: activeTab === "create" ? "bg-blue-600" : "bg-gray-700",
+              hoverBackgroundColor: activeTab === "create" ? "hover:bg-blue-700" : "hover:bg-gray-600",
+              padding: "px-4 py-2",
+              textSize: "text-sm"
+            })]
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-full overflow-y-auto",
+          children: activeTab === "select" ?
+          /*#__PURE__*/
+          // Select Tab
+          jsxRuntime.jsx("div", {
+            className: "p-6",
+            children: filteredProviders.length > 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "space-y-3",
+              children: filteredProviders.map(function (provider) {
+                return /*#__PURE__*/jsxRuntime.jsxs("button", {
+                  onClick: function onClick() {
+                    return handleSelectProvider(provider.name);
+                  },
+                  className: "w-full text-left p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "font-semibold",
+                    children: provider.name
+                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "text-sm opacity-70 mt-1",
+                    children: ["Type:", " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "capitalize",
+                      children: provider.type
+                    })]
+                  }), provider.credentials && Object.keys(provider.credentials).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "text-xs opacity-50 mt-2",
+                    children: ["Fields:", " ", Object.keys(provider.credentials).join(", ")]
+                  })]
+                }, provider.name);
+              })
+            }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "text-center py-12",
+              children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.SubHeading3, {
+                className: "opacity-50",
+                children: ["No ", providerType, " providers found"]
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+                className: "mt-2 opacity-70",
+                children: "Create one using the \"Create New\" tab"
+              })]
+            })
+          }) :
+          /*#__PURE__*/
+          // Create Tab
+          jsxRuntime.jsx(ProviderForm, {
+            credentialSchema: credentialSchema,
+            onSubmit: handleCreateProvider,
+            onCancel: function onCancel() {
+              return setIsOpen(false);
+            },
+            submitLabel: "Create Provider",
+            providerType: providerType
+          })
+        })
+      })]
+    })
+  });
+};
 
 function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25973,82 +26498,6 @@ var FoldersSection = function FoldersSection(_ref) {
   });
 };
 
-var ToolSelector = function ToolSelector(_ref) {
-  var _ref$tools = _ref.tools,
-    tools = _ref$tools === void 0 ? [] : _ref$tools,
-    _ref$selectedTools = _ref.selectedTools,
-    selectedTools = _ref$selectedTools === void 0 ? [] : _ref$selectedTools,
-    onSelectionChange = _ref.onSelectionChange;
-  if (!tools || tools.length === 0) return null;
-  var allSelected = selectedTools.length === tools.length;
-  var handleToggleAll = function handleToggleAll() {
-    if (allSelected) {
-      onSelectionChange([]);
-    } else {
-      onSelectionChange(tools.map(function (t) {
-        return t.name;
-      }));
-    }
-  };
-  var handleToggle = function handleToggle(toolName) {
-    if (selectedTools.includes(toolName)) {
-      onSelectionChange(selectedTools.filter(function (t) {
-        return t !== toolName;
-      }));
-    } else {
-      onSelectionChange([].concat(_toConsumableArray(selectedTools), [toolName]));
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "space-y-2 flex-1 flex flex-col min-h-0",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-between",
-      children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-        children: "Allowed Tools"
-      }), /*#__PURE__*/jsxRuntime.jsx("button", {
-        onClick: handleToggleAll,
-        className: "text-xs text-blue-400 hover:text-blue-300 transition-colors",
-        children: allSelected ? "Deselect All" : "Select All"
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "text-sm opacity-50",
-      children: "Choose which tools this provider can expose to widgets"
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "space-y-1 flex-1 min-h-0 overflow-y-auto",
-      children: tools.map(function (tool) {
-        var checked = selectedTools.includes(tool.name);
-        return /*#__PURE__*/jsxRuntime.jsxs("label", {
-          className: "flex items-start gap-2 p-1.5 rounded hover:bg-white/5 cursor-pointer",
-          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-            type: "checkbox",
-            checked: checked,
-            onChange: function onChange() {
-              return handleToggle(tool.name);
-            },
-            className: "mt-0.5 rounded border-white/20 bg-white/5 text-blue-500 focus:ring-blue-500/30"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex-1 min-w-0",
-            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs font-mono",
-              children: tool.name
-            }), tool.description && /*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-xs opacity-50 ml-2",
-              children: ["\u2014 ", tool.description]
-            })]
-          })]
-        }, tool.name);
-      })
-    }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-      className: "text-xs opacity-40",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-        icon: "shield-halved",
-        className: "mr-1"
-      }), selectedTools.length, " of ", tools.length, " tools selected"]
-    })]
-  });
-};
-
 function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ProviderDetail = function ProviderDetail(_ref) {
@@ -26077,7 +26526,9 @@ var ProviderDetail = function ProviderDetail(_ref) {
     onDelete = _ref.onDelete,
     onSaveAllowedTools = _ref.onSaveAllowedTools,
     _ref$catalogAuthComma = _ref.catalogAuthCommand,
-    catalogAuthCommand = _ref$catalogAuthComma === void 0 ? null : _ref$catalogAuthComma;
+    catalogAuthCommand = _ref$catalogAuthComma === void 0 ? null : _ref$catalogAuthComma,
+    _ref$catalogCredentia = _ref.catalogCredentialSchema,
+    catalogCredentialSchema = _ref$catalogCredentia === void 0 ? {} : _ref$catalogCredentia;
   var appContext = React.useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
   var isMcp = (provider === null || provider === void 0 ? void 0 : provider.providerClass) === "mcp";
@@ -26112,8 +26563,8 @@ var ProviderDetail = function ProviderDetail(_ref) {
   // Derive credential fields for MCP providers in edit mode
   var mcpFormFields = React.useMemo(function () {
     if (!isMcp || !(provider !== null && provider !== void 0 && provider.mcpConfig)) return [];
-    return deriveFormFields(provider.mcpConfig, {});
-  }, [isMcp, provider]);
+    return deriveFormFields(provider.mcpConfig, catalogCredentialSchema);
+  }, [isMcp, provider, catalogCredentialSchema]);
 
   // Credential field keys for non-MCP providers
   var credentialKeys = React.useMemo(function () {
@@ -28739,7 +29190,8 @@ var ProvidersSection = function ProvidersSection(_ref) {
         return setDeleteTarget(name);
       },
       onSaveAllowedTools: handleSaveAllowedTools,
-      catalogAuthCommand: (catalogEntry === null || catalogEntry === void 0 ? void 0 : catalogEntry.authCommand) || null
+      catalogAuthCommand: (catalogEntry === null || catalogEntry === void 0 ? void 0 : catalogEntry.authCommand) || null,
+      catalogCredentialSchema: (catalogEntry === null || catalogEntry === void 0 ? void 0 : catalogEntry.credentialSchema) || {}
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {