@trops/dash-core 0.1.52 → 0.1.54

package/dist/index.js

@@ -9545,6 +9545,193 @@ function headerTemplateToRows(headerTemplate, nextRowId) {
   });
 }
 
+/**
+ * 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);
+}
+
+/**
+ * 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"
+    };
+  }
+
+  // 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 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; }
 var AdvancedMcpConfig = function AdvancedMcpConfig(_ref) {
@@ -26234,29 +26421,57 @@ function buildMcpConfig(transport, _ref) {
  *
  * Form for configuring a custom MCP server (not from the catalog).
  * Supports stdio and streamable_http transports with dynamic field derivation.
+ * Used for both creating new and editing existing MCP providers.
  *
  * @param {Function} onSave - (providerName, providerType, credentials, mcpConfig) => void
- * @param {Function} onBack - Called when the user wants to return to the catalog
+ * @param {Function} onBack - Called when the user wants to return
+ * @param {boolean} isEditMode - Whether we're editing an existing provider
+ * @param {string} initialName - Pre-populated provider name (edit mode)
+ * @param {string} initialTransport - Pre-populated transport type (edit mode)
+ * @param {string} initialCommand - Pre-populated command (edit mode)
+ * @param {string} initialArgs - Pre-populated args string (edit mode)
+ * @param {Array} initialEnvMappingRows - Pre-populated env mapping rows (edit mode)
+ * @param {string} initialUrl - Pre-populated URL (edit mode)
+ * @param {Array} initialHeaderRows - Pre-populated header rows (edit mode)
+ * @param {object} initialCredentials - Pre-populated credential values (edit mode)
  */
 var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
   var _testResult$tools;
   var onSave = _ref2.onSave,
-    onBack = _ref2.onBack;
+    onBack = _ref2.onBack,
+    _ref2$isEditMode = _ref2.isEditMode,
+    isEditMode = _ref2$isEditMode === void 0 ? false : _ref2$isEditMode,
+    _ref2$initialName = _ref2.initialName,
+    initialName = _ref2$initialName === void 0 ? "" : _ref2$initialName,
+    _ref2$initialTranspor = _ref2.initialTransport,
+    initialTransport = _ref2$initialTranspor === void 0 ? "stdio" : _ref2$initialTranspor,
+    _ref2$initialCommand = _ref2.initialCommand,
+    initialCommand = _ref2$initialCommand === void 0 ? "" : _ref2$initialCommand,
+    _ref2$initialArgs = _ref2.initialArgs,
+    initialArgs = _ref2$initialArgs === void 0 ? "" : _ref2$initialArgs,
+    _ref2$initialEnvMappi = _ref2.initialEnvMappingRows,
+    initialEnvMappingRows = _ref2$initialEnvMappi === void 0 ? [] : _ref2$initialEnvMappi,
+    _ref2$initialUrl = _ref2.initialUrl,
+    initialUrl = _ref2$initialUrl === void 0 ? "" : _ref2$initialUrl,
+    _ref2$initialHeaderRo = _ref2.initialHeaderRows,
+    initialHeaderRows = _ref2$initialHeaderRo === void 0 ? [] : _ref2$initialHeaderRo,
+    _ref2$initialCredenti = _ref2.initialCredentials,
+    initialCredentials = _ref2$initialCredenti === void 0 ? {} : _ref2$initialCredenti;
   var appContext = React.useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
 
   // Transport selection
-  var _useState = React.useState("stdio"),
+  var _useState = React.useState(initialTransport),
     _useState2 = _slicedToArray(_useState, 2),
     transport = _useState2[0],
     setTransport = _useState2[1];
 
   // Common
-  var _useState3 = React.useState(""),
+  var _useState3 = React.useState(initialName),
     _useState4 = _slicedToArray(_useState3, 2),
     providerName = _useState4[0],
     setProviderName = _useState4[1];
-  var _useState5 = React.useState({}),
+  var _useState5 = React.useState(initialCredentials),
     _useState6 = _slicedToArray(_useState5, 2),
     credentialData = _useState6[0],
     setCredentialData = _useState6[1];
@@ -26274,34 +26489,51 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     setTestResult = _useState10[1];
 
   // stdio fields
-  var _useState11 = React.useState(""),
+  var _useState11 = React.useState(initialCommand),
     _useState12 = _slicedToArray(_useState11, 2),
     command = _useState12[0],
     setCommand = _useState12[1];
