@trops/dash-core 0.1.436 → 0.1.438

package/dist/index.js

@@ -14040,22 +14040,74 @@ var PanelCode = function PanelCode(_ref) {
   });
 };
 
-function _createForOfIteratorHelper$o(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$o(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$o(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$o(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$o(r, a) : void 0; } }
-function _arrayLikeToArray$o(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; }
 /**
- * providerResolution.js
+ * widgetIdentity.js
+ *
+ * Single source of truth for the widget-name + scoped-id-subtitle
+ * pattern used across the renderer:
  *
- * Shared helpers for walking a workspace and figuring out which widgets
- * have required providers that are still unresolved after the 3-layer
- * resolution (widget → workspace → app-default → null). Used by:
+ *   PRIMARY  Sales Pipeline
+ *   SUBTITLE trops.pipeline.SalesPipeline
+ *
+ * Surfaces that previously rolled their own derivation (WidgetsTab,
+ * listenerResolution, providerResolution, WidgetCardHeader,
+ * LayoutBuilderConfigModal) all route through these two helpers so a
+ * given widget instance shows the same name in every panel.
+ */
+
+/**
+ * Pick the most user-friendly display name for a layout item.
  *
- *   - DashboardConfigModal to render the Providers tab
- *   - DashboardStage toolbar to show the unresolved-count badge
+ * Priority:
+ *   1. per-instance user title (`item.userPrefs.title`)
+ *   2. widget's default per-instance title
+ *      (`item.userConfig.title.defaultValue`, or string-form
+ *      `item.userConfig.title`)
+ *   3. developer-set friendly `cfg.displayName`
+ *   4. widget config `cfg.name`
+ *   5. bare component name (last segment of the scoped id)
+ *   6. full component string (last resort, never preferred)
+ *
+ * @param {Object} item - layout item (must carry `component` to be useful)
+ * @param {Object} [cfg] - the live registry config returned by ComponentManager
+ * @returns {string} a non-empty display string
+ */
+function pickWidgetDisplayName(item, cfg) {
+  var _item$userPrefs, _item$userConfig, _item$userConfig2;
+  var prefsTitle = item === null || item === void 0 || (_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title;
+  if (typeof prefsTitle === "string" && prefsTitle.trim()) return prefsTitle;
+  var userConfigTitle = (item === null || item === void 0 || (_item$userConfig = item.userConfig) === null || _item$userConfig === void 0 || (_item$userConfig = _item$userConfig.title) === null || _item$userConfig === void 0 ? void 0 : _item$userConfig.defaultValue) || (typeof (item === null || item === void 0 || (_item$userConfig2 = item.userConfig) === null || _item$userConfig2 === void 0 ? void 0 : _item$userConfig2.title) === "string" ? item.userConfig.title : null);
+  if (typeof userConfigTitle === "string" && userConfigTitle.trim()) {
+    return userConfigTitle;
+  }
+  if (cfg !== null && cfg !== void 0 && cfg.displayName) return cfg.displayName;
+  if (cfg !== null && cfg !== void 0 && cfg.name) return cfg.name;
+  if (typeof (item === null || item === void 0 ? void 0 : item.component) === "string") {
+    var parts = item.component.split(".");
+    if (parts.length === 3) return parts[2];
+    return item.component;
+  }
+  return "Widget";
+}
+
+/**
+ * Build the full scoped registry id (`scope.package.Component`) for
+ * use as a subtitle. Returns the layout item's canonical id when
+ * present; otherwise null so callers can hide the subtitle.
  *
- * Both places need the same answer, so keep the logic here to avoid drift
- * with the resolution inside `useMcpProvider` / `useWebSocketProvider`.
+ * @param {Object} item
+ * @returns {string|null}
  */
+function pickWidgetRef(item) {
+  var c = item === null || item === void 0 ? void 0 : item.component;
+  if (typeof c !== "string") return null;
+  var parts = c.split(".");
+  return parts.length === 3 ? c : null;
+}
+
+function _createForOfIteratorHelper$o(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$o(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$o(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$o(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$o(r, a) : void 0; } }
+function _arrayLikeToArray$o(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; }
 
 /**
  * Resolve which provider name a given widget instance would bind to for
@@ -14310,6 +14362,12 @@ function getAllProviderBindings(_ref3) {
         bindings.push({
           widgetId: widgetId,
           component: item.component,
+          // Friendly display name + canonical scoped id, derived once
+          // here so every provider-tab consumer (Bulk pane, Per-widget
+          // rows, override badges) shows the same label/subtitle as
+          // the Listeners tab and the Widgets tab.
+          label: pickWidgetDisplayName(item, null),
+          widgetRef: pickWidgetRef(item),
           providerType: req.type,
           providerClass: req.providerClass || null,
           required: req.required !== false,
@@ -14388,18 +14446,12 @@ function canonicalItemKey(item) {
   return null;
 }
 
-/**
- * Best-effort human label for a layout item: explicit title, then
- * widget config display name, then component name + short id.
- */
+// Label/widgetRef derivation lives in `widgetIdentity.js` so every
+// surface (Listeners tab, Providers tab, Widgets tab, widget card
+// header, layout footer) shows the same widget name + scope.package
+// .Component subtitle. Local thin wrapper just attaches the cfg.
 function labelFor(item, getWidgetConfig) {
-  var _item$userPrefs, _item$userConfig;
-  var cfg = (getWidgetConfig === null || getWidgetConfig === void 0 ? void 0 : getWidgetConfig(item.component)) || null;
-  var explicit = (item === null || item === void 0 || (_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title) || (item === null || item === void 0 || (_item$userConfig = item.userConfig) === null || _item$userConfig === void 0 ? void 0 : _item$userConfig.title);
-  if (explicit) return explicit;
-  if (cfg !== null && cfg !== void 0 && cfg.displayName) return cfg.displayName;
-  var id = itemIdOf(item);
-  return "".concat(item.component || "widget").concat(id ? "[".concat(String(id).slice(0, 6), "]") : "");
+  return pickWidgetDisplayName(item, getWidgetConfig === null || getWidgetConfig === void 0 ? void 0 : getWidgetConfig(item.component));
 }
 
 /**
@@ -14443,6 +14495,7 @@ function getEmitters(workspace, getWidgetConfig) {
       itemId: itemIdOf(item),
       component: item.component,
       label: labelFor(item, getWidgetConfig),
+      widgetRef: pickWidgetRef(item),
       events: events
     });
   });
@@ -14453,7 +14506,7 @@ function getEmitters(workspace, getWidgetConfig) {
  * Every widget instance in the workspace that accepts at least one
  * handler. Used to populate the receiver dropdown. Deduplicated by
  * `${component}|${itemId}` (see getEmitters).
- * @returns {Array<{ itemId, component, label, eventHandlers: string[], listeners: object, key: string }>}
+ * @returns {Array<{ itemId, component, label, widgetRef, eventHandlers: string[], listeners: object, key: string }>}
  */
 function getReceivers(workspace, getWidgetConfig) {
   var byKey = new Map();
@@ -14468,6 +14521,7 @@ function getReceivers(workspace, getWidgetConfig) {
       itemId: itemIdOf(item),
       component: item.component,
       label: labelFor(item, getWidgetConfig),
+      widgetRef: pickWidgetRef(item),
       eventHandlers: handlers,
       listeners: item.listeners || {}
     });
@@ -15123,11 +15177,19 @@ var PanelEditItemHandlers = function PanelEditItemHandlers(_ref) {
           children: [connectedCount, " event", connectedCount !== 1 ? "s" : "", " connected"]
         })]
       }), sourceWidgets.map(function (layout) {
+        var label = pickWidgetDisplayName(layout, null);
+        var ref = pickWidgetRef(layout) || layout.component;
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-col space-y-2",
-          children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: [layout["component"], " [", layout["id"], "]"]
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col gap-0.5 mb-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm font-semibold opacity-90",
+              children: label
+            }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-[10px] opacity-50 font-mono truncate",
+              children: [ref, "[", layout["id"], "]"]
+            })]
           }), layout.events.filter(function (value, index, array) {
             return array.indexOf(value) === index;
           }).map(function (event) {
@@ -15413,29 +15475,29 @@ var LayoutBuilderConfigModal = function LayoutBuilderConfigModal(_ref) {
     return s.key === activeSection;
   }) || sections[0];
 
-  // Footer label: derive @scope/package straight from the layout
-  // item's scoped component id. Strict — no workspace fallback.
+  // Footer label: full scoped id (`scope.package.Component`) so the
+  // user always sees the underlying widget identity, even when the
+  // primary title is a custom per-instance label. No workspace fallback.
   var footerPackageLabel = function () {
     var scopedId = (itemSelected === null || itemSelected === void 0 ? void 0 : itemSelected.component) || "";
     if (typeof scopedId !== "string") return "";
     var parts = scopedId.split(".");
-    if (parts.length !== 3) return "";
-    var _parts = _slicedToArray(parts, 2),
-      scope = _parts[0],
-      pkg = _parts[1];
-    if (!scope || !pkg) return "";
-    return "@".concat(scope, "/").concat(pkg);
+    return parts.length === 3 ? scopedId : "";
   }();
-  var componentName = itemSelected ? itemSelected["component"] : "";
+  // Friendly name on the top line, full scoped id on the subtitle.
+  // Same priority chain the Listeners/Widgets tabs and WidgetCardHeader
+  // use, via the shared `pickWidgetDisplayName` helper.
+  var widgetCfg = itemSelected ? ComponentManager.config(itemSelected.component, itemSelected) : null;
+  var friendlyName = itemSelected ? pickWidgetDisplayName(itemSelected, widgetCfg) : "";
   var footerLeftContent = footerPackageLabel ? /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: "flex flex-col leading-tight",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      children: componentName
+      children: friendlyName
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-[10px] opacity-50",
+      className: "text-[10px] opacity-50 font-mono",
       children: footerPackageLabel
     })]
