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 14 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 read_file 1,390 44 $0.0000 1 list_components 2,204 49 $0.0000 2 get_component 4,702 474 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 } from "@vektos/ds";
13 import {
14 FormatNumber,
15 FormatDate,
16 } from "@vektos/ds";
17
18 export default function Page() {
19 const { contract, schedule, documents } = data;
20
21 // Key‑terms DataList
22 const terms = [
23 { label: "Amount borrowed", value: `EUR ${FormatNumber({ value: contract.principal, format: "currency", currency: "EUR }` } },
24 { label: "Nominal interest rate", value: `${(contract.nominalRate * 100).toFixed(2)}%` },
25 { label: "APR", value: `${(contract.apr * 100).toFixed(2)}%` },
26 { label: "Term", value: `${contract.termMonths} months` },
27 { label: "Monthly payment", value: `EUR ${FormatNumber({ value: contract.monthlyPayment, format: "currency", currency: "EUR }` } }`,
28 { label: "Start date", value: FormatDate({ value: contract.startDate, dateStyle: "long" }) },
29 { label: "Outstanding", value: `EUR ${FormatNumber({ value: contract.outstanding, format: "currency", currency: "EUR }` } }`,
30 ];
31
32 return (
33 <Card>
34 <CardHeader>
35 <CardTitle>Personal loan contract</CardTitle>
36 <CardDescription>
37 <Stack direction="row" gap="3">
38 <span>Product: {contract.product}</span>
39 <span>Number: {contract.number}</span>
40 <Badge tone={contract.status === "active" ? "success" : "neutral"}>
41 {contract.status}
42 </Badge>
43 </Stack>
44 </CardDescription>
45 </CardHeader>
46
47 <CardBody>
48 <Heading level={3}>Key terms</Heading>
49 <Stack direction="vertical" gap="3">
50 {terms.map((t, i) => (
51 <Stack direction="row" key={i} gap="2">
52 <span>{t.label}:</span>
53 <span>{t.value}</span>
54 </Stack>
55 ))}
56 </Stack>
57
58 <Heading level={3} mt={4}>
59 Repayment schedule
60 </Heading>
61 <Table aria-label="Repayment schedule">
62 <TableHead>
63 <TableRow>
64 <TableHeader>Due date</TableHeader>
65 <TableHeader>Payment (EUR)</TableHeader>
66 <TableHeader numeric>Principal (EUR)</TableHeader>
67 <TableHeader numeric>Interest (EUR)</TableHeader>
68 <TableHeader numeric>Remaining (EUR)</TableHeader>
69 <TableHeader>Status</TableHeader>
70 </TableRow>
71 </TableHead>
72 <TableBody>
73 {schedule.map((inst) => (
74 <TableRow key={inst.number}>
75 <TableCell>{FormatDate({ value: inst.dueDate, dateStyle: "short" })}</TableCell>
76 <TableCell numeric>{inst.payment}</TableCell>
77 <TableCell numeric>{inst.principal}</TableCell>
78 <TableCell numeric>{inst.interest}</TableCell>
79 <TableCell numeric>{inst.remaining}</TableCell>
80 <TableCell>
81 <Badge tone={
82 inst.status === "paid"
83 ? "success"
84 : inst.status === "due"
85 ? "warning"
86 : "neutral"
87 }>{inst.status}</Badge>
88 </TableCell>
89 </TableRow>
90 ))}
91 </TableBody>
92 </Table>
93
94 <Heading level={3} mt={4}>
95 Signed documents
96 </Heading>
97 <Stack direction="vertical" gap="2">
98 {documents.map((doc, i) => (
99 <Stack direction="row" key={i} gap="2">
100 <span>{doc.name}</span>
101 <span>{FormatDate({ value: doc.signedAt, dateStyle: "short" })}</span>
102 </Stack>
103 ))}
104 </Stack>
105 </CardBody>
106 </Card>
107 );
108 }
lint/typescript(restrict-template-expressions) 3 quality typecheck/TS1002 3 quality typecheck/TS1005 3 quality lint/syntax-error 1 quality render/build-failed 1 completeness 4 get_component 2,645 32 $0.0000
5 get_component 3,295 31 $0.0000
6 write_file 2,568 2,048 $0.0000