-  var _useState13 = React.useState(""),
+  var _useState13 = React.useState(initialArgs),
     _useState14 = _slicedToArray(_useState13, 2),
     args = _useState14[0],
     setArgs = _useState14[1];
-  var _useState15 = React.useState([]),
+  var _useState15 = React.useState(initialEnvMappingRows),
     _useState16 = _slicedToArray(_useState15, 2),
     envMappingRows = _useState16[0],
     setEnvMappingRows = _useState16[1];
 
   // HTTP fields
-  var _useState17 = React.useState(""),
+  var _useState17 = React.useState(initialUrl),
     _useState18 = _slicedToArray(_useState17, 2),
     url = _useState18[0],
     setUrl = _useState18[1];
-  var _useState19 = React.useState([]),
+  var _useState19 = React.useState(initialHeaderRows),
     _useState20 = _slicedToArray(_useState19, 2),
     headerRows = _useState20[0],
     setHeaderRows = _useState20[1];
 
+  // JSON editor state
+  var _useState21 = React.useState("form"),
+    _useState22 = _slicedToArray(_useState21, 2),
+    viewMode = _useState22[0],
+    setViewMode = _useState22[1]; // "form" | "json"
+  var _useState23 = React.useState(""),
+    _useState24 = _slicedToArray(_useState23, 2),
+    jsonText = _useState24[0],
+    setJsonText = _useState24[1];
+  var _useState25 = React.useState(null),
+    _useState26 = _slicedToArray(_useState25, 2),
+    jsonError = _useState26[0],
+    setJsonError = _useState26[1];
+
   // Clear credential data when transport changes (derived fields change entirely)
+  // Only in create mode — in edit mode the initial transport is set correctly
   React.useEffect(function () {
-    setCredentialData({});
-    setTestResult(null);
-  }, [transport]);
+    if (!isEditMode) {
+      setCredentialData({});
+      setTestResult(null);
+    }
+  }, [transport, isEditMode]);
 
   // Build mcpConfig from current state
   var mcpConfig = React.useMemo(function () {
@@ -26383,6 +26615,38 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     }
   };
 
+  // --- JSON toggle handlers ---
+  var handleSwitchToJson = function handleSwitchToJson() {
+    var json = formStateToMcpJson(providerName, transport, {
+      command: command,
+      args: args,
+      envMappingRows: envMappingRows,
+      url: url,
+      headerRows: headerRows,
+      credentialData: credentialData
+    });
+    setJsonText(json);
+    setJsonError(null);
+    setViewMode("json");
+  };
+  var handleSwitchToForm = function handleSwitchToForm() {
+    var result = mcpJsonToFormState(jsonText, nextRowId);
+    if (result.error) {
+      setJsonError(result.error);
+      return;
+    }
+    setProviderName(result.providerName || providerName);
+    setTransport(result.transport);
+    setCommand(result.command);
+    setArgs(result.args);
+    setEnvMappingRows(result.envMappingRows);
+    setUrl(result.url);
+    setHeaderRows(result.headerRows);
+    setCredentialData(result.credentialData);
+    setJsonError(null);
+    setViewMode("form");
+  };
+
   // --- validation ---
   var validateForm = function validateForm() {
     var errors = {};
@@ -26442,6 +26706,28 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
 
   // --- save ---
   var handleSave = function handleSave() {
+    // If in JSON mode, parse JSON first to update form state
+    if (viewMode === "json") {
+      var result = mcpJsonToFormState(jsonText, nextRowId);
+      if (result.error) {
+        setJsonError(result.error);
+        return;
+      }
+      var name = (result.providerName || providerName || "").trim();
+      if (!name) {
+        setJsonError("Provider name is required");
+        return;
+      }
+      var config = buildMcpConfig(result.transport, {
+        command: result.command,
+        args: result.args,
+        envMappingRows: result.envMappingRows,
+        url: result.url,
+        headerRows: result.headerRows
+      });
+      onSave(name, "custom", result.credentialData, config);
+      return;
+    }
     if (!validateForm()) return;
     onSave(providerName.trim(), "custom", credentialData, mcpConfig);
   };
@@ -26460,58 +26746,11 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
           })
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: "Configure Custom MCP Server",
+            title: isEditMode ? "Edit MCP Server" : "Configure Custom MCP Server",
             padding: false
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "text-sm opacity-50 mt-1",
-            children: "Define a custom MCP server connection"
-          })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-          children: "Transport Type"
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "grid grid-cols-2 gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
-            hover: true,
-            selected: transport === "stdio",
-            onClick: function onClick() {
-              return setTransport("stdio");
-            },
-            className: "text-left",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2 mb-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
-                icon: "terminal"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "font-semibold text-sm",
-                children: "Local Process (stdio)"
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs opacity-50",
-              children: "Spawn a local command as a child process"
-            })]
-          }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
-            hover: true,
-            selected: transport === "streamable_http",
-            onClick: function onClick() {
-              return setTransport("streamable_http");
-            },
-            className: "text-left",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2 mb-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
-                icon: "globe"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "font-semibold text-sm",
-                children: "Remote Server (HTTP)"
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-xs opacity-50",
-              children: "Connect to a remote MCP server via HTTP"
-            })]
+            children: isEditMode ? "Modify this MCP server configuration" : "Define a custom MCP server connection"
           })]
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -26539,231 +26778,315 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
           className: "text-sm text-red-400",
           children: formErrors.providerName
         })]
