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 3 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 get_guidelines, read_file, list_components, list_tokens 1,793 155 $0.0003 1 get_component, get_component, get_component, get_component, get_component 6,543 231 $0.0008 2 write_file, check_code 11,295 7,183 $0.0047
e02ef3974528
Output cap The provider's default 4 import {
5 Badge,
6 Button,
7 Card,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 Dialog,
12 DialogClose,
13 DialogContent,
14 DialogFooter,
15 Table,
16 TableBody,
17 TableCell,
18 TableHead,
19 TableHeader,
20 TableRow,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23 import data from "./fixture.json";
24
25 type Payment = (typeof data.payments)[number];
26
27 const fees: Record<string, number> = data.fees;
28
29 const schemeLabels: Record<string, string> = {
30 sepa: "SEPA",
31 instant: "Instant",
32 };
33
34 const numberFormatter = new Intl.NumberFormat("en-IE", {
35 style: "decimal",
36 minimumFractionDigits: 2,
37 maximumFractionDigits: 2,
38 });
39
40 const amountFormatter = new Intl.NumberFormat("en-IE", {
41 style: "currency",
42 currency: data.currency,
43 });
44
45 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
46 day: "2-digit",
47 month: "short",
48 year: "numeric",
49 timeZone: "UTC",
50 });
51
52 function formatDate(iso: string): string {
53 return dateFormatter.format(new Date(`${iso}T00:00:00Z`));
54 }
55
56 function feeFor(payment: Payment): number {
57 return fees[payment.scheme] ?? 0;
58 }
59
60 function totalFor(payment: Payment): number {
61 return Math.round((payment.amount + feeFor(payment)) * 100) / 100;
62 }
63
64 const pageStyles = css({
65 bg: "bg.canvas",
66 color: "fg.default",
67 p: "6",
68 });
69
70 const headingStyles = css({
71 fontSize: "lg",
72 fontWeight: "semibold",
73 lineHeight: "tight",
74 marginBlockEnd: "4",
75 });
76
77 const cellNowrapStyles = css({ whiteSpace: "nowrap" });
78
79 const srOnlyStyles = css({
80 position: "absolute",
81 width: "1px",
82 height: "1px",
83 padding: "0",
84 margin: "-1px",
85 overflow: "hidden",
86 clip: "rect(0, 0, 0, 0)",
87 whiteSpace: "nowrap",
88 borderWidth: "0",
89 });
90
91 const summaryStyles = css({
92 display: "flex",
93 flexDirection: "column",
94 gap: "2",
95 });
96
97 const summaryRowStyles = css({
98 display: "flex",
99 justifyContent: "space-between",
100 alignItems: "baseline",
101 gap: "4",
102 fontSize: "sm",
103 });
104
105 const summaryLabelStyles = css({ color: "fg.muted" });
106
107 const summaryTotalStyles = css({
108 display: "flex",
109 justifyContent: "space-between",
110 alignItems: "baseline",
111 gap: "4",
112 paddingBlockStart: "2",
113 marginBlockStart: "1",
114 borderBlockStartWidth: "thin",
115 borderBlockStartStyle: "solid",
116 borderColor: "border.default",
117 fontWeight: "semibold",
118 });
119
120 export default function PaymentsApprovalPage() {
121 const [approvedIds, setApprovedIds] = useState<string[]>([]);
122 const [pending, setPending] = useState<Payment | null>(null);
123
124 function confirmApproval(id: string) {
125 setApprovedIds((ids) => (ids.includes(id) ? ids : [...ids, id]));
126 setPending(null);
127 }
128
129 return (
130 <div className={`vektos ${pageStyles}`}>
131 <h1 className={headingStyles}>Payments awaiting approval</h1>
132
133 <Card>
134 <CardHeader>
135 <CardTitle>Company payments</CardTitle>
136 <CardDescription>
137 {data.payments.length} payments, review each one before approving.
138 </CardDescription>
139 </CardHeader>
140
141 <Table aria-label="Payments awaiting approval">
142 <TableHead>
143 <TableRow>
144 <TableHeader>Beneficiary</TableHeader>
145 <TableHeader>IBAN</TableHeader>
146 <TableHeader>Due date</TableHeader>
147 <TableHeader numeric>Amount (EUR)</TableHeader>
148 <TableHeader>Status</TableHeader>
149 <TableHeader>
150 <span className={srOnlyStyles}>Action</span>
151 </TableHeader>
152 </TableRow>
153 </TableHead>
154 <TableBody>
155 {data.payments.map((payment) => {
156 const approved = approvedIds.includes(payment.id);
157 return (
158 <TableRow key={payment.id}>
159 <TableCell>{payment.beneficiary}</TableCell>
160 <TableCell className={cellNowrapStyles}>{payment.iban}</TableCell>
161 <TableCell className={cellNowrapStyles}>
162 {formatDate(payment.dueDate)}
163 </TableCell>
164 <TableCell numeric>{numberFormatter.format(payment.amount)}</TableCell>
165 <TableCell>
166 {approved ? (
167 <Badge tone="success">Approved</Badge>
168 ) : (
169 <Badge tone="warning">Pending approval</Badge>
170 )}
171 </TableCell>
172 <TableCell>
173 <Button
174 variant="outline"
175 size="sm"
176 disabled={approved}
177 aria-label={`Approve payment to ${payment.beneficiary}`}
178 onClick={() => setPending(payment)}
179 >
180 {approved ? "Approved" : "Approve"}
181 </Button>
182 </TableCell>
183 </TableRow>
184 );
185 })}
186 </TableBody>
187 </Table>
188 </Card>
189
190 <Dialog
191 open={pending !== null}
192 onOpenChange={(details: { open: boolean }) => {
193 if (!details.open) setPending(null);
194 }}
195 >
196 {pending && (
197 <DialogContent
198 title="Approve payment?"
199 description={`Review the details before approving the payment to ${pending.beneficiary}.`}
200 >
201 <div className={summaryStyles}>
202 <div className={summaryRowStyles}>
203 <span className={summaryLabelStyles}>Beneficiary</span>
204 <span>{pending.beneficiary}</span>
205 </div>
206 <div className={summaryRowStyles}>
207 <span className={summaryLabelStyles}>IBAN</span>
208 <span className={cellNowrapStyles}>{pending.iban}</span>
209 </div>
210 <div className={summaryRowStyles}>
211 <span className={summaryLabelStyles}>Amount</span>
212 <span>{amountFormatter.format(pending.amount)}</span>
213 </div>
214 <div className={summaryRowStyles}>
215 <span className={summaryLabelStyles}>
216 Fee ({schemeLabels[pending.scheme] ?? pending.scheme})
217 </span>
218 <span>{amountFormatter.format(feeFor(pending))}</span>
219 </div>
220 <div className={summaryTotalStyles}>
221 <span>Total</span>
222 <span>{amountFormatter.format(totalFor(pending))}</span>
223 </div>
224 </div>
225
226 <DialogFooter>
227 <DialogClose asChild>
228 <Button variant="outline">Cancel</Button>
229 </DialogClose>
230 <Button onClick={() => confirmApproval(pending.id)}>Confirm</Button>
231 </DialogFooter>
232 </DialogContent>
233 )}
234 </Dialog>
235 </div>
236 );
237 }
238
No overload matches this call.
3 write_file, check_code 18,822 5,680 $0.0047
4 check_code 24,770 2,717 $0.0038