@trops/dash-core 0.1.492 → 0.1.494

package/dist/index.js

@@ -48733,6 +48733,223 @@ var AiAssistantSection = function AiAssistantSection() {
   });
 };
 
+var GrantManuallyModal = function GrantManuallyModal(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    widgetId = _ref.widgetId,
+    _ref$knownServerNames = _ref.knownServerNames,
+    knownServerNames = _ref$knownServerNames === void 0 ? [] : _ref$knownServerNames,
+    onGranted = _ref.onGranted;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    serverName = _useState2[0],
+    setServerName = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toolsText = _useState4[0],
+    setToolsText = _useState4[1];
+  var _useState5 = React.useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    readPathsText = _useState6[0],
+    setReadPathsText = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    writePathsText = _useState8[0],
+    setWritePathsText = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    error = _useState0[0],
+    setError = _useState0[1];
+  var _useState1 = React.useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isSubmitting = _useState10[0],
+    setIsSubmitting = _useState10[1];
+  React.useEffect(function () {
+    if (isOpen) {
+      setServerName("");
+      setToolsText("");
+      setReadPathsText("");
+      setWritePathsText("");
+      setError(null);
+      setIsSubmitting(false);
+    }
+  }, [isOpen]);
+  var splitLines = function splitLines(s) {
+    return s.split(/\r?\n/).map(function (l) {
+      return l.trim();
+    }).filter(Boolean);
+  };
+  var splitCsv = function splitCsv(s) {
+    return s.split(",").map(function (t) {
+      return t.trim();
+    }).filter(Boolean);
+  };
+  var handleGrant = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var tools, perms, _window$mainApi, _window$mainApi$setGr, ok, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setError(null);
+            if (serverName.trim()) {
+              _context.next = 1;
+              break;
+            }
+            setError("Server name is required.");
+            return _context.abrupt("return");
+          case 1:
+            tools = splitCsv(toolsText);
+            if (!(tools.length === 0)) {
+              _context.next = 2;
+              break;
+            }
+            setError("At least one tool name is required.");
+            return _context.abrupt("return");
+          case 2:
+            perms = {
+              grantOrigin: "manual",
+              servers: _defineProperty({}, serverName.trim(), {
+                tools: tools,
+                readPaths: splitLines(readPathsText),
+                writePaths: splitLines(writePathsText)
+              })
+            };
+            setIsSubmitting(true);
+            _context.prev = 3;
+            _context.next = 4;
+            return typeof window !== "undefined" ? (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.widgetMcp) === null || _window$mainApi === void 0 || (_window$mainApi$setGr = _window$mainApi.setGrant) === null || _window$mainApi$setGr === void 0 ? void 0 : _window$mainApi$setGr.call(_window$mainApi, widgetId, perms) : null;
+          case 4:
+            ok = _context.sent;
+            if (!(ok === false)) {
+              _context.next = 5;
+              break;
+            }
+            setError("Could not save grant.");
+            setIsSubmitting(false);
+            return _context.abrupt("return");
+          case 5:
+            if (typeof onGranted === "function") onGranted();
+            setIsOpen(false);
+            _context.next = 7;
+            break;
+          case 6:
+            _context.prev = 6;
+            _t = _context["catch"](3);
+            setError((_t === null || _t === void 0 ? void 0 : _t.message) || String(_t));
+            setIsSubmitting(false);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 6]]);
+    }));
+    return function handleGrant() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  if (!widgetId) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col w-full max-w-xl ring-2 ring-amber-500",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "px-5 py-4 border-b border-gray-700",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "text-base font-semibold",
+          children: ["Grant manually: ", widgetId]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-xs opacity-60 mt-1",
+          children: "This widget did not declare its MCP needs and the install-time scanner found nothing. You are granting access based on your own judgment \u2014 be conservative. Revoke any time."
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-4 px-5 py-4 max-h-96 overflow-y-auto",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+            className: "text-xs uppercase tracking-wider opacity-60",
+            children: "Server name"
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "text",
+            list: "known-mcp-servers",
+            value: serverName,
+            onChange: function onChange(e) {
+              return setServerName(e.target.value);
+            },
+            placeholder: "e.g. filesystem, github, slack",
+            className: "text-xs px-2 py-1.5 rounded bg-gray-800 border border-gray-700"
+          }), /*#__PURE__*/jsxRuntime.jsx("datalist", {
+            id: "known-mcp-servers",
+            children: knownServerNames.map(function (n) {
+              return /*#__PURE__*/jsxRuntime.jsx("option", {
+                value: n
+              }, n);
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+            className: "text-xs uppercase tracking-wider opacity-60",
+            children: "Tools (comma-separated)"
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "text",
+            value: toolsText,
+            onChange: function onChange(e) {
+              return setToolsText(e.target.value);
+            },
+            placeholder: "e.g. read_file, list_directory",
+            className: "text-xs px-2 py-1.5 rounded bg-gray-800 border border-gray-700 font-mono"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+            className: "text-xs uppercase tracking-wider opacity-60",
+            children: "Read paths (one per line, optional)"
+          }), /*#__PURE__*/jsxRuntime.jsx("textarea", {
+            value: readPathsText,
+            onChange: function onChange(e) {
+              return setReadPathsText(e.target.value);
+            },
+            placeholder: "/Users/jane/Documents\n/tmp/notes",
+            rows: 3,
+            className: "text-xs px-2 py-1.5 rounded bg-gray-800 border border-gray-700 font-mono"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col gap-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx("label", {
+            className: "text-xs uppercase tracking-wider opacity-60",
+            children: "Write paths (one per line, optional)"
+          }), /*#__PURE__*/jsxRuntime.jsx("textarea", {
+            value: writePathsText,
+            onChange: function onChange(e) {
+              return setWritePathsText(e.target.value);
+            },
+            placeholder: "/tmp/output",
+            rows: 3,
+            className: "text-xs px-2 py-1.5 rounded bg-gray-800 border border-gray-700 font-mono"
+          })]
+        }), error && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-xs text-red-400 bg-red-900 bg-opacity-20 border border-red-700 rounded px-3 py-2",
+          children: error
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex justify-end gap-2 px-5 py-3 border-t border-gray-700",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Cancel",
+          onClick: function onClick() {
+            return setIsOpen(false);
+          },
+          disabled: isSubmitting
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Grant",
+          onClick: handleGrant,
+          disabled: isSubmitting
+        })]
+      })]
+    })
+  });
+};
+
 var PrivacySecuritySection = function PrivacySecuritySection() {
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -48746,6 +48963,14 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
     _useState6 = _slicedToArray(_useState5, 2),
     error = _useState6[0],
     setError = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    manualGrantWidgetId = _useState8[0],
+    setManualGrantWidgetId = _useState8[1];
+  var _useState9 = React.useState([]),
+    _useState0 = _slicedToArray(_useState9, 2),
+    knownServerNames = _useState0[0],
+    setKnownServerNames = _useState0[1];
   var reload = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _api$widgetMcp, api, result, _t;
     return _regeneratorRuntime.wrap(function (_context) {
@@ -48786,42 +49011,55 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
   React.useEffect(function () {
     reload();
   }, [reload]);
-  var revokeWidget = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(widgetId) {
-      var _window$mainApi, _window$mainApi$revok, _t2;
+
+  // Pull catalog server names once, used as a datalist hint in the
+  // manual-grant modal. Best-effort — if the API isn't there, the
+  // datalist is just empty.
+  React.useEffect(function () {
+    var cancelled = false;
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _api$mcp, _api$mcp$getCatalog, api, result, servers;
       return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             _context2.prev = 0;
+            api = typeof window !== "undefined" ? window.mainApi : null;
             _context2.next = 1;
-            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.widgetMcp) === null || _window$mainApi === void 0 || (_window$mainApi$revok = _window$mainApi.revoke) === null || _window$mainApi$revok === void 0 ? void 0 : _window$mainApi$revok.call(_window$mainApi, widgetId);
+            return api === null || api === void 0 || (_api$mcp = api.mcp) === null || _api$mcp === void 0 || (_api$mcp$getCatalog = _api$mcp.getCatalog) === null || _api$mcp$getCatalog === void 0 ? void 0 : _api$mcp$getCatalog.call(_api$mcp);
           case 1:
-            reload();
+            result = _context2.sent;
+            servers = (result === null || result === void 0 ? void 0 : result.catalog) || [];
+            if (!cancelled && Array.isArray(servers)) {
+              setKnownServerNames(servers.map(function (s) {
+                return s === null || s === void 0 ? void 0 : s.name;
+              }).filter(function (n) {
+                return typeof n === "string";
+              }));
+            }
             _context2.next = 3;
             break;
           case 2:
             _context2.prev = 2;
-            _t2 = _context2["catch"](0);
-            setError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || String(_t2));
+            _context2["catch"](0);
           case 3:
           case "end":
             return _context2.stop();
         }
       }, _callee2, null, [[0, 2]]);
-    }));
-    return function revokeWidget(_x) {
-      return _ref2.apply(this, arguments);
+    }))();
+    return function () {
+      cancelled = true;
     };