-  }) : componentName;
+  }) : friendlyName;
   return itemSelected !== null && /*#__PURE__*/jsxRuntime.jsxs(DashReact.SettingsModal, {
     isOpen: open,
     setIsOpen: setIsOpen,
@@ -19727,24 +19789,22 @@ var WidgetCardHeader = function WidgetCardHeader(_ref) {
   // Detect missing widgets (component key exists but not in ComponentManager)
   var isWidgetMissing = (widgetItem === null || widgetItem === void 0 ? void 0 : widgetItem.component) && !widgetConfig;
 
-  // Get widget name from config or item
-  var widgetName = (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.displayName) || (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.name) || (widgetItem === null || widgetItem === void 0 ? void 0 : widgetItem.name) || (widgetItem === null || widgetItem === void 0 ? void 0 : widgetItem.component);
-
-  // Derive the "@scope/package" label from the layout item's scoped
-  // component id (`scope.package.Component`). Strict — the layout item
-  // is the source of truth. If the item isn't scoped (a legacy layout
-  // that LayoutModel couldn't migrate, or a missing widget) the label
-  // is empty rather than guessed from the workspace category.
+  // Display name + scope.package.Component subtitle. Single source of
+  // truth: `pickWidgetDisplayName` so the same widget shows the same
+  // name in WidgetsTab, Listeners tab, Providers tab, and the layout
+  // footer.
+  var widgetName = pickWidgetDisplayName(widgetItem, widgetConfig);
+
+  // Show the full scoped registry id (`scope.package.Component`) as
+  // the subtitle. The friendly title on line 1 may be a custom user
+  // title that doesn't reveal which widget is mounted; the subtitle
+  // pins down the underlying identity. Strict — the layout item is
+  // the source of truth.
   var packageLabel = function () {
     var scopedId = (widgetItem === null || widgetItem === void 0 ? void 0 : widgetItem.component) || (widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.id) || "";
     if (typeof scopedId !== "string") return "";
     var parts = scopedId.split(".");
-    if (parts.length !== 3) return "";
-    var _parts = _slicedToArray(parts, 2),
-      scope = _parts[0],
-      pkg = _parts[1];
-    if (!scope || !pkg) return "";
-    return "@".concat(scope, "/").concat(pkg);
+    return parts.length === 3 ? scopedId : "";
   }();
 
   // Get provider requirements from widget config (not from item directly)
@@ -53881,7 +53941,7 @@ var DraggableWidgetItem = function DraggableWidgetItem(_ref) {
         className: "h-3 w-3 opacity-40 flex-shrink-0"
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "truncate font-medium opacity-90",
-        children: widget.name || widgetKey
+        children: widget.displayName || widget.name || bareComponentName(widgetKey) || widgetKey
       })]
     }), (providerTypes.length > 0 || hasEventInfo) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-wrap items-center gap-1 pl-5",
