@trops/dash-core 0.1.597 → 0.1.599

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor as isHexColor$1, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex as normalizeHex$1, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, hexToRgb as hexToRgb$1, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, isHexColor as isHexColor$1, deriveShades, colorTypes, TAILWIND_PALETTE, Toggle, normalizeHex as normalizeHex$1, contrastRatio, Caption2, Caption, getColorFamilies, getCuratedColorGrid, DashPanel, hexToRgb as hexToRgb$1, themeVariants, SubHeading, Heading2, Paragraph2, Paragraph3, ButtonIcon3, Tag2, Alert, Alert2, Alert3, Toast, Toast2, Toast3, ProgressBar, ProgressBar2, ProgressBar3, MenuItem, Breadcrumbs, Breadcrumbs2, Breadcrumbs3, Caption3, Code, Code2, Code3, Divider, Divider2, Divider3, DashPanel2, DashPanel3, Tabs, Tabs2, Tabs3, Accordion, Accordion2, Accordion3, Toggle2, Toggle3, TextArea, Checkbox, Slider, RadioGroup, AlertBanner, StatusBadge as StatusBadge$1, Skeleton, StatCard, DataList, EmptyState, Card, Panel2, ThemeFromUrlPane, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { FontAwesomeIcon, ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -10134,11 +10134,91 @@ function applyFilters(items, filters, mode) {
   });
 }
 
+var PREVIEW_TEMPLATE_SHAPE = {
+  single: {
+    rows: 1,
+    cols: 1
+  },
+  "two-columns": {
+    rows: 1,
+    cols: 2
+  },
+  "two-rows": {
+    rows: 2,
+    cols: 1
+  },
+  "three-columns": {
+    rows: 1,
+    cols: 3
+  },
+  "two-by-two": {
+    rows: 2,
+    cols: 2
+  },
+  "two-by-three": {
+    rows: 2,
+    cols: 3
+  },
+  "three-by-three": {
+    rows: 3,
+    cols: 3
+  }
+};
+function WizardThemePreview(_ref) {
+  var theme = _ref.theme,
+    templateKey = _ref.templateKey;
+  if (!theme) return null;
+  var shape = PREVIEW_TEMPLATE_SHAPE[templateKey] || {
+    rows: 2,
+    cols: 2
+  };
+  var familyOrder = [theme.primary, theme.secondary, theme.tertiary].filter(function (f) {
+    return typeof f === "string" && f.length > 0;
+  });
+  if (familyOrder.length === 0) return null;
+  var totalCells = shape.rows * shape.cols;
+  return /*#__PURE__*/jsxs("div", {
+    className: "rounded-lg border border-gray-700/50 bg-gray-900/30 p-3 flex flex-col gap-2",
+    "data-testid": "wizard-theme-preview",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2 text-xs text-gray-400",
+      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "eye",
+        fixedWidth: true,
+        className: "text-gray-500"
+      }), /*#__PURE__*/jsxs("span", {
+        children: ["Preview \xB7 ", theme.name || ""]
+      }), templateKey && /*#__PURE__*/jsxs("span", {
+        className: "text-gray-600",
+        children: ["(", shape.rows, "\xD7", shape.cols, ")"]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "grid gap-1.5",
+      style: {
+        gridTemplateRows: "repeat(".concat(shape.rows, ", minmax(0, 1fr))"),
+        gridTemplateColumns: "repeat(".concat(shape.cols, ", minmax(0, 1fr))"),
+        minHeight: "5rem"
+      },
+      "data-testid": "wizard-theme-preview-grid",
+      children: Array.from({
+        length: totalCells
+      }).map(function (_, i) {
+        var family = familyOrder[i % familyOrder.length];
+        return /*#__PURE__*/jsx("div", {
+          className: "rounded bg-".concat(family, "-500/70 border border-").concat(family, "-400/40"),
+          "data-testid": "wizard-theme-preview-cell-".concat(i),
+          "data-family": family
+        }, i);
+      })
+    })]
+  });
+}
+
 function _createForOfIteratorHelper$G(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$G(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$G(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$G(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$G(r, a) : void 0; } }
 function _arrayLikeToArray$G(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
-  var _state$selectedDashbo, _state$selectedDashbo2;
+  var _state$selectedDashbo, _state$selectedDashbo2, _state$layout;
   var state = _ref.state,
     dispatch = _ref.dispatch,
     _ref$menuItems = _ref.menuItems,
@@ -10910,6 +10990,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
               })
             }, key);
           })
