@trops/dash-core 0.1.662 → 0.1.664

package/dist/index.js

@@ -47222,6 +47222,14 @@ function _arrayLikeToArray$n(r, a) { (null == a || a > r.length) && (a = r.lengt
  * Pure: no React, no IPC.
  */
 
+/** Status dot colours shared by the Bots view and Dashboard Config › Bots. */
+var STATUS_DOT$2 = {
+  Idle: "bg-gray-500",
+  Running: "bg-indigo-400",
+  Paused: "bg-gray-400",
+  "Needs approval": "bg-amber-400",
+  Failed: "bg-red-400"
+};
 var norm = function norm(id) {
   return id === undefined || id === null || id === "" ? null : String(id);
 };
@@ -55544,6 +55552,68 @@ var PrivacySecurityList = function PrivacySecurityList(_ref) {
   });
 };
 
+function useConfigTokens() {
+  var _ref = React.useContext(DashReact.ThemeContext) || {},
+    _ref$currentTheme = _ref.currentTheme,
+    currentTheme = _ref$currentTheme === void 0 ? {} : _ref$currentTheme;
+  return {
+    muted: currentTheme["text-neutral-medium"] || "text-gray-400",
+    strong: currentTheme["text-neutral-light"] || "text-gray-200",
+    hairline: currentTheme["border-neutral-dark"] || "border-gray-700",
+    selectedBg: currentTheme["bg-neutral-very-dark"] || "bg-gray-800",
+    selectedBorder: currentTheme["border-primary-dark"] || "border-gray-600",
+    fieldBg: currentTheme["bg-neutral-very-dark"] || "bg-gray-900"
+  };
+}
+
+/**
+ * A row in one of the modal's left-hand lists (provider types, widgets,
+ * event handlers) — styled like the Bots view's team list.
+ *
+ * @param {{ title: React.ReactNode, subtitle?: React.ReactNode,
+ *           meta?: React.ReactNode, badge?: React.ReactNode,
+ *           active?: boolean, mono?: boolean, onClick: () => void }} props
+ *   `subtitle` is a registry id (monospace); `meta` a muted count line.
+ */
+var ConfigListRow = function ConfigListRow(_ref2) {
+  var title = _ref2.title,
+    _ref2$subtitle = _ref2.subtitle,
+    subtitle = _ref2$subtitle === void 0 ? null : _ref2$subtitle,
+    _ref2$meta = _ref2.meta,
+    meta = _ref2$meta === void 0 ? null : _ref2$meta,
+    _ref2$badge = _ref2.badge,
+    badge = _ref2$badge === void 0 ? null : _ref2$badge,
+    _ref2$active = _ref2.active,
+    active = _ref2$active === void 0 ? false : _ref2$active,
+    _ref2$mono = _ref2.mono,
+    mono = _ref2$mono === void 0 ? false : _ref2$mono,
+    onClick = _ref2.onClick;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    selectedBg = _useConfigTokens.selectedBg,
+    selectedBorder = _useConfigTokens.selectedBorder;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    "aria-current": active ? "true" : undefined,
+    className: "w-full text-left rounded-lg px-3 py-2 border ".concat(active ? "".concat(selectedBg, " ").concat(selectedBorder) : "border-transparent"),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row items-center justify-between gap-2 min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium truncate ".concat(mono ? "font-mono" : ""),
+        children: title
+      }), badge]
+    }), subtitle ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
+      title: typeof subtitle === "string" ? subtitle : undefined,
+      children: subtitle
+    }) : null, meta ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-xs mt-0.5 ".concat(muted),
+      children: meta
+    }) : null]
+  });
+};
+
 /**
  * grantStaleness
  *
@@ -55714,6 +55784,8 @@ var ToolToggleList = function ToolToggleList(_ref2) {
     serverName = _ref2.serverName,
     onToggleTool = _ref2.onToggleTool,
     hasAnyGrantOnServer = _ref2.hasAnyGrantOnServer;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted;
   if (declaredTools.length === 0 && grantedTools.length === 0) return null;
   var grantedSet = new Set(grantedTools);
   var staleSet = computeStaleItems(declaredTools, grantedTools, true);
@@ -55721,7 +55793,7 @@ var ToolToggleList = function ToolToggleList(_ref2) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col space-y-1",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-xs opacity-50",
+      className: "text-xs ".concat(muted),
       children: "Tools"
     }), all.map(function (tool) {
       var isGranted = grantedSet.has(tool);
@@ -55732,7 +55804,7 @@ var ToolToggleList = function ToolToggleList(_ref2) {
       // always allowed when the tool IS granted.
       var disabled = !isGranted && !hasAnyGrantOnServer;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row items-center justify-between gap-2 py-1 px-2 -mx-2 rounded hover:bg-gray-800 transition-colors",
+        className: "flex flex-row items-center justify-between gap-2 py-1 px-2 -mx-2 rounded-lg",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "text-xs font-mono break-all ".concat(isStale ? "text-amber-400" : isGranted ? "opacity-100" : "opacity-50"),
           children: [tool, isStale && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -55756,6 +55828,8 @@ var PermsList = function PermsList(_ref3) {
     grantedItems = _ref3.grantedItems,
     validatesStale = _ref3.validatesStale,
     onDeleteItem = _ref3.onDeleteItem;
+  var _useConfigTokens2 = useConfigTokens(),
+    muted = _useConfigTokens2.muted;
   if (declaredItems.length === 0 && grantedItems.length === 0) return null;
   var grantedSet = new Set(grantedItems);
   var staleSet = computeStaleItems(declaredItems, grantedItems, validatesStale);
@@ -55763,14 +55837,14 @@ var PermsList = function PermsList(_ref3) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col space-y-1",
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-xs opacity-50",
+      className: "text-xs ".concat(muted),
       children: label
     }), all.map(function (item) {
       var isGranted = grantedSet.has(item);
       var isStale = staleSet.has(item);
       var showTrash = isGranted && typeof onDeleteItem === "function";
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-row items-start justify-between gap-2 py-1 px-2 -mx-2 rounded hover:bg-gray-800 transition-colors",
+        className: "flex flex-row items-start justify-between gap-2 py-1 px-2 -mx-2 rounded-lg",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "text-xs font-mono break-all ".concat(isStale ? "text-amber-400" : isGranted ? "opacity-100" : "opacity-50 line-through"),
           children: [item, isStale && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -55806,23 +55880,26 @@ var RevokeConfirmInline = function RevokeConfirmInline(_ref4) {
     body = _ref4.body,
     onCancel = _ref4.onCancel,
     onConfirm = _ref4.onConfirm;
+  var _useConfigTokens3 = useConfigTokens(),
+    muted = _useConfigTokens3.muted,
+    strong = _useConfigTokens3.strong;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col gap-2 border border-amber-500 rounded p-2 mt-1",
+    className: "flex flex-col gap-2 border border-amber-500 rounded-lg p-2 mt-1",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-row items-center gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
         icon: "triangle-exclamation",
         className: "h-3 w-3 text-amber-500"
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-xs font-semibold text-gray-100",
+        className: "text-xs font-semibold ".concat(strong),
         children: title
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "text-xs text-gray-300 leading-relaxed",
+      className: "text-xs leading-relaxed ".concat(muted),
       children: body
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex justify-end gap-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
         title: "Cancel",
         onClick: onCancel,
         size: "sm"
@@ -55857,8 +55934,12 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
     pendingRevoke = _useState2[0],
     setPendingRevoke = _useState2[1];
   var widgetSummary = describeWidgetGrant(grantedServers);
+  var _useConfigTokens4 = useConfigTokens(),
+    muted = _useConfigTokens4.muted,
+    hairline = _useConfigTokens4.hairline;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col space-y-3 border border-gray-700 rounded p-3",
+    "data-testid": "widget-grant-row",
+    className: "flex flex-col space-y-3 rounded-lg border px-3 py-2 ".concat(hairline),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-row items-center justify-between gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -55874,11 +55955,11 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row gap-2",
-        children: [!hasManifest && !granted && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        children: [!hasManifest && !granted && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
           title: "Grant manually",
           onClick: onGrantManually,
           size: "sm"
-        }), Object.keys(grantedServers).length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        }), Object.keys(grantedServers).length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
           title: "Revoke all",
           onClick: function onClick() {
             return setPendingRevoke("widget");
@@ -55897,18 +55978,19 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
         onRevokeWidget && onRevokeWidget();
       }
     }), !declared && !granted && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-xs opacity-50",
+      className: "text-xs ".concat(muted),
       children: "This widget did not declare MCP permissions and the install-time scanner found nothing. Use Grant manually if you trust it."
     }), allServerNames.map(function (serverName) {
       var decl = declaredServers[serverName] || {};
       var grant = grantedServers[serverName];
       var allStale = isServerEntirelyStale(decl, grant);
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col space-y-2 border-t border-gray-800 pt-2",
+        "data-testid": "grant-server-".concat(serverName),
+        className: "flex flex-col space-y-2 border-t pt-2 ".concat(hairline),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-row items-center justify-between gap-2",
           children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "text-xs uppercase tracking-wider opacity-70",
+            className: "text-xs uppercase tracking-wider ".concat(muted),
             children: [serverName, (grant === null || grant === void 0 ? void 0 : grant._labels) && grant._labels.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
               className: "ml-2 normal-case tracking-normal opacity-60",
               children: ["(", grant._labels.join(", "), ")"]
@@ -55921,7 +56003,7 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
             children: [(decl.tools || []).length > 0 && onToggleAllForServer && /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "flex flex-row items-center gap-2",
               children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-xs opacity-60 normal-case tracking-normal",
+                className: "text-xs normal-case tracking-normal ".concat(muted),
                 children: "Allow all"
               }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Switch, {
                 checked: (decl.tools || []).length > 0 && (decl.tools || []).every(function (t) {
@@ -55931,7 +56013,7 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
                   return onToggleAllForServer(widgetId, serverName, next);
                 }
               })]
-            }), grant && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            }), grant && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
               title: "Revoke server",
               onClick: function onClick() {
                 return setPendingRevoke({
@@ -55953,7 +56035,7 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
             onRevokeServer && onRevokeServer(serverName);
           }
         }), allStale && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-xs text-amber-400 bg-amber-900 bg-opacity-20 border border-amber-700 rounded px-2 py-1.5",
+          className: "text-xs text-amber-400 border border-amber-400 rounded-lg px-2 py-1.5",
           children: "All grants on this server are no longer in the manifest \u2014 the widget likely no longer uses this server. Consider revoking."
         }), /*#__PURE__*/jsxRuntime.jsx(ToolToggleList, {
           declaredTools: decl.tools || [],
@@ -55982,9 +56064,9 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
         })]
       }, serverName);
     }), (granted === null || granted === void 0 || (_granted$domains = granted.domains) === null || _granted$domains === void 0 ? void 0 : _granted$domains.fs) && ((granted.domains.fs.readPaths || []).length > 0 || (granted.domains.fs.writePaths || []).length > 0) && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col space-y-2 border-t border-gray-800 pt-2",
