Runs / direct-debits Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 6 counted, under 6 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 1,212 46 $0.0000 1 read_file 1,278 38 $0.0000 2 list_components 1,738 135 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Alert,
13 Toaster,
14 FormatNumber,
15 toast,
16 } from "@vektos/ds";
17 import * as React from "react";
18
19 export default function Page() {
20 const mandates = data.mandates;
21 const failed = mandates.filter((m) => m.status === "failed");
22 const retryDays = data.retryDays;
23
24 // State for cancelled mandates and UI flow
25 const [cancelledIds, setCancelledIds] = React.useState<Set<string>>(new Set());
26 const [openDialog, setOpenDialog] = React.useState<string | null>(null);
27
28 // Show top alert when some collections failed
29 const alertNodes = failed.length > 0 && (
30 <Alert tone="warning" role="alert">
31 {failed.length} collection{s failed.length > 1 ? "s" : ""} failed.
32 Each creditor will try again in {retryDays} working day$s{
33 retryDays > 1 ? "s" : ""
34 }.
35 </Alert>
36 );
37
38 const handleCancel = (id: string, creditor: string) => {
39 setOpenDialog(creditor);
40 };
41
42 const confirmCancel = (creditor: string) => {
43 setCancelledIds((prev) => new Set([...prev, creditor]));
44 // Show a transient success toast that disappears after 3 seconds
45 toast({
46 title: `Mandate for ${creditor} cancelled`,
47 tone: "positive",
48 });
49 setOpenDialog(null);
50 };
51
52 return (
53 <>
54 <Toaster />
55 {alertNodes}
56 <Card>
57 <CardHeader>
58 <CardTitle>Direct debit mandates</CardTitle>
59 </CardHeader>
60 <CardBody>
61 {mandates.map((m) => {
62 // Skip already cancelled mandates from the list display
63 if (cancelledIds.has(m.id)) return null;
64
65 // Only active or failed mandates can be cancelled
66 const canCancel =
67 m.status !== "cancelled" && (m.status === "active" || m.status === "failed");
68
69 return (
70 <Card key={m.id} style={{ marginBottom: "0.75rem" }}>
71 <CardHeader>
72 <span>{m.creditor}</span>
73 <Badge variant="subtle">{m.status}</Badge>
74 </CardHeader>
75 <CardBody>
76 <dl className="data-list">
77 <div>
78 <dt className="data-list-term">Reference</dt>
79 <dd className="data-list-data">{m.id}</dd>
80 </div>
81 <div>
82 <dt className="data-list-term">Last collection</dt>
83 <dd className="data-list-data">
84 {m.lastCollection.date} –{" "}
85 <FormatNumber
86 value={m.lastCollection.amount}
87 format="currency"
88 currency="EUR"
89 />
90 </dd>
91 </div>
92 </dl>
93 </CardBody>
94 {canCancel && (
95 <CardFooter>
96 <Button
97 onClick={() => handleCancel(m.id, m.creditor)}
98 variant="link"
99 >
100 Cancel mandate
101 </Button>
102 </CardFooter>
103 )}
104 </Card>
105 );
106 })}
107 </CardBody>
108 </Card>
109
110 {/* Cancellation confirmation dialog */}
111 {openDialog && (
112 <Dialog open={true} onOpenChange={setOpenDialog}>
113 <DialogTrigger aria-label="cancel mandate dialog">
114 {openDialog}
115 </DialogTrigger>
116 <DialogContent>
117 <p>
118 Are you sure you want to cancel the mandate for <strong>{openDialog}</strong>?
119 </p>
120 </DialogContent>
121 <DialogFooter>
122 <Button onClick={() => confirmCancel(openDialog!)}>Cancel</Button>
123 <Button onClick={() => setOpenDialog(null)}>Keep</Button>
124 </DialogFooter>
125 </Dialog>
126 )}
127 </>
128 );
129 }
typecheck/TS1005 1 quality
typecheck/TS1381 1 quality typecheck/TS1382 1 quality 4 write_file 6,846 1,374 $0.0000
5 write_file 1,959 1,080 $0.0000
6 write_file 970 1,026 $0.0000