@trops/dash-core 0.1.67 → 0.1.69

package/dist/index.esm.js

@@ -25981,7 +25981,7 @@ var ToolSelector = function ToolSelector(_ref) {
     }
   };
   return /*#__PURE__*/jsxs("div", {
-    className: "space-y-2",
+    className: "space-y-2 flex-1 flex flex-col min-h-0",
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center justify-between",
       children: [/*#__PURE__*/jsx("p", {
@@ -25996,7 +25996,7 @@ var ToolSelector = function ToolSelector(_ref) {
       className: "text-sm opacity-50",
       children: "Choose which tools this provider can expose to widgets"
     }), /*#__PURE__*/jsx("div", {
-      className: "space-y-1 max-h-64 overflow-y-auto",
+      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__*/jsxs("label", {
@@ -26747,7 +26747,9 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     _ref2$initialCredenti2 = _ref2.initialCredentials,
     initialCredentials = _ref2$initialCredenti2 === void 0 ? {} : _ref2$initialCredenti2,
     _ref2$initialAllowedT = _ref2.initialAllowedTools,
-    initialAllowedTools = _ref2$initialAllowedT === void 0 ? null : _ref2$initialAllowedT;
+    initialAllowedTools = _ref2$initialAllowedT === void 0 ? null : _ref2$initialAllowedT,
+    _ref2$initialAuthComm = _ref2.initialAuthCommand,
+    initialAuthCommand = _ref2$initialAuthComm === void 0 ? null : _ref2$initialAuthComm;
   var appContext = useContext(AppContext);
   var dashApi = appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
 
@@ -26815,19 +26817,29 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     wizardStep = _useState24[0],
     setWizardStep = _useState24[1];
 
-  // JSON editor state
-  var _useState25 = useState("form"),
+  // Auth state
+  var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    viewMode = _useState26[0],
-    setViewMode = _useState26[1]; // "form" | "json"
-  var _useState27 = useState(""),
+    isAuthorizing = _useState26[0],
+    setIsAuthorizing = _useState26[1];
+  var _useState27 = useState(null),
     _useState28 = _slicedToArray(_useState27, 2),
-    jsonText = _useState28[0],
-    setJsonText = _useState28[1];
-  var _useState29 = useState(null),
+    authResult = _useState28[0],
+    setAuthResult = _useState28[1];
+
+  // JSON editor state
+  var _useState29 = useState("form"),
     _useState30 = _slicedToArray(_useState29, 2),
-    jsonError = _useState30[0],
-    setJsonError = _useState30[1];
+    viewMode = _useState30[0],
+    setViewMode = _useState30[1]; // "form" | "json"
+  var _useState31 = useState(""),
+    _useState32 = _slicedToArray(_useState31, 2),
+    jsonText = _useState32[0],
+    setJsonText = _useState32[1];
+  var _useState33 = useState(null),
+    _useState34 = _slicedToArray(_useState33, 2),
+    jsonError = _useState34[0],
+    setJsonError = _useState34[1];
 
   // Clear credential data when transport changes (derived fields change entirely)
   // Only in create mode — in edit mode the initial transport is set correctly
@@ -26835,22 +26847,27 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     if (!isEditMode) {
       setCredentialData({});
       setTestResult(null);
+      setAuthResult(null);
     }
   }, [transport, isEditMode]);
 
+  // Dynamic wizard steps based on whether auth is needed
+  var hasAuth = !!initialAuthCommand;
+  var wizardSteps = hasAuth ? ["configure", "authorize", "testTools"] : ["configure", "testTools"];
+  var totalSteps = wizardSteps.length;
+  var currentStepType = wizardSteps[wizardStep];
+
   // Wizard step navigation with validation gates
   var handleWizardStepChange = function handleWizardStepChange(newStep) {
     if (newStep < wizardStep) {
       setWizardStep(newStep);
       return;
     }
-    // Step 0→1: validate form (skip validation in JSON mode, handled on save)
-    if (wizardStep === 0 && newStep >= 1) {
+    if (currentStepType === "configure" && newStep > wizardStep) {
       if (viewMode === "form" && !validateForm()) return;
     }
-    // Step 1→2: require test success OR edit mode with existing tools
-    if (wizardStep === 1 && newStep >= 2) {
-      if (!(testResult !== null && testResult !== void 0 && testResult.success) && !(isEditMode && initialAllowedTools)) return;
+    if (currentStepType === "authorize" && newStep > wizardStep) {
+      if (!(authResult !== null && authResult !== void 0 && authResult.success)) return;
     }
     setWizardStep(newStep);
   };
@@ -27046,6 +27063,33 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
     });
   };
 
+  // --- authorize (OAuth browser flow) ---
+  var handleAuthorize = function handleAuthorize() {
+    if (!dashApi || !initialAuthCommand) return;
+    setIsAuthorizing(true);
+    setAuthResult(null);
+    dashApi.mcpRunAuth(mcpConfig, credentialData, initialAuthCommand, function (event, result) {
+      if (result.error) {
+        setAuthResult({
+          success: false,
+          message: result.message
+        });
+      } else {
+        setAuthResult({
+          success: true,
+          message: "Authorized!"
+        });
+      }
+      setIsAuthorizing(false);
+    }, function (event, err) {
+      setAuthResult({
+        success: false,
+        message: (err === null || err === void 0 ? void 0 : err.message) || "Authorization failed"
+      });
+      setIsAuthorizing(false);
+    });
+  };
+
   // --- save ---
   var handleSave = function handleSave() {
     // If in JSON mode, parse JSON first to update form state
@@ -27467,46 +27511,76 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
               })]
             })]
           })
