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 read_file 1,407 40 $0.0000 1 list_components 1,869 148 $0.0000 2 write_file 4,466 1,631 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Toaster,
7 Alert,
8 Card,
9 CardHeader,
10 CardBody,
11 CardTitle,
12 CardDescription,
13 Badge,
14 Button,
15 Stack,
16 Text,
17 toast,
18 } from "@vektos/ds";
19
20 export default function Page() {
21 const [cancelled, setCancelled] = React.useState<Set<string>>(new Set());
22
23 const mandates = data.mandates;
24 const failedCount = mandates.filter((m) => m.status === "failed").length;
25
26 const handleCancel = (id: string, creditor: string) => {
27 if (window.confirm(`Cancel mandate for ${creditor}?`)) {
28 setCancelled((prev) => new Set(prev).add(id));
29 toast({
30 title: "Mandate cancelled",
31 tone: "success",
32 });
33 }
34 };
35
36 return (
37 <>
38 <Toaster />
39 {failedCount > 0 && (
40 <Alert tone="warning">
41 <Stack gap="2">
42 <Text>{failedCount} failed collections</Text>
43 <Text>
44 Each creditor will try again in{" "}
45 {data.retryDays} working days
46 </Text>
47 </Stack>
48 </Alert>
49 )}
50 <Stack gap="4">
51 {mandates.map((m) => {
52 const isCancelled = cancelled.has(m.id);
53 const canCancel = m.status !== "cancelled" && (m.status === "active" || m.status === "failed");
54 return (
55 <Card key={m.id}>
56 <CardHeader>
57 <Stack gap="2">
58 <CardTitle>{m.creditor}</CardTitle>
59 <CardDescription>{m.id}</CardDescription>
60 </Stack>
61 </CardHeader>
62 <CardBody>
63 <Stack gap="2">
64 <Text>{m.lastCollection.date}</Text>
65 <Text>{m.lastCollection.amount} {data.currency}</Text>
66 </Stack>
67 <Stack gap="2">
68 <Badge tone={m.status === "active" ? "neutral" : "warning"}>
69 {m.status}
70 </Badge>
71 {canCancel && (
72 <Button variant="solid" onClick={() => handleCancel(m.id, m.creditor)}>
73 Cancel mandate
74 </Button>
75 )}
76 </Stack>
77 </CardBody>
78 {isCancelled && (
79 <Badge tone="neutral">Cancelled</Badge>
80 )}
81 </Card>
82 );
83 })}
84 </Stack>
85 </>
86 );
87 }
4 check_code 3,437 785 $0.0000
6 get_component 2,579 318 $0.0000
7 get_component 2,139 1,773 $0.0000
8 write_file 2,910 837 $0.0000
9 check_code 1,678 593 $0.0000
10 write_file 404 821 $0.0000
11 check_code 1,252 593 $0.0000
12 write_file 2,034 660 $0.0000
13 check_code 625 591 $0.0000