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 681 55 $0.0001 1 read_file, get_component, get_component, get_component, list_tokens 3 91 $0.0003 2 write_file 3 1,796 $0.0013
e02ef3974528
Output cap The provider's default 3
4
5 const money = new Intl.NumberFormat("en-IE", {
6 style: "currency",
7 currency: data.account.currency,
8 });
9
10 const dateFormat = new Intl.DateTimeFormat("en-GB", {
11 day: "2-digit",
12 month: "short",
13 year: "numeric",
14 });
15
16 function formatDate(value: string) {
17 return dateFormat.format(new Date(`${value}T12:00:00`));
18 }
19
20 export default function OctoberStatementPage() {
21 const period = new Intl.DateTimeFormat("en-GB", { month: "long", year: "numeric" }).format(
22 new Date(`${data.account.period.from}T12:00:00`),
23 );
24
25 return (
26 <main className={`vektos ${css({ bg: "bg.canvas", color: "fg.default" })}`}>
27 <div className={css({ maxWidth: "lg", marginX: "auto", px: "4", py: "8" })}>
28 <header className={css({ marginBlockEnd: "8" })}>
29 <p className={css({ color: "accent.default", fontSize: "sm", fontWeight: "semibold", marginBlockEnd: "2" })}>Current account</p>
30 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>Account statement</h1>
31 <p className={css({ color: "fg.muted", marginBlockStart: "2" })}>{period}</p>
32 </header>
33
34 <Card className={css({ marginBlockEnd: "8" })}>
35 <CardBody>
36 <div className={css({ display: "flex", flexDirection: "column", gap: "6" })}>
37 <div>
38 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockEnd: "2" })}>Account holder</p>
39 <p className={css({ fontSize: "lg", fontWeight: "semibold" })}>{data.account.holder}</p>
40 </div>
41 <div>
42 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockEnd: "2" })}>IBAN</p>
43 <p className={css({ fontSize: "sm", fontWeight: "medium", fontVariantNumeric: "tabular-nums", overflowWrap: "anywhere" })}>{data.account.iban}</p>
44 </div>
45 <div>
46 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockEnd: "2" })}>Current balance</p>
47 <p className={css({ fontSize: "lg", fontWeight: "semibold", fontVariantNumeric: "tabular-nums" })}>{money.format(data.account.balance)}</p>
48 </div>
49 </div>
50 </CardBody>
51 </Card>
52
53 <Card>
54 <CardHeader>
55 <CardTitle>Transactions</CardTitle>
56 <CardDescription>All activity from 1–31 October 2026</CardDescription>
57 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockStart: "2" })}>{data.transactions.length} transactions</p>
58 </CardHeader>
59 <div className={css({ overflowX: "auto" })}>
60 <Table aria-label="October 2026 account transactions">
61 <TableHead>
62 <TableRow>
63 <TableHeader>Date</TableHeader>
64 <TableHeader>Description</TableHeader>
65 <TableHeader>Category</TableHeader>
66 <TableHeader>Status</TableHeader>
67 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
68 </TableRow>
69 </TableHead>
70 <TableBody>
71 {data.transactions.map((transaction) => (
72 <TableRow key={transaction.id}>
73 <TableCell>
74 <time dateTime={transaction.date} className={css({ color: "fg.muted", whiteSpace: "nowrap" })}>{formatDate(transaction.date)}</time>
75 </TableCell>
76 <TableCell><span className={css({ fontWeight: "medium" })}>{transaction.description}</span></TableCell>
77 <TableCell><span className={css({ color: "fg.muted" })}>{transaction.category}</span></TableCell>
78 <TableCell>
79 {transaction.status === "pending" ? <Badge tone="warning">Pending</Badge> : <span className={css({ color: "fg.muted", fontSize: "sm" })}>Booked</span>}
80 </TableCell>
81 <TableCell numeric>
82 <span className={css({ fontWeight: "semibold", fontVariantNumeric: "tabular-nums", color: transaction.amount > 0 ? "success.text" : "fg.default", whiteSpace: "nowrap" })}>
83 {money.format(transaction.amount)}
84 </span>
85 </TableCell>
86 </TableRow>
87 ))}
88 </TableBody>
89 </Table>
90 </div>
91 </Card>
92 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockStart: "4" })}>Pending transactions are not final and may still change.</p>
93 </div>
94 </main>
95 );
96 }
97
12 write_file 3 1,402 $0.0009
13 check_code 3 1,347 $0.0010