-        }), /*#__PURE__*/jsx(Stepper.Step, {
-          label: "Test",
-          description: "Verify connection",
+        }), hasAuth && /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Authorize",
+          description: "OAuth authentication",
           children: /*#__PURE__*/jsxs("div", {
             className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
             children: [/*#__PURE__*/jsxs("div", {
               className: "flex flex-col items-center justify-center py-8 space-y-4",
               children: [/*#__PURE__*/jsx("p", {
-                className: "text-sm opacity-60 text-center",
-                children: "Test the connection to verify your configuration is correct."
+                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__*/jsx(Button, {
-                title: isTesting ? "Testing..." : "Test Connection",
-                onClick: handleTestConnection,
+                title: isAuthorizing ? "Authorizing..." : "Authorize",
+                onClick: handleAuthorize,
                 size: "md"
               })]
-            }), testResult && /*#__PURE__*/jsx("div", {
-              className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+            }), authResult && /*#__PURE__*/jsx("div", {
+              className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
               children: /*#__PURE__*/jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                  icon: testResult.success ? "circle-check" : "circle-exclamation"
+                  icon: authResult.success ? "circle-check" : "circle-exclamation"
                 }), /*#__PURE__*/jsx("span", {
-                  children: testResult.message
+                  children: authResult.message
                 })]
               })
+            }), authResult && !authResult.success && /*#__PURE__*/jsxs("div", {
+              className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2",
+              children: [/*#__PURE__*/jsx("p", {
+                className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                children: "Troubleshooting"
+              }), /*#__PURE__*/jsxs("ul", {
+                className: "text-sm opacity-60 space-y-1 list-disc list-inside",
+                children: [/*#__PURE__*/jsx("li", {
+                  children: "Ensure Node.js and npx are available in your PATH"
+                }), /*#__PURE__*/jsx("li", {
+                  children: "Try running the auth command manually in your terminal"
+                }), /*#__PURE__*/jsx("li", {
+                  children: "Check that your OAuth credentials file is valid"
+                }), /*#__PURE__*/jsx("li", {
+                  children: "If using nvm, ensure the correct Node version is active"
+                })]
+              })]
             })]
           })
         }), /*#__PURE__*/jsx(Stepper.Step, {
-          label: "Tools",
-          description: "Select allowed tools",
-          children: /*#__PURE__*/jsx("div", {
-            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
-            children: testResult !== null && testResult !== void 0 && testResult.success && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools ? /*#__PURE__*/jsx(ToolSelector, {
+          label: "Test & Tools",
+          description: "Verify & select tools",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 flex flex-col pb-4 space-y-4",
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-3",
+              children: [/*#__PURE__*/jsx(Button, {
+                title: isTesting ? "Fetching..." : "Fetch Tools",
+                onClick: handleTestConnection,
+                size: "sm"
+              }), testResult && /*#__PURE__*/jsxs("span", {
+                className: "text-sm ".concat(testResult.success ? "text-green-400" : "text-red-400"),
+                children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                  icon: testResult.success ? "circle-check" : "circle-exclamation",
+                  className: "mr-1"
+                }), testResult.message]
+              })]
+            }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsx(ToolSelector, {
               tools: testResult.tools,
               selectedTools: selectedTools,
               onSelectionChange: setSelectedTools
-            }) : /*#__PURE__*/jsx("div", {
+            }), !testResult && /*#__PURE__*/jsx("div", {
               className: "text-center py-8 opacity-50",
-              children: "No tools available. Go back and test the connection first."
-            })
+              children: "Click \"Fetch Tools\" to test the connection and discover available tools."
+            })]
           })
         })]
       })
