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 get_guidelines, list_components, list_files 713 79 $0.0000 1 read_file, list_files 5,000 46 $0.0000 2 list_files 899 42 $0.0000 3
Output cap 20,000 tokens a step 3 Badge,
4 Card,
5 CardBody,
6 CardDescription,
7 CardHeader,
8 CardTitle,
9 Clipboard,
10 DataList,
11 FormatDate,
12 FormatNumber,
13 Heading,
14 LocaleProvider,
15 Stack,
16 Table,
17 TableBody,
18 TableCell,
19 TableHead,
20 TableHeader,
21 TableRow,
22 Text,
23 } from "@vektos/ds";
24
25 const { account, transactions } = data;
26
27 export default function Page() {
28 return (
29 <LocaleProvider locale="it-IT">
30 <div className="vektos">
31 <Stack gap="6" margin="6">
32 <Heading level={1}>October statement</Heading>
33
34 <Card>
35 <CardHeader>
36 <CardTitle>Current account</CardTitle>
37 <CardDescription>
38 {account.period.from} – {account.period.to}
39 </CardDescription>
40 </CardHeader>
41 <CardBody>
42 <DataList
43 items={[
44 { label: "Account holder", value: account.holder },
45 {
46 label: "IBAN",
47 value: (
48 <Stack flexDirection="row" alignItems="center" gap="2">
49 <Text mono>{account.iban}</Text>
50 <Clipboard
51 label="IBAN"
52 value={account.iban}
53 showValue={false}
54 />
55 </Stack>
56 ),
57 },
58 {
59 label: "Current balance",
60 value: (
61 <FormatNumber
62 value={account.balance}
63 format="currency"
64 currency={account.currency}
65 signDisplay="exceptZero"
66 />
67 ),
68 },
69 ]}
70 />
71 </CardBody>
72 </Card>
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Transactions</CardTitle>
77 <CardDescription>October 2026</CardDescription>
78 </CardHeader>
79 <Table aria-label="October transactions">
80 <TableHead>
81 <TableRow>
82 <TableHeader>Date</TableHeader>
83 <TableHeader>Description</TableHeader>
84 <TableHeader>Category</TableHeader>
85 <TableHeader numeric>Amount ({account.currency})</TableHeader>
86 </TableRow>
87 </TableHead>
88 <TableBody>
89 {transactions.map((tx) => (
90 <TableRow key={tx.id}>
91 <TableCell>
92 <FormatDate value={tx.date} dateStyle="medium" />
93 </TableCell>
94 <TableCell>
95 <Stack flexDirection="row" alignItems="center" gap="2">
96 <Text>{tx.description}</Text>
97 {tx.status === "pending" ? (
98 <Badge tone="warning" marginInlineStart="2">
99 Pending
100 </Badge>
101 ) : null}
102 </Stack>
103 </TableCell>
104 <TableCell>{tx.category}</TableCell>
105 <TableCell numeric>
106 <FormatNumber
107 value={tx.amount}
108 format="currency"
109 currency={account.currency}
110 signDisplay="exceptZero"
111 />
112 </TableCell>
113 </TableRow>
114 ))}
115 </TableBody>
116 </Table>
117 </Card>
118 </Stack>
119 </div>
120 </LocaleProvider>
121 );
122 }
123
4 read_file, read_file 6,710 56 $0.0000
5 list_files 6,809 40 $0.0000
6 list_tokens, get_component, get_component 79 113 $0.0000
7 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 3,382 193 $0.0000
8 list_tokens, list_tokens, list_tokens 11,238 159 $0.0000
9 list_tokens, list_tokens 715 48 $0.0000
10 write_file 18,591 3,771 $0.0000
11 check_code 3,826 707 $0.0000
12 write_file 781 764 $0.0000
13 check_code 801 701 $0.0000