FRE-366: Add dedicated permissions page with toggle controls

- Add page slot with /permissions route for dedicated permissions management
- Add ui.page.register capability
- Create PermissionsPage component with agent list and permission toggles
- Each agent can be selected to view and toggle their permissions
- Maintains existing sidebar and detail tab functionality

Co-Authored-By: Paperclip <noreply@paperclip.ing>

plugin-agent-permissions/src/manifest.ts

@@ -13,7 +13,8 @@ const manifest: PaperclipPluginManifestV1 = {
     "plugin.state.read",
     "plugin.state.write",
     "ui.detailTab.register",
-    "ui.sidebar.register"
+    "ui.sidebar.register",
+    "ui.page.register"
   ],
   entrypoints: {
     worker: "./dist/worker.js",
@@ -21,6 +22,13 @@ const manifest: PaperclipPluginManifestV1 = {
   },
   ui: {
     slots: [
+      {
+        type: "page",
+        id: "permissions-page",
+        displayName: "Permissions",
+        exportName: "PermissionsPage",
+        routePath: "/permissions"
+      },
       {
         type: "detailTab",
         id: "permissions",

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

@@ -0,0 +1,243 @@
+import { useState } from "react";
+import { usePluginData, usePluginAction, useHostContext } from "@paperclipai/plugin-sdk/ui";
+import type { PluginPageProps } from "@paperclipai/plugin-sdk/ui";
+import { PERMISSION_KEYS, PERMISSION_LABELS, type PermissionKey } from "../constants";
+
+interface AgentPermissionsSummary {
+  agentId: string;
+  agentName: string;
+  permissions: Record<PermissionKey, boolean>;
+}
+
+export function PermissionsPage(_props: PluginPageProps) {
+  const { companyId } = useHostContext();
+  
+  const { data: agentsData, loading, error, refresh } = usePluginData<AgentPermissionsSummary[]>(
+    "all-agents-permissions",
+    companyId ? { companyId, limit: 100 } : {}
+  );
+  
+  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);
+
+  async function handleToggle(agentId: string, permissionKey: PermissionKey, currentEnabled: boolean) {
+    setLastError(null);
+    setUpdating({ agentId, permissionKey });
+    try {
+      await togglePermission({ agentId, permissionKey, enabled: !currentEnabled });
+      await refresh();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setLastError(error);
+      console.error("Failed to toggle permission:", error);
+    } finally {
+      setUpdating(null);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div style={{ padding: "2rem", textAlign: "center" }}>
+        <div style={{ color: "#666" }}>Loading agents and permissions...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div role="alert" style={{ padding: "2rem", color: "#c00" }}>
+        <strong>Error:</strong> {error.message}
+      </div>
+    );
+  }
+
+  if (!agentsData || agentsData.length === 0) {
+    return (
+      <div style={{ padding: "2rem", textAlign: "center" }}>
+        <h2 style={{ marginBottom: "1rem" }}>Agent Permissions</h2>
+        <p style={{ color: "#666" }}>No agents found in this company.</p>
+      </div>
+    );
+  }
+
+  const selectedAgent = selectedAgentId 
+    ? agentsData.find(a => a.agentId === selectedAgentId) 
+    : null;
+
+  return (
+    <div style={{ padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }}>
+      <header style={{ marginBottom: "2rem" }}>
+        <h1 id="permissions-heading" style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "0.5rem" }}>
+          Agent Permissions
+        </h1>
+        <p style={{ color: "#666" }}>
+          Manage what actions each agent can perform within Paperclip.
+        </p>
+      </header>
+
+      {lastError && (
+        <div 
+          role="alert" 
+          aria-live="polite"
+          style={{ 
+            padding: "0.75rem", 
+            marginBottom: "1rem",
+            backgroundColor: "#fee",
+            border: "1px solid #fcc",
+            borderRadius: "4px",
+            color: "#c00"
+          }}
+        >
+          <strong>Failed to update:</strong> {lastError.message}
+        </div>
+      )}
+
+      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: "1.5rem", minHeight: "500px" }}>
+        <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;
+              
+              return (
+                <button
+                  key={agent.agentId}
+                  onClick={() => setSelectedAgentId(agent.agentId)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "0.625rem 0.75rem",
+                    border: "none",
+                    borderRadius: "6px",
+                    backgroundColor: isSelected ? "var(--primary-bg, #e0e7ff)" : "transparent",
+                    color: "inherit",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    fontSize: "0.875rem",
+                    transition: "background-color 0.15s"
+                  }}
+                >
+                  <span style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {agent.agentName}
+                  </span>
+                  {permCount > 0 && (
+                    <span style={{ 
+                      fontSize: "0.75rem", 
+                      backgroundColor: isSelected ? "var(--primary, #6366f1)" : "#e5e7eb",
+                      color: isSelected ? "#fff" : "#666",
+                      padding: "0.125rem 0.375rem",
+                      borderRadius: "999px"
+                    }}>
+                      {permCount}
+                    </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>
+
+              <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
+                <legend style={{ display: "none" }}>Permission toggles for {selectedAgent.agentName}</legend>
+                <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+                  {PERMISSION_KEYS.map((key) => {
+                    const enabled = selectedAgent.permissions[key] ?? false;
+                    const isUpdating = updating?.agentId === selectedAgent.agentId && updating?.permissionKey === key;
+                    
+                    return (
+                      <label 
+                        key={key} 
+                        htmlFor={`perm-${selectedAgent.agentId}-${key}`}
+                        style={{ 
+                          display: "flex", 
+                          alignItems: "center",
+                          gap: "0.75rem",
+                          cursor: isUpdating ? "wait" : "pointer",
+                          padding: "0.75rem",
+                          borderRadius: "6px",
+                          backgroundColor: isUpdating ? "#f9fafb" : "#fafafa",
+                          border: "1px solid #e5e7eb",
+                          transition: "background-color 0.2s"
+                        }}
+                      >
+                        <input
+                          id={`perm-${selectedAgent.agentId}-${key}`}
+                          type="checkbox"
+                          checked={enabled}
+                          onChange={() => handleToggle(selectedAgent.agentId, key, enabled)}
+                          disabled={updating !== null}
+                          aria-describedby={isUpdating ? `loading-${selectedAgent.agentId}-${key}` : undefined}
+                          style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
+                        />
+                        <div style={{ flex: 1 }}>
+                          <div style={{ fontWeight: 500 }}>{PERMISSION_LABELS[key]}</div>
+                          <div style={{ fontSize: "0.75rem", color: "#666" }}>
+                            {getPermissionDescription(key)}
+                          </div>
+                        </div>
+                        {isUpdating && (
+                          <span 
+                            id={`loading-${selectedAgent.agentId}-${key}`}
+                            style={{ color: "#888", fontSize: "0.75rem" }}
+                            role="status"
+                          >
+                            updating...
+                          </span>
+                        )}
+                      </label>
+                    );
+                  })}
+                </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>
+  );
+}
+
+function getPermissionDescription(key: PermissionKey): string {
+  const descriptions: Record<PermissionKey, string> = {
+    "agents:create": "Allows this agent to create new agents (agent hiring)",
+    "users:invite": "Allows inviting board users to the company",
+    "users:manage_permissions": "Allows managing user permissions",
+    "tasks:assign": "Allows assigning tasks to agents",
+    "tasks:assign_scope": "Scope for task assignment (limits which agents can be assigned)",
+    "joins:approve": "Allows approving join requests"
+  };
+  return descriptions[key];
+}

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

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