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 list_files 364 46 $0.0000 1 read_file, get_guidelines 104 48 $0.0000 2 list_components 3,141 25 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12 DataList,
13 Dialog,
14 DialogClose,
15 DialogContent,
16 DialogFooter,
17 DialogTrigger,
18 FormatDate,
19 FormatNumber,
20 Heading,
21 Stack,
22 Table,
23 TableBody,
24 TableCell,
25 TableHead,
26 TableHeader,
27 TableRow,
28 Text,
29 } from "@vektos/ds";
30
31 type Payment = (typeof data.payments)[number];
32
33 const feesByScheme = data.fees as Record<string, number>;
34
35 export default function Page() {
36 const [approved, setApproved] = useState<Set<string>>(() => new Set());
37
38 const currency = data.currency;
39
40 const handleApprove = (id: string) => {
41 setApproved((previous) => {
42 const next = new Set(previous);
43 next.add(id);
44 return next;
45 });
46 };
47
48 return (
49 <div className="vektos">
50 <Stack gap="6" marginBlock="6" marginInline="auto" maxWidth="page">
51 <Stack gap="2">
52 <Heading level={1}>Payments awaiting approval</Heading>
53 <Text tone="muted" size="sm">
54 Review each payment and confirm the amount, fee and total before approving.
55 </Text>
56 </Stack>
57
58 <Card>
59 <CardHeader>
60 <CardTitle>Pending payments</CardTitle>
61 <CardDescription>
62 {data.payments.length} payment{data.payments.length === 1 ? "" : "s"} waiting for approval.
63 </CardDescription>
64 </CardHeader>
65 <Table aria-label="Payments awaiting approval">
66 <TableHead>
67 <TableRow>
68 <TableHeader>Beneficiary</TableHeader>
69 <TableHeader>IBAN</TableHeader>
70 <TableHeader>Due date</TableHeader>
71 <TableHeader numeric>Amount</TableHeader>
72 <TableHeader>Status</TableHeader>
73 <TableHeader>Action</TableHeader>
74 </TableRow>
75 </TableHead>
76 <TableBody>
77 {data.payments.map((payment: Payment) => {
78 const isApproved = approved.has(payment.id);
79 const fee = feesByScheme[payment.scheme] ?? 0;
80 const total = payment.amount + fee;
81
82 return (
83 <TableRow key={payment.id}>
84 <TableCell>{payment.beneficiary}</TableCell>
85 <TableCell>
86 <Text as="span" mono>
87 {payment.iban}
88 </Text>
89 </TableCell>
90 <TableCell>
91 <FormatDate value={payment.dueDate} dateStyle="medium" />
92 </TableCell>
93 <TableCell numeric>
94 <FormatNumber
95 value={payment.amount}
96 format="currency"
97 currency={currency}
98 />
99 </TableCell>
100 <TableCell>
101 {isApproved ? (
102 <Badge tone="success">Approved</Badge>
103 ) : (
104 <Badge tone="warning">Pending approval</Badge>
105 )}
106 </TableCell>
107 <TableCell>
108 <Dialog>
109 <DialogTrigger asChild>
110 <Button
111 variant="outline"
112 size="sm"
113 disabled={isApproved}
114 >
115 Approve
116 </Button>
117 </DialogTrigger>
118 <DialogContent
119 title="Approve payment"
120 description="Confirm the payment details before approving."
121 >
122 <Stack gap="4">
123 <DataList
124 items={[
125 {
126 label: "Beneficiary",
127 value: payment.beneficiary,
128 },
129 {
130 label: "IBAN",
131 value: (
132 <Text as="span" mono>
133 {payment.iban}
134 </Text>
135 ),
136 },
137 {
138 label: "Amount",
139 value: (
140 <FormatNumber
141 value={payment.amount}
142 format="currency"
143 currency={currency}
144 />
145 ),
146 },
147 {
148 label: "Fee",
149 value: (
150 <FormatNumber
151 value={fee}
152 format="currency"
153 currency={currency}
154 />
155 ),
156 },
157 {
158 label: "Total",
159 value: (
160 <FormatNumber
161 value={total}
162 format="currency"
163 currency={currency}
164 />
165 ),
166 },
167 ]}
168 />
169 </Stack>
170 <DialogFooter>
171 <DialogClose asChild>
172 <Button variant="outline">Cancel</Button>
173 </DialogClose>
174 <DialogClose asChild>
175 <Button onClick={() => handleApprove(payment.id)}>
176 Confirm
177 </Button>
178 </DialogClose>
179 </DialogFooter>
180 </DialogContent>
181 </Dialog>
182 </TableCell>
183 </TableRow>
184 );
185 })}
186 </TableBody>
187 </Table>
188 </Card>
189 </Stack>
190 </div>
191 );
192 }
get_component, get_component, get_component
4 get_component, get_component, get_component, get_component 3,408 117 $0.0000
5 list_files 3,343 74 $0.0000
6 get_component, get_component, get_component, get_component 103 102 $0.0000
7 get_component, get_component, get_component, get_component 3,090 93 $0.0000
8 write_file 2,787 5,101 $0.0000
9 check_code 5,161 1,060 $0.0000
10 list_tokens 1,341 687 $0.0000
11 write_file 25,558 1,100 $0.0000
12 check_code 1,146 1,060 $0.0000