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 1 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 184 31 $0.0000 1 read_file 101 29 $0.0000 2 list_files 486 41 $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 DialogTrigger,
18 FormatDate,
19 FormatNumber,
20 Heading,
21 Stack,
22 Table,
23 TableBody,
24 TableCell,
25 TableHead,
26 TableHeader,
27 TableRow,
28 Text,
29 Toaster,
30 toast,
31 } from "@vektos/ds";
32
33 type MandateStatus = "active" | "failed" | "cancelled";
34
35 interface Mandate {
36 id: string;
37 creditor: string;
38 lastCollection: { date: string; amount: number };
39 status: MandateStatus;
40 }
41
42 export default function Page() {
43 const [mandates, setMandates] = useState<Mandate[]>(() =>
44 data.mandates.map((m) => ({
45 id: m.id,
46 creditor: m.creditor,
47 lastCollection: { date: m.lastCollection.date, amount: m.lastCollection.amount },
48 status: m.status as MandateStatus,
49 }))
50 );
51
52 const failed = mandates.filter((m) => m.status === "failed");
53
54 const cancelMandate = (id: string, creditor: string) => {
55 setMandates((prev) =>
56 prev.map((m) => (m.id === id ? { ...m, status: "cancelled" } : m))
57 );
58 toast({
59 title: "Mandate cancelled",
60 description: `${creditor}'s mandate has been cancelled.`,
61 tone: "success",
62 });
63 };
64
65 return (
66 <Stack gap="6">
67 <Heading level={1}>Direct debit mandates</Heading>
68
69 {failed.length > 0 && (
70 <Alert tone="warning" title={`${failed.length} collection${failed.length > 1 ? "s" : ""} failed`}>
71 Each creditor will try again in {data.retryDays} working days.
72 </Alert>
73 )}
74
75 <Card>
76 <CardHeader>
77 <CardTitle>Direct debit mandates</CardTitle>
78 <CardDescription>{data.company}</CardDescription>
79 </CardHeader>
80 <Table aria-label="Direct debit mandates">
81 <TableHead>
82 <TableRow>
83 <TableHeader>Creditor</TableHeader>
84 <TableHeader>Mandate reference</TableHeader>
85 <TableHeader>Last collection</TableHeader>
86 <TableHeader>Status</TableHeader>
87 <TableHeader>Actions</TableHeader>
88 </TableRow>
89 </TableHead>
90 <TableBody>
91 {mandates.map((m) => (
92 <TableRow key={m.id}>
93 <TableCell>{m.creditor}</TableCell>
94 <TableCell>
95 <Text mono size="sm">
96 {m.id}
97 </Text>
98 </TableCell>
99 <TableCell>
100 <Stack gap="1">
101 <FormatDate value={m.lastCollection.date} dateStyle="medium" />
102 <FormatNumber
103 value={m.lastCollection.amount}
104 format="currency"
105 currency={data.currency}
106 />
107 </Stack>
108 </TableCell>
109 <TableCell>
110 <Badge
111 tone={
112 m.status === "active"
113 ? "success"
114 : m.status === "failed"
115 ? "danger"
116 : "neutral"
117 }
118 >
119 {m.status.charAt(0).toUpperCase() + m.status.slice(1)}
120 </Badge>
121 </TableCell>
122 <TableCell>
123 {m.status === "active" || m.status === "failed" ? (
124 <Dialog role="alertdialog">
125 <DialogTrigger asChild>
126 <Button variant="outline" size="sm">
127 Cancel mandate
128 </Button>
129 </DialogTrigger>
130 <DialogContent
131 title={`Cancel mandate for ${m.creditor}?`}
132 description="This cancels the direct debit mandate."
133 >
134 <DialogFooter>
135 <DialogClose asChild>
136 <Button variant="outline">Keep mandate</Button>
137 </DialogClose>
138 <DialogClose asChild>
139 <Button
140 onClick={() => cancelMandate(m.id, m.creditor)}
141 >
142 Cancel mandate
143 </Button>
144 </DialogClose>
145 </DialogFooter>
146 </DialogContent>
147 </Dialog>
148 ) : null}
149 </TableCell>
150 </TableRow>
151 ))}
152 </TableBody>
153 </Table>
154 </Card>
155
156 <Toaster />
157 </Stack>
158 );
159 }
160
9 docs-show, docs-show, docs-show 5,661 85 $0.0000
10 docs-show, docs-show, docs-show 2,933 77 $0.0000
11 docs-show, docs-show, docs-show, docs-show 2,080 670 $0.0000
12 write_file 2,914 3,586 $0.0000
13 stories-changed 3,644 115 $0.0000