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 3 counted, under 1 rule. “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 get_guidelines, list_components, list_files, read_file 728 145 $0.0030 1 get_component, get_component, get_component, list_tokens 2,741 152 $0.0072 2 check_code 3,662 6,285 $0.0709
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 balanceFormatter = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 const transactionFormatter = new Intl.NumberFormat("en-IE", {
24 style: "currency",
25 currency: data.account.currency,
26 signDisplay: "exceptZero",
27 });
28
29 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
30 day: "2-digit",
31 month: "short",
32 year: "numeric",
33 timeZone: "UTC",
34 });
35
36 const monthFormatter = new Intl.DateTimeFormat("en-GB", {
37 month: "long",
38 year: "numeric",
39 timeZone: "UTC",
40 });
41
42 function asUtcDate(value: string) {
43 return new Date(`${value}T00:00:00Z`);
44 }
45
46 function formatDate(value: string) {
47 return dateFormatter.format(asUtcDate(value));
48 }
49
50 const labelStyle = css({
51 color: "fg.muted",
52 fontSize: "sm",
53 });
54
55 const valueStyle = css({
56 color: "fg.default",
57 fontSize: "md",
58 fontWeight: "medium",
59 });
60
61 export default function OctoberStatementPage() {
62 const { account, transactions } = data;
63 const statementMonth = monthFormatter.format(asUtcDate(account.period.from));
64
65 return (
66 <main className={`vektos ${css({ bg: "bg.canvas", color: "fg.default", width: "full", minHeight: "full" })}`}>
67 <div
68 className={css({
69 width: "full",
70 maxWidth: "full",
71 mx: "auto",
72 px: { base: "4", md: "8" },
73 py: { base: "6", md: "8" },
74 display: "grid",
75 gap: "6",
76 alignContent: "start",
77 })}
78 >
79 <header className={css({ display: "grid", gap: "1" })}>
80 <p className={css({ color: "fg.muted", fontSize: "sm", fontWeight: "medium" })}>
81 Current account
82 </p>
83 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
84 {statementMonth} statement
85 </h1>
86 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
87 {formatDate(account.period.from)} – {formatDate(account.period.to)}
88 </p>
89 </header>
90
91 <Card>
92 <CardHeader>
93 <CardTitle asChild>
94 <h2>Account overview</h2>
95 </CardTitle>
96 <CardDescription>Details for this statement period</CardDescription>
97 </CardHeader>
98 <CardBody>
99 <dl
100 className={css({
101 display: "flex",
102 flexWrap: "wrap",
103 alignItems: "flex-start",
104 justifyContent: "space-between",
105 gap: "6",
106 width: "full",
107 })}
108 >
109 <div>
110 <dt className={labelStyle}>Account holder</dt>
111 <dd className={valueStyle}>{account.holder}</dd>
112 </div>
113 <div>
114 <dt className={labelStyle}>IBAN</dt>
115 <dd className={`${valueStyle} ${css({ overflowWrap: "anywhere" })}`}>
116 {account.iban}
117 </dd>
118 </div>
119 <div className={css({ textAlign: { base: "left", md: "right" } })}>
120 <dt className={labelStyle}>Current balance</dt>
121 <dd
122 className={css({
123 color: "fg.default",
124 fontSize: "lg",
125 fontWeight: "semibold",
126 lineHeight: "tight",
127 whiteSpace: "nowrap",
128 })}
129 >
130 {balanceFormatter.format(account.balance)}
131 </dd>
132 </div>
133 </dl>
134 </CardBody>
135 </Card>
136
137 <Card>
138 <CardHeader>
139 <CardTitle asChild>
140 <h2>Transactions</h2>
141 </CardTitle>
142 <CardDescription>
143 {transactions.length} transactions in {account.currency}. Pending transactions are not final.
144 </CardDescription>
145 </CardHeader>
146 <div className={css({ width: "full", overflowX: "auto" })}>
147 <Table
148 aria-label={`Transactions from ${formatDate(account.period.from)} to ${formatDate(account.period.to)}`}
149 className={css({ width: "full", minWidth: "md" })}
150 >
151 <TableHead>
152 <TableRow>
153 <TableHeader>Date</TableHeader>
154 <TableHeader>Description</TableHeader>
155 <TableHeader>Category</TableHeader>
156 <TableHeader numeric>Amount ({account.currency})</TableHeader>
157 </TableRow>
158 </TableHead>
159 <TableBody>
160 {transactions.map((transaction) => (
161 <TableRow key={transaction.id}>
162 <TableCell className={css({ color: "fg.muted", fontSize: "sm", whiteSpace: "nowrap" })}>
163 <time dateTime={transaction.date}>{formatDate(transaction.date)}</time>
164 </TableCell>
165 <TableCell>
166 <div className={css({ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "2" })}>
167 <span className={css({ fontWeight: "medium" })}>{transaction.description}</span>
168 {transaction.status === "pending" ? <Badge tone="warning">Pending</Badge> : null}
169 </div>
170 </TableCell>
171 <TableCell className={css({ color: "fg.muted", whiteSpace: "nowrap" })}>
172 {transaction.category}
173 </TableCell>
174 <TableCell numeric className={css({ fontWeight: "medium", whiteSpace: "nowrap" })}>
175 {transactionFormatter.format(transaction.amount)}
176 </TableCell>
177 </TableRow>
178 ))}
179 </TableBody>
180 </Table>
181 </div>
182 </Card>
183 </div>
184 </main>
185 );
186 }
187