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 342 46 $0.0000 1 read_file, get_guidelines 82 45 $0.0000 2 list_components, list_tokens 3,052 40 $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 FormatDate,
17 FormatNumber,
18 Heading,
19 Stack,
20 Table,
21 TableBody,
22 TableCell,
23 TableHead,
24 TableHeader,
25 TableRow,
26 Text,
27 } from "@vektos/ds";
28
29 type Payment = (typeof data.payments)[number];
30 type Scheme = keyof typeof data.fees;
31
32 export default function Page() {
33 const [approved, setApproved] = useState<Set<string>>(new Set());
34 const [pending, setPending] = useState<Payment | null>(null);
35
36 const feeFor = (payment: Payment) =>
37 data.fees[payment.scheme as Scheme] ?? 0;
38
39 const handleConfirm = () => {
40 if (pending) {
41 setApproved((previous) => new Set(previous).add(pending.id));
42 setPending(null);
43 }
44 };
45
46 return (
47 <Stack gap="6" marginBlock="6" marginInline="6">
48 <Heading level={1}>Payments awaiting approval</Heading>
49 <Card>
50 <CardHeader>
51 <CardTitle>Pending payments</CardTitle>
52 </CardHeader>
53 <Table aria-label="Payments awaiting approval">
54 <TableHead>
55 <TableRow>
56 <TableHeader>Beneficiary</TableHeader>
57 <TableHeader>IBAN</TableHeader>
58 <TableHeader>Due date</TableHeader>
59 <TableHeader numeric>Amount ({data.currency})</TableHeader>
60 <TableHeader>Status</TableHeader>
61 <TableHeader>Action</TableHeader>
62 </TableRow>
63 </TableHead>
64 <TableBody>
65 {data.payments.map((payment) => {
66 const isApproved = approved.has(payment.id);
67 return (
68 <TableRow key={payment.id}>
69 <TableCell>{payment.beneficiary}</TableCell>
70 <TableCell>
71 <Text as="span" mono size="sm">
72 {payment.iban}
73 </Text>
74 </TableCell>
75 <TableCell>
76 <FormatDate value={payment.dueDate} dateStyle="medium" />
77 </TableCell>
78 <TableCell numeric>
79 <FormatNumber
80 value={payment.amount}
81 format="currency"
82 currency={data.currency}
83 />
84 </TableCell>
85 <TableCell>
86 <Badge tone={isApproved ? "success" : "warning"}>
87 {isApproved ? "Approved" : "Pending"}
88 </Badge>
89 </TableCell>
90 <TableCell>
91 <Button
92 size="sm"
93 variant={isApproved ? "outline" : "solid"}
94 disabled={isApproved}
95 onClick={() => setPending(payment)}
96 >
97 Approve
98 </Button>
99 </TableCell>
100 </TableRow>
101 );
102 })}
103 </TableBody>
104 </Table>
105 </Card>
106
107 <Dialog
108 role="alertdialog"
109 open={pending !== null}
110 onOpenChange={(details) => {
111 if (!details.open) setPending(null);
112 }}
113 >
114 <DialogContent
115 title="Approve payment"
116 description="Review the details before confirming."
117 size="md"
118 >
119 {pending && (
120 <Stack gap="4">
121 <DataList
122 items={[
123 { label: "Beneficiary", value: pending.beneficiary },
124 {
125 label: "IBAN",
126 value: (
127 <Text as="span" mono>
128 {pending.iban}
129 </Text>
130 ),
131 },
132 {
133 label: "Amount",
134 value: (
135 <FormatNumber
136 value={pending.amount}
137 format="currency"
138 currency={data.currency}
139 />
140 ),
141 },
142 {
143 label: "Fee",
144 value: (
145 <FormatNumber
146 value={feeFor(pending)}
147 format="currency"
148 currency={data.currency}
149 />
150 ),
151 },
152 {
153 label: "Total",
154 value: (
155 <FormatNumber
156 value={pending.amount + feeFor(pending)}
157 format="currency"
158 currency={data.currency}
159 />
160 ),
161 },
162 ]}
163 />
164 <DialogFooter>
165 <DialogClose asChild>
166 <Button variant="outline">Cancel</Button>
167 </DialogClose>
168 <Button onClick={handleConfirm}>Confirm</Button>
169 </DialogFooter>
170 </Stack>
171 )}
172 </DialogContent>
173 </Dialog>
174 </Stack>
175 );
176 }
get_component, get_component, get_component
4 get_component, get_component, get_component, get_component 9,990 102 $0.0000
5 get_component, get_component, get_component, get_component 3,318 127 $0.0000
6 get_component, get_component 3,130 49 $0.0000
7 write_file 1,949 3,752 $0.0000
8 check_code 22,045 996 $0.0000
9 read_file 1,049 248 $0.0000
11 write_file 634 1,926 $0.0000
12 check_code 2,008 998 $0.0000