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 list_files 163 35 $0.0000 1 read_file, get_guidelines 84 44 $0.0000 2 list_components, list_tokens 3,310 44 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Alert,
7 Badge,
8 Button,
9 Card,
10 CardHeader,
11 CardTitle,
12 Dialog,
13 DialogClose,
14 DialogContent,
15 DialogFooter,
16 DialogTrigger,
17 FormatDate,
18 FormatNumber,
19 Heading,
20 Stack,
21 Table,
22 TableBody,
23 TableCell,
24 TableHead,
25 TableHeader,
26 TableRow,
27 Text,
28 Toaster,
29 toast,
30 } from "@vektos/ds";
31
32 type MandateStatus = "active" | "failed" | "cancelled";
33
34 type Mandate = {
35 id: string;
36 creditor: string;
37 lastCollection: { date: string; amount: number };
38 status: MandateStatus;
39 };
40
41 export default function DirectDebitMandatesPage() {
42 const [mandates, setMandates] = useState<Mandate[]>(
43 data.mandates as Mandate[],
44 );
45
46 const failedCount = mandates.filter((m) => m.status === "failed").length;
47
48 const cancelMandate = (id: string, creditor: string) => {
49 setMandates((prev) =>
50 prev.map((m) => (m.id === id ? { ...m, status: "cancelled" } : m)),
51 );
52 toast({
53 title: "Mandate cancelled",
54 description: `${creditor}'s mandate has been cancelled.`,
55 tone: "success",
56 });
57 };
58
59 const statusTone = (status: MandateStatus) =>
60 status === "active" ? "success" : status === "failed" ? "danger" : "neutral";
61
62 const statusLabel = (status: MandateStatus) =>
63 status.charAt(0).toUpperCase() + status.slice(1);
64
65 return (
66 <>
67 <Stack gap="6">
68 <Stack gap="1">
69 <Heading level={1}>Direct debit mandates</Heading>
70 <Text tone="muted" size="sm">
71 {data.company}
72 </Text>
73 </Stack>
74
75 {failedCount > 0 && (
76 <Alert
77 tone="warning"
78 title={`${failedCount} collection${
79 failedCount === 1 ? "" : "s"
80 } failed`}
81 >
82 Each creditor will try again in {data.retryDays} working days.
83 </Alert>
84 )}
85
86 <Card>
87 <CardHeader>
88 <CardTitle>Mandates</CardTitle>
89 </CardHeader>
90 <Table aria-label="Direct debit mandates">
91 <TableHead>
92 <TableRow>
93 <TableHeader>Creditor</TableHeader>
94 <TableHeader>Mandate reference</TableHeader>
95 <TableHeader>Last collection</TableHeader>
96 <TableHeader>Status</TableHeader>
97 <TableHeader>Actions</TableHeader>
98 </TableRow>
99 </TableHead>
100 <TableBody>
101 {mandates.map((mandate) => (
102 <TableRow key={mandate.id}>
103 <TableCell>{mandate.creditor}</TableCell>
104 <TableCell>
105 <Text as="span" mono size="sm">
106 {mandate.id}
107 </Text>
108 </TableCell>
109 <TableCell>
110 <Stack
111 flexDirection="row"
112 gap="2"
113 alignItems="center"
114 >
115 <FormatDate value={mandate.lastCollection.date} />
116 <Text as="span" tone="muted">
117 ·
118 </Text>
119 <FormatNumber
120 value={mandate.lastCollection.amount}
121 format="currency"
122 currency={data.currency}
123 />
124 </Stack>
125 </TableCell>
126 <TableCell>
127 <Badge tone={statusTone(mandate.status)}>
128 {statusLabel(mandate.status)}
129 </Badge>
130 </TableCell>
131 <TableCell>
132 {(mandate.status === "active" ||
133 mandate.status === "failed") && (
134 <Dialog>
135 <DialogTrigger asChild>
136 <Button variant="outline" size="sm">
137 Cancel mandate
138 </Button>
139 </DialogTrigger>
140 <DialogContent
141 title={`Cancel mandate for ${mandate.creditor}?`}
142 description="The creditor will no longer be able to collect payments under this mandate."
143 >
144 <DialogFooter>
145 <DialogClose asChild>
146 <Button variant="outline">Keep mandate</Button>
147 </DialogClose>
148 <DialogClose asChild>
149 <Button
150 onClick={() =>
151 cancelMandate(mandate.id, mandate.creditor)
152 }
153 >
154 Cancel mandate
155 </Button>
156 </DialogClose>
157 </DialogFooter>
158 </DialogContent>
159 </Dialog>
160 )}
161 </TableCell>
162 </TableRow>
163 ))}
164 </TableBody>
165 </Table>
166 </Card>
167 </Stack>
168 <Toaster />
169 </>
170 );
171 }
4 get_component, get_component, get_component, get_component, get_component 117 106 $0.0000
5 get_component, get_component, get_component, get_component 11,232 99 $0.0000
6 get_component, get_component, get_component, get_component 3,176 86 $0.0000
7 list_files 3,570 1,570 $0.0000
8 read_file 1,634 160 $0.0000
10 write_file 977 2,548 $0.0000
11 write_file 23,901 1,094 $0.0000