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 1 rule. “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 180 31 $0.0000 1 read_file, get_guidelines 225 42 $0.0000 2 list_components, list_tokens 3,385 40 $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 CardDescription,
11 CardHeader,
12 CardTitle,
13 Dialog,
14 DialogClose,
15 DialogContent,
16 DialogFooter,
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 interface Mandate {
33 id: string;
34 creditor: string;
35 lastCollection: { date: string; amount: number };
36 status: "active" | "failed" | "cancelled";
37 }
38
39 const initialMandates: Mandate[] = data.mandates.map((m) => ({
40 id: m.id,
41 creditor: m.creditor,
42 lastCollection: { date: m.lastCollection.date, amount: m.lastCollection.amount },
43 status: m.status as Mandate["status"],
44 }));
45
46 export default function Page() {
47 const [mandates, setMandates] = useState<Mandate[]>(initialMandates);
48 const [toCancel, setToCancel] = useState<Mandate | null>(null);
49 const [open, setOpen] = useState(false);
50
51 const failedCount = mandates.filter((m) => m.status === "failed").length;
52
53 function requestCancel(mandate: Mandate) {
54 setToCancel(mandate);
55 setOpen(true);
56 }
57
58 function confirmCancel() {
59 if (!toCancel) return;
60 setMandates((prev) =>
61 prev.map((m) => (m.id === toCancel.id ? { ...m, status: "cancelled" } : m))
62 );
63 toast({
64 title: "Mandate cancelled",
65 description: `${toCancel.creditor}'s mandate has been cancelled.`,
66 tone: "success",
67 });
68 setOpen(false);
69 setToCancel(null);
70 }
71
72 function handleOpenChange(details: unknown) {
73 const next =
74 typeof details === "boolean"
75 ? details
76 : (details as { open?: boolean })?.open ?? false;
77 setOpen(next);
78 if (!next) setToCancel(null);
79 }
80
81 return (
82 <Stack gap="6" maxWidth="page" width="full" marginInline="4" marginBlock="8">
83 <Stack gap="2">
84 <Heading level={1}>Direct debit mandates</Heading>
85 <Text tone="muted" size="sm">
86 {data.company}
87 </Text>
88 </Stack>
89
90 {failedCount > 0 && (
91 <Alert tone="warning" title={`${failedCount} collection${failedCount === 1 ? "" : "s"} failed`}>
92 Each creditor will try again in {data.retryDays} working days.
93 </Alert>
94 )}
95
96 <Card>
97 <CardHeader>
98 <CardTitle>Mandates</CardTitle>
99 <CardDescription>Manage the mandates authorised for direct debit.</CardDescription>
100 </CardHeader>
101 <Table aria-label="Direct debit mandates">
102 <TableHead>
103 <TableRow>
104 <TableHeader>Creditor</TableHeader>
105 <TableHeader>Mandate reference</TableHeader>
106 <TableHeader>Last collection</TableHeader>
107 <TableHeader>Status</TableHeader>
108 <TableHeader>Actions</TableHeader>
109 </TableRow>
110 </TableHead>
111 <TableBody>
112 {mandates.map((mandate) => (
113 <TableRow key={mandate.id}>
114 <TableCell>{mandate.creditor}</TableCell>
115 <TableCell>
116 <Text as="span" mono size="sm">
117 {mandate.id}
118 </Text>
119 </TableCell>
120 <TableCell>
121 <Stack gap="1">
122 <FormatDate value={mandate.lastCollection.date} dateStyle="medium" />
123 <FormatNumber
124 value={mandate.lastCollection.amount}
125 format="currency"
126 currency={data.currency}
127 />
128 </Stack>
129 </TableCell>
130 <TableCell>
131 <Badge
132 tone={
133 mandate.status === "active"
134 ? "success"
135 : mandate.status === "failed"
136 ? "danger"
137 : "neutral"
138 }
139 >
140 {mandate.status === "active"
141 ? "Active"
142 : mandate.status === "failed"
143 ? "Failed"
144 : "Cancelled"}
145 </Badge>
146 </TableCell>
147 <TableCell>
148 {(mandate.status === "active" || mandate.status === "failed") && (
149 <Button variant="outline" size="sm" onClick={() => requestCancel(mandate)}>
150 Cancel mandate
151 </Button>
152 )}
153 </TableCell>
154 </TableRow>
155 ))}
156 </TableBody>
157 </Table>
158 </Card>
159
160 <Dialog open={open} onOpenChange={handleOpenChange}>
161 <DialogContent
162 title={toCancel ? `Cancel mandate for ${toCancel.creditor}?` : "Cancel mandate"}
163 description="The mandate will be cancelled and no further collections will be made."
164 size="md"
165 >
166 <DialogFooter>
167 <DialogClose asChild>
168 <Button variant="outline">Keep mandate</Button>
169 </DialogClose>
170 <Button onClick={confirmCancel}>Cancel mandate</Button>
171 </DialogFooter>
172 </DialogContent>
173 </Dialog>
174
175 <Toaster />
176 </Stack>
177 );
178 }
179
list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 1,023 271 $0.0000
5 list_files 11,428 187 $0.0000
7 write_file 96 6,231 $0.0000
8 check_code 6,287 1,189 $0.0000
9 list_files 1,228 315 $0.0000