-      }), transport === "stdio" && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-4",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "border-t border-white/10 pt-4",
-          children: /*#__PURE__*/jsxRuntime.jsx("p", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            if (viewMode === "json") handleSwitchToForm();
+          },
+          className: "px-3 py-1 text-xs font-medium rounded-l transition-colors ".concat(viewMode === "form" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
+          children: "Form"
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          onClick: function onClick() {
+            if (viewMode === "form") handleSwitchToJson();
+          },
+          className: "px-3 py-1 text-xs font-medium rounded-r transition-colors ".concat(viewMode === "json" ? "bg-white/10 text-white" : "text-white/50 hover:text-white/70"),
+          children: "JSON"
+        })]
+      }), jsonError && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-sm text-red-400",
+        children: jsonError
+      }), viewMode === "json" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+          children: "MCP Server Configuration (JSON)"
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-sm opacity-50",
+          children: "Paste a standard MCP config JSON (compatible with Claude Desktop, Cursor, etc.)"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.CodeEditorInline, {
+          code: jsonText,
+          setCode: function setCode(val) {
+            setJsonText(val);
+            setJsonError(null);
+          },
+          language: "json",
+          placeholder: '{\n  "type": "stdio",\n  "command": "npx",\n  "args": ["-y", "package-name"],\n  "env": {\n    "API_KEY": "${API_KEY}"\n  }\n}'
+        })]
+      }), viewMode === "form" && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
             className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "Process Configuration"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-            label: "Command",
-            required: true
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm opacity-50",
-            children: "The executable to run (e.g., npx, node, python)"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            value: command,
-            onChange: function onChange(value) {
-              setCommand(value);
-              if (formErrors.command && value !== null && value !== void 0 && value.trim()) {
-                setFormErrors(function (prev) {
-                  var next = _objectSpread$5({}, prev);
-                  delete next.command;
-                  return next;
-                });
-              }
-            },
-            placeholder: "e.g., npx"
-          }), formErrors.command && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm text-red-400",
-            children: formErrors.command
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-            label: "Arguments"
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm opacity-50",
-            children: "Space-separated arguments passed to the command"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            value: args,
-            onChange: setArgs,
-            placeholder: "e.g., -y @modelcontextprotocol/server-github"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex items-center justify-between",
-            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-                label: "Environment Variable Mapping"
+            children: "Transport Type"
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "grid grid-cols-2 gap-3",
+            children: [/*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
+              hover: true,
+              selected: transport === "stdio",
+              onClick: function onClick() {
+                return setTransport("stdio");
+              },
+              className: "text-left",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2 mb-1",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
+                  icon: "terminal"
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "font-semibold text-sm",
+                  children: "Local Process (stdio)"
+                })]
               }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                className: "text-sm opacity-50 mt-1",
-                children: "Map environment variables to credential fields"
+                className: "text-xs opacity-50",
+                children: "Spawn a local command as a child process"
               })]
+            }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
+              hover: true,
+              selected: transport === "streamable_http",
+              onClick: function onClick() {
+                return setTransport("streamable_http");
+              },
+              className: "text-left",
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2 mb-1",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Icon2, {
+                  icon: "globe"
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "font-semibold text-sm",
+                  children: "Remote Server (HTTP)"
+                })]
+              }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-xs opacity-50",
+                children: "Connect to a remote MCP server via HTTP"
+              })]
+            })]
+          })]
+        }), transport === "stdio" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "border-t border-white/10 pt-4",
+            children: /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+              children: "Process Configuration"
             })
-          }), envMappingRows.map(function (row) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex-1",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                  value: row.envVar,
-                  onChange: function onChange(value) {
-                    return updateEnvRow(row.id, "envVar", value);
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+              label: "Command",
+              required: true
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm opacity-50",
+              children: "The executable to run (e.g., npx, node, python)"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+              value: command,
+              onChange: function onChange(value) {
+                setCommand(value);
+                if (formErrors.command && value !== null && value !== void 0 && value.trim()) {
+                  setFormErrors(function (prev) {
+                    var next = _objectSpread$5({}, prev);
+                    delete next.command;
+                    return next;
+                  });
+                }
+              },
+              placeholder: "e.g., npx"
+            }), formErrors.command && /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm text-red-400",
+              children: formErrors.command
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+              label: "Arguments"
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm opacity-50",
+              children: "Space-separated arguments passed to the command"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+              value: args,
+              onChange: setArgs,
+              placeholder: "e.g., -y @modelcontextprotocol/server-github"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "space-y-3",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex items-center justify-between",
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                  label: "Environment Variable Mapping"
+                }), /*#__PURE__*/jsxRuntime.jsx("p", {
+                  className: "text-sm opacity-50 mt-1",
+                  children: "Map environment variables to credential fields"
+                })]
+              })
+            }), envMappingRows.map(function (row) {
+              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: row.envVar,
+                    onChange: function onChange(value) {
+                      return updateEnvRow(row.id, "envVar", value);
+                    },
+                    placeholder: "ENV_VAR_NAME"
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "opacity-30 text-sm shrink-0",
+                  children: "\u2192"
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: row.credField,
+                    onChange: function onChange(value) {
+                      return updateEnvRow(row.id, "credField", value);
+                    },
+                    placeholder: "credentialField"
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                  onClick: function onClick() {
+                    return removeEnvRow(row.id);
                   },
-                  placeholder: "ENV_VAR_NAME"
-                })
+                  className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: "times",
+                    className: "text-sm"
+                  })
+                })]
+              }, row.id);
+            }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+              onClick: addEnvRow,
+              className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "plus",
+                className: "text-xs"
               }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-30 text-sm shrink-0",
