@trops/dash-core 0.1.116 → 0.1.118

package/dist/index.js

@@ -10,13 +10,13 @@ var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
 var jsxRuntime = require('react/jsx-runtime');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react = require('@headlessui/react');
 var solid = require('@heroicons/react/20/solid');
 var clsx = require('clsx');
 var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _inherits = require('@babel/runtime/helpers/inherits');
@@ -3291,6 +3291,642 @@ var FolderDetail = function FolderDetail(_ref) {
   });
 };
 
+var OptionCard$1 = function OptionCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    className: "w-full flex flex-row items-center gap-4 p-4 rounded-lg text-left transition-all bg-gray-700/50 hover:bg-gray-700 hover:ring-1 hover:ring-gray-600",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 h-8 w-8 flex items-center justify-center text-gray-400",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "h-5 w-5"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium text-gray-200",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs text-gray-500 mt-0.5",
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 ml-auto text-gray-600",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "chevron-right",
+        className: "h-3 w-3"
+      })
+    })]
+  });
+};
+var CreationMethodPicker = function CreationMethodPicker(_ref2) {
+  var onSelect = _ref2.onSelect;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-row w-full h-full",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
+        title: "New Dashboard",
+        padding: false,
+        textColor: "text-gray-300"
+      }), /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-base font-normal text-gray-400",
+        children: "Choose how you'd like to create your new dashboard."
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col w-2/3 p-6 pt-10 space-y-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "plus",
+        title: "New Dashboard",
+        description: "Start from a blank template and customize your layout",
+        onClick: function onClick() {
+          return onSelect("template");
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "file-zipper",
+        title: "Import from File",
+        description: "Import a dashboard from a .zip file on your computer",
+        onClick: function onClick() {
+          return onSelect("import");
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$1, {
+        icon: "compass",
+        title: "Search Registry",
+        description: "Browse and install dashboards from the online registry",
+        onClick: function onClick() {
+          return onSelect("registry");
+        }
+      })]
+    })]
+  });
+};
+
+var StarRating = function StarRating(_ref) {
+  var appId = _ref.appId,
+    packageName = _ref.packageName,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? true : _ref$interactive;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverRating = _useState4[0],
+    setHoverRating = _useState4[1];
+  var _useState5 = React.useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  React.useEffect(function () {
+    var _window$mainApi;
+    if (!appId || !packageName) return;
+    var cancelled = false;
+    setLoading(true);
+    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardRatings) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardRating(appId, packageName).then(function (result) {
+      if (!cancelled && result !== null && result !== void 0 && result.rating) {
+        setRating(result.rating);
+      }
+    })["catch"](function () {})["finally"](function () {
+      if (!cancelled) setLoading(false);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [appId, packageName]);
+  function handleClick(_x) {
+    return _handleClick.apply(this, arguments);
+  }
+  function _handleClick() {
+    _handleClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+      var newRating, _window$mainApi2;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!interactive || !appId || !packageName)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            newRating = value === rating ? 0 : value;
+            setRating(newRating);
+            _context.prev = 2;
+            _context.next = 3;
+            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.dashboardRatings) === null || _window$mainApi2 === void 0 ? void 0 : _window$mainApi2.saveDashboardRating(appId, packageName, newRating);
+          case 3:
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _context["catch"](2);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4]]);
+    }));
+    return _handleClick.apply(this, arguments);
+  }
+  if (loading) return null;
+  var displayRating = hoverRating || rating;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex items-center gap-0.5",
+    onMouseLeave: function onMouseLeave() {
+      return setHoverRating(0);
+    },
+    children: [1, 2, 3, 4, 5].map(function (star) {
+      return /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: !interactive,
+        onClick: function onClick() {
+          return handleClick(star);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return interactive && setHoverRating(star);
+        },
+        className: "p-0.5 transition-colors ".concat(interactive ? "cursor-pointer hover:scale-110" : "cursor-default"),
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: star <= displayRating ? "star" : ["far", "star"],
+          className: "h-3.5 w-3.5 ".concat(star <= displayRating ? "text-yellow-400" : currentTheme["text-primary-medium"] || "text-gray-500")
+        })
+      }, star);
+    })
+  });
+};
+
+var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
+  var dashboardPackage = _ref.dashboardPackage,
+    appId = _ref.appId;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    preview = _useState2[0],
+    setPreview = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewLoading = _useState4[0],
+    setPreviewLoading = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isInstalling = _useState6[0],
+    setIsInstalling = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    installResult = _useState8[0],
+    setInstallResult = _useState8[1];
+  var pkg = dashboardPackage;
+  if (!pkg) return null;
+
+  // Load preview data on mount
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  React.useEffect(function () {
+    var _window$mainApi;
+    if (!pkg.name) return;
+    var cancelled = false;
+    setPreviewLoading(true);
+    setPreview(null);
+    setInstallResult(null);
+    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardConfig) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardPreview(pkg.name).then(function (result) {
+      if (!cancelled) setPreview(result);
+    })["catch"](function (err) {
+    })["finally"](function () {
+      if (!cancelled) setPreviewLoading(false);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [pkg.name]);
+  function handleInstall() {
+    return _handleInstall.apply(this, arguments);
+  }
+  function _handleInstall() {
+    _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _result$workspace, result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!appId || !pkg.name)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setIsInstalling(true);
+            setInstallResult(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.dashboardConfig.installDashboardFromRegistry(appId, pkg.name);
+          case 3:
+            result = _context.sent;
+            setInstallResult({
+              status: result !== null && result !== void 0 && result.success ? "success" : "error",
+              message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
+            });
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setInstallResult({
+              status: "error",
+              message: _t.message || "Failed to install dashboard."
+            });
+          case 5:
+            _context.prev = 5;
+            setIsInstalling(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return _handleInstall.apply(this, arguments);
+  }
+  var compatibility = preview === null || preview === void 0 ? void 0 : preview.compatibility;
+  var widgetDeps = (preview === null || preview === void 0 ? void 0 : preview.widgets) || pkg.widgets || [];
+  var providers = (preview === null || preview === void 0 ? void 0 : preview.providers) || [];
+  var wiring = (preview === null || preview === void 0 ? void 0 : preview.wiring) || [];
+  function getCompatIcon(status) {
+    if (status === "installed") return {
+      icon: "circle-check",
+      color: "text-green-400"
+    };
+    if (status === "available") return {
+      icon: "circle-down",
+      color: "text-blue-400"
+    };
+    return {
+      icon: "circle-xmark",
+      color: "text-red-400"
+    };
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: pkg.icon || "clone",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+            title: pkg.displayName || pkg.name,
+            padding: false
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", pkg.author || "Unknown"]
+            }), pkg.version && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", pkg.version]
+            })]
+          })]
+        })]
+      }), appId && /*#__PURE__*/jsxRuntime.jsx(StarRating, {
+        appId: appId,
+        packageName: pkg.name,
+        interactive: false
+      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), pkg.description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-sm",
+        children: pkg.description
+      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: pkg.tags.map(function (tag) {
+          return /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED WIDGETS"
+        }), previewLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2 py-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs opacity-50",
+            children: "Checking compatibility..."
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1.5",
+          children: widgetDeps.map(function (w, idx) {
+            var _compatibility$widget;
+            var status = (compatibility === null || compatibility === void 0 || (_compatibility$widget = compatibility.widgets) === null || _compatibility$widget === void 0 ? void 0 : _compatibility$widget[w.name || w.packageName]) || "unknown";
+            var compat = getCompatIcon(status);
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"], " flex items-center gap-2"),
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: compat.icon,
+                className: "h-3.5 w-3.5 ".concat(compat.color)
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm",
+                children: w.displayName || w.name || w.packageName
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs opacity-40 ml-auto",
+                children: status === "installed" ? "Installed" : status === "available" ? "Will install" : "Unavailable"
+              })]
+            }, idx);
+          })
+        })]
+      }), providers.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED PROVIDERS"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1",
+          children: providers.map(function (p, idx) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
+                children: p.type
+              }), p.required && /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-[10px] opacity-40",
+                children: "Required"
+              })]
+            }, idx);
+          })
+        })]
+      }), wiring.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "EVENT WIRING"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1",
+          children: wiring.map(function (w, idx) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "text-xs p-2 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "font-medium",
+                children: w.from || "Source"
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "arrow-right",
+                className: "h-2.5 w-2.5 mx-1.5 opacity-50"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "font-medium",
+                children: w.to || "Target"
+              }), w.event && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                className: "opacity-50 ml-1.5",
+                children: ["(", w.event, ")"]
+              })]
+            }, idx);
+          })
+        })]
+      }), installResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "p-2 rounded border ".concat(installResult.status === "success" ? "bg-green-900/20 border-green-700" : "bg-red-900/30 border-red-700"),
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: installResult.status === "success" ? "circle-check" : "circle-xmark",
+            className: "h-4 w-4 ".concat(installResult.status === "success" ? "text-green-400" : "text-red-400")
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm ".concat(installResult.status === "error" ? "text-red-400" : ""),
+            children: installResult.message
+          })]
+        })
+      })]
+    }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "success" && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: isInstalling ? "Installing..." : "Install Dashboard",
+        bgColor: "bg-blue-600",
+        hoverBackgroundColor: isInstalling ? "" : "hover:bg-blue-700",
+        textSize: "text-sm",
+        padding: "py-1.5 px-4",
+        onClick: handleInstall,
+        disabled: isInstalling
+      })
+    })]
+  });
+};
+
+var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
+  var onBack = _ref.onBack,
+    appId = _ref.appId;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    packages = _useState2[0],
+    setPackages = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedPackageName = _useState0[0],
+    setSelectedPackageName = _useState0[1];
+  var search = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+      var _window$mainApi;
+      var result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.registry) !== null && _window$mainApi !== void 0 && _window$mainApi.searchDashboards) {
+              _context.next = 1;
+              break;
+            }
+            setPackages([]);
+            return _context.abrupt("return");
+          case 1:
+            setIsLoading(true);
+            setError(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.registry.searchDashboards(query || "", {});
+          case 3:
+            result = _context.sent;
+            setPackages((result === null || result === void 0 ? void 0 : result.packages) || []);
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setError(_t.message || "Failed to search dashboard registry");
+            setPackages([]);
+          case 5:
+            _context.prev = 5;
+            setIsLoading(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+
+  // Debounce search on query changes
+  React.useEffect(function () {
+    var timer = setTimeout(function () {
+      search(searchQuery);
+    }, 300);
+    return function () {
+      return clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+  var retry = function retry() {
+    return search(searchQuery);
+  };
+  var selectedPackage = selectedPackageName ? packages.find(function (p) {
+    return p.name === selectedPackageName;
+  }) : null;
+
+  // If a package is selected, show its detail inline
+  if (selectedPackage) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setSelectedPackageName(null);
+          },
+          className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "arrow-left",
+            className: "h-3 w-3"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "Back"
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(RegistryDashboardDetail, {
+        dashboardPackage: selectedPackage,
+        appId: appId
+      })]
+    });
+  }
+
+  // Package list view
+  var listBody;
+  if (isLoading) {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-center py-12",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "text-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+          className: "text-sm opacity-50",
+          children: "Loading dashboards..."
+        })]
+      })
+    });
+  } else if (error) {
+    listBody = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "px-4 py-8 text-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm text-red-400 mb-3",
+        children: error
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Retry",
+        bgColor: "bg-gray-700",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        textSize: "text-sm",
+        padding: "py-1 px-3",
+        onClick: retry
+      })]
+    });
+  } else if (packages.length === 0) {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "px-4 py-8 text-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm opacity-50",
+        children: searchQuery ? "No dashboards match your search." : "No dashboard packages available."
+      })
+    });
+  } else {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "space-y-1",
+      children: packages.map(function (pkg) {
+        var widgetCount = (pkg.widgets || []).length;
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: pkg.icon || "clone",
+            className: "h-3.5 w-3.5"
+          }),
+          onClick: function onClick() {
+            return setSelectedPackageName(pkg.name);
+          },
+          badge: widgetCount > 0 ? "".concat(widgetCount) : undefined,
+          children: pkg.displayName || pkg.name
+        }, pkg.name);
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 pt-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "Back"
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 py-3",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search dashboards...",
+        inputClassName: "py-1.5 text-xs"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 min-h-0 overflow-y-auto px-2",
+      children: listBody
+    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-shrink-0 px-4 py-2 text-[10px] opacity-40 border-t border-white/10",
+      children: [packages.length, " dashboard", packages.length !== 1 ? "s" : ""]
+    })]
+  });
+};
+
 var LayoutManagerModal = function LayoutManagerModal(_ref) {
   var open = _ref.open,
     setIsOpen = _ref.setIsOpen,
@@ -3298,52 +3934,59 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     _ref$menuItems = _ref.menuItems,
     menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
     _ref$onSaveMenuItem = _ref.onSaveMenuItem,
-    onSaveMenuItem = _ref$onSaveMenuItem === void 0 ? null : _ref$onSaveMenuItem;
+    onSaveMenuItem = _ref$onSaveMenuItem === void 0 ? null : _ref$onSaveMenuItem,
+    appId = _ref.appId,
+    onReloadWorkspaces = _ref.onReloadWorkspaces;
   var _useContext = React.useContext(DashReact.ThemeContext),
     themes = _useContext.themes,
     appThemeKey = _useContext.themeKey;
-  var _useState = React.useState(""),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    dashboardName = _useState2[0],
-    setDashboardName = _useState2[1];
-  var _useState3 = React.useState(layoutTemplates[0]),
+    creationMethod = _useState2[0],
+    setCreationMethod = _useState2[1];
+  var _useState3 = React.useState(""),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedTemplate = _useState4[0],
-    setSelectedTemplate = _useState4[1];
-  var _useState5 = React.useState(0),
+    dashboardName = _useState4[0],
+    setDashboardName = _useState4[1];
+  var _useState5 = React.useState(layoutTemplates[0]),
     _useState6 = _slicedToArray(_useState5, 2),
-    activeStep = _useState6[0],
-    setActiveStep = _useState6[1];
-  var _useState7 = React.useState(null),
+    selectedTemplate = _useState6[0],
+    setSelectedTemplate = _useState6[1];
+  var _useState7 = React.useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectedMenuId = _useState8[0],
-    setSelectedMenuId = _useState8[1];
+    activeStep = _useState8[0],
+    setActiveStep = _useState8[1];
   var _useState9 = React.useState(null),
     _useState0 = _slicedToArray(_useState9, 2),
-    selectedThemeKey = _useState0[0],
-    setSelectedThemeKey = _useState0[1];
-  var _useState1 = React.useState([]),
+    selectedMenuId = _useState0[0],
+    setSelectedMenuId = _useState0[1];
+  var _useState1 = React.useState(null),
     _useState10 = _slicedToArray(_useState1, 2),
-    localMenuItems = _useState10[0],
-    setLocalMenuItems = _useState10[1];
+    selectedThemeKey = _useState10[0],
+    setSelectedThemeKey = _useState10[1];
+  var _useState11 = React.useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    localMenuItems = _useState12[0],
+    setLocalMenuItems = _useState12[1];
 
   // Inline new-folder form state
-  var _useState11 = React.useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    isCreatingFolder = _useState12[0],
-    setIsCreatingFolder = _useState12[1];
-  var _useState13 = React.useState(""),
+  var _useState13 = React.useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    newFolderName = _useState14[0],
-    setNewFolderName = _useState14[1];
-  var _useState15 = React.useState(null),
+    isCreatingFolder = _useState14[0],
+    setIsCreatingFolder = _useState14[1];
+  var _useState15 = React.useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
-    newFolderIcon = _useState16[0],
-    setNewFolderIcon = _useState16[1];
+    newFolderName = _useState16[0],
+    setNewFolderName = _useState16[1];
+  var _useState17 = React.useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    newFolderIcon = _useState18[0],
+    setNewFolderIcon = _useState18[1];
 
   // Reset state when modal opens
   React.useEffect(function () {
     if (open) {
+      setCreationMethod(null);
       setDashboardName("");
       setActiveStep(0);
       setLocalMenuItems(menuItems || []);
@@ -3391,16 +4034,85 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     setSelectedTemplate(template);
     setActiveStep(2);
   }
+  function handleMethodSelect(method) {
+    if (method === "import") {
+      handleImportFromFile();
+    } else {
+      setCreationMethod(method);
+    }
+  }
+  function handleImportFromFile() {
+    return _handleImportFromFile.apply(this, arguments);
+  }
+  function _handleImportFromFile() {
+    _handleImportFromFile = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            handleClose();
+            _context.prev = 1;
+            _context.next = 2;
+            return window.mainApi.dashboardConfig.importDashboardConfig(appId);
+          case 2:
+            result = _context.sent;
+            if (result && !result.canceled && result.success) {
+              onReloadWorkspaces && onReloadWorkspaces();
+            }
+            _context.next = 4;
+            break;
+          case 3:
+            _context.prev = 3;
+            _context["catch"](1);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return _handleImportFromFile.apply(this, arguments);
+  }
   var selectedFolder = localMenuItems.find(function (item) {
     return item.id === selectedMenuId;
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(DashReact.Modal, {
-    isOpen: open,
-    setIsOpen: setIsOpen,
-    width: "w-11/12 xl:w-5/6",
-    height: "h-5/6",
-    scrollable: false,
-    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
+
+  // ─── Render body based on creationMethod ─────────────────────────
+  function renderBody() {
+    if (creationMethod === null) {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
+        backgroundColor: "bg-slate-800",
+        padding: false,
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
+          scrollable: false,
+          className: "h-full",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "h-full p-6 pb-0",
+            children: /*#__PURE__*/jsxRuntime.jsx(CreationMethodPicker, {
+              onSelect: handleMethodSelect
+            })
+          })
+        })
+      });
+    }
+    if (creationMethod === "registry") {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
+        backgroundColor: "bg-slate-800",
+        padding: false,
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
+          scrollable: false,
+          className: "h-full",
+          children: /*#__PURE__*/jsxRuntime.jsx(DiscoverDashboardsDetail, {
+            onBack: function onBack() {
+              return setCreationMethod(null);
+            },
+            appId: appId
+          })
+        })
+      });
+    }
+
+    // creationMethod === "template" — existing 4-step wizard
+    return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
       backgroundColor: "bg-slate-800",
       padding: false,
       children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
