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 None. The run followed every rule that was checked.
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_files 269 47 $0.0001 1 read_file, list_components 1,345 54 $0.0005 2 get_component, get_component 965 69 $0.0004 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 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
25 import data from "./fixture.json";
26
27 type Payment = (typeof data.payments)[number];
28
29 const fees: Record<string, number> = data.fees;
30
31 const schemeLabels: Record<string, string> = {
32 sepa: "SEPA transfer",
33 instant: "Instant transfer",
34 };
35
36 const formatMoney = (value: number) =>
37 new Intl.NumberFormat("en-GB", {
38 style: "currency",
39 currency: data.currency,
40 }).format(value);
41
42 const formatDate = (isoDate: string) =>
43 new Intl.DateTimeFormat("en-GB", {
44 day: "2-digit",
45 month: "short",
46 year: "numeric",
47 timeZone: "UTC",
48 }).format(new Date(`${isoDate}T00:00:00Z`));
49
50 const rowStyle = css({
51 display: "flex",
52 alignItems: "baseline",
53 justifyContent: "space-between",
54 gap: "4",
55 });
56
57 const labelStyle = css({ fontSize: "sm", color: "fg.muted" });
58 const valueStyle = css({ fontSize: "sm", fontWeight: "medium", color: "fg.default" });
59 const totalLabelStyle = css({ fontSize: "md", fontWeight: "semibold", color: "fg.default" });
60 const totalValueStyle = css({ fontSize: "lg", fontWeight: "semibold", color: "fg.default" });
61 const dividerStyle = css({
62 borderBlockStartWidth: "thin",
63 borderBlockStartStyle: "solid",
64 borderColor: "border.default",
65 });
66
67 function SummaryRow({ label, value }: { label: string; value: string }) {
68 return (
69 <div className={rowStyle}>
70 <span className={labelStyle}>{label}</span>
71 <span className={valueStyle}>{value}</span>
72 </div>
73 );
74 }
75
76 function TotalRow({ label, value }: { label: string; value: string }) {
77 return (
78 <div className={rowStyle}>
79 <span className={totalLabelStyle}>{label}</span>
80 <span className={totalValueStyle}>{value}</span>
81 </div>
82 );
83 }
84
85 function ApprovalSummary({ payment }: { payment: Payment }) {
86 const fee = fees[payment.scheme] ?? 0;
87 const scheme = schemeLabels[payment.scheme] ?? "Transfer";
88
89 return (
90 <div className={css({ display: "flex", flexDirection: "column", gap: "3" })}>
91 <SummaryRow label="Beneficiary" value={payment.beneficiary} />
92 <SummaryRow label="IBAN" value={payment.iban} />
93 <SummaryRow label="Amount" value={formatMoney(payment.amount)} />
94 <SummaryRow label={`${scheme} fee`} value={formatMoney(fee)} />
95 <div className={dividerStyle} />
96 <TotalRow label="Total" value={formatMoney(payment.amount + fee)} />
97 </div>
98 );
99 }
100
101 export default function PaymentsToApprovePage() {
102 const [approvedIds, setApprovedIds] = useState<string[]>([]);
103
104 const approve = (id: string) => {
105 setApprovedIds((current) => (current.includes(id) ? current : [...current, id]));
106 };
107
108 const awaiting = data.payments.length - approvedIds.length;
109
110 return (
111 <div
112 className={`vektos ${css({
113 display: "flex",
114 flexDirection: "column",
115 gap: "6",
116 padding: "8",
117 minHeight: "full",
118 bg: "bg.canvas",
119 })}`}
120 >
121 <Card>
122 <CardHeader>
123 <CardTitle asChild>
124 <h1>Payments waiting for approval</h1>
125 </CardTitle>
126 <CardDescription>
127 {awaiting} awaiting approval, {approvedIds.length} approved.
128 </CardDescription>
129 </CardHeader>
130 <Table aria-label="Payments waiting for approval" className={css({ marginBlockStart: "4" })}>
131 <TableHead>
132 <TableRow>
133 <TableHeader>Beneficiary</TableHeader>
134 <TableHeader>IBAN</TableHeader>
135 <TableHeader>Due date</TableHeader>
136 <TableHeader>Status</TableHeader>
137 <TableHeader numeric>Amount ({data.currency})</TableHeader>
138 <TableHeader>Action</TableHeader>
139 </TableRow>
140 </TableHead>
141 <TableBody>
142 {data.payments.map((payment) => {
143 const isApproved = approvedIds.includes(payment.id);
144
145 return (
146 <TableRow key={payment.id}>
147 <TableCell>
148 <span className={css({ display: "block", color: "fg.default" })}>
149 {payment.beneficiary}
150 </span>
151 <span className={css({ display: "block", fontSize: "sm", color: "fg.muted" })}>
152 {payment.reference}
153 </span>
154 </TableCell>
155 <TableCell>
156 <span className={css({ fontSize: "sm", color: "fg.default" })}>{payment.iban}</span>
157 </TableCell>
158 <TableCell>
159 <span className={css({ fontSize: "sm", color: "fg.default" })}>
160 {formatDate(payment.dueDate)}
161 </span>
162 </TableCell>
163 <TableCell>
164 {isApproved ? (
165 <Badge tone="success">Approved</Badge>
166 ) : (
167 <Badge tone="warning">Awaiting approval</Badge>
168 )}
169 </TableCell>
170 <TableCell numeric>{formatMoney(payment.amount)}</TableCell>
171 <TableCell>
172 {isApproved ? (
173 <Button variant="outline" size="sm" disabled>
174 Approve
175 </Button>
176 ) : (
177 <Dialog>
178 <DialogTrigger asChild>
179 <Button variant="outline" size="sm">
180 Approve
181 </Button>
182 </DialogTrigger>
183 <DialogContent
184 title={`Approve payment to ${payment.beneficiary}?`}
185 description="Check the details before approving. This cannot be undone."
186 >
187 <ApprovalSummary payment={payment} />
188 <DialogFooter>
189 <DialogClose asChild>
190 <Button variant="outline">Cancel</Button>
191 </DialogClose>
192 <DialogClose asChild>
193 <Button onClick={() => approve(payment.id)}>Confirm</Button>
194 </DialogClose>
195 </DialogFooter>
196 </DialogContent>
197 </Dialog>
198 )}
199 </TableCell>
200 </TableRow>
201 );
202 })}
203 </TableBody>
204 </Table>
205 </Card>
206 </div>
207 );
208 }
209
get_component, get_component, get_component, list_tokens
4 write_file 3,183 7,131 $0.0095
5 check_code 7,263 1,594 $0.0042
6 write_file 1,740 1,609 $0.0026
7 check_code 1,834 1,596 $0.0026