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 list_files 95 31 $0.0000 1 read_file, get_guidelines 140 45 $0.0000 2 list_components 3,396 23 $0.0000 3
Output cap The provider's default 4 Card,
5 CardBody,
6 CardDescription,
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 Text,
22 } from "@vektos/ds";
23
24 const { account, transactions } = data;
25
26 export default function Page() {
27 return (
28 <Stack gap="6" marginBlock="8" marginInline="auto" maxWidth="page">
29 <Stack gap="1">
30 <Heading level={1}>Current account statement</Heading>
31 <Text tone="muted" size="sm">
32 {account.holder} · October 2026
33 </Text>
34 </Stack>
35
36 <Card>
37 <CardHeader>
38 <CardTitle>Account details</CardTitle>
39 <CardDescription>Current account.</CardDescription>
40 </CardHeader>
41 <CardBody>
42 <DataList
43 items={[
44 { label: "Account holder", value: account.holder },
45 {
46 label: "IBAN",
47 value: <Clipboard label="IBAN" value={account.iban} />,
48 },
49 {
50 label: "Current balance",
51 value: (
52 <FormatNumber
53 value={account.balance}
54 format="currency"
55 currency={account.currency}
56 />
57 ),
58 },
59 ]}
60 />
61 </CardBody>
62 </Card>
63
64 <Card>
65 <CardHeader>
66 <CardTitle>Transactions</CardTitle>
67 <CardDescription>
68 {transactions.length} transactions in October 2026.
69 </CardDescription>
70 </CardHeader>
71 <Table aria-label="Transactions for October 2026">
72 <TableHead>
73 <TableRow>
74 <TableHeader>Date</TableHeader>
75 <TableHeader>Description</TableHeader>
76 <TableHeader>Category</TableHeader>
77 <TableHeader numeric>Amount ({account.currency})</TableHeader>
78 </TableRow>
79 </TableHead>
80 <TableBody>
81 {transactions.map((tx) => (
82 <TableRow key={tx.id}>
83 <TableCell>
84 <FormatDate value={tx.date} dateStyle="medium" />
85 </TableCell>
86 <TableCell>
87 {tx.description}
88 {tx.status === "pending" ? (
89 <Badge tone="warning" marginInlineStart="2">
90 Pending
91 </Badge>
92 ) : null}
93 </TableCell>
94 <TableCell>{tx.category}</TableCell>
95 <TableCell numeric>
96 <FormatNumber
97 value={tx.amount}
98 format="currency"
99 currency={account.currency}
100 />
101 </TableCell>
102 </TableRow>
103 ))}
104 </TableBody>
105 </Table>
106 </Card>
107 </Stack>
108 );
109 }
110
get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,157 151 $0.0000
5 list_tokens, list_tokens 5,811 43 $0.0000
6 list_files 1,274 30 $0.0000
7 list_tokens, list_tokens, list_tokens 102 480 $0.0000
10 write_file 151 2,782 $0.0000
11 check_code 2,829 638 $0.0000
12 write_file 666 1,517 $0.0000
13 check_code 24,223 640 $0.0000