@trops/dash-core 0.1.493 → 0.1.495

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", {
@@ -49192,6 +49192,7 @@ var WidgetGrantRow = function WidgetGrantRow(_ref6) {
     }), allServerNames.map(function (serverName) {
       var decl = declaredServers[serverName] || {};
       var grant = grantedServers[serverName];
+      var allStale = isServerEntirelyStale(decl, grant);
       return /*#__PURE__*/jsxs("div", {
         className: "flex flex-col space-y-2 border-t border-gray-800 pt-2",
         children: [/*#__PURE__*/jsxs("div", {
@@ -49208,6 +49209,9 @@ var WidgetGrantRow = function WidgetGrantRow(_ref6) {
               return onRevokeServer(serverName);
             }
           })]
+        }), allStale && /*#__PURE__*/jsx("div", {
+          className: "text-xs text-amber-400 bg-amber-900 bg-opacity-20 border border-amber-700 rounded 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__*/jsx(PermsList, {
           label: "Tools",
           declaredItems: decl.tools || [],
@@ -49241,17 +49245,44 @@ var PermsList = function PermsList(_ref7) {
     }), all.map(function (item) {
       var isGranted = grantedSet.has(item);
       var isDeclared = declaredSet.has(item);
+      var isStale = isGranted && !isDeclared;
       return /*#__PURE__*/jsxs("span", {
-        className: "text-xs font-mono break-all ".concat(isGranted ? "opacity-100" : isDeclared ? "opacity-50 line-through" : "opacity-100 text-amber-400"),
-        children: [item, !isDeclared && isGranted && /*#__PURE__*/jsx("span", {
-          className: "ml-2 opacity-60",
-          children: "(no longer declared)"
+        className: "text-xs font-mono break-all ".concat(isStale ? "text-amber-400" : isGranted ? "opacity-100" : "opacity-50 line-through"),
+        children: [item, isStale && /*#__PURE__*/jsx("span", {
+          className: "ml-2 not-italic font-sans normal-case tracking-normal text-amber-400",
+          children: "(stale \u2014 widget no longer requests this; consider revoking)"
         })]
       }, item);
     })]
   });
 };
 
+/**
+ * True when the granted entry has at least one item AND every granted
+ * item is missing from the current declared block (i.e. all of this
+ * server's grants are unused by the current manifest). Used to surface
+ * a "this whole server's grant looks unused" suggestion at the row level.
+ */
+function isServerEntirelyStale(decl, grant) {
+  if (!grant) return false;
+  var declTools = new Set(decl.tools || []);
+  var declRead = new Set(decl.readPaths || []);
+  var declWrite = new Set(decl.writePaths || []);
+  var grantedTools = grant.tools || [];
+  var grantedRead = grant.readPaths || [];
+  var grantedWrite = grant.writePaths || [];
+  var total = grantedTools.length + grantedRead.length + grantedWrite.length;
+  if (total === 0) return false;
+  var stale = grantedTools.every(function (t) {
+    return !declTools.has(t);
+  }) && grantedRead.every(function (p) {
+    return !declRead.has(p);
+  }) && grantedWrite.every(function (p) {
+    return !declWrite.has(p);
+  });
+  return stale;
+}
+
 /**
  * Renders a small badge showing how the user got to this grant. Helps
  * the user audit grants that were approved against a scanner guess
@@ -49282,6 +49313,248 @@ 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"]
+      }
+    }
+  }
+}, {
+  caption: "Stale grant — the widget upgraded and dropped readPaths from its manifest, but the user's grant is still present.",
+  widgetId: "@example/upgraded-widget",
+  hasManifest: true,
+  grantOrigin: "declared",
+  declared: {
+    // Manifest now declares only the tool, no paths.
+    servers: {
+      filesystem: {
+        tools: ["read_file"],
+        readPaths: [],
+        writePaths: []
+      }
+    }
+  },
+  granted: {
+    grantOrigin: "declared",
+    servers: {
+      filesystem: {
+        tools: ["read_file"],
+        readPaths: ["~/Documents/old-notes"],
+        writePaths: []
+      }
+    }
+  }
+}];
+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",