Runs / payment-approval Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 1 counted, under 1 rule. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 get_guidelines, read_file, list_components, list_tokens 1,754 159 $0.0003 1 get_component, get_component, get_component, get_component, get_component 6,508 231 $0.0008 2 write_file, check_code 11,260 6,785 $0.0045
Output cap The provider's default 4 import {
5 Badge,
6 Button,
7 Card,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 Dialog,
12 DialogClose,
13 DialogContent,
14 DialogFooter,
15 DialogTrigger,
16 Table,
17 TableBody,
18 TableCell,
19 TableHead,
20 TableHeader,
21 TableRow,
22 } from "@vektos/ds";
23 import { css } from "styled-system/css";
24 import data from "./fixture.json";
25
26 type Scheme = keyof typeof data.fees;
27
28 const schemeLabels: Record<Scheme, string> = {
29 sepa: "SEPA Credit Transfer",
30 instant: "SEPA Instant",
31 };
32
33 const money = new Intl.NumberFormat("en-GB", {
34 style: "currency",
35 currency: data.currency,
36 });
37
38 const dateFormat = new Intl.DateTimeFormat("en-GB", {
39 day: "2-digit",
40 month: "short",
41 year: "numeric",
42 timeZone: "UTC",
43 });
44
45 function formatDate(iso: string) {
46 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
47 }
48
49 export default function PaymentsPage() {
50 const [approvedIds, setApprovedIds] = useState<string[]>([]);
51 const [activeId, setActiveId] = useState<string | null>(null);
52
53 const approve = (id: string) => {
54 setApprovedIds((ids) => (ids.includes(id) ? ids : [...ids, id]));
55 setActiveId(null);
56 };
57
58 return (
59 <div className={`vektos ${css({ bg: "bg.canvas", color: "fg.default", p: "8" })}`}>
60 <main className={css({ display: "flex", flexDirection: "column", gap: "6", maxWidth: "lg", marginInline: "auto", width: "full" })}>
61 <header className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
62 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
63 Payments awaiting approval
64 </h1>
65 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
66 {data.payments.length - approvedIds.length} to approve, {approvedIds.length} approved in this session.
67 </p>
68 </header>
69 <Card>
70 <CardHeader>
71 <CardTitle>Pending payments</CardTitle>
72 <CardDescription>Amounts in {data.currency}, before fees.</CardDescription>
73 </CardHeader>
74 <Table aria-label="Payments awaiting approval">
75 <TableHead>
76 <TableRow>
77 <TableHeader>Beneficiary</TableHeader>
78 <TableHeader>IBAN</TableHeader>
79 <TableHeader>Due date</TableHeader>
80 <TableHeader numeric>Amount</TableHeader>
81 <TableHeader>Status</TableHeader>
82 <TableHeader>
83 <span className={css({ srOnly: true })}>Action</span>
84 </TableHeader>
85 </TableRow>
86 </TableHead>
87 <TableBody>
88 {data.payments.map((payment) => {
89 const scheme = payment.scheme as Scheme;
90 const fee = data.fees[scheme];
91 const total = payment.amount + fee;
92 const isApproved = approvedIds.includes(payment.id);
93 return (
94 <TableRow key={payment.id}>
95 <TableCell>
96 <span className={css({ fontWeight: "medium" })}>{payment.beneficiary}</span>
97 </TableCell>
98 <TableCell>
99 <span className={css({ fontFamily: "mono", whiteSpace: "nowrap" })}>{payment.iban}</span>
100 </TableCell>
101 <TableCell>
102 <time dateTime={payment.dueDate}>{formatDate(payment.dueDate)}</time>
103 </TableCell>
104 <TableCell numeric>{money.format(payment.amount)}</TableCell>
105 <TableCell>
106 {isApproved ? <Badge tone="success">Approved</Badge> : <Badge tone="warning">Awaiting approval</Badge>}
107 </TableCell>
108 <TableCell>
109 <Dialog open={activeId === payment.id} onOpenChange={({ open }) => setActiveId(open ? payment.id : null)}>
110 <DialogTrigger asChild>
111 <Button size="sm" variant="outline" disabled={isApproved}>
112 {isApproved ? "Approved" : "Approve"}
113 </Button>
114 </DialogTrigger>
115 <DialogContent title="Approve payment?" description={`Review the details before approving ${payment.beneficiary}.`}>
116 <dl className={css({ display: "grid", gridTemplateColumns: "auto 1fr", gap: "2", fontSize: "sm", margin: "0" })}>
117 <dt className={css({ color: "fg.muted" })}>Beneficiary</dt>
118 <dd className={css({ margin: "0" })}>{payment.beneficiary}</dd>
119 <dt className={css({ color: "fg.muted" })}>IBAN</dt>
120 <dd className={css({ margin: "0", fontFamily: "mono" })}>{payment.iban}</dd>
121 <dt className={css({ color: "fg.muted" })}>Scheme</dt>
122 <dd className={css({ margin: "0" })}>{schemeLabels[scheme]}</dd>
123 <dt className={css({ color: "fg.muted" })}>Amount</dt>
124 <dd className={css({ margin: "0" })}>{money.format(payment.amount)}</dd>
125 <dt className={css({ color: "fg.muted" })}>Fee</dt>
126 <dd className={css({ margin: "0" })}>{money.format(fee)}</dd>
127 <dt className={css({ color: "fg.muted", fontWeight: "semibold" })}>Total</dt>
128 <dd className={css({ margin: "0", fontWeight: "semibold" })}>{money.format(total)}</dd>
129 </dl>
130 <DialogFooter>
131 <DialogClose asChild>
132 <Button variant="outline">Cancel</Button>
133 </DialogClose>
134 <Button onClick={() => approve(payment.id)}>Confirm</Button>
135 </DialogFooter>
136 </DialogContent>
137 </Dialog>
138 </TableCell>
139 </TableRow>
140 );
141 })}
142 </TableBody>
143 </Table>
144 </Card>
145 </main>
146 </div>
147 );
148 }
149
3 write_file 18,150 2,549 $0.0031