@trops/dash-core 0.1.437 → 0.1.438

package/dist/index.esm.js

@@ -14022,22 +14022,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:
+ *
+ *   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.
  *
- * 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:
+ * 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)
  *
- *   - DashboardConfigModal to render the Providers tab
- *   - DashboardStage toolbar to show the unresolved-count badge
+ * @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
@@ -14292,6 +14344,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,
@@ -14370,18 +14428,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));
 }
 
 /**
@@ -14425,6 +14477,7 @@ function getEmitters(workspace, getWidgetConfig) {
       itemId: itemIdOf(item),
       component: item.component,
       label: labelFor(item, getWidgetConfig),
+      widgetRef: pickWidgetRef(item),
       events: events
     });
   });
@@ -14435,7 +14488,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();
@@ -14450,6 +14503,7 @@ function getReceivers(workspace, getWidgetConfig) {
       itemId: itemIdOf(item),
       component: item.component,
       label: labelFor(item, getWidgetConfig),
+      widgetRef: pickWidgetRef(item),
       eventHandlers: handlers,
       listeners: item.listeners || {}
     });
@@ -15105,11 +15159,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__*/jsxs("div", {
           className: "flex flex-col space-y-2",
-          children: [/*#__PURE__*/jsxs("span", {
-            className: "text-xs font-semibold opacity-40 uppercase tracking-wider",
-            children: [layout["component"], " [", layout["id"], "]"]
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex flex-col gap-0.5 mb-1",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "text-sm font-semibold opacity-90",
+              children: label
+            }), /*#__PURE__*/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) {
@@ -15404,16 +15466,20 @@ var LayoutBuilderConfigModal = function LayoutBuilderConfigModal(_ref) {
     var parts = scopedId.split(".");
     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__*/jsxs("span", {
     className: "flex flex-col leading-tight",
     children: [/*#__PURE__*/jsx("span", {
-      children: componentName
+      children: friendlyName
     }), /*#__PURE__*/jsx("span", {
-      className: "text-[10px] opacity-50",
+      className: "text-[10px] opacity-50 font-mono",
       children: footerPackageLabel
     })]
-  }) : componentName;
+  }) : friendlyName;
   return itemSelected !== null && /*#__PURE__*/jsxs(SettingsModal, {
     isOpen: open,
     setIsOpen: setIsOpen,
@@ -19705,29 +19771,11 @@ 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;
 
-  // Display name priority: per-instance user title → widget's default
-  // title → developer's friendly displayName → widget config name →
-  // bare component name (last segment) → full scoped id (last resort).
-  // Mirrors WidgetsTab so the same widget shows the same name in both
-  // surfaces.
-  var widgetName = function (_widgetItem$userPrefs, _widgetConfig$userCon) {
-    var prefsTitle = widgetItem === null || widgetItem === void 0 || (_widgetItem$userPrefs = widgetItem.userPrefs) === null || _widgetItem$userPrefs === void 0 ? void 0 : _widgetItem$userPrefs.title;
-    if (typeof prefsTitle === "string" && prefsTitle.trim()) return prefsTitle;
-    var configDefault = widgetConfig === null || widgetConfig === void 0 || (_widgetConfig$userCon = widgetConfig.userConfig) === null || _widgetConfig$userCon === void 0 || (_widgetConfig$userCon = _widgetConfig$userCon.title) === null || _widgetConfig$userCon === void 0 ? void 0 : _widgetConfig$userCon.defaultValue;
-    if (typeof configDefault === "string" && configDefault.trim()) {
-      return configDefault;
-    }
-    if (widgetConfig !== null && widgetConfig !== void 0 && widgetConfig.displayName) return widgetConfig.displayName;
-    if (widgetConfig !== null && widgetConfig !== void 0 && widgetConfig.name) return widgetConfig.name;
-    if (widgetItem !== null && widgetItem !== void 0 && widgetItem.name) return widgetItem.name;
-    var comp = widgetItem === null || widgetItem === void 0 ? void 0 : widgetItem.component;
-    if (typeof comp === "string") {
-      var parts = comp.split(".");
-      if (parts.length === 3) return parts[2];
-      return comp;
-    }
-    return "Widget";
-  }();
+  // 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
@@ -53875,7 +53923,7 @@ var DraggableWidgetItem = function DraggableWidgetItem(_ref) {
         className: "h-3 w-3 opacity-40 flex-shrink-0"
       }), /*#__PURE__*/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__*/jsxs("div", {
       className: "flex flex-wrap items-center gap-1 pl-5",
@@ -53888,9 +53936,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__*/jsx("span", {
-      className: "text-[10px] pl-5 opacity-40 truncate",
-      children: widget["package"]
+    }), widgetKey && /*#__PURE__*/jsx("span", {
+      className: "text-[10px] pl-5 opacity-40 font-mono truncate",
+      title: widgetKey,
+      children: widgetKey
     })]
   });
 };
@@ -54228,39 +54277,37 @@ var SidebarDiscoverContent = function SidebarDiscoverContent(_ref2) {
       children: /*#__PURE__*/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__*/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__*/jsx(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__*/jsxs("div", {
               className: "min-w-0 flex-1",
-              children: [/*#__PURE__*/jsx("div", {
-                className: "text-sm font-medium opacity-90 truncate",
-                children: pkg.displayName || pkg.name
-              }), /*#__PURE__*/jsxs("div", {
-                className: "flex items-center gap-1 text-[10px] opacity-50",
-                children: [pkg.author && /*#__PURE__*/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__*/jsx("span", {
-                  children: "\xB7"
-                }), ((_pkg$widgets5 = pkg.widgets) === null || _pkg$widgets5 === void 0 ? void 0 : _pkg$widgets5.length) > 0 && /*#__PURE__*/jsxs("span", {
-                  children: [pkg.widgets.length, " widget", pkg.widgets.length !== 1 ? "s" : ""]
-                }), isInstalled && /*#__PURE__*/jsxs(Fragment, {
-                  children: [/*#__PURE__*/jsx("span", {
-                    children: "\xB7"
-                  }), /*#__PURE__*/jsx("span", {
-                    className: "text-emerald-400",
-                    children: "Installed"
-                  })]
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsx("span", {
+                  className: "text-sm font-medium opacity-90 truncate flex-1 min-w-0",
+                  children: pkg.displayName || pkg.name
+                }), isInstalled && /*#__PURE__*/jsx("span", {
+                  className: "text-[10px] text-emerald-400 flex-shrink-0",
+                  children: "Installed"
                 })]
+              }), packageRef && /*#__PURE__*/jsx("div", {
+                className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                title: packageRef,
+                children: packageRef
+              }), /*#__PURE__*/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);
@@ -55217,56 +55264,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__";
 
-/**
- * Pick the most user-friendly display name for a widget instance.
- * Priority: per-instance user title → widget's default title → widget
- * developer's friendly displayName → widget config name → the bare
- * component name (last segment of the scoped id) → the full scoped
- * id (last resort, never preferred — but always present).
- *
- * This is what shows on the primary line of the WidgetsTab list and
- * detail header. The full scoped registry id (`scope.package.X`) is
- * surfaced separately via `pickWidgetRef` below, so the user sees
- * BOTH a friendly name and an unambiguous reference.
- */
-function pickDisplayName(item, cfg) {
-  var _item$userPrefs, _item$userConfig;
-  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 configDefault = 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;
-  if (typeof configDefault === "string" && configDefault.trim()) {
-    return configDefault;
-  }
-  if (cfg !== null && cfg !== void 0 && cfg.displayName) return cfg.displayName;
-  if (cfg !== null && cfg !== void 0 && cfg.name) return cfg.name;
-  var bare = bareComponentName(item === null || item === void 0 ? void 0 : item.component);
-  if (bare) return bare;
-  return (item === null || item === void 0 ? void 0 : item.component) || "Widget";
-}
-
-/**
- * Format the full scoped registry id (`scope.package.Component`) for
- * the subtitle. The friendly display name on line 1 may be a custom
- * per-instance title that doesn't reveal which widget is actually
- * mounted — the subtitle pins down the underlying widget identity so
- * the user can always see "this 'Q4 Pipeline' is actually a
- * `trops.pipeline.SalesPipeline`".
- *
- * Falls back to the cfg fields when the layout item is non-canonical
- * (legacy bare names that LayoutModel couldn't migrate). Returns
- * null when even those are missing — caller hides the subtitle.
- */
-function pickWidgetRef(item, cfg) {
-  if (parseScopedComponentId(item === null || item === void 0 ? void 0 : item.component)) return item.component;
-  var scope = (cfg === null || cfg === void 0 ? void 0 : cfg.scope) || (item === null || item === void 0 ? void 0 : item.scope);
-  var pkg = (cfg === null || cfg === void 0 ? void 0 : cfg.packageName) || (item === null || item === void 0 ? void 0 : item.packageName);
-  var comp = bareComponentName(item === null || item === void 0 ? void 0 : item.component) || (cfg === null || cfg === void 0 ? void 0 : cfg.name);
-  if (!scope || !pkg || !comp) return (item === null || item === void 0 ? void 0 : item.component) || null;
-  var bareScope = String(scope).replace(/^@/, "");
-  var barePkg = String(pkg).replace(new RegExp("^@?".concat(bareScope, "/")), "");
-  return "".concat(bareScope, ".").concat(barePkg, ".").concat(comp);
-}
-
 /**
  * WidgetsTab
  *
@@ -55311,8 +55308,8 @@ var WidgetsTab = function WidgetsTab(_ref) {
         result.push({
           id: id,
           component: item.component,
-          displayName: pickDisplayName(item, cfg),
-          widgetRef: pickWidgetRef(item, cfg),
+          displayName: pickWidgetDisplayName(item, cfg),
+          widgetRef: pickWidgetRef(item),
           section: section,
           userConfig: cfg.userConfig || {},
           userPrefs: item.userPrefs || {},
@@ -56370,13 +56367,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__*/jsx("span", {
                         className: "truncate",
-                        children: row.component || "widget"
+                        children: row.label || row.component || "widget"
                       }), isRequired && /*#__PURE__*/jsx("span", {
                         className: needsAttention ? "text-red-300" : "text-indigo-300",
                         title: "Required provider",
                         "aria-label": "required",
                         children: "*"
                       })]
+                    }), (row.widgetRef || row.component) && /*#__PURE__*/jsx("div", {
+                      className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                      title: row.widgetRef || row.component,
+                      children: row.widgetRef || row.component
                     }), /*#__PURE__*/jsxs("div", {
                       className: "flex items-center gap-1.5 mt-1 text-[10px]",
                       children: [/*#__PURE__*/jsx("span", {
@@ -56576,16 +56577,20 @@ function ListenersTab(_ref9) {
           className: "overflow-y-auto flex-1",
           children: receivers.map(function (r) {
             var isActive = r.key === selectedReceiverKey;
-            return /*#__PURE__*/jsx("button", {
+            return /*#__PURE__*/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__*/jsx("span", {
+              children: [/*#__PURE__*/jsx("div", {
                 className: "text-sm font-medium truncate",
                 children: r.label
-              })
+              }), r.widgetRef && /*#__PURE__*/jsx("div", {
+                className: "text-[10px] opacity-50 font-mono truncate mt-0.5",
+                title: r.widgetRef,
+                children: r.widgetRef
+              })]
             }, r.key);
           })
         })]
@@ -56776,9 +56781,15 @@ function EventsColumn(_ref10) {
       }) : emittersForList.map(function (e) {
         return /*#__PURE__*/jsxs("div", {
           className: "space-y-1",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "text-xs font-semibold opacity-50 uppercase tracking-wider",
-            children: e.label
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex flex-col gap-0.5 mb-1",
+            children: [/*#__PURE__*/jsx("div", {
+              className: "text-sm font-semibold",
+              children: e.label
+            }), (e.widgetRef || e.component) && /*#__PURE__*/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);