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 4 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 list_files, read_file 3,714 66 $0.0012 1 docs-list 935 82 $0.0004 2 docs-show, docs-show 902 83 $0.0004 3
e02ef3974528
Output cap The provider's default 4 Badge,
5 Card,
6 CardBody,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10 Table,
11 TableBody,
12 TableCell,
13 TableHead,
14 TableHeader,
15 TableRow,
16 } from "@vektos/ds";
17 import { css, cx } from "styled-system/css";
18
19 import data from "./fixture.json";
20
21 const { account, transactions: statementTransactions } = data;
22
23 const toDate = (isoDate: string) => new Date(`${isoDate}T00:00:00.000Z`);
24
25 const amountFormatter = new Intl.NumberFormat("en-GB", {
26 style: "currency",
27 currency: account.currency,
28 currencyDisplay: "narrowSymbol",
29 });
30
31 const dayFormatter = new Intl.DateTimeFormat("en-GB", {
32 day: "2-digit",
33 month: "short",
34 year: "numeric",
35 timeZone: "UTC",
36 });
37
38 const longDateFormatter = new Intl.DateTimeFormat("en-GB", {
39 day: "numeric",
40 month: "long",
41 year: "numeric",
42 timeZone: "UTC",
43 });
44
45 const monthFormatter = new Intl.DateTimeFormat("en-GB", {
46 month: "long",
47 year: "numeric",
48 timeZone: "UTC",
49 });
50
51 const formatAmount = (amount: number) => amountFormatter.format(amount);
52 const formatDay = (isoDate: string) => dayFormatter.format(toDate(isoDate));
53
54 // Newest first; the id breaks ties so the order is stable across renders.
55 const transactions = [...statementTransactions].sort((a, b) => {
56 if (a.date !== b.date) return a.date < b.date ? 1 : -1;
57 if (a.id === b.id) return 0;
58 return a.id < b.id ? 1 : -1;
59 });
60
61 const pendingCount = transactions.filter((transaction) => transaction.status === "pending").length;
62
63 const periodLabel = `${longDateFormatter.format(toDate(account.period.from))} – ${longDateFormatter.format(
64 toDate(account.period.to),
65 )}`;
66
67 const statementTitle = `${monthFormatter.format(toDate(account.period.from))} statement`;
68
69 const summaryLabel = `${transactions.length} transactions${
70 pendingCount > 0 ? `, ${pendingCount} still pending` : ""
71 }`;
72
73 const termClass = css({ display: "grid", gap: "1" });
74 const labelClass = css({ fontSize: "sm", color: "fg.muted" });
75 const valueClass = css({ margin: "0", fontSize: "md", fontWeight: "semibold", color: "fg.default" });
76
77 const StatementPage = () => (
78 <main
79 className={cx(
80 "vektos",
81 css({ display: "flex", justifyContent: "center", px: "6", py: "10" }),
82 )}
83 >
84 <div className={css({ display: "grid", gap: "6", width: "full", maxWidth: "4xl", mx: "auto" })}>
85 <Card>
86 <CardHeader>
87 <CardTitle asChild>
88 <h1>{statementTitle}</h1>
89 </CardTitle>
90 <CardDescription>Current account · {periodLabel}</CardDescription>
91 </CardHeader>
92 <CardBody>
93 <dl
94 className={css({
95 display: "flex",
96 flexWrap: "wrap",
97 alignItems: "flex-start",
98 justifyContent: "space-between",
99 gap: "8",
100 margin: "0",
101 })}
102 >
103 <div className={termClass}>
104 <dt className={labelClass}>Account holder</dt>
105 <dd className={valueClass}>{account.holder}</dd>
106 </div>
107 <div className={termClass}>
108 <dt className={labelClass}>IBAN</dt>
109 <dd className={valueClass}>{account.iban}</dd>
110 </div>
111 <div className={termClass}>
112 <dt className={labelClass}>Current balance</dt>
113 <dd className={css({ margin: "0", fontSize: "2xl", fontWeight: "semibold", color: "fg.default" })}>
114 {formatAmount(account.balance)}
115 </dd>
116 </div>
117 </dl>
118 </CardBody>
119 </Card>
120
121 <Card>
122 <CardHeader>
123 <CardTitle asChild>
124 <h2>Transactions</h2>
125 </CardTitle>
126 <CardDescription>
127 {summaryLabel}. Pending transactions are not final yet and may still change.
128 </CardDescription>
129 </CardHeader>
130 <Table
131 aria-label={`Transactions from ${periodLabel}`}
132 className={css({ marginBlockStart: "4" })}
133 >
134 <TableHead>
135 <TableRow>
136 <TableHeader>Date</TableHeader>
137 <TableHeader>Description</TableHeader>
138 <TableHeader>Category</TableHeader>
139 <TableHeader numeric>Amount ({account.currency})</TableHeader>
140 </TableRow>
141 </TableHead>
142 <TableBody>
143 {transactions.map((transaction) => (
144 <TableRow key={transaction.id}>
145 <TableCell>
146 <time dateTime={transaction.date}>{formatDay(transaction.date)}</time>
147 </TableCell>
148 <TableCell>
149 <span
150 className={css({
151 display: "inline-flex",
152 alignItems: "center",
153 flexWrap: "wrap",
154 gap: "2",
155 })}
156 >
157 {transaction.description}
158 {transaction.status === "pending" ? <Badge tone="warning">Pending</Badge> : null}
159 </span>
160 </TableCell>
161 <TableCell>
162 <span className={css({ color: "fg.muted" })}>{transaction.category}</span>
163 </TableCell>
164 <TableCell numeric>
165 <span
166 className={css({
167 color: transaction.amount < 0 ? "danger.text" : "fg.default",
168 })}
169 >
170 {formatAmount(transaction.amount)}
171 </span>
172 </TableCell>
173 </TableRow>
174 ))}
175 </TableBody>
176 </Table>
177 </Card>
178 </div>
179 </main>
180 );
181
182 export default StatementPage;
183
4 docs-show, read_file 1,261 365 $0.0009
5 docs-show, docs-show 1,652 3,251 $0.0045
6 read_file, read_file 4,956 176 $0.0018
7 write_file 315 9,418 $0.0115
8 stories-changed 9,498 91 $0.0031