-                children: "\u2192"
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex-1",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                  value: row.credField,
-                  onChange: function onChange(value) {
-                    return updateEnvRow(row.id, "credField", value);
-                  },
-                  placeholder: "credentialField"
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx("button", {
-                onClick: function onClick() {
-                  return removeEnvRow(row.id);
-                },
-                className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                  icon: "times",
-                  className: "text-sm"
-                })
+                children: "Add Environment Variable"
               })]
-            }, row.id);
-          }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-            onClick: addEnvRow,
-            className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: "plus",
-              className: "text-xs"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: "Add Environment Variable"
             })]
           })]
-        })]
-      }), transport === "streamable_http" && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "space-y-4",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "border-t border-white/10 pt-4",
-          children: /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "Server Configuration"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-            label: "Server URL",
-            required: true
-          }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-            className: "text-sm opacity-50",
-            children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
-              className: "text-xs bg-white/10 px-1 py-0.5 rounded",
-              children: "{{fieldName}}"
-            }), " ", "for values provided as credentials"]
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            value: url,
-            onChange: function onChange(value) {
-              setUrl(value);
-              if (formErrors.url && value !== null && value !== void 0 && value.trim()) {
-                setFormErrors(function (prev) {
-                  var next = _objectSpread$5({}, prev);
-                  delete next.url;
-                  return next;
-                });
-              }
-            },
-            placeholder: "e.g., https://mcp.example.com/sse"
-          }), formErrors.url && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm text-red-400",
-            children: formErrors.url
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "space-y-3",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), transport === "streamable_http" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "border-t border-white/10 pt-4",
+            children: /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+              children: "Server Configuration"
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-              label: "Request Headers"
+              label: "Server URL",
+              required: true
             }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-              className: "text-sm opacity-50 mt-1",
+              className: "text-sm opacity-50",
               children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
                 className: "text-xs bg-white/10 px-1 py-0.5 rounded",
                 children: "{{fieldName}}"
-              }), " ", "in values for credential placeholders"]
+              }), " ", "for values provided as credentials"]
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+              value: url,
+              onChange: function onChange(value) {
+                setUrl(value);
+                if (formErrors.url && value !== null && value !== void 0 && value.trim()) {
+                  setFormErrors(function (prev) {
+                    var next = _objectSpread$5({}, prev);
+                    delete next.url;
+                    return next;
+                  });
+                }
+              },
+              placeholder: "e.g., https://mcp.example.com/sse"
+            }), formErrors.url && /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm text-red-400",
+              children: formErrors.url
             })]
