v0

plugin-agent-permissions/src/ui/PermissionsNav.tsx

@@ -0,0 +1,54 @@
+import { usePluginData } from "@paperclipai/plugin-sdk/ui";
+import type { PluginSidebarProps } from "@paperclipai/plugin-sdk/ui";
+
+interface AgentPermissionsSummary {
+  agentId: string;
+  agentName: string;
+  permissions: Record<string, boolean>;
+}
+
+export function PermissionsNav({ context }: PluginSidebarProps) {
+  const { data: agentsData, loading, error } = usePluginData<AgentPermissionsSummary[]>("all-agents-permissions");
+
+  if (loading) return <div style={{ padding: "1rem" }}>Loading...</div>;
+  if (error) return <div style={{ padding: "1rem", color: "#c00" }}>Error: {error.message}</div>;
+  if (!agentsData || agentsData.length === 0) {
+    return (
+      <div style={{ padding: "1rem" }}>
+        <h3 style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }}>Permissions</h3>
+        <p style={{ color: "#666", fontSize: "0.875rem" }}>No agents found</p>
+      </div>
+    );
+  }
+
+  const agentsWithPermissions = agentsData.filter(a => 
+    Object.values(a.permissions).some(v => v)
+  );
+
+  return (
+    <div style={{ padding: "1rem" }}>
+      <h3 style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.75rem" }}>Permissions</h3>
+      <p style={{ color: "#666", fontSize: "0.75rem", marginBottom: "1rem" }}>
+        {agentsWithPermissions.length} agent(s) with custom permissions
+      </p>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        {agentsData.slice(0, 5).map(agent => {
+          const permCount = Object.values(agent.permissions).filter(Boolean).length;
+          return (
+            <div key={agent.agentId} style={{ 
+              fontSize: "0.875rem", 
+              padding: "0.5rem", 
+              backgroundColor: "#f9f9f9", 
+              borderRadius: "4px" 
+            }}>
+              <div style={{ fontWeight: 500 }}>{agent.agentName}</div>
+              <div style={{ color: "#888", fontSize: "0.75rem" }}>
+                {permCount} permission(s) granted
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}