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 6 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 read_file, list_files 5,359 74 $0.0006 1 docs-list 6,397 137 $0.0007 2 docs-show, docs-show, docs-show 6,972 139 $0.0008 3
Output cap The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const money = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 const dateFormat = new Intl.DateTimeFormat("en-GB", {
24 day: "2-digit",
25 month: "short",
26 year: "numeric",
27 timeZone: "UTC",
28 });
29
30 function formatDate(iso: string): string {
31 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
32 }
33
34 const periodLabel = new Intl.DateTimeFormat("en-GB", {
35 day: "2-digit",
36 month: "long",
37 year: "numeric",
38 timeZone: "UTC",
39 });
40
41 const transactions = [...data.transactions].sort((a, b) =>
42 a.date < b.date ? 1 : a.date > b.date ? -1 : 0,
43 );
44
45 export default function StatementPage() {
46 const { account } = data;
47
48 return (
49 <main
50 className={css({
51 maxWidth: "5xl",
52 marginInline: "auto",
53 padding: "8",
54 display: "flex",
55 flexDirection: "column",
56 gap: "6",
57 })}
58 >
59 <header className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
60 <h1 className={css({ fontSize: "2xl", fontWeight: "bold" })}>
61 Account statement
62 </h1>
63 <p className={css({ color: "fg.muted" })}>
64 {`${periodLabel.format(new Date(`${account.period.from}T00:00:00Z`))} – ${periodLabel.format(new Date(`${account.period.to}T00:00:00Z`))}`}
65 </p>
66 </header>
67
68 <Card>
69 <CardHeader>
70 <CardTitle>{account.holder}</CardTitle>
71 <CardDescription>{`IBAN ${account.iban}`}</CardDescription>
72 </CardHeader>
73 <CardBody>
74 <p className={css({ color: "fg.muted", fontSize: "sm" })}>Current balance</p>
75 <p
76 className={css({ fontSize: "3xl", fontWeight: "semibold" })}
77 aria-label={`Current balance ${money.format(account.balance)}`}
78 >
79 {money.format(account.balance)}
80 </p>
81 </CardBody>
82 </Card>
83
84 <Card>
85 <CardHeader>
86 <CardTitle>Transactions</CardTitle>
87 <CardDescription>
88 {`${transactions.length} transactions in October 2026. Amounts in ${account.currency}.`}
89 </CardDescription>
90 </CardHeader>
91 <Table aria-label="Transactions for October 2026" className={css({ marginBlockStart: "4" })}>
92 <TableHead>
93 <TableRow>
94 <TableHeader>Date</TableHeader>
95 <TableHeader>Description</TableHeader>
96 <TableHeader>Category</TableHeader>
97 <TableHeader>Status</TableHeader>
98 <TableHeader numeric>Amount ({account.currency})</TableHeader>
99 </TableRow>
100 </TableHead>
101 <TableBody>
102 {transactions.map((tx) => (
103 <TableRow key={tx.id}>
104 <TableCell>
105 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
106 </TableCell>
107 <TableCell>{tx.description}</TableCell>
108 <TableCell>{tx.category}</TableCell>
109 <TableCell>
110 {tx.status === "pending" ? (
111 <Badge tone="warning">Pending</Badge>
112 ) : (
113 <Badge tone="success">Booked</Badge>
114 )}
115 </TableCell>
116 <TableCell numeric>
117 <span
118 className={css({
119 color: tx.amount < 0 ? "fg.default" : "fg.success",
120 fontStyle: tx.status === "pending" ? "italic" : "normal",
121 })}
122 >
123 {money.format(tx.amount)}
124 </span>
125 </TableCell>
126 </TableRow>
127 ))}
128 </TableBody>
129 </Table>
130 </Card>
131 </main>
132 );
133 }
134