@trops/dash-core 0.1.245 → 0.1.249

package/dist/index.js

@@ -3574,6 +3574,102 @@ var StarRating = function StarRating(_ref) {
   });
 };
 
+var InstallProgressModal = function InstallProgressModal(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    _ref$widgets = _ref.widgets,
+    widgets = _ref$widgets === void 0 ? [] : _ref$widgets,
+    _ref$isComplete = _ref.isComplete,
+    isComplete = _ref$isComplete === void 0 ? false : _ref$isComplete,
+    onDone = _ref.onDone;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+
+  // Prevent dismissal while installation is in progress
+  var guardedSetIsOpen = function guardedSetIsOpen(val) {
+    if (isComplete) setIsOpen(val);
+  };
+  var doneCount = widgets.filter(function (w) {
+    return w.status === "installed" || w.status === "already-installed" || w.status === "failed";
+  }).length;
+  function statusIcon(status) {
+    switch (status) {
+      case "downloading":
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-400 flex-shrink-0"
+        });
+      case "installed":
+      case "already-installed":
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-4 w-4 text-green-400 flex-shrink-0"
+        });
+      case "failed":
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-4 w-4 text-red-400 flex-shrink-0"
+        });
+      default:
+        // pending
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "clock",
+          className: "h-4 w-4 opacity-30 flex-shrink-0"
+        });
+    }
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
+    isOpen: isOpen,
+    setIsOpen: guardedSetIsOpen,
+    width: "w-[440px]",
+    height: "auto",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col rounded-lg overflow-hidden ".concat(panelStyles.backgroundColor || "bg-gray-900", " ").concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-5 pt-5 pb-3",
+        children: /*#__PURE__*/jsxRuntime.jsx("h3", {
+          className: "text-sm font-semibold",
+          children: isComplete ? "Installation Complete" : "Installing widget ".concat(doneCount + 1, " of ").concat(widgets.length, "...")
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-5 pb-3 space-y-1.5 max-h-64 overflow-y-auto",
+        children: widgets.map(function (w, idx) {
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2.5 p-2 rounded ".concat(currentTheme["bg-primary-medium"] || "bg-white/5"),
+              children: [statusIcon(w.status), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm flex-1 truncate",
+                children: w.displayName
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-[10px] opacity-40",
+                children: w.status === "already-installed" ? "Already installed" : w.status === "downloading" ? "Downloading..." : w.status === "installed" ? "Installed" : w.status === "failed" ? "Failed" : "Pending"
+              })]
+            }), w.status === "failed" && w.error && /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-[10px] text-red-400/80 mt-0.5 ml-7 truncate",
+              children: w.error
+            })]
+          }, idx);
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex items-center justify-end px-5 py-3 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Done",
+          bgColor: isComplete ? "bg-blue-600" : "bg-gray-700",
+          hoverBackgroundColor: isComplete ? "hover:bg-blue-700" : "",
+          textSize: "text-sm",
+          padding: "py-1.5 px-4",
+          onClick: function onClick() {
+            if (isComplete && onDone) onDone();
+          },
+          disabled: !isComplete
+        })
+      })]
+    })
+  });
+};
+
 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; }
@@ -3616,15 +3712,30 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     authError = _useState12[0],
     setAuthError = _useState12[1];
