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_files 1,562 157 $0.0002 1 get_component, get_component, get_component, get_component, get_component 4,601 231 $0.0006 2 list_tokens 9,353 2,306 $0.0021
Output cap The provider's default 4 import {
5 Badge,
6 Button,
7 Card,
8 CardBody,
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 import data from "./fixture.json";
26
27 type Payment = (typeof data.payments)[number];
28
29 const fees: Record<string, number> = data.fees;
30
31 const schemeLabels: Record<string, string> = {
32 sepa: "SEPA",
33 instant: "SEPA Instant",
34 };
35
36 const money = new Intl.NumberFormat("en-GB", {
37 style: "currency",
38 currency: data.currency,
39 });
40
41 const dateFormat = new Intl.DateTimeFormat("en-GB", {
42 day: "numeric",
43 month: "short",
44 year: "numeric",
45 timeZone: "UTC",
46 });
47
48 function feeFor(payment: Payment): number {
49 return fees[payment.scheme] ?? 0;
50 }
51
52 const pageStyles = css({
53 minHeight: "full",
54 bg: "bg.canvas",
55 color: "fg.default",
56 padding: "6",
57 });
58
59 const sectionStyles = css({
60 display: "flex",
61 flexDirection: "column",
62 gap: "4",
63 maxWidth: "60",
64 marginInline: "auto",
65 });
66
67 const summaryListStyles = css({
68 display: "grid",
69 gridTemplateColumns: "auto 1fr",
70 columnGap: "4",
71 rowGap: "2",
72 margin: "0",
73 fontSize: "sm",
74 });
75
76 const summaryTermStyles = css({
77 color: "fg.muted",
78 });
79
80 const summaryValueStyles = css({
81 margin: "0",
82 textAlign: "end",
83 fontVariantNumeric: "tabular-nums",
84 });
85
86 const totalStyles = css({
87 fontWeight: "semibold",
88 });
89
90 const ibanStyles = css({
91 fontVariantNumeric: "tabular-nums",
92 whiteSpace: "nowrap",
93 });
94
95 export default function ApprovalsPage() {
96 const [approvedIds, setApprovedIds] = useState<string[]>([]);
97
98 const approve = (id: string) => {
99 setApprovedIds((current) =>
100 current.includes(id) ? current : [...current, id],
101 );
102 };
103
104 return (
105 <div className={`vektos ${pageStyles}`}>
106 <main className={sectionStyles}>
107 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
108 Payments
109 </h1>
110 <Card>
111 <CardHeader>
112 <CardTitle>Payments awaiting approval</CardTitle>
113 <CardDescription>
114 {data.payments.length} payments to review before they are sent.
115 </CardDescription>
116 </CardHeader>
117 <Table aria-label="Payments awaiting approval">
118 <TableHead>
119 <TableRow>
120 <TableHeader>Beneficiary</TableHeader>
121 <TableHeader>IBAN</TableHeader>
122 <TableHeader>Due date</TableHeader>
123 <TableHeader numeric>Amount</TableHeader>
124 <TableHeader>Status</TableHeader>
125 <TableHeader>
126 <span className={css({ srOnly: true })}>Actions</span>
127 </TableHeader>
128 </TableRow>
129 </TableHead>
130 <TableBody>
131 {data.payments.map((payment) => {
132 const approved = approvedIds.includes(payment.id);
133 const fee = feeFor(payment);
134 const total = payment.amount + fee;
135
136 return (
137 <TableRow key={payment.id}>
138 <TableCell>
139 <div className={css({ display: "flex", flexDirection: "column" })}>
140 <span>{payment.beneficiary}</span>
141 <span className={css({ fontSize: "sm", color: "fg.muted" })}>
142 {payment.reference}
143 </span>
144 </div>
145 </TableCell>
146 <TableCell>
147 <span className={ibanStyles}>{payment.iban}</span>
148 </TableCell>
149 <TableCell>
150 <time dateTime={payment.dueDate}>
151 {dateFormat.format(new Date(payment.dueDate))}
152 </time>
153 </TableCell>
154 <TableCell numeric>{money.format(payment.amount)}</TableCell>
155 <TableCell>
156 {approved ? (
157 <Badge tone="success">Approved</Badge>
158 ) : (
159 <Badge tone="warning">Awaiting approval</Badge>
160 )}
161 </TableCell>
162 <TableCell>
163 {approved ? null : (
164 <Dialog>
165 <DialogTrigger asChild>
166 <Button variant="outline" size="sm">
167 Approve
168 </Button>
169 </DialogTrigger>
170 <DialogContent
171 title="Approve payment?"
172 description={`Review the details before you approve the payment to ${payment.beneficiary}.`}
173 >
174 <dl className={summaryListStyles}>
175 <dt className={summaryTermStyles}>Beneficiary</dt>
176 <dd className={summaryValueStyles}>
177 {payment.beneficiary}
178 </dd>
179 <dt className={summaryTermStyles}>IBAN</dt>
180 <dd className={`${summaryValueStyles} ${ibanStyles}`}>
181 {payment.iban}
182 </dd>
183 <dt className={summaryTermStyles}>Amount</dt>
184 <dd className={summaryValueStyles}>
185 {money.format(payment.amount)}
186 </dd>
187 <dt className={summaryTermStyles}>
188 Fee ({schemeLabels[payment.scheme] ?? payment.scheme})
189 </dt>
190 <dd className={summaryValueStyles}>
191 {money.format(fee)}
192 </dd>
193 <dt className={`${summaryTermStyles} ${totalStyles}`}>
194 Total
195 </dt>
196 <dd className={`${summaryValueStyles} ${totalStyles}`}>
197 {money.format(total)}
198 </dd>
199 </dl>
200 <DialogFooter>
201 <DialogClose asChild>
202 <Button variant="outline">Cancel</Button>
203 </DialogClose>
204 <DialogClose asChild>
205 <Button onClick={() => approve(payment.id)}>
206 Confirm
207 </Button>
208 </DialogClose>
209 </DialogFooter>
210 </DialogContent>
211 </Dialog>
212 )}
213 </TableCell>
214 </TableRow>
215 );
216 })}
217 </TableBody>
218 </Table>
219 </Card>
220 </main>
221 </div>
222 );
223 }
224
3 write_file 13,380 2,532 $0.0026