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 2 counted, under 2 rules. “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 133 33 $0.0000 1 read_file 52 29 $0.0000 2 get_guidelines, list_components 692 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 CardDescription,
10 CardHeader,
11 CardTitle,
12 DataList,
13 Dialog,
14 DialogContent,
15 DialogFooter,
16 FormatDate,
17 FormatNumber,
18 Heading,
19 LocaleProvider,
20 Stack,
21 Table,
22 TableBody,
23 TableCell,
24 TableHead,
25 TableHeader,
26 TableRow,
27 Text,
28 } from "@vektos/ds";
29
30 type Payment = (typeof data.payments)[number];
31 type Scheme = keyof typeof data.fees;
32
33 export default function Page() {
34 const [approved, setApproved] = useState<Set<string>>(new Set());
35 const [approvingId, setApprovingId] = useState<string | null>(null);
36
37 const currency = data.currency;
38 const approving = data.payments.find((p) => p.id === approvingId) ?? null;
39
40 const feeFor = (scheme: string) =>
41 data.fees[scheme as Scheme] ?? 0;
42
43 const handleConfirm = () => {
44 if (approvingId) {
45 setApproved((prev) => new Set(prev).add(approvingId));
46 }
47 setApprovingId(null);
48 };
49
50 return (
51 <LocaleProvider locale="en-IE">
52 <main className="vektos">
53 <Stack gap="6" marginBlock="6">
54 <Heading level={1}>Payments waiting for approval</Heading>
55 <Card>
56 <CardHeader>
57 <CardTitle>Company payments</CardTitle>
58 <CardDescription>
59 Review each payment and approve it.
60 </CardDescription>
61 </CardHeader>
62 <Table aria-label="Payments waiting for approval">
63 <TableHead>
64 <TableRow>
65 <TableHeader>Beneficiary</TableHeader>
66 <TableHeader>IBAN</TableHeader>
67 <TableHeader>Due date</TableHeader>
68 <TableHeader numeric>Amount</TableHeader>
69 <TableHeader>Action</TableHeader>
70 </TableRow>
71 </TableHead>
72 <TableBody>
73 {data.payments.map((payment: Payment) => {
74 const isApproved = approved.has(payment.id);
75 return (
76 <TableRow key={payment.id}>
77 <TableCell>{payment.beneficiary}</TableCell>
78 <TableCell>
79 <Text as="span" mono>
80 {payment.iban}
81 </Text>
82 </TableCell>
83 <TableCell>
84 <FormatDate value={payment.dueDate} dateStyle="medium" />
85 </TableCell>
86 <TableCell numeric>
87 <FormatNumber
88 value={payment.amount}
89 format="currency"
90 currency={currency}
91 />
92 </TableCell>
93 <TableCell>
94 {isApproved ? (
95 <Badge tone="success">Approved</Badge>
96 ) : (
97 <Button
98 size="sm"
99 variant="outline"
100 onClick={() => setApprovingId(payment.id)}
101 >
102 Approve
103 </Button>
104 )}
105 </TableCell>
106 </TableRow>
107 );
108 })}
109 </TableBody>
110 </Table>
111 </Card>
112
113 {approving && (
114 <Dialog
115 open
116 onOpenChange={(details: { open?: boolean } | boolean) => {
117 const open =
118 typeof details === "boolean" ? details : details?.open;
119 if (!open) setApprovingId(null);
120 }}
121 >
122 <DialogContent
123 title={`Approve payment to ${approving.beneficiary}?`}
124 description="Review the details before confirming."
125 >
126 <DataList
127 items={[
128 { label: "Beneficiary", value: approving.beneficiary },
129 {
130 label: "IBAN",
131 value: (
132 <Text as="span" mono>
133 {approving.iban}
134 </Text>
135 ),
136 },
137 {
138 label: "Amount",
139 value: (
140 <FormatNumber
141 value={approving.amount}
142 format="currency"
143 currency={currency}
144 />
145 ),
146 },
147 {
148 label: "Fee",
149 value: (
150 <FormatNumber
151 value={feeFor(approving.scheme)}
152 format="currency"
153 currency={currency}
154 />
155 ),
156 },
157 {
158 label: "Total",
159 value: (
160 <FormatNumber
161 value={approving.amount + feeFor(approving.scheme)}
162 format="currency"
163 currency={currency}
164 />
165 ),
166 },
167 ]}
168 />
169 <DialogFooter>
170 <Button variant="outline" onClick={() => setApprovingId(null)}>
171 Cancel
172 </Button>
173 <Button onClick={handleConfirm}>Confirm</Button>
174 </DialogFooter>
175 </DialogContent>
176 </Dialog>
177 )}
178 </Stack>
179 </main>
180 </LocaleProvider>
181 );
182 }
183
get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component 4,438 91 $0.0000
5 get_component, get_component 13,221 68 $0.0000
6 write_file 1,560 4,419 $0.0000
7 read_file 8,627 297 $0.0000
10 write_file 157 1,369 $0.0000