@trops/dash-core 0.1.596 → 0.1.598

package/dist/index.js

@@ -54601,6 +54601,413 @@ var DashboardLoaderModal = function DashboardLoaderModal(_ref) {
   });
 };
 
+var KITCHEN_SINK_PACKAGE = "trops/kitchen-sink";
+var STATE = {
+  WELCOME: "welcome",
+  INSTALLING: "installing",
+  DONE: "done",
+  ERROR: "error"
+};
+var OnboardingModal = function OnboardingModal(_ref) {
+  var open = _ref.open,
+    appId = _ref.appId,
+    onOpenDashboard = _ref.onOpenDashboard,
+    onDismiss = _ref.onDismiss,
+    onComplete = _ref.onComplete;
+  var _ref2 = React.useContext(DashReact.ThemeContext) || {},
+    currentTheme = _ref2.currentTheme;
+  var _useState = React.useState(STATE.WELCOME),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progressItems = _useState4[0],
+    setProgressItems = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    installError = _useState6[0],
+    setInstallError = _useState6[1];
+  var installResultRef = React.useRef(null);
+  var cleanupProgressRef = React.useRef(null);
+  React.useEffect(function () {
+    if (open) {
+      setState(STATE.WELCOME);
+      setProgressItems([]);
+      setInstallError(null);
+      installResultRef.current = null;
+    }
+    return function () {
+      if (cleanupProgressRef.current) {
+        cleanupProgressRef.current();
+        cleanupProgressRef.current = null;
+      }
+    };
+  }, [open]);
+  var markCompletedAndClose = React.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(source) {
+      var _window$mainApi, _window$mainApi$markC;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 1;
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.onboarding) === null || _window$mainApi === void 0 || (_window$mainApi$markC = _window$mainApi.markCompleted) === null || _window$mainApi$markC === void 0 ? void 0 : _window$mainApi$markC.call(_window$mainApi, {
+              source: source
+            });
+          case 1:
+            _context.next = 3;
+            break;
+          case 2:
+            _context.prev = 2;
+            _context["catch"](0);
+          case 3:
+            if (onComplete) onComplete({
+              source: source
+            });
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 2]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [onComplete]);
+  var handleSkip = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    return _regeneratorRuntime.wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 1;
+          return markCompletedAndClose("dismissed");
+        case 1:
+          if (onDismiss) onDismiss();
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })), [markCompletedAndClose, onDismiss]);
+  var handleInstall = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _window$mainApi2, _window$mainApi2$onIn;
+    var _window$mainApi3, _window$mainApi3$inst, result, _t2;
+    return _regeneratorRuntime.wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (appId) {
+            _context3.next = 1;
+            break;
+          }
+          setInstallError("Cannot install — application not initialized. Try again in a moment.");
+          setState(STATE.ERROR);
+          return _context3.abrupt("return");
+        case 1:
+          setState(STATE.INSTALLING);
+          setProgressItems([]);
+          setInstallError(null);
+          if (cleanupProgressRef.current) cleanupProgressRef.current();
+          cleanupProgressRef.current = (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.dashboardConfig) === null || _window$mainApi2 === void 0 || (_window$mainApi2$onIn = _window$mainApi2.onInstallProgress) === null || _window$mainApi2$onIn === void 0 ? void 0 : _window$mainApi2$onIn.call(_window$mainApi2, function (data) {
+            setProgressItems(function (prev) {
+              var next = prev.length > 0 ? _toConsumableArray(prev) : [];
+              if (next.length === 0 && typeof data.total === "number") {
+                for (var i = 0; i < data.total; i += 1) {
+                  next.push({
+                    packageName: i === data.index ? data.packageName : "",
+                    displayName: i === data.index ? data.displayName : "",
+                    status: "pending"
+                  });
+                }
+              }
+              if (typeof data.index === "number" && data.index >= 0 && data.index < next.length) {
+                next[data.index] = {
+                  packageName: data.packageName || next[data.index].packageName,
+                  displayName: data.displayName || next[data.index].displayName || data.packageName || "",
+                  status: data.status || next[data.index].status,
+                  error: data.error || null
+                };
+              }
+              return next;
+            });
+          });
+          _context3.prev = 2;
+          _context3.next = 3;
+          return (_window$mainApi3 = window.mainApi) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.dashboardConfig) === null || _window$mainApi3 === void 0 || (_window$mainApi3$inst = _window$mainApi3.installDashboardFromRegistry) === null || _window$mainApi3$inst === void 0 ? void 0 : _window$mainApi3$inst.call(_window$mainApi3, appId, KITCHEN_SINK_PACKAGE, {});
+        case 3:
+          result = _context3.sent;
+          if (cleanupProgressRef.current) {
+            cleanupProgressRef.current();
+            cleanupProgressRef.current = null;
+          }
+          if (!(!result || !result.success)) {
+            _context3.next = 4;
+            break;
+          }
+          setInstallError((result === null || result === void 0 ? void 0 : result.error) || "Failed to install Kitchen Sink. Check your internet connection and try again.");
+          setState(STATE.ERROR);
+          return _context3.abrupt("return");
+        case 4:
+          installResultRef.current = result;
+          setState(STATE.DONE);
+          _context3.next = 6;
+          break;
+        case 5:
+          _context3.prev = 5;
+          _t2 = _context3["catch"](2);
+          if (cleanupProgressRef.current) {
+            cleanupProgressRef.current();
+            cleanupProgressRef.current = null;
+          }
+          setInstallError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Installation failed.");
+          setState(STATE.ERROR);
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[2, 5]]);
+  })), [appId]);
+  var handleOpen = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _installResultRef$cur;
+    var workspace;
+    return _regeneratorRuntime.wrap(function (_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          workspace = ((_installResultRef$cur = installResultRef.current) === null || _installResultRef$cur === void 0 ? void 0 : _installResultRef$cur.workspace) || null;
+          _context4.next = 1;
+          return markCompletedAndClose("kitchen-sink");
+        case 1:
+          if (workspace && onOpenDashboard) {
+            onOpenDashboard(workspace);
+          }
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })), [markCompletedAndClose, onOpenDashboard]);
+  var handleRetry = React.useCallback(function () {
+    setInstallError(null);
+    handleInstall();
+  }, [handleInstall]);
+
+  // The Modal dispatches setIsOpen(false) on Escape / backdrop click.
+  // Route any close attempt through handleSkip so the completion flag
+  // is always stamped (otherwise Escape would silently re-show the
+  // modal on the next launch).
+  var handleSetIsOpen = React.useCallback(function (next) {
+    if (next === false) handleSkip();
+  }, [handleSkip]);
+  var bgPanel = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme["bg-primary-medium"]) || "bg-gray-900";
+  var textPrimary = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme["text-primary-light"]) || "text-gray-100";
+  var textMuted = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme["text-primary-medium"]) || "text-gray-400";
+  var borderPanel = (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme["border-primary-medium"]) || "border-gray-700";
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
+    isOpen: open,
+    setIsOpen: handleSetIsOpen,
+    width: "w-full max-w-2xl",
+    height: "h-auto",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col ".concat(bgPanel, " ").concat(textPrimary, " rounded-lg overflow-hidden p-8"),
+      "data-testid": "onboarding-modal",
+      children: [state === STATE.WELCOME && /*#__PURE__*/jsxRuntime.jsx(WelcomeBody, {
+        onInstall: handleInstall,
+        onSkip: handleSkip,
+        textMuted: textMuted
+      }), state === STATE.INSTALLING && /*#__PURE__*/jsxRuntime.jsx(InstallingBody, {
+        items: progressItems,
+        borderPanel: borderPanel,
+        textMuted: textMuted
+      }), state === STATE.DONE && /*#__PURE__*/jsxRuntime.jsx(DoneBody, {
+        onOpen: handleOpen,
+        textMuted: textMuted
+      }), state === STATE.ERROR && /*#__PURE__*/jsxRuntime.jsx(ErrorBody, {
+        message: installError,
+        onRetry: handleRetry,
+        onSkip: handleSkip,
+        textMuted: textMuted
+      })]
+    })
+  });
+};
+function WelcomeBody(_ref7) {
+  var onInstall = _ref7.onInstall,
+    onSkip = _ref7.onSkip,
+    textMuted = _ref7.textMuted;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "sink",
+        className: "text-2xl"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
+        title: "Welcome to Dash"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Paragraph, {
+      className: "".concat(textMuted, " mb-6"),
+      children: ["Get started with the ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+        children: "Kitchen Sink"
+      }), " dashboard \u2014 a curated set of widgets that shows what Dash can do. You can swap anything out, or build your own from scratch later."]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-end gap-3 mt-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onSkip,
+        title: "Skip for now",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-gray-700",
+        textColor: "text-gray-300",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        "data-testid": "onboarding-skip-button"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onInstall,
+        title: "Install Kitchen Sink",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-blue-600",
+        textColor: "text-white",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-blue-500",
+        icon: "download",
+        "data-testid": "onboarding-install-button"
+      })]
+    })]
+  });
+}
+function InstallingBody(_ref8) {
+  var items = _ref8.items,
+    borderPanel = _ref8.borderPanel,
+    textMuted = _ref8.textMuted;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading, {
+      title: "Installing Kitchen Sink\u2026"
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+      className: "".concat(textMuted, " mt-2 mb-4"),
+      children: "Downloading widgets, theme, and dashboard configuration from the registry. This usually takes a few seconds."
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "border ".concat(borderPanel, " rounded-md max-h-64 overflow-y-auto"),
+      "data-testid": "onboarding-progress-list",
+      children: [items.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "p-3 ".concat(textMuted),
+        children: "Starting install\u2026"
+      }), items.map(function (item, idx) {
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center justify-between px-3 py-2",
+          "data-status": item.status,
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "truncate",
+            children: item.displayName || item.packageName || "Item ".concat(idx + 1)
+          }), /*#__PURE__*/jsxRuntime.jsx(StatusBadge, {
+            status: item.status
+          })]
+        }, "".concat(item.packageName || "slot", "-").concat(idx));
+      })]
+    })]
+  });
+}
+function StatusBadge(_ref9) {
+  var status = _ref9.status;
+  switch (status) {
+    case "installed":
+    case "already-installed":
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "check",
+        className: "text-green-500",
+        "data-testid": "status-installed"
+      });
+    case "failed":
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "xmark",
+        className: "text-red-500",
+        "data-testid": "status-failed"
+      });
+    case "downloading":
+    case "pending":
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "circle-notch",
+        className: "animate-spin",
+        "data-testid": "status-".concat(status || "pending")
+      });
+  }
+}
+function DoneBody(_ref0) {
+  var onOpen = _ref0.onOpen,
+    textMuted = _ref0.textMuted;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "check",
+        className: "text-2xl text-green-500"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
+        title: "Kitchen Sink Installed"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+      className: "".concat(textMuted, " mb-6"),
+      children: "Your first dashboard is ready. Open it to explore \u2014 every widget and the theme are now installed locally."
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-end",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onOpen,
+        title: "Open Kitchen Sink",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-green-600",
+        textColor: "text-white",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-green-500",
+        icon: "arrow-right",
+        "data-testid": "onboarding-open-button"
+      })
+    })]
+  });
+}
+function ErrorBody(_ref1) {
+  var message = _ref1.message,
+    onRetry = _ref1.onRetry,
+    onSkip = _ref1.onSkip,
+    textMuted = _ref1.textMuted;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "triangle-exclamation",
+        className: "text-2xl text-red-500"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
+        title: "Install Failed"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+      className: "".concat(textMuted, " mb-6"),
+      children: message || "Something went wrong installing Kitchen Sink."
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-end gap-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onSkip,
+        title: "Skip for now",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-gray-700",
+        textColor: "text-gray-300",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        "data-testid": "onboarding-skip-after-error-button"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onRetry,
+        title: "Try again",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-blue-600",
+        textColor: "text-white",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-blue-500",
+        icon: "rotate-right",
+        "data-testid": "onboarding-retry-button"
+      })]
+    })]
+  });
+}
+
 var DashCommandPalette = function DashCommandPalette(_ref) {
   var isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
@@ -60409,64 +60816,75 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     isWizardOpen = _useState36[0],
     setIsWizardOpen = _useState36[1];
 
+  // First-run onboarding (Phase 3A). Tri-state:
+  //   null   — status not yet loaded from main; do not render anything
+  //   true   — show the OnboardingModal
+  //   false  — onboarding already completed (or app is not first-run)
+  // The status read happens once per mount; subsequent dismiss/complete
+  // flips this to false without re-fetching.
+  var _useState37 = React.useState(null),
+    _useState38 = _slicedToArray(_useState37, 2),
+    isOnboardingOpen = _useState38[0],
+    setIsOnboardingOpen = _useState38[1];
+
   // Missing widgets detection
   var _useMissingWidgets = useMissingWidgets(workspaceSelected),
     missingComponents = _useMissingWidgets.missingComponents,
     hasMissing = _useMissingWidgets.hasMissing;
-  var _useState37 = React.useState(false),
-    _useState38 = _slicedToArray(_useState37, 2),
-    isMissingWidgetsModalOpen = _useState38[0],
-    setIsMissingWidgetsModalOpen = _useState38[1];
-  var _useState39 = React.useState(new Set()),
+  var _useState39 = React.useState(false),
     _useState40 = _slicedToArray(_useState39, 2),
-    dismissedMissingForWorkspace = _useState40[0],
-    setDismissedMissingForWorkspace = _useState40[1];
+    isMissingWidgetsModalOpen = _useState40[0],
+    setIsMissingWidgetsModalOpen = _useState40[1];
+  var _useState41 = React.useState(new Set()),
+    _useState42 = _slicedToArray(_useState41, 2),
+    dismissedMissingForWorkspace = _useState42[0],
+    setDismissedMissingForWorkspace = _useState42[1];
 
   // Dashboard Config modal — bulk provider wiring for the current
   // workspace. Auto-opens on first load of a workspace with unresolved
   // providers (tracked per session via `configModalAutoOpenedFor` so
   // switching tabs doesn't re-fire the modal).
-  var _useState41 = React.useState(false),
-    _useState42 = _slicedToArray(_useState41, 2),
-    isConfigModalOpen = _useState42[0],
-    setIsConfigModalOpen = _useState42[1];
-  React.useRef(new Set());
-  var _useState43 = React.useState(new Set()),
+  var _useState43 = React.useState(false),
     _useState44 = _slicedToArray(_useState43, 2),
-    dismissedUnresolvedForWorkspace = _useState44[0],
-    setDismissedUnresolvedForWorkspace = _useState44[1];
+    isConfigModalOpen = _useState44[0],
+    setIsConfigModalOpen = _useState44[1];
+  React.useRef(new Set());
+  var _useState45 = React.useState(new Set()),
+    _useState46 = _slicedToArray(_useState45, 2),
+    dismissedUnresolvedForWorkspace = _useState46[0],
+    setDismissedUnresolvedForWorkspace = _useState46[1];
 
   // Unified App Settings Modal
-  var _useState45 = React.useState(false),
-    _useState46 = _slicedToArray(_useState45, 2),
-    isAppSettingsOpen = _useState46[0],
-    setIsAppSettingsOpen = _useState46[1];
-  var _useState47 = React.useState("dashboards"),
+  var _useState47 = React.useState(false),
     _useState48 = _slicedToArray(_useState47, 2),
-    appSettingsInitialSection = _useState48[0],
-    setAppSettingsInitialSection = _useState48[1];
-  var _useState49 = React.useState(null),
+    isAppSettingsOpen = _useState48[0],
+    setIsAppSettingsOpen = _useState48[1];
+  var _useState49 = React.useState("dashboards"),
     _useState50 = _slicedToArray(_useState49, 2),
-    appSettingsInitialProvider = _useState50[0],
-    setAppSettingsInitialProvider = _useState50[1];
-  var _useState51 = React.useState(false),
+    appSettingsInitialSection = _useState50[0],
+    setAppSettingsInitialSection = _useState50[1];
+  var _useState51 = React.useState(null),
     _useState52 = _slicedToArray(_useState51, 2),
-    appSettingsCreateProvider = _useState52[0],
-    setAppSettingsCreateProvider = _useState52[1];
+    appSettingsInitialProvider = _useState52[0],
+    setAppSettingsInitialProvider = _useState52[1];
+  var _useState53 = React.useState(false),
+    _useState54 = _slicedToArray(_useState53, 2),
+    appSettingsCreateProvider = _useState54[0],
+    setAppSettingsCreateProvider = _useState54[1];
   // Optional pre-fills used by the cross-modal "Add new <type>"
   // flow dispatched from dash-electron's WidgetBuilderModal.
   // initialProviderType is the type id (e.g. "filesystem", "slack").
   // initialProviderClass routes the create flow: "mcp" opens the
   // catalog detail with that type pre-selected; otherwise opens
   // the credential create form with formType pre-filled.
-  var _useState53 = React.useState(null),
-    _useState54 = _slicedToArray(_useState53, 2),
-    appSettingsInitialProviderType = _useState54[0],
-    setAppSettingsInitialProviderType = _useState54[1];
   var _useState55 = React.useState(null),
     _useState56 = _slicedToArray(_useState55, 2),
-    appSettingsInitialProviderClass = _useState56[0],
-    setAppSettingsInitialProviderClass = _useState56[1];
+    appSettingsInitialProviderType = _useState56[0],
+    setAppSettingsInitialProviderType = _useState56[1];
+  var _useState57 = React.useState(null),
+    _useState58 = _slicedToArray(_useState57, 2),
+    appSettingsInitialProviderClass = _useState58[0],
+    setAppSettingsInitialProviderClass = _useState58[1];
   function openAppSettings() {
     var section = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "general";
     var providerName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -60484,27 +60902,27 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     return _handleProfileUpdated.apply(this, arguments);
   } // Ref to access LayoutBuilder's current workspace without re-render cascades
   function _handleProfileUpdated() {
-    _handleProfileUpdated = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var _window$mainApi11, profile;
-      return _regeneratorRuntime.wrap(function (_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    _handleProfileUpdated = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var _window$mainApi12, profile;
+      return _regeneratorRuntime.wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            _context2.prev = 0;
-            _context2.next = 1;
-            return (_window$mainApi11 = window.mainApi) === null || _window$mainApi11 === void 0 || (_window$mainApi11 = _window$mainApi11.registryAuth) === null || _window$mainApi11 === void 0 ? void 0 : _window$mainApi11.getProfile();
+            _context3.prev = 0;
+            _context3.next = 1;
+            return (_window$mainApi12 = window.mainApi) === null || _window$mainApi12 === void 0 || (_window$mainApi12 = _window$mainApi12.registryAuth) === null || _window$mainApi12 === void 0 ? void 0 : _window$mainApi12.getProfile();
           case 1:
-            profile = _context2.sent;
+            profile = _context3.sent;
             if (profile) setAuthProfile(profile);
-            _context2.next = 3;
+            _context3.next = 3;
             break;
           case 2:
-            _context2.prev = 2;
-            _context2["catch"](0);
+            _context3.prev = 2;
+            _context3["catch"](0);
           case 3:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2, null, [[0, 2]]);
+      }, _callee3, null, [[0, 2]]);
     }));
     return _handleProfileUpdated.apply(this, arguments);
   }
