@trops/dash-core 0.1.518 → 0.1.520

package/dist/index.esm.js

@@ -49329,6 +49329,12 @@ var PrivacySecurityList = function PrivacySecurityList(_ref) {
   var keyFor = function keyFor(group) {
     return group.packageId == null ? "__ungrouped__" : group.packageId;
   };
+
+  // Special selection keys for the two non-package items at the top
+  // of the list. Keep them in the same selection state as packages so
+  // the right panel knows what to render via a single key.
+  var SETTINGS_KEY = "__settings__";
+  var HELP_KEY = "__help__";
   function renderPackageItem(group) {
     var key = keyFor(group);
     var isSelected = selectedPackageKey === key;
@@ -49377,7 +49383,32 @@ var PrivacySecurityList = function PrivacySecurityList(_ref) {
     }), /*#__PURE__*/jsx("div", {
       className: "flex-1 overflow-y-auto min-h-0",
       children: /*#__PURE__*/jsxs(Sidebar.Content, {
-        children: [viewMode === "grouped" ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsxs(Sidebar.Group, {
+          label: "Configuration",
+          children: [/*#__PURE__*/jsx(Sidebar.Item, {
+            icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+              icon: "gear",
+              className: "h-3.5 w-3.5"
+            }),
+            active: selectedPackageKey === SETTINGS_KEY,
+            onClick: function onClick() {
+              return onSelectPackage(SETTINGS_KEY);
+            },
+            className: selectedPackageKey === SETTINGS_KEY ? "bg-white/10 opacity-100" : "",
+            children: "Settings"
+          }, SETTINGS_KEY), /*#__PURE__*/jsx(Sidebar.Item, {
+            icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+              icon: "circle-question",
+              className: "h-3.5 w-3.5"
+            }),
+            active: selectedPackageKey === HELP_KEY,
+            onClick: function onClick() {
+              return onSelectPackage(HELP_KEY);
+            },
+            className: selectedPackageKey === HELP_KEY ? "bg-white/10 opacity-100" : "",
+            children: "Help"
+          }, HELP_KEY)]
+        }), viewMode === "grouped" ? /*#__PURE__*/jsxs(Fragment, {
           children: [withGrants.length > 0 && /*#__PURE__*/jsx(Sidebar.Group, {
             label: "Has grants",
             children: withGrants.map(renderPackageItem)
@@ -49385,7 +49416,10 @@ var PrivacySecurityList = function PrivacySecurityList(_ref) {
             label: "No grants",
             children: withoutGrants.map(renderPackageItem)
           })]
-        }) : filtered.map(renderPackageItem), filtered.length === 0 && /*#__PURE__*/jsx("span", {
+        }) : /*#__PURE__*/jsx(Sidebar.Group, {
+          label: "Packages",
+          children: filtered.map(renderPackageItem)
+        }), filtered.length === 0 && /*#__PURE__*/jsx("span", {
           className: "text-sm opacity-40 py-8 text-center block",
           children: searchQuery ? "No packages match your search" : "No widgets installed"
         })]
@@ -49719,18 +49753,15 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
     _useState12 = _slicedToArray(_useState11, 2),
     viewMode = _useState12[0],
     setViewMode = _useState12[1];
-  var _useState13 = useState(null),
+  // Default to the Settings sidebar item so first-time visitors land
+  // on something useful rather than the empty-detail placeholder.
+  // "__settings__"/"__help__" are special selection keys (see
+  // PrivacySecurityList); a string starting without "__" is a
+  // packageId.
+  var _useState13 = useState("__settings__"),
     _useState14 = _slicedToArray(_useState13, 2),
     selectedPackageKey = _useState14[0],
     setSelectedPackageKey = _useState14[1];
-  // Two top-level tabs so the inline `HowThisWorksPanel` (which carries
-  // example fixtures and is intentionally tall) doesn't push the
-  // package list/detail below the viewport. "permissions" is the
-  // default and contains the actual UI users came here to use.
-  var _useState15 = useState("permissions"),
-    _useState16 = _slicedToArray(_useState15, 2),
-    activeTab = _useState16[0],
-    setActiveTab = _useState16[1];
   var reload = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _api$widgetMcp, api, result, _t;
     return _regeneratorRuntime.wrap(function (_context) {
@@ -49928,7 +49959,9 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
     });
   }
   var packageGroups = groupRowsByPackage(rows);
-  var selectedGroup = selectedPackageKey == null ? null : packageGroups.find(function (g) {
+  var isSettingsSelected = selectedPackageKey === "__settings__";
+  var isHelpSelected = selectedPackageKey === "__help__";
+  var selectedGroup = selectedPackageKey == null || isSettingsSelected || isHelpSelected ? null : packageGroups.find(function (g) {
     return g.packageId == null ? selectedPackageKey === "__ungrouped__" : g.packageId === selectedPackageKey;
   }) || null;
   var listContent = /*#__PURE__*/jsx(PrivacySecurityList, {
@@ -49940,60 +49973,53 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
     viewMode: viewMode,
     onViewModeChange: setViewMode
   });
-  var detailContent = selectedGroup ? /*#__PURE__*/jsx(WidgetPackageDetail, {
-    packageGroup: selectedGroup,
-    onRevokeWidget: revokeWidget,
-    onRevokeServer: revokeServer,
-    onGrantManually: function onGrantManually(widgetId) {
-      return setManualGrantWidgetId(widgetId);
-    },
-    onRevokePackage: revokePackage
-  }) : null;
+
+  // Detail panel content varies by what the user picked in the
+  // sidebar — Settings shows the toggles, Help shows the how-it-
+  // works panel, a package shows its widgets. Wrapping each non-
+  // package case in a scrollable container so long content (like
+  // the help fixtures) stays inside the panel and doesn't push the
+  // sidebar around.
+  var detailContent = null;
+  if (isSettingsSelected) {
+    detailContent = /*#__PURE__*/jsx("div", {
+      className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-6",
+      children: /*#__PURE__*/jsx(EnforcementToggles, {})
+    });
+  } else if (isHelpSelected) {
+    detailContent = /*#__PURE__*/jsx("div", {
+      className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-6",
+      children: /*#__PURE__*/jsx(HowThisWorksPanel, {})
+    });
+  } else if (selectedGroup) {
+    detailContent = /*#__PURE__*/jsx(WidgetPackageDetail, {
+      packageGroup: selectedGroup,
+      onRevokeWidget: revokeWidget,
+      onRevokeServer: revokeServer,
+      onGrantManually: function onGrantManually(widgetId) {
+        return setManualGrantWidgetId(widgetId);
+      },
+      onRevokePackage: revokePackage
+    });
+  }
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col flex-1 min-h-0",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex-shrink-0 flex flex-col space-y-3 px-6 pt-6 pb-3 border-b border-gray-800",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "flex flex-col space-y-2",
-        children: [/*#__PURE__*/jsx(SubHeading3, {
-          title: "Widget MCP permissions",
-          padding: false
-        }), /*#__PURE__*/jsx("span", {
-          className: "text-xs opacity-60",
-          children: "Granting access here is a trust signal about the widget \u2014 not a per-dashboard switch."
-        })]
-      }), /*#__PURE__*/jsx(Tabs3, {
-        value: activeTab,
-        onValueChange: setActiveTab,
-        backgroundColor: "bg-transparent",
-        spacing: "p-0",
-        children: /*#__PURE__*/jsxs(Tabs3.List, {
-          spacing: "p-0.5",
-          children: [/*#__PURE__*/jsx(Tabs3.Trigger, {
-            value: "permissions",
-            children: "Permissions"
-          }), /*#__PURE__*/jsx(Tabs3.Trigger, {
-            value: "help",
-            children: "Help"
-          })]
-        })
+      className: "flex-shrink-0 flex flex-col space-y-2 px-6 pt-6 pb-3 border-b border-gray-800",
+      children: [/*#__PURE__*/jsx(SubHeading3, {
+        title: "Widget MCP permissions",
+        padding: false
+      }), /*#__PURE__*/jsx("span", {
+        className: "text-xs opacity-60",
+        children: "Granting access here is a trust signal about the widget \u2014 not a per-dashboard switch."
       }), error && /*#__PURE__*/jsx("div", {
         className: "text-xs text-red-400 bg-red-900 bg-opacity-20 border border-red-700 rounded p-3",
         children: error
       })]
-    }), activeTab === "permissions" ? /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col flex-1 min-h-0",
-      children: [/*#__PURE__*/jsx("div", {
-        className: "flex-shrink-0 px-6 py-4 border-b border-gray-800",
-        children: /*#__PURE__*/jsx(EnforcementToggles, {})
-      }), /*#__PURE__*/jsx(SectionLayout, {
-        listContent: listContent,
-        detailContent: detailContent,
-        emptyDetailMessage: "Select a package to view its grants"
-      })]
-    }) : /*#__PURE__*/jsx("div", {
-      className: "flex-1 overflow-y-auto p-6",
-      children: /*#__PURE__*/jsx(HowThisWorksPanel, {})
+    }), /*#__PURE__*/jsx(SectionLayout, {
+      listContent: listContent,
+      detailContent: detailContent,
+      emptyDetailMessage: "Select an item from the sidebar"
     }), /*#__PURE__*/jsx(GrantManuallyModal, {
       isOpen: !!manualGrantWidgetId,
       setIsOpen: function setIsOpen(open) {
@@ -50030,19 +50056,19 @@ var EnforcementToggles = function EnforcementToggles() {
   // pendingDisable: { flag: 'enforce' | 'jit' } | null
   // When the user toggles a flag from ON → OFF, we open a confirm modal
   // before persisting. ON → ON or OFF → ON go through immediately.
-  var _useState17 = useState(null),
-    _useState18 = _slicedToArray(_useState17, 2),
-    pendingDisable = _useState18[0],
-    setPendingDisable = _useState18[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    pendingDisable = _useState16[0],
+    setPendingDisable = _useState16[1];
 
   // lastTestResult: feedback for the "Test prompt" button. Tells the
   // user whether their JIT response was actually persisted, so they
   // don't have to interpret the post-grant "server not connected"
   // error as failure.
-  var _useState19 = useState(null),
-    _useState20 = _slicedToArray(_useState19, 2),
-    lastTestResult = _useState20[0],
-    setLastTestResult = _useState20[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    lastTestResult = _useState18[0],
+    setLastTestResult = _useState18[1];
 
   // Auto-clear the test result after 30 seconds so it doesn't linger
   // forever after a successful test.
@@ -50443,10 +50469,10 @@ var noop = function noop() {};
  * users who don't want the wall of text collapse manually.
  */
 var HowThisWorksPanel = function HowThisWorksPanel() {
-  var _useState21 = useState(true),
-    _useState22 = _slicedToArray(_useState21, 2),
-    open = _useState22[0],
-    setOpen = _useState22[1];
+  var _useState19 = useState(true),
+    _useState20 = _slicedToArray(_useState19, 2),
+    open = _useState20[0],
+    setOpen = _useState20[1];
   return /*#__PURE__*/jsxs("div", {
     className: "border border-gray-700 rounded",
     children: [/*#__PURE__*/jsxs("button", {
@@ -50809,7 +50835,7 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
         className: "flex-1 overflow-y-auto p-6 ".concat(panelStyles.textColor || "text-gray-200"),
         children: /*#__PURE__*/jsx(AiAssistantSection, {})
       }), activeSection === "privacy-security" && /*#__PURE__*/jsx("div", {
-        className: "flex-1 overflow-y-auto ".concat(panelStyles.textColor || "text-gray-200"),
+        className: "flex-1 flex flex-col min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
         children: /*#__PURE__*/jsx(PrivacySecuritySection, {})
       })]
     }), /*#__PURE__*/jsx(SettingsModal.Footer, {