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 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 read_file, list_files, get_guidelines 1,114 78 $0.0004 1 list_components, list_tokens 3,202 60 $0.0010 2 get_component, get_component, get_component 3,450 99 $0.0012
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
17 import data from "./fixture.json";
18
19 const { account, transactions } = data;
20
21 const amountFormatter = new Intl.NumberFormat("en-GB", {
22 style: "currency",
23 currency: account.currency,
24 minimumFractionDigits: 2,
25 maximumFractionDigits: 2,
26 });
27
28 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
29 day: "2-digit",
30 month: "short",
31 year: "numeric",
32 timeZone: "UTC",
33 });
34
35 function formatDate(isoDate: string) {
36 return dateFormatter.format(new Date(`${isoDate}T00:00:00Z`));
37 }
38
39 function formatAmount(amount: number) {
40 return amountFormatter.format(amount);
41 }
42
43 const rows = [...transactions].sort((a, b) => b.date.localeCompare(a.date));
44
45 export default function OctoberStatementPage() {
46 return (
47 <div className="vektos">
48 <div
49 className={css({
50 minHeight: "full",
51 bg: "bg.canvas",
52 color: "fg.default",
53 p: "6",
54 })}
55 >
56 <div
57 className={css({
58 maxWidth: "lg",
59 mx: "auto",
60 display: "flex",
61 flexDirection: "column",
62 gap: "6",
63 })}
64 >
65 <Card>
66 <CardHeader>
67 <CardTitle asChild>
68 <h1>October 2026 statement</h1>
69 </CardTitle>
70 <CardDescription>
71 Current account · {formatDate(account.period.from)} –{" "}
72 {formatDate(account.period.to)}
73 </CardDescription>
74 </CardHeader>
75 <CardBody>
76 <div
77 className={css({
78 display: "flex",
79 flexWrap: "wrap",
80 gap: "6",
81 })}
82 >
83 <div
84 className={css({
85 display: "flex",
86 flexDirection: "column",
87 gap: "1",
88 })}
89 >
90 <span className={css({ fontSize: "sm", color: "fg.muted" })}>
91 Account holder
92 </span>
93 <span className={css({ fontSize: "md", fontWeight: "medium" })}>
94 {account.holder}
95 </span>
96 </div>
97 <div
98 className={css({
99 display: "flex",
100 flexDirection: "column",
101 gap: "1",
102 })}
103 >
104 <span className={css({ fontSize: "sm", color: "fg.muted" })}>
105 IBAN
106 </span>
107 <span
108 className={css({
109 fontSize: "md",
110 fontVariantNumeric: "tabular-nums",
111 })}
112 >
113 {account.iban}
114 </span>
115 </div>
116 <div
117 className={css({
118 display: "flex",
119 flexDirection: "column",
120 gap: "1",
121 })}
122 >
123 <span className={css({ fontSize: "sm", color: "fg.muted" })}>
124 Current balance
125 </span>
126 <span
127 className={css({
128 fontSize: "lg",
129 fontWeight: "semibold",
130 fontVariantNumeric: "tabular-nums",
131 })}
132 >
133 {formatAmount(account.balance)}
134 </span>
135 </div>
136 </div>
137 </CardBody>
138 </Card>
139
140 <Card>
141 <CardHeader>
142 <CardTitle asChild>
143 <h2>Transactions</h2>
144 </CardTitle>
145 <CardDescription>
146 {rows.length} transactions in this period.
147 </CardDescription>
148 </CardHeader>
149 <Table aria-label="October 2026 transactions">
150 <TableHead>
151 <TableRow>
152 <TableHeader>Date</TableHeader>
153 <TableHeader>Description</TableHeader>
154 <TableHeader>Category</TableHeader>
155 <TableHeader>Status</TableHeader>
156 <TableHeader numeric>Amount ({account.currency})</TableHeader>
157 </TableRow>
158 </TableHead>
159 <TableBody>
160 {rows.map((transaction) => {
161 const isPending = transaction.status === "pending";
162
163 return (
164 <TableRow key={transaction.id}>
165 <TableCell
166 className={css({ whiteSpace: "nowrap" })}
167 >
168 {formatDate(transaction.date)}
169 </TableCell>
170 <TableCell>{transaction.description}</TableCell>
171 <TableCell
172 className={css({ color: "fg.muted" })}
173 >
174 {transaction.category}
175 </TableCell>
176 <TableCell>
177 <Badge tone={isPending ? "warning" : "neutral"}>
178 {isPending ? "Pending" : "Booked"}
179 </Badge>
180 </TableCell>
181 <TableCell numeric>
182 {formatAmount(transaction.amount)}
183 </TableCell>
184 </TableRow>
185 );
186 })}
187 </TableBody>
188 </Table>
189 </Card>
190
191 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
192 Pending transactions are not final: their amount may still change
193 until they are booked.
194 </p>
195 </div>
196 </div>
197 </div>
198 );
199 }
200
list_tokens, list_tokens, list_tokens
4 list_tokens 2,786 112 $0.0010
5 write_file 423 3,160 $0.0040