@@ -3658,13 +4370,45 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
           })]
         })
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
+    });
+  }
+
+  // ─── Render footer based on creationMethod ───────────────────────
+  function renderFooter() {
+    // Picker screen: just Cancel
+    if (creationMethod === null) {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex flex-row space-x-2",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            onClick: handleClose,
+            title: "Cancel",
+            textSize: "text-base xl:text-lg",
+            padding: "py-2 px-4",
+            backgroundColor: "bg-gray-700",
+            textColor: "text-gray-300",
+            hoverTextColor: "hover:text-gray-100",
+            hoverBackgroundColor: "hover:bg-gray-600"
+          })
+        })
+      });
+    }
+
+    // Registry screen: no footer (DiscoverDashboardsDetail has its own back button)
+    if (creationMethod === "registry") {
+      return null;
+    }
+
+    // Template wizard footer
+    return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row space-x-2",
         children: [activeStep === 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-            onClick: handleClose,
-            title: "Cancel",
+            onClick: function onClick() {
+              return setCreationMethod(null);
+            },
+            title: "Back",
             textSize: "text-base xl:text-lg",
             padding: "py-2 px-4",
             backgroundColor: "bg-gray-700",
@@ -3757,7 +4501,15 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
           })]
         })]
       })
-    })]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(DashReact.Modal, {
+    isOpen: open,
+    setIsOpen: setIsOpen,
+    width: "w-11/12 xl:w-5/6",
+    height: "h-5/6",
+    scrollable: false,
+    children: [renderBody(), renderFooter()]
   });
 };
 