+      className: "flex flex-col space-y-2 border-t pt-2 ".concat(hairline),
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-xs uppercase tracking-wider opacity-70",
+        className: "text-xs uppercase tracking-wider ".concat(muted),
         children: "filesystem"
       }), Array.isArray(granted.domains.fs.actions) && granted.domains.fs.actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(PermsList, {
         label: "Actions",
@@ -56012,9 +56094,9 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
         } : undefined
       })]
     }), (granted === null || granted === void 0 || (_granted$domains2 = granted.domains) === null || _granted$domains2 === void 0 ? void 0 : _granted$domains2.network) && (granted.domains.network.hosts || []).length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-col space-y-2 border-t border-gray-800 pt-2",
+      className: "flex flex-col space-y-2 border-t pt-2 ".concat(hairline),
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-xs uppercase tracking-wider opacity-70",
+        className: "text-xs uppercase tracking-wider ".concat(muted),
         children: "network"
       }), Array.isArray(granted.domains.network.actions) && granted.domains.network.actions.length > 0 && /*#__PURE__*/jsxRuntime.jsx(PermsList, {
         label: "Actions",
@@ -61241,6 +61323,9 @@ var WidgetsTab = function WidgetsTab(_ref) {
     stagedPrefs = _ref.stagedPrefs,
     stagePrefField = _ref.stagePrefField,
     stagePrefFieldForAll = _ref.stagePrefFieldForAll;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    hairline = _useConfigTokens.hairline;
   // Flatten every widget on the workspace, preserving which layout
   // section each came from (Main / Page N / Sidebar) so the left
   // column can group them cleanly. forEachWidget already dedupes.
@@ -61361,67 +61446,55 @@ var WidgetsTab = function WidgetsTab(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "w-64 border-r border-white/10 overflow-y-auto flex-shrink-0",
-      children: [sharedFields.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("button", {
-        onClick: function onClick() {
-          return setSelectedId(ALL_WIDGETS_ID);
-        },
-        className: "w-full text-left px-4 py-3 border-b border-white/10 transition-colors ".concat(isAllMode ? "bg-indigo-600/20 text-indigo-200" : "hover:bg-white/5 text-gray-300"),
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2",
+      className: "w-64 border-r overflow-y-auto flex-shrink-0 p-3 flex flex-col gap-1 ".concat(hairline),
+      children: [sharedFields.length > 0 && /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+        title: /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "flex flex-row items-center gap-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "layer-group",
             className: "h-3.5 w-3.5"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "font-semibold text-sm",
-            children: "All Widgets"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-[11px] text-gray-500 mt-0.5",
-          children: [sharedFields.length, " shared field", sharedFields.length === 1 ? "" : "s", " \xB7 bulk edit"]
-        })]
+          }), "All Widgets"]
+        }),
+        meta: "".concat(sharedFields.length, " shared field").concat(sharedFields.length === 1 ? "" : "s", " \xB7 bulk edit"),
+        active: isAllMode,
+        onClick: function onClick() {
+          return setSelectedId(ALL_WIDGETS_ID);
+        }
       }), groupedWidgets.map(function (_ref2) {
         var _ref3 = _slicedToArray(_ref2, 2),
           section = _ref3[0],
           sectionWidgets = _ref3[1];
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "px-4 pt-3 pb-1 text-[10px] uppercase tracking-wider text-gray-600 font-semibold",
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+            className: "px-3 pt-3 pb-1",
             children: section
           }), sectionWidgets.map(function (w) {
             var fieldCount = Object.keys(w.userConfig).length;
             var stagedForWidget = stagedPrefs !== null && stagedPrefs !== void 0 && stagedPrefs[w.id] ? Object.keys(stagedPrefs[w.id]).length : 0;
-            var isSel = selectedId === w.id;
-            return /*#__PURE__*/jsxRuntime.jsxs("button", {
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: w.displayName,
+              subtitle: w.widgetRef || null,
+              meta: fieldCount === 0 ? "No configurable fields" : "".concat(fieldCount, " field").concat(fieldCount === 1 ? "" : "s"),
+              badge: stagedForWidget > 0 ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+                className: "flex flex-row items-center gap-1.5 text-xs text-amber-400 flex-shrink-0",
+                title: "Unsaved changes",
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+                }), stagedForWidget]
+              }) : null,
+              active: selectedId === w.id,
               onClick: function onClick() {
                 return setSelectedId(w.id);
-              },
-              className: "w-full text-left px-4 py-2 transition-colors ".concat(isSel ? "bg-indigo-600/20 text-indigo-200" : "hover:bg-white/5 text-gray-300"),
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex items-center justify-between",
-                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                  className: "text-sm truncate",
-                  children: w.displayName
-                }), stagedForWidget > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
-                  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")
-              })]
+              }
             }, w.id);
           })]
         }, section);
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 overflow-y-auto p-4 min-w-0",
+      className: "flex-1 overflow-y-auto p-5 min-w-0",
       children: [!selectedId && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm text-gray-500 italic",
+        className: "text-sm italic ".concat(muted),
         children: "Select a widget from the list."
       }), isAllMode && /*#__PURE__*/jsxRuntime.jsx(BulkEditPane, {
         sharedFields: sharedFields,
@@ -61441,19 +61514,22 @@ function SingleWidgetPane(_ref4) {
   var widget = _ref4.widget,
     effectivePrefs = _ref4.effectivePrefs,
     onFieldChange = _ref4.onFieldChange;
+  var _useConfigTokens2 = useConfigTokens(),
+    muted = _useConfigTokens2.muted,
+    strong = _useConfigTokens2.strong;
   var hasFields = Object.keys(widget.userConfig).length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-3",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-gray-200 font-semibold",
+        className: "font-semibold ".concat(strong),
         children: widget.displayName
       }), widget.widgetRef && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-500 font-mono truncate mt-0.5",
+        className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
         title: widget.widgetRef,
         children: widget.widgetRef
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-600 mt-0.5",
+        className: "text-xs mt-0.5 ".concat(muted),
         children: widget.section
       })]
     }), hasFields ? /*#__PURE__*/jsxRuntime.jsx(PanelEditForm, {
@@ -61461,7 +61537,7 @@ function SingleWidgetPane(_ref4) {
       userPrefs: effectivePrefs,
       onFieldChange: onFieldChange
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "text-sm text-gray-500 italic",
+      className: "text-sm italic ".concat(muted),
       children: "This widget has no configurable fields. It may be event-driven \u2014 pair it with a widget that publishes the events it listens for."
     })]
   });