+  var _useState13 = React.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showProgressModal = _useState14[0],
+    setShowProgressModal = _useState14[1];
+  var _useState15 = React.useState([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    progressWidgets = _useState16[0],
+    setProgressWidgets = _useState16[1];
+  var _useState17 = React.useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    progressComplete = _useState18[0],
+    setProgressComplete = _useState18[1];
+  var progressResultRef = React.useRef(null);
   var pollIntervalRef = React.useRef(null);
+  var cleanupProgressRef = React.useRef(null);
   var pkg = dashboardPackage;
   if (!pkg) return null;
 
-  // Clean up polling on unmount
+  // Clean up polling and progress listener on unmount
   // eslint-disable-next-line react-hooks/rules-of-hooks
   React.useEffect(function () {
     return function () {
       if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+      if (cleanupProgressRef.current) cleanupProgressRef.current();
     };
   }, []);
 
@@ -3653,10 +3764,10 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
   }, [pkg.name]);
   function handleInstall() {
     return _handleInstall.apply(this, arguments);
-  }
+  } // eslint-disable-next-line react-hooks/rules-of-hooks
   function _handleInstall() {
     _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _result$workspace, result, _t;
+      var deps, _window$mainApi2, _window$mainApi2$onIn, result, _result$workspace2, _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -3670,6 +3781,35 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
             setInstallResult(null);
             setAuthFlow(null);
             setAuthError(null);
+
+            // Initialize progress modal from widget deps
+            deps = widgetDeps.length > 0 ? widgetDeps : [];
+            if (deps.length > 0) {
+              setProgressWidgets(deps.map(function (w) {
+                return {
+                  packageName: w["package"] || w.name,
+                  displayName: w.displayName || w.name || w["package"],
+                  status: "pending"
+                };
+              }));
+              setProgressComplete(false);
+              setShowProgressModal(true);
+
+              // Register progress listener
+              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) {
+                setProgressWidgets(function (prev) {
+                  var next = _toConsumableArray(prev);
+                  if (data.index >= 0 && data.index < next.length) {
+                    next[data.index] = _objectSpread$D(_objectSpread$D({}, next[data.index]), {}, {
+                      status: data.status,
+                      error: data.error || null
+                    });
+                  }
+                  return next;
+                });
+              });
+            }
             _context.prev = 2;
             _context.next = 3;
             return window.mainApi.dashboardConfig.installDashboardFromRegistry(appId, pkg.name);
@@ -3679,33 +3819,52 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
               _context.next = 4;
               break;
             }
-            // Auth needed — show inline auth prompt (DASH-135)
+            // Auth needed — close progress modal, show inline auth prompt
+            setShowProgressModal(false);
             setIsInstalling(false);
             setInstallResult({
               status: "auth",
               message: result.error || "Sign in to install this dashboard."
             });
+            if (cleanupProgressRef.current) {
+              cleanupProgressRef.current();
+              cleanupProgressRef.current = null;
+            }
             return _context.abrupt("return");
           case 4:
-            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."
-            });
-            if (result !== null && result !== void 0 && result.success && onInstallComplete) {
-              onInstallComplete(result);
+            // Store result for use when modal closes
+            progressResultRef.current = result;
+            setProgressComplete(true);
+
+            // If no progress modal was shown, apply result directly
+            if (deps.length === 0) {
+              setInstallResult({
+                status: result !== null && result !== void 0 && result.success ? "success" : "error",
+                message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace2 = result.workspace) === null || _result$workspace2 === void 0 ? void 0 : _result$workspace2.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
+              });
+              if (result !== null && result !== void 0 && result.success && onInstallComplete) {
+                onInstallComplete(result);
+              }
             }
             _context.next = 6;
             break;
           case 5:
             _context.prev = 5;
             _t = _context["catch"](2);
-            setInstallResult({
-              status: "error",
-              message: _t.message || "Failed to install dashboard."
-            });
+            setProgressComplete(true);
+            if (deps.length === 0) {
+              setInstallResult({
+                status: "error",
+                message: _t.message || "Failed to install dashboard."
+              });
+            }
           case 6:
             _context.prev = 6;
             setIsInstalling(false);
+            if (cleanupProgressRef.current) {
+              cleanupProgressRef.current();
+              cleanupProgressRef.current = null;
+            }
             return _context.finish(6);
           case 7:
           case "end":
@@ -3715,6 +3874,20 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     }));
     return _handleInstall.apply(this, arguments);
   }
+  var handleProgressDone = React.useCallback(function () {
+    setShowProgressModal(false);
+    var result = progressResultRef.current;
+    if (result) {
+      var _result$workspace;
+      setInstallResult({
+        status: result.success ? "success" : "error",
+        message: result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : result.error || "Installation failed."
+      });
+      if (result.success && onInstallComplete) {
+        onInstallComplete(result);
+      }
+    }
+  }, [pkg.name, onInstallComplete]);
   function handleSignIn() {
     return _handleSignIn.apply(this, arguments);
   }
@@ -4096,6 +4269,12 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
         onClick: handleInstall,
         disabled: isInstalling
       })
+    }), /*#__PURE__*/jsxRuntime.jsx(InstallProgressModal, {
+      isOpen: showProgressModal,
+      setIsOpen: setShowProgressModal,
+      widgets: progressWidgets,
+      isComplete: progressComplete,
+      onDone: handleProgressDone
     })]
   });
 };
@@ -22953,6 +23132,397 @@ var ExternalWidget = function ExternalWidget(_ref) {
   });
 };
 
