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 135 $0.0002 1 get_component, get_component, get_component, list_tokens 5,112 164 $0.0006 2 write_file 9,835 3,170 $0.0026
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 { 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 periodFormatter = new Intl.DateTimeFormat("en-GB", {
28 day: "2-digit",
29 month: "long",
30 year: "numeric",
31 timeZone: "UTC",
32 });
33
34 const moneyFormatter = new Intl.NumberFormat("it-IT", {
35 style: "currency",
36 currency: account.currency,
37 });
38
39 function formatDate(iso: string): string {
40 return dateFormatter.format(new Date(`${iso}T00:00:00Z`));
41 }
42
43 function formatPeriodDate(iso: string): string {
44 return periodFormatter.format(new Date(`${iso}T00:00:00Z`));
45 }
46
47 function formatMoney(value: number): string {
48 return moneyFormatter.format(value);
49 }
50
51 const pageStyles = css({
52 bg: "bg.canvas",
53 color: "fg.default",
54 p: "6",
55 display: "flex",
56 flexDirection: "column",
57 gap: "6",
58 });
59
60 const summaryGrid = css({
61 display: "grid",
62 gridTemplateColumns: "repeat(auto-fit, minmax(14rem, 1fr))",
63 gap: "6",
64 margin: "0",
65 });
66
67 const termStyles = css({
68 fontSize: "sm",
69 color: "fg.muted",
70 margin: "0",
71 });
72
73 const valueStyles = css({
74 fontSize: "lg",
75 fontWeight: "semibold",
76 margin: "0",
77 });
78
79 const headingStyles = css({
80 fontSize: "lg",
81 fontWeight: "semibold",
82 lineHeight: "tight",
83 });
84
85 const inlineStyles = css({
86 display: "flex",
87 alignItems: "center",
88 gap: "2",
89 flexWrap: "wrap",
90 });
91
92 export default function StatementPage() {
93 return (
94 <main className={`vektos ${pageStyles}`}>
95 <Card>
96 <CardHeader>
97 <CardTitle asChild>
98 <h1 className={headingStyles}>Account statement, October 2026</h1>
99 </CardTitle>
100 <CardDescription>
101 {`${formatPeriodDate(account.period.from)} to ${formatPeriodDate(account.period.to)}`}
102 </CardDescription>
103 </CardHeader>
104 <CardBody>
105 <dl className={summaryGrid}>
106 <div>
107 <dt className={termStyles}>Account holder</dt>
108 <dd className={valueStyles}>{account.holder}</dd>
109 </div>
110 <div>
111 <dt className={termStyles}>IBAN</dt>
112 <dd className={valueStyles}>{account.iban}</dd>
113 </div>
114 <div>
115 <dt className={termStyles}>Current balance</dt>
116 <dd className={valueStyles}>{formatMoney(account.balance)}</dd>
117 </div>
118 </dl>
119 </CardBody>
120 </Card>
121
122 <Card>
123 <CardHeader>
124 <CardTitle asChild>
125 <h2 className={headingStyles}>Transactions</h2>
126 </CardTitle>
127 <CardDescription>
128 {`${transactions.length} transactions. Pending transactions are not final yet and may change.`}
129 </CardDescription>
130 </CardHeader>
131 <Table aria-label="Transactions for October 2026">
132 <TableHead>
133 <TableRow>
134 <TableHeader>Date</TableHeader>
135 <TableHeader>Description</TableHeader>
136 <TableHeader>Category</TableHeader>
137 <TableHeader numeric>Amount (EUR)</TableHeader>
138 </TableRow>
139 </TableHead>
140 <TableBody>
141 {transactions.map((tx) => (
142 <TableRow key={tx.id}>
143 <TableCell>
144 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
145 </TableCell>
146 <TableCell>
147 <span className={inlineStyles}>
148 {tx.description}
149 {tx.status === "pending" ? (
150 <Badge tone="warning">Pending</Badge>
151 ) : null}
152 </span>
153 </TableCell>
154 <TableCell>{tx.category}</TableCell>
155 <TableCell numeric>{formatMoney(tx.amount)}</TableCell>
156 </TableRow>
157 ))}
158 </TableBody>
159 </Table>
160 </Card>
161 </main>
162 );
163 }
164
4 write_file 14,982 2,103 $0.0025