@@ -27529,30 +27603,24 @@ var CustomMcpServerForm = function CustomMcpServerForm(_ref2) {
         className: "flex-1 text-center",
         children: /*#__PURE__*/jsxs("span", {
           className: "text-xs opacity-40",
-          children: ["Step ", wizardStep + 1, " of 3"]
+          children: ["Step ", wizardStep + 1, " of ", totalSteps]
         })
       }), /*#__PURE__*/jsxs("div", {
         className: "flex flex-row gap-2",
-        children: [wizardStep === 0 && /*#__PURE__*/jsx(Button, {
+        children: [currentStepType === "configure" && /*#__PURE__*/jsx(Button, {
           title: "Next",
           onClick: function onClick() {
-            return handleWizardStepChange(1);
+            return handleWizardStepChange(wizardStep + 1);
           },
           size: "sm"
-        }), wizardStep === 1 && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(Button, {
-            title: isTesting ? "Testing..." : "Test Connection",
-            onClick: handleTestConnection,
-            size: "sm"
-          }), /*#__PURE__*/jsx(Button, {
-            title: "Next",
-            onClick: function onClick() {
-              return handleWizardStepChange(2);
-            },
-            disabled: !(testResult !== null && testResult !== void 0 && testResult.success) && !(isEditMode && initialAllowedTools),
-            size: "sm"
-          })]
-        }), wizardStep === 2 && /*#__PURE__*/jsx(Button, {
+        }), currentStepType === "authorize" && /*#__PURE__*/jsx(Button, {
+          title: "Next",
+          onClick: function onClick() {
+            return handleWizardStepChange(wizardStep + 1);
+          },
+          disabled: !(authResult !== null && authResult !== void 0 && authResult.success),
+          size: "sm"
+        }), currentStepType === "testTools" && /*#__PURE__*/jsx(Button, {
           title: isEditMode ? "Save Changes" : "Save MCP Server",
           onClick: handleSave,
           size: "sm"
@@ -27711,21 +27779,23 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
     });
   });
 
+  // Dynamic wizard steps based on whether auth is needed
+  var hasAuth = !!(selectedServer !== null && selectedServer !== void 0 && selectedServer.authCommand);
+  var wizardSteps = hasAuth ? ["configure", "authorize", "testTools"] : ["configure", "testTools"];
+  var totalSteps = wizardSteps.length;
+  var currentStepType = wizardSteps[wizardStep];
+
   // Wizard step navigation with validation gates
   var handleWizardStepChange = function handleWizardStepChange(newStep) {
-    // Allow backward navigation freely
     if (newStep < wizardStep) {
       setWizardStep(newStep);
       return;
     }
-    // Step 0→1: validate the configure form + auth gate
-    if (wizardStep === 0 && newStep >= 1) {
+    if (currentStepType === "configure" && newStep > wizardStep) {
       if (!validateForm()) return;
-      if (selectedServer !== null && selectedServer !== void 0 && selectedServer.authCommand && !(authResult !== null && authResult !== void 0 && authResult.success)) return;
     }
-    // Step 1→2: require successful test
-    if (wizardStep === 1 && newStep >= 2) {
-      if (!(testResult !== null && testResult !== void 0 && testResult.success)) return;
+    if (currentStepType === "authorize" && newStep > wizardStep) {
+      if (!(authResult !== null && authResult !== void 0 && authResult.success)) return;
     }
     setWizardStep(newStep);
   };
@@ -28065,58 +28135,78 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
                     })]
                   }, field.key);
                 })]
