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 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 375 30 $0.0000 1 read_file, read_file 419 50 $0.0000 2 get_guidelines, list_components 522 41 $0.0000 3
Output cap The provider's default 4 import {
5 Breadcrumb,
6 Card,
7 CardBody,
8 CardFooter,
9 CardHeader,
10 CardTitle,
11 Clipboard,
12 DataList,
13 FormatDate,
14 FormatNumber,
15 Heading,
16 Link,
17 Stack,
18 Table,
19 TableBody,
20 TableCell,
21 TableHead,
22 TableHeader,
23 TableRow,
24 Text,
25 Toaster,
26 Tooltip,
27 toast,
28 } from "@vektos/ds";
29
30 const account = data.account;
31 const recent = data.recent;
32
33 export default function AccountPage() {
34 return (
35 <Stack gap="6">
36 <Breadcrumb
37 items={[{ label: "Accounts", href: "/accounts" }, { label: account.name }]}
38 />
39 <Heading level={1}>{account.name}</Heading>
40 <Card>
41 <CardHeader>
42 <CardTitle>Account details</CardTitle>
43 </CardHeader>
44 <CardBody>
45 <DataList
46 items={[
47 { label: "Holder", value: account.holder },
48 {
49 label: "IBAN",
50 value: (
51 <Stack flexDirection="row" alignItems="center" gap="2">
52 <Text as="span" mono>
53 {account.iban}
54 </Text>
55 <Stack onClick={() => toast({ title: "Copied", tone: "success" })}>
56 <Tooltip content="Copies the IBAN to the clipboard">
57 <Clipboard label="IBAN" value={account.iban} showValue={false} />
58 </Tooltip>
59 </Stack>
60 </Stack>
61 ),
62 },
63 { label: "BIC", value: <Text as="span" mono>{account.bic}</Text> },
64 {
65 label: "Balance",
66 value: (
67 <FormatNumber
68 value={account.balance}
69 format="currency"
70 currency={account.currency}
71 />
72 ),
73 },
74 {
75 label: "Available balance",
76 value: (
77 <FormatNumber
78 value={account.available}
79 format="currency"
80 currency={account.currency}
81 />
82 ),
83 },
84 ]}
85 />
86 </CardBody>
87 </Card>
88
89 <Card>
90 <CardHeader>
91 <CardTitle>Recent transactions</CardTitle>
92 </CardHeader>
93 <Table aria-label="Recent transactions">
94 <TableHead>
95 <TableRow>
96 <TableHeader>Date</TableHeader>
97 <TableHeader>Description</TableHeader>
98 <TableHeader numeric>Amount</TableHeader>
99 </TableRow>
100 </TableHead>
101 <TableBody>
102 {recent.map((tx) => (
103 <TableRow key={tx.id}>
104 <TableCell>
105 <FormatDate value={tx.date} dateStyle="medium" />
106 </TableCell>
107 <TableCell>{tx.description}</TableCell>
108 <TableCell numeric>
109 <FormatNumber
110 value={tx.amount}
111 format="currency"
112 currency={account.currency}
113 signDisplay="exceptZero"
114 />
115 </TableCell>
116 </TableRow>
117 ))}
118 </TableBody>
119 </Table>
120 <CardFooter>
121 <Link href="/accounts/business/transactions" variant="plain">
122 View all transactions
123 </Link>
124 </CardFooter>
125 </Card>
126 <Toaster />
127 </Stack>
128 );
129 }
130
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 list_files 12,858 761 $0.0000
5 check_code 833 3,491 $0.0000
6 write_file 3,516 2,542 $0.0000
7 list_files 2,626 1,357 $0.0000
8 read_file 1,377 1,079 $0.0000
9 write_file 1,141 1,314 $0.0000
10 check_code 1,391 774 $0.0000
11 write_file 845 1,066 $0.0000
12 check_code 1,103 730 $0.0000