no idea how this works

This commit is contained in:
2026-03-16 16:48:38 -04:00
parent 55a8c9432e
commit 7c45451212
12 changed files with 588 additions and 113 deletions

View File

@@ -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>
);
}