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 3 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 112 80 $0.0012 1 list_files, list_components, list_tokens, read_file, read_file 1,377 138 $0.0043 2 get_component, get_component, get_component, get_component, get_component 2,453 191 $0.0073
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 currencyFormatter = new Intl.NumberFormat("en-IE", {
29 style: "currency",
30 currency: data.currency,
31 });
32
33 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
34 day: "2-digit",
35 month: "short",
36 year: "numeric",
37 timeZone: "UTC",
38 });
39
40 function formatMoney(amount: number) {
41 return currencyFormatter.format(amount);
42 }
43
44 function formatDate(date: string) {
45 return dateFormatter.format(new Date(`${date}T00:00:00Z`));
46 }
47
48 function schemeLabel(payment: Payment) {
49 return payment.scheme === "instant" ? "Instant" : "SEPA";
50 }
51
52 function schemeFee(payment: Payment) {
53 return payment.scheme === "instant" ? data.fees.instant : data.fees.sepa;
54 }
55
56 const summaryRow = css({
57 display: "flex",
58 alignItems: "flex-start",
59 justifyContent: "space-between",
60 gap: "6",
61 });
62
63 const summaryLabel = css({
64 color: "fg.muted",
65 fontSize: "sm",
66 flexShrink: 0,
67 });
68
69 const summaryValue = css({
70 m: "0",
71 color: "fg.default",
72 fontSize: "sm",
73 fontWeight: "medium",
74 textAlign: "right",
75 overflowWrap: "anywhere",
76 });
77
78 export default function PaymentsApprovalPage() {
79 const [approvedIds, setApprovedIds] = useState<string[]>([]);
80 const pendingCount = data.payments.length - approvedIds.length;
81
82 function approvePayment(id: string) {
83 setApprovedIds((current) =>
84 current.includes(id) ? current : [...current, id],
85 );
86 }
87
88 return (
89 <main
90 className={`vektos ${css({
91 minHeight: "full",
92 bg: "bg.canvas",
93 color: "fg.default",
94 p: { base: "4", md: "8" },
95 })}`}
96 >
97 <Card className={css({ width: "full", mx: "auto" })}>
98 <CardHeader>
99 <div
100 className={css({
101 display: "flex",
102 alignItems: "flex-start",
103 justifyContent: "space-between",
104 flexWrap: "wrap",
105 gap: "4",
106 })}
107 >
108 <div className={css({ display: "grid", gap: "2" })}>
109 <CardTitle asChild>
110 <h1>Payments awaiting approval</h1>
111 </CardTitle>
112 <CardDescription>
113 Review the beneficiary and payment details before approving.
114 </CardDescription>
115 </div>
116 <Badge tone={pendingCount === 0 ? "success" : "warning"}>
117 {pendingCount === 0
118 ? "All approved"
119 : `${pendingCount} pending approval`}
120 </Badge>
121 </div>
122 </CardHeader>
123
124 <div
125 className={css({
126 mt: "4",
127 overflowX: "auto",
128 })}
129 >
130 <Table
131 aria-label="Company payments awaiting approval"
132 className={css({ width: "full", minWidth: "lg" })}
133 >
134 <TableHead>
135 <TableRow>
136 <TableHeader>Beneficiary</TableHeader>
137 <TableHeader>IBAN</TableHeader>
138 <TableHeader>Due date</TableHeader>
139 <TableHeader numeric>Amount ({data.currency})</TableHeader>
140 <TableHeader>Status</TableHeader>
141 <TableHeader className={css({ textAlign: "right" })}>
142 Action
143 </TableHeader>
144 </TableRow>
145 </TableHead>
146 <TableBody>
147 {data.payments.map((payment) => {
148 const isApproved = approvedIds.includes(payment.id);
149 const fee = schemeFee(payment);
150 const total = payment.amount + fee;
151
152 return (
153 <TableRow key={payment.id}>
154 <TableCell>
155 <div className={css({ fontWeight: "medium" })}>
156 {payment.beneficiary}
157 </div>
158 <div
159 className={css({
160 color: "fg.muted",
161 fontSize: "xs",
162 mt: "1",
163 })}
164 >
165 {payment.reference}
166 </div>
167 </TableCell>
168 <TableCell className={css({ whiteSpace: "nowrap" })}>
169 {payment.iban}
170 </TableCell>
171 <TableCell className={css({ whiteSpace: "nowrap" })}>
172 <time dateTime={payment.dueDate}>
173 {formatDate(payment.dueDate)}
174 </time>
175 </TableCell>
176 <TableCell numeric className={css({ fontWeight: "medium" })}>
177 {formatMoney(payment.amount)}
178 </TableCell>
179 <TableCell>
180 <Badge tone={isApproved ? "success" : "warning"}>
181 {isApproved ? "Approved" : "Pending"}
182 </Badge>
183 </TableCell>
184 <TableCell className={css({ textAlign: "right" })}>
185 <Dialog>
186 <DialogTrigger asChild>
187 <Button
188 variant="outline"
189 size="sm"
190 disabled={isApproved}
191 >
192 {isApproved ? "Approved" : "Approve"}
193 </Button>
194 </DialogTrigger>
195 <DialogContent
196 title="Approve payment?"
197 description="Check the payment details and total before confirming."
198 >
199 <dl
200 className={css({
201 display: "flex",
202 flexDirection: "column",
203 gap: "4",
204 m: "0",
205 })}
206 >
207 <div className={summaryRow}>
208 <dt className={summaryLabel}>Beneficiary</dt>
209 <dd className={summaryValue}>
210 {payment.beneficiary}
211 </dd>
212 </div>
213 <div className={summaryRow}>
214 <dt className={summaryLabel}>IBAN</dt>
215 <dd className={summaryValue}>{payment.iban}</dd>
216 </div>
217 <div className={summaryRow}>
218 <dt className={summaryLabel}>Amount</dt>
219 <dd className={summaryValue}>
220 {formatMoney(payment.amount)}
221 </dd>
222 </div>
223 <div className={summaryRow}>
224 <dt className={summaryLabel}>
225 {schemeLabel(payment)} scheme fee
226 </dt>
227 <dd className={summaryValue}>{formatMoney(fee)}</dd>
228 </div>
229 <div
230 className={`${summaryRow} ${css({
231 alignItems: "center",
232 bg: "bg.subtle",
233 rounded: "md",
234 p: "4",
235 })}`}
236 >
237 <dt
238 className={css({
239 color: "fg.default",
240 fontWeight: "semibold",
241 })}
242 >
243 Total
244 </dt>
245 <dd
246 className={css({
247 m: "0",
248 color: "fg.default",
249 fontSize: "lg",
250 fontWeight: "semibold",
251 fontVariantNumeric: "tabular-nums",
252 })}
253 >
254 {formatMoney(total)}
255 </dd>
256 </div>
257 </dl>
258 <DialogFooter>
259 <DialogClose asChild>
260 <Button variant="outline">Cancel</Button>
261 </DialogClose>
262 <DialogClose asChild>
263 <Button onClick={() => approvePayment(payment.id)}>
264 Confirm
265 </Button>
266 </DialogClose>
267 </DialogFooter>
268 </DialogContent>
269 </Dialog>
270 </TableCell>
271 </TableRow>
272 );
273 })}
274 </TableBody>
275 </Table>
276 </div>
277 </Card>
278 </main>
279 );
280 }
281
3 write_file 3,551 7,470 $0.0827