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 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 read_file 1,407 40 $0.0000 1 list_components 1,869 145 $0.0000 2 write_file 4,463 1,942 $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 Badge,
15 Button,
16 Alert,
17 Toaster,
18 toast,
19 } from "@vektos/ds";
20
21 const Page: React.FC = () => {
22 const { mandates, retryDays } = data;
23 const [cancelledIds, setCancelledIds] = useState<Set<string>>(new Set());
24
25 // count failed mandates (status === "failed")
26 const failedCount = mandates.filter((m) => m.status === "failed").length;
27
28 // show top alert if there are failed collections
29 const alert = failedCount > 0 && (
30 <Alert tone="warning">
31 {failedCount} collections failed. Each creditor will try again in{" "}{retryDays}
32 {" "}{retryDays === 1 ? "working day" : "working days"}.
33 </Alert>
34 );
35
36 // handle cancel action: add to cancelledIds and show toast
37 const handleCancel = (mandateId: string, creditor: string) => {
38 setCancelledIds((prev) => {
39 const newSet = new Set(prev);
40 newSet.add(mandateId);
41 setCancelledIds(newSet);
42 toast({
43 title: "Mandate cancelled",
44 description: `The mandate for ${creditor} has been cancelled.`,
45 tone: "success",
46 });
47 return newSet;
48 });
49 };
50
51 // render each mandate row
52 const rows = mandates.map((mandate) => {
53 const isCancelled = cancelledIds.has(mandate.id);
54 const isFailed = mandate.status === "failed";
55 const isActive = mandate.status === "active";
56
57 return (
58 <TableRow key={mandate.id}>
59 <TableCell>{mandate.creditor}</TableCell>
60 <TableCell>{mandate.id}</TableCell>
61 <TableCell>{mandate.lastCollection.date}</TableCell>
62 <TableCell>{mandate.lastCollection.amount} EUR</TableCell>
63 <TableCell>
64 <Badge tone={
65 isFailed ? "danger" : isActive ? "success" : "neutral"
66 }>{mandate.status}</Badge>
67 </TableCell>
68 <TableCell>
69 {isCancelled ? (
70 "Cancelled"
71 ) : (isActive || isFailed) ? (
72 <Button
73 onClick={() => {
74 if (window.confirm(`Are you sure you want to cancel the mandate for ${mandate.creditor}?`)) {
75 handleCancel(mandate.id, mandate.creditor);
76 }
77 }}
78 >
79 Cancel mandate
80 </Button>
81 ) : null}
82 </TableCell>
83 </TableRow>
84 );
85 });
86
87 return (
88 <div>
89 {alert}
90 <Toaster />
91 <Card>
92 <Table>
93 <TableHead>
94 <TableRow>
95 <TableHeader>Creditor</TableHeader>
96 <TableHeader>Reference</TableHeader>
97 <TableHeader>Last collection</TableHeader>
98 <TableHeader>Amount</TableHeader>
99 <TableHeader>Status</TableHeader>
100 <TableHeader>Action</TableHeader>
101 </TableRow>
102 </TableHead>
103 <TableBody>{rows}</TableBody>
104 </Table>
105 </Card>
106 </div>
107 );
108 };
109
110 export default Page;
4 write_file 3,750 1,661 $0.0000
5 check_code 1,246 792 $0.0000