Mike/paperclip-plugins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reality

Browse Source
This commit is contained in:
Michael Freno
2026-03-17 13:04:16 -04:00
parent 103b59127e
commit 39a8ddef97
8 changed files with 1076 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
plugin-agent-permissions/src/constants.ts
View File

@@ -1,23 +1,18 @@
// Shared permission keys for agent permissions plugin
// Only the single real enforced permission is exposed here.
export const PERMISSION_KEYS = [
"agents:create",
"users:invite",
"users:manage_permissions",
"tasks:assign",
"tasks:assign_scope",
"joins:approve"
"canCreateAgents",
] as const;
export type PermissionKey = typeof PERMISSION_KEYS[number];
export const PERMISSION_LABELS: Record<PermissionKey, 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"
"canCreateAgents": "Can Hire Agents",
};
export const PERMISSION_DESCRIPTIONS: Record<PermissionKey, string> = {
"canCreateAgents": "Allows this agent to create (hire) new agents",
};
// Pagination constants

5
plugin-agent-permissions/src/manifest.ts
View File

@@ -10,8 +10,7 @@ const manifest: PaperclipPluginManifestV1 = {
categories: ["ui", "automation"],
capabilities: [
"agents.read",
"plugin.state.read",
"plugin.state.write",
"agents.update-permissions",
"ui.detailTab.register",
"ui.page.register",
"instance.settings.register"
@@ -27,7 +26,7 @@ const manifest: PaperclipPluginManifestV1 = {
id: "permissions-page",
displayName: "Permissions",
exportName: "PermissionsPage",
routePath: "/permissions"
routePath: "permissions"
},
{
type: "settingsPage",

127
plugin-agent-permissions/src/ui/AgentPermissionsTab.tsx
View File

@@ -1,18 +1,24 @@
import { useState } from "react";
import { usePluginData, usePluginAction } from "@paperclipai/plugin-sdk/ui";
import type { PluginDetailTabProps } from "@paperclipai/plugin-sdk/ui";
import { PERMISSION_KEYS, PERMISSION_LABELS, type PermissionKey } from "../constants";
import { PERMISSION_LABELS, PERMISSION_DESCRIPTIONS } from "../constants";
interface AgentPermissionsData {
agentId: string;
agentName: string;
canCreateAgents: boolean;
}
export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
const { entityId: agentId } = context;
const { data, loading, error, refresh } = usePluginData<{
agentId: string;
permissions: Record<PermissionKey, boolean>;
}>("agent-permissions", { agentId });
const { entityId: agentId, companyId } = context;
const { data, loading, error, refresh } = usePluginData<AgentPermissionsData>(
"agent-permissions",
{ agentId, companyId }
);
const togglePermission = usePluginAction("toggle-agent-permission");
const [updating, setUpdating] = useState<PermissionKey | null>(null);
const [updating, setUpdating] = useState(false);
const [lastError, setLastError] = useState<Error | null>(null);
if (loading) return <div style={{ padding: "1rem" }}>Loading permissions...</div>;
@@ -23,18 +29,18 @@ export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
);
if (!data) return <div style={{ padding: "1rem" }}>No permissions data available</div>;
async function handleToggle(permissionKey: PermissionKey, currentEnabled: boolean) {
async function handleToggle(currentEnabled: boolean) {
setLastError(null);
setUpdating(permissionKey);
setUpdating(true);
try {
await togglePermission({ agentId, permissionKey, enabled: !currentEnabled });
await togglePermission({ agentId, companyId, 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);
const e = err instanceof Error ? err : new Error(String(err));
setLastError(e);
console.error("Failed to toggle permission:", e);
} finally {
setUpdating(null);
setUpdating(false);
}
}
@@ -44,13 +50,13 @@ export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
<p style={{ color: "#666", marginBottom: "1.5rem" }}>
Control what actions this agent can perform.
</p>
{lastError && (
<div
role="alert"
<div
role="alert"
aria-live="polite"
style={{
padding: "0.75rem",
style={{
padding: "0.75rem",
marginBottom: "1rem",
backgroundColor: "#fee",
border: "1px solid #fcc",
@@ -61,51 +67,48 @@ export function AgentPermissionsTab({ context }: PluginDetailTabProps) {
<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"
}}
<label
htmlFor="perm-canCreateAgents"
style={{
display: "flex",
alignItems: "center",
gap: "0.75rem",
cursor: updating ? "wait" : "pointer",
padding: "0.5rem",
borderRadius: "4px",
backgroundColor: updating ? "#f5f5f5" : "transparent",
transition: "background-color 0.2s"
}}
>
<input
id="perm-canCreateAgents"
type="checkbox"
checked={data.canCreateAgents}
onChange={() => handleToggle(data.canCreateAgents)}
disabled={updating}
style={{ width: "18px", height: "18px", cursor: updating ? "wait" : "pointer" }}
/>
<span>
<span style={{ fontWeight: 500, display: "block" }}>
{PERMISSION_LABELS["canCreateAgents"]}
</span>
<span style={{ color: "#666", fontSize: "0.875rem" }}>
{PERMISSION_DESCRIPTIONS["canCreateAgents"]}
</span>
</span>
{updating && (
<span
style={{ color: "#888", fontSize: "0.875rem" }}
role="status"
>
<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>
);
})}
updating...
</span>
)}
</label>
</div>
</fieldset>
</div>

70
plugin-agent-permissions/src/ui/PermissionsNav.tsx Normal file
View File

@@ -0,0 +1,70 @@
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>
);
}

141
plugin-agent-permissions/src/ui/PermissionsPage.tsx
View File

@@ -1,32 +1,32 @@
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";
import { PERMISSION_LABELS, PERMISSION_DESCRIPTIONS } from "../constants";
interface AgentPermissionsSummary {
agentId: string;
agentName: string;
permissions: Record<PermissionKey, boolean>;
canCreateAgents: 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 [updating, setUpdating] = useState<string | null>(null);
const [lastError, setLastError] = useState<Error | null>(null);
const [expandedAgents, setExpandedAgents] = useState<Set<string>>(new Set());
async function handleToggle(agentId: string, permissionKey: PermissionKey, currentEnabled: boolean) {
async function handleToggle(agentId: string, currentEnabled: boolean) {
setLastError(null);
setUpdating({ agentId, permissionKey });
setUpdating(agentId);
try {
await togglePermission({ agentId, permissionKey, enabled: !currentEnabled });
await togglePermission({ agentId, companyId, enabled: !currentEnabled });
await refresh();
} catch (err) {
const error = err instanceof Error ? err : new Error(String(err));
@@ -86,11 +86,11 @@ export function PermissionsPage(_props: PluginPageProps) {
</header>
{lastError && (
<div
role="alert"
<div
role="alert"
aria-live="polite"
style={{
padding: "0.75rem",
style={{
padding: "0.75rem",
marginBottom: "1rem",
backgroundColor: "#fee",
border: "1px solid #fcc",
@@ -104,14 +104,14 @@ export function PermissionsPage(_props: PluginPageProps) {
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
{agentsData.map(agent => {
const permCount = Object.values(agent.permissions).filter(Boolean).length;
const isExpanded = expandedAgents.has(agent.agentId);
const isUpdating = updating === agent.agentId;
return (
<div
<div
key={agent.agentId}
style={{
border: "1px solid #e5e7eb",
style={{
border: "1px solid #e5e7eb",
borderRadius: "8px",
backgroundColor: "#fff"
}}
@@ -135,8 +135,8 @@ export function PermissionsPage(_props: PluginPageProps) {
}}
>
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
<span
style={{
<span
style={{
transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
transition: "transform 0.2s",
display: "inline-block"
@@ -146,71 +146,58 @@ export function PermissionsPage(_props: PluginPageProps) {
</span>
<span>{agent.agentName}</span>
</div>
{permCount > 0 && (
<span style={{
fontSize: "0.75rem",
{agent.canCreateAgents && (
<span style={{
fontSize: "0.75rem",
backgroundColor: "#e5e7eb",
color: "#666",
padding: "0.125rem 0.5rem",
borderRadius: "999px"
}}>
{permCount} permission(s)
can hire
</span>
)}
</button>
{isExpanded && (
<div style={{ padding: "0 1.25rem 1.25rem" }}>
<fieldset style={{ border: "none", padding: 0, margin: 0 }}>
<legend style={{ display: "none" }}>Permission toggles for {agent.agentName}</legend>
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", marginTop: "0.5rem" }}>
{PERMISSION_KEYS.map((key) => {
const enabled = agent.permissions[key] ?? false;
const isUpdating = updating?.agentId === agent.agentId && updating?.permissionKey === key;
return (
<label
key={key}
htmlFor={`perm-${agent.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-${agent.agentId}-${key}`}
type="checkbox"
checked={enabled}
onChange={() => handleToggle(agent.agentId, key, enabled)}
disabled={updating !== null}
aria-describedby={isUpdating ? `loading-${agent.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-${agent.agentId}-${key}`}
style={{ color: "#888", fontSize: "0.75rem" }}
role="status"
>
updating...
</span>
)}
</label>
);
})}
<label
htmlFor={`perm-${agent.agentId}-canCreateAgents`}
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-${agent.agentId}-canCreateAgents`}
type="checkbox"
checked={agent.canCreateAgents}
onChange={() => handleToggle(agent.agentId, agent.canCreateAgents)}
disabled={updating !== null}
style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
/>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 500 }}>{PERMISSION_LABELS["canCreateAgents"]}</div>
<div style={{ fontSize: "0.75rem", color: "#666" }}>
{PERMISSION_DESCRIPTIONS["canCreateAgents"]}
</div>
</div>
{isUpdating && (
<span style={{ color: "#888", fontSize: "0.75rem" }} role="status">
updating...
</span>
)}
</label>
</div>
</fieldset>
</div>
@@ -222,15 +209,3 @@ export function PermissionsPage(_props: PluginPageProps) {
</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];
}

194
plugin-agent-permissions/src/ui/PermissionsSettingsPage.tsx
View File

@@ -1,17 +1,13 @@
import { useState } from "react";
import { useHostContext, usePluginData, usePluginAction, usePluginToast, type PluginSettingsPageProps } from "@paperclipai/plugin-sdk/ui";
import { usePluginData, usePluginAction, usePluginToast } from "@paperclipai/plugin-sdk/ui";
import type { PluginSettingsPageProps } from "@paperclipai/plugin-sdk/ui";
import { PERMISSION_LABELS, PERMISSION_DESCRIPTIONS } from "../constants";
type Permission = {
capability: string;
allowed: boolean;
};
type AgentRecord = {
id: string;
name: string;
status: string;
description?: string | null;
};
interface AgentPermissionsSummary {
agentId: string;
agentName: string;
canCreateAgents: boolean;
}
const layoutStyle = {
display: "grid",
@@ -23,7 +19,7 @@ const cardStyle = {
borderRadius: "12px",
overflow: "hidden",
background: "var(--card, transparent)",
};;
};
const headerStyle = {
display: "flex",
@@ -32,14 +28,13 @@ const headerStyle = {
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",
@@ -49,13 +44,13 @@ const permissionRowStyle = {
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 (
@@ -67,6 +62,7 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
style={{
transition: "transform 0.15s ease",
transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
flexShrink: 0,
}}
>
<path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -74,40 +70,19 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
);
}
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 { data: agentsData, loading, error, refresh } = usePluginData<AgentPermissionsSummary[]>(
"all-agents-permissions",
companyId ? { companyId, limit: 100 } : {}
);
const togglePermission = usePluginAction("toggle-agent-permission");
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}:`));
}
const [updating, setUpdating] = useState<string | null>(null);
function handleToggleAgent(agentId: string) {
setExpandedAgents((prev) => {
@@ -121,29 +96,25 @@ export function PermissionsSettingsPage({ context }: PluginSettingsPageProps) {
});
}
async function handleTogglePermission(agentId: string, capability: string, newValue: boolean) {
if (!companyId) return;
async function handleToggle(agentId: string, currentEnabled: boolean) {
setUpdating(agentId);
try {
await updatePermissions({
companyId,
agentId,
capability,
allowed: newValue,
});
permissionsQuery.refresh();
await togglePermission({ agentId, companyId, enabled: !currentEnabled });
await refresh();
toast({
title: "Permission updated",
body: `${capability}: ${newValue ? "allowed" : "denied"}`,
body: `${PERMISSION_LABELS["canCreateAgents"]}: ${!currentEnabled ? "allowed" : "denied"}`,
tone: "success",
});
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
} catch (err) {
const message = err instanceof Error ? err.message : String(err);
toast({
title: "Failed to update permission",
body: message,
tone: "error",
});
} finally {
setUpdating(null);
}
}
@@ -157,7 +128,7 @@ export function PermissionsSettingsPage({ context }: PluginSettingsPageProps) {
);
}
if (agentsQuery.loading || permissionsQuery.loading) {
if (loading) {
return (
<div style={layoutStyle}>
<div style={{ fontSize: "13px", opacity: 0.7 }}>
@@ -167,7 +138,17 @@ export function PermissionsSettingsPage({ context }: PluginSettingsPageProps) {
);
}
if (agents.length === 0) {
if (error) {
return (
<div style={layoutStyle}>
<div style={{ fontSize: "13px", color: "var(--destructive, #c00)" }}>
Failed to load: {error.message}
</div>
</div>
);
}
if (!agentsData || agentsData.length === 0) {
return (
<div style={layoutStyle}>
<div style={{ fontSize: "13px", opacity: 0.7 }}>
@@ -180,74 +161,57 @@ export function PermissionsSettingsPage({ context }: PluginSettingsPageProps) {
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.
Toggle hiring permission to allow or deny each agent from creating new agents.
</div>
</div>
<div style={{ display: "grid", gap: "10px" }}>
{agents.map((agent) => {
const isExpanded = expandedAgents.has(agent.id);
const agentPermissions = getAgentPermissions(agent.id);
{agentsData.map((agent) => {
const isExpanded = expandedAgents.has(agent.agentId);
const isUpdating = updating === agent.agentId;
return (
<div key={agent.id} style={cardStyle}>
<div style={headerStyle} onClick={() => handleToggleAgent(agent.id)}>
<div key={agent.agentId} style={cardStyle}>
<div style={headerStyle} onClick={() => handleToggleAgent(agent.agentId)}>
<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}
<strong style={{ fontSize: "13px" }}>{agent.agentName}</strong>
</div>
<span style={{ ...mutedTextStyle, fontSize: "11px" }}>
{agentPermissions.length} permissions
</span>
{agent.canCreateAgents && (
<span style={{ ...mutedTextStyle, fontSize: "11px" }}>
can hire
</span>
)}
</div>
{isExpanded ? (
<div style={contentStyle}>
{agentPermissions.length === 0 ? (
<div style={{ ...mutedTextStyle, fontSize: "12px" }}>
No custom permissions configured for this agent.
<div style={{ display: "grid", gap: "8px" }}>
<div style={permissionRowStyle}>
<div style={{ display: "grid", gap: "2px", flex: 1 }}>
<div style={{ fontSize: "12px", fontWeight: 500 }}>{PERMISSION_LABELS["canCreateAgents"]}</div>
<div style={{ ...mutedTextStyle, fontSize: "11px" }}>{PERMISSION_DESCRIPTIONS["canCreateAgents"]}</div>
</div>
<label style={{ display: "flex", alignItems: "center", gap: "6px", cursor: isUpdating ? "wait" : "pointer" }}>
<input
type="checkbox"
checked={agent.canCreateAgents}
disabled={updating !== null}
onChange={() => handleToggle(agent.agentId, agent.canCreateAgents)}
style={{
width: "16px",
height: "16px",
accentColor: "var(--foreground)",
cursor: isUpdating ? "wait" : "pointer",
}}
/>
<span style={{ fontSize: "11px", opacity: 0.8 }}>
{isUpdating ? "saving…" : agent.canCreateAgents ? "Allowed" : "Denied"}
</span>
</label>
</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>
</div>
) : null}
</div>

124
plugin-agent-permissions/src/worker.ts
View File

@@ -1,77 +1,36 @@
import { definePlugin, runWorker } from "@paperclipai/plugin-sdk";
import {
PERMISSION_KEYS,
type PermissionKey,
DEFAULT_PAGE_LIMIT,
MAX_PAGE_LIMIT
} from "./constants";
import { DEFAULT_PAGE_LIMIT, MAX_PAGE_LIMIT } from "./constants";
interface AgentPermissions {
agentId: string;
permissions: Record<PermissionKey, boolean>;
}
interface AllAgentsPermissions {
interface AgentPermissionsSummary {
agentId: string;
agentName: string;
permissions: Record<PermissionKey, boolean>;
canCreateAgents: boolean;
}
type AgentPermissionsMap = Record<string, Record<PermissionKey, boolean>>;
const plugin = definePlugin({
async setup(ctx) {
// Per-agent data for the detail tab
ctx.data.register("agent-permissions", async (params) => {
const { agentId } = params as { agentId: string };
const allPerms = (await ctx.state.get(
{ scopeKind: "instance", stateKey: "agent_permissions" }
) as AgentPermissionsMap) ?? {};
const agentPerms = allPerms[agentId] ?? {};
const agentId = typeof params.agentId === "string" ? params.agentId : "";
const companyId = typeof params.companyId === "string" ? params.companyId : "";
if (!agentId) return null;
// companyId may be empty when called from the detail tab; we still try
const agent = companyId
? await ctx.agents.get(agentId, companyId)
: null;
if (!agent) return null;
return {
agentId,
permissions: PERMISSION_KEYS.reduce((acc, key) => ({
...acc,
[key]: agentPerms[key] ?? false
}), {} as Record<PermissionKey, boolean>)
agentId: agent.id,
agentName: agent.name,
canCreateAgents: agent.permissions?.canCreateAgents ?? false,
};
});
ctx.actions.register("toggle-agent-permission", async (params) => {
const { agentId, permissionKey, enabled } = params as {
agentId: string;
permissionKey: PermissionKey;
enabled: boolean;
};
// Input validation
if (!agentId || typeof agentId !== 'string') {
throw new Error('Invalid agentId: must be a non-empty string');
}
if (!PERMISSION_KEYS.includes(permissionKey)) {
throw new Error(`Invalid permission key: ${permissionKey}`);
}
if (typeof enabled !== 'boolean') {
throw new Error('Invalid enabled: must be a boolean');
}
const allPerms = (await ctx.state.get(
{ scopeKind: "instance", stateKey: "agent_permissions" }
) as AgentPermissionsMap) ?? {};
const agentPerms = allPerms[agentId] ?? {};
const updated = { ...agentPerms, [permissionKey]: enabled };
await ctx.state.set(
{ scopeKind: "instance", stateKey: "agent_permissions" },
{ ...allPerms, [agentId]: updated }
);
return { success: true };
});
// All-agents list for the permissions page and settings page
ctx.data.register("all-agents-permissions", async (params) => {
const companyId = typeof params.companyId === "string" ? params.companyId : "";
const limit = Math.min(
@@ -79,26 +38,43 @@ const plugin = definePlugin({
MAX_PAGE_LIMIT
);
const offset = Math.max(0, Number(params.offset) || 0);
const agents = companyId
const agents = companyId
? await ctx.agents.list({ companyId, limit, offset })
: [];
const allPerms = (await ctx.state.get(
{ scopeKind: "instance", stateKey: "agent_permissions" }
) as AgentPermissionsMap) ?? {};
const result: AllAgentsPermissions[] = agents.map(agent => ({
const result: AgentPermissionsSummary[] = agents.map(agent => ({
agentId: agent.id,
agentName: agent.name,
permissions: PERMISSION_KEYS.reduce((acc, key) => ({
...acc,
[key]: allPerms[agent.id]?.[key] ?? false
}), {} as Record<PermissionKey, boolean>)
canCreateAgents: agent.permissions?.canCreateAgents ?? false,
}));
return result;
});
ctx.actions.register("toggle-agent-permission", async (params) => {
const { agentId, companyId, enabled } = params as {
agentId: string;
companyId: string;
enabled: boolean;
};
if (!agentId || typeof agentId !== "string") {
throw new Error("Invalid agentId: must be a non-empty string");
}
if (!companyId || typeof companyId !== "string") {
throw new Error("Invalid companyId: must be a non-empty string");
}
if (typeof enabled !== "boolean") {
throw new Error("Invalid enabled: must be a boolean");
}
await ctx.agents.updatePermissions(agentId, companyId, {
canCreateAgents: enabled,
});
return { success: true };
});
},
async onHealth() {