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_files 257 50 $0.0001 1 read_file, list_components 1,336 54 $0.0005 2 get_component, get_component, get_component 1,275 99 $0.0005
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, cx } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const { account, transactions } = data;
19
20 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
21 day: "2-digit",
22 month: "short",
23 year: "numeric",
24 timeZone: "UTC",
25 });
26
27 const moneyFormatter = new Intl.NumberFormat("en-GB", {
28 style: "currency",
29 currency: account.currency,
30 signDisplay: "exceptZero",
31 });
32
33 const formatDate = (isoDate: string) =>
34 dateFormatter.format(new Date(`${isoDate}T00:00:00Z`));
35
36 const formatMoney = (amount: number) => moneyFormatter.format(amount);
37
38 const periodLabel = `${formatDate(account.period.from)} – ${formatDate(
39 account.period.to,
40 )}`;
41
42 export default function OctoberStatementPage() {
43 return (
44 <main
45 className={cx(
46 "vektos",
47 css({
48 minHeight: "full",
49 bg: "bg.canvas",
50 color: "fg.default",
51 p: "6",
52 display: "grid",
53 gap: "6",
54 }),
55 )}
56 >
57 <Card>
58 <CardHeader>
59 <CardTitle asChild>
60 <h1>October 2026 statement</h1>
61 </CardTitle>
62 <CardDescription>Current account · {periodLabel}</CardDescription>
63 </CardHeader>
64 <CardBody>
65 <dl
66 className={css({
67 margin: "0",
68 display: "flex",
69 flexWrap: "wrap",
70 gap: "8",
71 })}
72 >
73 <div className={css({ display: "grid", gap: "1" })}>
74 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
75 Account holder
76 </dt>
77 <dd
78 className={css({
79 margin: "0",
80 fontSize: "lg",
81 fontWeight: "semibold",
82 })}
83 >
84 {account.holder}
85 </dd>
86 </div>
87 <div className={css({ display: "grid", gap: "1" })}>
88 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
89 IBAN
90 </dt>
91 <dd
92 className={css({
93 margin: "0",
94 fontSize: "md",
95 fontWeight: "medium",
96 })}
97 >
98 {account.iban}
99 </dd>
100 </div>
101 <div className={css({ display: "grid", gap: "1" })}>
102 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>
103 Current balance
104 </dt>
105 <dd
106 className={css({
107 margin: "0",
108 fontSize: "lg",
109 fontWeight: "semibold",
110 })}
111 >
112 {formatMoney(account.balance)}
113 </dd>
114 </div>
115 </dl>
116 </CardBody>
117 </Card>
118
119 <Card>
120 <CardHeader>
121 <CardTitle asChild>
122 <h2>Transactions</h2>
123 </CardTitle>
124 <CardDescription>
125 {transactions.length} transactions, newest first. Amounts are in{" "}
126 {account.currency}; money going out is negative. Pending amounts are
127 not final yet.
128 </CardDescription>
129 </CardHeader>
130 <Table
131 aria-label="October 2026 transactions"
132 className={css({ marginBlockStart: "4" })}
133 >
134 <TableHead>
135 <TableRow>
136 <TableHeader>Date</TableHeader>
137 <TableHeader>Description</TableHeader>
138 <TableHeader>Category</TableHeader>
139 <TableHeader>Status</TableHeader>
140 <TableHeader numeric>Amount ({account.currency})</TableHeader>
141 </TableRow>
142 </TableHead>
143 <TableBody>
144 {transactions.map((transaction) => {
145 const isPending = transaction.status === "pending";
146 return (
147 <TableRow key={transaction.id}>
148 <TableCell>{formatDate(transaction.date)}</TableCell>
149 <TableCell>{transaction.description}</TableCell>
150 <TableCell
151 className={css({ color: "fg.muted", fontSize: "sm" })}
152 >
153 {transaction.category}
154 </TableCell>
155 <TableCell>
156 {isPending ? (
157 <Badge tone="warning">Pending</Badge>
158 ) : (
159 <Badge tone="neutral">Booked</Badge>
160 )}
161 </TableCell>
162 <TableCell
163 numeric
164 className={css({
165 fontWeight: "medium",
166 color: isPending ? "fg.muted" : "fg.default",
167 })}
168 >
169 {formatMoney(transaction.amount)}
170 </TableCell>
171 </TableRow>
172 );
173 })}
174 </TableBody>
175 </Table>
176 </Card>
177 </main>
178 );
179 }
180
4 list_tokens, list_tokens 1,155 72 $0.0005
5 list_tokens, list_tokens 399 948 $0.0013
6 list_tokens 1,241 1,319 $0.0020
7 write_file 1,594 3,862 $0.0052
8 check_code 3,941 1,190 $0.0027