+var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
+  var widget = _ref.widget,
+    onInstall = _ref.onInstall,
+    _ref$isInstalling = _ref.isInstalling,
+    isInstalling = _ref$isInstalling === void 0 ? false : _ref$isInstalling,
+    _ref$installError = _ref.installError,
+    installError = _ref$installError === void 0 ? null : _ref$installError,
+    _ref$isInstalled = _ref.isInstalled,
+    isInstalled = _ref$isInstalled === void 0 ? false : _ref$isInstalled;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  if (!widget) return null;
+  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: widget.icon || "cube",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+              title: widget.packageDisplayName,
+              padding: false
+            }), isInstalled && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 flex-shrink-0",
+              children: "Installed"
+            })]
+          }), /*#__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 ", widget.packageAuthor || "Unknown"]
+            }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", widget.packageVersion]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), widget.packageDescription && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-sm",
+        children: widget.packageDescription
+      }), widget.packageTags && widget.packageTags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: widget.packageTags.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: "INCLUDED WIDGETS"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1.5",
+          children: (widget.packageWidgets || []).map(function (w, idx) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"]),
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-sm font-medium",
+                children: w.displayName || w.name
+              }), w.description && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-xs opacity-50 mt-0.5",
+                children: w.description
+              }), getUserConfigurableProviders(w.providers).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "space-y-1 mt-1",
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex gap-1 flex-wrap",
+                  children: getUserConfigurableProviders(w.providers).map(function (p, pidx) {
+                    return /*#__PURE__*/jsxRuntime.jsxs("span", {
+                      className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
+                      children: [p.type, p.required ? " *" : ""]
+                    }, pidx);
+                  })
+                }), getUserConfigurableProviders(w.providers).some(function (p) {
+                  var _p$requiredTools;
+                  return ((_p$requiredTools = p.requiredTools) === null || _p$requiredTools === void 0 ? void 0 : _p$requiredTools.length) > 0;
+                }) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "flex flex-wrap gap-1 ml-1",
+                  children: getUserConfigurableProviders(w.providers).filter(function (p) {
+                    var _p$requiredTools2;
+                    return ((_p$requiredTools2 = p.requiredTools) === null || _p$requiredTools2 === void 0 ? void 0 : _p$requiredTools2.length) > 0;
+                  }).flatMap(function (p) {
+                    return p.requiredTools.map(function (tool) {
+                      return /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 opacity-60",
+                        children: tool
+                      }, "".concat(p.type, "-").concat(tool));
+                    });
+                  })
+                })]
+              })]
+            }, idx);
+          })
+        })]
+      }), widget.appOrigin && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-1.5 text-xs opacity-50",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "laptop",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          children: ["Built for ", widget.appOrigin]
+        })]
+      }), widget.missingApis && widget.missingApis.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "p-2 rounded bg-yellow-900/30 border border-yellow-700",
+        children: /*#__PURE__*/jsxRuntime.jsxs("p", {
+          className: "text-xs text-yellow-400",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "triangle-exclamation",
+            className: "mr-1"
+          }), "Incompatible \u2014 requires ", widget.missingApis.join(", "), " API", widget.missingApis.length !== 1 ? "s" : ""]
+        })
+      }), widget.repository && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REPOSITORY"
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            var _window$mainApi;
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.shell) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.openExternal(widget.repository);
+          },
+          className: "text-sm text-blue-400 hover:text-blue-300 hover:underline transition-colors break-all text-left",
+          children: widget.repository
+        })]
+      }), installError && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "p-2 rounded bg-red-900/30 border border-red-700",
+        children: /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-xs text-red-400",
+          children: installError
+        })
+      })]
+    }), /*#__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: isInstalled ? "Installed" : isInstalling ? "Installing..." : "Install Package",
+        bgColor: isInstalled ? "bg-emerald-600/50" : "bg-blue-600",
+        hoverBackgroundColor: isInstalled || isInstalling ? "" : "hover:bg-blue-700",
+        textSize: "text-sm",
+        padding: "py-1.5 px-4",
+        onClick: onInstall,
+        disabled: isInstalling || isInstalled
+      })
+    })]
+  });
+};
+
+function getWidgetSearchQuery(componentKey) {
+  var parts = componentKey.split(".");
+  if (parts.length >= 3) {
+    return {
+      packageName: parts[1],
+      widgetName: parts[2],
+      scope: parts[0]
+    };
+  }
+  return {
+    packageName: null,
+    widgetName: componentKey,
+    scope: null
+  };
+}
+
+/**
+ * Convert a raw registry package object into the flat widget shape
+ * expected by RegistryPackageDetail.
+ */
+function packageToFlatWidget(pkg) {
+  return {
+    key: "".concat(pkg.name, "/0"),
+    name: pkg.displayName || pkg.name,
+    icon: pkg.icon || null,
+    isRegistry: true,
+    packageName: pkg.name,
+    packageScope: pkg.scope || null,
+    packageDisplayName: pkg.displayName || pkg.name,
+    packageVersion: pkg.version,
+    packageAuthor: pkg.author || "",
+    packageDescription: pkg.description || "",
+    packageTags: pkg.tags || [],
+    packageCategory: pkg.category || "",
+    downloadUrl: pkg.downloadUrl || "",
+    repository: pkg.repository || "",
+    publishedAt: pkg.publishedAt || "",
+    packageWidgets: pkg.widgets || [],
+    appOrigin: pkg.appOrigin || null,
+    packageProviders: pkg.providers || [],
+    missingApis: []
+  };
+}
+
+/**
+ * WidgetNotFound — rendered in place of an unresolvable widget.
+ *
+ * Shows the existing "Widget Not Found" error display and adds a
+ * "Find in Registry" button that does an exact registry lookup and
+ * opens an install modal.
+ */
+var WidgetNotFound = function WidgetNotFound(_ref) {
+  var component = _ref.component;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showModal = _useState2[0],
+    setShowModal = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    registryWidget = _useState4[0],
+    setRegistryWidget = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    notFound = _useState8[0],
+    setNotFound = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isInstalling = _useState0[0],
+    setIsInstalling = _useState0[1];
+  var _useState1 = React.useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    installError = _useState10[0],
+    setInstallError = _useState10[1];
+  var lookupWidget = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _getWidgetSearchQuery, packageName, widgetName, pkg, result;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          setShowModal(true);
+          setIsLoading(true);
+          setNotFound(false);
+          setRegistryWidget(null);
+          setInstallError(null);
+          _getWidgetSearchQuery = getWidgetSearchQuery(component), packageName = _getWidgetSearchQuery.packageName, widgetName = _getWidgetSearchQuery.widgetName;
+          _context.prev = 1;
+          pkg = null; // Scoped ID — exact package lookup
+          if (!packageName) {
+            _context.next = 3;
+            break;
+          }
+          _context.next = 2;
+          return window.mainApi.registry.getPackage(packageName);
+        case 2:
+          pkg = _context.sent;
+        case 3:
+          if (pkg) {
+            _context.next = 5;
+            break;
+          }
+          _context.next = 4;
+          return window.mainApi.registry.search(widgetName);
+        case 4:
+          result = _context.sent;
+          pkg = (result.packages || []).find(function (p) {
+            return (p.widgets || []).some(function (w) {
+              return w.name === widgetName;
+            });
+          });
+        case 5:
+          if (pkg) {
+            setRegistryWidget(packageToFlatWidget(pkg));
+          } else {
+            setNotFound(true);
+          }
+          _context.next = 7;
+          break;
+        case 6:
+          _context.prev = 6;
+          _context["catch"](1);
+          setNotFound(true);
+        case 7:
+          setIsLoading(false);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 6]]);
+  })), [component]);
+  var handleInstall = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, _t2;
+    return _regeneratorRuntime.wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (registryWidget) {
+            _context2.next = 1;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 1:
+          setIsInstalling(true);
+          setInstallError(null);
+          _context2.prev = 2;
+          packageName = registryWidget.packageName, packageScope = registryWidget.packageScope, downloadUrl = registryWidget.downloadUrl, packageVersion = registryWidget.packageVersion;
+          scopedId = packageScope ? "@".concat(packageScope.replace(/^@/, ""), "/").concat(packageName) : packageName;
+          resolvedUrl = downloadUrl.replace(/\{version\}/g, packageVersion).replace(/\{name\}/g, packageName);
+          _context2.next = 3;
+          return window.mainApi.widgets.install(scopedId, resolvedUrl);
+        case 3:
+          setShowModal(false);
+          _context2.next = 5;
+          break;
+        case 4:
+          _context2.prev = 4;
+          _t2 = _context2["catch"](2);
+          setInstallError(_t2.message || "Failed to install package");
+        case 5:
+          setIsInstalling(false);
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[2, 4]]);
+  })), [registryWidget]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col h-full justify-center items-center w-full z-10 gap-2 p-4 text-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "triangle-exclamation",
+        className: "h-6 w-6 text-amber-500"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-sm font-semibold text-gray-300",
+        children: "Widget Not Found"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-xs text-gray-500 font-mono",
+        children: component
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-xs text-gray-600 mt-1",
+        children: "This widget may have been uninstalled or renamed."
+      }), /*#__PURE__*/jsxRuntime.jsxs("button", {
+        type: "button",
+        className: "flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 transition-colors mt-2",
+        onClick: lookupWidget,
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "magnifying-glass",
+          className: "h-3 w-3"
+        }), "Find in Registry"]
+      })]
+    }), showModal && /*#__PURE__*/jsxRuntime.jsxs(DashReact.Modal, {
+      title: "Registry Package",
+      width: "w-1/3",
+      height: "h-auto",
+      onClose: function onClose() {
+        return setShowModal(false);
+      },
+      children: [isLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex items-center justify-center p-12",
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "spinner",
+          className: "h-5 w-5 text-gray-400 animate-spin"
+        })
+      }), !isLoading && registryWidget && /*#__PURE__*/jsxRuntime.jsx(RegistryPackageDetail, {
+        widget: registryWidget,
+        onInstall: handleInstall,
+        isInstalling: isInstalling,
+        installError: installError
+      }), !isLoading && notFound && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col items-center justify-center gap-3 p-12 text-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "triangle-exclamation",
+          className: "h-6 w-6 text-amber-500"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-sm text-gray-400",
+          children: "This widget is not available in the registry."
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Close",
+          bgColor: "bg-gray-600",
+          hoverBackgroundColor: "hover:bg-gray-700",
+          textSize: "text-sm",
+          padding: "py-1.5 px-4",
+          onClick: function onClick() {
+            return setShowModal(false);
+          }
+        })]
+      })]
+    })]
+  });
+};
+
 var GRID_CELL_WIDGET_TYPE = "grid-cell-widget";
 var SIDEBAR_WIDGET_TYPE = "sidebar-widget";
 
