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 21 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 52 32 $0.0000 1 read_file, get_guidelines 226 45 $0.0000 2 list_components, list_tokens 3,197 40 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Dialog,
13 DialogClose,
14 DialogContent,
15 DialogFooter,
16 FormatDate,
17 FormatNumber,
18 Heading,
19 Stack,
20 Table,
21 TableBody,
22 TableCell,
23 TableHead,
24 TableHeader,
25 TableRow,
26 Text,
27 Toaster,
28 toast,
29 } from "@vektos/ds";
30 import { css } from "styled-system/css";
31
32 type MandateStatus = "active" | "failed" | "cancelled";
33
34 type Mandate = {
35 id: string;
36 creditor: string;
37 lastCollection: { date: string; amount: number };
38 status: MandateStatus;
39 };
40
41 const statusTone: Record<MandateStatus, "success" | "danger" | "neutral"> = {
42 active: "success",
43 failed: "danger",
44 cancelled: "neutral",
45 };
46
47 const statusLabel: Record<MandateStatus, string> = {
48 active: "Active",
49 failed: "Failed",
50 cancelled: "Cancelled",
51 };
52
53 export default function Page() {
54 const [mandates, setMandates] = useState<Mandate[]>(
55 (data.mandates as unknown as Mandate[]).map((m) => ({ ...m }))
56 );
57 const [cancelTarget, setCancelTarget] = useState<Mandate | null>(null);
58
59 const failedCount = mandates.filter((m) => m.status === "failed").length;
60
61 const handleConfirmCancel = () => {
62 if (!cancelTarget) return;
63 setMandates((prev) =>
64 prev.map((m) =>
65 m.id === cancelTarget.id ? { ...m, status: "cancelled" } : m
66 )
67 );
68 toast({
69 title: "Mandate cancelled",
70 description: `${cancelTarget.creditor}'s mandate has been cancelled.`,
71 tone: "success",
72 });
73 setCancelTarget(null);
74 };
75
76 return (
77 <div className={`vektos ${css({ bg: "bg.canvas", color: "fg.default", p: { base: "4", md: "6" } })}`}>
78 <Stack gap="6" maxWidth="page" marginInline="auto">
79 <Stack gap="1">
80 <Heading level={1}>Direct debit mandates</Heading>
81 <Text tone="muted" size="sm">
82 {data.company}
83 </Text>
84 </Stack>
85
86 {failedCount > 0 && (
87 <Alert tone="danger" title="Some collections failed">
88 {failedCount} collection{failedCount === 1 ? "" : "s"} failed. Each
89 creditor will try again in {data.retryDays} working days.
90 </Alert>
91 )}
92
93 <Card>
94 <CardHeader>
95 <CardTitle>Mandates</CardTitle>
96 </CardHeader>
97 <Table aria-label="Direct debit mandates">
98 <TableHead>
99 <TableRow>
100 <TableHeader>Creditor</TableHeader>
101 <TableHeader>Mandate reference</TableHeader>
102 <TableHeader>Last collection</TableHeader>
103 <TableHeader>Status</TableHeader>
104 <TableHeader>Actions</TableHeader>
105 </TableRow>
106 </TableHead>
107 <TableBody>
108 {mandates.map((m) => (
109 <TableRow key={m.id}>
110 <TableCell>{m.creditor}</TableCell>
111 <TableCell>
112 <Text as="span" mono>
113 {m.id}
114 </Text>
115 </TableCell>
116 <TableCell>
117 <Stack gap="0.5">
118 <FormatDate value={m.lastCollection.date} dateStyle="medium" />
119 <Text as="span" size="sm" tone="muted">
120 <FormatNumber
121 value={m.lastCollection.amount}
122 format="currency"
123 currency={data.currency}
124 />
125 </Text>
126 </Stack>
127 </TableCell>
128 <TableCell>
129 <Badge tone={statusTone[m.status]}>
130 {statusLabel[m.status]}
131 </Badge>
132 </TableCell>
133 <TableCell>
134 {m.status !== "cancelled" && (
135 <Button
136 variant="outline"
137 size="sm"
138 onClick={() => setCancelTarget(m)}
139 >
140 Cancel mandate
141 </Button>
142 )}
143 </TableCell>
144 </TableRow>
145 ))}
146 </TableBody>
147 </Table>
148 </Card>
149
150 <Dialog
151 open={!!cancelTarget}
152 onOpenChange={(details: { open?: boolean } | boolean) => {
153 const open =
154 typeof details === "boolean" ? details : details?.open ?? false;
155 if (!open) setCancelTarget(null);
156 }}
157 role="alertdialog"
158 >
159 {cancelTarget && (
160 <DialogContent
161 title={`Cancel mandate for ${cancelTarget.creditor}?`}
162 description="The mandate will be cancelled and no further collections will be made."
163 size="md"
164 >
165 <DialogFooter>
166 <DialogClose asChild>
167 <Button variant="outline" onClick={() => setCancelTarget(null)}>
168 Keep mandate
169 </Button>
170 </DialogClose>
171 <Button onClick={handleConfirmCancel}>Cancel mandate</Button>
172 </DialogFooter>
173 </DialogContent>
174 )}
175 </Dialog>
176
177 <Toaster />
178 </Stack>
179 </div>
180 );
181 }
182 ```
183
184 Need check `onOpenChange` controlled dialog: Does Dialog support controlled open? Guidelines say pass open and onOpenChange. Yes. But if we conditionally render DialogContent only when cancelTarget, open true. Fine. But Dialog component maybe requires children? It's okay.
185
186 Potential issue: Dialog with open and no DialogTrigger; fine.
187
188 Potential issue: `Stack` gap="0.5" spacing token exists yes 0.5.
189
190 Potential issue: `maxWidth="page"` layout prop token exists sizes yes page.
191
192 Potential issue: `marginInline="auto"`? Layout props margins accept tokens? "marginInline" likely spacing tokens, not "auto"? The guidelines say margins tokens only. "auto" maybe not token. Oops. In examples they use `marginInlineStart="2"`. For centering, maybe use `marginInline="auto"` but "auto" not spacing token. Could cause type error or grader. Better avoid. Instead wrap in Stack with alignItems? Or use Grid? Simpler: remove maxWidth/marginInline; let content full width. Or center using Stack alignItems="center"? Not needed. But page readability. Could set `maxWidth="page"` only, no auto. Left aligned okay. Or use `marginInlineStart="auto" marginInlineEnd="auto"` but auto not token. Avoid. Remove marginInline. Keep maxWidth. Actually maxWidth on Stack layout prop allowed. Fine.
193
194 Potential issue: `minHeight` not used. Fine.
195
196 Potential issue: `css({ p: { base: "4", md: "6" } })` breakpoints valid.
197
198 Let's run check_code.<|end|><|start|>assandra<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
199 "use client";
200
201 import { useState } from "react";
202 import data from "./fixture.json";
203 import {
204 Alert,
205 Badge,
206 Button,
207 Card,
208 CardHeader,
209 CardTitle,
210 Dialog,
211 DialogClose,
212 DialogContent,
213 DialogFooter,
214 FormatDate,
215 FormatNumber,
216 Heading,
217 Stack,
218 Table,
219 TableBody,
220 TableCell,
221 TableHead,
222 TableHeader,
223 TableRow,
224 Text,
225 Toaster,
226 toast,
227 } from "@vektos/ds";
228 import { css } from "styled-system/css";
229
230 type MandateStatus = "active" | "failed" | "cancelled";
231
232 type Mandate = {
233 id: string;
234 creditor: string;
235 lastCollection: { date: string; amount: number };
236 status: MandateStatus;
237 };
238
239 const statusTone: Record<MandateStatus, "success" | "danger" | "neutral"> = {
240 active: "success",
241 failed: "danger",
242 cancelled: "neutral",
243 };
244
245 const statusLabel: Record<MandateStatus, string> = {
246 active: "Active",
247 failed: "Failed",
248 cancelled: "Cancelled",
249 };
250
251 export default function Page() {
252 const [mandates, setMandates] = useState<Mandate[]>(
253 (data.mandates as unknown as Mandate[]).map((m) => ({ ...m }))
254 );
255 const [cancelTarget, setCancelTarget] = useState<Mandate | null>(null);
256
257 const failedCount = mandates.filter((m) => m.status === "failed").length;
258
259 const handleConfirmCancel = () => {
260 if (!cancelTarget) return;
261 setMandates((prev) =>
262 prev.map((m) =>
263 m.id === cancelTarget.id ? { ...m, status: "cancelled" } : m
264 )
265 );
266 toast({
267 title: "Mandate cancelled",
268 description: `${cancelTarget.creditor}'s mandate has been cancelled.`,
269 tone: "success",
270 });
271 setCancelTarget(null);
272 };
273
274 return (
275 <div className={`vektos ${css({ bg: "bg.canvas", color: "fg.default", p: { base: "4", md: "6" } })}`}>
276 <Stack gap="6" maxWidth="page">
277 <Stack gap="1">
278 <Heading level={1}>Direct debit mandates</Heading>
279 <Text tone="muted" size="sm">
280 {data.company}
281 </Text>
282 </Stack>
283
284 {failedCount > 0 && (
285 <Alert tone="danger" title="Some collections failed">
286 {failedCount} collection{failedCount === 1 ? "" : "s"} failed. Each
287 creditor will try again in {data.retryDays} working days.
288 </Alert>
289 )}
290
291 <Card>
292 <CardHeader>
293 <CardTitle>Mandates</CardTitle>
294 </CardHeader>
295 <Table aria-label="Direct debit mandates">
296 <TableHead>
297 <TableRow>
298 <TableHeader>Creditor</TableHeader>
299 <TableHeader>Mandate reference</TableHeader>
300 <TableHeader>Last collection</TableHeader>
301 <TableHeader>Status</TableHeader>
302 <TableHeader>Actions</TableHeader>
303 </TableRow>
304 </TableHead>
305 <TableBody>
306 {mandates.map((m) => (
307 <TableRow key={m.id}>
308 <TableCell>{m.creditor}</TableCell>
309 <TableCell>
310 <Text as="span" mono>
311 {m.id}
312 </Text>
313 </TableCell>
314 <TableCell>
315 <Stack gap="0.5">
316 <FormatDate value={m.lastCollection.date} dateStyle="medium" />
317 <Text as="span" size="sm" tone="muted">
318 <FormatNumber
319 value={m.lastCollection.amount}
320 format="currency"
321 currency={data.currency}
322 />
323 </Text>
324 </Stack>
325 </TableCell>
326 <TableCell>
327 <Badge tone={statusTone[m.status]}>
328 {statusLabel[m.status]}
329 </Badge>
330 </TableCell>
331 <TableCell>
332 {m.status !== "cancelled" && (
333 <Button
334 variant="outline"
335 size="sm"
336 onClick={() => setCancelTarget(m)}
337 >
338 Cancel mandate
339 </Button>
340 )}
341 </TableCell>
342 </TableRow>
343 ))}
344 </TableBody>
345 </Table>
346 </Card>
347
348 <Dialog
349 open={!!cancelTarget}
350 onOpenChange={(details: { open?: boolean } | boolean) => {
351 const open =
352 typeof details === "boolean" ? details : details?.open ?? false;
353 if (!open) setCancelTarget(null);
354 }}
355 role="alertdialog"
356 >
357 {cancelTarget && (
358 <DialogContent
359 title={`Cancel mandate for ${cancelTarget.creditor}?`}
360 description="The mandate will be cancelled and no further collections will be made."
361 size="md"
362 >
363 <DialogFooter>
364 <DialogClose asChild>
365 <Button variant="outline" onClick={() => setCancelTarget(null)}>
366 Keep mandate
367 </Button>
368 </DialogClose>
369 <Button onClick={handleConfirmCancel}>Cancel mandate</Button>
370 </DialogFooter>
371 </DialogContent>
372 )}
373 </Dialog>
374
375 <Toaster />
376 </Stack>
377 </div>
378 );
379 }
380
Module declaration names may only use ' or " quoted strings.
page.tsx:184:25 Module declaration names may only use ' or " quoted strings. page.tsx:188:24 Module declaration names may only use ' or " quoted strings. page.tsx:194:28 Module declaration names may only use ' or " quoted strings. page.tsx:196:53 Module declaration names may only use ' or " quoted strings. typecheck/TS1128 3 quality render/build-failed 1 completeness typecheck/TS1002 1 quality typecheck/TS1109 1 quality typecheck/TS1434 1 quality list_tokens, list_tokens, list_tokens, list_tokens, list_tokens
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component 929 166 $0.0000
5 get_component, get_component, get_component, get_component, get_component 5,695 150 $0.0000
6 list_files 4,960 36 $0.0000
7 get_component, get_component 82 2,501 $0.0000
8 write_file 3,794 3,148 $0.0000
9 check_code 3,191 1,182 $0.0000