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 1 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 get_guidelines, read_file, list_components 1,525 132 $0.0002 1 get_component, get_component, get_component, list_tokens 4,878 164 $0.0006 2 write_file 9,601 3,540 $0.0027
Output cap The provider's default 4 CardDescription,
5 CardHeader,
6 CardTitle,
7 Table,
8 TableBody,
9 TableCell,
10 TableHead,
11 TableHeader,
12 TableRow,
13 } from "@vektos/ds";
14 import { css } from "styled-system/css";
15 import data from "./fixture.json";
16
17 const { account, transactions } = data;
18
19 const money = new Intl.NumberFormat("en-GB", {
20 style: "currency",
21 currency: account.currency,
22 });
23
24 const signedMoney = new Intl.NumberFormat("en-GB", {
25 style: "currency",
26 currency: account.currency,
27 signDisplay: "exceptZero",
28 });
29
30 const dateFormat = new Intl.DateTimeFormat("en-GB", {
31 day: "2-digit",
32 month: "short",
33 year: "numeric",
34 timeZone: "UTC",
35 });
36
37 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
38
39 const pendingCount = transactions.filter((tx) => tx.status === "pending").length;
40
41 export default function StatementPage() {
42 return (
43 <main
44 className={`vektos ${css({
45 minHeight: "100vh",
46 bg: "bg.canvas",
47 color: "fg.default",
48 p: "6",
49 display: "flex",
50 flexDirection: "column",
51 gap: "6",
52 })}`}
53 >
54 <header
55 className={css({
56 display: "flex",
57 flexDirection: "column",
58 gap: "2",
59 })}
60 >
61 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
62 Statement period {formatDate(account.period.from)} – {formatDate(account.period.to)}
63 </p>
64 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>October 2026 statement</h1>
65 <p className={css({ fontSize: "md" })}>{account.holder}</p>
66 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
67 IBAN <span className={css({ color: "fg.default", fontWeight: "medium" })}>{account.iban}</span>
68 </p>
69 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
70 Current balance{" "}
71 <span
72 className={css({
73 color: "fg.default",
74 fontSize: "lg",
75 fontWeight: "semibold",
76 })}
77 >
78 {money.format(account.balance)}
79 </span>
80 </p>
81 </header>
82
83 <Card>
84 <CardHeader>
85 <CardTitle asChild>
86 <h2>Transactions</h2>
87 </CardTitle>
88 <CardDescription>
89 {transactions.length} transactions, {pendingCount} pending. Pending amounts may still change.
90 </CardDescription>
91 </CardHeader>
92 <Table aria-label={`Transactions for ${formatDate(account.period.from)} to ${formatDate(account.period.to)}`}>
93 <TableHead>
94 <TableRow>
95 <TableHeader>Date</TableHeader>
96 <TableHeader>Description</TableHeader>
97 <TableHeader>Category</TableHeader>
98 <TableHeader numeric>Amount ({account.currency})</TableHeader>
99 </TableRow>
100 </TableHead>
101 <TableBody>
102 {transactions.map((tx) => (
103 <TableRow key={tx.id}>
104 <TableCell className={css({ whiteSpace: "nowrap" })}>
105 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
106 </TableCell>
107 <TableCell>
108 <span className={css({ display: "inline-flex", gap: "2", alignItems: "center", flexWrap: "wrap" })}>
109 {tx.description}
110 {tx.status === "pending" && <Badge tone="warning">Pending</Badge>}
111 </span>
112 </TableCell>
113 <TableCell className={css({ color: "fg.muted" })}>{tx.category}</TableCell>
114 <TableCell numeric>{signedMoney.format(tx.amount)}</TableCell>
115 </TableRow>
116 ))}
117 </TableBody>
118 </Table>
119 </Card>
120 </main>
121 );
122 }
123