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 3 counted, under 3 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 list_files 453 36 $0.0000 1 read_file, get_guidelines, list_components 183 59 $0.0000 2 read_file, read_file 5,495 129 $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 LocaleProvider,
22 Stack,
23 Table,
24 TableBody,
25 TableCell,
26 TableHead,
27 TableHeader,
28 TableRow,
29 Text,
30 } from "@vektos/ds";
31
32 type Payment = (typeof data.payments)[number];
33 type Scheme = keyof typeof data.fees;
34
35 export default function Page() {
36 const [approved, setApproved] = useState<Set<string>>(new Set());
37
38 const markApproved = (id: string) => {
39 setApproved((prev) => {
40 const next = new Set(prev);
41 next.add(id);
42 return next;
43 });
44 };
45
46 return (
47 <LocaleProvider locale="en-IE">
48 <Stack UNSAFE_className="vektos" gap="6" marginBlock="6">
49 <Heading level={1}>Payments waiting for approval</Heading>
50 <Card>
51 <CardHeader>
52 <CardTitle>Pending payments</CardTitle>
53 <CardDescription>
54 {data.payments.length} payments require your approval.
55 </CardDescription>
56 </CardHeader>
57 <Table aria-label="Payments waiting for approval">
58 <TableHead>
59 <TableRow>
60 <TableHeader>Beneficiary</TableHeader>
61 <TableHeader>IBAN</TableHeader>
62 <TableHeader>Due date</TableHeader>
63 <TableHeader numeric>Amount</TableHeader>
64 <TableHeader>Status</TableHeader>
65 <TableHeader>Action</TableHeader>
66 </TableRow>
67 </TableHead>
68 <TableBody>
69 {data.payments.map((payment) => {
70 const isApproved = approved.has(payment.id);
71 const fee = data.fees[payment.scheme as Scheme];
72 return (
73 <TableRow key={payment.id}>
74 <TableCell>{payment.beneficiary}</TableCell>
75 <TableCell>
76 <Text as="span" mono size="sm">
77 {payment.iban}
78 </Text>
79 </TableCell>
80 <TableCell>
81 <FormatDate value={payment.dueDate} dateStyle="medium" />
82 </TableCell>
83 <TableCell numeric>
84 <FormatNumber
85 value={payment.amount}
86 format="currency"
87 currency={data.currency}
88 />
89 </TableCell>
90 <TableCell>
91 {isApproved ? (
92 <Badge tone="success">Approved</Badge>
93 ) : (
94 <Badge tone="warning">Waiting approval</Badge>
95 )}
96 </TableCell>
97 <TableCell>
98 {isApproved ? null : (
99 <Dialog>
100 <DialogTrigger asChild>
101 <Button size="sm">Approve</Button>
102 </DialogTrigger>
103 <DialogContent
104 title="Approve payment"
105 description="Review the payment details before confirming."
106 >
107 <DataList
108 items={[
109 { label: "Beneficiary", value: payment.beneficiary },
110 {
111 label: "IBAN",
112 value: <Text as="span" mono>{payment.iban}</Text>,
113 },
114 {
115 label: "Amount",
116 value: (
117 <FormatNumber
118 value={payment.amount}
119 format="currency"
120 currency={data.currency}
121 />
122 ),
123 },
124 {
125 label: "Fee",
126 value: (
127 <FormatNumber
128 value={fee}
129 format="currency"
130 currency={data.currency}
131 />
132 ),
133 },
134 {
135 label: "Total",
136 value: (
137 <FormatNumber
138 value={payment.amount + fee}
139 format="currency"
140 currency={data.currency}
141 />
142 ),
143 },
144 ]}
145 />
146 <DialogFooter>
147 <DialogClose asChild>
148 <Button variant="outline">Cancel</Button>
149 </DialogClose>
150 <DialogClose asChild>
151 <Button onClick={() => markApproved(payment.id)}>
152 Confirm
153 </Button>
154 </DialogClose>
155 </DialogFooter>
156 </DialogContent>
157 </Dialog>
158 )}
159 </TableCell>
160 </TableRow>
161 );
162 })}
163 </TableBody>
164 </Table>
165 </Card>
166 </Stack>
167 </LocaleProvider>
168 );
169 }
get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component 3,883 138 $0.0000
5 get_component, get_component, get_component, get_component 4,913 93 $0.0000
6 write_file 17,155 5,533 $0.0000