@@ -61470,14 +61546,17 @@ function BulkEditPane(_ref5) {
   var sharedFields = _ref5.sharedFields,
     stagedPrefs = _ref5.stagedPrefs,
     onApplyAll = _ref5.onApplyAll;
+  var _useConfigTokens3 = useConfigTokens(),
+    muted = _useConfigTokens3.muted,
+    strong = _useConfigTokens3.strong;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-3",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-gray-200 font-semibold",
+        className: "font-semibold ".concat(strong),
         children: "All Widgets"
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs text-gray-500",
+        className: "text-xs ".concat(muted),
         children: "Fields declared by 2+ widgets on this dashboard. Apply once to update every matching widget."
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -61489,7 +61568,7 @@ function BulkEditPane(_ref5) {
           onApplyAll: onApplyAll
         }, "".concat(field.key, "::").concat(field.schema.type));
       }), sharedFields.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm text-gray-500 italic",
+        className: "text-sm italic ".concat(muted),
         children: "No shared fields across widgets on this dashboard."
       })]
     })]
@@ -61516,32 +61595,38 @@ function SharedFieldRow(_ref6) {
     if (allSame) setDraft(distinctValues[0]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allSame, distinctValues[0]]);
+  var _useConfigTokens4 = useConfigTokens(),
+    muted = _useConfigTokens4.muted,
+    strong = _useConfigTokens4.strong,
+    hairline = _useConfigTokens4.hairline,
+    fieldBg = _useConfigTokens4.fieldBg;
+  var fieldClass = "w-full px-2 py-1.5 rounded-lg border text-sm ".concat(fieldBg, " ").concat(hairline, " ").concat(strong);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "border border-white/10 rounded p-3",
+    className: "rounded-lg border p-3 ".concat(hairline),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-start justify-between gap-3 mb-2",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-1 min-w-0",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-sm text-gray-200 font-semibold",
+          className: "text-sm font-semibold ".concat(strong),
           children: field.schema.displayName || field.key
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "text-[11px] text-gray-500",
+          className: "text-xs ".concat(muted),
           children: ["Applies to ", field.widgets.length, " widgets", allSame ? "" : " \xB7 ".concat(distinctValues.length, " distinct values in use")]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx("button", {
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+        title: "Apply to all",
+        size: "sm",
         onClick: function onClick() {
           return onApplyAll(field.widgets, field.key, draft);
-        },
-        className: "px-3 py-1 text-xs bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-colors",
-        children: "Apply to all"
+        }
       })]
     }), field.schema.type === "select" ? /*#__PURE__*/jsxRuntime.jsx("select", {
       value: draft,
       onChange: function onChange(e) {
         return setDraft(e.target.value);
       },
-      className: "w-full px-2 py-1.5 bg-gray-900 border border-white/10 rounded text-sm text-gray-200",
+      className: fieldClass,
       children: (field.schema.options || []).map(function (opt) {
         return /*#__PURE__*/jsxRuntime.jsx("option", {
           value: opt.value,
@@ -61555,7 +61640,7 @@ function SharedFieldRow(_ref6) {
         return setDraft(e.target.value);
       },
       placeholder: allSame ? "" : "(multiple values — set one for all)",
-      className: "w-full px-2 py-1.5 bg-gray-900 border border-white/10 rounded text-sm text-gray-200"
+      className: fieldClass
     })]
   });
 }
@@ -61583,6 +61668,13 @@ var PermissionsTab = function PermissionsTab(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     busy = _useState8[0],
     setBusy = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    confirmRevokeAll = _useState0[0],
+    setConfirmRevokeAll = _useState0[1];
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    hairline = _useConfigTokens.hairline;
 
   // Build the set of widget identifiers in this workspace. Walk every
   // layout location (main, pages, sidebar). `pickWidgetRef` returns
@@ -62111,7 +62203,7 @@ var PermissionsTab = function PermissionsTab(_ref) {
   }).length;
   if (loading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "text-sm opacity-60 p-4",
+      className: "text-sm p-4 ".concat(muted),
       children: "Loading permissions\u2026"
     });
   }
@@ -62119,10 +62211,10 @@ var PermissionsTab = function PermissionsTab(_ref) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-3 p-4",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-sm opacity-70",
+        className: "text-sm",
         children: "No widgets in this dashboard request any MCP permissions."
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs opacity-50",
+        className: "text-xs ".concat(muted),
         children: "Permissions only show up here when a widget's published manifest (or local source) declares MCP tool usage."
       })]
     });
@@ -62130,32 +62222,66 @@ var PermissionsTab = function PermissionsTab(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0 flex flex-row items-center justify-between gap-2 pb-3",
+      className: "flex-shrink-0 flex flex-row items-center justify-between gap-2 pb-3 border-b ".concat(hairline),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "text-sm font-medium",
           children: [filteredRows.length, " widget", filteredRows.length === 1 ? "" : "s", " with permissions in this dashboard"]
         }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-          className: "text-xs opacity-60 mt-0.5",
+          className: "text-xs mt-0.5 ".concat(muted),
           children: [totalGranted, " currently granted across ", totalDeclared, " declared server", totalDeclared === 1 ? "" : "s"]
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
           title: "Allow all declared",
           onClick: approveAllInDashboard,
           disabled: busy,
           size: "sm"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          "data-testid": "permissions-revoke-all",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+            title: "Revoke all",
+            onClick: function onClick() {
+              return setConfirmRevokeAll(true);
+            },
+            disabled: busy || totalGranted === 0,
+            size: "sm"
+          })
+        })]
+      })]
+    }), confirmRevokeAll && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-testid": "permissions-revoke-all-confirm",
+      className: "flex-shrink-0 flex flex-row items-center justify-between gap-3 rounded-lg border border-amber-400 px-3 py-2 mt-3",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-0.5 min-w-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm font-medium",
+          children: "Revoke all permissions for this dashboard?"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs ".concat(muted),
+          children: "Every widget here will ask for consent again the next time it uses a tool."
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2 flex-shrink-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+          title: "Cancel",
+          size: "sm",
+          onClick: function onClick() {
+            return setConfirmRevokeAll(false);
+          }
         }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-          title: "Revoke all",