-          }), headerRows.map(function (row) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex-1",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                  value: row.headerName,
-                  onChange: function onChange(value) {
-                    return updateHeaderRow(row.id, "headerName", value);
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "space-y-3",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                label: "Request Headers"
+              }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+                className: "text-sm opacity-50 mt-1",
+                children: ["Use", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+                  className: "text-xs bg-white/10 px-1 py-0.5 rounded",
+                  children: "{{fieldName}}"
+                }), " ", "in values for credential placeholders"]
+              })]
+            }), headerRows.map(function (row) {
+              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: row.headerName,
+                    onChange: function onChange(value) {
+                      return updateHeaderRow(row.id, "headerName", value);
+                    },
+                    placeholder: "Header-Name"
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "opacity-30 text-sm shrink-0",
+                  children: ":"
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex-1",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                    value: row.headerValue,
+                    onChange: function onChange(value) {
+                      return updateHeaderRow(row.id, "headerValue", value);
+                    },
+                    placeholder: "Bearer {{apiKey}}"
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                  onClick: function onClick() {
+                    return removeHeaderRow(row.id);
                   },
-                  placeholder: "Header-Name"
-                })
+                  className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
+                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                    icon: "times",
+                    className: "text-sm"
+                  })
+                })]
+              }, row.id);
+            }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+              onClick: addHeaderRow,
+              className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "plus",
+                className: "text-xs"
               }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "opacity-30 text-sm shrink-0",
-                children: ":"
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex-1",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                  value: row.headerValue,
-                  onChange: function onChange(value) {
-                    return updateHeaderRow(row.id, "headerValue", value);
-                  },
-                  placeholder: "Bearer {{apiKey}}"
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx("button", {
-                onClick: function onClick() {
-                  return removeHeaderRow(row.id);
-                },
-                className: "text-gray-500 hover:text-red-400 transition-colors shrink-0",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                  icon: "times",
-                  className: "text-sm"
-                })
+                children: "Add Header"
               })]
-            }, row.id);
-          }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-            onClick: addHeaderRow,
-            className: "text-sm text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-              icon: "plus",
-              className: "text-xs"
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: "Add Header"
             })]
           })]
-        })]
-      }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "border-t border-white/10 pt-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: "Credentials"
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-sm opacity-50 mt-1",
-            children: "Values for the fields referenced in your configuration above"
-          })]
-        }), formFields.map(function (field) {
-          return /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
-              label: field.displayName,
-              required: field.required
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-              type: field.secret ? "password" : "text",
-              value: credentialData[field.key] || "",
-              onChange: function onChange(value) {
-                return handleCredentialChange(field.key, value);
-              },
-              placeholder: "Enter ".concat(field.displayName.toLowerCase())
-            }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
-              className: "text-sm text-red-400",
-              children: formErrors[field.key]
+        }), formFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "border-t border-white/10 pt-4",
+            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+              children: "Credentials"
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-sm opacity-50 mt-1",
+              children: "Values for the fields referenced in your configuration above"
             })]
-          }, field.key);
+          }), formFields.map(function (field) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex flex-col gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FormLabel, {
+                label: field.displayName,
+                required: field.required
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+                type: field.secret ? "password" : "text",
+                value: credentialData[field.key] || "",
+                onChange: function onChange(value) {
+                  return handleCredentialChange(field.key, value);
+                },
+                placeholder: "Enter ".concat(field.displayName.toLowerCase())
+              }), formErrors[field.key] && /*#__PURE__*/jsxRuntime.jsx("p", {
+                className: "text-sm text-red-400",
+                children: formErrors[field.key]
+              })]
+            }, field.key);
+          })]
         })]
       }), testResult && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
@@ -26801,7 +27124,7 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
         onClick: handleTestConnection,
         size: "sm"
       }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Save MCP Server",
+        title: isEditMode ? "Save Changes" : "Save MCP Server",
         onClick: handleSave,
         size: "sm"
       })]
