DesignX
Agent Ops@paxeer/agent-ops/capability-grantsimplemented

Capability grants

Read/write grants table.

Install

$pnpm exec designx add @paxeer/agent-ops/capability-grants

Preview

Loading preview...

Source code

components/designx/agent-ops/capability-grants.tsxtsx
import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@paxeer/core";

export interface CapabilityGrant {
  id: string;
  capability: string;
  agent: string;
  scope: "read" | "write";
}

export function CapabilityGrants({
  grants = [
    { id: "g1", capability: "market.book", agent: "atlas-research", scope: "read" },
    { id: "g2", capability: "order.draft", agent: "helix-exec", scope: "write" },
    { id: "g3", capability: "risk.check", agent: "sentry-risk", scope: "read" },
  ],
}: {
  grants?: CapabilityGrant[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="capability-grants">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Capability grants
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Capability</TableHead>
              <TableHead>Agent</TableHead>
              <TableHead>Scope</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {grants.map((grant) => (
              <TableRow key={grant.id}>
                <TableCell className="font-[family-name:var(--md-ref-typeface-mono)]">
                  {grant.capability}
                </TableCell>
                <TableCell>{grant.agent}</TableCell>
                <TableCell>
                  <Badge variant={grant.scope === "write" ? "default" : "secondary"}>
                    {grant.scope}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}