-          onClick: revokeAllInDashboard,
-          disabled: busy || totalGranted === 0,
-          size: "sm"
+          title: "Revoke",
+          size: "sm",
+          onClick: function onClick() {
+            setConfirmRevokeAll(false);
+            revokeAllInDashboard();
+          }
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), error && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 text-xs text-red-400 bg-red-900/20 border border-red-700 rounded p-2 mt-3",
+    }), error && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 text-xs text-red-400 mt-3",
       children: error
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-1 min-h-0 overflow-y-auto pt-3 space-y-3",
@@ -62745,15 +62871,38 @@ function useTeamBots(workspaceId) {
   }, [bots, running, paused, approvals, lastRunByBot, loading, approve, refresh, loadLastRun, drafts, dismissDraft]);
 }
 
-var BotsTab = function BotsTab(_ref) {
-  var workspace = _ref.workspace,
-    _ref$onOpenBotsView = _ref.onOpenBotsView,
-    onOpenBotsView = _ref$onOpenBotsView === void 0 ? null : _ref$onOpenBotsView;
+var StatusDot = function StatusDot(_ref) {
+  var status = _ref.status,
+    muted = _ref.muted;
+  var dot = STATUS_DOT$2[status] || STATUS_DOT$2.Idle;
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    "data-testid": "bot-status",
+    className: "flex flex-row items-center gap-1.5 text-xs flex-shrink-0 ".concat(muted),
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      "data-testid": "bot-status-dot",
+      className: "inline-block h-2 w-2 rounded-full ".concat(dot)
+    }), status]
+  });
+};
+
+/**
+ * BotsTab — Dashboard Config › Bots: a read-only summary of this dashboard's
+ * team (bot-teams PRD TEAM-011). Managing bots — adding, editing, talking to
+ * them — happens in the Bots view; "Open in Bots view" goes there.
+ */
+var BotsTab = function BotsTab(_ref2) {
+  var workspace = _ref2.workspace,
+    _ref2$onOpenBotsView = _ref2.onOpenBotsView,
+    onOpenBotsView = _ref2$onOpenBotsView === void 0 ? null : _ref2$onOpenBotsView;
   var team = useTeamBots(workspace ? workspace.id : null);
   var lead = team.lead,
     members = team.members,
     attention = team.attention,
     loading = team.loading;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted,
+    hairline = _useConfigTokens.hairline;
+  var card = "rounded-lg border px-3 py-2 flex flex-row items-center justify-between gap-3 ".concat(hairline);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col gap-4 h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -62763,7 +62912,7 @@ var BotsTab = function BotsTab(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
           text: "This dashboard's team"
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-xs opacity-60",
+          className: "text-xs ".concat(muted),
           children: ["".concat(members.length, " bot").concat(members.length === 1 ? "" : "s"), lead ? "led by ".concat(lead.name) : "no team lead", attention > 0 ? "".concat(attention, " need").concat(attention === 1 ? "s" : "", " attention") : null].filter(Boolean).join(" · ")
         })]
       }), onOpenBotsView ? /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
@@ -62772,12 +62921,25 @@ var BotsTab = function BotsTab(_ref) {
         onClick: onOpenBotsView
       }) : null]
     }), lead ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-row items-center gap-2 text-sm",
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "font-medium",
-        children: lead.name
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
-        text: "Lead"
+      className: card,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-0.5 min-w-0",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center gap-2 text-sm",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-medium truncate",
+            children: lead.name
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs uppercase tracking-wider font-semibold ".concat(muted),
+            children: "Lead"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs truncate ".concat(muted),
+          children: "Answers questions about this team"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(StatusDot, {
+        status: team.statusOf(lead.id),
+        muted: muted
       })]
     }) : null, !loading && !members.length ? /*#__PURE__*/jsxRuntime.jsx(DashReact.EmptyState, {
       icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -62787,21 +62949,22 @@ var BotsTab = function BotsTab(_ref) {
       title: "No bots on this dashboard yet",
       description: "Add bots, talk to them and change their settings in the Bots view."
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex flex-col gap-1 overflow-y-auto min-h-0",
+      className: "flex flex-col gap-2 overflow-y-auto min-h-0",
       children: members.map(function (bot) {
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-row items-center justify-between gap-3 py-2 border-b",
+          className: card,
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col gap-1 min-w-0",
+            className: "flex flex-col gap-0.5 min-w-0",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
               className: "text-sm font-medium truncate",
               children: bot.name
             }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs opacity-60",
+              className: "text-xs truncate ".concat(muted),
               children: triggerSummary(bot)
             })]
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
-            text: team.statusOf(bot.id)
+          }), /*#__PURE__*/jsxRuntime.jsx(StatusDot, {
+            status: team.statusOf(bot.id),
+            muted: muted
           })]
         }, bot.id);
       })
