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 28 $0.0000 1 read_file, get_guidelines, list_components 180 58 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,556 161 $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 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 export default function Page() {
35 const [mandates, setMandates] = useState<Mandate[]>([...data.mandates]);
36 const failedCount = mandates.filter((m) => m.status === "failed").length;
37
38 const handleCancel = (id: string, creditor: string) => {
39 setMandates((prev) =>
40 prev.map((m) => (m.id === id ? { ...m, status: "cancelled" } : m)),
41 );
42 toast({
43 title: "Mandate cancelled",
44 description: `${creditor}'s mandate has been cancelled.`,
45 tone: "success",
46 });
47 };
48
49 const statusTone = (status: Mandate["status"]) => {
50 if (status === "active") return "success";
51 if (status === "failed") return "danger";
52 return "neutral";
53 };
54
55 const statusLabel = (status: Mandate["status"]) =>
56 status.charAt(0).toUpperCase() + status.slice(1);
57
58 return (
59 <div className="vektos">
60 <Stack gap="6" margin="6">
61 <Stack gap="2">
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
70 tone="danger"
71 title={`${failedCount} collection${failedCount === 1 ? "" : "s"} failed`}
72 >
73 Each creditor will try again in {data.retryDays} working days.
74 </Alert>
75 )}
76
77 <Card>
78 <CardHeader>
79 <CardTitle>Mandates</CardTitle>
80 </CardHeader>
81 <Table aria-label="Direct debit mandates">
82 <TableHead>
83 <TableRow>
84 <TableHeader>Creditor</TableHeader>
85 <TableHeader>Mandate reference</TableHeader>
86 <TableHeader>Last collection</TableHeader>
87 <TableHeader>Status</TableHeader>
88 <TableHeader>Actions</TableHeader>
89 </TableRow>
90 </TableHead>
91 <TableBody>
92 {mandates.map((m) => (
93 <TableRow key={m.id}>
94 <TableCell>{m.creditor}</TableCell>
95 <TableCell>
96 <Text as="span" mono size="sm">
97 {m.id}
98 </Text>
99 </TableCell>
100 <TableCell>
101 <Stack gap="1">
102 <FormatDate value={m.lastCollection.date} dateStyle="medium" />
103 <FormatNumber
104 value={m.lastCollection.amount}
105 format="currency"
106 currency={data.currency}
107 />
108 </Stack>
109 </TableCell>
110 <TableCell>
111 <Badge tone={statusTone(m.status)}>{statusLabel(m.status)}</Badge>
112 </TableCell>
113 <TableCell>
114 {(m.status === "active" || m.status === "failed") && (
115 <Dialog role="alertdialog">
116 <DialogTrigger asChild>
117 <Button variant="outline" size="sm">
118 Cancel mandate
119 </Button>
120 </DialogTrigger>
121 <DialogContent
122 title={`Cancel mandate for ${m.creditor}?`}
123 description="The mandate will be cancelled and no further collections will be made."
124 >
125 <DialogFooter>
126 <DialogClose asChild>
127 <Button variant="outline">Keep mandate</Button>
128 </DialogClose>
129 <DialogClose asChild>
130 <Button onClick={() => handleCancel(m.id, m.creditor)}>
131 Cancel mandate
132 </Button>
133 </DialogClose>
134 </DialogFooter>
135 </DialogContent>
136 </Dialog>
137 )}
138 </TableCell>
139 </TableRow>
140 ))}
141 </TableBody>
142 </Table>
143 </Card>
144 </Stack>
145 <Toaster />
146 </div>
147 );
148 }
149
3 get_component, get_component, get_component, get_component 5,662 96 $0.0000
4 list_tokens, get_component, list_files 3,829 67 $0.0000
5 write_file 1,970 4,911 $0.0000
6 check_code 4,985 990 $0.0000
7 write_file 1,118 978 $0.0000
8 check_code 1,032 975 $0.0000
9 get_component 998 1,359 $0.0000
10 write_file 1,866 2,817 $0.0000
11 check_code 2,851 974 $0.0000