Runs / account-details 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 1 counted, under 1 rule. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
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 2,171 30 $0.0000 1 read_file 103 34 $0.0000 2 docs-list 490 29 $0.0000 3
Output cap The provider's default 4 import { css } from "styled-system/css";
5 import {
6 Breadcrumb,
7 Card,
8 CardBody,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 DataList,
13 FormatDate,
14 FormatNumber,
15 Heading,
16 IconButton,
17 Link,
18 Stack,
19 Table,
20 TableBody,
21 TableCell,
22 TableHead,
23 TableHeader,
24 TableRow,
25 Text,
26 Toaster,
27 Tooltip,
28 toast,
29 } from "@vektos/ds";
30
31 export default function AccountPage() {
32 const { account, recent } = data;
33
34 const copyIban = async () => {
35 try {
36 await navigator.clipboard.writeText(account.iban);
37 } catch {
38 // ignore
39 }
40 toast({ title: "Copied", tone: "success" });
41 };
42
43 return (
44 <>
45 <Stack gap="6">
46 <Breadcrumb
47 items={[{ label: "Accounts", href: "/accounts" }, { label: account.name }]}
48 />
49 <Heading level={1}>{account.name}</Heading>
50
51 <Card>
52 <CardHeader>
53 <CardTitle>Account details</CardTitle>
54 </CardHeader>
55 <CardBody>
56 <DataList
57 items={[
58 { label: "Holder", value: account.holder },
59 {
60 label: "IBAN",
61 value: (
62 <Stack flexDirection="row" alignItems="center" gap="2">
63 <Text mono>{account.iban}</Text>
64 <Tooltip content="Copies the IBAN to the clipboard">
65 <IconButton aria-label="Copy IBAN" onClick={copyIban}>
66 <svg
67 width="16"
68 height="16"
69 viewBox="0 0 16 16"
70 fill="none"
71 aria-hidden="true"
72 >
73 <rect
74 x="5"
75 y="5"
76 width="8"
77 height="8"
78 rx="1"
79 stroke="currentColor"
80 strokeWidth="1.5"
81 />
82 <path
83 d="M3 11V3h8"
84 stroke="currentColor"
85 strokeWidth="1.5"
86 strokeLinecap="round"
87 strokeLinejoin="round"
88 />
89 </svg>
90 </IconButton>
91 </Tooltip>
92 </Stack>
93 ),
94 },
95 { label: "BIC", value: account.bic },
96 {
97 label: "Balance",
98 value: (
99 <FormatNumber
100 value={account.balance}
101 format="currency"
102 currency={account.currency}
103 />
104 ),
105 },
106 {
107 label: "Available balance",
108 value: (
109 <FormatNumber
110 value={account.available}
111 format="currency"
112 currency={account.currency}
113 />
114 ),
115 },
116 ]}
117 />
118 </CardBody>
119 </Card>
120
121 <Card>
122 <CardHeader>
123 <CardTitle>Recent transactions</CardTitle>
124 </CardHeader>
125 <Table aria-label="Recent transactions">
126 <TableHead>
127 <TableRow>
128 <TableHeader>Date</TableHeader>
129 <TableHeader>Description</TableHeader>
130 <TableHeader numeric>Amount</TableHeader>
131 </TableRow>
132 </TableHead>
133 <TableBody>
134 {recent.map((tx) => (
135 <TableRow key={tx.id}>
136 <TableCell>
137 <FormatDate value={tx.date} dateStyle="medium" />
138 </TableCell>
139 <TableCell>{tx.description}</TableCell>
140 <TableCell numeric>
141 <FormatNumber
142 value={tx.amount}
143 format="currency"
144 currency={account.currency}
145 signDisplay="exceptZero"
146 />
147 </TableCell>
148 </TableRow>
149 ))}
150 </TableBody>
151 </Table>
152 <CardFooter>
153 <Link href="/accounts/business/transactions" variant="plain">
154 View all transactions
155 </Link>
156 </CardFooter>
157 </Card>
158 </Stack>
159 <Toaster />
160 </>
161 );
162 }
docs-show, docs-show, docs-show, docs-show
4 docs-show, docs-show, docs-show, docs-show 3,466 103 $0.0000
5 docs-show, docs-show, docs-show, docs-show 3,488 94 $0.0000
6 docs-show, docs-show, docs-show 3,038 437 $0.0000
7 list_files 2,132 386 $0.0000
10 read_file 144 1,891 $0.0000
11 read_file 1,936 68 $0.0000
13 write_file 105 2,350 $0.0000