@@ -62814,30 +62977,88 @@ function _unsupportedIterableToArray$9(r, a) { if (r) { if ("string" == typeof r
 function _arrayLikeToArray$9(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; }
 function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DashboardConfigModal = function DashboardConfigModal(_ref) {
-  var isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    workspace = _ref.workspace;
-    _ref.workspaces;
-    var appProviders = _ref.appProviders,
-    getWidgetRequirements = _ref.getWidgetRequirements,
-    _ref$getWidgetConfig = _ref.getWidgetConfig,
-    getWidgetConfig = _ref$getWidgetConfig === void 0 ? null : _ref$getWidgetConfig,
-    onSaveBindings = _ref.onSaveBindings,
-    onSaveListeners = _ref.onSaveListeners,
-    _ref$onSaveUserPrefs = _ref.onSaveUserPrefs,
-    onSaveUserPrefs = _ref$onSaveUserPrefs === void 0 ? null : _ref$onSaveUserPrefs,
-    _ref$onSkip = _ref.onSkip,
-    onSkip = _ref$onSkip === void 0 ? null : _ref$onSkip,
-    _ref$initialTab = _ref.initialTab,
-    initialTab = _ref$initialTab === void 0 ? "providers" : _ref$initialTab,
-    _ref$onOpenBotsView = _ref.onOpenBotsView,
-    onOpenBotsView = _ref$onOpenBotsView === void 0 ? null : _ref$onOpenBotsView;
+var ConfigTab = function ConfigTab(_ref) {
+  var active = _ref.active,
+    onClick = _ref.onClick,
+    children = _ref.children;
+  var _useConfigTokens = useConfigTokens(),
+    muted = _useConfigTokens.muted;
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    role: "tab",
+    "aria-selected": active,
+    onClick: onClick,
+    className: "py-2.5 text-sm font-medium -mb-px border-b-2 ".concat(active ? "border-indigo-400" : "border-transparent ".concat(muted)),
+    children: children
+  });
+};
+
+/**
+ * DashboardConfigModal
+ *
+ * Workspace-scoped wiring panel. Lets a user assign providers to every
+ * widget in the current workspace from one place instead of opening each
+ * widget's settings individually. v1 ships the Providers tab; Listeners
+ * tab lands in a follow-up PR (data model needs more exploration).
+ *
+ * Auto-opens on dashboard install when any required provider is still
+ * unresolved after applying app-wide defaults. Also openable manually
+ * via the dashboard toolbar's config button.
+ *
+ * @param {boolean} isOpen
+ * @param {(open: boolean) => void} setIsOpen
+ * @param {object}   workspace          Current workspace (layout/pages/sidebarLayout/selectedProviders).
+ * @param {object|Array} appProviders   Either a map keyed by provider name, or an array. Each entry has
+ *                                      at least { name?, type, providerClass, isDefaultForType }.
+ * @param {(componentName: string) => Array} getWidgetRequirements
+ *                                      Called per widget instance. Should return the `providers: [...]`
+ *                                      array from the component's .dash.js. Usually backed by
+ *                                      ComponentManager.componentMap().
+ * @param {(componentName: string) => object | null} getWidgetConfig
+ *                                      Called per widget instance. Returns the full ComponentManager
+ *                                      entry (events, eventHandlers, displayName, …). Used by the
+ *                                      Listeners tab to discover what each widget emits/handles.
+ * @param {(changes: Array<{widgetId, providerType, providerName}>) => void} onSaveBindings
+ *                                      Called with the staged provider changes on Save. The parent persists
+ *                                      by forwarding to its existing `handleProviderSelect` /
+ *                                      `saveWorkspace` plumbing.
+ * @param {(changes: {adds: Array, removes: Array}) => void} onSaveListeners
+ *                                      Called with the staged listener changes on Save. Each entry is
+ *                                      `{ receiverItemId, handlerName, sourceComponent, sourceItemId, eventName }`.
+ *                                      Parent uses `applyWiringChanges` + saveWorkspace.
+ * @param {(changes: Array<{widgetId, key, value}>) => void} onSaveUserPrefs
+ *                                      Called with the staged widget userPrefs changes on Save. Parent
+ *                                      applies them to workspace + persists via saveWorkspace. Enables
+ *                                      bulk-edit of fields shared across widgets (e.g. basePath).
+ * @param {"providers"|"listeners"|"widgets"} initialTab  Which tab to focus when the modal opens.
+ */
+var DashboardConfigModal = function DashboardConfigModal(_ref2) {
+  var isOpen = _ref2.isOpen,
+    setIsOpen = _ref2.setIsOpen,
+    workspace = _ref2.workspace;
+    _ref2.workspaces;
+    var appProviders = _ref2.appProviders,
+    getWidgetRequirements = _ref2.getWidgetRequirements,
+    _ref2$getWidgetConfig = _ref2.getWidgetConfig,
+    getWidgetConfig = _ref2$getWidgetConfig === void 0 ? null : _ref2$getWidgetConfig,
+    onSaveBindings = _ref2.onSaveBindings,
+    onSaveListeners = _ref2.onSaveListeners,
+    _ref2$onSaveUserPrefs = _ref2.onSaveUserPrefs,
+    onSaveUserPrefs = _ref2$onSaveUserPrefs === void 0 ? null : _ref2$onSaveUserPrefs,
+    _ref2$onSkip = _ref2.onSkip,
+    onSkip = _ref2$onSkip === void 0 ? null : _ref2$onSkip,
+    _ref2$initialTab = _ref2.initialTab,
+    initialTab = _ref2$initialTab === void 0 ? "providers" : _ref2$initialTab,
+    _ref2$onOpenBotsView = _ref2.onOpenBotsView,
+    onOpenBotsView = _ref2$onOpenBotsView === void 0 ? null : _ref2$onOpenBotsView;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
     grow: false
   });
+  var _useConfigTokens2 = useConfigTokens(),
+    muted = _useConfigTokens2.muted,
+    hairline = _useConfigTokens2.hairline;
 
   // Active tab. Defaults to whatever the parent requested via
   // `initialTab`. Resets on each open via the modal's mount cycle.
@@ -63046,10 +63267,10 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     }
     return Array.from(byPackage.values()).map(function (e) {
       return _objectSpread$e(_objectSpread$e({}, e), {}, {
-        components: Array.from(e.components.entries()).map(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            component = _ref3[0],
-            count = _ref3[1];
+        components: Array.from(e.components.entries()).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            component = _ref4[0],
+            count = _ref4[1];
           return {
             component: component,
             count: count
@@ -63370,80 +63591,84 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col h-full w-full rounded-lg overflow-clip border ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || ""),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 flex flex-row items-center justify-between p-4",
+        className: "flex-shrink-0 flex flex-row items-start justify-between px-5 pt-4",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-3",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "sliders",
-            className: "h-4 w-4 opacity-70"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-lg font-semibold",
-            children: "Dashboard Config"
-          }), unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag, {
-            text: "".concat(unresolvedCount, " unresolved"),
-            className: "bg-amber-900/40 text-amber-200"
-          })]
+          className: "flex flex-col gap-0.5 min-w-0",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center gap-3",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "sliders",
+              className: "h-4 w-4 opacity-70"
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-lg font-semibold",
+              children: "Dashboard Config"
+            }), unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              "data-testid": "config-unresolved",
+              className: "flex flex-row items-center gap-1.5 text-sm text-amber-400",
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              }), unresolvedCount, " unresolved"]
+            })]
+          }), workspace !== null && workspace !== void 0 && workspace.name ? /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm truncate ".concat(muted),
+            children: workspace.name
+          }) : null]
         }), /*#__PURE__*/jsxRuntime.jsx("button", {
           type: "button",
           onClick: handleCancel,
+          "aria-label": "Close",
           className: "opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
           children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "xmark",
             className: "h-5 w-5"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 flex flex-row items-center gap-2 px-4 pt-3",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "tablist",
+        className: "flex-shrink-0 flex flex-row gap-6 px-5 mt-3 border-b ".concat(hairline),
+        children: [/*#__PURE__*/jsxRuntime.jsxs(ConfigTab, {
+          active: activeTab === "providers",
           onClick: function onClick() {
             return setActiveTab("providers");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "providers" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: ["Providers", unresolvedCount > 0 && /*#__PURE__*/jsxRuntime.jsx("span", {
             className: "ml-2 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle"
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "listeners",
           onClick: function onClick() {
             return setActiveTab("listeners");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "listeners" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Listeners"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "notifications",
           onClick: function onClick() {
             return setActiveTab("notifications");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "notifications" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Notifications"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "widgets",
           onClick: function onClick() {
             return setActiveTab("widgets");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "widgets" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Widgets"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "permissions",
           onClick: function onClick() {
             return setActiveTab("permissions");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "permissions" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Permissions"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsx(ConfigTab, {
+          active: activeTab === "bots",
           onClick: function onClick() {
             return setActiveTab("bots");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "bots" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: "Bots"
-        }), /*#__PURE__*/jsxRuntime.jsxs("button", {
-          type: "button",
+        }), /*#__PURE__*/jsxRuntime.jsxs(ConfigTab, {
+          active: activeTab === "dependencies",
           onClick: function onClick() {
             return setActiveTab("dependencies");
           },
-          className: "px-3 py-1.5 text-sm font-medium -mb-px border-b-2 ".concat(activeTab === "dependencies" ? "border-indigo-400" : "border-transparent opacity-60 hover:opacity-100"),
           children: ["Dependencies", dependencyCount > 0 && /*#__PURE__*/jsxRuntime.jsxs(DashReact.Caption2, {
             className: "ml-2",
             children: ["(", dependencyCount, ")"]
@@ -63451,7 +63676,7 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
             className: "ml-1 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 align-middle"
           })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-1 min-h-0 ".concat(activeTab === "widgets" ? "" : "p-5"),
         children: [activeTab === "listeners" && /*#__PURE__*/jsxRuntime.jsx(ListenersTab, {
           emitters: emitters,
@@ -63511,8 +63736,11 @@ var DashboardConfigModal = function DashboardConfigModal(_ref) {
  * write fails the user can re-toggle. No staging — the bulk modal
  * doesn't gate the user behind a Save button for boolean prefs.
  */
-function NotificationsTab(_ref4) {
-  var workspace = _ref4.workspace;
+function NotificationsTab(_ref5) {
+  var workspace = _ref5.workspace;
+  var _useConfigTokens3 = useConfigTokens(),
+    muted = _useConfigTokens3.muted,
+    hairline = _useConfigTokens3.hairline;
   var _useState9 = React.useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
     searchQuery = _useState0[0],
@@ -63654,13 +63882,13 @@ function NotificationsTab(_ref4) {
   };
   if (!loaded) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "p-4 text-sm opacity-50",
+      className: "p-4 text-sm ".concat(muted),
       children: "Loading\u2026"
     });
   }
   if (widgetInstances.length === 0) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "p-4 text-sm opacity-50",
+      className: "p-4 text-sm ".concat(muted),
       children: "No widgets in this dashboard declare notifications. Add widgets that declare notifications to see per-type controls here."
     });
   }
@@ -63676,71 +63904,70 @@ function NotificationsTab(_ref4) {
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row items-center justify-between text-xs",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-          className: "opacity-50",
+          className: muted,
           children: [filtered.length, " of ", widgetInstances.length, " widget", widgetInstances.length === 1 ? "" : "s"]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-row items-center gap-2",
-          children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-            type: "button",
-            onClick: function onClick() {
-              return setAllVisible(true);
-            },
-            className: "px-2 py-1 rounded bg-green-700 hover:bg-green-600 text-white text-xs font-medium transition-colors",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
             "data-testid": "bulk-notifications-enable-all",
-            children: "Enable all"
-          }), /*#__PURE__*/jsxRuntime.jsx("button", {
-            type: "button",
-            onClick: function onClick() {
-              return setAllVisible(false);
-            },
-            className: "px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs font-medium transition-colors",
+            children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+              title: "Enable all",
+              size: "sm",
+              onClick: function onClick() {
+                return setAllVisible(true);
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
             "data-testid": "bulk-notifications-disable-all",
-            children: "Disable all"
+            children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button3, {
+              title: "Disable all",
+              size: "sm",
+              onClick: function onClick() {
+                return setAllVisible(false);
+              }
+            })
           })]
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-1 overflow-y-auto px-2 py-2 space-y-3",
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 overflow-y-auto px-2 py-3 flex flex-col gap-3 border-t ".concat(hairline),
       children: filtered.map(function (wi) {
         return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "border border-white/10 rounded p-3 space-y-2",
+          className: "rounded-lg border px-3 py-2 flex flex-col gap-2 ".concat(hairline),
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-col",
+            className: "flex flex-col gap-0.5",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
               className: "text-sm font-medium",
               children: wi.title
-            }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Caption, {
-              className: "font-mono",
+            }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs font-mono truncate ".concat(muted),
               children: [wi.component, wi.itemId != null ? " \xB7 #".concat(wi.itemId) : ""]
-            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption3, {
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-xs ".concat(muted),
               children: wi["package"]
             })]
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-row gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {
-              orientation: "vertical"
-            }), /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "flex flex-col flex-1",
-              children: wi.notifications.map(function (notif) {
-                return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center justify-between gap-3 py-2 px-2 -mx-2 rounded hover:bg-gray-800 transition-colors",
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-col",
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-xs",
-                      children: notif.displayName
-                    }), notif.description && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
-                      children: notif.description
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Switch, {
-                    checked: isEnabled(wi.uuid, notif.key, notif.defaultEnabled),
-                    onChange: function onChange(value) {
-                      return setOne(wi.uuid, notif.key, value);
-                    }
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col border-t ".concat(hairline),
+            children: wi.notifications.map(function (notif) {
+              return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex flex-row items-center justify-between gap-3 py-2",
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-col gap-0.5",
+                  children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-sm",
+                    children: notif.displayName
+                  }), notif.description && /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-xs ".concat(muted),
+                    children: notif.description
                   })]
-                }, notif.key);
-              })
-            })]
+                }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Switch, {
+                  checked: isEnabled(wi.uuid, notif.key, notif.defaultEnabled),
+                  onChange: function onChange(value) {
+                    return setOne(wi.uuid, notif.key, value);
+                  }
+                })]
+              }, notif.key);
+            })
           })]
         }, wi.uuid);
       })
