@trops/dash-core 0.1.493 → 0.1.494

package/dist/index.esm.js

@@ -49105,9 +49105,9 @@ var PrivacySecuritySection = function PrivacySecuritySection() {
         padding: false
       }), /*#__PURE__*/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__*/jsx("div", {
+    }), /*#__PURE__*/jsx(HowThisWorksPanel, {}), 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
     }), rows.length === 0 && /*#__PURE__*/jsx("div", {
@@ -49282,6 +49282,223 @@ var GrantOriginBadge = function GrantOriginBadge(_ref8) {
   });
 };
 
+// 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 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    open = _useState10[0],
+    setOpen = _useState10[1];
+  return /*#__PURE__*/jsxs("div", {
+    className: "border border-gray-700 rounded",
+    children: [/*#__PURE__*/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__*/jsx("span", {
+        children: "How widget MCP permissions work"
+      }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: open ? "chevron-up" : "chevron-down",
+        className: "h-3 w-3 opacity-60"
+      })]
+    }), open && /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col space-y-4 px-3 py-3 border-t border-gray-800 text-xs leading-relaxed",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsxs("p", {
+          children: [/*#__PURE__*/jsx("span", {
+            className: "font-semibold",
+            children: "The grant is about the widget, not the dashboard."
+          }), " ", "When you grant ", /*#__PURE__*/jsx("code", {
+            children: "@trops/notes-summarizer"
+          }), " access to", " ", /*#__PURE__*/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__*/jsxs("p", {
+          children: [/*#__PURE__*/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__*/jsxs("p", {
+          children: [/*#__PURE__*/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__*/jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "font-semibold",
+          children: ["Example: widget A granted ", /*#__PURE__*/jsx("code", {
+            children: "/Documents"
+          }), ", widget B granted ", /*#__PURE__*/jsx("code", {
+            children: "/Code"
+          })]
+        }), /*#__PURE__*/jsxs("table", {
+          className: "w-full text-xs border border-gray-800",
+          children: [/*#__PURE__*/jsx("thead", {
+            children: /*#__PURE__*/jsxs("tr", {
+              className: "bg-gray-900",
+              children: [/*#__PURE__*/jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Scenario"
+              }), /*#__PURE__*/jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Dashboard 1 sees"
+              }), /*#__PURE__*/jsx("th", {
+                className: "text-left px-2 py-1 border-b border-gray-800",
+                children: "Dashboard 2 sees"
+              })]
+            })
+          }), /*#__PURE__*/jsxs("tbody", {
+            children: [/*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800",
+                children: "A on Dash 1, B on Dash 2"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Code"
+              })]
+            }), /*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800",
+                children: "A on both, B on Dash 2"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 border-b border-gray-800 font-mono",
+                children: "/Documents, /Code"
+              })]
+            }), /*#__PURE__*/jsxs("tr", {
+              children: [/*#__PURE__*/jsx("td", {
+                className: "px-2 py-1",
+                children: "A + B both on Dash 1"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 font-mono",
+                children: "/Documents, /Code"
+              }), /*#__PURE__*/jsx("td", {
+                className: "px-2 py-1 opacity-60",
+                children: "(no server)"
+              })]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "font-semibold",
+          children: "What each row state looks like"
+        }), EXAMPLE_FIXTURES.map(function (f) {
+          return /*#__PURE__*/jsxs("div", {
+            className: "space-y-1",
+            children: [/*#__PURE__*/jsx("div", {
+              className: "italic opacity-60",
+              children: f.caption
+            }), /*#__PURE__*/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",