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