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 4 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 158 $0.0003 1 get_component, get_component, get_component, get_component, get_component 6,507 231 $0.0008 2 write_file, check_code 11,259 8,496 $0.0054
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 Payment = (typeof data.payments)[number];
27
28 const money = new Intl.NumberFormat("en-GB", {
29 style: "currency",
30 currency: data.currency,
31 });
32
33 const dateFormat = new Intl.DateTimeFormat("en-GB", {
34 dateStyle: "medium",
35 timeZone: "UTC",
36 });
37
38 function formatDate(isoDate: string): string {
39 return dateFormat.format(new Date(`${isoDate}T00:00:00Z`));
40 }
41
42 function feeFor(scheme: string): number {
43 return (data.fees as Record<string, number>)[scheme] ?? 0;
44 }
45
46 const detailRow = css({
47 display: "flex",
48 justifyContent: "space-between",
49 gap: "4",
50 py: "2",
51 });
52
53 const detailLabel = css({ color: "fg.muted" });
54
55 const detailValue = css({ fontWeight: "medium", textAlign: "end" });
56
57 const totalSeparator = css({
58 borderTopWidth: "thin",
59 borderTopStyle: "solid",
60 borderColor: "border.default",
61 mt: "2",
62 pt: "2",
63 });
64
65 const totalValue = css({ fontWeight: "semibold", textAlign: "end" });
66
67 interface PaymentRowProps {
68 payment: Payment;
69 approved: boolean;
70 onApprove: (id: string) => void;
71 }
72
73 function PaymentRow({ payment, approved, onApprove }: PaymentRowProps) {
74 const fee = feeFor(payment.scheme);
75 const total = payment.amount + fee;
76
77 return (
78 <TableRow>
79 <TableCell>{payment.beneficiary}</TableCell>
80 <TableCell>{payment.iban}</TableCell>
81 <TableCell>{formatDate(payment.dueDate)}</TableCell>
82 <TableCell numeric>{money.format(payment.amount)}</TableCell>
83 <TableCell>
84 {approved ? (
85 <Badge tone="success">Approved</Badge>
86 ) : (
87 <Badge tone="warning">Awaiting approval</Badge>
88 )}
89 </TableCell>
90 <TableCell>
91 {approved ? null : (
92 <Dialog>
93 <DialogTrigger asChild>
94 <Button
95 size="sm"
96 variant="outline"
97 aria-label={`Approve payment to ${payment.beneficiary}`}
98 >
99 Approve
100 </Button>
101 </DialogTrigger>
102 <DialogContent
103 title={`Approve payment to ${payment.beneficiary}?`}
104 description="Check the details before you confirm."
105 >
106 <div className={css({ display: "flex", flexDirection: "column" })}>
107 <div className={detailRow}>
108 <span className={detailLabel}>Beneficiary</span>
109 <span className={detailValue}>{payment.beneficiary}</span>
110 </div>
111 <div className={detailRow}>
112 <span className={detailLabel}>IBAN</span>
113 <span className={detailValue}>{payment.iban}</span>
114 </div>
115 <div className={detailRow}>
116 <span className={detailLabel}>Amount</span>
117 <span className={detailValue}>{money.format(payment.amount)}</span>
118 </div>
119 <div className={detailRow}>
120 <span className={detailLabel}>Fee ({payment.scheme.toUpperCase()})</span>
121 <span className={detailValue}>{money.format(fee)}</span>
122 </div>
123 <div className={totalSeparator}>
124 <div className={detailRow}>
125 <span className={css({ fontWeight: "semibold" })}>Total</span>
126 <span className={totalValue}>{money.format(total)}</span>
127 </div>
128 </div>
129 </div>
130 <DialogFooter>
131 <DialogClose asChild>
132 <Button variant="outline">Cancel</Button>
133 </DialogClose>
134 <DialogClose asChild>
135 <Button onClick={() => onApprove(payment.id)}>Confirm</Button>
136 </DialogClose>
137 </DialogFooter>
138 </DialogContent>
139 </Dialog>
140 )}
141 </TableCell>
142 </TableRow>
143 );
144 }
145
146 export default function PaymentsApprovalPage() {
147 const [approvedIds, setApprovedIds] = useState<string[]>([]);
148
149 const approve = (id: string) => {
150 setApprovedIds((ids) => (ids.includes(id) ? ids : [...ids, id]));
151 };
152
153 const pendingCount = data.payments.filter(
154 (payment) => !approvedIds.includes(payment.id),
155 ).length;
156
157 return (
158 <main
159 className={`vektos ${css({
160 bg: "bg.canvas",
161 color: "fg.default",
162 p: "8",
163 })}`}
164 >
165 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", mb: "4" })}>
166 Payments
167 </h1>
168 <Card>
169 <CardHeader>
170 <CardTitle>Payments awaiting approval</CardTitle>
171 <CardDescription>
172 {pendingCount === 0
173 ? "All payments are approved."
174 : `${pendingCount} payment${pendingCount === 1 ? "" : "s"} to approve.`}
175 </CardDescription>
176 </CardHeader>
177 <Table
178 aria-label="Payments awaiting approval"
179 className={css({ marginBlockStart: "4" })}
180 >
181 <TableHead>
182 <TableRow>
183 <TableHeader>Beneficiary</TableHeader>
184 <TableHeader>IBAN</TableHeader>
185 <TableHeader>Due date</TableHeader>
186 <TableHeader numeric>Amount</TableHeader>
187 <TableHeader>Status</TableHeader>
188 <TableHeader>
189 <span className={css({ srOnly: true })}>Actions</span>
190 </TableHeader>
191 </TableRow>
192 </TableHead>
193 <TableBody>
194 {data.payments.map((payment) => (
195 <PaymentRow
196 key={payment.id}
197 payment={payment}
198 approved={approvedIds.includes(payment.id)}
199 onApprove={approve}
200 />
201 ))}
202 </TableBody>
203 </Table>
204 </Card>
205 </main>
206 );
207 }
208
3 write_file 19,860 2,463 $0.0032