-  }();
-  var revokeServer = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(widgetId, serverName) {
-      var _window$mainApi2, _window$mainApi2$revo, _t3;
+  }, []);
+  var revokeWidget = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(widgetId) {
+      var _window$mainApi, _window$mainApi$revok, _t3;
       return _regeneratorRuntime.wrap(function (_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             _context3.prev = 0;
             _context3.next = 1;
-            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.widgetMcp) === null || _window$mainApi2 === void 0 || (_window$mainApi2$revo = _window$mainApi2.revokeServer) === null || _window$mainApi2$revo === void 0 ? void 0 : _window$mainApi2$revo.call(_window$mainApi2, widgetId, serverName);
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.widgetMcp) === null || _window$mainApi === void 0 || (_window$mainApi$revok = _window$mainApi.revoke) === null || _window$mainApi$revok === void 0 ? void 0 : _window$mainApi$revok.call(_window$mainApi, widgetId);
           case 1:
             reload();
             _context3.next = 3;
@@ -48836,10 +49074,37 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
         }
       }, _callee3, null, [[0, 2]]);
     }));
-    return function revokeServer(_x2, _x3) {
+    return function revokeWidget(_x) {
       return _ref3.apply(this, arguments);
     };
   }();
+  var revokeServer = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(widgetId, serverName) {
+      var _window$mainApi2, _window$mainApi2$revo, _t4;
+      return _regeneratorRuntime.wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.prev = 0;
+            _context4.next = 1;
+            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.widgetMcp) === null || _window$mainApi2 === void 0 || (_window$mainApi2$revo = _window$mainApi2.revokeServer) === null || _window$mainApi2$revo === void 0 ? void 0 : _window$mainApi2$revo.call(_window$mainApi2, widgetId, serverName);
+          case 1:
+            reload();
+            _context4.next = 3;
+            break;
+          case 2:
+            _context4.prev = 2;
+            _t4 = _context4["catch"](0);
+            setError((_t4 === null || _t4 === void 0 ? void 0 : _t4.message) || String(_t4));
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[0, 2]]);
+    }));
+    return function revokeServer(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
   if (loading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-col p-6",
@@ -48858,55 +49123,90 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
         padding: false
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-xs opacity-60",
-        children: "Tools and paths each widget is allowed to call via MCP. Granted paths are visible to other widgets in the same dashboard that use the same MCP server. Revoke any time."
+        children: "Granting access here is a trust signal about the widget \u2014 not a per-dashboard switch."
       })]
