Runs / payment-approval Batch Runs from different design-system versions should not be compared.
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 read_file 1,376 40 $0.0000 1 list_components 1,918 61 $0.0000 2 get_component 4,428 574 $0.0000 3
Design system
cdb5d9e77633
Output cap The provider's default 10
11 DialogClose,
12 } from "@vektos/ds";
13 import { Button } from "@vektos/ds";
14 import { Badge } from "@vektos/ds";
15 import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@vektos/ds";
16
17 type Payment = {
18 id: string;
19 beneficiary: string;
20 iban: string;
21 amount: number;
22 dueDate: string;
23 scheme: "sepa" | "instant";
24 reference: string;
25 };
26
27 const payments = data.payments;
28
29 const [dialogOpen, setDialogOpen] = useState(false);
30 const [selectedPayment, setSelectedPayment] = useState<Payment | null>(null);
31 const [approved, setApproved] = useState<Set<string>>(new Set());
32
33 function calculateFee(amount: number, scheme: "sepa" | "instant") {
34 const percent = data.fees[scheme] ?? 0;
35 return Number((amount * (percent / 100)).toFixed(2));
36 }
37
38 function handleConfirm() {
39 if (!selectedPayment) return;
40 setApproved((prev) => {
41 const next = new Set(prev);
42 next.add(selectedPayment.id);
43 return next;
44 });
45 setSelectedPayment(null);
46 setDialogOpen(false);
47 }
48
49 export default function Page() {
50 return (
51 <>
52 <h1>Payments Waiting for Approval</h1>
53 <Table aria-label="Payments">
54 <TableHead>
55 <TableRow>
56 <TableHeader>Beneficiary</TableHeader>
57 <TableHeader>IBAN</TableHeader>
58 <TableHeader>Due Date</TableHeader>
59 <TableHeader>Amount</TableHeader>
60 <TableHeader>Action</TableHeader>
61 </TableRow>
62 </TableHead>
63 <TableBody>
64 {payments.map((p) => (
65 <TableRow key={p.id}>
66 <TableCell>{p.beneficiary}</TableCell>
67 <TableCell>{p.iban}</TableCell>
68 <TableCell>{p.dueDate}</TableCell>
69 <TableCell>{p.amount} EUR</TableCell>
70 <TableCell>
71 {approved.has(p.id) ? (
72 <Badge tone="success">Approved</Badge>
73 ) : (
74 <Button
75 variant="outline"
76 size="sm"
77 onClick={() => {
78 setSelectedPayment(p as Payment);
79 setDialogOpen(true);
80 }}
81 >
82 Approve
83 </Button>
84 )}
85 </TableCell>
86 </TableRow>
87 ))}
88 </TableBody>
89 </Table>
90
91 <Dialog
92 open={dialogOpen}
93 onOpenChange={(detail) => setDialogOpen(detail.open)}
94 >
95 <DialogTrigger asChild>
96 <Button variant="outline" size="sm">Approve</Button>
97 </DialogTrigger>
98 <DialogContent
99 title="Approve payment"
100 description={`Are you sure you want to approve the payment to ${selectedPayment?.beneficiary ?? ""}?`}
101 >
102 <DialogFooter>
103 <DialogClose asChild>
104 <Button variant="outline">Cancel</Button>
105 </DialogClose>
106 <Button onClick={handleConfirm}>Confirm</Button>
107 </DialogFooter>
108
109 {selectedPayment && (
110 <div className="space-y-3 mt-4">
111 <p>
112 <strong>Beneficiary:</strong> {selectedPayment.beneficiary}
113 </p>
114 <p>
115 <strong>IBAN:</strong> {selectedPayment.iban}
116 </p>
117 <p>
118 <strong>Amount:</strong> {selectedPayment.amount} EUR
119 </p>
120 <p>
121 <strong>Fee ({selectedPayment.scheme}):</strong>
122 {calculateFee(selectedPayment.amount, selectedPayment.scheme)} EUR
123 </p>
124 <p>
125 <strong>Total:</strong>{" "}
126 {selectedPayment.amount + calculateFee(
127 selectedPayment.amount,
128 selectedPayment.scheme
129 )} EUR
130 </p>
131 </div>
132 )}
133 </DialogContent>
134 </Dialog>
135 </>
136 );
137 }
Cannot read properties of null (reading 'useState')
4 get_component 2,379 30 $0.0000
5 get_component 1,378 31 $0.0000
6 write_file 2,027 2,527 $0.0000
7 check_code 4,581 1,058 $0.0000
8 write_file 1,821 1,722 $0.0000
9 check_code 3,570 1,026 $0.0000
10 write_file 624 1,656 $0.0000
11 check_code 2,306 1,014 $0.0000
12 write_file 1,400 2,496 $0.0000
13 check_code 3,923 1,008 $0.0000
14 write_file 2,923 2,161 $0.0000
15 check_code 3,015 1,022 $0.0000
16 write_file 2,144 2,091 $0.0000
18 write_file 1,103 1,312 $0.0000
19 check_code 2,442 978 $0.0000