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 2 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,212 60 $0.0000 1 list_components 1,694 326 $0.0000 2 list_files 4,469 81 $0.0000 3
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 } from "@vektos/ds";
19
20 export default function Page() {
21 const [mandates, setMandates] = useState(data.mandates);
22
23 const failedCount = mandates.filter((m) => m.status === "failed").length;
24
25 const handleCancel = (id: string, creditor: string) => {
26 if (window.confirm(`Are you sure you want to cancel the mandate for ${creditor}?`)) {
27 const updated = mandates.map((m) =>
28 m.id === id ? { ...m, status: "cancelled" } : m,
29 );
30 setMandates(updated);
31 toast({
32 title: "Mandate cancelled",
33 tone: "success",
34 });
35 }
36 };
37
38 return (
39 <>
40 <Toaster />
41 {failedCount > 0 && (
42 <Alert tone="warning">
43 {failedCount} failed collection{failedCount > 1 ? "s" : ""}.
44 Each creditor will try again in {data.retryDays} working days.
45 </Alert>
46 )}
47 <Card>
48 <Table>
49 <TableHead>
50 <TableRow>
51 <TableHeader>Creditor</TableHeader>
52 <TableHeader>Mandate reference</TableHeader>
53 <TableHeader>Last collection</TableHeader>
54 <TableHeader>Status</TableHeader>
55 <TableHeader>Actions</TableHeader>
56 </TableRow>
57 </TableHead>
58 <TableBody>
59 {mandates.map((m) => (
60 <TableRow key={m.id}>
61 <TableCell>{m.creditor}</TableCell>
62 <TableCell>{m.id}</TableCell>
63 <TableCell>
64 {m.lastCollection.date} — {m.lastCollection.amount} {data.currency}
65 </TableCell>
66 <TableCell>
67 <Badge
68 tone={
69 m.status === "active"
70 ? "default"
71 : m.status === "failed"
72 ? "destructive"
73 : "default"
74 }
75 >
76 {m.status}
77 </Badge>
78 </TableCell>
79 <TableCell>
80 {m.status !== "cancelled" && (
81 <Button onClick={() => handleCancel(m.id, m.creditor)}>
82 Cancel mandate
83 </Button>
84 )}
85 </TableCell>
86 </TableRow>
87 ))}
88 </TableBody>
89 </Table>
90 </Card>
91 </>
92 );
93 }