no idea how this works

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

@@ -1,47 +1,38 @@
 import { useState } from "react";
 import { usePluginData, usePluginAction } from "@paperclipai/plugin-sdk/ui";
 import type { PluginDetailTabProps } from "@paperclipai/plugin-sdk/ui";
-
-const PERMISSION_KEYS = [
-  "agents:create",
-  "users:invite",
-  "users:manage_permissions",
-  "tasks:assign",
-  "tasks:assign_scope",
-  "joins:approve"
-] as const;
-
-const PERMISSION_LABELS: Record<string, string> = {
-  "agents:create": "Create Agents",
-  "users:invite": "Invite Users",
-  "users:manage_permissions": "Manage Permissions",
-  "tasks:assign": "Assign Tasks",
-  "tasks:assign_scope": "Task Assignment Scope",
-  "joins:approve": "Approve Join Requests"
-};
+import { PERMISSION_KEYS, PERMISSION_LABELS, type PermissionKey } from "../constants";
 
 export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
   const { entityId: agentId } = context;
   
   const { data, loading, error, refresh } = usePluginData<{
     agentId: string;
-    permissions: Record<string, boolean>;
+    permissions: Record<PermissionKey, boolean>;
   }>("agent-permissions", { agentId });
   
   const togglePermission = usePluginAction("toggle-agent-permission");
-  const [updating, setUpdating] = useState<string | null>(null);
+  const [updating, setUpdating] = useState<PermissionKey | null>(null);
+  const [lastError, setLastError] = useState<Error | null>(null);
 
   if (loading) return <div style={{ padding: "1rem" }}>Loading permissions...</div>;
-  if (error) return <div style={{ padding: "1rem", color: "#c00" }}>Error: {error.message}</div>;
+  if (error) return (
+    <div role="alert" style={{ padding: "1rem", color: "#c00" }}>
+      <strong>Error:</strong> {error.message}
+    </div>
+  );
   if (!data) return <div style={{ padding: "1rem" }}>No permissions data available</div>;
 
-  async function handleToggle(permissionKey: string, currentEnabled: boolean) {
+  async function handleToggle(permissionKey: PermissionKey, currentEnabled: boolean) {
+    setLastError(null);
     setUpdating(permissionKey);
     try {
       await togglePermission({ agentId, permissionKey, enabled: !currentEnabled });
       await refresh();
     } catch (err) {
-      console.error("Failed to toggle permission:", err);
+      const error = err instanceof Error ? err : new Error(String(err));
+      setLastError(error);
+      console.error("Failed to toggle permission:", error);
     } finally {
       setUpdating(null);
     }
@@ -49,40 +40,74 @@ export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
 
   return (
     <div style={{ padding: "1rem", maxWidth: "600px" }}>
-      <h2 style={{ marginBottom: "1.5rem", fontSize: "1.25rem", fontWeight: 600 }}>Agent Permissions</h2>
+      <h2 id="permissions-heading" style={{ marginBottom: "1.5rem", fontSize: "1.25rem", fontWeight: 600 }}>Agent Permissions</h2>
       <p style={{ color: "#666", marginBottom: "1.5rem" }}>
         Control what actions this agent can perform.
       </p>
       
-      <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-        {PERMISSION_KEYS.map((key) => {
-          const enabled = data.permissions[key] ?? false;
-          const isUpdating = updating === key;
-          
-          return (
-            <label key={key} style={{ 
-              display: "flex", 
-              alignItems: "center",
-              gap: "0.75rem",
-              cursor: isUpdating ? "wait" : "pointer",
-              padding: "0.5rem",
-              borderRadius: "4px",
-              backgroundColor: isUpdating ? "#f5f5f5" : "transparent",
-              transition: "background-color 0.2s"
-            }}>
-              <input
-                type="checkbox"
-                checked={enabled}
-                onChange={() => handleToggle(key, enabled)}
-                disabled={updating !== null}
-                style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
-              />
-              <span style={{ fontWeight: 500 }}>{PERMISSION_LABELS[key] || key}</span>
-              {isUpdating && <span style={{ color: "#888", fontSize: "0.875rem" }}>updating...</span>}
-            </label>
-          );
-        })}
-      </div>
+      {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>
+      )}
+      
+      <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
+        <legend style={{ display: "none" }}>Permission toggles</legend>
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+          {PERMISSION_KEYS.map((key) => {
+            const enabled = data.permissions[key] ?? false;
+            const isUpdating = updating === key;
+            
+            return (
+              <label 
+                key={key} 
+                htmlFor={`perm-${key}`}
+                style={{ 
+                  display: "flex", 
+                  alignItems: "center",
+                  gap: "0.75rem",
+                  cursor: isUpdating ? "wait" : "pointer",
+                  padding: "0.5rem",
+                  borderRadius: "4px",
+                  backgroundColor: isUpdating ? "#f5f5f5" : "transparent",
+                  transition: "background-color 0.2s"
+                }}
+              >
+                <input
+                  id={`perm-${key}`}
+                  type="checkbox"
+                  checked={enabled}
+                  onChange={() => handleToggle(key, enabled)}
+                  disabled={updating !== null}
+                  aria-describedby={isUpdating ? `loading-${key}` : undefined}
+                  style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
+                />
+                <span style={{ fontWeight: 500 }}>{PERMISSION_LABELS[key]}</span>
+                {isUpdating && (
+                  <span 
+                    id={`loading-${key}`}
+                    style={{ color: "#888", fontSize: "0.875rem" }}
+                    role="status"
+                  >
+                    updating...
+                  </span>
+                )}
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
     </div>
   );
 }

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

@@ -1,17 +1,26 @@
 import { usePluginData } 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<string, boolean>;
+  permissions: Record<PermissionKey, boolean>;
 }
 
-export function PermissionsNav({ context }: PluginSidebarProps) {
+export function PermissionsNav(_props: 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 (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" }}>
@@ -27,28 +36,31 @@ export function PermissionsNav({ context }: PluginSidebarProps) {
 
   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" }}>
+      <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>
-      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
-        {agentsData.slice(0, 5).map(agent => {
+      <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 (
-            <div key={agent.agentId} style={{ 
-              fontSize: "0.875rem", 
-              padding: "0.5rem", 
-              backgroundColor: "#f9f9f9", 
-              borderRadius: "4px" 
-            }}>
+            <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>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
     </div>
   );
 }