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 4 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 1,126 66 $0.0004 1 list_components, list_tokens 2,872 44 $0.0009 2 get_component, get_component 2,003 85 $0.0007 3
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 type Scheme = keyof typeof data.fees;
27
28 const schemeLabels: Record<Scheme, string> = {
29 sepa: "SEPA transfer",
30 instant: "SEPA Instant",
31 };
32
33 const money = (value: number) =>
34 new Intl.NumberFormat("en-GB", {
35 style: "currency",
36 currency: data.currency,
37 }).format(value);
38
39 const feeFor = (scheme: string) => data.fees[scheme as Scheme] ?? 0;
40
41 const day = (isoDate: string) =>
42 new Intl.DateTimeFormat("en-GB", {
43 day: "2-digit",
44 month: "short",
45 year: "numeric",
46 timeZone: "UTC",
47 }).format(new Date(`${isoDate}T00:00:00Z`));
48
49 function SummaryRow({
50 label,
51 value,
52 emphasis = false,
53 }: {
54 label: string;
55 value: string;
56 emphasis?: boolean;
57 }) {
58 return (
59 <div
60 className={css({
61 display: "flex",
62 alignItems: "baseline",
63 justifyContent: "space-between",
64 gap: "4",
65 })}
66 >
67 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>{label}</dt>
68 <dd
69 className={css({
70 margin: "0",
71 fontSize: emphasis ? "md" : "sm",
72 fontWeight: emphasis ? "semibold" : "medium",
73 color: "fg.default",
74 textAlign: "end",
75 })}
76 >
77 {value}
78 </dd>
79 </div>
80 );
81 }
82
83 export default function Page() {
84 const [approvedIds, setApprovedIds] = useState<string[]>([]);
85 const [open, setOpen] = useState(false);
86 const [selectedId, setSelectedId] = useState<string | null>(null);
87
88 const selected = data.payments.find((payment) => payment.id === selectedId) ?? null;
89 const isApproved = (payment: Payment) => approvedIds.includes(payment.id);
90
91 const openDialog = (payment: Payment) => {
92 setSelectedId(payment.id);
93 setOpen(true);
94 };
95
96 const confirm = () => {
97 if (selected) {
98 setApprovedIds((ids) => (ids.includes(selected.id) ? ids : [...ids, selected.id]));
99 }
100 setOpen(false);
101 };
102
103 const fee = selected ? feeFor(selected.scheme) : 0;
104 const total = selected ? selected.amount + fee : 0;
105
106 return (
107 <main className={`vektos ${css({ minHeight: "full", bg: "bg.canvas" })}`}>
108 <div
109 className={css({
110 display: "flex",
111 flexDirection: "column",
112 gap: "6",
113 padding: "8",
114 })}
115 >
116 <Card>
117 <CardHeader>
118 <CardTitle asChild>
119 <h1>Payments waiting for approval</h1>
120 </CardTitle>
121 <CardDescription>
122 {approvedIds.length} of {data.payments.length} approved. Money leaves the
123 account once a payment is confirmed.
124 </CardDescription>
125 </CardHeader>
126 <Table
127 aria-label="Company payments waiting for approval"
128 className={css({ marginBlockStart: "4" })}
129 >
130 <TableHead>
131 <TableRow>
132 <TableHeader>Beneficiary</TableHeader>
133 <TableHeader>IBAN</TableHeader>
134 <TableHeader>Due date</TableHeader>
135 <TableHeader numeric>Amount ({data.currency})</TableHeader>
136 <TableHeader>Status</TableHeader>
137 <TableHeader>Action</TableHeader>
138 </TableRow>
139 </TableHead>
140 <TableBody>
141 {data.payments.map((payment) => {
142 const approved = isApproved(payment);
143 return (
144 <TableRow key={payment.id}>
145 <TableCell>
146 <div
147 className={css({
148 display: "flex",
149 flexDirection: "column",
150 gap: "0.5",
151 })}
152 >
153 <span className={css({ fontWeight: "medium" })}>
154 {payment.beneficiary}
155 </span>
156 <span className={css({ color: "fg.muted", fontSize: "xs" })}>
157 {payment.reference}
158 </span>
159 </div>
160 </TableCell>
161 <TableCell>{payment.iban}</TableCell>
162 <TableCell>{day(payment.dueDate)}</TableCell>
163 <TableCell numeric>{money(payment.amount)}</TableCell>
164 <TableCell>
165 {approved ? (
166 <Badge tone="success">Approved</Badge>
167 ) : (
168 <Badge tone="warning">Awaiting approval</Badge>
169 )}
170 </TableCell>
171 <TableCell>
172 {approved ? null : (
173 <Button
174 variant="outline"
175 size="sm"
176 onClick={() => openDialog(payment)}
177 >
178 Approve
179 </Button>
180 )}
181 </TableCell>
182 </TableRow>
183 );
184 })}
185 </TableBody>
186 </Table>
187 <Dialog open={open} onOpenChange={(details) => setOpen(details.open)}>
188 <DialogContent
189 role="alertdialog"
190 title={
191 selected
192 ? `Approve payment to ${selected.beneficiary}?`
193 : "Approve payment?"
194 }
195 description="Check the details below. The money leaves the company account once you confirm."
196 >
197 {selected ? (
198 <>
199 <dl
200 className={css({
201 display: "flex",
202 flexDirection: "column",
203 gap: "2",
204 margin: "0",
205 })}
206 >
207 <SummaryRow label="Beneficiary" value={selected.beneficiary} />
208 <SummaryRow label="IBAN" value={selected.iban} />
209 <SummaryRow label="Amount" value={money(selected.amount)} />
210 <SummaryRow
211 label={`Fee (${schemeLabels[selected.scheme as Scheme]})`}
212 value={money(fee)}
213 />
214 <div
215 className={css({
216 borderTopWidth: "thin",
217 borderColor: "border.default",
218 paddingTop: "2",
219 })}
220 >
221 <SummaryRow label="Total" value={money(total)} emphasis />
222 </div>
223 </dl>
224 <DialogFooter>
225 <DialogClose asChild>
226 <Button variant="outline">Cancel</Button>
227 </DialogClose>
228 <Button onClick={confirm}>Confirm</Button>
229 </DialogFooter>
230 </>
231 ) : null}
232 </DialogContent>
233 </Dialog>
234 </Card>
235 </div>
236 </main>
237 );
238 }
239
get_component, get_component
4 list_files, get_component 1,433 80 $0.0006
5 write_file 522 7,454 $0.0092