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 154 30 $0.0000 1 read_file, list_files 198 47 $0.0000 2 docs-list 740 39 $0.0000 3
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 FormatDate,
17 FormatNumber,
18 Heading,
19 Stack,
20 Table,
21 TableBody,
22 TableCell,
23 TableHead,
24 TableHeader,
25 TableRow,
26 Text,
27 } from "@vektos/ds";
28 import { css } from "styled-system/css";
29
30 type Payment = (typeof data.payments)[number];
31
32 export default function Page() {
33 const [approved, setApproved] = useState<Set<string>>(new Set());
34 const [active, setActive] = useState<Payment | null>(null);
35 const [open, setOpen] = useState(false);
36
37 const openApproval = (payment: Payment) => {
38 setActive(payment);
39 setOpen(true);
40 };
41
42 const confirmApproval = () => {
43 if (active) {
44 setApproved((prev) => new Set(prev).add(active.id));
45 }
46 setOpen(false);
47 setActive(null);
48 };
49
50 const activeFee = active ? data.fees[active.scheme as keyof typeof data.fees] : 0;
51
52 return (
53 <Stack gap="6">
54 <Heading level={1}>Payments awaiting approval</Heading>
55 <Card>
56 <CardHeader>
57 <CardTitle>Company payments</CardTitle>
58 </CardHeader>
59 <Table aria-label="Payments awaiting approval">
60 <TableHead>
61 <TableRow>
62 <TableHeader>Beneficiary</TableHeader>
63 <TableHeader>IBAN</TableHeader>
64 <TableHeader>Due date</TableHeader>
65 <TableHeader numeric>Amount ({data.currency})</TableHeader>
66 <TableHeader>Action</TableHeader>
67 </TableRow>
68 </TableHead>
69 <TableBody>
70 {data.payments.map((payment) => {
71 const isApproved = approved.has(payment.id);
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 <Button size="sm" onClick={() => openApproval(payment)}>
95 Approve
96 </Button>
97 )}
98 </TableCell>
99 </TableRow>
100 );
101 })}
102 </TableBody>
103 </Table>
104 </Card>
105
106 <Dialog open={open} onOpenChange={setOpen}>
107 <DialogContent
108 title="Approve payment?"
109 description="Review the details before confirming."
110 size="md"
111 >
112 {active && (
113 <Stack gap="4">
114 <DataList
115 items={[
116 { label: "Beneficiary", value: active.beneficiary },
117 {
118 label: "IBAN",
119 value: (
120 <Text as="span" mono size="sm">
121 {active.iban}
122 </Text>
123 ),
124 },
125 {
126 label: "Amount",
127 value: (
128 <FormatNumber
129 value={active.amount}
130 format="currency"
131 currency={data.currency}
132 />
133 ),
134 },
135 {
136 label: "Fee",
137 value: (
138 <FormatNumber
139 value={activeFee}
140 format="currency"
141 currency={data.currency}
142 />
143 ),
144 },
145 {
146 label: "Total",
147 value: (
148 <FormatNumber
149 value={active.amount + activeFee}
150 format="currency"
151 currency={data.currency}
152 />
153 ),
154 },
155 ]}
156 />
157 <DialogFooter>
158 <DialogClose asChild>
159 <Button variant="outline">Cancel</Button>
160 </DialogClose>
161 <Button onClick={confirmApproval}>Confirm</Button>
162 </DialogFooter>
163 </Stack>
164 )}
165 </DialogContent>
166 </Dialog>
167 </Stack>
168 );
169 }
170
docs-show, docs-show, docs-show
4 docs-show, docs-show, docs-show, docs-show 8,321 96 $0.0000
5 docs-show, docs-show, docs-show 2,879 72 $0.0000
6 list_files 3,035 56 $0.0000
7 write_file 8,673 1,907 $0.0000
8 write_file 1,964 1,349 $0.0000
9 stories-changed 1,417 102 $0.0000