-    }), error && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), /*#__PURE__*/jsxRuntime.jsx(HowThisWorksPanel, {}), error && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "text-xs text-red-400 bg-red-900 bg-opacity-20 border border-red-700 rounded p-3",
       children: error
     }), rows.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "text-sm opacity-60",
-      children: "No widgets have requested MCP permissions yet."
-    }), rows.map(function (_ref4) {
-      var widgetId = _ref4.widgetId,
-        declared = _ref4.declared,
-        granted = _ref4.granted;
+      children: "No widgets installed."
+    }), rows.map(function (_ref5) {
+      var widgetId = _ref5.widgetId,
+        declared = _ref5.declared,
+        granted = _ref5.granted,
+        hasManifest = _ref5.hasManifest,
+        grantOrigin = _ref5.grantOrigin;
       return /*#__PURE__*/jsxRuntime.jsx(WidgetGrantRow, {
         widgetId: widgetId,
         declared: declared,
         granted: granted,
+        hasManifest: hasManifest,
+        grantOrigin: grantOrigin,
         onRevokeWidget: function onRevokeWidget() {
           return revokeWidget(widgetId);
         },
         onRevokeServer: function onRevokeServer(serverName) {
           return revokeServer(widgetId, serverName);
+        },
+        onGrantManually: function onGrantManually() {
+          return setManualGrantWidgetId(widgetId);
         }
       }, widgetId);
+    }), /*#__PURE__*/jsxRuntime.jsx(GrantManuallyModal, {
+      isOpen: !!manualGrantWidgetId,
+      setIsOpen: function setIsOpen(open) {
+        if (!open) setManualGrantWidgetId(null);
+      },
+      widgetId: manualGrantWidgetId,
+      knownServerNames: knownServerNames,
+      onGranted: function onGranted() {
+        setManualGrantWidgetId(null);
+        reload();
+      }
     })]
   });
 };