@@ -30660,102 +31412,6 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
   });
 };
 
-var StarRating = function StarRating(_ref) {
-  var appId = _ref.appId,
-    packageName = _ref.packageName,
-    _ref$interactive = _ref.interactive,
-    interactive = _ref$interactive === void 0 ? true : _ref$interactive;
-  var _useContext = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    rating = _useState2[0],
-    setRating = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hoverRating = _useState4[0],
-    setHoverRating = _useState4[1];
-  var _useState5 = React.useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    loading = _useState6[0],
-    setLoading = _useState6[1];
-  React.useEffect(function () {
-    var _window$mainApi;
-    if (!appId || !packageName) return;
-    var cancelled = false;
-    setLoading(true);
-    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardRatings) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardRating(appId, packageName).then(function (result) {
-      if (!cancelled && result !== null && result !== void 0 && result.rating) {
-        setRating(result.rating);
-      }
-    })["catch"](function () {})["finally"](function () {
-      if (!cancelled) setLoading(false);
-    });
-    return function () {
-      cancelled = true;
-    };
-  }, [appId, packageName]);
-  function handleClick(_x) {
-    return _handleClick.apply(this, arguments);
-  }
-  function _handleClick() {
-    _handleClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
-      var newRating, _window$mainApi2;
-      return _regeneratorRuntime.wrap(function (_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(!interactive || !appId || !packageName)) {
-              _context.next = 1;
-              break;
-            }
-            return _context.abrupt("return");
-          case 1:
-            newRating = value === rating ? 0 : value;
-            setRating(newRating);
-            _context.prev = 2;
-            _context.next = 3;
-            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.dashboardRatings) === null || _window$mainApi2 === void 0 ? void 0 : _window$mainApi2.saveDashboardRating(appId, packageName, newRating);
-          case 3:
-            _context.next = 5;
-            break;
-          case 4:
-            _context.prev = 4;
-            _context["catch"](2);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 4]]);
-    }));
-    return _handleClick.apply(this, arguments);
-  }
-  if (loading) return null;
-  var displayRating = hoverRating || rating;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex items-center gap-0.5",
-    onMouseLeave: function onMouseLeave() {
-      return setHoverRating(0);
-    },
-    children: [1, 2, 3, 4, 5].map(function (star) {
-      return /*#__PURE__*/jsxRuntime.jsx("button", {
-        type: "button",
-        disabled: !interactive,
-        onClick: function onClick() {
-          return handleClick(star);
-        },
-        onMouseEnter: function onMouseEnter() {
-          return interactive && setHoverRating(star);
-        },
-        className: "p-0.5 transition-colors ".concat(interactive ? "cursor-pointer hover:scale-110" : "cursor-default"),
-        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: star <= displayRating ? "star" : ["far", "star"],
-          className: "h-3.5 w-3.5 ".concat(star <= displayRating ? "text-yellow-400" : currentTheme["text-primary-medium"] || "text-gray-500")
-        })
-      }, star);
-    })
-  });
-};
-
 var DASHBOARD_TAGS = ["productivity", "monitoring", "analytics", "communication", "developer", "sales", "marketing", "finance", "project-management", "social", "news", "utilities"];
 
 /**
@@ -31845,471 +32501,6 @@ var DashboardDetail = function DashboardDetail(_ref2) {
   });
 };
 
-var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
-  var dashboardPackage = _ref.dashboardPackage,
-    appId = _ref.appId;
-  var _useContext = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
-    grow: false
-  });
-  var _useState = React.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    preview = _useState2[0],
-    setPreview = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    previewLoading = _useState4[0],
-    setPreviewLoading = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isInstalling = _useState6[0],
-    setIsInstalling = _useState6[1];
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    installResult = _useState8[0],
-    setInstallResult = _useState8[1];
-  var pkg = dashboardPackage;
-  if (!pkg) return null;
-
-  // Load preview data on mount
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  React.useEffect(function () {
-    var _window$mainApi;
-    if (!pkg.name) return;
-    var cancelled = false;
-    setPreviewLoading(true);
-    setPreview(null);
-    setInstallResult(null);
-    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardConfig) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardPreview(pkg.name).then(function (result) {
-      if (!cancelled) setPreview(result);
-    })["catch"](function (err) {
-    })["finally"](function () {
-      if (!cancelled) setPreviewLoading(false);
-    });
-    return function () {
-      cancelled = true;
-    };
-  }, [pkg.name]);
-  function handleInstall() {
-    return _handleInstall.apply(this, arguments);
-  }
-  function _handleInstall() {
-    _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _result$workspace, result, _t;
-      return _regeneratorRuntime.wrap(function (_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(!appId || !pkg.name)) {
-              _context.next = 1;
-              break;
-            }
-            return _context.abrupt("return");
-          case 1:
-            setIsInstalling(true);
-            setInstallResult(null);
-            _context.prev = 2;
-            _context.next = 3;
-            return window.mainApi.dashboardConfig.installDashboardFromRegistry(appId, pkg.name);
-          case 3:
-            result = _context.sent;
-            setInstallResult({
-              status: result !== null && result !== void 0 && result.success ? "success" : "error",
-              message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
-            });
-            _context.next = 5;
-            break;
-          case 4:
-            _context.prev = 4;
-            _t = _context["catch"](2);
-            setInstallResult({
-              status: "error",
-              message: _t.message || "Failed to install dashboard."
-            });
-          case 5:
-            _context.prev = 5;
-            setIsInstalling(false);
-            return _context.finish(5);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 4, 5, 6]]);
-    }));
-    return _handleInstall.apply(this, arguments);
-  }
-  var compatibility = preview === null || preview === void 0 ? void 0 : preview.compatibility;
-  var widgetDeps = (preview === null || preview === void 0 ? void 0 : preview.widgets) || pkg.widgets || [];
-  var providers = (preview === null || preview === void 0 ? void 0 : preview.providers) || [];
-  var wiring = (preview === null || preview === void 0 ? void 0 : preview.wiring) || [];
-  function getCompatIcon(status) {
-    if (status === "installed") return {
-      icon: "circle-check",
-      color: "text-green-400"
-    };
-    if (status === "available") return {
-      icon: "circle-down",
-      color: "text-blue-400"
-    };
-    return {
-      icon: "circle-xmark",
-      color: "text-red-400"
-    };
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row items-center gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: pkg.icon || "clone",
-            className: "h-5 w-5"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-            title: pkg.displayName || pkg.name,
-            padding: false
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2 mt-0.5",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-sm opacity-60",
-              children: ["by ", pkg.author || "Unknown"]
-            }), pkg.version && /*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
-              children: ["v", pkg.version]
-            })]
-          })]
-        })]
-      }), appId && /*#__PURE__*/jsxRuntime.jsx(StarRating, {
-        appId: appId,
-        packageName: pkg.name,
-        interactive: false
-      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
-        className: currentTheme["border-primary-medium"]
-      }), pkg.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-sm",
-        children: pkg.description
-      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex flex-wrap gap-1",
-        children: pkg.tags.map(function (tag) {
-          return /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
-            children: tag
-          }, tag);
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "REQUIRED WIDGETS"
-        }), previewLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 py-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-xs opacity-50",
-            children: "Checking compatibility..."
-          })]
-        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "space-y-1.5",
-          children: widgetDeps.map(function (w, idx) {
-            var _compatibility$widget;
-            var status = (compatibility === null || compatibility === void 0 || (_compatibility$widget = compatibility.widgets) === null || _compatibility$widget === void 0 ? void 0 : _compatibility$widget[w.name || w.packageName]) || "unknown";
-            var compat = getCompatIcon(status);
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"], " flex items-center gap-2"),
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: compat.icon,
-                className: "h-3.5 w-3.5 ".concat(compat.color)
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm",
-                children: w.displayName || w.name || w.packageName
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs opacity-40 ml-auto",
-                children: status === "installed" ? "Installed" : status === "available" ? "Will install" : "Unavailable"
-              })]
-            }, idx);
-          })
-        })]
-      }), providers.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "REQUIRED PROVIDERS"
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "space-y-1",
-          children: providers.map(function (p, idx) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex items-center gap-2",
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
-                children: p.type
-              }), p.required && /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-[10px] opacity-40",
-                children: "Required"
-              })]
-            }, idx);
-          })
-        })]
-      }), wiring.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "EVENT WIRING"
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "space-y-1",
-          children: wiring.map(function (w, idx) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "text-xs p-2 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
-              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "font-medium",
-                children: w.from || "Source"
-              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "arrow-right",
-                className: "h-2.5 w-2.5 mx-1.5 opacity-50"
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "font-medium",
-                children: w.to || "Target"
-              }), w.event && /*#__PURE__*/jsxRuntime.jsxs("span", {
-                className: "opacity-50 ml-1.5",
-                children: ["(", w.event, ")"]
-              })]
-            }, idx);
-          })
-        })]
-      }), installResult && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "p-2 rounded border ".concat(installResult.status === "success" ? "bg-green-900/20 border-green-700" : "bg-red-900/30 border-red-700"),
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: installResult.status === "success" ? "circle-check" : "circle-xmark",
-            className: "h-4 w-4 ".concat(installResult.status === "success" ? "text-green-400" : "text-red-400")
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-sm ".concat(installResult.status === "error" ? "text-red-400" : ""),
-            children: installResult.message
-          })]
-        })
-      })]
-    }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "success" && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: isInstalling ? "Installing..." : "Install Dashboard",
-        bgColor: "bg-blue-600",
-        hoverBackgroundColor: isInstalling ? "" : "hover:bg-blue-700",
-        textSize: "text-sm",
-        padding: "py-1.5 px-4",
-        onClick: handleInstall,
-        disabled: isInstalling
-      })
-    })]
-  });
-};
-
-var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
-  var onBack = _ref.onBack,
-    appId = _ref.appId;
-  var _useContext = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
-    grow: false
-  });
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    packages = _useState2[0],
-    setPackages = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
-  var _useState7 = React.useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    searchQuery = _useState8[0],
-    setSearchQuery = _useState8[1];
-  var _useState9 = React.useState(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    selectedPackageName = _useState0[0],
-    setSelectedPackageName = _useState0[1];
-  var search = React.useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-      var _window$mainApi;
-      var result, _t;
-      return _regeneratorRuntime.wrap(function (_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.registry) !== null && _window$mainApi !== void 0 && _window$mainApi.searchDashboards) {
-              _context.next = 1;
-              break;
-            }
-            setPackages([]);
-            return _context.abrupt("return");
-          case 1:
-            setIsLoading(true);
-            setError(null);
-            _context.prev = 2;
-            _context.next = 3;
-            return window.mainApi.registry.searchDashboards(query || "", {});
-          case 3:
-            result = _context.sent;
-            setPackages((result === null || result === void 0 ? void 0 : result.packages) || []);
-            _context.next = 5;
-            break;
-          case 4:
-            _context.prev = 4;
-            _t = _context["catch"](2);
-            setError(_t.message || "Failed to search dashboard registry");
-            setPackages([]);
-          case 5:
-            _context.prev = 5;
-            setIsLoading(false);
-            return _context.finish(5);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 4, 5, 6]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), []);
-
-  // Debounce search on query changes
-  React.useEffect(function () {
-    var timer = setTimeout(function () {
-      search(searchQuery);
-    }, 300);
-    return function () {
-      return clearTimeout(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchQuery]);
-  var retry = function retry() {
-    return search(searchQuery);
-  };
-  var selectedPackage = selectedPackageName ? packages.find(function (p) {
-    return p.name === selectedPackageName;
-  }) : null;
-
-  // If a package is selected, show its detail inline
-  if (selectedPackage) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col flex-1 min-h-0",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-shrink-0 px-4 pt-4",
-        children: /*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
-          onClick: function onClick() {
-            return setSelectedPackageName(null);
-          },
-          className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "arrow-left",
-            className: "h-3 w-3"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: "Back"
-          })]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(RegistryDashboardDetail, {
-        dashboardPackage: selectedPackage,
-        appId: appId
-      })]
-    });
-  }
-
-  // Package list view
-  var listBody;
-  if (isLoading) {
-    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-center py-12",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "text-center",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-          className: "text-sm opacity-50",
-          children: "Loading dashboards..."
-        })]
-      })
-    });
-  } else if (error) {
-    listBody = /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "px-4 py-8 text-center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-        className: "text-sm text-red-400 mb-3",
-        children: error
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Retry",
-        bgColor: "bg-gray-700",
-        hoverBackgroundColor: "hover:bg-gray-600",
-        textSize: "text-sm",
-        padding: "py-1 px-3",
-        onClick: retry
-      })]
-    });
-  } else if (packages.length === 0) {
-    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "px-4 py-8 text-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-        className: "text-sm opacity-50",
-        children: searchQuery ? "No dashboards match your search." : "No dashboard packages available."
-      })
-    });
-  } else {
-    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "space-y-1",
-      children: packages.map(function (pkg) {
-        var widgetCount = (pkg.widgets || []).length;
-        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
-          icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: pkg.icon || "clone",
-            className: "h-3.5 w-3.5"
-          }),
-          onClick: function onClick() {
-            return setSelectedPackageName(pkg.name);
-          },
-          badge: widgetCount > 0 ? "".concat(widgetCount) : undefined,
-          children: pkg.displayName || pkg.name
-        }, pkg.name);
-      })
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 px-4 pt-4",
-      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
-        type: "button",
-        onClick: onBack,
-        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "arrow-left",
-          className: "h-3 w-3"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          children: "Back"
-        })]
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 px-4 py-3",
-      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: "Search dashboards...",
-        inputClassName: "py-1.5 text-xs"
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-1 min-h-0 overflow-y-auto px-2",
-      children: listBody
-    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0 px-4 py-2 text-[10px] opacity-40 border-t border-white/10",
-      children: [packages.length, " dashboard", packages.length !== 1 ? "s" : ""]
-    })]
-  });
-};
-
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DashboardsSection = function DashboardsSection(_ref) {
@@ -39603,13 +39794,57 @@ var FooterPopover = function FooterPopover(_ref2) {
     onOpenSettings = _ref2.onOpenSettings,
     onSignIn = _ref2.onSignIn,
     onSignOut = _ref2.onSignOut;
+  var buttonRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    doNotDisturb = _useState2[0],
+    setDoNotDisturb = _useState2[1];
   var displayName = authStatus === "authenticated" && authProfile ? authProfile.displayName || authProfile.username : "Account";
+
+  // Load initial DND state
+  React.useEffect(function () {
+    var _window$mainApi;
+    var timeout = new Promise(function (_, reject) {
+      return setTimeout(function () {
+        return reject(new Error("timeout"));
+      }, 2000);
+    });
+    var fetch = (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.notifications) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.getPreferences();
+    if (fetch) {
+      Promise.race([fetch, timeout]).then(function (prefs) {
+        if (prefs) setDoNotDisturb(prefs.doNotDisturb);
+      })["catch"](function () {});
+    }
+  }, []);
+
+  // Sync when toggled from macOS menu
+  React.useEffect(function () {
+    var _window$mainApi2, _window$mainApi2$onDn;
+    var cleanup = (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.notifications) === null || _window$mainApi2 === void 0 || (_window$mainApi2$onDn = _window$mainApi2.onDndChanged) === null || _window$mainApi2$onDn === void 0 ? void 0 : _window$mainApi2$onDn.call(_window$mainApi2, function (dnd) {
+      setDoNotDisturb(dnd);
+    });
+    return function () {
+      if (cleanup) cleanup();
+    };
+  }, []);
+  function handleToggleDnd() {
+    var _window$mainApi3;
+    var newValue = !doNotDisturb;
+    setDoNotDisturb(newValue);
+    (_window$mainApi3 = window.mainApi) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.notifications) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.setGlobal({
+      doNotDisturb: newValue
+    })) === null || _window$mainApi3 === void 0 || _window$mainApi3["catch"](function () {});
+  }
   return /*#__PURE__*/jsxRuntime.jsx(react.Popover, {
     className: "relative",
     children: function children(_ref3) {
-      var close = _ref3.close;
+      var _rect$left;
+      var open = _ref3.open,
+        close = _ref3.close;
+      var rect = open && buttonRef.current ? buttonRef.current.getBoundingClientRect() : null;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs(react.Popover.Button, {
+          ref: buttonRef,
           className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm opacity-80 hover:opacity-100 transition-colors duration-150 cursor-pointer hover:bg-white/5 focus:outline-none",
           title: collapsed ? displayName : undefined,
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -39619,15 +39854,28 @@ var FooterPopover = function FooterPopover(_ref2) {
             className: "flex-1 text-left truncate",
             children: displayName
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx(react.Transition, {
+        }), /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsxRuntime.jsxs(react.Transition, {
+          show: open,
           enter: "transition ease-out duration-100",
           enterFrom: "transform opacity-0 scale-95",
           enterTo: "transform opacity-100 scale-100",
           leave: "transition ease-in duration-75",
           leaveFrom: "transform opacity-100 scale-100",
           leaveTo: "transform opacity-0 scale-95",
-          children: /*#__PURE__*/jsxRuntime.jsx(react.Popover.Panel, {
-            className: "absolute bottom-full left-0 mb-2 w-52 rounded-lg border border-white/10 bg-neutral-900 shadow-xl z-50",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "fixed inset-0",
+            style: {
+              zIndex: 9998
+            },
+            onClick: close
+          }), /*#__PURE__*/jsxRuntime.jsx(react.Popover.Panel, {
+            "static": true,
+            className: "fixed w-52 rounded-lg border border-white/10 bg-neutral-900 shadow-xl",
+            style: {
+              zIndex: 9999,
+              left: (_rect$left = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _rect$left !== void 0 ? _rect$left : 0,
+              bottom: rect ? window.innerHeight - rect.top + 8 : 0
+            },
             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "p-1.5 space-y-0.5",
               children: [/*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
@@ -39644,6 +39892,11 @@ var FooterPopover = function FooterPopover(_ref2) {
                   changeThemeVariant(themeVariant === "dark" ? "light" : "dark");
                   close();
                 }
+              }), /*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
+                icon: doNotDisturb ? "bell-slash" : "bell",
+                label: "Do Not Disturb",
+                onClick: handleToggleDnd,
+                active: doNotDisturb
               }), /*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "border-t border-white/10 my-1"
               }), authStatus === "authenticated" ? /*#__PURE__*/jsxRuntime.jsx(PopoverItem, {
@@ -39662,8 +39915,8 @@ var FooterPopover = function FooterPopover(_ref2) {
                 }
               })]
             })
-          })
-        })]
+          })]
+        }), document.body)]
       });
     }
   });
