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 get_guidelines, read_file, list_components 1,562 129 $0.0002 1 get_component, get_component, get_component, get_component, get_component, list_tokens 4,543 256 $0.0006 2 write_file 11,063 5,017 $0.0036
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 DialogTrigger,
16 Table,
17 TableBody,
18 TableCell,
19 TableHead,
20 TableHeader,
21 TableRow,
22 } from "@vektos/ds";
23 import { css } from "styled-system/css";
24 import data from "./fixture.json";
25
26 type Scheme = keyof typeof data.fees;
27
28 const schemeLabels: Record<Scheme, string> = {
29 sepa: "SEPA transfer",
30 instant: "SEPA Instant transfer",
31 };
32
33 const money = new Intl.NumberFormat("en-GB", {
34 style: "currency",
35 currency: data.currency,
36 });
37
38 const amountFormat = new Intl.NumberFormat("en-GB", {
39 minimumFractionDigits: 2,
40 maximumFractionDigits: 2,
41 });
42
43 const dateFormat = new Intl.DateTimeFormat("en-GB", {
44 day: "numeric",
45 month: "short",
46 year: "numeric",
47 timeZone: "UTC",
48 });
49
50 function formatDate(isoDate: string): string {
51 return dateFormat.format(new Date(`${isoDate}T00:00:00Z`));
52 }
53
54 export default function PaymentsApprovalPage() {
55 const [openId, setOpenId] = useState<string | null>(null);
56 const [approvedIds, setApprovedIds] = useState<Set<string>>(() => new Set());
57
58 const pendingCount = data.payments.filter((p) => !approvedIds.has(p.id)).length;
59
60 function approve(id: string) {
61 setApprovedIds((prev) => new Set(prev).add(id));
62 setOpenId(null);
63 }
64
65 return (
66 <main
67 className={
68 "vektos " +
69 css({
70 bg: "bg.canvas",
71 color: "fg.default",
72 padding: "8",
73 })
74 }
75 >
76 <Card className={css({ maxWidth: "full" })}>
77 <CardHeader>
78 <CardTitle>Payments awaiting approval</CardTitle>
79 <CardDescription>
80 {pendingCount} of {data.payments.length} payments still need approval.
81 </CardDescription>
82 </CardHeader>
83
84 <Table aria-label="Payments awaiting approval" className={css({ marginBlockStart: "4" })}>
85 <TableHead>
86 <TableRow>
87 <TableHeader>Beneficiary</TableHeader>
88 <TableHeader>IBAN</TableHeader>
89 <TableHeader>Due date</TableHeader>
90 <TableHeader>Status</TableHeader>
91 <TableHeader numeric>Amount (EUR)</TableHeader>
92 <TableHeader>Action</TableHeader>
93 </TableRow>
94 </TableHead>
95 <TableBody>
96 {data.payments.map((p) => {
97 const scheme = p.scheme as Scheme;
98 const fee = data.fees[scheme];
99 const total = p.amount + fee;
100 const approved = approvedIds.has(p.id);
101
102 return (
103 <TableRow key={p.id}>
104 <TableCell>
105 <span className={css({ display: "block", fontWeight: "medium" })}>
106 {p.beneficiary}
107 </span>
108 <span className={css({ display: "block", fontSize: "sm", color: "fg.muted" })}>
109 {p.reference}
110 </span>
111 </TableCell>
112 <TableCell className={css({ whiteSpace: "nowrap" })}>{p.iban}</TableCell>
113 <TableCell className={css({ whiteSpace: "nowrap" })}>
114 <time dateTime={p.dueDate}>{formatDate(p.dueDate)}</time>
115 </TableCell>
116 <TableCell>
117 {approved ? (
118 <Badge tone="success">Approved</Badge>
119 ) : (
120 <Badge tone="warning">Awaiting approval</Badge>
121 )}
122 </TableCell>
123 <TableCell numeric>{amountFormat.format(p.amount)}</TableCell>
124 <TableCell>
125 <Dialog
126 open={openId === p.id}
127 onOpenChange={({ open }) => setOpenId(open ? p.id : null)}
128 >
129 <DialogTrigger asChild>
130 <Button variant="outline" size="sm" disabled={approved}>
131 {approved ? "Approved" : "Approve"}
132 </Button>
133 </DialogTrigger>
134 <DialogContent
135 title="Approve payment"
136 description="Check the details before you approve this payment."
137 >
138 <dl
139 className={css({
140 display: "grid",
141 gridTemplateColumns: "max-content 1fr",
142 gap: "2",
143 fontSize: "sm",
144 margin: "0",
145 })}
146 >
147 <dt className={css({ color: "fg.muted" })}>Beneficiary</dt>
148 <dd className={css({ margin: "0", textAlign: "end" })}>
149 {p.beneficiary}
150 </dd>
151
152 <dt className={css({ color: "fg.muted" })}>IBAN</dt>
153 <dd
154 className={css({
155 margin: "0",
156 textAlign: "end",
157 whiteSpace: "nowrap",
158 })}
159 >
160 {p.iban}
161 </dd>
162
163 <dt className={css({ color: "fg.muted" })}>Amount</dt>
164 <dd className={css({ margin: "0", textAlign: "end" })}>
165 {money.format(p.amount)}
166 </dd>
167
168 <dt className={css({ color: "fg.muted" })}>
169 Fee ({schemeLabels[scheme]})
170 </dt>
171 <dd className={css({ margin: "0", textAlign: "end" })}>
172 {money.format(fee)}
173 </dd>
174
175 <dt className={css({ fontWeight: "semibold" })}>Total</dt>
176 <dd
177 className={css({
178 margin: "0",
179 textAlign: "end",
180 fontWeight: "semibold",
181 })}
182 >
183 {money.format(total)}
184 </dd>
185 </dl>
186
187 <DialogFooter>
188 <DialogClose asChild>
189 <Button variant="outline">Cancel</Button>
190 </DialogClose>
191 <Button onClick={() => approve(p.id)}>Confirm</Button>
192 </DialogFooter>
193 </DialogContent>
194 </Dialog>
195 </TableCell>
196 </TableRow>
197 );
198 })}
199 </TableBody>
200 </Table>
201 </Card>
202 </main>
203 );
204 }
205
3 write_file 16,101 2,963 $0.0031