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