@@ -27369,6 +27692,16 @@ var ProvidersSection = function ProvidersSection(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     isAddingMcp = _useState14[0],
     setIsAddingMcp = _useState14[1];
+  var _useState15 = React.useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isEditingMcp = _useState16[0],
+    setIsEditingMcp = _useState16[1];
+
+  // Row ID counter for env/header rows in MCP edit mode
+  var nextRowIdRef = React.useRef(0);
+  var nextRowId = function nextRowId() {
+    return "prov_row_".concat(++nextRowIdRef.current);
+  };
   var providerEntries = Object.entries(providers);
   var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
 
@@ -27389,6 +27722,7 @@ var ProvidersSection = function ProvidersSection(_ref) {
     setFormCredentials({});
     setIsCreating(false);
     setIsEditing(false);
+    setIsEditingMcp(false);
   }
   function handleSave() {
     if (!formName.trim() || !dashApi || !appId) return;
@@ -27411,11 +27745,17 @@ var ProvidersSection = function ProvidersSection(_ref) {
   }
   function handleStartEdit(name, provider) {
     setSelectedName(name);
-    setFormName(name);
-    setFormType(provider.type || "");
-    setFormCredentials(provider.credentials || {});
-    setIsEditing(true);
     setIsCreating(false);
+    if (provider.providerClass === "mcp") {
+      setIsEditingMcp(true);
+      setIsEditing(false);
+    } else {
+      setFormName(name);
+      setFormType(provider.type || "");
+      setFormCredentials(provider.credentials || {});
+      setIsEditing(true);
+      setIsEditingMcp(false);
+    }
   }
   function handleSaveEdit() {
     if (!formName.trim() || !dashApi || !appId) return;
@@ -27475,6 +27815,30 @@ var ProvidersSection = function ProvidersSection(_ref) {
     });
   }
 
+  // Handle MCP provider editing via CustomMcpServerForm
+  function handleMcpEditSave(providerName, providerType, mcpCredentials, mcpConfig) {
+    if (!dashApi || !appId) return;
+    var originalName = selectedName;
+
+    // Delete old if name changed
+    if (originalName && originalName !== providerName) {
+      dashApi.deleteProvider(appId, originalName, function () {}, function () {});
+    }
+    dashApi.saveProvider(appId, providerName, {
+      providerType: providerType,
+      credentials: mcpCredentials,
+      providerClass: "mcp",
+      mcpConfig: mcpConfig
+    }, function () {
+      setSelectedName(providerName);
+      setIsEditingMcp(false);
+      resetForm();
+      refreshProviders && refreshProviders();
+    }, function (e, err) {
+      return (void 0);
+    });
+  }
+
   // Respond to external create trigger from header
   var prevCreateRequested = React.useRef(false);
   React.useEffect(function () {
@@ -27593,6 +27957,23 @@ var ProvidersSection = function ProvidersSection(_ref) {
         setIsCreating(false);
       }
     });
+  } else if (isEditingMcp && selectedName && selectedProvider) {
+    var mc = selectedProvider.mcpConfig || {};
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(CustomMcpServerForm, {
+      isEditMode: true,
+      initialName: selectedName,
+      initialTransport: mc.transport || "stdio",
+      initialCommand: mc.command || "",
+      initialArgs: (mc.args || []).join(" "),
+      initialEnvMappingRows: envMappingToRows(mc.envMapping, nextRowId),
+      initialUrl: mc.url || "",
+      initialHeaderRows: headerTemplateToRows(mc.headerTemplate, nextRowId),
+      initialCredentials: selectedProvider.credentials || {},
+      onSave: handleMcpEditSave,
+      onBack: function onBack() {
+        return setIsEditingMcp(false);
+      }
+    });
   } else if (selectedName && selectedProvider) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(ProviderDetail, {
       providerName: selectedName,
@@ -33594,6 +33975,7 @@ exports.deriveFormFields = deriveFormFields;
 exports.envMappingToRows = envMappingToRows;
 exports.evaluateBundle = evaluateBundle;
 exports.extractWidgetConfigs = extractWidgetConfigs;
+exports.formStateToMcpJson = formStateToMcpJson;
 exports.formatFieldName = formatFieldName;
 exports.generateCustomTheme = generateCustomTheme;
 exports.generateHarmonyTheme = generateHarmonyTheme;
@@ -33629,6 +34011,7 @@ exports.isWidgetResolvable = isWidgetResolvable;
 exports.isWorkspace = isWorkspace;
 exports.layoutItemHasWorkspaceAsChild = layoutItemHasWorkspaceAsChild;
 exports.loadWidgetBundle = loadWidgetBundle;
+exports.mcpJsonToFormState = mcpJsonToFormState;
 exports.numChildrenForLayout = numChildrenForLayout;
 exports.removeItemFromLayout = removeItemFromLayout;
 exports.renderComponent = renderComponent;