Runs / direct-debits 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 2 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,390 39 $0.0000 1 list_components 1,851 307 $0.0000 2 write_file 4,607 2,662 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Toaster,
7 toast,
8 } from "@vektos/ds";
9 import {
10 Table,
11 TableHead,
12 TableBody,
13 TableRow,
14 TableHeader,
15 TableCell,
16 Card,
17 CardHeader,
18 CardTitle,
19 CardBody,
20 Button,
21 Dialog,
22 DialogTrigger,
23 DialogContent,
24 DialogFooter,
25 Alert,
26 } from "@vektos/ds";
27
28 export default function Page() {
29 const [mandates, setMandates] = useState(data.mandates);
30 const [openCancel, setOpenCancel] = useState<string | null>(null);
31
32 const failedCount = mandates.filter((m) => m.status === "failed").length;
33
34 // Show top alert when some collections failed
35 const alert = failedCount > 0 && (
36 <Alert tone="information">
37 {failedCount} collection{failedCount > 1 ? "s" : ""} failed. Each creditor will try again in{" "}{data.retryDays} working day{data.retryDays > 1 ? "s" : ""}.</Alert>
38 );
39
40 const handleCancel = (id: string) => {
41 setOpenCancel(id);
42 };
43
44 const handleConfirm = (id: string, creditor: string) => {
45 const newMandates = mandates.map((m) =>
46 m.id === id ? { ...m, status: "cancelled" } : m
47 );
48 setMandates(newMandates);
49 toast({
50 title: "Mandate cancelled",
51 description: `The mandate for ${creditor} has been cancelled.`,
52 tone: "success",
53 });
54 setOpenCancel(null);
55 };
56
57 const handleCancelClose = () => setOpenCancel(null);
58
59 return (
60 <>
61 <Toaster />
62 {alert}
63 <Card>
64 <CardHeader>
65 <CardTitle>Direct debit mandates</CardTitle>
66 </CardHeader>
67 <CardBody>
68 <Table>
69 <TableHead>
70 <TableRow>
71 <TableHeader>Creditor</TableHeader>
72 <TableHeader>Mandate reference</TableHeader>
73 <TableHeader>Last collection</TableHeader>
74 <TableHeader>Amount</TableHeader>
75 <TableHeader>Status</TableHeader>
76 <TableHeader>Action</TableHeader>
77 </TableRow>
78 </TableHead>
79 <TableBody>
80 {mandates.map((m) => (
81 <TableRow key={m.id}>
82 <TableCell>{m.creditor}</TableCell>
83 <TableCell>{m.id}</TableCell>
84 <TableCell>{m.lastCollection.date}</TableCell>
85 <TableCell>{m.lastCollection.amount} {data.currency}</TableCell>
86 <TableCell>
87 <span>{m.status}</span>
88 </TableCell>
89 <TableCell>
90 {["active", "failed"].includes(m.status) ? (
91 <Button
92 onClick={() => handleCancel(m.id)}
93 variant="link"
94 >
95 Cancel mandate
96 </Button>
97 ) : null}
98 </TableCell>
99 </TableRow>
100 ))}
101 </TableBody>
102 </Table>
103 </CardBody>
104 </Card>
105
106 {/* Cancellation dialog */}
107 {openCancel && (
108 <Dialog open={true} onOpenChange={(open) => open ? undefined : setOpenCancel(null)}>
109 <DialogTrigger>—</DialogTrigger>
110 <DialogContent>
111 <p>
112 Are you sure you want to cancel the mandate for{" "}{openCancel}{" "}?
113 </p>
114 <DialogFooter>
115 <Button onClick={() => handleConfirm(openCancel, openCancel)} variant="solid">
116 Cancel mandate
117 </Button>
118 <Button onClick={handleCancelClose}>Close</Button>
119 </DialogFooter>
120 </DialogContent>
121 </Dialog>
122 )}
123 </>
124 );
125 }
4 check_code 1,959 1,023 $0.0000