@@ -39671,16 +39924,21 @@ var FooterPopover = function FooterPopover(_ref2) {
 var PopoverItem = function PopoverItem(_ref4) {
   var icon = _ref4.icon,
     label = _ref4.label,
-    onClick = _ref4.onClick;
+    onClick = _ref4.onClick,
+    _ref4$active = _ref4.active,
+    active = _ref4$active === void 0 ? false : _ref4$active;
   return /*#__PURE__*/jsxRuntime.jsxs("button", {
     type: "button",
     onClick: onClick,
-    className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm text-white/80 hover:text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer",
+    className: "flex items-center w-full gap-2 px-3 py-2 rounded-md text-sm ".concat(active ? "text-white bg-white/10" : "text-white/80 hover:text-white hover:bg-white/10", " transition-colors duration-150 cursor-pointer"),
     children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
       icon: icon,
       className: "h-3.5 w-3.5 flex-shrink-0"
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "flex-1 text-left",
       children: label
+    }), active && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "h-1.5 w-1.5 rounded-full bg-amber-400 flex-shrink-0"
     })]
   });
 };
@@ -40513,9 +40771,21 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
     _useState36 = _slicedToArray(_useState35, 2),
     appSettingsInitialSection = _useState36[0],
     setAppSettingsInitialSection = _useState36[1];
