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_components, list_files 108 99 $0.0000 1 read_file, list_tokens, list_tokens 5,055 66 $0.0000 2 list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, get_component, get_component, get_component 6,846 210 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Button,
8 Card,
9 CardHeader,
10 CardTitle,
11 DataList,
12 Dialog,
13 DialogClose,
14 DialogContent,
15 DialogFooter,
16 DialogTrigger,
17 FormatDate,
18 FormatNumber,
19 Heading,
20 Stack,
21 Table,
22 TableBody,
23 TableCell,
24 TableHead,
25 TableHeader,
26 TableRow,
27 Text,
28 } from "@vektos/ds";
29
30 type Payment = (typeof data.payments)[number];
31
32 export default function Page() {
33 const [approved, setApproved] = useState<Record<string, boolean>>({});
34
35 const fees = data.fees as Record<string, number>;
36
37 return (
38 <Stack gap="6">
39 <Heading level={1}>Payments awaiting approval</Heading>
40 <Card>
41 <CardHeader>
42 <CardTitle>Pending payments</CardTitle>
43 </CardHeader>
44 <Table aria-label="Payments awaiting approval">
45 <TableHead>
46 <TableRow>
47 <TableHeader>Beneficiary</TableHeader>
48 <TableHeader>IBAN</TableHeader>
49 <TableHeader>Due date</TableHeader>
50 <TableHeader numeric>Amount</TableHeader>
51 <TableHeader>Actions</TableHeader>
52 </TableRow>
53 </TableHead>
54 <TableBody>
55 {data.payments.map((payment: Payment) => {
56 const isApproved = Boolean(approved[payment.id]);
57 const fee = fees[payment.scheme] ?? 0;
58 const total = payment.amount + fee;
59
60 return (
61 <TableRow key={payment.id}>
62 <TableCell>{payment.beneficiary}</TableCell>
63 <TableCell>
64 <Text as="span" mono>
65 {payment.iban}
66 </Text>
67 </TableCell>
68 <TableCell>
69 <FormatDate value={payment.dueDate} dateStyle="medium" />
70 </TableCell>
71 <TableCell numeric>
72 <FormatNumber
73 value={payment.amount}
74 format="currency"
75 currency={data.currency}
76 />
77 </TableCell>
78 <TableCell>
79 {isApproved ? (
80 <Badge tone="success">Approved</Badge>
81 ) : (
82 <Dialog>
83 <DialogTrigger asChild>
84 <Button size="sm" variant="outline">
85 Approve
86 </Button>
87 </DialogTrigger>
88 <DialogContent
89 title="Approve payment?"
90 description="Review the details before confirming."
91 >
92 <DataList
93 items={[
94 { label: "Beneficiary", value: payment.beneficiary },
95 {
96 label: "IBAN",
97 value: (
98 <Text as="span" mono>
99 {payment.iban}
100 </Text>
101 ),
102 },
103 {
104 label: "Amount",
105 value: (
106 <FormatNumber
107 value={payment.amount}
108 format="currency"
109 currency={data.currency}
110 />
111 ),
112 },
113 {
114 label: `Fee (${payment.scheme})`,
115 value: (
116 <FormatNumber
117 value={fee}
118 format="currency"
119 currency={data.currency}
120 />
121 ),
122 },
123 {
124 label: "Total",
125 value: (
126 <FormatNumber
127 value={total}
128 format="currency"
129 currency={data.currency}
130 />
131 ),
132 },
133 ]}
134 />
135 <DialogFooter>
136 <DialogClose asChild>
137 <Button variant="outline">Cancel</Button>
138 </DialogClose>
139 <DialogClose asChild>
140 <Button
141 onClick={() =>
142 setApproved((prev) => ({
143 ...prev,
144 [payment.id]: true,
145 }))
146 }
147 >
148 Confirm
149 </Button>
150 </DialogClose>
151 </DialogFooter>
152 </DialogContent>
153 </Dialog>
154 )}
155 </TableCell>
156 </TableRow>
157 );
158 })}
159 </TableBody>
160 </Table>
161 </Card>
162 </Stack>
163 );
164 }
165
3 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 4,202 206 $0.0000
4 list_files 8,122 54 $0.0000
5 read_file, read_file 126 90 $0.0000
6 write_file 193 3,886 $0.0000
7 check_code 3,911 873 $0.0000