+        }), state.customization.theme && /*#__PURE__*/jsx(WizardThemePreview, {
+          theme: themes === null || themes === void 0 ? void 0 : themes[state.customization.theme],
+          templateKey: (_state$layout = state.layout) === null || _state$layout === void 0 ? void 0 : _state$layout.templateKey
         })]
       }), selectedProviders.length > 0 && /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-2",
@@ -36479,7 +36562,7 @@ var REGISTRY = {
     themeKey: "status-badge",
     category: "Feedback",
     render: function render() {
-      return /*#__PURE__*/jsx(StatusBadge, {
+      return /*#__PURE__*/jsx(StatusBadge$1, {
         state: "success",
         label: "Active"
       });
@@ -49733,7 +49816,23 @@ var WidgetsSection = function WidgetsSection(_ref) {
   }
   var listContent = /*#__PURE__*/jsxs("div", {
     className: "flex flex-col h-full",
-    children: [isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 px-3 pt-2 pb-1",
+      children: /*#__PURE__*/jsxs("button", {
+        type: "button",
+        onClick: function onClick() {
+          return window.dispatchEvent(new Event("dash:open-widget-builder"));
+        },
+        className: "w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-indigo-600 hover:bg-indigo-500 text-white",
+        "data-testid": "widgets-section-new-widget-button",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "plus",
+          className: "text-xs"
+        }), /*#__PURE__*/jsx("span", {
+          children: "New Widget"
+        })]
+      })
+    }), isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxs("div", {
       className: "flex-shrink-0 px-3 py-2 border-b border-white/10 bg-gray-800/60 flex items-center gap-2 text-xs text-gray-400",
       "data-testid": "widgets-section-checking-updates",
       children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -54583,6 +54682,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 = useContext(ThemeContext) || {},
+    currentTheme = _ref2.currentTheme;
+  var _useState = useState(STATE.WELCOME),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progressItems = _useState4[0],
+    setProgressItems = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    installError = _useState6[0],
+    setInstallError = _useState6[1];
+  var installResultRef = useRef(null);
+  var cleanupProgressRef = useRef(null);
+  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 = 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 = 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 = 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 = 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 = 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 = 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__*/jsx(Modal, {
+    isOpen: open,
+    setIsOpen: handleSetIsOpen,
+    width: "w-full max-w-2xl",
+    height: "h-auto",
+    children: /*#__PURE__*/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__*/jsx(WelcomeBody, {
+        onInstall: handleInstall,
+        onSkip: handleSkip,
+        textMuted: textMuted
+      }), state === STATE.INSTALLING && /*#__PURE__*/jsx(InstallingBody, {
+        items: progressItems,
+        borderPanel: borderPanel,
+        textMuted: textMuted
+      }), state === STATE.DONE && /*#__PURE__*/jsx(DoneBody, {
+        onOpen: handleOpen,
+        textMuted: textMuted
+      }), state === STATE.ERROR && /*#__PURE__*/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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "sink",
+        className: "text-2xl"
+      }), /*#__PURE__*/jsx(Heading2, {
+        title: "Welcome to Dash"
+      })]
+    }), /*#__PURE__*/jsxs(Paragraph, {
+      className: "".concat(textMuted, " mb-6"),
+      children: ["Get started with the ", /*#__PURE__*/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__*/jsxs("div", {
+      className: "flex items-center justify-end gap-3 mt-2",
+      children: [/*#__PURE__*/jsx(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__*/jsx(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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SubHeading, {
+      title: "Installing Kitchen Sink\u2026"
+    }), /*#__PURE__*/jsx(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__*/jsxs("div", {
+      className: "border ".concat(borderPanel, " rounded-md max-h-64 overflow-y-auto"),
+      "data-testid": "onboarding-progress-list",
+      children: [items.length === 0 && /*#__PURE__*/jsx("div", {
+        className: "p-3 ".concat(textMuted),
+        children: "Starting install\u2026"
+      }), items.map(function (item, idx) {
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center justify-between px-3 py-2",
+          "data-status": item.status,
+          children: [/*#__PURE__*/jsx("span", {
+            className: "truncate",
+            children: item.displayName || item.packageName || "Item ".concat(idx + 1)
+          }), /*#__PURE__*/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__*/jsx(FontAwesomeIcon, {
+        icon: "check",
+        className: "text-green-500",
+        "data-testid": "status-installed"
+      });
+    case "failed":
+      return /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "xmark",
+        className: "text-red-500",
+        "data-testid": "status-failed"
+      });
+    case "downloading":
+    case "pending":
+    default:
+      return /*#__PURE__*/jsx(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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "check",
+        className: "text-2xl text-green-500"
+      }), /*#__PURE__*/jsx(Heading2, {
+        title: "Kitchen Sink Installed"
+      })]
+    }), /*#__PURE__*/jsx(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__*/jsx("div", {
+      className: "flex items-center justify-end",
+      children: /*#__PURE__*/jsx(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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "triangle-exclamation",
+        className: "text-2xl text-red-500"
+      }), /*#__PURE__*/jsx(Heading2, {
+        title: "Install Failed"
+      })]
+    }), /*#__PURE__*/jsx(Paragraph, {
+      className: "".concat(textMuted, " mb-6"),
+      children: message || "Something went wrong installing Kitchen Sink."
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-end gap-3",
+      children: [/*#__PURE__*/jsx(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__*/jsx(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,
@@ -58053,6 +58559,8 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     onSaveListeners = _ref.onSaveListeners,
     _ref$onSaveUserPrefs = _ref.onSaveUserPrefs,
     onSaveUserPrefs = _ref$onSaveUserPrefs === void 0 ? null : _ref$onSaveUserPrefs,
+    _ref$onSkip = _ref.onSkip,
+    onSkip = _ref$onSkip === void 0 ? null : _ref$onSkip,
     _ref$initialTab = _ref.initialTab,
     initialTab = _ref$initialTab === void 0 ? "providers" : _ref$initialTab;
   var _useContext = useContext(ThemeContext),
@@ -58566,6 +59074,23 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     setStagedPrefs({});
     setIsOpen(false);
   }
+
+  // "Skip for now" — closes the modal AND tells the parent to suppress
+  // the unresolved-providers banner for the current session. Cancel
+  // just closes; Skip means "I'm intentionally not dealing with this
+  // right now." Without this affordance, new users who hit the
+  // post-install state can feel cornered by the banner reappearing
+  // every time they close the modal without resolving every provider.
+  function handleSkip() {
+    setStaged({});
+    setStagedListeners({
+      adds: [],
+      removes: []
+    });
+    setStagedPrefs({});
+    if (typeof onSkip === "function") onSkip();
+    setIsOpen(false);
+  }
   if (!isOpen) return null;
   return /*#__PURE__*/jsx(Modal, {
     isOpen: isOpen,
@@ -58677,7 +59202,10 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
         })]
       }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsxs("div", {
         className: "flex-shrink-0 flex flex-row justify-end gap-2 p-4",
-        children: [/*#__PURE__*/jsx(Button3, {
+        children: [typeof onSkip === "function" && /*#__PURE__*/jsx(Button3, {
+          title: "Skip for now",
+          onClick: handleSkip
+        }), /*#__PURE__*/jsx(Button3, {
           title: "Cancel",
           onClick: handleCancel
         }), /*#__PURE__*/jsx(Button2, {
@@ -60391,64 +60919,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 = 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 = useState(false),
-    _useState38 = _slicedToArray(_useState37, 2),
-    isMissingWidgetsModalOpen = _useState38[0],
-    setIsMissingWidgetsModalOpen = _useState38[1];
-  var _useState39 = useState(new Set()),
+  var _useState39 = useState(false),
     _useState40 = _slicedToArray(_useState39, 2),
-    dismissedMissingForWorkspace = _useState40[0],
-    setDismissedMissingForWorkspace = _useState40[1];
+    isMissingWidgetsModalOpen = _useState40[0],
+    setIsMissingWidgetsModalOpen = _useState40[1];
+  var _useState41 = 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 = useState(false),
-    _useState42 = _slicedToArray(_useState41, 2),
-    isConfigModalOpen = _useState42[0],
-    setIsConfigModalOpen = _useState42[1];
-  useRef(new Set());
-  var _useState43 = useState(new Set()),
+  var _useState43 = useState(false),
     _useState44 = _slicedToArray(_useState43, 2),
-    dismissedUnresolvedForWorkspace = _useState44[0],
-    setDismissedUnresolvedForWorkspace = _useState44[1];
+    isConfigModalOpen = _useState44[0],
+    setIsConfigModalOpen = _useState44[1];
+  useRef(new Set());
+  var _useState45 = useState(new Set()),
+    _useState46 = _slicedToArray(_useState45, 2),
+    dismissedUnresolvedForWorkspace = _useState46[0],
+    setDismissedUnresolvedForWorkspace = _useState46[1];
 
   // Unified App Settings Modal
-  var _useState45 = useState(false),
-    _useState46 = _slicedToArray(_useState45, 2),
-    isAppSettingsOpen = _useState46[0],
-    setIsAppSettingsOpen = _useState46[1];
-  var _useState47 = useState("dashboards"),
+  var _useState47 = useState(false),
     _useState48 = _slicedToArray(_useState47, 2),
-    appSettingsInitialSection = _useState48[0],
-    setAppSettingsInitialSection = _useState48[1];
-  var _useState49 = useState(null),
+    isAppSettingsOpen = _useState48[0],
+    setIsAppSettingsOpen = _useState48[1];
+  var _useState49 = useState("dashboards"),
     _useState50 = _slicedToArray(_useState49, 2),
-    appSettingsInitialProvider = _useState50[0],
-    setAppSettingsInitialProvider = _useState50[1];
-  var _useState51 = useState(false),
+    appSettingsInitialSection = _useState50[0],
+    setAppSettingsInitialSection = _useState50[1];
+  var _useState51 = useState(null),
     _useState52 = _slicedToArray(_useState51, 2),
-    appSettingsCreateProvider = _useState52[0],
-    setAppSettingsCreateProvider = _useState52[1];
+    appSettingsInitialProvider = _useState52[0],
+    setAppSettingsInitialProvider = _useState52[1];
+  var _useState53 = 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 = useState(null),
-    _useState54 = _slicedToArray(_useState53, 2),
-    appSettingsInitialProviderType = _useState54[0],
-    setAppSettingsInitialProviderType = _useState54[1];
   var _useState55 = useState(null),
     _useState56 = _slicedToArray(_useState55, 2),
-    appSettingsInitialProviderClass = _useState56[0],
-    setAppSettingsInitialProviderClass = _useState56[1];
+    appSettingsInitialProviderType = _useState56[0],
+    setAppSettingsInitialProviderType = _useState56[1];
+  var _useState57 = 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;
@@ -60466,27 +61005,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);
   }
@@ -60523,14 +61062,14 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // editing. Shapes:
   //   { kind: "open-workspace", workspace }       — sidebar switch
   //   { kind: "cancel-edit" }                     — Cancel button
-  var _useState57 = useState(false),
-    _useState58 = _slicedToArray(_useState57, 2),
-    isDirty = _useState58[0],
-    setIsDirty = _useState58[1];
-  var _useState59 = useState(null),
+  var _useState59 = useState(false),
     _useState60 = _slicedToArray(_useState59, 2),
-    pendingNavigation = _useState60[0],
-    setPendingNavigation = _useState60[1];
+    isDirty = _useState60[0],
+    setIsDirty = _useState60[1];
+  var _useState61 = useState(null),
+    _useState62 = _slicedToArray(_useState61, 2),
+    pendingNavigation = _useState62[0],
+    setPendingNavigation = _useState62[1];
   useEffect(function () {
     if (typeof globalThis !== "undefined") {
       globalThis.__dashboardIsDirty = isDirty;
@@ -60541,6 +61080,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 = useRef(false);
+  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]);
   useEffect(function () {
     isLoadingWorkspaces === false && loadWorkspaces();
     isLoadingMenuItems === false && loadMenuItems();
@@ -60555,9 +61151,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");
       }
     }
@@ -60566,15 +61162,15 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
 
   // ─── Listen for workspace:saved broadcasts (MCP tools, popouts) ──
   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);
       }
     };
@@ -60606,9 +61202,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // closing the builder modal — this listener only opens Settings.
   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);
     };
@@ -60628,10 +61224,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 = useState(null),
-    _useState62 = _slicedToArray(_useState61, 2),
-    pendingOpenWorkspaceId = _useState62[0],
-    setPendingOpenWorkspaceId = _useState62[1];
+  var _useState63 = useState(null),
+    _useState64 = _slicedToArray(_useState63, 2),
+    pendingOpenWorkspaceId = _useState64[0],
+    setPendingOpenWorkspaceId = _useState64[1];
   useEffect(function () {
     var handler = function handler(e) {
       var _e$detail2;
@@ -60659,30 +61255,30 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
 
   // ─── Load recents on mount ───────────────────────────────────────
   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) ──────────────────────────────────
   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 ─────────────────────────────────
   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) {
@@ -60691,7 +61287,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]);
@@ -60704,35 +61300,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);
@@ -60740,22 +61336,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);
     }
@@ -60882,8 +61478,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);
       });
     }
@@ -61258,10 +61854,10 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   }
 
   // ─── Page State ──────────────────────────────────────────────────
-  var _useState63 = useState(null),
-    _useState64 = _slicedToArray(_useState63, 2),
-    activePageId = _useState64[0],
-    setActivePageId = _useState64[1];
+  var _useState65 = 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().
@@ -61295,9 +61891,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   // Listen for programmatic page switches via DashboardActionsApi
   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) {
@@ -61887,70 +62483,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);
   }
@@ -61958,38 +62554,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);
     }
   }
@@ -62308,7 +62904,36 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
           onSaveBindings: handleBulkProviderBindings,
           onSaveListeners: handleBulkListenerBindings,
           onSaveUserPrefs: handleBulkUserPrefs,
+          onSkip: function onSkip() {
+            // Suppress the unresolved-providers banner for this
+            // workspace (session-scoped). Matches the banner's own
+            // X-dismiss behavior so the user has parity between
+            // "dismiss from the banner" and "dismiss from the
+            // modal footer."
+            if ((workspaceSelected === null || workspaceSelected === void 0 ? void 0 : workspaceSelected.id) != null) {
+              setDismissedUnresolvedForWorkspace(function (prev) {
+                return new Set([].concat(_toConsumableArray(prev), [workspaceSelected.id]));
+              });
+            }
+          },
           initialTab: "providers"
+        }), /*#__PURE__*/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__*/jsx(DashCommandPalette, {