Runs / statement 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 20 counted, under 3 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, list_components, list_files, read_file, read_file, list_tokens 931 233 $0.0042 1 get_component, get_component, get_component, list_tokens, list_tokens, list_tokens, list_tokens 3,535 549 $0.0127 2 list_tokens 3,090 87 $0.0079
Output cap The provider's default 3
4 CardBody,
5 CardDescription,
6 CardFooter,
7 CardHeader,
8 CardTitle,
9 Table,
10 TableBody,
11 TableCell,
12 TableHead,
13 TableHeader,
14 TableRow,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17 import data from "./fixture.json";
18
19 const currencyFormatter = new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: data.account.currency,
22 minimumFractionDigits: 2,
23 maximumFractionDigits: 2,
24 });
25
26 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
27 day: "2-digit",
28 month: "short",
29 year: "numeric",
30 timeZone: "UTC",
31 });
32
33 const monthFormatter = new Intl.DateTimeFormat("en-GB", {
34 month: "long",
35 timeZone: "UTC",
36 });
37
38 const monthYearFormatter = new Intl.DateTimeFormat("en-GB", {
39 month: "long",
40 year: "numeric",
41 timeZone: "UTC",
42 });
43
44 function asUtcDate(value: string) {
45 return new Date(`${value}T00:00:00Z`);
46 }
47
48 function formatAmount(amount: number, showPositiveSign = true) {
49 const absoluteAmount = currencyFormatter.format(Math.abs(amount));
50
51 if (amount < 0) return `−${absoluteAmount}`;
52 if (showPositiveSign && amount > 0) return `+${absoluteAmount}`;
53 return absoluteAmount;
54 }
55
56 export default function OctoberStatementPage() {
57 const periodFrom = asUtcDate(data.account.period.from);
58 const periodTo = asUtcDate(data.account.period.to);
59 const statementMonth = monthFormatter.format(periodFrom);
60 const periodLabel = `${periodFrom.getUTCDate()}–${periodTo.getUTCDate()} ${monthYearFormatter.format(periodTo)}`;
61 const pendingCount = data.transactions.filter(
62 (transaction) => transaction.status === "pending",
63 ).length;
64 const initials = data.account.holder
65 .split(" ")
66 .map((part) => part.charAt(0))
67 .join("")
68 .slice(0, 2)
69 .toUpperCase();
70
71 return (
72 <div
73 className={`vektos ${css({
74 minHeight: "full",
75 bg: "bg.canvas",
76 color: "fg.default",
77 px: { base: "4", md: "8" },
78 py: "8",
79 })}`}
80 >
81 <main
82 className={css({
83 width: "full",
84 marginInline: "auto",
85 display: "flex",
86 flexDirection: "column",
87 gap: "6",
88 })}
89 >
90 <header>
91 <p
92 className={css({
93 color: "accent.default",
94 fontSize: "sm",
95 fontWeight: "semibold",
96 })}
97 >
98 Current account
99 </p>
100 <h1
101 className={css({
102 marginTop: "1",
103 fontSize: "lg",
104 fontWeight: "semibold",
105 lineHeight: "tight",
106 })}
107 >
108 {statementMonth} statement
109 </h1>
110 <p
111 className={css({
112 marginTop: "1",
113 color: "fg.muted",
114 fontSize: "sm",
115 })}
116 >
117 {periodLabel}
118 </p>
119 </header>
120
121 <Card>
122 <CardBody>
123 <div
124 className={css({
125 display: "flex",
126 flexDirection: { base: "column", md: "row" },
127 alignItems: { base: "stretch", md: "center" },
128 justifyContent: "space-between",
129 gap: "6",
130 })}
131 >
132 <div
133 className={css({
134 display: "flex",
135 alignItems: "flex-start",
136 gap: "4",
137 })}
138 >
139 <div
140 aria-hidden="true"
141 className={css({
142 width: "10",
143 height: "10",
144 flexShrink: 0,
145 display: "flex",
146 alignItems: "center",
147 justifyContent: "center",
148 rounded: "full",
149 bg: "bg.subtle",
150 color: "accent.default",
151 fontSize: "sm",
152 fontWeight: "semibold",
153 })}
154 >
155 {initials}
156 </div>
157 <dl
158 className={css({
159 display: "grid",
160 gap: "4",
161 margin: "0",
162 })}
163 >
164 <div>
165 <dt
166 className={css({
167 color: "fg.muted",
168 fontSize: "xs",
169 fontWeight: "medium",
170 })}
171 >
172 Account holder
173 </dt>
174 <dd
175 className={css({
176 margin: "0",
177 marginTop: "1",
178 fontSize: "md",
179 fontWeight: "semibold",
180 })}
181 >
182 {data.account.holder}
183 </dd>
184 </div>
185 <div>
186 <dt
187 className={css({
188 color: "fg.muted",
189 fontSize: "xs",
190 fontWeight: "medium",
191 })}
192 >
193 IBAN
194 </dt>
195 <dd
196 className={css({
197 margin: "0",
198 marginTop: "1",
199 fontSize: "sm",
200 lineHeight: "normal",
201 overflowWrap: "anywhere",
202 })}
203 >
204 {data.account.iban}
205 </dd>
206 </div>
207 </dl>
208 </div>
209
210 <div
211 className={css({
212 paddingTop: { base: "6", md: "0" },
213 textAlign: { base: "left", md: "right" },
214 })}
215 >
216 <p
217 className={css({
218 color: "fg.muted",
219 fontSize: "xs",
220 fontWeight: "medium",
221 })}
222 >
223 Current balance
224 </p>
225 <p
226 className={css({
227 marginTop: "1",
228 fontSize: "lg",
229 fontWeight: "semibold",
230 lineHeight: "tight",
231 fontVariantNumeric: "tabular-nums",
232 whiteSpace: "nowrap",
233 })}
234 >
235 {formatAmount(data.account.balance, false)}
236 </p>
237 <p
238 className={css({
239 marginTop: "1",
240 color: "fg.muted",
241 fontSize: "xs",
242 })}
243 >
244 {data.account.currency}
245 </p>
246 </div>
247 </div>
248 </CardBody>
249 </Card>
250
251 <Card>
252 <CardHeader>
253 <CardTitle asChild>
254 <h2>Transactions</h2>
255 </CardTitle>
256 <CardDescription>
257 {data.transactions.length} transactions · {pendingCount} pending
258 </CardDescription>
259 </CardHeader>
260
261 <div
262 className={css({
263 display: { base: "none", md: "block" },
264 marginTop: "4",
265 overflowX: "auto",
266 })}
267 >
268 <Table
269 aria-label={`${statementMonth} transactions`}
270 className={css({ width: "full" })}
271 >
272 <TableHead>
273 <TableRow>
274 <TableHeader className={css({ whiteSpace: "nowrap" })}>
275 Date
276 </TableHeader>
277 <TableHeader className={css({ width: "full" })}>
278 Description
279 </TableHeader>
280 <TableHeader className={css({ whiteSpace: "nowrap" })}>
281 Category
282 </TableHeader>
283 <TableHeader>Status</TableHeader>
284 <TableHeader numeric className={css({ whiteSpace: "nowrap" })}>
285 Amount ({data.account.currency})
286 </TableHeader>
287 </TableRow>
288 </TableHead>
289 <TableBody>
290 {data.transactions.map((transaction) => {
291 const isPending = transaction.status === "pending";
292 const isCredit = transaction.amount > 0;
293
294 return (
295 <TableRow key={transaction.id}>
296 <TableCell className={css({ whiteSpace: "nowrap" })}>
297 <time dateTime={transaction.date}>
298 {dateFormatter.format(asUtcDate(transaction.date))}
299 </time>
300 </TableCell>
301 <TableCell>
302 <span className={css({ fontWeight: "medium" })}>
303 {transaction.description}
304 </span>
305 </TableCell>
306 <TableCell className={css({ whiteSpace: "nowrap" })}>
307 {transaction.category}
308 </TableCell>
309 <TableCell>
310 {isPending ? (
311 <Badge tone="warning">Pending</Badge>
312 ) : (
313 <span
314 className={css({
315 color: "fg.muted",
316 fontSize: "sm",
317 })}
318 >
319 Booked
320 </span>
321 )}
322 </TableCell>
323 <TableCell
324 numeric
325 className={css({
326 color: isCredit ? "success.text" : "fg.default",
327 fontWeight: "semibold",
328 whiteSpace: "nowrap",
329 })}
330 >
331 {formatAmount(transaction.amount)}
332 </TableCell>
333 </TableRow>
334 );
335 })}
336 </TableBody>
337 </Table>
338 </div>
339
340 <ul
341 className={css({
342 display: { base: "block", md: "none" },
343 margin: "0",
344 marginTop: "4",
345 padding: "0",
346 listStyle: "none",
347 })}
348 >
349 {data.transactions.map((transaction) => {
350 const isPending = transaction.status === "pending";
351 const isCredit = transaction.amount > 0;
352
353 return (
354 <li
355 key={transaction.id}
356 className={css({
357 padding: "6",
358 borderTopWidth: "thin",
359 borderTopColor: "border.default",
360 })}
361 >
362 <div
363 className={css({
364 display: "flex",
365 alignItems: "flex-start",
366 justifyContent: "space-between",
367 gap: "4",
368 })}
369 >
370 <div>
371 <time
372 dateTime={transaction.date}
373 className={css({
374 color: "fg.muted",
375 fontSize: "xs",
376 })}
377 >
378 {dateFormatter.format(asUtcDate(transaction.date))}
379 </time>
380 <p
381 className={css({
382 marginTop: "1",
383 fontSize: "sm",
384 fontWeight: "medium",
385 lineHeight: "normal",
386 })}
387 >
388 {transaction.description}
389 </p>
390 </div>
391 <span
392 className={css({
393 flexShrink: 0,
394 color: isCredit ? "success.text" : "fg.default",
395 fontSize: "sm",
396 fontWeight: "semibold",
397 fontVariantNumeric: "tabular-nums",
398 whiteSpace: "nowrap",
399 })}
400 >
401 {formatAmount(transaction.amount)}
402 </span>
403 </div>
404 <div
405 className={css({
406 marginTop: "3",
407 display: "flex",
408 alignItems: "center",
409 justifyContent: "space-between",
410 gap: "3",
411 })}
412 >
413 <span
414 className={css({
415 color: "fg.muted",
416 fontSize: "xs",
417 })}
418 >
419 {transaction.category}
420 </span>
421 {isPending ? (
422 <Badge tone="warning">Pending</Badge>
423 ) : (
424 <span
425 className={css({
426 color: "fg.muted",
427 fontSize: "xs",
428 })}
429 >
430 Booked
431 </span>
432 )}
433 </div>
434 </li>
435 );
436 })}
437 </ul>
438
439 <CardFooter className={css({ justifyContent: "flex-start" })}>
440 <p className={css({ color: "fg.muted", fontSize: "xs" })}>
441 <span
442 className={css({
443 color: "warning.text",
444 fontWeight: "medium",
445 })}
446 >
447 Pending transactions
448 </span>{" "}
449 are not final and may change.
450 </p>
451 </CardFooter>
452 </Card>
453 </main>
454 </div>
455 );
456 }
457
Use the logical property "marginBlockStart" instead of the physical "marginTop".
page.tsx:344:15 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:358:21 Use the logical property "borderBlockStartWidth" instead of the physical "borderTopWidth". page.tsx:382:27 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:406:23 Use the logical property "marginBlockStart" instead of the physical "marginTop". typecheck/TS2769 7 quality a11y/color-contrast 1 quality page.tsx:1:1 · <div aria-hidden="true" class="w_10 h_10 flex-sh_0 d_flex ai_center jc_center bdr_full bg_bg.subtle c_accent.default fs_ Elements must meet minimum color contrast ratio thresholds (1 element, dark theme) Every run that broke a11y/color-contrast 3 write_file 1,486 9,545 $0.0999
4 write_file 9,598 3,517 $0.0561