@@ -63754,12 +63981,16 @@ function NotificationsTab(_ref4) {
  * dot per-type when any widget of that type is unresolved). Column 2
  * shows the selected type's bulk dropdown + per-widget dropdowns.
  */
-function ProvidersTab(_ref5) {
+function ProvidersTab(_ref6) {
   var _typeEntries$, _selectedRows$;
-  var grouped = _ref5.grouped,
-    providersByType = _ref5.providersByType,
-    onBulk = _ref5.onBulk,
-    onPerWidget = _ref5.onPerWidget;
+  var grouped = _ref6.grouped,
+    providersByType = _ref6.providersByType,
+    onBulk = _ref6.onBulk,
+    onPerWidget = _ref6.onPerWidget;
+  var _useConfigTokens4 = useConfigTokens(),
+    muted = _useConfigTokens4.muted,
+    hairline = _useConfigTokens4.hairline,
+    fieldBg = _useConfigTokens4.fieldBg;
   var typeEntries = React.useMemo(function () {
     return Array.from(grouped.entries());
   }, [grouped]);
@@ -63790,73 +64021,66 @@ function ProvidersTab(_ref5) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-row gap-3 h-full min-h-0",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col border-r border-white/10",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
+      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+        className: "px-3 mb-2",
         children: "Provider Types"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "overflow-y-auto flex-1",
-        children: typeEntries.map(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 2),
-            providerType = _ref7[0],
-            rows = _ref7[1];
-          var isActive = selectedType === providerType;
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "overflow-y-auto flex-1 flex flex-col gap-1",
+        children: typeEntries.map(function (_ref7) {
+          var _ref8 = _slicedToArray(_ref7, 2),
+            providerType = _ref8[0],
+            rows = _ref8[1];
           var unresolvedHere = rows.filter(function (r) {
             return r.required && !r.resolvedProviderName;
           }).length;
-          return /*#__PURE__*/jsxRuntime.jsxs("button", {
-            type: "button",
+          return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+            title: providerType,
+            active: selectedType === providerType,
             onClick: function onClick() {
               return setSelectedType(providerType);
             },
-            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.jsxs("div", {
-              className: "flex items-center gap-2",
+            meta: "".concat(rows.length, " widget").concat(rows.length === 1 ? "" : "s"),
+            badge: unresolvedHere > 0 ? /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "flex flex-row items-center gap-1.5 text-xs text-amber-400 flex-shrink-0",
               children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm font-medium truncate",
-                children: providerType
-              }), unresolvedHere > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
-                className: "text-[10px] text-amber-300 flex items-center gap-1",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                  icon: "triangle-exclamation",
-                  className: "h-2.5 w-2.5"
-                }), unresolvedHere]
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "text-xs opacity-50 mt-0.5",
-              children: [rows.length, " widget", rows.length === 1 ? "" : "s"]
-            })]
+                className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              }), unresolvedHere]
+            }) : null
           }, providerType);
         })
       })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      "aria-hidden": true,
+      className: "flex-shrink-0 border-r ".concat(hairline)
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-1 min-w-0 overflow-hidden flex flex-col",
       children: selectedType ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "px-4 py-3 flex-shrink-0",
+          className: "px-4 pb-3 flex-shrink-0 border-b ".concat(hairline),
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "text-sm font-semibold",
             children: [selectedType, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "opacity-60 font-normal",
+              className: "font-normal ".concat(muted),
               children: "provider"
             })]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "text-xs opacity-60 mt-1",
