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 get_guidelines, list_components, list_tokens, list_files 120 91 $0.0000 1 read_file 7,302 79 $0.0000 2 read_file 918 60 $0.0000 3
Output cap The provider's default 4 Badge,
5 Card,
6 CardBody,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10 Clipboard,
11 FormatDate,
12 FormatNumber,
13 Heading,
14 LocaleProvider,
15 Stack,
16 Stat,
17 Table,
18 TableBody,
19 TableCell,
20 TableHead,
21 TableHeader,
22 TableRow,
23 Text,
24 } from "@vektos/ds";
25
26 export default function OctoberStatementPage() {
27 const { account, transactions } = data;
28
29 return (
30 <LocaleProvider locale="it-IT">
31 <div
32 className={`vektos ${css({
33 bg: "bg.canvas",
34 color: "fg.default",
35 minHeight: "full",
36 px: { base: "4", md: "8" },
37 py: "8",
38 })}`}
39 >
40 <Stack gap="6">
41 <Stack gap="1">
42 <Heading level={1}>October statement</Heading>
43 <Text tone="muted" size="sm">
44 Current account · {account.holder}
45 </Text>
46 </Stack>
47
48 <Card accent>
49 <CardHeader>
50 <CardTitle>{account.holder}</CardTitle>
51 <CardDescription>
52 Statement period {account.period.from} – {account.period.to}
53 </CardDescription>
54 </CardHeader>
55 <CardBody>
56 <Stack gap="4">
57 <Clipboard label="IBAN" value={account.iban} />
58 <Stat
59 label="Current balance"
60 value={
61 <FormatNumber
62 value={account.balance}
63 format="currency"
64 currency={account.currency}
65 signDisplay="auto"
66 />
67 }
68 size="lg"
69 />
70 </Stack>
71 </CardBody>
72 </Card>
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Transactions</CardTitle>
77 <CardDescription>{transactions.length} transactions</CardDescription>
78 </CardHeader>
79 <Table aria-label="Transactions for October 2026">
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 {tx.description}
96 {tx.status === "pending" ? (
97 <Badge tone="warning" marginInlineStart="2">
98 Pending
99 </Badge>
100 ) : null}
101 </TableCell>
102 <TableCell>{tx.category}</TableCell>
103 <TableCell numeric>
104 <FormatNumber
105 value={tx.amount}
106 format="currency"
107 currency={account.currency}
108 signDisplay="exceptZero"
109 />
110 </TableCell>
111 </TableRow>
112 ))}
113 </TableBody>
114 </Table>
115 </Card>
116 </Stack>
117 </div>
118 </LocaleProvider>
119 );
120 }
4 get_component, get_component, get_component, get_component, get_component 98 226 $0.0000
5 get_component, get_component, get_component, get_component, get_component 12,884 190 $0.0000
6 get_component, get_component 4,911 59 $0.0000
7 write_file 1,702 4,360 $0.0000