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 137 113 $0.0000 1 read_file 7,213 31 $0.0000 2 read_file, get_component, get_component, get_component 909 90 $0.0000
Output cap The provider's default 4 Breadcrumb,
5 Card,
6 CardBody,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10 Clipboard,
11 DataList,
12 FormatDate,
13 FormatNumber,
14 Heading,
15 LocaleProvider,
16 Stack,
17 Table,
18 TableBody,
19 TableCell,
20 TableHead,
21 TableHeader,
22 TableRow,
23 Text,
24 } from "@vektos/ds";
25 import { css } from "styled-system/css";
26
27 export default function Page() {
28 const { account, transactions } = data;
29
30 return (
31 <LocaleProvider locale="it-IT">
32 <div
33 className={
34 "vektos " +
35 css({ bg: "bg.canvas", minHeight: "full", px: "4", py: "6" })
36 }
37 >
38 <Stack gap="6" maxWidth="page" marginInline="auto">
39 <Breadcrumb
40 items={[
41 { label: "Accounts", href: "#accounts" },
42 { label: "Business current account", href: "#account" },
43 { label: "Statements", href: "#statements" },
44 { label: "October 2026" },
45 ]}
46 />
47
48 <Heading level={1}>October 2026 statement</Heading>
49
50 <Card>
51 <CardHeader>
52 <CardTitle>Account details</CardTitle>
53 <CardDescription>
54 <FormatDate value={account.period.from} dateStyle="long" /> –{" "}
55 <FormatDate value={account.period.to} dateStyle="long" />
56 </CardDescription>
57 </CardHeader>
58 <CardBody>
59 <DataList
60 items={[
61 { label: "Account holder", value: account.holder },
62 {
63 label: "IBAN",
64 value: (
65 <Stack flexDirection="row" alignItems="center" gap="2">
66 <Text mono>{account.iban}</Text>
67 <Clipboard
68 label="IBAN"
69 value={account.iban}
70 showValue={false}
71 />
72 </Stack>
73 ),
74 },
75 {
76 label: "Current balance",
77 value: (
78 <FormatNumber
79 value={account.balance}
80 format="currency"
81 currency={account.currency}
82 />
83 ),
84 },
85 ]}
86 />
87 </CardBody>
88 </Card>
89
90 <Card>
91 <CardHeader>
92 <CardTitle>Transactions</CardTitle>
93 <CardDescription>
94 {transactions.length} transactions in this period.
95 </CardDescription>
96 </CardHeader>
97 <Table aria-label="October 2026 transactions">
98 <TableHead>
99 <TableRow>
100 <TableHeader>Date</TableHeader>
101 <TableHeader>Description</TableHeader>
102 <TableHeader>Category</TableHeader>
103 <TableHeader numeric>Amount ({account.currency})</TableHeader>
104 </TableRow>
105 </TableHead>
106 <TableBody>
107 {transactions.map((tx) => (
108 <TableRow key={tx.id}>
109 <TableCell>
110 <FormatDate value={tx.date} dateStyle="medium" />
111 </TableCell>
112 <TableCell>
113 <Stack
114 flexDirection="row"
115 alignItems="center"
116 gap="2"
117 flexWrap="wrap"
118 >
119 <Text>{tx.description}</Text>
120 {tx.status === "pending" ? (
121 <Badge tone="warning">Pending</Badge>
122 ) : null}
123 </Stack>
124 </TableCell>
125 <TableCell>{tx.category}</TableCell>
126 <TableCell numeric>
127 <FormatNumber
128 value={tx.amount}
129 format="currency"
130 currency={account.currency}
131 signDisplay="exceptZero"
132 />
133 </TableCell>
134 </TableRow>
135 ))}
136 </TableBody>
137 </Table>
138 </Card>
139 </Stack>
140 </div>
141 </LocaleProvider>
142 );
143 }
get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component 6,356 204 $0.0000
5 write_file 3,424 4,906 $0.0000
6 check_code 4,962 850 $0.0000