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 34 counted, under 9 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 64 $0.0000 1 read_file 1,296 44 $0.0000 2 list_components 1,762 306 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 DataListItem,
13 DataListLabel,
14 DataListValue,
15 Button,
16 Dialog,
17 DialogTrigger,
18 DialogContent,
19 DialogFooter,
20 DialogClose,
21 toast,
22 } from "@vektos/ds";
23
24 import data from "./fixture.json";
25
26 export default function Page() {
27 const [cancelledIds, setCancelledIds] = React.useState<Set<string>>(new Set());
28 const [openConfirm, setOpenConfirm] = React.useState(false);
29 const [mandateToCancel, setMandateToCancel] =
30 React.useState<typeof data.mandates[0] | null>(null);
31
32 const failed = data.mandates.filter((m) => m.status === "failed");
33 const hasFailed = failed.length > 0;
34
35 // Show an alert at the top when there are failed collections
36 if (hasFailed) {
37 return (
38 <>
39 <Alert tone="warning">
40 {failed.length} failed collection${
41 failed.length > 1 ? "s" : ""
42 }. Each creditor will try again in{" "}{data.retryDays} working days.
43 </Alert>
44 <Stack gap={4} />
45 </>
46 );
47 }
48
49 const handleCancel = (mandate: typeof data.mandates[0]) => {
50 setMandateToCancel(mandate);
51 setOpenConfirm(true);
52 };
53
54 const confirmCancel = () => {
55 if (!mandateToCancel) return;
56 setCancelledIds((prev) => new Set([...prev, mandateToCancel.id]));
57 toast({
58 title: "Mandate cancelled",
59 description: `The mandate for ${mandateToCancel.creditor} has been cancelled.`,
60 });
61 setOpenConfirm(false);
62 setMandateToCancel(null);
63 };
64
65 return (
66 <>
67 {hasFailed && (
68 <Alert tone="warning">
69 {failed.length} failed collection${
70 failed.length > 1 ? "s" : ""
71 }. Each creditor will try again in {data.retryDays} working days.
72 </Alert>
73 )}
74 <Stack gap={4}>
75 {data.mandates.map((mandate) => {
76 const isCancelled = cancelledIds.has(mandate.id);
77 return (
78 <Card key={mandate.id} shadow="sm">
79 <CardHeader>
80 <CardTitle>{mandate.creditor}</CardTitle>
81 </CardHeader>
82 <CardBody>
83 <DataList>
84 <DataList.Item>
85 <DataList.Label>Reference</DataList.Label>
86 <DataList.Value>{mandate.id}</DataList.Value>
87 </DataList.Item>
88 <DataList.Item>
89 <DataList.Label>Last collection</DataList.Label>
90 <DataList.Value>
91 {mandate.lastCollection.date} –{" "}
92 {mandate.lastCollection.amount} {data.currency}
93 </DataList.Value>
94 </DataList.Item>
95 <DataList.Item>
96 <DataList.Label>Status</DataList.Label>
97 <DataList.Value>{mandate.status}</DataList.Value>
98 </DataList.Item>
99 </DataList>
100
101 {mandate.status !== "cancelled" && !isCancelled ? (
102 <Button onClick={() => handleCancel(mandate)}>
103 Cancel mandate
104 </Button>
105 ) : (
106 <span className="text-muted">Cancelled</span>
107 )}
108 </CardBody>
109 </Card>
110 );
111 })}
112 </Stack>
113 <Toaster />
114 <Dialog
115 open={openConfirm}
116 onOpenChange={setOpenConfirm}
117 modal
118 >
119 <DialogTrigger asChild>
120 <Button variant="outline">Cancel</Button>
121 </DialogTrigger>
122 <DialogContent>
123 <p>
124 Are you sure you want to cancel the mandate for{" "}
125 <strong>{mandateToCancel?.creditor}</strong>?
126 </p>
127 </DialogContent>
128 <DialogFooter>
129 <DialogClose asChild>
130 <Button variant="outline">No, keep it</Button>
131 </DialogClose>
132 <Button onClick={confirmCancel} variant="solid">
133 Yes, cancel
134 </Button>
135 </DialogFooter>
136 </Dialog>
137 </>
138 );
139 }
Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'.
page.tsx:89:31 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:89:63 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:90:31 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:93:32 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:94:30 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:95:29 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:96:31 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:96:54 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:97:31 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:97:64 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:98:30 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. typecheck/TS2322 3 quality page.tsx:44:16 Type 'number' is not assignable to type 'ConditionalValue<SpacingValue>'. page.tsx:74:14 Type 'number' is not assignable to type 'ConditionalValue<SpacingValue>'. page.tsx:78:36 Not counted Type '{ key: string; shadow: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & CardProps'. page.tsx:116:9 Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(details: OpenChangeDetails) => void'. Every run that broke typecheck/TS2322 typecheck/TS2686 3 quality page.tsx:27:43 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. page.tsx:28:41 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. page.tsx:30:5 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. Every run that broke typecheck/TS2686 render/runtime-error 1 completeness