Runs / loan-contract Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 59 counted, under 10 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 373 30 $0.0000 1 read_file, get_guidelines, list_components 225 57 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, list_tokens 5,810 184 $0.0000
cdb5d9e77633
Output cap The provider's default 12 Stack,
13 Table,
14 TableBody,
15 TableCell,
16 TableHead,
17 TableHeader,
18 TableRow,
19 Text,
20 } from "@vektos/ds";
21 import { css } from "styled-system/css";
22
23 const statusTone = {
24 paid: "success",
25 due: "warning",
26 upcoming: "neutral",
27 } as const;
28
29 const statusLabel = {
30 paid: "Paid",
31 due: "Due",
32 upcoming: "Upcoming",
33 } as const;
34
35 export default function Page() {
36 const { contract, schedule, documents } = data;
37
38 const keyTerms = [
39 {
40 label: "Amount borrowed",
41 value: (
42 <FormatNumber value={contract.principal} format="currency" currency={contract.currency} />
43 ),
44 },
45 {
46 label: "Nominal interest rate",
47 value: (
48 <FormatNumber
49 value={contract.nominalRate}
50 format="percent"
51 maximumFractionDigits={2}
52 />
53 ),
54 },
55 {
56 label: "APR",
57 value: (
58 <FormatNumber value={contract.apr} format="percent" maximumFractionDigits={2} />
59 ),
60 },
61 { label: "Term", value: `${contract.termMonths} months` },
62 {
63 label: "Monthly payment",
64 value: (
65 <FormatNumber
66 value={contract.monthlyPayment}
67 format="currency"
68 currency={contract.currency}
69 />
70 ),
71 },
72 {
73 label: "Start date",
74 value: <FormatDate value={contract.startDate} dateStyle="long" />,
75 },
76 {
77 label: "Still owed",
78 value: (
79 <FormatNumber value={contract.outstanding} format="currency" currency={contract.currency} />
80 ),
81 },
82 ];
83
84 return (
85 <div className={css({ bg: "bg.canvas", color: "fg.default", minHeight: "full", py: "8" })}>
86 <Stack maxWidth="page" marginInline="auto" gap="6" px="4">
87 <Stack gap="2">
88 <Heading level={1}>{contract.product}</Heading>
89 <Stack flexDirection="row" gap="3" alignItems="center" flexWrap="wrap">
90 <Text tone="muted" mono>
91 {contract.number}
92 </Text>
93 <Badge tone="success">{contract.status}</Badge>
94 </Stack>
95 </Stack>
96
97 <Card>
98 <CardHeader>
99 <CardTitle>Key terms</CardTitle>
100 </CardHeader>
101 <CardBody>
102 <DataList items={keyTerms} />
103 </CardBody>
104 </Card>
105
106 <Card>
107 <CardHeader>
108 <CardTitle>Repayment schedule</CardTitle>
109 </CardHeader>
110 <Table aria-label="Repayment schedule">
111 <TableHead>
112 <TableRow>
113 <TableHeader>#</TableHeader>
114 <TableHeader>Due date</TableHeader>
115 <TableHeader numeric>Payment</TableHeader>
116 <TableHeader numeric>Principal</TableHeader>
117 <TableHeader numeric>Interest</TableHeader>
118 <TableHeader numeric>Balance after</TableHeader>
119 <TableHeader>Status</TableHeader>
120 </TableRow>
121 </TableHead>
122 <TableBody>
123 {schedule.map((instalment) => (
124 <TableRow key={instalment.number}>
125 <TableCell numeric>{instalment.number}</TableCell>
126 <TableCell>
127 <FormatDate value={instalment.dueDate} dateStyle="medium" />
128 </TableCell>
129 <TableCell numeric>
130 <FormatNumber
131 value={instalment.payment}
132 format="currency"
133 currency={contract.currency}
134 />
135 </TableCell>
136 <TableCell numeric>
137 <FormatNumber
138 value={instalment.principal}
139 format="currency"
140 currency={contract.currency}
141 />
142 </TableCell>
143 <TableCell numeric>
144 <FormatNumber
145 value={instalment.interest}
146 format="currency"
147 currency={contract.currency}
148 />
149 </TableCell>
150 <TableCell numeric>
151 <FormatNumber
152 value={instalment.remaining}
153 format="currency"
154 currency={contract.currency}
155 />
156 </TableCell>
157 <TableCell>
158 <Badge tone={statusTone[instalment.status]}>
159 {statusLabel[instalment.status]}
160 </Badge>
161 </TableCell>
162 </TableRow>
163 ))}
164 </TableBody>
165 </Table>
166 </Card>
167
168 <Card>
169 <CardHeader>
170 <CardTitle>Signed documents</CardTitle>
171 </CardHeader>
172 <CardBody>
173 <DataList
174 items={documents.map((document) => ({
175 label: document.name,
176 value: <FormatDate value={document.signedAt} dateStyle="long" />,
177 }))}
178 />
179 </CardBody>
180 </Card>
181 </Stack>
182 </div>
183 );
184 }
185 ```
186
187 Wait DataListItem type expects label ReactNode, value ReactNode. Good. But `statusTone[instalment.status]` indexing: instalment.status typed string from JSON maybe "string", but as const? data imported JSON, schedule status typed string. Indexing const object with string may TS error: Element implicitly has any type. Could cast. Let's make helper functions or cast `instalment.status as keyof typeof statusTone`. Use inline cast. Better define:
188
189 ```tsx
190 const status = instalment.status as "paid" | "due" | "upcoming";
191 ```
192
193 Or map with Record<string,...>. Let's adjust to avoid TS errors. Use `statusTone[instalment.status as keyof typeof statusTone]`. Similarly label. Write that.
194
195 Also `contract.status` Badge text "active" maybe capitalization? Use contract.status. Fine.
196
197 Check `minHeight: "full"` in css: sizes token full exists. Good. `px` on Stack: Stack accepts layout props? It accepts underlying HTML props except className/style, plus layout props. Does Stack accept `px`? Layout props list includes margin etc but not padding? Wait layout props list: margin, marginBlock... width... position... visibility. No padding! Padding is style, not layout prop? The guideline says components take layout props: margins, width, etc. Padding maybe not allowed? "A component owns how it looks; page says where it sits." Padding is spacing inside; could be style via css on host? But components don't take className. Stack probably doesn't accept px/padding. Need remove px from Stack. Use marginInline? Could wrap in div? Or put px on root div css. Let's set root div css px: "4" and py. And Stack maxWidth marginInline auto. Remove px from Stack. Root div has py 8 and maybe px 4. Good.
198
199 Also root div className css string. Fine.
200
201 Let's also ensure `flexWrap="wrap"` accepted by Stack (yes). `alignItems` accepted.
202
203 Potential issue: `DataList` items label/value. For keyTerms, value can be string or node. Good.
204
205 Potential issue: `contract.currency` typed string; FormatNumber currency expects string. Good.
206
207 Let's run check_code.<|end|><|start|> fileList: We need adjust indexing. Let's rewrite with casts and remove px.<|end|><|start|>start by fixing the two indexing sites and removing `px` from `Stack` (padding is not a layout prop on components).<|end|><|start|>assist to=write_file<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="content">
208 import data from "./fixture.json";
209 import {
210 Badge,
211 Card,
212 CardBody,
213 CardHeader,
214 CardTitle,
215 DataList,
216 FormatDate,
217 FormatNumber,
218 Heading,
219 Stack,
220 Table,
221 TableBody,
222 TableCell,
223 TableHead,
224 TableHeader,
225 TableRow,
226 Text,
227 } from "@vektos/ds";
228 import { css } from "styled-system/css";
229
230 const statusTone = {
231 paid: "success",
232 due: "warning",
233 upcoming: "neutral",
234 } as const;
235
236 const statusLabel = {
237 paid: "Paid",
238 due: "Due",
239 upcoming: "Upcoming",
240 } as const;
241
242 type InstalmentStatus = keyof typeof statusTone;
243
244 export default function Page() {
245 const { contract, schedule, documents } = data;
246
247 const keyTerms = [
248 {
249 label: "Amount borrowed",
250 value: (
251 <FormatNumber value={contract.principal} format="currency" currency={contract.currency} />
252 ),
253 },
254 {
255 label: "Nominal interest rate",
256 value: (
257 <FormatNumber
258 value={contract.nominalRate}
259 format="percent"
260 maximumFractionDigits={2}
261 />
262 ),
263 },
264 {
265 label: "APR",
266 value: (
267 <FormatNumber value={contract.apr} format="percent" maximumFractionDigits={2} />
268 ),
269 },
270 { label: "Term", value: `${contract.termMonths} months` },
271 {
272 label: "Monthly payment",
273 value: (
274 <FormatNumber
275 value={contract.monthlyPayment}
276 format="currency"
277 currency={contract.currency}
278 />
279 ),
280 },
281 {
282 label: "Start date",
283 value: <FormatDate value={contract.startDate} dateStyle="long" />,
284 },
285 {
286 label: "Still owed",
287 value: (
288 <FormatNumber value={contract.outstanding} format="currency" currency={contract.currency} />
289 ),
290 },
291 ];
292
293 return (
294 <div
295 className={css({
296 bg: "bg.canvas",
297 color: "fg.default",
298 minHeight: "full",
299 py: "8",
300 px: "4",
301 })}
302 >
303 <Stack maxWidth="page" marginInline="auto" gap="6">
304 <Stack gap="2">
305 <Heading level={1}>{contract.product}</Heading>
306 <Stack flexDirection="row" gap="3" alignItems="center" flexWrap="wrap">
307 <Text tone="muted" mono>
308 {contract.number}
309 </Text>
310 <Badge tone="success">{contract.status}</Badge>
311 </Stack>
312 </Stack>
313
314 <Card>
315 <CardHeader>
316 <CardTitle>Key terms</CardTitle>
317 </CardHeader>
318 <CardBody>
319 <DataList items={keyTerms} />
320 </CardBody>
321 </Card>
322
323 <Card>
324 <CardHeader>
325 <CardTitle>Repayment schedule</CardTitle>
326 </CardHeader>
327 <Table aria-label="Repayment schedule">
328 <TableHead>
329 <TableRow>
330 <TableHeader>#</TableHeader>
331 <TableHeader>Due date</TableHeader>
332 <TableHeader numeric>Payment</TableHeader>
333 <TableHeader numeric>Principal</TableHeader>
334 <TableHeader numeric>Interest</TableHeader>
335 <TableHeader numeric>Balance after</TableHeader>
336 <TableHeader>Status</TableHeader>
337 </TableRow>
338 </TableHead>
339 <TableBody>
340 {schedule.map((instalment) => {
341 const status = instalment.status as InstalmentStatus;
342 return (
343 <TableRow key={instalment.number}>
344 <TableCell numeric>{instalment.number}</TableCell>
345 <TableCell>
346 <FormatDate value={instalment.dueDate} dateStyle="medium" />
347 </TableCell>
348 <TableCell numeric>
349 <FormatNumber
350 value={instalment.payment}
351 format="currency"
352 currency={contract.currency}
353 />
354 </TableCell>
355 <TableCell numeric>
356 <FormatNumber
357 value={instalment.principal}
358 format="currency"
359 currency={contract.currency}
360 />
361 </TableCell>
362 <TableCell numeric>
363 <FormatNumber
364 value={instalment.interest}
365 format="currency"
366 currency={contract.currency}
367 />
368 </TableCell>
369 <TableCell numeric>
370 <FormatNumber
371 value={instalment.remaining}
372 format="currency"
373 currency={contract.currency}
374 />
375 </TableCell>
376 <TableCell>
377 <Badge tone={statusTone[status]}>{statusLabel[status]}</Badge>
378 </TableCell>
379 </TableRow>
380 );
381 })}
382 </TableBody>
383 </Table>
384 </Card>
385
386 <Card>
387 <CardHeader>
388 <CardTitle>Signed documents</CardTitle>
389 </CardHeader>
390 <CardBody>
391 <DataList
392 items={documents.map((document) => ({
393 label: document.name,
394 value: <FormatDate value={document.signedAt} dateStyle="long" />,
395 }))}
396 />
397 </CardBody>
398 </Card>
399 </Stack>
400 </div>
401 );
402 }
403 ```
404
405 Run check_code.<|end|><|start|>assist to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
406 import data from "./fixture.json";
407 import {
408 Badge,
409 Card,
410 CardBody,
411 CardHeader,
412 CardTitle,
413 DataList,
414 FormatDate,
415 FormatNumber,
416 Heading,
417 Stack,
418 Table,
419 TableBody,
420 TableCell,
421 TableHead,
422 TableHeader,
423 TableRow,
424 Text,
425 } from "@vektos/ds";
426 import { css } from "styled-system/css";
427
428 const statusTone = {
429 paid: "success",
430 due: "warning",
431 upcoming: "neutral",
432 } as const;
433
434 const statusLabel = {
435 paid: "Paid",
436 due: "Due",
437 upcoming: "Upcoming",
438 } as const;
439
440 type InstalmentStatus = keyof typeof statusTone;
441
442 export default function Page() {
443 const { contract, schedule, documents } = data;
444
445 const keyTerms = [
446 {
447 label: "Amount borrowed",
448 value: (
449 <FormatNumber value={contract.principal} format="currency" currency={contract.currency} />
450 ),
451 },
452 {
453 label: "Nominal interest rate",
454 value: (
455 <FormatNumber
456 value={contract.nominalRate}
457 format="percent"
458 maximumFractionDigits={2}
459 />
460 ),
461 },
462 {
463 label: "APR",
464 value: (
465 <FormatNumber value={contract.apr} format="percent" maximumFractionDigits={2} />
466 ),
467 },
468 { label: "Term", value: `${contract.termMonths} months` },
469 {
470 label: "Monthly payment",
471 value: (
472 <FormatNumber
473 value={contract.monthlyPayment}
474 format="currency"
475 currency={contract.currency}
476 />
477 ),
478 },
479 {
480 label: "Start date",
481 value: <FormatDate value={contract.startDate} dateStyle="long" />,
482 },
483 {
484 label: "Still owed",
485 value: (
486 <FormatNumber value={contract.outstanding} format="currency" currency={contract.currency} />
487 ),
488 },
489 ];
490
491 return (
492 <div
493 className={css({
494 bg: "bg.canvas",
495 color: "fg.default",
496 minHeight: "full",
497 py: "8",
498 px: "4",
499 })}
500 >
501 <Stack maxWidth="page" marginInline="auto" gap="6">
502 <Stack gap="2">
503 <Heading level={1}>{contract.product}</Heading>
504 <Stack flexDirection="row" gap="3" alignItems="center" flexWrap="wrap">
505 <Text tone="muted" mono>
506 {contract.number}
507 </Text>
508 <Badge tone="success">{contract.status}</Badge>
509 </Stack>
510 </Stack>
511
512 <Card>
513 <CardHeader>
514 <CardTitle>Key terms</CardTitle>
515 </CardHeader>
516 <CardBody>
517 <DataList items={keyTerms} />
518 </CardBody>
519 </Card>
520
521 <Card>
522 <CardHeader>
523 <CardTitle>Repayment schedule</CardTitle>
524 </CardHeader>
525 <Table aria-label="Repayment schedule">
526 <TableHead>
527 <TableRow>
528 <TableHeader>#</TableHeader>
529 <TableHeader>Due date</TableHeader>
530 <TableHeader numeric>Payment</TableHeader>
531 <TableHeader numeric>Principal</TableHeader>
532 <TableHeader numeric>Interest</TableHeader>
533 <TableHeader numeric>Balance after</TableHeader>
534 <TableHeader>Status</TableHeader>
535 </TableRow>
536 </TableHead>
537 <TableBody>
538 {schedule.map((instalment) => {
539 const status = instalment.status as InstalmentStatus;
540 return (
541 <TableRow key={instalment.number}>
542 <TableCell numeric>{instalment.number}</TableCell>
543 <TableCell>
544 <FormatDate value={instalment.dueDate} dateStyle="medium" />
545 </TableCell>
546 <TableCell numeric>
547 <FormatNumber
548 value={instalment.payment}
549 format="currency"
550 currency={contract.currency}
551 />
552 </TableCell>
553 <TableCell numeric>
554 <FormatNumber
555 value={instalment.principal}
556 format="currency"
557 currency={contract.currency}
558 />
559 </TableCell>
560 <TableCell numeric>
561 <FormatNumber
562 value={instalment.interest}
563 format="currency"
564 currency={contract.currency}
565 />
566 </TableCell>
567 <TableCell numeric>
568 <FormatNumber
569 value={instalment.remaining}
570 format="currency"
571 currency={contract.currency}
572 />
573 </TableCell>
574 <TableCell>
575 <Badge tone={statusTone[status]}>{statusLabel[status]}</Badge>
576 </TableCell>
577 </TableRow>
578 );
579 })}
580 </TableBody>
581 </Table>
582 </Card>
583
584 <Card>
585 <CardHeader>
586 <CardTitle>Signed documents</CardTitle>
587 </CardHeader>
588 <CardBody>
589 <DataList
590 items={documents.map((document) => ({
591 label: document.name,
592 value: <FormatDate value={document.signedAt} dateStyle="long" />,
593 }))}
594 />
595 </CardBody>
596 </Card>
597 </Stack>
598 </div>
599 );
600 }
601
Module declaration names may only use ' or " quoted strings.
page.tsx:201:73 Module declaration names may only use ' or " quoted strings. page.tsx:203:27 Module declaration names may only use ' or " quoted strings. page.tsx:205:36 Module declaration names may only use ' or " quoted strings. typecheck/TS1005 13 quality typecheck/TS1109 13 quality typecheck/TS1381 10 quality lint/typescript(no-unsafe-type-assertion) 3 quality typecheck/TS1434 2 quality render/build-failed 1 completeness typecheck/TS1003 1 quality typecheck/TS17008 1 quality 3 list_tokens, list_tokens, list_tokens, list_tokens, list_tokens 7,699 111 $0.0000
5 get_component, get_component, get_component, get_component 84 1,446 $0.0000
6 write_file 4,910 4,580 $0.0000
7 check_code 4,651 1,142 $0.0000