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 list_files, get_guidelines, list_components 56 61 $0.0000 1 read_file, list_tokens 5,029 49 $0.0000 2 list_tokens, list_tokens, list_tokens, list_tokens, list_tokens 1,902 141 $0.0000
Output cap The provider's default 4 import {
5 Badge,
6 Card,
7 CardHeader,
8 CardTitle,
9 Clipboard,
10 DataList,
11 FormatDate,
12 FormatNumber,
13 Heading,
14 Stack,
15 Table,
16 TableBody,
17 TableCell,
18 TableHead,
19 TableHeader,
20 TableRow,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 const { account, transactions } = data;
25
26 export default function Page() {
27 return (
28 <div
29 className={
30 css({
31 bg: "bg.canvas",
32 color: "fg.default",
33 minH: "100vh",
34 py: "8",
35 px: { base: "4", md: "8" },
36 }) + " vektos"
37 }
38 >
39 <Stack gap="6" maxWidth="page" marginInline="auto" width="full">
40 <Heading level={1}>October 2026 statement</Heading>
41
42 <Card>
43 <CardHeader>
44 <CardTitle>Account details</CardTitle>
45 </CardHeader>
46 <DataList
47 items={[
48 { label: "Account holder", value: account.holder },
49 {
50 label: "IBAN",
51 value: <Clipboard label="IBAN" value={account.iban} />,
52 },
53 {
54 label: "Current balance",
55 value: (
56 <FormatNumber
57 value={account.balance}
58 format="currency"
59 currency={account.currency}
60 />
61 ),
62 },
63 ]}
64 />
65 </Card>
66
67 <Card>
68 <CardHeader>
69 <CardTitle>Transactions</CardTitle>
70 </CardHeader>
71 <Table aria-label="October 2026 transactions">
72 <TableHead>
73 <TableRow>
74 <TableHeader>Date</TableHeader>
75 <TableHeader>Description</TableHeader>
76 <TableHeader>Category</TableHeader>
77 <TableHeader>Status</TableHeader>
78 <TableHeader numeric>Amount ({account.currency})</TableHeader>
79 </TableRow>
80 </TableHead>
81 <TableBody>
82 {transactions.map((tx) => (
83 <TableRow key={tx.id}>
84 <TableCell>
85 <FormatDate value={tx.date} dateStyle="medium" />
86 </TableCell>
87 <TableCell>{tx.description}</TableCell>
88 <TableCell>{tx.category}</TableCell>
89 <TableCell>
90 {tx.status === "pending" ? (
91 <Badge tone="warning">Pending</Badge>
92 ) : (
93 <Badge tone="success">Booked</Badge>
94 )}
95 </TableCell>
96 <TableCell numeric>
97 <FormatNumber
98 value={tx.amount}
99 format="currency"
100 currency={account.currency}
101 />
102 </TableCell>
103 </TableRow>
104 ))}
105 </TableBody>
106 </Table>
107 </Card>
108 </Stack>
109 </div>
110 );
111 }
112
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 read_file 10,839 38 $0.0000
5 write_file 83 3,653 $0.0000
6 write_file 3,696 796 $0.0000