@@ -53894,9 +53954,10 @@ var DraggableWidgetItem = function DraggableWidgetItem(_ref) {
         className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300",
         children: [eventCount > 0 && "".concat(eventCount, " event").concat(eventCount > 1 ? "s" : ""), eventCount > 0 && handlerCount > 0 && ", ", handlerCount > 0 && "".concat(handlerCount, " handler").concat(handlerCount > 1 ? "s" : "")]
       })]
-    }), widget["package"] && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-[10px] pl-5 opacity-40 truncate",
-      children: widget["package"]
+    }), widgetKey && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "text-[10px] pl-5 opacity-40 font-mono truncate",
+      title: widgetKey,
+      children: widgetKey
     })]
   });
 };
@@ -54234,39 +54295,37 @@ var SidebarDiscoverContent = function SidebarDiscoverContent(_ref2) {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex flex-col gap-1 px-3 py-1",
         children: registry.packages.map(function (pkg) {
-          var _pkg$widgets4, _pkg$widgets5;
+          var _pkg$widgets4;
           var isInstalled = isPackageInstalled(pkg);
+          var packageRef = pkg.scope && pkg.name ? "@".concat(String(pkg.scope).replace(/^@/, ""), "/").concat(pkg.name) : pkg.name;
+          var widgetCount = ((_pkg$widgets4 = pkg.widgets) === null || _pkg$widgets4 === void 0 ? void 0 : _pkg$widgets4.length) || 0;
           return /*#__PURE__*/jsxRuntime.jsxs("button", {
             type: "button",
             onClick: function onClick() {
               return setSelectedPackageName(pkg.name);
             },
-            className: "flex items-center gap-2 px-3 py-2 rounded-md text-left\n                                bg-white/5 hover:bg-white/10 transition-colors w-full".concat(isInstalled ? " opacity-50" : ""),
+            className: "flex items-start gap-2 px-3 py-2 rounded-md text-left\n                                bg-white/5 hover:bg-white/10 transition-colors w-full".concat(isInstalled ? " opacity-60" : ""),
             children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
               icon: "cube",
-              className: "h-3 w-3 opacity-40 flex-shrink-0"
+              className: "h-3 w-3 opacity-40 flex-shrink-0 mt-0.5"
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "min-w-0 flex-1",
-              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "text-sm font-medium opacity-90 truncate",
-                children: pkg.displayName || pkg.name
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center gap-1 text-[10px] opacity-50",
-                children: [pkg.author && /*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "truncate",
-                  children: pkg.author
-                }), pkg.author && ((_pkg$widgets4 = pkg.widgets) === null || _pkg$widgets4 === void 0 ? void 0 : _pkg$widgets4.length) > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
-                  children: "\xB7"
-                }), ((_pkg$widgets5 = pkg.widgets) === null || _pkg$widgets5 === void 0 ? void 0 : _pkg$widgets5.length) > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
-                  children: [pkg.widgets.length, " widget", pkg.widgets.length !== 1 ? "s" : ""]
-                }), isInstalled && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                    children: "\xB7"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-emerald-400",
-                    children: "Installed"
-                  })]
+              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-sm font-medium opacity-90 truncate flex-1 min-w-0",
+                  children: pkg.displayName || pkg.name
+                }), isInstalled && /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-[10px] text-emerald-400 flex-shrink-0",
+                  children: "Installed"
                 })]
+              }), packageRef && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                title: packageRef,
+                children: packageRef
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "text-[10px] opacity-40 truncate mt-0.5",
+                children: [pkg.author ? "".concat(pkg.author, " \xB7 ") : "", widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
               })]
             })]
           }, pkg.name);
@@ -55223,24 +55282,6 @@ function _unsupportedIterableToArray$5(r, a) { if (r) { if ("string" == typeof r
 function _arrayLikeToArray$5(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var ALL_WIDGETS_ID = "__ALL__";
 
-/**
- * Build the scoped registry identifier for a widget. Surfaces the
- * `scope.packageName.component` triple in the settings UI so users
- * can verify what a widget's registry identity is — useful when
- * diagnosing dashboard-install warnings ("why didn't this widget
- * install?" → scoped id in the warning vs scoped id shown here).
- * Returns just the component name when scope/package metadata is
- * unavailable (e.g. bare built-ins).
- */
-function buildScopedId(widget) {
-  if (!(widget !== null && widget !== void 0 && widget.component)) return null;
-  var scope = widget.scope ? String(widget.scope).replace(/^@/, "") : null;
-  var pkg = widget.packageName ? scope ? String(widget.packageName).replace(new RegExp("^@?".concat(scope, "/")), "") : String(widget.packageName).replace(/^@/, "") : null;
-  if (scope && pkg) return "".concat(scope, ".").concat(pkg, ".").concat(widget.component);
-  if (pkg) return "".concat(pkg, ".").concat(widget.component);
-  return widget.component;
-}
-
 /**
  * WidgetsTab
  *
@@ -55285,13 +55326,11 @@ var WidgetsTab = function WidgetsTab(_ref) {
         result.push({
           id: id,
           component: item.component,
-          displayName: item.name || cfg.name || cfg.displayName || item.component,
+          displayName: pickWidgetDisplayName(item, cfg),
+          widgetRef: pickWidgetRef(item),
           section: section,
           userConfig: cfg.userConfig || {},
           userPrefs: item.userPrefs || {},
-          // Identity fields for the registry-identifier label. Prefer
-          // values from the widget's component manager entry since the
-          // layout item itself often doesn't carry scope/packageName.
           scope: cfg.scope || item.scope || null,
           packageName: cfg.packageName || cfg.name || item.packageName || null
         });
@@ -55429,6 +55468,10 @@ var WidgetsTab = function WidgetsTab(_ref) {
                   className: "text-[10px] bg-amber-500/20 text-amber-300 px-1.5 rounded",
                   children: stagedForWidget
                 })]
+              }), w.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-[10px] text-gray-500 font-mono truncate mt-0.5",
+                title: w.widgetRef,
+                children: w.widgetRef
               }), /*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "text-[10px] text-gray-600 mt-0.5",
                 children: fieldCount === 0 ? "No configurable fields" : "".concat(fieldCount, " field").concat(fieldCount === 1 ? "" : "s")
@@ -55461,20 +55504,19 @@ function SingleWidgetPane(_ref4) {
     effectivePrefs = _ref4.effectivePrefs,
     onFieldChange = _ref4.onFieldChange;
   var hasFields = Object.keys(widget.userConfig).length > 0;
-  var scopedId = buildScopedId(widget);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-3",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "text-gray-200 font-semibold",
         children: widget.displayName
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "text-xs text-gray-500",
-        children: [widget.component, " \xB7 ", widget.section]
-      }), scopedId && scopedId !== widget.component && /*#__PURE__*/jsxRuntime.jsx("code", {
-        className: "block mt-1 text-[11px] text-gray-500 font-mono truncate",
-        title: scopedId,
-        children: scopedId
+      }), widget.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-xs text-gray-500 font-mono truncate mt-0.5",
+        title: widget.widgetRef,
+        children: widget.widgetRef
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-xs text-gray-600 mt-0.5",
+        children: widget.section
       })]
     }), hasFields ? /*#__PURE__*/jsxRuntime.jsx(PanelEditForm, {
       userConfig: widget.userConfig,
@@ -55720,11 +55762,11 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     var derivePackage = function derivePackage(item) {
       var scopedId = typeof (item === null || item === void 0 ? void 0 : item.component) === "string" ? item.component : "";
       var parts = scopedId.split(".");
-      if (parts.length === 3) {
-        var _parts = _slicedToArray(parts, 2),
-          scope = _parts[0],
-          pkg = _parts[1];
-        if (scope && pkg) return "@".concat(scope, "/").concat(pkg);
+      if (parts.length === 3 && parts[0] && parts[1]) {
+        // Group rows by `@scope/package` so two widgets from the same
+        // package show up under one heading. The full scoped id is
+        // surfaced per-row in the table (column-level identity).
+        return "@".concat(parts[0], "/").concat(parts[1]);
       }
       // Defensive: an explicit packageId on the item still wins for
       // legacy items the migration couldn't auto-resolve.
@@ -56343,13 +56385,17 @@ function ProvidersTab(_ref4) {
                       className: "text-sm truncate flex items-center gap-1.5 ".concat(needsAttention ? "font-semibold text-red-100" : "font-medium"),
                       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                         className: "truncate",
-                        children: row.component || "widget"
+                        children: row.label || row.component || "widget"
                       }), isRequired && /*#__PURE__*/jsxRuntime.jsx("span", {
                         className: needsAttention ? "text-red-300" : "text-indigo-300",
                         title: "Required provider",
                         "aria-label": "required",
                         children: "*"
                       })]
+                    }), (row.widgetRef || row.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                      title: row.widgetRef || row.component,
+                      children: row.widgetRef || row.component
                     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                       className: "flex items-center gap-1.5 mt-1 text-[10px]",
                       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -56549,16 +56595,20 @@ function ListenersTab(_ref9) {
           className: "overflow-y-auto flex-1",
           children: receivers.map(function (r) {
             var isActive = r.key === selectedReceiverKey;
-            return /*#__PURE__*/jsxRuntime.jsx("button", {
+            return /*#__PURE__*/jsxRuntime.jsxs("button", {
               type: "button",
               onClick: function onClick() {
                 return setSelectedReceiverKey(r.key);
               },
               className: "w-full text-left px-3 py-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "text-sm font-medium truncate",
                 children: r.label
-              })
+              }), r.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                title: r.widgetRef,
+                children: r.widgetRef
+              })]
             }, r.key);
           })
         })]
@@ -56749,9 +56799,15 @@ function EventsColumn(_ref10) {
       }) : emittersForList.map(function (e) {
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "space-y-1",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xs font-semibold opacity-50 uppercase tracking-wider",
-            children: e.label
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col gap-0.5 mb-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "text-sm font-semibold",
+              children: e.label
+            }), (e.widgetRef || e.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "text-[10px] opacity-50 font-mono truncate",
+              children: (e.widgetRef || e.component) + (e.itemId != null ? "[".concat(e.itemId, "]") : "")
+            })]
           }), e.events.map(function (eventName) {
             var key = "".concat(e.component, "|").concat(e.itemId, "|").concat(eventName);
             var selected = wiredKeys.has(key);