-              }), authResult && /*#__PURE__*/jsx("div", {
-                className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
-                children: /*#__PURE__*/jsxs("div", {
-                  className: "flex items-center gap-2",
-                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                    icon: authResult.success ? "circle-check" : "circle-exclamation"
-                  }), /*#__PURE__*/jsx("span", {
-                    children: authResult.message
-                  })]
-                })
               })]
             })
-          }), /*#__PURE__*/jsx(Stepper.Step, {
-            label: "Test",
-            description: "Verify connection",
+          }), hasAuth && /*#__PURE__*/jsx(Stepper.Step, {
+            label: "Authorize",
+            description: "OAuth authentication",
             children: /*#__PURE__*/jsxs("div", {
               className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
               children: [/*#__PURE__*/jsxs("div", {
                 className: "flex flex-col items-center justify-center py-8 space-y-4",
                 children: [/*#__PURE__*/jsx("p", {
-                  className: "text-sm opacity-60 text-center",
-                  children: "Test the connection to verify your configuration is correct."
+                  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__*/jsx(Button, {
-                  title: isTesting ? "Testing..." : "Test Connection",
-                  onClick: handleTestConnection,
+                  title: isAuthorizing ? "Authorizing..." : "Authorize",
+                  onClick: handleAuthorize,
                   size: "md"
                 })]
-              }), testResult && /*#__PURE__*/jsx("div", {
-                className: "p-3 rounded-lg text-sm ".concat(testResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
+              }), authResult && /*#__PURE__*/jsx("div", {
+                className: "p-3 rounded-lg text-sm ".concat(authResult.success ? "bg-green-900/30 border border-green-700 text-green-300" : "bg-red-900/30 border border-red-700 text-red-300"),
                 children: /*#__PURE__*/jsxs("div", {
                   className: "flex items-center gap-2",
                   children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                    icon: testResult.success ? "circle-check" : "circle-exclamation"
+                    icon: authResult.success ? "circle-check" : "circle-exclamation"
                   }), /*#__PURE__*/jsx("span", {
-                    children: testResult.message
+                    children: authResult.message
                   })]
                 })
+              }), authResult && !authResult.success && /*#__PURE__*/jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2",
+                children: [/*#__PURE__*/jsx("p", {
+                  className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
+                  children: "Troubleshooting"
+                }), /*#__PURE__*/jsxs("ul", {
+                  className: "text-sm opacity-60 space-y-1 list-disc list-inside",
+                  children: [/*#__PURE__*/jsx("li", {
+                    children: "Ensure Node.js and npx are available in your PATH"
+                  }), /*#__PURE__*/jsx("li", {
+                    children: "Try running the auth command manually in your terminal"
+                  }), /*#__PURE__*/jsx("li", {
+                    children: "Check that your OAuth credentials file is valid"
+                  }), /*#__PURE__*/jsx("li", {
+                    children: "If using nvm, ensure the correct Node version is active"
+                  })]
+                })]
               })]
             })
           }), /*#__PURE__*/jsx(Stepper.Step, {
-            label: "Tools",
-            description: "Select allowed tools",
-            children: /*#__PURE__*/jsx("div", {
-              className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
-              children: testResult !== null && testResult !== void 0 && testResult.success && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools ? /*#__PURE__*/jsx(ToolSelector, {
+            label: "Test & Tools",
+            description: "Verify & select tools",
+            children: /*#__PURE__*/jsxs("div", {
+              className: "flex-1 min-h-0 flex flex-col pb-4 space-y-4",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "flex items-center gap-3",
+                children: [/*#__PURE__*/jsx(Button, {
+                  title: isTesting ? "Fetching..." : "Fetch Tools",
+                  onClick: handleTestConnection,
+                  size: "sm"
+                }), testResult && /*#__PURE__*/jsxs("span", {
+                  className: "text-sm ".concat(testResult.success ? "text-green-400" : "text-red-400"),
+                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: testResult.success ? "circle-check" : "circle-exclamation",
+                    className: "mr-1"
+                  }), testResult.message]
+                })]
+              }), (testResult === null || testResult === void 0 ? void 0 : testResult.success) && ((_testResult$tools = testResult.tools) === null || _testResult$tools === void 0 ? void 0 : _testResult$tools.length) > 0 && selectedTools && /*#__PURE__*/jsx(ToolSelector, {
                 tools: testResult.tools,
                 selectedTools: selectedTools,
                 onSelectionChange: setSelectedTools
-              }) : /*#__PURE__*/jsx("div", {
+              }), !testResult && /*#__PURE__*/jsx("div", {
                 className: "text-center py-8 opacity-50",
-                children: "No tools available. Go back and test the connection first."
-              })
+                children: "Click \"Fetch Tools\" to test the connection and discover available tools."
+              })]
             })
           })]
         })
