Checkpoint: Agent Guardrails

import * as React from "react";

import { Checkpoint, type CheckpointRequest, type CheckpointRule } from "@/components/ui/checkpoint";

function Glyph({ children }: { children: React.ReactNode }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {children}
    </svg>
  );
}

// Fernway, a plant delivery shop, and the rules its support agent runs under. Names are made up.
const RULES: CheckpointRule[] = [
  {
    id: "role",
    label: "Role",
    detail: "Acts as a support teammate",
    value: "Support",
    icon: (
      <Glyph>
        <circle cx="12" cy="8.5" r="3.5" />
        <path d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5" />
      </Glyph>
    ),
  },
  {
    id: "scope",
    label: "Scope",
    detail: "Read orders, issue refunds",
    value: "Read · Refund",
    icon: (
      <Glyph>
        <circle cx="8" cy="15" r="4" />
        <path d="M11 12l8-8M16 7l2.5 2.5M14 9l2 2" />
      </Glyph>
    ),
  },
  {
    id: "amount",
    label: "Amount",
    detail: "Refunds over $500 need finance",
    value: "≤ $500",
    icon: (
      <Glyph>
        <circle cx="12" cy="12" r="8.5" />
        <path d="M14.8 9.2c-.5-.9-1.6-1.4-2.8-1.4-1.6 0-2.8.8-2.8 2.1 0 2.9 5.8 1.4 5.8 4.3 0 1.3-1.3 2.2-3 2.2-1.3 0-2.4-.5-2.9-1.5M12 6.3v1.5M12 16.9v1.2" />
      </Glyph>
    ),
  },
  {
    id: "audit",
    label: "Audit",
    detail: "Every call lands in the trail",
    value: "Logged",
    icon: (
      <Glyph>
        <path d="M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20z" />
        <path d="M14 3.5V8h4M10 12.5h5M10 16h5" />
      </Glyph>
    ),
  },
];

const REQUESTS: CheckpointRequest[] = [
  {
    id: "read",
    label: "read_ticket",
    meta: "#4821 · Monstera arrived with a cracked pot",
    icon: (
      <Glyph>
        <path d="M4 6.5h16v11H4z" />
        <path d="M4 7l8 6 8-6" />
      </Glyph>
    ),
  },
  {
    id: "refund",
    label: "refund_order",
    meta: "$1,240.00 · order #88213, 14 olive trees",
    verdicts: { amount: "hold" },
    icon: (
      <Glyph>
        <path d="M4 12a8 8 0 1 0 2.4-5.7L4 8.6" />
        <path d="M4 4v4.6h4.6" />
      </Glyph>
    ),
  },
  {
    id: "delete",
    label: "delete_customer",
    meta: "cus_19F4 · asked by the chat, not the customer",
    verdicts: { scope: "block" },
    reason: "No delete scope",
    icon: (
      <Glyph>
        <path d="M5 7h14M9.5 7V4.5h5V7M7 7l1 13h8l1-13" />
      </Glyph>
    ),
  },
];

export function CheckpointDemo() {
  return (
    <div className="w-full max-w-xl rounded-[26px] border border-zinc-950/[0.08] bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.04)] dark:border-white/10 dark:bg-zinc-950">
      <div className="rounded-[20px] bg-zinc-50 bg-[radial-gradient(120%_70%_at_50%_0%,rgba(255,59,31,0.07),transparent_70%)] p-4 sm:p-5 dark:bg-white/[0.03] dark:bg-[radial-gradient(120%_70%_at_50%_0%,rgba(255,90,60,0.1),transparent_70%)]">
        <div className="mb-4 flex items-baseline justify-between gap-4 px-0.5">
          <p className="text-[13px] font-semibold tracking-tight text-zinc-950 dark:text-zinc-100">
            Guardrails <span className="font-normal text-zinc-500 dark:text-zinc-400">· Fernway support agent</span>
          </p>
          <p className="hidden items-center gap-1.5 text-[12px] text-zinc-500 sm:flex dark:text-zinc-400">
            <span className="size-1.5 rounded-full bg-[#ff3b1f] dark:bg-[#ff5a3c]" />
            Enforced on every call
          </p>
        </div>
        <Checkpoint rules={RULES} requests={REQUESTS} approver="Dana in finance" />
      </div>
    </div>
  );
}