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 5 counted, under 2 rules. “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 1,754 133 $0.0002 1 get_component, get_component, get_component, get_component, list_tokens 4,739 211 $0.0006 2 write_file, check_code 10,023 8,167 $0.0051
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12 Dialog,
13 DialogClose,
14 DialogContent,
15 DialogFooter,
16 DialogTrigger,
17 Table,
18 TableBody,
19 TableCell,
20 TableHead,
21 TableHeader,
22 TableRow,
23 } from "@vektos/ds";
24 import { css } from "styled-system/css";
25
26 type Payment = (typeof data.payments)[number];
27
28 const fees: Record<string, number> = data.fees;
29
30 function feeFor(scheme: string): number {
31 const fee = fees[scheme];
32 if (fee === undefined) {
33 throw new Error(`No fee configured for payment scheme "${scheme}"`);
34 }
35 return fee;
36 }
37
38 const money = new Intl.NumberFormat("en-IE", {
39 style: "currency",
40 currency: data.currency,
41 });
42
43 const dateFormat = new Intl.DateTimeFormat("en-GB", {
44 day: "2-digit",
45 month: "short",
46 year: "numeric",
47 timeZone: "UTC",
48 });
49
50 const schemeLabels: Record<string, string> = {
51 sepa: "SEPA",
52 instant: "SEPA Instant",
53 };
54
55 const pageStyle = css({
56 bg: "bg.canvas",
57 color: "fg.default",
58 p: "6",
59 });
60
61 const summaryStyle = css({
62 display: "grid",
63 gridTemplateColumns: "max-content 1fr",
64 gap: "2",
65 m: "0",
66 fontSize: "sm",
67 color: "fg.default",
68 });
69
70 const termStyle = css({ color: "fg.muted" });
71
72 const definitionStyle = css({ m: "0", textAlign: "right", fontVariantNumeric: "tabular-nums" });
73
74 const totalTermStyle = css({
75 color: "fg.default",
76 fontWeight: "semibold",
77 borderTopWidth: "thin",
78 borderTopStyle: "solid",
79 borderTopColor: "border.default",
80 pt: "2",
81 });
82
83 const totalDefinitionStyle = css({
84 m: "0",
85 textAlign: "right",
86 fontWeight: "semibold",
87 fontVariantNumeric: "tabular-nums",
88 borderTopWidth: "thin",
89 borderTopStyle: "solid",
90 borderTopColor: "border.default",
91 pt: "2",
92 });
93
94 const ibanStyle = css({ fontFamily: "mono", whiteSpace: "nowrap" });
95
96 type PaymentRowProps = {
97 payment: Payment;
98 approved: boolean;
99 onApprove: (id: string) => void;
100 };
101
102 function PaymentRow({ payment, approved, onApprove }: PaymentRowProps) {
103 const [open, setOpen] = useState(false);
104 const fee = feeFor(payment.scheme);
105 const total = payment.amount + fee;
106 const schemeLabel = schemeLabels[payment.scheme] ?? payment.scheme;
107
108 const handleConfirm = () => {
109 onApprove(payment.id);
110 setOpen(false);
111 };
112
113 return (
114 <TableRow>
115 <TableCell>{payment.beneficiary}</TableCell>
116 <TableCell>
117 <span className={ibanStyle}>{payment.iban}</span>
118 </TableCell>
119 <TableCell>
120 <time dateTime={payment.dueDate}>
121 {dateFormat.format(new Date(`${payment.dueDate}T00:00:00Z`))}
122 </time>
123 </TableCell>
124 <TableCell numeric>{money.format(payment.amount)}</TableCell>
125 <TableCell>
126 {approved ? (
127 <Badge tone="success">Approved</Badge>
128 ) : (
129 <Badge tone="warning">Awaiting approval</Badge>
130 )}
131 </TableCell>
132 <TableCell>
133 {!approved && (
134 <Dialog open={open} onOpenChange={setOpen}>
135 <DialogTrigger asChild>
136 <Button
137 variant="outline"
138 size="sm"
139 aria-label={`Approve payment to ${payment.beneficiary}`}
140 >
141 Approve
142 </Button>
143 </DialogTrigger>
144 <DialogContent
145 title="Approve payment?"
146 description="Check the details below before you approve this payment."
147 >
148 <dl className={summaryStyle}>
149 <dt className={termStyle}>Beneficiary</dt>
150 <dd className={definitionStyle}>{payment.beneficiary}</dd>
151
152 <dt className={termStyle}>IBAN</dt>
153 <dd className={definitionStyle}>
154 <span className={ibanStyle}>{payment.iban}</span>
155 </dd>
156
157 <dt className={termStyle}>Amount</dt>
158 <dd className={definitionStyle}>{money.format(payment.amount)}</dd>
159
160 <dt className={termStyle}>Fee ({schemeLabel})</dt>
161 <dd className={definitionStyle}>{money.format(fee)}</dd>
162
163 <dt className={totalTermStyle}>Total</dt>
164 <dd className={totalDefinitionStyle}>{money.format(total)}</dd>
165 </dl>
166 <DialogFooter>
167 <DialogClose asChild>
168 <Button variant="outline">Cancel</Button>
169 </DialogClose>
170 <Button onClick={handleConfirm}>Confirm</Button>
171 </DialogFooter>
172 </DialogContent>
173 </Dialog>
174 )}
175 </TableCell>
176 </TableRow>
177 );
178 }
179
180 export default function PaymentsApprovalPage() {
181 const [approvedIds, setApprovedIds] = useState<Set<string>>(() => new Set());
182
183 const approve = (id: string) => {
184 setApprovedIds((current) => new Set(current).add(id));
185 };
186
187 return (
188 <main className={`vektos ${pageStyle}`}>
189 <Card>
190 <CardHeader>
191 <CardTitle>Payments awaiting approval</CardTitle>
192 <CardDescription>
193 {data.payments.length} payments. Approve each payment after checking its details.
194 </CardDescription>
195 </CardHeader>
196 <Table aria-label="Payments awaiting approval">
197 <TableHead>
198 <TableRow>
199 <TableHeader>Beneficiary</TableHeader>
200 <TableHeader>IBAN</TableHeader>
201 <TableHeader>Due date</TableHeader>
202 <TableHeader numeric>Amount</TableHeader>
203 <TableHeader>Status</TableHeader>
204 <TableHeader>Action</TableHeader>
205 </TableRow>
206 </TableHead>
207 <TableBody>
208 {data.payments.map((payment) => (
209 <PaymentRow
210 key={payment.id}
211 payment={payment}
212 approved={approvedIds.has(payment.id)}
213 onApprove={approve}
214 />
215 ))}
216 </TableBody>
217 </Table>
218 </Card>
219 </main>
220 );
221 }
222
3 write_file, check_code 18,295 5,354 $0.0045
4 write_file 23,806 2,620 $0.0037