@@ -28139,37 +28229,24 @@ var McpCatalogDetail = function McpCatalogDetail(_ref) {
           className: "flex-1 text-center",
           children: /*#__PURE__*/jsxs("span", {
             className: "text-xs opacity-40",
-            children: ["Step ", wizardStep + 1, " of 3"]
+            children: ["Step ", wizardStep + 1, " of ", totalSteps]
           })
         }), /*#__PURE__*/jsxs("div", {
           className: "flex flex-row gap-2",
-          children: [wizardStep === 0 && /*#__PURE__*/jsxs(Fragment, {
-            children: [(selectedServer === null || selectedServer === void 0 ? void 0 : selectedServer.authCommand) && /*#__PURE__*/jsx(Button, {
-              title: isAuthorizing ? "Authorizing..." : "Authorize",
-              onClick: handleAuthorize,
-              size: "sm"
-            }), /*#__PURE__*/jsx(Button, {
-              title: "Next",
-              onClick: function onClick() {
-                return handleWizardStepChange(1);
-              },
-              disabled: (selectedServer === null || selectedServer === void 0 ? void 0 : selectedServer.authCommand) && !(authResult !== null && authResult !== void 0 && authResult.success),
-              size: "sm"
-            })]
-          }), wizardStep === 1 && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Button, {
-              title: isTesting ? "Testing..." : "Test Connection",
-              onClick: handleTestConnection,
-              size: "sm"
-            }), /*#__PURE__*/jsx(Button, {
-              title: "Next",
-              onClick: function onClick() {
-                return handleWizardStepChange(2);
-              },
-              disabled: !(testResult !== null && testResult !== void 0 && testResult.success),
-              size: "sm"
-            })]
-          }), wizardStep === 2 && /*#__PURE__*/jsx(Button, {
+          children: [currentStepType === "configure" && /*#__PURE__*/jsx(Button, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleWizardStepChange(wizardStep + 1);
+            },
+            size: "sm"
+          }), currentStepType === "authorize" && /*#__PURE__*/jsx(Button, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleWizardStepChange(wizardStep + 1);
+            },
+            disabled: !(authResult !== null && authResult !== void 0 && authResult.success),
+            size: "sm"
+          }), currentStepType === "testTools" && /*#__PURE__*/jsx(Button, {
             title: "Save MCP Server",
             onClick: handleSaveProvider,
             size: "sm"
@@ -28615,11 +28692,12 @@ var ProvidersSection = function ProvidersSection(_ref) {
       initialHeaderRows: headerTemplateToRows(mc.headerTemplate, nextRowId),
       initialCredentials: selectedProvider.credentials || {},
       initialAllowedTools: selectedProvider.allowedTools || null,
+      initialAuthCommand: (editCatalogEntry === null || editCatalogEntry === void 0 ? void 0 : editCatalogEntry.authCommand) || null,
       onSave: handleMcpEditSave,
       onBack: function onBack() {
         return setIsEditingMcp(false);
       }
-    });
+    }, selectedName);
   } else if (selectedName && selectedProvider) {
     // Look up authCommand from the catalog for this provider type
     var catalogEntry = catalog.find(function (entry) {