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 62 $0.0000 1 read_file, get_guidelines 107 44 $0.0000 2 list_components, list_tokens 3,426 40 $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 Grid,
14 Heading,
15 LocaleProvider,
16 Stack,
17 Stat,
18 Table,
19 TableBody,
20 TableCell,
21 TableHead,
22 TableHeader,
23 TableRow,
24 Text,
25 } from "@vektos/ds";
26
27 export default function OctoberStatementPage() {
28 const { account, transactions } = data;
29
30 return (
31 <LocaleProvider locale="it-IT">
32 <Stack gap="6" margin="6">
33 <Stack gap="1">
34 <Heading level={1}>October statement</Heading>
35 <Text tone="muted" size="sm">
36 Statement period:{" "}
37 <FormatDate value={account.period.from} dateStyle="medium" /> to{" "}
38 <FormatDate value={account.period.to} dateStyle="medium" />
39 </Text>
40 </Stack>
41
42 <Grid gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }} gap="4">
43 <Card>
44 <CardHeader>
45 <CardTitle>Account</CardTitle>
46 <CardDescription>{account.holder}</CardDescription>
47 </CardHeader>
48 <CardBody>
49 <DataList
50 items={[
51 { label: "Account holder", value: account.holder },
52 {
53 label: "IBAN",
54 value: (
55 <Stack flexDirection="row" alignItems="center" gap="2">
56 <Text as="span" mono>
57 {account.iban}
58 </Text>
59 <Clipboard label="IBAN" value={account.iban} showValue={false} />
60 </Stack>
61 ),
62 },
63 { label: "Currency", value: account.currency },
64 ]}
65 />
66 </CardBody>
67 </Card>
68
69 <Card accent>
70 <CardBody>
71 <Stat
72 label="Current balance"
73 value={
74 <FormatNumber
75 value={account.balance}
76 format="currency"
77 currency={account.currency}
78 signDisplay="exceptZero"
79 />
80 }
81 size="lg"
82 />
83 </CardBody>
84 </Card>
85 </Grid>
86
87 <Card>
88 <CardHeader>
89 <CardTitle>Transactions</CardTitle>
90 <CardDescription>{transactions.length} transactions</CardDescription>
91 </CardHeader>
92 <Table aria-label="Transactions">
93 <TableHead>
94 <TableRow>
95 <TableHeader>Date</TableHeader>
96 <TableHeader>Description</TableHeader>
97 <TableHeader>Category</TableHeader>
98 <TableHeader numeric>Amount ({account.currency})</TableHeader>
99 </TableRow>
100 </TableHead>
101 <TableBody>
102 {transactions.map((tx) => (
103 <TableRow key={tx.id}>
104 <TableCell>
105 <FormatDate value={tx.date} dateStyle="medium" />
106 </TableCell>
107 <TableCell>
108 <Stack flexDirection="row" alignItems="center" gap="2" flexWrap="wrap">
109 <Text as="span">{tx.description}</Text>
110 {tx.status === "pending" && (
111 <Badge tone="warning">Pending</Badge>
112 )}
113 </Stack>
114 </TableCell>
115 <TableCell>
116 <Text as="span" tone="muted" size="sm">
117 {tx.category}
118 </Text>
119 </TableCell>
120 <TableCell numeric>
121 <FormatNumber
122 value={tx.amount}
123 format="currency"
124 currency={account.currency}
125 signDisplay="exceptZero"
126 />
127 </TableCell>
128 </TableRow>
129 ))}
130 </TableBody>
131 </Table>
132 </Card>
133 </Stack>
134 </LocaleProvider>
135 );
136 }
137
get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 6,107 127 $0.0000
5 list_files 4,856 38 $0.0000
9 write_file 142 4,042 $0.0000
10 check_code 22,192 836 $0.0000