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