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 9 counted, under 7 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 get_guidelines, list_components, list_tokens, list_files 395 100 $0.0000 1 read_file 7,202 30 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 822 246 $0.0000
cdb5d9e77633
Output cap The provider's default 12 FormatNumber,
13 Heading,
14 Stack,
15 Table,
16 TableBody,
17 TableCell,
18 TableHead,
19 TableHeader,
20 TableRow,
21 Text,
22 } from "@vektos/ds";
23 import { css } from "styled-system/css";
24
25 const { contract, schedule, documents } = data;
26
27 function statusTone(status: string) {
28 switch (status) {
29 case "paid":
30 case "active":
31 return "success" as const;
32 case "due":
33 return "warning" as const;
34 case "upcoming":
35 return "neutral" as const;
36 default:
37 return "neutral" as const;
38 }
39 }
40
41 function statusLabel(status: string) {
42 return status.charAt(0).toUpperCase() + status.slice(1);
43 }
44
45 export default function Page() {
46 return (
47 <Stack gap="6" maxWidth="page" marginInline="auto" marginBlock="6">
48 <Breadcrumb
49 items={[{ label: "Contracts", href: "#" }, { label: contract.number }]}
50 />
51
52 <Stack flexDirection={{ base: "column", md: "row" }} gap="3" alignItems={{ base: "flex-start", md: "center" }}>
53 <Heading level={1}>{contract.product}</Heading>
54 <Text mono size="sm" tone="muted">
55 {contract.number}
56 </Text>
57 <Badge tone={statusTone(contract.status)}>
58 {statusLabel(contract.status)}
59 </Badge>
60 </Stack>
61
62 <Card>
63 <CardHeader>
64 <CardTitle>Key terms</CardTitle>
65 <CardDescription>Borrower: {contract.borrower}</CardDescription>
66 </CardHeader>
67 <CardBody>
68 <DataList
69 items={[
70 {
71 label: "Amount borrowed",
72 value: (
73 <FormatNumber
74 value={contract.principal}
75 format="currency"
76 currency={contract.currency}
77 />
78 ),
79 },
80 {
81 label: "Nominal interest rate",
82 value: (
83 <FormatNumber
84 value={contract.nominalRate}
85 format="percent"
86 maximumFractionDigits={2}
87 />
88 ),
89 },
90 {
91 label: "APR",
92 value: (
93 <FormatNumber
94 value={contract.apr}
95 format="percent"
96 maximumFractionDigits={2}
97 />
98 ),
99 },
100 {
101 label: "Term",
102 value: (
103 <>
104 <FormatNumber value={contract.termMonths} /> months
105 </>
106 ),
107 },
108 {
109 label: "Monthly payment",
110 value: (
111 <FormatNumber
112 value={contract.monthlyPayment}
113 format="currency"
114 currency={contract.currency}
115 />
116 ),
117 },
118 {
119 label: "Start date",
120 value: <FormatDate value={contract.startDate} dateStyle="long" />,
121 },
122 {
123 label: "Still owed",
124 value: (
125 <FormatNumber
126 value={contract.outstanding}
127 format="currency"
128 currency={contract.currency}
129 />
130 ),
131 },
132 ]}
133 />
134 </CardBody>
135 </Card>
136
137 <Card>
138 <CardHeader>
139 <CardTitle>Repayment schedule</CardTitle>
140 <CardDescription>
141 {schedule.length} of {contract.termMonths} instalments shown.
142 </CardDescription>
143 </CardHeader>
144 <Table aria-label="Repayment schedule">
145 <TableHead>
146 <TableRow>
147 <TableHeader numeric>#</TableHeader>
148 <TableHeader>Due date</TableHeader>
149 <TableHeader numeric>Payment</TableHeader>
150 <TableHeader numeric>Principal</TableHeader>
151 <TableHeader numeric>Interest</TableHeader>
152 <TableHeader numeric>Balance</TableHeader>
153 <TableHeader>Status</TableHeader>
154 </TableRow>
155 </TableHead>
156 <TableBody>
157 {schedule.map((row) => (
158 <TableRow key={row.number}>
159 <TableCell numeric>{row.number}</TableCell>
160 <TableCell>
161 <FormatDate value={row.dueDate} dateStyle="medium" />
162 </TableCell>
163 <TableCell numeric>
164 <FormatNumber
165 value={row.payment}
166 format="currency"
167 currency={contract.currency}
168 />
169 </TableCell>
170 <TableCell numeric>
171 <FormatNumber
172 value={row.principal}
173 format="currency"
174 currency={contract.currency}
175 />
176 </TableCell>
177 <TableCell numeric>
178 <FormatNumber
179 value={row.interest}
180 format="currency"
181 currency={contract.currency}
182 />
183 </TableCell>
184 <TableCell numeric>
185 <FormatNumber
186 value={row.remaining}
187 format="currency"
188 currency={contract.currency}
189 />
190 </TableCell>
191 <TableCell>
192 <Badge tone={statusTone(row.status)}>
193 {statusLabel(row.status)}
194 </Badge>
195 </TableCell>
196 </TableRow>
197 ))}
198 </TableBody>
199 </Table>
200 </Card>
201
202 <Card>
203 <CardHeader>
204 <CardTitle>Signed documents</CardTitle>
205 </CardHeader>
206 <Table aria-label="Signed documents">
207 <TableHead>
208 <TableRow>
209 <TableHeader>Document</TableHeader>
210 <TableHeader>Signed on</TableHeader>
211 </TableRow>
212 </TableHead>
213 <TableBody>
214 {documents.map((doc) => (
215 <TableRow key={doc.name}>
216 <TableCell>{doc.name}</TableCell>
217 <TableCell>
218 <FormatDate value={doc.signedAt} dateStyle="long" />
219 </TableCell>
220 </TableRow>
221 ))}
222 </TableBody>
223 </Table>
224 </Card>
225 </Stack>
226 );
227 }
228 ```
229
230 Wait, I used `css` import but didn't use it. Remove unused import to avoid lint errors. Let me remove the css import.
231
232 Also Text import used. Good.
233
234 Let me also check: DataList items value type accepts ReactNode. Good.
235
236 Let me check `marginInline="auto"` — is "auto" a valid spacing token? Spacing tokens don't include "auto". Hmm. Layout props "Tokens only". "auto" might not be a token. Let me check. The spacing tokens are 0, 0.5, 1, ... "auto" is not listed. But margin auto is common. Is it accepted? The layout props accept tokens. "auto" might be a type error. Let me avoid. Use maxWidth="page" and center via... Grid? Or just don't center; let it be full width within container. Actually I can remove marginInline="auto" and marginBlock. Or use marginBlock="6" (valid). For horizontal centering, maybe not needed. Let me remove marginInline="auto". Keep marginBlock="6".
237
238 Also maxWidth="page" is a size token, valid for maxWidth. Good.
239
240 Let me also reconsider: `alignItems={{ base: "flex-start", md: "center" }}` — valid responsive. Good.
241
242 Let me remove css import. Write final.<|end|><|start|> assistant to=write_file<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="content">
243 import data from "./fixture.json";
244 import {
245 Badge,
246 Breadcrumb,
247 Card,
248 CardBody,
249 CardDescription,
250 CardHeader,
251 CardTitle,
252 DataList,
253 FormatDate,
254 FormatNumber,
255 Heading,
256 Stack,
257 Table,
258 TableBody,
259 TableCell,
260 TableHead,
261 TableHeader,
262 TableRow,
263 Text,
264 } from "@vektos/ds";
265
266 const { contract, schedule, documents } = data;
267
268 function statusTone(status: string) {
269 switch (status) {
270 case "paid":
271 case "active":
272 return "success" as const;
273 case "due":
274 return "warning" as const;
275 case "upcoming":
276 return "neutral" as const;
277 default:
278 return "neutral" as const;
279 }
280 }
281
282 function statusLabel(status: string) {
283 return status.charAt(0).toUpperCase() + status.slice(1);
284 }
285
286 export default function Page() {
287 return (
288 <Stack gap="6" maxWidth="page" marginBlock="6">
289 <Breadcrumb
290 items={[{ label: "Contracts", href: "#" }, { label: contract.number }]}
291 />
292
293 <Stack
294 flexDirection={{ base: "column", md: "row" }}
295 gap="3"
296 alignItems={{ base: "flex-start", md: "center" }}
297 >
298 <Heading level={1}>{contract.product}</Heading>
299 <Text mono size="sm" tone="muted">
300 {contract.number}
301 </Text>
302 <Badge tone={statusTone(contract.status)}>
303 {statusLabel(contract.status)}
304 </Badge>
305 </Stack>
306
307 <Card>
308 <CardHeader>
309 <CardTitle>Key terms</CardTitle>
310 <CardDescription>Borrower: {contract.borrower}</CardDescription>
311 </CardHeader>
312 <CardBody>
313 <DataList
314 items={[
315 {
316 label: "Amount borrowed",
317 value: (
318 <FormatNumber
319 value={contract.principal}
320 format="currency"
321 currency={contract.currency}
322 />
323 ),
324 },
325 {
326 label: "Nominal interest rate",
327 value: (
328 <FormatNumber
329 value={contract.nominalRate}
330 format="percent"
331 maximumFractionDigits={2}
332 />
333 ),
334 },
335 {
336 label: "APR",
337 value: (
338 <FormatNumber
339 value={contract.apr}
340 format="percent"
341 maximumFractionDigits={2}
342 />
343 ),
344 },
345 {
346 label: "Term",
347 value: (
348 <>
349 <FormatNumber value={contract.termMonths} /> months
350 </>
351 ),
352 },
353 {
354 label: "Monthly payment",
355 value: (
356 <FormatNumber
357 value={contract.monthlyPayment}
358 format="currency"
359 currency={contract.currency}
360 />
361 ),
362 },
363 {
364 label: "Start date",
365 value: <FormatDate value={contract.startDate} dateStyle="long" />,
366 },
367 {
368 label: "Still owed",
369 value: (
370 <FormatNumber
371 value={contract.outstanding}
372 format="currency"
373 currency={contract.currency}
374 />
375 ),
376 },
377 ]}
378 />
379 </CardBody>
380 </Card>
381
382 <Card>
383 <CardHeader>
384 <CardTitle>Repayment schedule</CardTitle>
385 <CardDescription>
386 {schedule.length} of {contract.termMonths} instalments shown.
387 </CardDescription>
388 </CardHeader>
389 <Table aria-label="Repayment schedule">
390 <TableHead>
391 <TableRow>
392 <TableHeader numeric>#</TableHeader>
393 <TableHeader>Due date</TableHeader>
394 <TableHeader numeric>Payment</TableHeader>
395 <TableHeader numeric>Principal</TableHeader>
396 <TableHeader numeric>Interest</TableHeader>
397 <TableHeader numeric>Balance</TableHeader>
398 <TableHeader>Status</TableHeader>
399 </TableRow>
400 </TableHead>
401 <TableBody>
402 {schedule.map((row) => (
403 <TableRow key={row.number}>
404 <TableCell numeric>{row.number}</TableCell>
405 <TableCell>
406 <FormatDate value={row.dueDate} dateStyle="medium" />
407 </TableCell>
408 <TableCell numeric>
409 <FormatNumber
410 value={row.payment}
411 format="currency"
412 currency={contract.currency}
413 />
414 </TableCell>
415 <TableCell numeric>
416 <FormatNumber
417 value={row.principal}
418 format="currency"
419 currency={contract.currency}
420 />
421 </TableCell>
422 <TableCell numeric>
423 <FormatNumber
424 value={row.interest}
425 format="currency"
426 currency={contract.currency}
427 />
428 </TableCell>
429 <TableCell numeric>
430 <FormatNumber
431 value={row.remaining}
432 format="currency"
433 currency={contract.currency}
434 />
435 </TableCell>
436 <TableCell>
437 <Badge tone={statusTone(row.status)}>
438 {statusLabel(row.status)}
439 </Badge>
440 </TableCell>
441 </TableRow>
442 ))}
443 </TableBody>
444 </Table>
445 </Card>
446
447 <Card>
448 <CardHeader>
449 <CardTitle>Signed documents</CardTitle>
450 </CardHeader>
451 <Table aria-label="Signed documents">
452 <TableHead>
453 <TableRow>
454 <TableHeader>Document</TableHeader>
455 <TableHeader>Signed on</TableHeader>
456 </TableRow>
457 </TableHead>
458 <TableBody>
459 {documents.map((doc) => (
460 <TableRow key={doc.name}>
461 <TableCell>{doc.name}</TableCell>
462 <TableCell>
463 <FormatDate value={doc.signedAt} dateStyle="long" />
464 </TableCell>
465 </TableRow>
466 ))}
467 </TableBody>
468 </Table>
469 </Card>
470 </Stack>
471 );
472 }
page.tsx:230:15
Expected a semicolon or an implicit semicolon after a statement, but found none
render/build-failed 1 completeness typecheck/TS1128 1 quality typecheck/TS1136 1 quality typecheck/TS1160 1 quality 3 list_files 10,224 54 $0.0000
4 get_component, get_component, get_component, get_component 18,996 112 $0.0000
5 write_file 3,596 7,092 $0.0000
6 check_code 10,776 1,272 $0.0000