@trops/dash-core 0.1.53 → 0.1.55

package/dist/index.esm.js

@@ -9527,18 +9527,29 @@ function headerTemplateToRows(headerTemplate, nextRowId) {
 }
 
 /**
- * Serialize the current form state into a standard MCP JSON config string.
+ * Serialize the current form state into a bare MCP JSON config string.
  *
- * Output format:
+ * Output format (stdio):
  * {
- *   "mcpServers": {
- *     "<name>": { "command": ..., "args": [...], "env": {...} }
- *   }
+ *   "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}}" }
  * }
  *
- * @param {string} name - The provider name
+ * 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, credentialData }
+ * @param {object} fields - { command, args, envMappingRows, url, headerRows }
  * @returns {string} Formatted JSON string
  */
 function formStateToMcpJson(name, transport, fields) {
@@ -9551,9 +9562,7 @@ function formStateToMcpJson(name, transport, fields) {
     _fields$url = fields.url,
     url = _fields$url === void 0 ? "" : _fields$url,
     _fields$headerRows = fields.headerRows,
-    headerRows = _fields$headerRows === void 0 ? [] : _fields$headerRows,
-    _fields$credentialDat = fields.credentialData,
-    credentialData = _fields$credentialDat === void 0 ? {} : _fields$credentialDat;
+    headerRows = _fields$headerRows === void 0 ? [] : _fields$headerRows;
   var serverConfig;
   if (transport === "stdio") {
     var argsArray = args.trim().split(/\s+/).filter(Boolean);
@@ -9561,11 +9570,12 @@ function formStateToMcpJson(name, transport, fields) {
     envMappingRows.forEach(function (row) {
       var envVar = row.envVar.trim();
       var credField = row.credField.trim();
-      if (envVar) {
-        env[envVar] = credentialData[credField] || "";
+      if (envVar && credField) {
+        env[envVar] = "${".concat(credField, "}");
       }
     });
     serverConfig = {
+      type: "stdio",
       command: command.trim()
     };
     if (argsArray.length > 0) serverConfig.args = argsArray;
@@ -9573,29 +9583,36 @@ function formStateToMcpJson(name, transport, fields) {
   } else {
     // streamable_http
     serverConfig = {
+      type: "streamable_http",
       url: url.trim()
     };
-    var headers = {};
+    var headerTemplate = {};
     headerRows.forEach(function (row) {
       var hName = row.headerName.trim();
       var hValue = row.headerValue.trim();
       if (hName && hValue) {
-        headers[hName] = hValue;
+        headerTemplate[hName] = hValue;
       }
     });
-    if (Object.keys(headers).length > 0) serverConfig.headers = headers;
+    if (Object.keys(headerTemplate).length > 0) serverConfig.headerTemplate = headerTemplate;
   }
-  return JSON.stringify({
-    mcpServers: _defineProperty({}, name || "server-name", serverConfig)
-  }, null, 2);
+  return JSON.stringify(serverConfig, null, 2);
 }
 
 /**
- * Parse a standard MCP JSON config string back into form state.
+ * Parse an MCP JSON config string back into form state.
  *
- * Accepts:
- * - { "mcpServers": { "name": { ... } } }
- * - Bare server config: { "command": ..., "args": [...] }
+ * 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
@@ -9622,15 +9639,22 @@ function mcpJsonToFormState(jsonString, nextRowId) {
     var _entries$ = _slicedToArray(entries[0], 2);
     providerName = _entries$[0];
     serverConfig = _entries$[1];
-  } else if (parsed.command || parsed.url) {
+  } else if (parsed.command || parsed.url || parsed.type || parsed.transport) {
     serverConfig = parsed;
   } else {
     return {
-      error: "Unrecognized format: expected mcpServers object or bare server config"
+      error: "Unrecognized format: expected a server config with command, url, or type"
     };
   }
-  var isHttp = !!serverConfig.url;
-  var transport = isHttp ? "streamable_http" : "stdio";
+
+  // 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,
@@ -9650,12 +9674,24 @@ function mcpJsonToFormState(jsonString, nextRowId) {
         var _ref6 = _slicedToArray(_ref5, 2),
           envVar = _ref6[0],
           value = _ref6[1];
-        result.envMappingRows.push({
-          id: nextRowId(),
-          envVar: envVar,
-          credField: envVar
-        });
-        result.credentialData[envVar] = value || "";
+        // 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 {
@@ -26756,7 +26792,7 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
             setJsonError(null);
           },
           language: "json",
-          placeholder: '{\n  "mcpServers": {\n    "server-name": {\n      "command": "npx",\n      "args": ["-y", "package-name"],\n      "env": {\n        "API_KEY": "your-key"\n      }\n    }\n  }\n}'
+          placeholder: '{\n  "type": "stdio",\n  "command": "npx",\n  "args": ["-y", "package-name"],\n  "env": {\n    "API_KEY": "${API_KEY}"\n  }\n}'
         })]
       }), viewMode === "form" && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsxs("div", {
@@ -27605,42 +27641,46 @@ var ProvidersSection = function ProvidersSection(_ref) {
   var appContext = useContext(AppContext);
   var providers = (appContext === null || appContext === void 0 ? void 0 : appContext.providers) || {};
   var refreshProviders = appContext === null || appContext === void 0 ? void 0 : appContext.refreshProviders;
-  var _useState = useState(null),
+  var _useState = useState("credentials"),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedName = _useState2[0],
-    setSelectedName = _useState2[1];
-  var _useState3 = useState(false),
+    providerTab = _useState2[0],
+    setProviderTab = _useState2[1];
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    isCreating = _useState4[0],
-    setIsCreating = _useState4[1];
+    selectedName = _useState4[0],
+    setSelectedName = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isEditing = _useState6[0],
-    setIsEditing = _useState6[1];
-  var _useState7 = useState(""),
+    isCreating = _useState6[0],
+    setIsCreating = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    formName = _useState8[0],
-    setFormName = _useState8[1];
+    isEditing = _useState8[0],
+    setIsEditing = _useState8[1];
   var _useState9 = useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
-    formType = _useState0[0],
-    setFormType = _useState0[1];
-  var _useState1 = useState({}),
+    formName = _useState0[0],
+    setFormName = _useState0[1];
+  var _useState1 = useState(""),
     _useState10 = _slicedToArray(_useState1, 2),
-    formCredentials = _useState10[0],
-    setFormCredentials = _useState10[1];
-  var _useState11 = useState(null),
+    formType = _useState10[0],
+    setFormType = _useState10[1];
+  var _useState11 = useState({}),
     _useState12 = _slicedToArray(_useState11, 2),
-    deleteTarget = _useState12[0],
-    setDeleteTarget = _useState12[1];
-  var _useState13 = useState(false),
+    formCredentials = _useState12[0],
+    setFormCredentials = _useState12[1];
+  var _useState13 = useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    isAddingMcp = _useState14[0],
-    setIsAddingMcp = _useState14[1];
+    deleteTarget = _useState14[0],
+    setDeleteTarget = _useState14[1];
   var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    isEditingMcp = _useState16[0],
-    setIsEditingMcp = _useState16[1];
+    isAddingMcp = _useState16[0],
+    setIsAddingMcp = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isEditingMcp = _useState18[0],
+    setIsEditingMcp = _useState18[1];
 
   // Row ID counter for env/header rows in MCP edit mode
   var nextRowIdRef = useRef(0);
@@ -27683,6 +27723,7 @@ var ProvidersSection = function ProvidersSection(_ref) {
       credentials: credentials
     }, function () {
       resetForm();
+      setProviderTab("credentials");
       refreshProviders && refreshProviders();
     }, function (e, err) {
       return (void 0);
@@ -27691,6 +27732,7 @@ var ProvidersSection = function ProvidersSection(_ref) {
   function handleStartEdit(name, provider) {
     setSelectedName(name);
     setIsCreating(false);
+    setProviderTab(provider.providerClass === "mcp" ? "mcp" : "credentials");
     if (provider.providerClass === "mcp") {
       setIsEditingMcp(true);
       setIsEditing(false);
@@ -27755,6 +27797,7 @@ var ProvidersSection = function ProvidersSection(_ref) {
       setIsAddingMcp(false);
       refreshProviders && refreshProviders();
       setSelectedName(providerName);
+      setProviderTab("mcp");
     }, function (e, err) {
       return (void 0);
     });
@@ -27776,6 +27819,7 @@ var ProvidersSection = function ProvidersSection(_ref) {
       mcpConfig: mcpConfig
     }, function () {
       setSelectedName(providerName);
+      setProviderTab("mcp");
       setIsEditingMcp(false);
       resetForm();
       refreshProviders && refreshProviders();
@@ -27800,19 +27844,39 @@ var ProvidersSection = function ProvidersSection(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createRequested]);
   var selectedProvider = selectedName && providers[selectedName] ? providers[selectedName] : null;
-  var listContent = /*#__PURE__*/jsxs(Sidebar.Content, {
-    children: [credentialProviders.length > 0 && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-40 uppercase tracking-wider",
-        children: "API Credentials"
-      }), credentialProviders.map(function (_ref8) {
+  var activeProviders = providerTab === "credentials" ? credentialProviders : mcpProviders;
+  var activeIcon = providerTab === "credentials" ? "key" : "server";
+  var listContent = /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "px-2 pt-2",
+      children: /*#__PURE__*/jsx(Tabs3, {
+        value: providerTab,
+        onValueChange: setProviderTab,
+        backgroundColor: "bg-transparent",
+        spacing: "p-0",
+        children: /*#__PURE__*/jsxs(Tabs3.List, {
+          className: "w-full flex",
+          spacing: "p-0.5",
+          children: [/*#__PURE__*/jsx(Tabs3.Trigger, {
+            value: "credentials",
+            className: "flex-1",
+            children: "API Credentials"
+          }), /*#__PURE__*/jsx(Tabs3.Trigger, {
+            value: "mcp",
+            className: "flex-1",
+            children: "MCP Servers"
+          })]
+        })
+      })
+    }), /*#__PURE__*/jsxs(Sidebar.Content, {
+      children: [activeProviders.map(function (_ref8) {
         var _ref9 = _slicedToArray(_ref8, 2),
           name = _ref9[0],
           provider = _ref9[1];
         var isSelected = selectedName === name && !isCreating;
         return /*#__PURE__*/jsx(Sidebar.Item, {
           icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "key",
+            icon: activeIcon,
             className: "h-3.5 w-3.5"
           }),
           active: isSelected,
@@ -27829,54 +27893,25 @@ var ProvidersSection = function ProvidersSection(_ref) {
           className: isSelected ? "bg-white/10 opacity-100" : "",
           children: name
         }, name);
-      })]
-    }), mcpProviders.length > 0 && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-40 uppercase tracking-wider mt-2",
-        children: "MCP Servers"
-      }), mcpProviders.map(function (_ref0) {
-        var _ref1 = _slicedToArray(_ref0, 2),
-          name = _ref1[0],
-          provider = _ref1[1];
-        var isSelected = selectedName === name && !isCreating;
-        return /*#__PURE__*/jsx(Sidebar.Item, {
-          icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "server",
-            className: "h-3.5 w-3.5"
-          }),
-          active: isSelected,
+      }), activeProviders.length === 0 && /*#__PURE__*/jsx("span", {
+        className: "text-sm opacity-40 py-8 text-center",
+        children: providerTab === "credentials" ? "No API credentials configured" : "No MCP servers configured"
+      }), providerTab === "mcp" && /*#__PURE__*/jsx("div", {
+        className: "px-3 py-3 mt-2 border-t border-white/10",
+        children: /*#__PURE__*/jsxs("button", {
           onClick: function onClick() {
-            setSelectedName(name);
+            setIsAddingMcp(true);
+            setSelectedName(null);
             setIsCreating(false);
             setIsEditing(false);
-            setIsAddingMcp(false);
-            resetForm();
           },
-          badge: provider.type ? /*#__PURE__*/jsx(Tag3, {
-            text: provider.type
-          }) : null,
-          className: isSelected ? "bg-white/10 opacity-100" : "",
-          children: name
-        }, name);
+          className: "flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors w-full",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "plus",
+            className: "h-3 w-3"
+          }), "Add MCP Server"]
+        })
       })]
-    }), providerEntries.length === 0 && /*#__PURE__*/jsx("span", {
-      className: "text-sm opacity-40 py-8 text-center",
-      children: "No providers configured"
-    }), /*#__PURE__*/jsx("div", {
-      className: "px-3 py-3 mt-2 border-t border-white/10",
-      children: /*#__PURE__*/jsxs("button", {
-        onClick: function onClick() {
-          setIsAddingMcp(true);
-          setSelectedName(null);
-          setIsCreating(false);
-          setIsEditing(false);
-        },
-        className: "flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors w-full",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "plus",
-          className: "h-3 w-3"
-        }), "Add MCP Server"]
-      })
     })]
   });
   var detailContent = null;