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, read_file, list_components 1,756 127 $0.0002 1 get_component, get_component, get_component, list_tokens 5,104 164 $0.0006 2 write_file 9,827 2,186 $0.0021
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 money = new Intl.NumberFormat("it-IT", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 // ISO dates (YYYY-MM-DD) are formatted without going through Date, so the
24 // day never shifts with the time zone.
25 function formatDate(iso: string): string {
26 const [year, month, day] = iso.split("-");
27 return `${day}/${month}/${year}`;
28 }
29
30 const periodLabel = `${formatDate(data.account.period.from)} – ${formatDate(data.account.period.to)}`;
31
32 export default function StatementPage() {
33 return (
34 <main
35 className={`vektos ${css({
36 bg: "bg.canvas",
37 color: "fg.default",
38 py: "8",
39 px: "4",
40 })}`}
41 >
42 <div
43 className={css({
44 display: "flex",
45 flexDirection: "column",
46 gap: "6",
47 maxWidth: "lg",
48 marginInline: "auto",
49 })}
50 >
51 <Card>
52 <CardHeader>
53 <CardTitle>{data.account.holder}</CardTitle>
54 <CardDescription>Current account statement, {periodLabel}</CardDescription>
55 </CardHeader>
56 <CardBody>
57 <dl
58 className={css({
59 display: "grid",
60 gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))",
61 gap: "4",
62 })}
63 >
64 <div>
65 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>IBAN</dt>
66 <dd className={css({ fontWeight: "semibold" })}>{data.account.iban}</dd>
67 </div>
68 <div>
69 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>Current balance</dt>
70 <dd className={css({ fontSize: "lg", fontWeight: "semibold" })}>
71 {money.format(data.account.balance)}
72 </dd>
73 </div>
74 </dl>
75 </CardBody>
76 </Card>
77
78 <Card>
79 <CardHeader>
80 <CardTitle>Transactions</CardTitle>
81 <CardDescription>
82 {data.transactions.length} transactions in October 2026. Pending transactions are not
83 final yet.
84 </CardDescription>
85 </CardHeader>
86 <Table aria-label="Transactions for October 2026">
87 <TableHead>
88 <TableRow>
89 <TableHeader>Date</TableHeader>
90 <TableHeader>Description</TableHeader>
91 <TableHeader>Category</TableHeader>
92 <TableHeader>Status</TableHeader>
93 <TableHeader numeric>Amount (EUR)</TableHeader>
94 </TableRow>
95 </TableHead>
96 <TableBody>
97 {data.transactions.map((tx) => (
98 <TableRow key={tx.id}>
99 <TableCell>
100 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
101 </TableCell>
102 <TableCell>{tx.description}</TableCell>
103 <TableCell>{tx.category}</TableCell>
104 <TableCell>
105 {tx.status === "pending" ? (
106 <Badge tone="warning">Pending</Badge>
107 ) : (
108 <Badge>Booked</Badge>
109 )}
110 </TableCell>
111 <TableCell numeric>{money.format(tx.amount)}</TableCell>
112 </TableRow>
113 ))}
114 </TableBody>
115 </Table>
116 </Card>
117 </div>
118 </main>
119 );
120 }
121
4 check_code 13,623 1,437 $0.0021
5 write_file 15,127 1,499 $0.0023
6 check_code 16,647 1,425 $0.0024