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 7 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, list_components, list_files, read_file, read_file 741 178 $0.0033 1 get_component, get_component, get_component, get_component, get_component, list_tokens 2,493 203 $0.0072 2 write_file 4,974 7,240 $0.0830
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 Payment = (typeof data.payments)[number];
27 type Scheme = keyof typeof data.fees;
28
29 const currencyFormatter = new Intl.NumberFormat("en-IE", {
30 style: "currency",
31 currency: data.currency,
32 minimumFractionDigits: 2,
33 maximumFractionDigits: 2,
34 });
35
36 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
37 day: "2-digit",
38 month: "short",
39 year: "numeric",
40 timeZone: "UTC",
41 });
42
43 const schemeLabels: Record<Scheme, string> = {
44 sepa: "SEPA",
45 instant: "SEPA Instant",
46 };
47
48 function formatMoney(amount: number) {
49 return currencyFormatter.format(amount);
50 }
51
52 function formatDueDate(date: string) {
53 return dateFormatter.format(new Date(`${date}T00:00:00Z`));
54 }
55
56 function getScheme(payment: Payment) {
57 return payment.scheme as Scheme;
58 }
59
60 function DetailRow({ label, children }: { label: string; children: ReactNode }) {
61 return (
62 <div
63 className={css({
64 display: "flex",
65 alignItems: "flex-start",
66 justifyContent: "space-between",
67 gap: "4",
68 })}
69 >
70 <dt className={css({ color: "fg.muted" })}>{label}</dt>
71 <dd
72 className={css({
73 margin: "0",
74 textAlign: "right",
75 fontWeight: "medium",
76 overflowWrap: "anywhere",
77 })}
78 >
79 {children}
80 </dd>
81 </div>
82 );
83 }
84
85 export default function PaymentsApprovalPage() {
86 const [approvedPaymentIds, setApprovedPaymentIds] = useState<Set<string>>(
87 () => new Set(),
88 );
89
90 const pendingCount = data.payments.length - approvedPaymentIds.size;
91
92 function approvePayment(paymentId: string) {
93 setApprovedPaymentIds((current) => {
94 const next = new Set(current);
95 next.add(paymentId);
96 return next;
97 });
98 }
99
100 return (
101 <div className={`vektos ${css({ bg: "bg.canvas", color: "fg.default" })}`}>
102 <main className={css({ width: "full", px: "6", py: "8" })}>
103 <header className={css({ mb: "6" })}>
104 <h1
105 className={css({
106 margin: "0",
107 fontSize: "lg",
108 lineHeight: "tight",
109 fontWeight: "semibold",
110 })}
111 >
112 Payment approvals
113 </h1>
114 <p className={css({ margin: "0", mt: "2", color: "fg.muted" })}>
115 Review beneficiary details and approve outgoing company payments.
116 </p>
117 </header>
118
119 <Card>
120 <CardHeader>
121 <CardTitle asChild>
122 <h2>Company payments</h2>
123 </CardTitle>
124 <CardDescription aria-live="polite">
125 {pendingCount === 0
126 ? "All payments have been approved."
127 : `${pendingCount} of ${data.payments.length} payments waiting for approval.`}
128 </CardDescription>
129 </CardHeader>
130
131 <div className={css({ overflowX: "auto" })}>
132 <Table aria-label="Company payments and their approval status">
133 <TableHead>
134 <TableRow>
135 <TableHeader>Beneficiary</TableHeader>
136 <TableHeader>IBAN</TableHeader>
137 <TableHeader>Due date</TableHeader>
138 <TableHeader>Scheme</TableHeader>
139 <TableHeader numeric>Amount ({data.currency})</TableHeader>
140 <TableHeader>Status</TableHeader>
141 <TableHeader>Action</TableHeader>
142 </TableRow>
143 </TableHead>
144 <TableBody>
145 {data.payments.map((payment) => {
146 const scheme = getScheme(payment);
147 const fee = data.fees[scheme];
148 const isApproved = approvedPaymentIds.has(payment.id);
149
150 return (
151 <TableRow key={payment.id}>
152 <TableCell>
153 <div className={css({ fontWeight: "medium" })}>
154 {payment.beneficiary}
155 </div>
156 <div
157 className={css({
158 mt: "1",
159 fontSize: "sm",
160 color: "fg.muted",
161 })}
162 >
163 {payment.reference}
164 </div>
165 </TableCell>
166 <TableCell>
167 <span className={css({ whiteSpace: "nowrap" })}>
168 {payment.iban}
169 </span>
170 </TableCell>
171 <TableCell>
172 <time
173 dateTime={payment.dueDate}
174 className={css({ whiteSpace: "nowrap" })}
175 >
176 {formatDueDate(payment.dueDate)}
177 </time>
178 </TableCell>
179 <TableCell>
180 <span className={css({ whiteSpace: "nowrap" })}>
181 {schemeLabels[scheme]}
182 </span>
183 </TableCell>
184 <TableCell numeric>{formatMoney(payment.amount)}</TableCell>
185 <TableCell>
186 <Badge tone={isApproved ? "success" : "warning"}>
187 {isApproved ? "Approved" : "Pending"}
188 </Badge>
189 </TableCell>
190 <TableCell>
191 {isApproved ? (
192 <Button variant="outline" size="sm" disabled>
193 Approve
194 </Button>
195 ) : (
196 <Dialog>
197 <DialogTrigger asChild>
198 <Button variant="outline" size="sm">
199 Approve
200 </Button>
201 </DialogTrigger>
202 <DialogContent
203 title={`Approve payment to ${payment.beneficiary}?`}
204 description="Review the payment and scheme fee before confirming."
205 >
206 <dl
207 className={css({
208 display: "flex",
209 flexDirection: "column",
210 gap: "3",
211 })}
212 >
213 <DetailRow label="Beneficiary">
214 {payment.beneficiary}
215 </DetailRow>
216 <DetailRow label="IBAN">{payment.iban}</DetailRow>
217 <DetailRow label="Amount">
218 {formatMoney(payment.amount)}
219 </DetailRow>
220 <DetailRow label={`${schemeLabels[scheme]} fee`}>
221 {formatMoney(fee)}
222 </DetailRow>
223 <div
224 className={css({
225 display: "flex",
226 alignItems: "baseline",
227 justifyContent: "space-between",
228 gap: "4",
229 mt: "1",
230 pt: "4",
231 borderTopWidth: "thin",
232 borderTopStyle: "solid",
233 borderTopColor: "border.default",
234 })}
235 >
236 <dt className={css({ fontWeight: "semibold" })}>
237 Total
238 </dt>
239 <dd
240 className={css({
241 margin: "0",
242 fontSize: "lg",
243 fontWeight: "semibold",
244 })}
245 >
246 {formatMoney(payment.amount + fee)}
247 </dd>
248 </div>
249 </dl>
250 <DialogFooter>
251 <DialogClose asChild>
252 <Button variant="outline">Cancel</Button>
253 </DialogClose>
254 <DialogClose asChild>
255 <Button onClick={() => approvePayment(payment.id)}>
256 Confirm
257 </Button>
258 </DialogClose>
259 </DialogFooter>
260 </DialogContent>
261 </Dialog>
262 )}
263 </TableCell>
264 </TableRow>
265 );
266 })}
267 </TableBody>
268 </Table>
269 </div>
270 </Card>
271 </main>
272 </div>
273 );
274 }
275
lint/typescript(no-unsafe-type-assertion)
1 quality
3 check_code 7,325 1,818 $0.0345