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 126 $0.0002 1 get_component, get_component, get_component, list_tokens 5,064 164 $0.0006 2 write_file, check_code 9,787 3,924 $0.0029
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 type Transaction = (typeof data.transactions)[number];
19
20 const { account, transactions } = data;
21
22 const money = new Intl.NumberFormat("it-IT", {
23 style: "currency",
24 currency: account.currency,
25 });
26
27 const dateFormat = new Intl.DateTimeFormat("en-GB", {
28 day: "2-digit",
29 month: "short",
30 year: "numeric",
31 timeZone: "UTC",
32 });
33
34 function formatDate(iso: string): string {
35 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
36 }
37
38 function StatusBadge({ status }: { status: Transaction["status"] }) {
39 if (status === "pending") {
40 return <Badge tone="warning">Pending</Badge>;
41 }
42 return <Badge tone="success">Booked</Badge>;
43 }
44
45 export default function Page() {
46 return (
47 <main
48 className={`vektos ${css({
49 bg: "bg.canvas",
50 color: "fg.default",
51 px: "4",
52 py: "8",
53 })}`}
54 >
55 <div
56 className={css({
57 maxWidth: "lg",
58 marginInline: "auto",
59 display: "flex",
60 flexDirection: "column",
61 gap: "6",
62 })}
63 >
64 <header className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
65 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
66 Account statement
67 </h1>
68 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
69 Period {formatDate(account.period.from)} to {formatDate(account.period.to)}
70 </p>
71 </header>
72
73 <Card>
74 <CardHeader>
75 <CardTitle>{account.holder}</CardTitle>
76 <CardDescription>{account.iban}</CardDescription>
77 </CardHeader>
78 <CardBody>
79 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Current balance</p>
80 <p
81 className={css({
82 fontSize: "lg",
83 fontWeight: "semibold",
84 fontVariantNumeric: "tabular-nums",
85 })}
86 >
87 {money.format(account.balance)}
88 </p>
89 </CardBody>
90 </Card>
91
92 <Card>
93 <CardHeader>
94 <CardTitle>Transactions</CardTitle>
95 <CardDescription>
96 {transactions.length} transactions in October 2026. Pending transactions are not final yet.
97 </CardDescription>
98 </CardHeader>
99 <Table aria-label="Transactions for October 2026" className={css({ marginBlockStart: "4" })}>
100 <TableHead>
101 <TableRow>
102 <TableHeader>Date</TableHeader>
103 <TableHeader>Description</TableHeader>
104 <TableHeader>Category</TableHeader>
105 <TableHeader>Status</TableHeader>
106 <TableHeader numeric>Amount</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>{tx.description}</TableCell>
116 <TableCell>{tx.category}</TableCell>
117 <TableCell>
118 <StatusBadge status={tx.status} />
119 </TableCell>
120 <TableCell numeric>{money.format(tx.amount)}</TableCell>
121 </TableRow>
122 ))}
123 </TableBody>
124 </Table>
125 </Card>
126 </div>
127 </main>
128 );
129 }
130