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 131 $0.0002 1 get_component, get_component, get_component, list_tokens 4,877 164 $0.0006 2 write_file 9,600 3,302 $0.0026
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 signedMoney = new Intl.NumberFormat("en-GB", {
20 style: "currency",
21 currency: account.currency,
22 signDisplay: "exceptZero",
23 });
24
25 const plainMoney = new Intl.NumberFormat("en-GB", {
26 style: "currency",
27 currency: account.currency,
28 });
29
30 const dateFormat = new Intl.DateTimeFormat("en-GB", {
31 day: "numeric",
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 periodLabel = `${formatDate(account.period.from)} – ${formatDate(account.period.to)}`;
40
41 export default function StatementPage() {
42 return (
43 <main
44 className={css({
45 bg: "bg.canvas",
46 color: "fg.default",
47 minHeight: "full",
48 p: "6",
49 display: "flex",
50 flexDirection: "column",
51 gap: "6",
52 })}
53 >
54 <header
55 className={css({
56 display: "flex",
57 flexWrap: "wrap",
58 justifyContent: "space-between",
59 alignItems: "flex-end",
60 gap: "4",
61 })}
62 >
63 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
64 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Account statement · October 2026</p>
65 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
66 {account.holder}
67 </h1>
68 <p className={css({ fontSize: "sm", color: "fg.muted" })}>IBAN {account.iban}</p>
69 </div>
70 <div className={css({ display: "flex", flexDirection: "column", gap: "1", alignItems: "flex-end" })}>
71 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Current balance</p>
72 <p className={css({ fontSize: "lg", fontWeight: "semibold" })}>
73 {plainMoney.format(account.balance)}
74 </p>
75 </div>
76 </header>
77
78 <Card>
79 <CardHeader>
80 <CardTitle>Transactions</CardTitle>
81 <CardDescription>
82 {periodLabel} · {transactions.length} transactions
83 </CardDescription>
84 </CardHeader>
85 <Table aria-label="Transactions for October 2026" className={css({ marginBlockStart: "4" })}>
86 <TableHead>
87 <TableRow>
88 <TableHeader>Date</TableHeader>
89 <TableHeader>Description</TableHeader>
90 <TableHeader>Category</TableHeader>
91 <TableHeader>Status</TableHeader>
92 <TableHeader numeric>Amount (EUR)</TableHeader>
93 </TableRow>
94 </TableHead>
95 <TableBody>
96 {transactions.map((tx) => (
97 <TableRow key={tx.id}>
98 <TableCell>
99 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
100 </TableCell>
101 <TableCell>{tx.description}</TableCell>
102 <TableCell>{tx.category}</TableCell>
103 <TableCell>
104 {tx.status === "pending" ? (
105 <Badge tone="warning">Pending</Badge>
106 ) : (
107 <span className={css({ color: "fg.muted" })}>Booked</span>
108 )}
109 </TableCell>
110 <TableCell numeric>
111 <span
112 className={css({
113 color: tx.amount > 0 ? "success.text" : "fg.default",
114 fontWeight: "medium",
115 })}
116 >
117 {signedMoney.format(tx.amount)}
118 </span>
119 </TableCell>
120 </TableRow>
121 ))}
122 </TableBody>
123 </Table>
124 </Card>
125 </main>
126 );
127 }
128