@@ -60541,14 +60959,14 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // editing. Shapes:
   //   { kind: "open-workspace", workspace }       — sidebar switch
   //   { kind: "cancel-edit" }                     — Cancel button
-  var _useState57 = React.useState(false),
-    _useState58 = _slicedToArray(_useState57, 2),
-    isDirty = _useState58[0],
-    setIsDirty = _useState58[1];
-  var _useState59 = React.useState(null),
+  var _useState59 = React.useState(false),
     _useState60 = _slicedToArray(_useState59, 2),
-    pendingNavigation = _useState60[0],
-    setPendingNavigation = _useState60[1];
+    isDirty = _useState60[0],
+    setIsDirty = _useState60[1];
+  var _useState61 = React.useState(null),
+    _useState62 = _slicedToArray(_useState61, 2),
+    pendingNavigation = _useState62[0],
+    setPendingNavigation = _useState62[1];
   React.useEffect(function () {
     if (typeof globalThis !== "undefined") {
       globalThis.__dashboardIsDirty = isDirty;
@@ -60559,6 +60977,63 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
       }
     };
   }, [isDirty]);
+
+  // ─── First-run onboarding gate (Phase 3A) ────────────────────────
+  // Decision fires exactly once per mount after the first workspaces
+  // load completes. We need to wait for `isLoadingWorkspaces` to flip
+  // true→false at least once; otherwise the gate reads workspaceConfig
+  // at its initial empty value and would flash the modal on every
+  // launch.
+  //
+  // Popout windows never show the modal — they're a slave to the
+  // main window's onboarding decision and don't need their own gate.
+  var onboardingCheckedRef = React.useRef(false);
+  React.useEffect(function () {
+    if (popout) {
+      setIsOnboardingOpen(false);
+      return;
+    }
+    if (onboardingCheckedRef.current) return;
+    if (isLoadingWorkspaces) return;
+    onboardingCheckedRef.current = true;
+    var cancelled = false;
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _window$mainApi, _window$mainApi$getSt, status;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 1;
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.onboarding) === null || _window$mainApi === void 0 || (_window$mainApi$getSt = _window$mainApi.getStatus) === null || _window$mainApi$getSt === void 0 ? void 0 : _window$mainApi$getSt.call(_window$mainApi);
+          case 1:
+            status = _context.sent;
+            if (!cancelled) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            if (status && status.completed === false && workspaceConfig.length === 0) {
+              setIsOnboardingOpen(true);
+            } else {
+              setIsOnboardingOpen(false);
+            }
+            _context.next = 4;
+            break;
+          case 3:
+            _context.prev = 3;
+            _context["catch"](0);
+            if (!cancelled) setIsOnboardingOpen(false);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 3]]);
+    }))();
+    return function () {
+      cancelled = true;
+    };
+  }, [popout, isLoadingWorkspaces, workspaceConfig.length]);
   React.useEffect(function () {
     isLoadingWorkspaces === false && loadWorkspaces();
     isLoadingMenuItems === false && loadMenuItems();
@@ -60573,9 +61048,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
       return ws.id === popoutWorkspaceId;
     });
     if (target) {
-      var _window$mainApi;
+      var _window$mainApi2;
       handleOpenTab(target);
-      if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.popout) !== null && _window$mainApi !== void 0 && _window$mainApi.setTitle) {
+      if ((_window$mainApi2 = window.mainApi) !== null && _window$mainApi2 !== void 0 && (_window$mainApi2 = _window$mainApi2.popout) !== null && _window$mainApi2 !== void 0 && _window$mainApi2.setTitle) {
         window.mainApi.popout.setTitle(popoutWorkspaceId, target.name || "Untitled");
       }
     }
