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 3 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 931 139 $0.0033 1 list_files, list_components, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens 1,423 209 $0.0051 2 read_file, get_component, get_component, get_component 1,867 190 $0.0061
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 toDate = (value: string) => new Date(`${value}T00:00:00Z`);
19
20 const monthFormatter = new Intl.DateTimeFormat("en-GB", {
21 month: "long",
22 timeZone: "UTC",
23 });
24
25 const longDateFormatter = new Intl.DateTimeFormat("en-GB", {
26 day: "numeric",
27 month: "long",
28 year: "numeric",
29 timeZone: "UTC",
30 });
31
32 const transactionDateFormatter = new Intl.DateTimeFormat("en-GB", {
33 day: "2-digit",
34 month: "short",
35 year: "numeric",
36 timeZone: "UTC",
37 });
38
39 const currencyFormatter = new Intl.NumberFormat("en-IE", {
40 style: "currency",
41 currency: data.account.currency,
42 minimumFractionDigits: 2,
43 maximumFractionDigits: 2,
44 });
45
46 const formatAmount = (amount: number) =>
47 amount > 0
48 ? `+${currencyFormatter.format(amount)}`
49 : currencyFormatter.format(amount);
50
51 export default function OctoberStatementPage() {
52 const periodStart = toDate(data.account.period.from);
53 const periodEnd = toDate(data.account.period.to);
54 const statementMonth = monthFormatter.format(periodStart);
55 const periodLabel = `${longDateFormatter.format(periodStart)} – ${longDateFormatter.format(periodEnd)}`;
56
57 return (
58 <div
59 className={`vektos ${css({
60 bg: "bg.canvas",
61 color: "fg.default",
62 px: "4",
63 py: "6",
64 md: { px: "8", py: "8" },
65 })}`}
66 >
67 <main
68 className={css({
69 width: "full",
70 maxWidth: "full",
71 mx: "auto",
72 display: "grid",
73 gap: "6",
74 })}
75 >
76 <header className={css({ display: "grid", gap: "2" })}>
77 <p
78 className={css({
79 color: "fg.muted",
80 fontSize: "xs",
81 fontWeight: "semibold",
82 textTransform: "uppercase",
83 })}
84 >
85 Current account
86 </p>
87 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
88 {statementMonth} statement
89 </h1>
90 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
91 {periodLabel}
92 </p>
93 </header>
94
95 <Card aria-label="Account summary">
96 <CardBody>
97 <dl
98 className={css({
99 display: "grid",
100 gap: "6",
101 md: {
102 gridTemplateColumns: "1fr 2fr auto",
103 alignItems: "start",
104 },
105 })}
106 >
107 <div className={css({ display: "grid", gap: "1" })}>
108 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
109 Account holder
110 </dt>
111 <dd className={css({ fontWeight: "semibold" })}>
112 {data.account.holder}
113 </dd>
114 </div>
115
116 <div className={css({ display: "grid", gap: "1" })}>
117 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
118 IBAN
119 </dt>
120 <dd
121 className={css({
122 fontSize: "sm",
123 fontWeight: "semibold",
124 overflowWrap: "anywhere",
125 })}
126 >
127 {data.account.iban}
128 </dd>
129 </div>
130
131 <div
132 className={css({
133 display: "grid",
134 gap: "1",
135 md: { textAlign: "right" },
136 })}
137 >
138 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
139 Current balance
140 </dt>
141 <dd
142 className={css({
143 fontSize: "lg",
144 fontWeight: "semibold",
145 fontVariantNumeric: "tabular-nums",
146 whiteSpace: "nowrap",
147 })}
148 >
149 {currencyFormatter.format(data.account.balance)}
150 </dd>
151 </div>
152 </dl>
153 </CardBody>
154 </Card>
155
156 <section aria-labelledby="transactions-heading">
157 <Card>
158 <CardHeader>
159 <CardTitle asChild>
160 <h2 id="transactions-heading">Transactions</h2>
161 </CardTitle>
162 <CardDescription>
163 {data.transactions.length} transactions this period. Pending
164 transactions are not final and may change.
165 </CardDescription>
166 </CardHeader>
167
168 <div className={css({ overflowX: "auto" })}>
169 <Table
170 aria-label={`${statementMonth} current account transactions`}
171 className={css({ minWidth: "lg", marginBlockStart: "4" })}
172 >
173 <TableHead>
174 <TableRow>
175 <TableHeader>Date</TableHeader>
176 <TableHeader>Description</TableHeader>
177 <TableHeader>Category</TableHeader>
178 <TableHeader>Status</TableHeader>
179 <TableHeader numeric>
180 Amount ({data.account.currency})
181 </TableHeader>
182 </TableRow>
183 </TableHead>
184 <TableBody>
185 {data.transactions.map((transaction) => {
186 const isPending = transaction.status === "pending";
187
188 return (
189 <TableRow key={transaction.id}>
190 <TableCell
191 className={css({
192 color: "fg.muted",
193 whiteSpace: "nowrap",
194 })}
195 >
196 <time dateTime={transaction.date}>
197 {transactionDateFormatter.format(
198 toDate(transaction.date),
199 )}
200 </time>
201 </TableCell>
202 <TableCell>{transaction.description}</TableCell>
203 <TableCell
204 className={css({ color: "fg.muted", whiteSpace: "nowrap" })}
205 >
206 {transaction.category}
207 </TableCell>
208 <TableCell>
209 <Badge tone={isPending ? "warning" : "neutral"}>
210 {isPending ? "Pending" : "Booked"}
211 </Badge>
212 </TableCell>
213 <TableCell
214 numeric
215 className={css({
216 fontWeight: "semibold",
217 whiteSpace: "nowrap",
218 })}
219 >
220 {formatAmount(transaction.amount)}
221 </TableCell>
222 </TableRow>
223 );
224 })}
225 </TableBody>
226 </Table>
227 </div>
228 </Card>
229 </section>
230 </main>
231 </div>
232 );
233 }
234
3 write_file 3,019 7,221 $0.0791