-var WidgetGrantRow = function WidgetGrantRow(_ref5) {
-  var widgetId = _ref5.widgetId,
-    declared = _ref5.declared,
-    granted = _ref5.granted,
-    onRevokeWidget = _ref5.onRevokeWidget,
-    onRevokeServer = _ref5.onRevokeServer;
+var WidgetGrantRow = function WidgetGrantRow(_ref6) {
+  var widgetId = _ref6.widgetId,
+    declared = _ref6.declared,
+    granted = _ref6.granted,
+    hasManifest = _ref6.hasManifest,
+    grantOrigin = _ref6.grantOrigin,
+    onRevokeWidget = _ref6.onRevokeWidget,
+    onRevokeServer = _ref6.onRevokeServer,
+    onGrantManually = _ref6.onGrantManually;
   var declaredServers = declared && declared.servers || {};
   var grantedServers = granted && granted.servers || {};
   var allServerNames = Array.from(new Set([].concat(_toConsumableArray(Object.keys(declaredServers)), _toConsumableArray(Object.keys(grantedServers)))));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col space-y-3 border border-gray-700 rounded p-3",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-row items-center justify-between",
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-sm font-mono break-all",
-        children: widgetId
-      }), Object.keys(grantedServers).length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Revoke all",
-        onClick: onRevokeWidget
+      className: "flex flex-row items-center justify-between gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center gap-2 min-w-0",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm font-mono break-all",
+          children: widgetId
+        }), grantOrigin && /*#__PURE__*/jsxRuntime.jsx(GrantOriginBadge, {
+          origin: grantOrigin
+        }), !hasManifest && !granted && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs uppercase tracking-wider text-amber-400",
+          children: "no manifest"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row gap-2",
+        children: [!hasManifest && !granted && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Grant manually",
+          onClick: onGrantManually
+        }), Object.keys(grantedServers).length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          title: "Revoke all",
+          onClick: onRevokeWidget
+        })]
       })]
     }), !declared && !granted && /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "text-xs opacity-50",
