@trops/dash-core 0.1.452 → 0.1.454

package/dist/index.js

@@ -3729,7 +3729,7 @@ var FolderDetail = function FolderDetail(_ref) {
   });
 };
 
-var OptionCard$1 = function OptionCard(_ref) {
+var OptionCard$2 = function OptionCard(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
@@ -3778,28 +3778,28 @@ var CreationMethodPicker = function CreationMethodPicker(_ref2) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col w-2/3 p-6 pt-10 space-y-3",
-      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "plus",
         title: "New Dashboard",
         description: "Start from a blank template and customize your layout",
         onClick: function onClick() {
           return onSelect("template");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "file-zipper",
         title: "Import from File",
         description: "Import a dashboard from a .zip file on your computer",
         onClick: function onClick() {
           return onSelect("import");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "compass",
         title: "Search Registry",
         description: "Browse and install dashboards from the online registry",
         onClick: function onClick() {
           return onSelect("registry");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
         icon: "wand-magic-sparkles",
         title: "Dashboard Wizard",
         description: "Guided setup \u2014 pick categories, providers, and widgets step by step",
@@ -25461,6 +25461,7 @@ var WidgetErrorBoundary = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
       if (this.state.hasError) {
         var _this$state$error;
         var widgetName = this.props.widgetName;
@@ -25468,33 +25469,64 @@ var WidgetErrorBoundary = /*#__PURE__*/function (_Component) {
 
         // Check if it's a WidgetContext error
         var isContextError = errorMessage.includes("Widget ID not found in Context") || errorMessage.includes("WidgetContext");
+
+        // AI-built widgets live under @ai-built/* — they get an "Open
+        // in AI Builder" recovery button that dispatches the existing
+        // dash:edit-widget-with-ai event (dash-electron's Dash.js
+        // listens for it and reopens the failing widget in remix mode).
+        var isAiBuilt = typeof widgetName === "string" && /(^|[./])ai-built\b/i.test(widgetName);
+        var openInBuilder = function openInBuilder() {
+          try {
+            window.dispatchEvent(new CustomEvent("dash:edit-widget-with-ai", {
+              detail: {
+                widgetComponentName: widgetName
+              }
+            }));
+          } catch (err) {
+          }
+        };
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col h-full w-full bg-red-900 border-2 border-red-600 rounded p-4 text-red-100",
+          className: "flex flex-col h-full w-full bg-amber-950 border border-amber-700 rounded p-4 text-amber-100",
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xl font-bold mb-2",
-            children: "\u26A0\uFE0F Widget Error"
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "text-sm mb-3",
-            children: [/*#__PURE__*/jsxRuntime.jsx("strong", {
-              children: "Widget:"
-            }), " ", widgetName]
+            className: "text-base font-semibold mb-2 text-amber-200",
+            children: "Widget couldn't render"
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "text-sm mb-3",
-            children: [/*#__PURE__*/jsxRuntime.jsx("strong", {
-              children: "Error:"
-            }), " ", errorMessage]
+            className: "text-xs mb-2 break-words",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-amber-300",
+              children: widgetName
+            }), " threw", " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "font-mono",
+              children: errorMessage
+            })]
           }), isContextError && /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "text-sm bg-red-800 border border-red-700 rounded p-3 mt-2",
+            className: "text-xs bg-amber-900 border border-amber-700 rounded p-2 mt-2 mb-2",
             children: [/*#__PURE__*/jsxRuntime.jsx("strong", {
               children: "Fix:"
             }), " This widget uses ", /*#__PURE__*/jsxRuntime.jsx("code", {
               children: "WidgetContext"
             }), " ", "but is missing the ", /*#__PURE__*/jsxRuntime.jsx("code", {
               children: "<Widget>"
-            }), " wrapper.", /*#__PURE__*/jsxRuntime.jsx("br", {}), /*#__PURE__*/jsxRuntime.jsx("br", {}), "Add the wrapper in your widget component:", /*#__PURE__*/jsxRuntime.jsx("pre", {
+            }), " wrapper.", /*#__PURE__*/jsxRuntime.jsx("br", {}), "Add the wrapper in your widget component:", /*#__PURE__*/jsxRuntime.jsx("pre", {
               className: "bg-gray-900 p-2 rounded mt-2 text-xs overflow-auto",
               children: "import { Widget } from \"@trops/dash-react\";\n\nexport const ".concat(widgetName, " = (props) => {\n  return (\n    <Widget {...props}>\n      {/* Your widget content */}\n    </Widget>\n  );\n};")
             })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 mt-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+              onClick: function onClick() {
+                return _this2.setState({
+                  hasError: false,
+                  error: null
+                });
+              },
+              className: "px-3 py-1 rounded text-xs bg-amber-700 hover:bg-amber-600 text-amber-100 transition-colors",
+              children: "Retry"
+            }), isAiBuilt && /*#__PURE__*/jsxRuntime.jsx("button", {
+              onClick: openInBuilder,
+              className: "px-3 py-1 rounded text-xs bg-indigo-600 hover:bg-indigo-500 text-white transition-colors",
+              children: "Open in AI Builder"
+            })]
           })]
         });
       }
