better

plugin-agent-permissions/src/manifest.ts

@@ -13,8 +13,8 @@ const manifest: PaperclipPluginManifestV1 = {
     "plugin.state.read",
     "plugin.state.write",
     "ui.detailTab.register",
-    "ui.sidebar.register",
+    "ui.page.register",
-    "ui.page.register"
+    "instance.settings.register"
   ],
   entrypoints: {
     worker: "./dist/worker.js",
@@ -29,18 +29,18 @@ const manifest: PaperclipPluginManifestV1 = {
         exportName: "PermissionsPage",
         routePath: "/permissions"
       },
+      {
+        type: "settingsPage",
+        id: "permissions-settings",
+        displayName: "Agent Permissions",
+        exportName: "PermissionsSettingsPage"
+      },
       {
         type: "detailTab",
         id: "permissions",
         displayName: "Permissions",
         exportName: "AgentPermissionsTab",
         entityTypes: ["agent"]
-      },
-      {
-        type: "sidebar",
-        id: "permissions-nav",
-        displayName: "Permissions",
-        exportName: "PermissionsNav"
       }
     ]
   }

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

@@ -1,70 +0,0 @@
-import { usePluginData, useHostContext } from "@paperclipai/plugin-sdk/ui";
-import type { PluginSidebarProps } from "@paperclipai/plugin-sdk/ui";
-import { SIDEBAR_PREVIEW_LIMIT, type PermissionKey } from "../constants";
-
-interface AgentPermissionsSummary {
-  agentId: string;
-  agentName: string;
-  permissions: Record<PermissionKey, boolean>;
-}
-
-export function PermissionsNav(_props: PluginSidebarProps) {
-  const { companyId } = useHostContext();
-  const { data: agentsData, loading, error } = usePluginData<AgentPermissionsSummary[]>(
-    "all-agents-permissions",
-    companyId ? { companyId } : undefined
-  );
-
-  if (loading) return (
-    <div role="status" style={{ padding: "1rem" }}>
-      Loading permissions...
-    </div>
-  );
-  if (error) return (
-    <div role="alert" style={{ padding: "1rem", color: "#c00" }}>
-      <strong>Error:</strong> {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 id="permissions-nav-heading" style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.75rem" }}>Permissions</h3>
-      <p aria-labelledby="permissions-nav-heading" style={{ color: "#666", fontSize: "0.75rem", marginBottom: "1rem" }}>
-        {agentsWithPermissions.length} agent(s) with custom permissions
-      </p>
-      <ul style={{ display: "flex", flexDirection: "column", gap: "0.5rem", padding: 0, margin: 0, listStyle: "none" }}>
-        {agentsData.slice(0, SIDEBAR_PREVIEW_LIMIT).map(agent => {
-          const permCount = Object.values(agent.permissions).filter(Boolean).length;
-          return (
-            <li 
-              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>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}

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

@@ -20,7 +20,7 @@ export function PermissionsPage(_props: PluginPageProps) {
   const togglePermission = usePluginAction("toggle-agent-permission");
   const [updating, setUpdating] = useState<{ agentId: string; permissionKey: PermissionKey } | null>(null);
   const [lastError, setLastError] = useState<Error | null>(null);
-  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
+  const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set());
 
   async function handleToggle(agentId: string, permissionKey: PermissionKey, currentEnabled: boolean) {
     setLastError(null);
@@ -37,6 +37,18 @@ export function PermissionsPage(_props: PluginPageProps) {
     }
   }
 
+  function handleToggleAgent(agentId: string) {
+    setExpandedAgents((prev) => {
+      const next = new Set(prev);
+      if (next.has(agentId)) {
+        next.delete(agentId);
+      } else {
+        next.add(agentId);
+      }
+      return next;
+    });
+  }
+
   if (loading) {
     return (
       <div style={{ padding: "2rem", textAlign: "center" }}>
@@ -62,12 +74,8 @@ export function PermissionsPage(_props: PluginPageProps) {
     );
   }
 
-  const selectedAgent = selectedAgentId 
-    ? agentsData.find(a => a.agentId === selectedAgentId) 
-    : null;
-
   return (
-    <div style={{ padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }}>
+    <div style={{ padding: "1.5rem", maxWidth: "900px", margin: "0 auto" }}>
       <header style={{ marginBottom: "2rem" }}>
         <h1 id="permissions-heading" style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "0.5rem" }}>
           Agent Permissions
@@ -94,81 +102,76 @@ export function PermissionsPage(_props: PluginPageProps) {
         </div>
       )}
 
-      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: "1.5rem", minHeight: "500px" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <aside>
-          <h2 style={{ fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "#666" }}>
-            AGENTS ({agentsData.length})
-          </h2>
-          <nav style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
         {agentsData.map(agent => {
           const permCount = Object.values(agent.permissions).filter(Boolean).length;
-              const isSelected = selectedAgentId === agent.agentId;
+          const isExpanded = expandedAgents.has(agent.agentId);
           
           return (
-                <button
+            <div 
               key={agent.agentId}
-                  onClick={() => setSelectedAgentId(agent.agentId)}
               style={{ 
+                border: "1px solid #e5e7eb", 
+                borderRadius: "8px",
+                backgroundColor: "#fff"
+              }}
+            >
+              <button
+                onClick={() => handleToggleAgent(agent.agentId)}
+                style={{
+                  width: "100%",
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
-                    padding: "0.625rem 0.75rem",
+                  padding: "1rem 1.25rem",
                   border: "none",
-                    borderRadius: "6px",
+                  background: "transparent",
-                    backgroundColor: isSelected ? "var(--primary-bg, #e0e7ff)" : "transparent",
-                    color: "inherit",
                   cursor: "pointer",
                   textAlign: "left",
-                    fontSize: "0.875rem",
+                  fontSize: "1rem",
+                  fontWeight: 600,
+                  color: "inherit",
                   transition: "background-color 0.15s"
                 }}
               >
-                  <span style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-                    {agent.agentName}
+                  <span 
+                    style={{ 
+                      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                      transition: "transform 0.2s",
+                      display: "inline-block"
+                    }}
+                  >
+                    ▶
                   </span>
+                  <span>{agent.agentName}</span>
+                </div>
                 {permCount > 0 && (
                   <span style={{ 
                     fontSize: "0.75rem", 
-                      backgroundColor: isSelected ? "var(--primary, #6366f1)" : "#e5e7eb",
+                    backgroundColor: "#e5e7eb",
-                      color: isSelected ? "#fff" : "#666",
+                    color: "#666",
-                      padding: "0.125rem 0.375rem",
+                    padding: "0.125rem 0.5rem",
                     borderRadius: "999px"
                   }}>
-                      {permCount}
+                    {permCount} permission(s)
                   </span>
                 )}
               </button>
-              );
-            })}
-          </nav>
-        </aside>
-
-        <main>
-          {selectedAgent ? (
-            <div style={{ 
-              border: "1px solid #e5e7eb", 
-              borderRadius: "8px", 
-              padding: "1.5rem",
-              backgroundColor: "#fff"
-            }}>
-              <div style={{ marginBottom: "1.5rem" }}>
-                <h2 style={{ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.25rem" }}>
-                  {selectedAgent.agentName}
-                </h2>
-                <p style={{ fontSize: "0.875rem", color: "#666" }}>Manage permissions for this agent</p>
-              </div>
               
+              {isExpanded && (
+                <div style={{ padding: "0 1.25rem 1.25rem" }}>
                   <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
-                <legend style={{ display: "none" }}>Permission toggles for {selectedAgent.agentName}</legend>
+                    <legend style={{ display: "none" }}>Permission toggles for {agent.agentName}</legend>
-                <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+                    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", marginTop: "0.5rem" }}>
                       {PERMISSION_KEYS.map((key) => {
-                    const enabled = selectedAgent.permissions[key] ?? false;
+                        const enabled = agent.permissions[key] ?? false;
-                    const isUpdating = updating?.agentId === selectedAgent.agentId && updating?.permissionKey === key;
+                        const isUpdating = updating?.agentId === agent.agentId && updating?.permissionKey === key;
                         
                         return (
                           <label 
                             key={key} 
-                        htmlFor={`perm-${selectedAgent.agentId}-${key}`}
+                            htmlFor={`perm-${agent.agentId}-${key}`}
                             style={{ 
                               display: "flex", 
                               alignItems: "center",
@@ -182,12 +185,12 @@ export function PermissionsPage(_props: PluginPageProps) {
                             }}
                           >
                             <input
-                          id={`perm-${selectedAgent.agentId}-${key}`}
+                              id={`perm-${agent.agentId}-${key}`}
                               type="checkbox"
                               checked={enabled}
-                          onChange={() => handleToggle(selectedAgent.agentId, key, enabled)}
+                              onChange={() => handleToggle(agent.agentId, key, enabled)}
                               disabled={updating !== null}
-                          aria-describedby={isUpdating ? `loading-${selectedAgent.agentId}-${key}` : undefined}
+                              aria-describedby={isUpdating ? `loading-${agent.agentId}-${key}` : undefined}
                               style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
                             />
                             <div style={{ flex: 1 }}>
@@ -198,7 +201,7 @@ export function PermissionsPage(_props: PluginPageProps) {
                             </div>
                             {isUpdating && (
                               <span 
-                            id={`loading-${selectedAgent.agentId}-${key}`}
+                                id={`loading-${agent.agentId}-${key}`}
                                 style={{ color: "#888", fontSize: "0.75rem" }}
                                 role="status"
                               >
@@ -211,20 +214,10 @@ export function PermissionsPage(_props: PluginPageProps) {
                     </div>
                   </fieldset>
                 </div>
-          ) : (
-            <div style={{ 
-              display: "flex", 
-              alignItems: "center", 
-              justifyContent: "center", 
-              height: "300px",
-              border: "2px dashed #e5e7eb",
-              borderRadius: "8px",
-              color: "#666"
-            }}>
-              Select an agent from the list to manage their permissions
-            </div>
               )}
-        </main>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -0,0 +1,259 @@
+import { useState } from "react";
+import { useHostContext, usePluginData, usePluginAction, usePluginToast, type PluginSettingsPageProps } from "@paperclipai/plugin-sdk/ui";
+
+type Permission = {
+  capability: string;
+  allowed: boolean;
+};
+
+type AgentRecord = {
+  id: string;
+  name: string;
+  status: string;
+  description?: string | null;
+};
+
+const layoutStyle = {
+  display: "grid",
+  gap: "16px",
+};
+
+const cardStyle = {
+  border: "1px solid var(--border)",
+  borderRadius: "12px",
+  overflow: "hidden",
+  background: "var(--card, transparent)",
+};;
+
+const headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  padding: "14px 16px",
+  cursor: "pointer",
+  background: "color-mix(in srgb, var(--muted, #888) 6%, transparent)",
+  userSelect: "none",
+};
+
+const contentStyle = {
+  padding: "14px 16px 16px",
+  display: "grid",
+  gap: "12px",
+};;
+
+const permissionRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "12px",
+  padding: "8px 10px",
+  borderRadius: "8px",
+  border: "1px solid color-mix(in srgb, var(--border) 60%, transparent)",
+};;
+
+const mutedTextStyle = {
+  fontSize: "12px",
+  opacity: 0.72,
+  lineHeight: 1.45,
+};;
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      style={{
+        transition: "transform 0.15s ease",
+        transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+      }}
+    >
+      <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const isActive = status === "active";
+  return (
+    <span
+      style={{
+        fontSize: "11px",
+        padding: "2px 8px",
+        borderRadius: "999px",
+        border: "1px solid var(--border)",
+        background: isActive ? "color-mix(in srgb, #16a34a 15%, transparent)" : "transparent",
+        color: isActive ? "#86efac" : "inherit",
+      }}
+    >
+      {status}
+    </span>
+  );
+}
+
+export function PermissionsSettingsPage({ context }: PluginSettingsPageProps) {
+  const companyId = context.companyId;
+  
+  const agentsQuery = usePluginData<AgentRecord[]>("agents", companyId ? { companyId } : {});
+  const permissionsQuery = usePluginData<Permission[]>("agent-permissions", companyId ? { companyId } : {});
+  const updatePermissions = usePluginAction("update-agent-permissions");
+  const toast = usePluginToast();
+  
+  const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set());
+
+  const agents = agentsQuery.data ?? [];
+  const allPermissions = permissionsQuery.data ?? [];
+
+  function getAgentPermissions(agentId: string): Permission[] {
+    return allPermissions.filter((p) => p.capability.startsWith(`${agentId}:`));
+  }
+
+  function handleToggleAgent(agentId: string) {
+    setExpandedAgents((prev) => {
+      const next = new Set(prev);
+      if (next.has(agentId)) {
+        next.delete(agentId);
+      } else {
+        next.add(agentId);
+      }
+      return next;
+    });
+  }
+
+  async function handleTogglePermission(agentId: string, capability: string, newValue: boolean) {
+    if (!companyId) return;
+    
+    try {
+      await updatePermissions({
+        companyId,
+        agentId,
+        capability,
+        allowed: newValue,
+      });
+      permissionsQuery.refresh();
+      toast({
+        title: "Permission updated",
+        body: `${capability}: ${newValue ? "allowed" : "denied"}`,
+        tone: "success",
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast({
+        title: "Failed to update permission",
+        body: message,
+        tone: "error",
+      });
+    }
+  }
+
+  if (!companyId) {
+    return (
+      <div style={layoutStyle}>
+        <div style={{ fontSize: "13px", opacity: 0.7 }}>
+          Select a company to manage agent permissions.
+        </div>
+      </div>
+    );
+  }
+
+  if (agentsQuery.loading || permissionsQuery.loading) {
+    return (
+      <div style={layoutStyle}>
+        <div style={{ fontSize: "13px", opacity: 0.7 }}>
+          Loading agents and permissions…
+        </div>
+      </div>
+    );
+  }
+
+  if (agents.length === 0) {
+    return (
+      <div style={layoutStyle}>
+        <div style={{ fontSize: "13px", opacity: 0.7 }}>
+          No agents found for this company.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={layoutStyle}>
+      <div style={{ display: "grid", gap: "6px" }}>
+        <strong>Agent Permissions</strong>
+        <div style={mutedTextStyle}>
+          Manage permissions for each agent in your company. Toggle capabilities to allow or deny specific actions.
+        </div>
+      </div>
+
+      <div style={{ display: "grid", gap: "10px" }}>
+        {agents.map((agent) => {
+          const isExpanded = expandedAgents.has(agent.id);
+          const agentPermissions = getAgentPermissions(agent.id);
+
+          return (
+            <div key={agent.id} style={cardStyle}>
+              <div style={headerStyle} onClick={() => handleToggleAgent(agent.id)}>
+                <ChevronIcon expanded={isExpanded} />
+                <div style={{ display: "grid", gap: "2px", flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                    <strong style={{ fontSize: "13px" }}>{agent.name}</strong>
+                    <StatusBadge status={agent.status} />
+                  </div>
+                  {agent.description ? (
+                    <div style={{ ...mutedTextStyle, fontSize: "12px" }}>{agent.description}</div>
+                  ) : null}
+                </div>
+                <span style={{ ...mutedTextStyle, fontSize: "11px" }}>
+                  {agentPermissions.length} permissions
+                </span>
+              </div>
+
+              {isExpanded ? (
+                <div style={contentStyle}>
+                  {agentPermissions.length === 0 ? (
+                    <div style={{ ...mutedTextStyle, fontSize: "12px" }}>
+                      No custom permissions configured for this agent.
+                    </div>
+                  ) : (
+                    <div style={{ display: "grid", gap: "8px" }}>
+                      {agentPermissions.map((permission) => {
+                        const capabilityName = permission.capability.replace(`${agent.id}:`, "");
+                        
+                        return (
+                          <div key={permission.capability} style={permissionRowStyle}>
+                            <div style={{ display: "grid", gap: "2px", flex: 1 }}>
+                              <div style={{ fontSize: "12px" }}>{capabilityName}</div>
+                              <div style={{ ...mutedTextStyle, fontSize: "11px" }}>
+                                {permission.capability}
+                              </div>
+                            </div>
+                            <label style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer" }}>
+                              <input
+                                type="checkbox"
+                                checked={permission.allowed}
+                                onChange={(e) => handleTogglePermission(agent.id, permission.capability, e.target.checked)}
+                                style={{
+                                  width: "16px",
+                                  height: "16px",
+                                  accentColor: "var(--foreground)",
+                                }}
+                              />
+                              <span style={{ fontSize: "11px" }}>
+                                {permission.allowed ? "Allowed" : "Denied"}
+                              </span>
+                            </label>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,3 @@
 export { AgentPermissionsTab } from './AgentPermissionsTab';
-export { PermissionsNav } from './PermissionsNav';
 export { PermissionsPage } from './PermissionsPage';
+export { PermissionsSettingsPage } from './PermissionsSettingsPage';