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, get_guidelines, list_components 163 55 $0.0000 1 read_file 5,002 29 $0.0000 2 list_files 6,091 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 Mandate = (typeof data.mandates)[number];
33
34 const statusTone = {
35 active: "success",
36 failed: "danger",
37 cancelled: "neutral",
38 } as const;
39
40 const statusLabel = {
41 active: "Active",
42 failed: "Failed",
43 cancelled: "Cancelled",
44 } as const;
45
46 export default function Page() {
47 const [mandates, setMandates] = useState<Mandate[]>(() => [...data.mandates]);
48
49 const failedCount = mandates.filter((m) => m.status === "failed").length;
50
51 function cancelMandate(id: string) {
52 setMandates((prev) =>
53 prev.map((m) => (m.id === id ? { ...m, status: "cancelled" } : m)),
54 );
55 toast({ title: "Mandate cancelled", tone: "success" });
56 }
57
58 return (
59 <div className="vektos">
60 <Stack gap="6" marginBlock="6" marginInline="6">
61 <Stack gap="1">
62 <Heading level={1}>Direct debit mandates</Heading>
63 <Text tone="muted" size="sm">
64 {data.company}
65 </Text>
66 </Stack>
67
68 {failedCount > 0 && (
69 <Alert tone="danger" title={`${failedCount} collection${failedCount === 1 ? "" : "s"} failed`}>
70 Each creditor will try again in {data.retryDays} working days.
71 </Alert>
72 )}
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Mandates</CardTitle>
77 </CardHeader>
78 <Table aria-label="Direct debit mandates">
79 <TableHead>
80 <TableRow>
81 <TableHeader>Creditor</TableHeader>
82 <TableHeader>Mandate reference</TableHeader>
83 <TableHeader>Last collection</TableHeader>
84 <TableHeader>Status</TableHeader>
85 <TableHeader>Actions</TableHeader>
86 </TableRow>
87 </TableHead>
88 <TableBody>
89 {mandates.map((mandate) => (
90 <TableRow key={mandate.id}>
91 <TableCell>{mandate.creditor}</TableCell>
92 <TableCell>
93 <Text as="span" mono size="sm">
94 {mandate.id}
95 </Text>
96 </TableCell>
97 <TableCell>
98 <Stack gap="1">
99 <Text size="sm">
100 <FormatDate value={mandate.lastCollection.date} dateStyle="medium" />
101 </Text>
102 <Text size="sm" tone="muted" numeric>
103 <FormatNumber
104 value={mandate.lastCollection.amount}
105 format="currency"
106 currency={data.currency}
107 />
108 </Text>
109 </Stack>
110 </TableCell>
111 <TableCell>
112 <Badge tone={statusTone[mandate.status]}>
113 {statusLabel[mandate.status]}
114 </Badge>
115 </TableCell>
116 <TableCell>
117 {mandate.status !== "cancelled" && (
118 <Dialog role="alertdialog">
119 <DialogTrigger asChild>
120 <Button variant="outline" size="sm">
121 Cancel mandate
122 </Button>
123 </DialogTrigger>
124 <DialogContent
125 title={`Cancel mandate for ${mandate.creditor}?`}
126 description="Future collections from this creditor will stop."
127 size="md"
128 >
129 <DialogFooter>
130 <DialogClose asChild>
131 <Button variant="outline">Keep mandate</Button>
132 </DialogClose>
133 <DialogClose asChild>
134 <Button
135 onClick={() => cancelMandate(mandate.id)}
136 >
137 Cancel mandate
138 </Button>
139 </DialogClose>
140 </DialogFooter>
141 </DialogContent>
142 </Dialog>
143 )}
144 </TableCell>
145 </TableRow>
146 ))}
147 </TableBody>
148 </Table>
149 </Card>
150 </Stack>
151 <Toaster />
152 </div>
153 );
154 }
155
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 78 228 $0.0000
5 get_component, get_component, get_component, get_component, get_component 7,191 122 $0.0000
6 write_file 5,459 3,479 $0.0000
7 write_file 3,522 1,126 $0.0000