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 None. The run followed every rule that was checked.
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, list_tokens 117 124 $0.0017 1 read_file, get_component, get_component, get_component 3,260 167 $0.0084 2 write_file 3,045 5,667 $0.0636
e02ef3974528
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 currencyFormatter = new Intl.NumberFormat("en-GB", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
24 day: "numeric",
25 month: "short",
26 year: "numeric",
27 timeZone: "UTC",
28 });
29
30 const longDateFormatter = new Intl.DateTimeFormat("en-GB", {
31 day: "numeric",
32 month: "long",
33 year: "numeric",
34 timeZone: "UTC",
35 });
36
37 const monthFormatter = new Intl.DateTimeFormat("en-GB", {
38 month: "long",
39 timeZone: "UTC",
40 });
41
42 function parseDate(value: string) {
43 return new Date(`${value}T00:00:00Z`);
44 }
45
46 function formatMoney(amount: number, showPositiveSign = false) {
47 const formatted = currencyFormatter.format(Math.abs(amount));
48
49 if (amount < 0) {
50 return `−${formatted}`;
51 }
52
53 if (showPositiveSign && amount > 0) {
54 return `+${formatted}`;
55 }
56
57 return formatted;
58 }
59
60 export default function OctoberStatementPage() {
61 const periodStart = parseDate(data.account.period.from);
62 const periodEnd = parseDate(data.account.period.to);
63 const statementMonth = monthFormatter.format(periodStart);
64 const periodLabel = `${longDateFormatter.format(periodStart)} – ${longDateFormatter.format(periodEnd)}`;
65 const pendingCount = data.transactions.filter(
66 (transaction) => transaction.status === "pending",
67 ).length;
68
69 return (
70 <main
71 className={`vektos ${css({
72 bg: "bg.canvas",
73 color: "fg.default",
74 p: "8",
75 fontSize: "md",
76 lineHeight: "normal",
77 })}`}
78 >
79 <div
80 className={css({
81 display: "flex",
82 flexDirection: "column",
83 gap: "8",
84 width: "full",
85 })}
86 >
87 <header
88 className={css({
89 display: "flex",
90 flexDirection: "column",
91 gap: "2",
92 })}
93 >
94 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
95 Current account
96 </p>
97 <h1
98 className={css({
99 fontSize: "lg",
100 fontWeight: "semibold",
101 lineHeight: "tight",
102 })}
103 >
104 {statementMonth} statement
105 </h1>
106 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
107 {periodLabel}
108 </p>
109 </header>
110
111 <Card>
112 <CardHeader>
113 <CardTitle asChild>
114 <h2>Account overview</h2>
115 </CardTitle>
116 <CardDescription>
117 Account details and balance for this statement.
118 </CardDescription>
119 </CardHeader>
120 <CardBody
121 className={css({
122 display: "flex",
123 flexWrap: "wrap",
124 alignItems: "flex-start",
125 justifyContent: "space-between",
126 gap: "8",
127 })}
128 >
129 <div
130 className={css({
131 display: "flex",
132 flexDirection: "column",
133 gap: "1",
134 })}
135 >
136 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
137 Account holder
138 </p>
139 <p className={css({ fontWeight: "semibold" })}>
140 {data.account.holder}
141 </p>
142 </div>
143
144 <div
145 className={css({
146 display: "flex",
147 flexDirection: "column",
148 gap: "1",
149 })}
150 >
151 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
152 IBAN
153 </p>
154 <p className={css({ fontWeight: "medium" })}>
155 {data.account.iban}
156 </p>
157 </div>
158
159 <div
160 className={css({
161 display: "flex",
162 flexDirection: "column",
163 gap: "1",
164 textAlign: "right",
165 })}
166 >
167 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
168 Current balance
169 </p>
170 <p
171 className={css({
172 fontSize: "lg",
173 fontWeight: "semibold",
174 lineHeight: "tight",
175 })}
176 >
177 {formatMoney(data.account.balance)}
178 </p>
179 </div>
180 </CardBody>
181 </Card>
182
183 <Card>
184 <CardHeader>
185 <CardTitle asChild>
186 <h2>Transactions</h2>
187 </CardTitle>
188 <CardDescription>
189 {data.transactions.length} transactions · {pendingCount} pending.
190 Pending transactions are not final and may change.
191 </CardDescription>
192 </CardHeader>
193 <div className={css({ overflowX: "auto" })}>
194 <Table
195 aria-label={`${statementMonth} ${periodStart.getUTCFullYear()} transactions`}
196 className={css({ minWidth: "lg" })}
197 >
198 <TableHead>
199 <TableRow>
200 <TableHeader>Date</TableHeader>
201 <TableHeader>Description</TableHeader>
202 <TableHeader>Category</TableHeader>
203 <TableHeader>Status</TableHeader>
204 <TableHeader numeric>
205 Amount ({data.account.currency})
206 </TableHeader>
207 </TableRow>
208 </TableHead>
209 <TableBody>
210 {data.transactions.map((transaction) => (
211 <TableRow key={transaction.id}>
212 <TableCell
213 className={css({
214 color: "fg.muted",
215 whiteSpace: "nowrap",
216 })}
217 >
218 {dateFormatter.format(parseDate(transaction.date))}
219 </TableCell>
220 <TableCell
221 className={css({
222 fontWeight: "medium",
223 whiteSpace: "nowrap",
224 })}
225 >
226 {transaction.description}
227 </TableCell>
228 <TableCell
229 className={css({
230 color: "fg.muted",
231 whiteSpace: "nowrap",
232 })}
233 >
234 {transaction.category}
235 </TableCell>
236 <TableCell>
237 {transaction.status === "pending" ? (
238 <Badge tone="warning">Pending</Badge>
239 ) : (
240 <Badge tone="neutral">Booked</Badge>
241 )}
242 </TableCell>
243 <TableCell
244 numeric
245 className={css({
246 color:
247 transaction.amount > 0
248 ? "success.text"
249 : "fg.default",
250 fontWeight: "medium",
251 whiteSpace: "nowrap",
252 })}
253 >
254 {formatMoney(transaction.amount, true)}
255 </TableCell>
256 </TableRow>
257 ))}
258 </TableBody>
259 </Table>
260 </div>
261 </Card>
262 </div>
263 </main>
264 );
265 }
266
4 write_file 1,784 2,830 $0.0345
6 check_code 1,716 1,656 $0.0235