+            className: "text-xs mt-1 ".concat(muted),
             children: "Apply one provider to every widget of this type, or adjust per-widget below."
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex-1 overflow-y-auto p-4 space-y-4",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex items-center gap-3",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs opacity-60 flex-shrink-0 w-20",
+              className: "text-xs flex-shrink-0 w-20 ".concat(muted),
               children: "Bulk assign"
             }), /*#__PURE__*/jsxRuntime.jsxs("select", {
               value: topValue,
               onChange: function onChange(e) {
                 return onBulk(selectedType, e.target.value);
               },
-              className: "flex-1 bg-gray-800 border border-white/10 rounded px-3 py-1.5 text-sm",
+              className: "flex-1 rounded-lg border px-3 py-1.5 text-sm ".concat(fieldBg, " ").concat(hairline),
               children: [/*#__PURE__*/jsxRuntime.jsx("option", {
                 value: "",
                 children: "\u2014 Select provider \u2014"
@@ -63868,10 +64092,11 @@ function ProvidersTab(_ref5) {
               })]
             })]
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "text-xs font-semibold opacity-50 uppercase tracking-wider mb-2",
+            className: "flex flex-col gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
               children: "Per-widget"
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-col gap-2",
               children: selectedRows.map(function (row) {
                 var _row$layoutItem;
                 var hasExplicitOverride = !!((_row$layoutItem = row.layoutItem) !== null && _row$layoutItem !== void 0 && (_row$layoutItem = _row$layoutItem.selectedProviders) !== null && _row$layoutItem !== void 0 && _row$layoutItem[selectedType]);
@@ -63879,35 +64104,29 @@ function ProvidersTab(_ref5) {
                 var isMissing = !row.resolvedProviderName;
                 var needsAttention = isRequired && isMissing;
                 return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center gap-3 py-2 px-2 rounded border-l-2 transition-colors ".concat(needsAttention ? "bg-red-900 border-red-500" : "border-transparent hover:bg-gray-800"),
+                  "data-testid": "provider-row",
+                  className: "flex flex-row items-center gap-3 rounded-lg border px-3 py-2 ".concat(hairline),
                   children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
                     className: "flex-1 min-w-0",
-                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                      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.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(DashReact.Caption, {
-                      block: true,
-                      className: "font-mono truncate mt-0.5",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-sm font-medium truncate",
+                      children: row.label || row.component || "widget"
+                    }), (row.widgetRef || row.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-xs font-mono truncate mt-0.5 ".concat(muted),
                       title: row.widgetRef || row.component,
                       children: row.widgetRef || row.component
                     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: "flex items-center gap-1.5 mt-1 text-xs",
-                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "uppercase tracking-wide px-1.5 py-0.5 rounded font-semibold ".concat(needsAttention ? "bg-red-600 text-white" : isRequired ? "bg-indigo-800 text-indigo-100" : "bg-gray-700 text-gray-300"),
-                        children: isRequired ? "required" : "optional"
+                      className: "flex flex-row items-center gap-3 mt-1 text-xs",
+                      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+                        className: "flex flex-row items-center gap-1.5 uppercase tracking-wider font-semibold ".concat(needsAttention ? "text-amber-400" : muted),
+                        children: [needsAttention && /*#__PURE__*/jsxRuntime.jsx("span", {
+                          className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+                        }), isRequired ? "Required" : "Optional"]
                       }), hasExplicitOverride && /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "uppercase tracking-wide px-1.5 py-0.5 rounded font-semibold bg-indigo-900 text-indigo-200",
-                        children: "override"
+                        className: "uppercase tracking-wider font-semibold ".concat(muted),
+                        children: "Override"
                       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "opacity-40 truncate ml-1",
+                        className: "font-mono truncate ".concat(muted),
                         children: (row.widgetId || "").slice(0, 8)
                       })]
                     })]
@@ -63916,7 +64135,7 @@ function ProvidersTab(_ref5) {
                     onChange: function onChange(e) {
                       return onPerWidget(row.widgetId, selectedType, e.target.value);
                     },
-                    className: "bg-gray-800 border rounded px-2 py-1 text-xs min-w-[12rem] ".concat(needsAttention ? "border-red-400" : "border-gray-700"),
+                    className: "w-48 flex-shrink-0 rounded-lg border px-2 py-1 text-xs ".concat(fieldBg, " ").concat(needsAttention ? "border-amber-400" : hairline),
                     children: [/*#__PURE__*/jsxRuntime.jsx("option", {
                       value: "",
                       children: "\u2014 none \u2014"
@@ -63933,7 +64152,7 @@ function ProvidersTab(_ref5) {
           })]
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 flex items-center justify-center text-sm opacity-60",
+        className: "flex-1 flex items-center justify-center text-sm ".concat(muted),
         children: "Pick a provider type to bulk-assign or adjust per widget."
       })
     })]
@@ -63954,11 +64173,14 @@ function ProvidersTab(_ref5) {
  * package (no `config.id` / `config.package` / item.workspace hint).
  * Usually this is a stale layout item whose widget got uninstalled.
  */
-function DependenciesTab(_ref9) {
-  var dependencies = _ref9.dependencies;
+function DependenciesTab(_ref0) {
+  var dependencies = _ref0.dependencies;
+  var _useConfigTokens5 = useConfigTokens(),
+    muted = _useConfigTokens5.muted,
+    hairline = _useConfigTokens5.hairline;
   if (!dependencies || dependencies.length === 0) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-center h-full text-sm opacity-60 text-center",
+      className: "flex items-center justify-center h-full text-sm text-center ".concat(muted),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         children: "No widget packages referenced by this dashboard."
       })
@@ -63967,37 +64189,38 @@ function DependenciesTab(_ref9) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col h-full min-h-0 overflow-y-auto gap-3",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "text-xs opacity-60",
+      className: "text-xs ".concat(muted),
       children: "Every widget instance in this workspace, grouped by the package it belongs to. Locations show where each package is referenced."
     }), dependencies.map(function (dep) {
       var isUnknown = dep.packageLabel === "(unknown)";
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "border rounded-lg px-4 py-3 ".concat(isUnknown ? "bg-amber-900/10 border-amber-700/40" : "bg-white/5 border-white/10"),
+        className: "border rounded-lg px-3 py-2 ".concat(isUnknown ? "border-amber-400" : hairline),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex items-center gap-2 flex-wrap",
           children: [/*#__PURE__*/jsxRuntime.jsx("code", {
-            className: "text-sm font-semibold ".concat(isUnknown ? "text-amber-200" : ""),
+            className: "text-sm font-semibold",
             children: dep.packageLabel
           }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "text-xs opacity-60",
+            className: "text-xs ".concat(muted),
             children: [dep.total, " instance", dep.total === 1 ? "" : "s"]
-          }), isUnknown && /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-[10px] text-amber-300 uppercase tracking-wide",
-            children: "no package mapping"
+          }), isUnknown && /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "flex flex-row items-center gap-1.5 text-xs text-amber-400 uppercase tracking-wider font-semibold",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+            }), "No package mapping"]
           })]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "mt-2 text-xs opacity-70",
+          className: "mt-2 text-xs flex flex-col gap-1",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "opacity-60 mr-1",
+              className: "mr-1 ".concat(muted),
               children: "Widgets:"
             }), dep.components.map(function (c) {
               return "".concat(c.component).concat(c.count > 1 ? " \xD7".concat(c.count) : "");
             }).join(", ")]
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "mt-1",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "opacity-60 mr-1",
+              className: "mr-1 ".concat(muted),
               children: "Locations:"
             }), dep.locations.join(", ")]
           })]
@@ -64028,13 +64251,16 @@ function sameWiringEntry(a, b) {
  * adjusts wiring per handler from a single dropdown of all emitters'
  * (widget × event) pairs.
  */
-function ListenersTab(_ref0) {
+function ListenersTab(_ref1) {
   var _receivers$;
-  var emitters = _ref0.emitters,
-    receivers = _ref0.receivers,
-    wiring = _ref0.wiring,
-    onAdd = _ref0.onAdd,
-    onRemove = _ref0.onRemove;
+  var emitters = _ref1.emitters,
+    receivers = _ref1.receivers,
+    wiring = _ref1.wiring,
+    onAdd = _ref1.onAdd,
+    onRemove = _ref1.onRemove;
+  var _useConfigTokens6 = useConfigTokens(),
+    muted = _useConfigTokens6.muted,
+    hairline = _useConfigTokens6.hairline;
   var _useState17 = React.useState(((_receivers$ = receivers[0]) === null || _receivers$ === void 0 ? void 0 : _receivers$.key) || null),
     _useState18 = _slicedToArray(_useState17, 2),
     selectedReceiverKey = _useState18[0],
@@ -64090,31 +64316,25 @@ function ListenersTab(_ref0) {
       className: "flex flex-row gap-3 flex-1 min-h-0",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+          className: "px-3 mb-2",
           children: "Widgets"
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "overflow-y-auto flex-1",
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "overflow-y-auto flex-1 flex flex-col gap-1",
           children: receivers.map(function (r) {
-            var isActive = r.key === selectedReceiverKey;
-            return /*#__PURE__*/jsxRuntime.jsxs("button", {
-              type: "button",
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: r.label,
+              subtitle: r.widgetRef || null,
+              active: r.key === selectedReceiverKey,
               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("div", {
-                className: "text-sm font-medium truncate",
-                children: r.label
-              }), r.widgetRef && /*#__PURE__*/jsxRuntime.jsx(DashReact.Caption, {
-                block: true,
-                className: "font-mono truncate mt-0.5",
-                title: r.widgetRef,
-                children: r.widgetRef
-              })]
+              }
             }, r.key);
           })
         })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": true,
