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 2 counted, under 1 rule. “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 120 30 $0.0000 1 read_file, get_guidelines, list_components 164 57 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,888 248 $0.0000
Output cap The provider's default 2
3 import {
4 Badge,
5 Card,
6 CardBody,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10 Clipboard,
11 FormatDate,
12 FormatNumber,
13 Heading,
14 Stack,
15 Table,
16 TableBody,
17 TableCell,
18 TableHead,
19 TableHeader,
20 TableRow,
21 Text,
22 } from "@vektos/ds";
23
24 export default function Page() {
25 const { account, transactions } = data;
26
27 return (
28 <Stack gap="6">
29 <Stack gap="1">
30 <Heading level={1}>October statement</Heading>
31 <Text tone="muted" size="sm">
32 {account.holder} · {account.currency} account ·{" "}
33 <FormatDate value={account.period.from} dateStyle="medium" /> –{" "}
34 <FormatDate value={account.period.to} dateStyle="medium" />
35 </Text>
36 </Stack>
37
38 <Card>
39 <CardHeader>
40 <CardTitle>{account.holder}</CardTitle>
41 <CardDescription>
42 <Stack flexDirection="row" alignItems="center" gap="2">
43 <Text as="span" mono>
44 {account.iban}
45 </Text>
46 <Clipboard label="IBAN" value={account.iban} showValue={false} />
47 </Stack>
48 </CardDescription>
49 </CardHeader>
50 <CardBody>
51 <Stack gap="2">
52 <Text tone="muted" size="sm">
53 Current balance
54 </Text>
55 <Text size="lg" weight="semibold">
56 <FormatNumber
57 value={account.balance}
58 format="currency"
59 currency={account.currency}
60 />
61 </Text>
62 </Stack>
63 </CardBody>
64 </Card>
65
66 <Card>
67 <CardHeader>
68 <CardTitle>Transactions</CardTitle>
69 <CardDescription>
70 {transactions.length} transactions in the period.
71 </CardDescription>
72 </CardHeader>
73 <Table aria-label="October 2026 transactions">
74 <TableHead>
75 <TableRow>
76 <TableHeader>Date</TableHeader>
77 <TableHeader>Description</TableHeader>
78 <TableHeader>Category</TableHeader>
79 <TableHeader numeric>Amount ({account.currency})</TableHeader>
80 </TableRow>
81 </TableHead>
82 <TableBody>
83 {transactions.map((tx) => (
84 <TableRow key={tx.id}>
85 <TableCell>
86 <FormatDate value={tx.date} dateStyle="medium" />
87 </TableCell>
88 <TableCell>
89 <Stack flexDirection="row" alignItems="center" gap="2">
90 <Text as="span">{tx.description}</Text>
91 {tx.status === "pending" && (
92 <Badge tone="warning">Pending</Badge>
93 )}
94 </Stack>
95 </TableCell>
96 <TableCell>{tx.category}</TableCell>
97 <TableCell numeric>
98 <FormatNumber
99 value={tx.amount}
100 format="currency"
101 currency={account.currency}
102 signDisplay="exceptZero"
103 />
104 </TableCell>
105 </TableRow>
106 ))}
107 </TableBody>
108 </Table>
109 </Card>
110 </Stack>
111 );
112 }
113
3 list_tokens, list_files 10,845 53 $0.0000
5 write_file 134 4,124 $0.0000