better
This commit is contained in:
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,137 +102,122 @@ export function PermissionsPage(_props: PluginPageProps) {
|
||||
</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;
|
||||
<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);
|
||||
|
||||
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}
|
||||
return (
|
||||
<div
|
||||
key={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: "1rem 1.25rem",
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
cursor: "pointer",
|
||||
textAlign: "left",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 600,
|
||||
color: "inherit",
|
||||
transition: "background-color 0.15s"
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
|
||||
<span
|
||||
style={{
|
||||
transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
|
||||
transition: "transform 0.2s",
|
||||
display: "inline-block"
|
||||
}}
|
||||
>
|
||||
▶
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
<span>{agent.agentName}</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
{permCount > 0 && (
|
||||
<span style={{
|
||||
fontSize: "0.75rem",
|
||||
backgroundColor: "#e5e7eb",
|
||||
color: "#666",
|
||||
padding: "0.125rem 0.5rem",
|
||||
borderRadius: "999px"
|
||||
}}>
|
||||
{permCount} permission(s)
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
|
||||
259
plugin-agent-permissions/src/ui/PermissionsSettingsPage.tsx
Normal file
259
plugin-agent-permissions/src/ui/PermissionsSettingsPage.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
export { AgentPermissionsTab } from './AgentPermissionsTab';
|
||||
export { PermissionsNav } from './PermissionsNav';
|
||||
export { PermissionsPage } from './PermissionsPage';
|
||||
export { PermissionsSettingsPage } from './PermissionsSettingsPage';
|
||||
|
||||
Reference in New Issue
Block a user