@@ -47040,6 +47072,103 @@ var WebSocketProviderForm = function WebSocketProviderForm(_ref) {
   });
 };
 
+var OptionCard$1 = function OptionCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    onClick = _ref.onClick,
+    currentTheme = _ref.currentTheme;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    className: "w-full flex flex-row items-center gap-4 p-4 rounded-lg text-left transition-opacity ".concat(currentTheme["bg-primary-medium"] || "bg-white/5", " hover:opacity-80"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 h-8 w-8 flex items-center justify-center opacity-60",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "h-5 w-5"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50 mt-0.5",
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 ml-auto opacity-30",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "chevron-right",
+        className: "h-3 w-3"
+      })
+    })]
+  });
+};
+
+/**
+ * NewProviderPicker — the 3-option chooser shown when the user clicks
+ * "+ New Provider" from the Settings → Providers header without a
+ * specific class pre-selected. Mirrors InstallWidgetPicker's pattern
+ * so the UI feels consistent across "+ New ..." entry points in
+ * Settings.
+ *
+ * Calls `onSelect(class)` with the literal class string ("credential",
+ * "mcp", or "websocket"). The parent (ProvidersSection) then routes
+ * to the appropriate create flow:
+ *
+ *   credential → ProviderDetail (credential create form)
+ *   mcp        → McpCatalogDetail (catalog browser)
+ *   websocket  → WsProviderDetail (WebSocket add form)
+ *
+ * The Widget Builder's existing deep-link path (which always passes
+ * an explicit class) bypasses this chooser and goes straight to the
+ * matching form.
+ */
+var NewProviderPicker = function NewProviderPicker(_ref2) {
+  var onSelect = _ref2.onSelect;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 overflow-y-auto p-6 space-y-3 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs font-semibold opacity-50 block mb-4",
+        children: "ADD A NEW PROVIDER"
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "key",
+        title: "Credential",
+        description: "API key or token credentials for services like Algolia, Anthropic, or any HTTP API",
+        onClick: function onClick() {
+          return onSelect("credential");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "plug",
+        title: "MCP",
+        description: "Model Context Protocol server \u2014 pick from a curated catalog (Slack, Filesystem, Notion, etc.)",
+        onClick: function onClick() {
+          return onSelect("mcp");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "diagram-project",
+        title: "WebSocket",
+        description: "Real-time WebSocket connection to a streaming endpoint",
+        onClick: function onClick() {
+          return onSelect("websocket");
+        },
+        currentTheme: currentTheme
+      })]
+    })
+  });
+};
+
 var ProvidersSection = function ProvidersSection(_ref) {
   var _ref$dashApi = _ref.dashApi,
     dashApi = _ref$dashApi === void 0 ? null : _ref$dashApi,
@@ -47080,42 +47209,51 @@ var ProvidersSection = function ProvidersSection(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isCreating = _useState8[0],
     setIsCreating = _useState8[1];
+  // When the user clicks "+ New Provider" without a pre-selected
+  // class (Settings header button), show the class chooser
+  // (Credential / MCP / WebSocket) instead of defaulting to the
+  // credential form. Widget Builder's deep-link path passes a class
+  // explicitly and bypasses this chooser.
   var _useState9 = React.useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    isEditing = _useState0[0],
-    setIsEditing = _useState0[1];
-  var _useState1 = React.useState(""),
+    isShowingClassChooser = _useState0[0],
+    setIsShowingClassChooser = _useState0[1];
+  var _useState1 = React.useState(false),
     _useState10 = _slicedToArray(_useState1, 2),
-    formName = _useState10[0],
-    setFormName = _useState10[1];
+    isEditing = _useState10[0],
+    setIsEditing = _useState10[1];
   var _useState11 = React.useState(""),
     _useState12 = _slicedToArray(_useState11, 2),
-    formType = _useState12[0],
-    setFormType = _useState12[1];
-  var _useState13 = React.useState({}),
+    formName = _useState12[0],
+    setFormName = _useState12[1];
+  var _useState13 = React.useState(""),
     _useState14 = _slicedToArray(_useState13, 2),
-    formCredentials = _useState14[0],
-    setFormCredentials = _useState14[1];
-  var _useState15 = React.useState(null),
+    formType = _useState14[0],
+    setFormType = _useState14[1];
+  var _useState15 = React.useState({}),
     _useState16 = _slicedToArray(_useState15, 2),
-    deleteTarget = _useState16[0],
-    setDeleteTarget = _useState16[1];
-  var _useState17 = React.useState(false),
+    formCredentials = _useState16[0],
+    setFormCredentials = _useState16[1];
+  var _useState17 = React.useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    isAddingMcp = _useState18[0],
-    setIsAddingMcp = _useState18[1];
+    deleteTarget = _useState18[0],
+    setDeleteTarget = _useState18[1];
   var _useState19 = React.useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    isEditingMcp = _useState20[0],
-    setIsEditingMcp = _useState20[1];
+    isAddingMcp = _useState20[0],
+    setIsAddingMcp = _useState20[1];
   var _useState21 = React.useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    isAddingWs = _useState22[0],
-    setIsAddingWs = _useState22[1];
+    isEditingMcp = _useState22[0],
+    setIsEditingMcp = _useState22[1];
   var _useState23 = React.useState(false),
     _useState24 = _slicedToArray(_useState23, 2),
-    isEditingWs = _useState24[0],
-    setIsEditingWs = _useState24[1];
+    isAddingWs = _useState24[0],
+    setIsAddingWs = _useState24[1];
+  var _useState25 = React.useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isEditingWs = _useState26[0],
+    setIsEditingWs = _useState26[1];
 
   // Row ID counter for env/header rows in MCP edit mode
   var nextRowIdRef = React.useRef(0);
@@ -47397,19 +47535,35 @@ var ProvidersSection = function ProvidersSection(_ref) {
     if (createRequested && !prevCreateRequested.current) {
       resetForm();
       setSelectedName(null);
+      setIsShowingClassChooser(false);
       if (initialProviderClass === "mcp") {
         // MCP class: open the catalog detail. Pre-select happens in
         // McpCatalogDetail via the initialSelectedId prop passed below.
         setIsCreating(false);
         setIsAddingMcp(true);
-      } else {
-        // Credential class (default): open the credential create form
-        // and pre-fill the type field if provided.
+      } else if (initialProviderClass === "websocket") {
+        // WebSocket class: open the WebSocket add form. Reachable via
+        // a future Widget Builder deep-link for ws-typed widgets.
+        setIsCreating(false);
+        setIsAddingMcp(false);
+        setIsAddingWs(true);
+      } else if (initialProviderClass === "credential") {
+        // Credential class: open the credential create form and
+        // pre-fill the type field if provided.
         setIsAddingMcp(false);
         setIsCreating(true);
         if (initialProviderType) {
           setFormType(initialProviderType);
         }
+      } else {
+        // No class specified — Settings header "+ New Provider"
+        // button hits this branch. Show the chooser so the user
+        // picks Credential / MCP / WebSocket explicitly instead of
+        // landing on the credential form by default.
+        setIsAddingMcp(false);
+        setIsCreating(false);
+        setIsAddingWs(false);
+        setIsShowingClassChooser(true);
       }
     }
     prevCreateRequested.current = createRequested;
@@ -47541,6 +47695,19 @@ var ProvidersSection = function ProvidersSection(_ref) {
         return setIsEditingWs(false);
       }
     }, selectedName);
+  } else if (isShowingClassChooser) {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(NewProviderPicker, {
+      onSelect: function onSelect(cls) {
+        setIsShowingClassChooser(false);
+        if (cls === "mcp") {
+          setIsAddingMcp(true);
+        } else if (cls === "websocket") {
+          setIsAddingWs(true);
+        } else {
+          setIsCreating(true);
+        }
+      }
+    });
   } else if (isAddingMcp) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(McpCatalogDetail, {
       onSave: handleMcpSave,