+  var _useState37 = React.useState(null),
+    _useState38 = _slicedToArray(_useState37, 2),
+    appSettingsInitialProvider = _useState38[0],
+    setAppSettingsInitialProvider = _useState38[1];
+  var _useState39 = React.useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    appSettingsCreateProvider = _useState40[0],
+    setAppSettingsCreateProvider = _useState40[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;
+    var createProvider = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     setAppSettingsInitialSection(section);
+    setAppSettingsInitialProvider(providerName);
+    setAppSettingsCreateProvider(createProvider);
     setIsAppSettingsOpen(true);
   }
   function handleProfileUpdated() {
@@ -41296,8 +41566,16 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
       }), !popout && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(AppSettingsModal, {
           isOpen: isAppSettingsOpen,
-          setIsOpen: setIsAppSettingsOpen,
+          setIsOpen: function setIsOpen(open) {
+            setIsAppSettingsOpen(open);
+            if (!open) {
+              setAppSettingsInitialProvider(null);
+              setAppSettingsCreateProvider(false);
+            }
+          },
           initialSection: appSettingsInitialSection,
+          initialProviderName: appSettingsInitialProvider,
+          initialCreateProvider: appSettingsCreateProvider,
           workspaces: workspaceConfig,
           menuItems: menuItems,
           dashApi: dashApi,
@@ -41337,7 +41615,9 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
           setIsOpen: setIsLayoutPickerOpen,
           onCreateWorkspace: handleCreateFromTemplate,
           menuItems: menuItems,
-          onSaveMenuItem: handleSaveNewMenuItem
+          onSaveMenuItem: handleSaveNewMenuItem,
+          appId: credentials === null || credentials === void 0 ? void 0 : credentials.appId,
+          onReloadWorkspaces: loadWorkspaces
         })]
       })]
     }), !popout && /*#__PURE__*/jsxRuntime.jsx(DashCommandPalette, {
@@ -41356,7 +41636,10 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
       },
       providers: (appContext === null || appContext === void 0 ? void 0 : appContext.providers) || {},
       onCreateNewProvider: function onCreateNewProvider() {
-        return openAppSettings("providers");
+        return openAppSettings("providers", null, true);
+      },
+      onOpenProviderDetail: function onOpenProviderDetail(name) {
+        return openAppSettings("providers", name);
       },
       themes: themes || {},
       currentThemeKey: themeKey,