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 list_files 138 69 $0.0000 1 read_file, get_guidelines 93 47 $0.0000 2 list_components, list_tokens 3,002 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 CardHeader,
11 CardTitle,
12 Dialog,
13 DialogContent,
14 DialogFooter,
15 DialogClose,
16 FormatDate,
17 FormatNumber,
18 Heading,
19 Stack,
20 Table,
21 TableBody,
22 TableCell,
23 TableHead,
24 TableHeader,
25 TableRow,
26 Text,
27 Toaster,
28 toast,
29 } from "@vektos/ds";
30
31 type Mandate = (typeof data.mandates)[number];
32
33 export default function Page() {
34 const [mandates, setMandates] = useState<Mandate[]>(() =>
35 data.mandates.map((m) => ({ ...m }))
36 );
37 const [cancellingId, setCancellingId] = useState<string | null>(null);
38
39 const failedCount = mandates.filter((m) => m.status === "failed").length;
40 const toCancel = mandates.find((m) => m.id === cancellingId) ?? null;
41
42 function confirmCancel() {
43 if (!cancellingId) return;
44 const creditor = toCancel?.creditor;
45 setMandates((prev) =>
46 prev.map((m) =>
47 m.id === cancellingId ? { ...m, status: "cancelled" } : m
48 )
49 );
50 setCancellingId(null);
51 toast({
52 title: "Mandate cancelled",
53 ...(creditor
54 ? { description: `The mandate for ${creditor} has been cancelled.` }
55 : {}),
56 tone: "success",
57 });
58 }
59
60 function statusTone(status: Mandate["status"]) {
61 if (status === "active") return "success";
62 if (status === "failed") return "danger";
63 return "neutral";
64 }
65
66 function statusLabel(status: Mandate["status"]) {
67 if (status === "active") return "Active";
68 if (status === "failed") return "Failed";
69 return "Cancelled";
70 }
71
72 return (
73 <Stack gap="6" marginInline="auto" maxWidth="lg" marginBlock="6">
74 <Stack gap="1">
75 <Heading level={1}>Direct debit mandates</Heading>
76 <Text tone="muted" size="sm">
77 {data.company}
78 </Text>
79 </Stack>
80
81 {failedCount > 0 && (
82 <Alert tone="danger" title={`${failedCount} collection${failedCount === 1 ? "" : "s"} failed`}>
83 Each creditor will try again in {data.retryDays} working days.
84 </Alert>
85 )}
86
87 <Card>
88 <CardHeader>
89 <CardTitle>Mandates</CardTitle>
90 </CardHeader>
91 <Table aria-label="Direct debit mandates">
92 <TableHead>
93 <TableRow>
94 <TableHeader>Creditor</TableHeader>
95 <TableHeader>Reference</TableHeader>
96 <TableHeader>Last collection</TableHeader>
97 <TableHeader numeric>Amount</TableHeader>
98 <TableHeader>Status</TableHeader>
99 <TableHeader>Action</TableHeader>
100 </TableRow>
101 </TableHead>
102 <TableBody>
103 {mandates.map((mandate) => {
104 const cancellable =
105 mandate.status === "active" || mandate.status === "failed";
106 return (
107 <TableRow key={mandate.id}>
108 <TableCell>{mandate.creditor}</TableCell>
109 <TableCell>
110 <Text as="span" mono size="sm">
111 {mandate.id}
112 </Text>
113 </TableCell>
114 <TableCell>
115 <FormatDate value={mandate.lastCollection.date} dateStyle="medium" />
116 </TableCell>
117 <TableCell numeric>
118 <FormatNumber
119 value={mandate.lastCollection.amount}
120 format="currency"
121 currency={data.currency}
122 />
123 </TableCell>
124 <TableCell>
125 <Badge tone={statusTone(mandate.status)}>
126 {statusLabel(mandate.status)}
127 </Badge>
128 </TableCell>
129 <TableCell>
130 {cancellable ? (
131 <Button
132 variant="outline"
133 size="sm"
134 onClick={() => setCancellingId(mandate.id)}
135 >
136 Cancel mandate
137 </Button>
138 ) : null}
139 </TableCell>
140 </TableRow>
141 );
142 })}
143 </TableBody>
144 </Table>
145 </Card>
146
147 <Dialog
148 open={cancellingId !== null}
149 onOpenChange={(details: { open: boolean }) => {
150 if (!details.open) setCancellingId(null);
151 }}
152 role="alertdialog"
153 >
154 <DialogContent
155 title={
156 toCancel ? `Cancel mandate for ${toCancel.creditor}?` : "Cancel mandate?"
157 }
158 description={
159 toCancel
160 ? `The direct debit mandate for ${toCancel.creditor} will be cancelled.`
161 : undefined
162 }
163 >
164 <DialogFooter>
165 <DialogClose asChild>
166 <Button variant="outline">Keep mandate</Button>
167 </DialogClose>
168 <Button onClick={confirmCancel}>Cancel mandate</Button>
169 </DialogFooter>
170 </DialogContent>
171 </Dialog>
172
173 <Toaster />
174 </Stack>
175 );
176 }
177
get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 5,251 169 $0.0000
5 write_file 5,114 4,803 $0.0000
6 check_code 4,886 1,153 $0.0000
7 write_file 1,443 1,801 $0.0000
8 check_code 1,860 1,149 $0.0000