@@ -60584,15 +61059,15 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
 
   // ─── Listen for workspace:saved broadcasts (MCP tools, popouts) ──
   React.useEffect(function () {
-    var _window$mainApi2;
-    if (!((_window$mainApi2 = window.mainApi) !== null && _window$mainApi2 !== void 0 && _window$mainApi2.on)) return;
+    var _window$mainApi3;
+    if (!((_window$mainApi3 = window.mainApi) !== null && _window$mainApi3 !== void 0 && _window$mainApi3.on)) return;
     var handler = function handler() {
       loadWorkspaces();
     };
     window.mainApi.on("workspace:saved", handler);
     return function () {
-      var _window$mainApi3;
-      if ((_window$mainApi3 = window.mainApi) !== null && _window$mainApi3 !== void 0 && _window$mainApi3.removeListener) {
+      var _window$mainApi4;
+      if ((_window$mainApi4 = window.mainApi) !== null && _window$mainApi4 !== void 0 && _window$mainApi4.removeListener) {
         window.mainApi.removeListener("workspace:saved", handler);
       }
     };
@@ -60624,9 +61099,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // closing the builder modal — this listener only opens Settings.
   React.useEffect(function () {
     var handler = function handler(e) {
-      var _ref4 = (e === null || e === void 0 ? void 0 : e.detail) || {},
-        type = _ref4.type,
-        providerClass = _ref4.providerClass;
+      var _ref5 = (e === null || e === void 0 ? void 0 : e.detail) || {},
+        type = _ref5.type,
+        providerClass = _ref5.providerClass;
       if (!type) return;
       openAppSettings("providers", null, true, type, providerClass || null);
     };
@@ -60646,10 +61121,10 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // We record the requested ID and open it once it appears in
   // workspaceConfig — handles the case where the workspace was just
   // created and the config reload is still in flight.
-  var _useState61 = React.useState(null),
-    _useState62 = _slicedToArray(_useState61, 2),
-    pendingOpenWorkspaceId = _useState62[0],
-    setPendingOpenWorkspaceId = _useState62[1];
+  var _useState63 = React.useState(null),
+    _useState64 = _slicedToArray(_useState63, 2),
+    pendingOpenWorkspaceId = _useState64[0],
+    setPendingOpenWorkspaceId = _useState64[1];
   React.useEffect(function () {
     var handler = function handler(e) {
       var _e$detail2;
@@ -60677,30 +61152,30 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
 
   // ─── Load recents on mount ───────────────────────────────────────
   React.useEffect(function () {
-    var _window$mainApi4;
+    var _window$mainApi5;
     if (popout) return;
-    (_window$mainApi4 = window.mainApi) === null || _window$mainApi4 === void 0 || (_window$mainApi4 = _window$mainApi4.session) === null || _window$mainApi4 === void 0 || _window$mainApi4.getRecents().then(function (recents) {
+    (_window$mainApi5 = window.mainApi) === null || _window$mainApi5 === void 0 || (_window$mainApi5 = _window$mainApi5.session) === null || _window$mainApi5 === void 0 || _window$mainApi5.getRecents().then(function (recents) {
       if (recents) setRecentDashboards(recents);
     });
   }, [popout]);
 
   // ─── Session save (continuous) ──────────────────────────────────
   React.useEffect(function () {
-    var _window$mainApi5;
+    var _window$mainApi6;
     if (popout) return;
     var tabIds = openTabs.map(function (t) {
       return t.id;
     });
-    (_window$mainApi5 = window.mainApi) === null || _window$mainApi5 === void 0 || (_window$mainApi5 = _window$mainApi5.session) === null || _window$mainApi5 === void 0 || _window$mainApi5.saveState(tabIds, activeTabId);
+    (_window$mainApi6 = window.mainApi) === null || _window$mainApi6 === void 0 || (_window$mainApi6 = _window$mainApi6.session) === null || _window$mainApi6 === void 0 || _window$mainApi6.saveState(tabIds, activeTabId);
   }, [openTabs, activeTabId, popout]);
 
   // ─── Session restore on launch ─────────────────────────────────
   React.useEffect(function () {
-    var _window$mainApi6;
+    var _window$mainApi7;
     if (popout || workspaceConfig.length === 0 || sessionRestored.current) return;
     sessionRestored.current = true;
-    (_window$mainApi6 = window.mainApi) === null || _window$mainApi6 === void 0 || (_window$mainApi6 = _window$mainApi6.session) === null || _window$mainApi6 === void 0 || _window$mainApi6.getState().then(function (state) {
-      var _state$openTabIds, _window$mainApi7;
+    (_window$mainApi7 = window.mainApi) === null || _window$mainApi7 === void 0 || (_window$mainApi7 = _window$mainApi7.session) === null || _window$mainApi7 === void 0 || _window$mainApi7.getState().then(function (state) {
+      var _state$openTabIds, _window$mainApi8;
       if (!(state !== null && state !== void 0 && (_state$openTabIds = state.openTabIds) !== null && _state$openTabIds !== void 0 && _state$openTabIds.length)) return;
       state.openTabIds.forEach(function (wsId) {
         var ws = workspaceConfig.find(function (w) {
@@ -60709,7 +61184,7 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
         if (ws) handleOpenTab(ws);
       });
       if (state.activeTabId) setActiveTabId(state.activeTabId);
-      (_window$mainApi7 = window.mainApi) === null || _window$mainApi7 === void 0 || (_window$mainApi7 = _window$mainApi7.session) === null || _window$mainApi7 === void 0 || _window$mainApi7.clearState();
+      (_window$mainApi8 = window.mainApi) === null || _window$mainApi8 === void 0 || (_window$mainApi8 = _window$mainApi8.session) === null || _window$mainApi8 === void 0 || _window$mainApi8.clearState();
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceConfig, popout]);
@@ -60722,35 +61197,35 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
       return _checkAuth.apply(this, arguments);
     }
     function _checkAuth() {
-      _checkAuth = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _window$mainApi8, status, _window$mainApi9, profile;
-        return _regeneratorRuntime.wrap(function (_context) {
-          while (1) switch (_context.prev = _context.next) {
+      _checkAuth = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _window$mainApi9, status, _window$mainApi0, profile;
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context.prev = 0;
-              _context.next = 1;
-              return (_window$mainApi8 = window.mainApi) === null || _window$mainApi8 === void 0 || (_window$mainApi8 = _window$mainApi8.registryAuth) === null || _window$mainApi8 === void 0 ? void 0 : _window$mainApi8.getStatus();
+              _context2.prev = 0;
+              _context2.next = 1;
+              return (_window$mainApi9 = window.mainApi) === null || _window$mainApi9 === void 0 || (_window$mainApi9 = _window$mainApi9.registryAuth) === null || _window$mainApi9 === void 0 ? void 0 : _window$mainApi9.getStatus();
             case 1:
-              status = _context.sent;
+              status = _context2.sent;
               if (!cancelled) {
-                _context.next = 2;
+                _context2.next = 2;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 2:
               if (!(status !== null && status !== void 0 && status.authenticated)) {
-                _context.next = 5;
+                _context2.next = 5;
                 break;
               }
-              _context.next = 3;
-              return (_window$mainApi9 = window.mainApi) === null || _window$mainApi9 === void 0 || (_window$mainApi9 = _window$mainApi9.registryAuth) === null || _window$mainApi9 === void 0 ? void 0 : _window$mainApi9.getProfile();
+              _context2.next = 3;
+              return (_window$mainApi0 = window.mainApi) === null || _window$mainApi0 === void 0 || (_window$mainApi0 = _window$mainApi0.registryAuth) === null || _window$mainApi0 === void 0 ? void 0 : _window$mainApi0.getProfile();
             case 3:
-              profile = _context.sent;
+              profile = _context2.sent;
               if (!cancelled) {
-                _context.next = 4;
+                _context2.next = 4;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 4:
               if (profile) {
                 setAuthProfile(profile);
@@ -60758,22 +61233,22 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
               } else {
                 setAuthStatus("unauthenticated");
               }
-              _context.next = 6;
+              _context2.next = 6;
               break;
             case 5:
               setAuthStatus("unauthenticated");
             case 6:
-              _context.next = 8;
+              _context2.next = 8;
               break;
             case 7:
-              _context.prev = 7;
-              _context["catch"](0);
+              _context2.prev = 7;
+              _context2["catch"](0);
               if (!cancelled) setAuthStatus("unauthenticated");
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, null, [[0, 7]]);
+        }, _callee2, null, [[0, 7]]);
       }));
       return _checkAuth.apply(this, arguments);
     }
@@ -60900,8 +61375,8 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
 
     // Track in recents
     if (!popout) {
-      var _window$mainApi0;
-      (_window$mainApi0 = window.mainApi) === null || _window$mainApi0 === void 0 || (_window$mainApi0 = _window$mainApi0.session) === null || _window$mainApi0 === void 0 || _window$mainApi0.addRecent(workspaceItem.id, workspaceItem.name || "Untitled").then(function (updated) {
+      var _window$mainApi1;
+      (_window$mainApi1 = window.mainApi) === null || _window$mainApi1 === void 0 || (_window$mainApi1 = _window$mainApi1.session) === null || _window$mainApi1 === void 0 || _window$mainApi1.addRecent(workspaceItem.id, workspaceItem.name || "Untitled").then(function (updated) {
         if (updated) setRecentDashboards(updated);
       });
     }
@@ -61276,10 +61751,10 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   }
 
   // ─── Page State ──────────────────────────────────────────────────
-  var _useState63 = React.useState(null),
-    _useState64 = _slicedToArray(_useState63, 2),
-    activePageId = _useState64[0],
-    setActivePageId = _useState64[1];
+  var _useState65 = React.useState(null),
+    _useState66 = _slicedToArray(_useState65, 2),
+    activePageId = _useState66[0],
+    setActivePageId = _useState66[1];
 
   // Page history stack for goBack() — pushes the previous page id
   // whenever a navigation happens through navigateToPage().
@@ -61313,9 +61788,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // Listen for programmatic page switches via DashboardActionsApi
   React.useEffect(function () {
     function onSwitchPage(e) {
-      var _ref5 = e.detail || {},
-        pageId = _ref5.pageId,
-        pageName = _ref5.pageName;
+      var _ref6 = e.detail || {},
+        pageId = _ref6.pageId,
+        pageName = _ref6.pageName;
       if (pageId) {
         navigateToPage(pageId);
       } else if (pageName) {
@@ -61905,70 +62380,70 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     return _handleSidebarSignIn.apply(this, arguments);
   }
   function _handleSidebarSignIn() {
-    _handleSidebarSignIn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    _handleSidebarSignIn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
       var flow, interval, poll;
-      return _regeneratorRuntime.wrap(function (_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+      return _regeneratorRuntime.wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            _context4.prev = 0;
-            _context4.next = 1;
+            _context5.prev = 0;
+            _context5.next = 1;
             return window.mainApi.registryAuth.initiateLogin();
           case 1:
-            flow = _context4.sent;
+            flow = _context5.sent;
             if (flow.verificationUrlComplete) {
               window.mainApi.shell.openExternal(flow.verificationUrlComplete);
             }
             interval = (flow.interval || 5) * 1000;
-            poll = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+            poll = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
               var result, profile;
-              return _regeneratorRuntime.wrap(function (_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              return _regeneratorRuntime.wrap(function (_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
                   case 0:
-                    _context3.prev = 0;
-                    _context3.next = 1;
+                    _context4.prev = 0;
+                    _context4.next = 1;
                     return window.mainApi.registryAuth.pollToken(flow.deviceCode);
                   case 1:
-                    result = _context3.sent;
+                    result = _context4.sent;
                     if (!(result.status === "authorized")) {
-                      _context3.next = 3;
+                      _context4.next = 3;
                       break;
                     }
                     clearInterval(poll);
-                    _context3.next = 2;
+                    _context4.next = 2;
                     return window.mainApi.registryAuth.getProfile();
                   case 2:
-                    profile = _context3.sent;
+                    profile = _context4.sent;
                     setAuthProfile(profile);
                     setAuthStatus("authenticated");
-                    _context3.next = 4;
+                    _context4.next = 4;
                     break;
                   case 3:
                     if (result.status === "expired") {
                       clearInterval(poll);
                     }
                   case 4:
-                    _context3.next = 6;
+                    _context4.next = 6;
                     break;
                   case 5:
-                    _context3.prev = 5;
-                    _context3["catch"](0);
+                    _context4.prev = 5;
+                    _context4["catch"](0);
                     clearInterval(poll);
                   case 6:
                   case "end":
-                    return _context3.stop();
+                    return _context4.stop();
                 }
-              }, _callee3, null, [[0, 5]]);
+              }, _callee4, null, [[0, 5]]);
             })), interval);
-            _context4.next = 3;
+            _context5.next = 3;
             break;
           case 2:
-            _context4.prev = 2;
-            _context4["catch"](0);
+            _context5.prev = 2;
+            _context5["catch"](0);
           case 3:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
-      }, _callee4, null, [[0, 2]]);
+      }, _callee5, null, [[0, 2]]);
     }));
     return _handleSidebarSignIn.apply(this, arguments);
   }
@@ -61976,38 +62451,38 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     return _handleSidebarSignOut.apply(this, arguments);
   }
   function _handleSidebarSignOut() {
-    _handleSidebarSignOut = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-      return _regeneratorRuntime.wrap(function (_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    _handleSidebarSignOut = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      return _regeneratorRuntime.wrap(function (_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
-            _context5.prev = 0;
-            _context5.next = 1;
+            _context6.prev = 0;
+            _context6.next = 1;
             return window.mainApi.registryAuth.logout();
           case 1:
             setAuthStatus("unauthenticated");
             setAuthProfile(null);
-            _context5.next = 3;
+            _context6.next = 3;
             break;
           case 2:
-            _context5.prev = 2;
-            _context5["catch"](0);
+            _context6.prev = 2;
+            _context6["catch"](0);
           case 3:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5, null, [[0, 2]]);
+      }, _callee6, null, [[0, 2]]);
     }));
     return _handleSidebarSignOut.apply(this, arguments);
   }
   function handlePopout() {
-    var _window$mainApi1;
-    if (workspaceSelected && (_window$mainApi1 = window.mainApi) !== null && _window$mainApi1 !== void 0 && (_window$mainApi1 = _window$mainApi1.popout) !== null && _window$mainApi1 !== void 0 && _window$mainApi1.open) {
+    var _window$mainApi10;
+    if (workspaceSelected && (_window$mainApi10 = window.mainApi) !== null && _window$mainApi10 !== void 0 && (_window$mainApi10 = _window$mainApi10.popout) !== null && _window$mainApi10 !== void 0 && _window$mainApi10.open) {
       window.mainApi.popout.open(workspaceSelected.id);
     }
   }
   function handleWidgetPopout(widgetId) {
-    var _window$mainApi10;
-    if (workspaceSelected && (_window$mainApi10 = window.mainApi) !== null && _window$mainApi10 !== void 0 && (_window$mainApi10 = _window$mainApi10.widgetPopout) !== null && _window$mainApi10 !== void 0 && _window$mainApi10.open) {
+    var _window$mainApi11;
+    if (workspaceSelected && (_window$mainApi11 = window.mainApi) !== null && _window$mainApi11 !== void 0 && (_window$mainApi11 = _window$mainApi11.widgetPopout) !== null && _window$mainApi11 !== void 0 && _window$mainApi11.open) {
       window.mainApi.widgetPopout.open(workspaceSelected.id, widgetId);
     }
   }
@@ -62327,6 +62802,23 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
           onSaveListeners: handleBulkListenerBindings,
           onSaveUserPrefs: handleBulkUserPrefs,
           initialTab: "providers"
+        }), /*#__PURE__*/jsxRuntime.jsx(OnboardingModal, {
+          open: isOnboardingOpen === true,
+          appId: credentials === null || credentials === void 0 ? void 0 : credentials.appId,
+          onDismiss: function onDismiss() {
+            return setIsOnboardingOpen(false);
+          },
+          onComplete: function onComplete() {
+            return setIsOnboardingOpen(false);
+          },
+          onOpenDashboard: function onOpenDashboard(ws) {
+            setIsOnboardingOpen(false);
+            // Refresh workspaces before opening so the just-
+            // installed Kitchen Sink shows up in the sidebar list
+            // alongside the open tab.
+            loadWorkspaces();
+            handleOpenTab(ws);
+          }
         })]
       })]
     }), !popout && /*#__PURE__*/jsxRuntime.jsx(DashCommandPalette, {