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,717 127 $0.0002 1 get_component, get_component, get_component, list_tokens 5,065 164 $0.0006 2 write_file, check_code 9,788 5,340 $0.0036
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 money = new Intl.NumberFormat("en-GB", {
21 style: "currency",
22 currency: account.currency,
23 signDisplay: "exceptZero",
24 });
25
26 const dateFormat = new Intl.DateTimeFormat("en-GB", {
27 day: "2-digit",
28 month: "short",
29 year: "numeric",
30 timeZone: "UTC",
31 });
32
33 const periodFormat = new Intl.DateTimeFormat("en-GB", {
34 day: "numeric",
35 month: "long",
36 year: "numeric",
37 timeZone: "UTC",
38 });
39
40 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
41 const formatPeriodDate = (iso: string) => periodFormat.format(new Date(`${iso}T00:00:00Z`));
42
43 const dl = css({ display: "grid", gap: "4", gridTemplateColumns: "repeat(auto-fit, minmax(14rem, 1fr))", margin: "0" });
44 const dtStyle = css({ fontSize: "sm", color: "fg.muted" });
45 const ddStyle = css({ margin: "0", fontSize: "lg", fontWeight: "semibold", color: "fg.default" });
46
47 export default function StatementPage() {
48 const periodLabel = `${formatPeriodDate(account.period.from)} to ${formatPeriodDate(account.period.to)}`;
49
50 return (
51 <main
52 className={`vektos ${css({ bg: "bg.canvas", color: "fg.default", minHeight: "full", p: "6", display: "flex", flexDirection: "column", gap: "6" })}`}
53 >
54 <Card>
55 <CardHeader>
56 <CardTitle asChild>
57 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>October 2026 statement</h1>
58 </CardTitle>
59 <CardDescription>Current account · {periodLabel}</CardDescription>
60 </CardHeader>
61 <CardBody>
62 <dl className={dl}>
63 <div>
64 <dt className={dtStyle}>Account holder</dt>
65 <dd className={ddStyle}>{account.holder}</dd>
66 </div>
67 <div>
68 <dt className={dtStyle}>IBAN</dt>
69 <dd className={ddStyle}>{account.iban}</dd>
70 </div>
71 <div>
72 <dt className={dtStyle}>Current balance</dt>
73 <dd className={ddStyle}>
74 {new Intl.NumberFormat("en-GB", { style: "currency", currency: account.currency }).format(account.balance)}
75 </dd>
76 </div>
77 </dl>
78 </CardBody>
79 </Card>
80
81 <Card>
82 <CardHeader>
83 <CardTitle asChild>
84 <h2 className={css({ fontSize: "lg", fontWeight: "semibold" })}>Transactions</h2>
85 </CardTitle>
86 <CardDescription>
87 {transactions.length} transactions, amounts in {account.currency}. Money out is negative.
88 </CardDescription>
89 </CardHeader>
90 <Table aria-label={`Transactions, ${periodLabel}`} className={css({ marginBlockStart: "4" })}>
91 <TableHead>
92 <TableRow>
93 <TableHeader>Date</TableHeader>
94 <TableHeader>Description</TableHeader>
95 <TableHeader>Category</TableHeader>
96 <TableHeader>Status</TableHeader>
97 <TableHeader numeric>Amount ({account.currency})</TableHeader>
98 </TableRow>
99 </TableHead>
100 <TableBody>
101 {transactions.map((tx) => {
102 const pending = tx.status === "pending";
103 return (
104 <TableRow key={tx.id}>
105 <TableCell>
106 <time dateTime={tx.date}>{formatDate(tx.date)}</time>
107 </TableCell>
108 <TableCell>{tx.description}</TableCell>
109 <TableCell>{tx.category}</TableCell>
110 <TableCell>
111 {pending ? (
112 <Badge tone="warning">Pending</Badge>
113 ) : (
114 <Badge tone="neutral">Booked</Badge>
115 )}
116 </TableCell>
117 <TableCell numeric>
118 <span className={css({ fontVariantNumeric: "tabular-nums" })}>{money.format(tx.amount)}</span>
119 </TableCell>
120 </TableRow>
121 );
122 })}
123 </TableBody>
124 </Table>
125 </Card>
126 </main>
127 );
128 }
129