+        className: "flex-shrink-0 border-r ".concat(hairline)
       }), selectedReceiver ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(HandlersColumn, {
           receiver: selectedReceiver,
@@ -64134,7 +64354,7 @@ function ListenersTab(_ref0) {
           onRemove: onRemove
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
+        className: "flex-1 min-w-0 flex items-center justify-center text-sm ".concat(muted),
         children: "Pick a widget on the left to wire its handlers."
       })]
     })
@@ -64147,11 +64367,11 @@ function ListenersTab(_ref0) {
  * third column. Matches the left-column look from
  * PanelEditItemHandlers.
  */
-function HandlersColumn(_ref10) {
-  var receiver = _ref10.receiver,
-    myWiring = _ref10.myWiring,
-    selectedHandler = _ref10.selectedHandler,
-    onSelectHandler = _ref10.onSelectHandler;
+function HandlersColumn(_ref11) {
+  var receiver = _ref11.receiver,
+    myWiring = _ref11.myWiring,
+    selectedHandler = _ref11.selectedHandler,
+    onSelectHandler = _ref11.onSelectHandler;
   var countsByHandler = React.useMemo(function () {
     var m = new Map();
     var _iterator9 = _createForOfIteratorHelper$9(myWiring),
@@ -64168,44 +64388,43 @@ function HandlersColumn(_ref10) {
     }
     return m;
   }, [myWiring]);
+  var _useConfigTokens7 = useConfigTokens(),
+    muted = _useConfigTokens7.muted,
+    hairline = _useConfigTokens7.hairline;
   return (
     /*#__PURE__*/
     // Plain <div> wrapper — Card2 reads as washed-out against the
     // modal's dark chrome. See ListenersTab + ProvidersTab fix.
-    jsxRuntime.jsxs("div", {
-      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
-        children: "Event Handlers"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "overflow-y-auto flex-1",
-        children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-xs opacity-50 text-center py-6 px-3",
-          children: "This widget declares no event handlers."
-        }) : receiver.eventHandlers.map(function (h) {
-          var isActive = h === selectedHandler;
-          var count = countsByHandler.get(h) || 0;
-          return /*#__PURE__*/jsxRuntime.jsxs("button", {
-            type: "button",
-            onClick: function onClick() {
-              return onSelectHandler(h);
-            },
-            className: "w-full text-left px-3 py-2 text-sm flex items-center justify-between gap-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "flex items-center gap-2 min-w-0",
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "bolt",
-                className: "h-3 w-3 opacity-60 flex-shrink-0"
-              }), /*#__PURE__*/jsxRuntime.jsx("code", {
-                className: "truncate",
-                children: h
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs opacity-60 flex-shrink-0",
-              children: count
-            })]
-          }, h);
-        })
+    jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SectionLabel, {
+          className: "px-3 mb-2",
+          children: "Event Handlers"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "overflow-y-auto flex-1 flex flex-col gap-1",
+          children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "text-xs text-center py-6 px-3 ".concat(muted),
+            children: "This widget declares no event handlers."
+          }) : receiver.eventHandlers.map(function (h) {
+            var count = countsByHandler.get(h) || 0;
+            return /*#__PURE__*/jsxRuntime.jsx(ConfigListRow, {
+              title: h,
+              mono: true,
+              active: h === selectedHandler,
+              onClick: function onClick() {
+                return onSelectHandler(h);
+              },
+              badge: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs flex-shrink-0 ".concat(muted),
+                children: count
+              })
+            }, h);
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": true,
+        className: "flex-shrink-0 border-r ".concat(hairline)
       })]
     })
   );
@@ -64217,13 +64436,16 @@ function HandlersColumn(_ref10) {
  * Checked = wired; toggling commits an add/remove. Mirrors the
  * right-column UX of PanelEditItemHandlers.
  */
-function EventsColumn(_ref11) {
-  var receiver = _ref11.receiver,
-    handlerName = _ref11.handlerName,
-    myWiring = _ref11.myWiring,
-    emitters = _ref11.emitters,
-    onAdd = _ref11.onAdd,
-    onRemove = _ref11.onRemove;
+function EventsColumn(_ref12) {
+  var receiver = _ref12.receiver,
+    handlerName = _ref12.handlerName,
+    myWiring = _ref12.myWiring,
+    emitters = _ref12.emitters,
+    onAdd = _ref12.onAdd,
+    onRemove = _ref12.onRemove;
+  var _useConfigTokens8 = useConfigTokens(),
+    muted = _useConfigTokens8.muted,
+    hairline = _useConfigTokens8.hairline;
   // Wired-for-this-handler: dedupe defensively (legacy workspaces
   // occasionally contain duplicate entries under the same handler).
   var wiredHere = React.useMemo(function () {
@@ -64260,7 +64482,7 @@ function EventsColumn(_ref11) {
   });
   if (!handlerName) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
+      className: "flex-1 min-w-0 flex items-center justify-center text-sm ".concat(muted),
       children: "Select a handler to view available events."
     });
   }
@@ -64294,7 +64516,7 @@ function EventsColumn(_ref11) {
     jsxRuntime.jsxs("div", {
       className: "flex-1 min-w-0 overflow-hidden flex flex-col",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-shrink-0 px-4 py-2 text-xs opacity-60",
+        className: "flex-shrink-0 px-4 pb-3 text-xs border-b ".concat(muted, " ").concat(hairline),
         children: ["Check an event to fire ", /*#__PURE__*/jsxRuntime.jsx("code", {
           className: "text-xs",
           children: handlerName
@@ -64302,22 +64524,21 @@ function EventsColumn(_ref11) {
           className: "font-medium",
           children: receiver.label
         }), "."]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Divider, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 overflow-y-auto p-4 space-y-5",
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1 overflow-y-auto p-4 flex flex-col gap-3",
         children: emittersForList.length === 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-sm opacity-60",
+          className: "text-sm ".concat(muted),
           children: "No other widgets in this dashboard emit events."
         }) : emittersForList.map(function (e) {
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "space-y-1",
+            className: "rounded-lg border px-3 py-2 flex flex-col gap-1 ".concat(hairline),
             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(DashReact.Caption, {
-                block: true,
-                className: "font-mono truncate",
+              }), (e.widgetRef || e.component) && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-xs font-mono truncate ".concat(muted),
                 children: (e.widgetRef || e.component) + (e.itemId != null ? "[".concat(e.itemId, "]") : "")
               })]
             }), e.events.map(function (eventName) {
@@ -65165,13 +65386,7 @@ var isDraftId = function isDraftId(id) {
   return typeof id === "string" && id.startsWith(DRAFT_PREFIX);
 };
 var NARROW_PX = 900;
-var DOT = {
-  Idle: "bg-gray-500",
-  Running: "bg-indigo-400",
-  Paused: "bg-gray-400",
-  "Needs approval": "bg-amber-400",
-  Failed: "bg-red-400"
-};
+var DOT = STATUS_DOT$2;
 var getWidgetConfig$1 = function getWidgetConfig(name) {
   return name && ComponentManager.config(name) || null;
 };