Runs / payment-approval 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, get_guidelines, list_components 150 89 $0.0000 1 read_file 5,151 33 $0.0000 2 list_files 547 41 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardHeader,
10 CardTitle,
11 DataList,
12 Dialog,
13 DialogClose,
14 DialogContent,
15 DialogFooter,
16 DialogTrigger,
17 EmptyState,
18 FormatDate,
19 FormatNumber,
20 Heading,
21 Stack,
22 Table,
23 TableBody,
24 TableCell,
25 TableHead,
26 TableHeader,
27 TableRow,
28 Text,
29 } from "@vektos/ds";
30
31 type Payment = (typeof data.payments)[number];
32
33 export default function Page() {
34 const [approved, setApproved] = useState<Set<string>>(new Set());
35
36 const markApproved = (id: string) => {
37 setApproved((prev) => {
38 const next = new Set(prev);
39 next.add(id);
40 return next;
41 });
42 };
43
44 return (
45 <Stack gap="6" marginBlock="6" marginInline="6">
46 <Heading level={1}>Payments awaiting approval</Heading>
47 <Card>
48 <CardHeader>
49 <CardTitle>Pending payments</CardTitle>
50 </CardHeader>
51 {data.payments.length === 0 ? (
52 <EmptyState
53 title="No payments to approve"
54 description="New payments appear here when a colleague sends them for approval."
55 />
56 ) : (
57 <Table aria-label="Payments awaiting approval">
58 <TableHead>
59 <TableRow>
60 <TableHeader>Beneficiary</TableHeader>
61 <TableHeader>IBAN</TableHeader>
62 <TableHeader>Due date</TableHeader>
63 <TableHeader numeric>Amount ({data.currency})</TableHeader>
64 <TableHeader>Actions</TableHeader>
65 </TableRow>
66 </TableHead>
67 <TableBody>
68 {data.payments.map((payment: Payment) => {
69 const isApproved = approved.has(payment.id);
70 const fee = data.fees[payment.scheme as keyof typeof data.fees];
71 const total = payment.amount + fee;
72 return (
73 <TableRow key={payment.id}>
74 <TableCell>{payment.beneficiary}</TableCell>
75 <TableCell>
76 <Text as="span" mono size="sm">
77 {payment.iban}
78 </Text>
79 </TableCell>
80 <TableCell>
81 <FormatDate value={payment.dueDate} dateStyle="medium" />
82 </TableCell>
83 <TableCell numeric>
84 <FormatNumber
85 value={payment.amount}
86 format="currency"
87 currency={data.currency}
88 />
89 </TableCell>
90 <TableCell>
91 {isApproved ? (
92 <Badge tone="success">Approved</Badge>
93 ) : (
94 <Dialog>
95 <DialogTrigger asChild>
96 <Button size="sm" variant="outline">
97 Approve
98 </Button>
99 </DialogTrigger>
100 <DialogContent
101 title="Approve payment"
102 description="Review the details before confirming."
103 >
104 <DataList
105 items={[
106 { label: "Beneficiary", value: payment.beneficiary },
107 {
108 label: "IBAN",
109 value: (
110 <Text as="span" mono size="sm">
111 {payment.iban}
112 </Text>
113 ),
114 },
115 {
116 label: "Amount",
117 value: (
118 <FormatNumber
119 value={payment.amount}
120 format="currency"
121 currency={data.currency}
122 />
123 ),
124 },
125 {
126 label: `Fee (${payment.scheme})`,
127 value: (
128 <FormatNumber
129 value={fee}
130 format="currency"
131 currency={data.currency}
132 />
133 ),
134 },
135 {
136 label: "Total",
137 value: (
138 <Text as="span" weight="semibold">
139 <FormatNumber
140 value={total}
141 format="currency"
142 currency={data.currency}
143 />
144 </Text>
145 ),
146 },
147 ]}
148 />
149 <DialogFooter>
150 <DialogClose asChild>
151 <Button variant="outline">Cancel</Button>
152 </DialogClose>
153 <DialogClose asChild>
154 <Button onClick={() => markApproved(payment.id)}>
155 Confirm
156 </Button>
157 </DialogClose>
158 </DialogFooter>
159 </DialogContent>
160 </Dialog>
161 )}
162 </TableCell>
163 </TableRow>
164 );
165 })}
166 </TableBody>
167 </Table>
168 )}
169 </Card>
170 </Stack>
171 );
172 }
173
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, get_component, get_component 6,142 194 $0.0000
5 list_tokens, list_tokens 6,044 61 $0.0000
6 write_file 1,269 3,851 $0.0000
7 check_code 3,928 977 $0.0000