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 3 counted, under 3 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 40 $0.0000 1 list_components 2,200 201 $0.0000 2 write_file 4,850 1,673 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 TableHead,
13 TableBody,
14 TableRow,
15 TableHeader,
16 TableCell,
17 FormatNumber,
18 } from "@vektos/ds";
19
20 export default function Page() {
21 const { contract, schedule, documents } = data;
22
23 return (
24 <Card>
25 <CardHeader>
26 <Heading size="2" noOfRanks={1}>
27 {contract.product}
28 </Heading>
29 </CardHeader>
30
31 <CardBody>
32 <Stack gap={4}>
33 <Stack direction="row" gap={2}>
34 <Text>Contract number: {contract.number}</Text>
35 <Badge variant="subtle">{contract.status}</Badge>
36 </Stack>
37
38 <Stack direction="row" gap={2}>
39 <Text>Amount borrowed</Text>
40 <FormatNumber value={contract.principal} format="currency" currency="EUR" />
41 </Stack>
42
43 <Stack direction="row" gap={2}>
44 <Text>Nominal interest rate</Text>
45 <FormatNumber value={contract.nominalRate * 100} format="percentage" />
46 </Stack>
47
48 <Stack direction="row" gap={2}>
49 <Text>APR</Text>
50 <FormatNumber value={contract.apr * 100} format="percentage" />
51 </Stack>
52
53 <Stack direction="row" gap={2}>
54 <Text>Term</Text>
55 <Text>{contract.termMonths} months</Text>
56 </Stack>
57
58 <Stack direction="row" gap={2}>
59 <Text>Monthly payment</Text>
60 <FormatNumber value={contract.monthlyPayment} format="currency" currency="EUR" />
61 </Stack>
62
63 <Stack direction="row" gap={2}>
64 <Text>Start date</Text>
65 <Text>{new Date(contract.startDate).toLocaleDateString()}</Text>
66 </Stack>
67
68 <Stack direction="row" gap={2}>
69 <Text>Outstanding</Text>
70 <FormatNumber value={contract.outstanding} format="currency" currency="EUR" />
71 </Stack>
72 </Stack>
73 </CardBody>
74 </Card>
75
76 <Card>
77 <CardHeader>
78 <Heading size="2" noOfRanks={1}>
79 Repayment schedule
80 </Heading>
81 </CardHeader>
82
83 <CardBody>
84 <Table>
85 <TableHead>
86 <TableRow>
87 <TableHeader>Due date</TableHeader>
88 <TableHeader>Payment</TableHeader>
89 <TableHeader>Principal</TableHeader>
90 <TableHeader>Interest</TableHeader>
91 <TableRemaining>Balance</TableRemaining>
92 <TableHeader>Status</TableHeader>
93 </TableRow>
94 </TableHead>
95 <TableBody>
96 {schedule.map((inst) => (
97 <TableRow key={inst.number}>
98 <TableCell>{new Date(inst.dueDate).toLocaleDateString()}</TableCell>
99 <TableCell>
100 <FormatNumber value={inst.payment} format="currency" currency="EUR" />
101 </TableCell>
102 <TableCell>
103 <FormatNumber value={inst.principal} format="currency" currency="EUR" />
104 </TableCell>
105 <TableCell>
106 <FormatNumber value={inst.interest} format="currency" currency="EUR" />
107 </TableCell>
108 <TableCell>
109 <FormatNumber value={inst.remaining} format="currency" currency="EUR" />
110 </TableCell>
111 <TableCell>
112 <Badge variant={inst.status === "paid" ? "subtle" : inst.status === "due" ? "warning" : "secondary"}>
113 {inst.status}
114 </Badge>
115 </TableCell>
116 </TableRow>
117 ))}
118 </TableBody>
119 </Table>
120 </CardBody>
121 </Card>
122
123 <Card>
124 <CardHeader>
125 <Heading size="2" noOfRanks={1}>
126 Signed documents
127 </Heading>
128 </CardHeader>
129
130 <CardBody>
131 <Stack gap={2}>
132 {documents.map((doc) => (
133 <Stack direction="row" gap={2} key={doc.name}>
134 <Text>{doc.name}</Text>
135 <Text>{new Date(doc.signedAt).toLocaleDateString()}</Text>
136 </Stack>
137 ))}
138 </Stack>
139 </CardBody>
140 </Card>
141 );
142 }
4 check_code 1,349 1,115 $0.0000