@@ -24977,21 +25547,8 @@ function renderComponent(component, id) {
       // WidgetFactory.render() always returns a React element (truthy),
       // so the old ternary fallback could never fire.
       if (!isWidgetResolvable(component)) {
-        return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col h-full justify-center items-center w-full z-10 gap-2 p-4 text-center",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "triangle-exclamation",
-            className: "h-6 w-6 text-amber-500"
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-sm font-semibold text-gray-300",
-            children: "Widget Not Found"
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xs text-gray-500 font-mono",
-            children: component
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xs text-gray-600 mt-1",
-            children: "This widget may have been uninstalled or renamed."
-          })]
+        return /*#__PURE__*/jsxRuntime.jsx(WidgetNotFound, {
+          component: component
         });
       }
       if ("height" in params) {
@@ -38308,7 +38865,10 @@ var DashboardsSection = function DashboardsSection(_ref) {
         setInstallMode(null);
         setViewMode("grouped");
       },
-      appId: appId
+      appId: appId,
+      onInstallComplete: function onInstallComplete() {
+        onReloadWorkspaces && onReloadWorkspaces();
+      }
     });
   } else if (selectedWorkspace) {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(DashboardDetail, {
@@ -43746,165 +44306,6 @@ var InstallWidgetPicker = function InstallWidgetPicker(_ref2) {
   });
 };
 
-var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
-  var widget = _ref.widget,
-    onInstall = _ref.onInstall,
-    _ref$isInstalling = _ref.isInstalling,
-    isInstalling = _ref$isInstalling === void 0 ? false : _ref$isInstalling,
-    _ref$installError = _ref.installError,
-    installError = _ref$installError === void 0 ? null : _ref$installError,
-    _ref$isInstalled = _ref.isInstalled,
-    isInstalled = _ref$isInstalled === void 0 ? false : _ref$isInstalled;
-  var _useContext = React.useContext(DashReact.ThemeContext),
-    currentTheme = _useContext.currentTheme;
-  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
-    grow: false
-  });
-  if (!widget) return null;
-  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: widget.icon || "cube",
-            className: "h-5 w-5"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
-              title: widget.packageDisplayName,
-              padding: false
-            }), isInstalled && /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 flex-shrink-0",
-              children: "Installed"
-            })]
-          }), /*#__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 ", widget.packageAuthor || "Unknown"]
-            }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
-              children: ["v", widget.packageVersion]
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
-        className: currentTheme["border-primary-medium"]
-      }), widget.packageDescription && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-sm",
-        children: widget.packageDescription
-      }), widget.packageTags && widget.packageTags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex flex-wrap gap-1",
-        children: widget.packageTags.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: "INCLUDED WIDGETS"
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "space-y-1.5",
-          children: (widget.packageWidgets || []).map(function (w, idx) {
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"]),
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-sm font-medium",
-                children: w.displayName || w.name
-              }), w.description && /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-xs opacity-50 mt-0.5",
-                children: w.description
-              }), getUserConfigurableProviders(w.providers).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "space-y-1 mt-1",
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex gap-1 flex-wrap",
-                  children: getUserConfigurableProviders(w.providers).map(function (p, pidx) {
-                    return /*#__PURE__*/jsxRuntime.jsxs("span", {
-                      className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
-                      children: [p.type, p.required ? " *" : ""]
-                    }, pidx);
-                  })
-                }), getUserConfigurableProviders(w.providers).some(function (p) {
-                  var _p$requiredTools;
-                  return ((_p$requiredTools = p.requiredTools) === null || _p$requiredTools === void 0 ? void 0 : _p$requiredTools.length) > 0;
-                }) && /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "flex flex-wrap gap-1 ml-1",
-                  children: getUserConfigurableProviders(w.providers).filter(function (p) {
-                    var _p$requiredTools2;
-                    return ((_p$requiredTools2 = p.requiredTools) === null || _p$requiredTools2 === void 0 ? void 0 : _p$requiredTools2.length) > 0;
-                  }).flatMap(function (p) {
-                    return p.requiredTools.map(function (tool) {
-                      return /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 opacity-60",
-                        children: tool
-                      }, "".concat(p.type, "-").concat(tool));
-                    });
-                  })
-                })]
-              })]
-            }, idx);
-          })
-        })]
-      }), widget.appOrigin && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-1.5 text-xs opacity-50",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "laptop",
-          className: "h-3 w-3"
-        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-          children: ["Built for ", widget.appOrigin]
-        })]
-      }), widget.missingApis && widget.missingApis.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "p-2 rounded bg-yellow-900/30 border border-yellow-700",
-        children: /*#__PURE__*/jsxRuntime.jsxs("p", {
-          className: "text-xs text-yellow-400",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "triangle-exclamation",
-            className: "mr-1"
-          }), "Incompatible \u2014 requires ", widget.missingApis.join(", "), " API", widget.missingApis.length !== 1 ? "s" : ""]
-        })
-      }), widget.repository && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "REPOSITORY"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          onClick: function onClick() {
-            var _window$mainApi;
-            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.shell) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.openExternal(widget.repository);
-          },
-          className: "text-sm text-blue-400 hover:text-blue-300 hover:underline transition-colors break-all text-left",
-          children: widget.repository
-        })]
-      }), installError && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "p-2 rounded bg-red-900/30 border border-red-700",
-        children: /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "text-xs text-red-400",
-          children: installError
-        })
-      })]
-    }), /*#__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: isInstalled ? "Installed" : isInstalling ? "Installing..." : "Install Package",
-        bgColor: isInstalled ? "bg-emerald-600/50" : "bg-blue-600",
-        hoverBackgroundColor: isInstalled || isInstalling ? "" : "hover:bg-blue-700",
-        textSize: "text-sm",
-        padding: "py-1.5 px-4",
-        onClick: onInstall,
-        disabled: isInstalling || isInstalled
-      })
-    })]
-  });
-};
-
 function _createForOfIteratorHelper$2(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$2(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$2(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$2(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$2(r, a) : void 0; } }
 function _arrayLikeToArray$2(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; }
@@ -50809,6 +51210,7 @@ exports.WidgetApi = WidgetApi;
 exports.WidgetConfigPanel = WidgetConfigPanel;
 exports.WidgetContext = WidgetContext;
 exports.WidgetFactory = WidgetFactory;
+exports.WidgetNotFound = WidgetNotFound;
 exports.WidgetPopoutStage = WidgetPopoutStage;
 exports.WidgetProviderWrapper = WidgetProviderWrapper;
 exports.WidgetSidebar = WidgetSidebar;