-      children: "(no manifest, no grant \u2014 should not happen)"
+      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];
@@ -48943,10 +49243,10 @@ var WidgetGrantRow = function WidgetGrantRow(_ref5) {
     })]
   });
 };
-var PermsList = function PermsList(_ref6) {
-  var label = _ref6.label,
-    declaredItems = _ref6.declaredItems,
-    grantedItems = _ref6.grantedItems;
+var PermsList = function PermsList(_ref7) {
+  var label = _ref7.label,
+    declaredItems = _ref7.declaredItems,
+    grantedItems = _ref7.grantedItems;
   if (declaredItems.length === 0 && grantedItems.length === 0) return null;
   var grantedSet = new Set(grantedItems);
   var declaredSet = new Set(declaredItems);
@@ -48970,6 +49270,253 @@ var PermsList = function PermsList(_ref6) {
   });
 };
 
+/**
+ * Renders a small badge showing how the user got to this grant. Helps
+ * the user audit grants that were approved against a scanner guess
+ * rather than the developer's explicit declaration.
+ */
+var GrantOriginBadge = function GrantOriginBadge(_ref8) {
+  var origin = _ref8.origin;
+  var styles = {
+    declared: {
+      label: "declared",
+      color: "text-green-400"
+    },
+    discovered: {
+      label: "discovered",
+      color: "text-amber-400"
+    },
+    manual: {
+      label: "manual",
+      color: "text-blue-400"
+    }
+  };
+  var style = styles[origin];
+  if (!style) return null;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: "text-xs uppercase tracking-wider ".concat(style.color),
+    title: "Origin: ".concat(origin),
+    children: style.label
+  });
+};
+
+// Mock fixtures for the "Example rows" section. These use the same
+// WidgetGrantRow component the real rows use, so the preview always
+// reflects the real rendering. Click handlers are no-ops — the panel is
+// for visualization only.
+var EXAMPLE_FIXTURES = [{
+  caption: "Declared by the developer and granted by the user.",
+  widgetId: "@example/notes-summarizer",
+  hasManifest: true,
+  grantOrigin: "declared",
+  declared: {
+    servers: {
+      filesystem: {
+        tools: ["read_file", "list_directory"],
+        readPaths: ["~/Documents/notes"],
+        writePaths: []
+      }
+    }
+  },
+  granted: {
+    grantOrigin: "declared",
+    servers: {
+      filesystem: {
+        tools: ["read_file", "list_directory"],
+        readPaths: ["~/Documents/notes"],
+        writePaths: []
+      }
+    }
+  }
+}, {
+  caption: "Declared by the developer — the user hasn't decided yet.",
+  widgetId: "@example/code-search",
+  hasManifest: true,
+  grantOrigin: null,
+  declared: {
+    servers: {
+      github: {
+        tools: ["search_repositories", "get_file_contents"]
+      }
+    }
+  },
+  granted: null
+}, {
+  caption: "Detected by the install-time scanner and granted.",
+  widgetId: "@example/file-helper",
+  hasManifest: false,
+  grantOrigin: "discovered",
+  declared: null,
+  granted: {
+    grantOrigin: "discovered",
+    servers: {
+      filesystem: {
+        tools: ["read_file"],
+        readPaths: [],
+        writePaths: []
+      }
+    }
+  }
+}, {
+  caption: "Granted manually because the widget had no manifest.",
+  widgetId: "@example/legacy-widget",
+  hasManifest: false,
+  grantOrigin: "manual",
+  declared: null,
+  granted: {
+    grantOrigin: "manual",
+    servers: {
+      filesystem: {
+        tools: ["read_file", "write_file"],
+        readPaths: ["~/Downloads"],
+        writePaths: ["/tmp/widget-output"]
+      }
+    }
+  }
+}];
+var noop = function noop() {};
+
+/**
+ * Collapsible explainer that documents how grants flow per-widget vs
+ * per-dashboard, with a concrete example table and rendered preview rows
+ * for each grant state. Default-collapsed so users who don't care never
+ * see it.
+ */
+var HowThisWorksPanel = function HowThisWorksPanel() {
+  var _useState1 = React.useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    open = _useState10[0],
+    setOpen = _useState10[1];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border border-gray-700 rounded",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+      type: "button",
+      onClick: function onClick() {
+        return setOpen(function (v) {
+          return !v;
+        });
+      },
+      className: "w-full flex flex-row items-center justify-between px-3 py-2 text-left text-sm hover:bg-gray-800",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        children: "How widget MCP permissions work"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: open ? "chevron-up" : "chevron-down",
+        className: "h-3 w-3 opacity-60"
+      })]
+    }), open && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col space-y-4 px-3 py-3 border-t border-gray-800 text-xs leading-relaxed",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("p", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-semibold",
+            children: "The grant is about the widget, not the dashboard."
+          }), " ", "When you grant ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            children: "@trops/notes-summarizer"
+          }), " access to", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            children: "~/Documents"
+          }), ", you're saying \"I trust this widget with this path, anywhere.\" Grants live one-per-widget, regardless of how many dashboards use it."]
+        }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-semibold",
+            children: "Each dashboard automatically scopes its servers."
+          }), " ", "When you open a dashboard, Dash spawns a separate MCP server process per dashboard. That server is configured with only the paths granted to widgets actually on that dashboard \u2014 nothing else. Two dashboards using the same widget share the same grant; two dashboards using different widgets get different effective scopes."]
+        }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-semibold",
+            children: "What this doesn't do."
+          }), " ", "There's no way today to say \"this widget can use filesystem on Dashboard 1 but not Dashboard 2.\" Grants are per-widget; per-(widget, dashboard) granularity would need a bigger UX rework. If you don't want a widget to access a path on a particular dashboard, the workaround is to remove it from that dashboard or revoke the grant entirely."]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "font-semibold",
+          children: ["Example: widget A granted ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            children: "/Documents"
+          }), ", widget B granted ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            children: "/Code"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsxs("table", {
+          className: "w-full text-xs border border-gray-800",
+          children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+            children: /*#__PURE__*/jsxRuntime.jsxs("tr", {
+              className: "bg-gray-900",
+              children: [/*#__PURE__*/jsxRuntime.jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Scenario"
+              }), /*#__PURE__*/jsxRuntime.jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Dashboard 1 sees"
+              }), /*#__PURE__*/jsxRuntime.jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Dashboard 2 sees"
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("tbody", {
+            children: [/*#__PURE__*/jsxRuntime.jsxs("tr", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800",
+                children: "A on Dash 1, B on Dash 2"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Code"
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("tr", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800",
+                children: "A on both, B on Dash 2"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents, /Code"
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("tr", {
+              children: [/*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1",
+                children: "A + B both on Dash 1"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 font-mono",
+                children: "/Documents, /Code"
+              }), /*#__PURE__*/jsxRuntime.jsx("td", {
+                className: "px-2 py-1 opacity-60",
+                children: "(no server)"
+              })]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "font-semibold",
+          children: "What each row state looks like"
+        }), EXAMPLE_FIXTURES.map(function (f) {
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "space-y-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "italic opacity-60",
+              children: f.caption
+            }), /*#__PURE__*/jsxRuntime.jsx(WidgetGrantRow, {
+              widgetId: f.widgetId,
+              declared: f.declared,
+              granted: f.granted,
+              hasManifest: f.hasManifest,
+              grantOrigin: f.grantOrigin,
+              onRevokeWidget: noop,
+              onRevokeServer: noop,
+              onGrantManually: noop
+            })]
+          }, f.widgetId);
+        })]
+      })]
+    })]
+  });
+};
+
 var SECTIONS = [{
   key: "general",
   label: "General",