Signed Receipt

1import * as React from "react"
2import { BadgeCheck, ShieldCheck } from "lucide-react"
3 
4import { cn } from "@/lib/utils"
5 
6// Signed receipt — the ownable audit visual: one hash-chained, Ed25519-signed
7// record from the ledger. The left signal bar + seal read "verified"; the kv grid
8// is mono, with fingerprint/hash fields tinted in the signal color. Outcome tints
9// to the decision palette.
10type SignedReceiptProps = React.ComponentProps<"div"> & {
11  seq: string | number
12  outcome: "allow" | "needs_approval" | "deny"
13  fingerprint: string
14  intentHash: string
15  prevHash?: string
16  phase?: string
17  signatureOk?: boolean
18}
19 
20const OUTCOME_COLOR: Record<SignedReceiptProps["outcome"], string> = {
21  allow: "var(--delego-allow)",
22  needs_approval: "var(--delego-approval)",
23  deny: "var(--delego-deny)",
24}
25 
26function Row({ k, v, hash }: { k: string; v: React.ReactNode; hash?: boolean }) {
27  return (
28    <>
29      <span className="text-muted-foreground">{k}</span>
30      <span className={cn("text-foreground/80", hash && "text-[var(--delego-hash)]")}>
31        {v}
32      </span>
33    </>
34  )
35}
36 
37function SignedReceipt({
38  seq,
39  outcome,
40  fingerprint,
41  intentHash,
42  prevHash,
43  phase = "execution",
44  signatureOk = true,
45  className,
46  ...props
47}: SignedReceiptProps) {
48  return (
49    <div
50      data-slot="signed-receipt"
51      className={cn(
52        "relative overflow-hidden rounded-[14px] border border-border bg-popover px-[18px] py-4",
53        className
54      )}
55      {...props}
56    >
57      <span className="absolute inset-y-0 left-0 w-[3px] bg-[linear-gradient(var(--delego-signal),color-mix(in_oklch,var(--delego-signal)_55%,black))]" />
58      <div className="mb-[13px] flex items-center gap-[9px]">
59        <div className="grid size-[26px] place-items-center rounded-lg border border-[color-mix(in_oklch,var(--delego-allow)_34%,transparent)] bg-[color-mix(in_oklch,var(--delego-allow)_12%,transparent)] text-[var(--delego-allow)]">
60          <BadgeCheck className="size-[15px]" />
61        </div>
62        <div className="font-mono text-[13px] text-foreground">
63          receipt · <span className="text-muted-foreground">seq</span> {seq}
64        </div>
65        {signatureOk && (
66          <span className="ml-auto inline-flex items-center gap-1.5 font-mono text-[11px] text-[var(--delego-allow)]">
67            <ShieldCheck className="size-[13px]" />
68            signature ok
69          </span>
70        )}
71      </div>
72// … truncated