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 1,376 53 $0.0000 1 read_file 1,449 38 $0.0000 2 list_components 1,989 164 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 Card,
8 Table,
9 TableHead,
10 TableBody,
11 TableRow,
12 TableHeader,
13 TableCell,
14 Button,
15 Dialog,
16 DialogFooter,
17 DialogClose,
18 Badge,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22
23 const getFeeRate = (scheme: string): number => {
24 if (scheme === "sepa") return 0;
25 if (scheme === "instant") return 1.5;
26 return 0;
27 };
28
29 export default function PaymentsPage() {
30 const [approvedIds, setApprovedIds] = useState<Set<string>>(new Set());
31 const [openDialog, setOpenDialog] = useState(false);
32 const [approvingId, setApprovingId] = useState<string | null>(null);
33
34 const payments = data.payments;
35
36 const handleApprove = (id: string) => {
37 setApprovingId(id);
38 setOpenDialog(true);
39 };
40
41 const closeDialog = () => {
42 setOpenDialog(false);
43 setApprovingId(null);
44 };
45
46 const confirmApprove = () => {
47 if (approvingId) {
48 setApprovedIds((prev) => new Set([...prev, approvingId]));
49 }
50 closeDialog();
51 };
52
53 const currentPay = approvingId ? data.payments.find((p) => p.id === approvingId) : undefined;
54
55 return (
56 <Card>
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>Amount (EUR)</TableHeader>
64 <TableHeader>Action</TableHeader>
65 </TableRow>
66 </TableHead>
67 <TableBody>
68 {payments.map((p) => (
69 <TableRow key={p.id}>
70 <TableCell>{p.beneficiary}</TableCell>
71 <TableCell>{p.iban}</TableCell>
72 <TableCell>{new Date(p.dueDate).toLocaleDateString()}</TableCell>
73 <TableCell numeric>{p.amount}</TableCell>
74 <TableCell>
75 {!approvedIds.has(p.id) && (
76 <Button onClick={() => handleApprove(p.id)}>
77 Approve
78 </Button>
79 )}
80 {approvedIds.has(p.id) && (
81 <Badge tone="success">Approved</Badge>
82 )}
83 </TableCell>
84 </TableRow>
85 ))}
86 </TableBody>
87 </Table>
88
89 {openDialog && approvingId && currentPay && (
90 <Dialog open={true} onOpenChange={(open) => { if (!open) closeDialog(); }}>
91 <Stack>
92 <Text>Beneficiary: {currentPay.beneficiary}</Text>
93 <Text>IBAN: {currentPay.iban}</Text>
94 <Text>Amount: {currentPay.amount} EUR</Text>
95 <Text>
96 Fee ({currentPay.scheme}):{" "}
97 {(currentPay.amount * getFeeRate(currentPay.scheme)) / 100}
98 EUR
99 </Text>
100 <Text>Total:{" "}
101 {(currentPay.amount + (currentPay.amount * getFeeRate(currentPay.scheme)) / 100).toFixed(2)}
102 EUR</Text>
103 </Stack>
104 <DialogFooter>
105 <DialogClose asChild>
106 <Button variant="outline">Cancel</Button>
107 </DialogClose>
108 <Button onClick={confirmApprove}>Confirm</Button>
109 </DialogFooter>
110 </Dialog>
111 )}
112 </Card>
113 );
114 }
4 get_component 6,452 62 $0.0000
5 get_component 1,291 43 $0.0000
6 get_component 1,952 1,243 $0.0000
7 write_file 1,974 4,593 $0.0000
8 check_code 4,498 847 $0.0000
10 write_file 2,157 2,279 $0.0000
11 check_code 271 824 $0.0000
12 write_file 1,259 3,128 $0.0000
13 check_code 4,414 833 $0.0000
14 write_file 3,328 1,543 $0.0000
15 check_code 706 864 $0.0000