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,525 133 $0.0002 1 get_component, get_component, get_component, list_tokens 4,879 164 $0.0006 2 write_file 9,602 4,518 $0.0032
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 moneyPlain = new Intl.NumberFormat("en-IE", {
21 style: "currency",
22 currency: account.currency,
23 });
24
25 const moneySigned = new Intl.NumberFormat("en-IE", {
26 style: "currency",
27 currency: account.currency,
28 signDisplay: "exceptZero",
29 });
30
31 const dateFormat = new Intl.DateTimeFormat("en-GB", {
32 day: "2-digit",
33 month: "short",
34 year: "numeric",
35 timeZone: "UTC",
36 });
37
38 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
39
40 const periodLabel = `${formatDate(account.period.from)} – ${formatDate(account.period.to)}`;
41
42 const pendingCount = transactions.filter((tx) => tx.status === "pending").length;
43
44 export default function StatementPage() {
45 return (
46 <main
47 className={`vektos ${css({
48 bg: "bg.canvas",
49 color: "fg.default",
50 p: "6",
51 display: "flex",
52 flexDirection: "column",
53 gap: "6",
54 })}`}
55 >
56 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
57 Account statement, October 2026
58 </h1>
59
60 <Card>
61 <CardHeader>
62 <CardTitle asChild>
63 <h2>{account.holder}</h2>
64 </CardTitle>
65 <CardDescription>Current account · {periodLabel}</CardDescription>
66 </CardHeader>
67 <CardBody>
68 <div
69 className={css({
70 display: "flex",
71 flexWrap: "wrap",
72 gap: "6",
73 justifyContent: "space-between",
74 })}
75 >
76 <div>
77 <p className={css({ fontSize: "sm", color: "fg.muted" })}>IBAN</p>
78 <p className={css({ fontWeight: "medium" })}>{account.iban}</p>
79 </div>
80 <div>
81 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Current balance</p>
82 <p className={css({ fontSize: "lg", fontWeight: "semibold" })}>
83 {moneyPlain.format(account.balance)}
84 </p>
85 </div>
86 </div>
87 </CardBody>
88 </Card>
89
90 <Card>
91 <CardHeader>
92 <CardTitle>Transactions</CardTitle>
93 <CardDescription>
94 {transactions.length} transactions, newest first.
95 {pendingCount > 0
96 ? ` ${pendingCount} pending: not final yet and may change.`
97 : ""}
98 </CardDescription>
99 </CardHeader>
100 <Table aria-label={`Transactions, ${periodLabel}`}>
101 <TableHead>
102 <TableRow>
103 <TableHeader>Date</TableHeader>
104 <TableHeader>Description</TableHeader>
105 <TableHeader>Category</TableHeader>
106 <TableHeader numeric>Amount (EUR)</TableHeader>
107 </TableRow>
108 </TableHead>
109 <TableBody>
110 {transactions.map((tx) => (
111 <TableRow key={tx.id}>
112 <TableCell>
113 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
114 </TableCell>
115 <TableCell>
116 <div className={css({ display: "flex", flexWrap: "wrap", gap: "2", alignItems: "center" })}>
117 <span>{tx.description}</span>
118 {tx.status === "pending" && <Badge tone="warning">Pending</Badge>}
119 </div>
120 </TableCell>
121 <TableCell>{tx.category}</TableCell>
122 <TableCell numeric>
123 <span
124 className={css({
125 color: tx.amount > 0 ? "success.text" : "fg.default",
126 fontWeight: "medium",
127 })}
128 >
129 {moneySigned.format(tx.amount)}
130 </span>
131 </TableCell>
132 </TableRow>
133 ))}
134 </TableBody>
135 </Table>
136 </Card>
137 </main>
138 );
139 }
140