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