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