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 4 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 list_files 164 64 $0.0000 1 read_file, get_guidelines 242 44 $0.0000 2 list_components, list_tokens 3,422 40 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Heading,
13 Stack,
14 Table,
15 TableBody,
16 TableCell,
17 TableHead,
18 TableHeader,
19 TableRow,
20 Text,
21 } from "@vektos/ds";
22
23 const contract = data.contract;
24 const schedule = data.schedule;
25 const documents = data.documents;
26
27 const statusTone = (status: string): "success" | "warning" | "neutral" => {
28 switch (status) {
29 case "paid":
30 return "success";
31 case "due":
32 return "warning";
33 default:
34 return "neutral";
35 }
36 };
37
38 const statusLabel = (status: string): string => {
39 switch (status) {
40 case "paid":
41 return "Paid";
42 case "due":
43 return "Due";
44 case "upcoming":
45 return "Upcoming";
46 default:
47 return status.charAt(0).toUpperCase() + status.slice(1);
48 }
49 };
50
51 export default function Page() {
52 return (
53 <div className="vektos">
54 <Stack gap="6" margin="6">
55 <Breadcrumb
56 items={[{ label: "Contracts", href: "#" }, { label: contract.number }]}
57 />
58
59 <Stack gap="2">
60 <Heading level={1}>{contract.product}</Heading>
61 <Stack flexDirection="row" gap="2" alignItems="center">
62 <Text mono>{contract.number}</Text>
63 <Badge tone="neutral">
64 {contract.status.charAt(0).toUpperCase() + contract.status.slice(1)}
65 </Badge>
66 </Stack>
67 </Stack>
68
69 <Card>
70 <CardHeader>
71 <CardTitle>Key terms</CardTitle>
72 </CardHeader>
73 <CardBody>
74 <DataList
75 items={[
76 {
77 label: "Amount borrowed",
78 value: (
79 <FormatNumber
80 value={contract.principal}
81 format="currency"
82 currency={contract.currency}
83 minimumFractionDigits={2}
84 maximumFractionDigits={2}
85 />
86 ),
87 },
88 {
89 label: "Nominal interest rate",
90 value: (
91 <FormatNumber
92 value={contract.nominalRate}
93 format="percent"
94 minimumFractionDigits={2}
95 maximumFractionDigits={2}
96 />
97 ),
98 },
99 {
100 label: "APR",
101 value: (
102 <FormatNumber
103 value={contract.apr}
104 format="percent"
105 minimumFractionDigits={2}
106 maximumFractionDigits={2}
107 />
108 ),
109 },
110 {
111 label: "Term",
112 value: `${contract.termMonths} months`,
113 },
114 {
115 label: "Monthly payment",
116 value: (
117 <FormatNumber
118 value={contract.monthlyPayment}
119 format="currency"
120 currency={contract.currency}
121 minimumFractionDigits={2}
122 maximumFractionDigits={2}
123 />
124 ),
125 },
126 {
127 label: "Start date",
128 value: <FormatDate value={contract.startDate} dateStyle="long" />,
129 },
130 {
131 label: "Outstanding balance",
132 value: (
133 <FormatNumber
134 value={contract.outstanding}
135 format="currency"
136 currency={contract.currency}
137 minimumFractionDigits={2}
138 maximumFractionDigits={2}
139 />
140 ),
141 },
142 ]}
143 />
144 </CardBody>
145 </Card>
146
147 <Card>
148 <CardHeader>
149 <CardTitle>Repayment schedule</CardTitle>
150 </CardHeader>
151 <Table aria-label="Repayment schedule">
152 <TableHead>
153 <TableRow>
154 <TableHeader>#</TableHeader>
155 <TableHeader>Due date</TableHeader>
156 <TableHeader numeric>Payment</TableHeader>
157 <TableHeader numeric>Principal</TableHeader>
158 <TableHeader numeric>Interest</TableHeader>
159 <TableHeader numeric>Balance</TableHeader>
160 <TableHeader>Status</TableHeader>
161 </TableRow>
162 </TableHead>
163 <TableBody>
164 {schedule.map((row) => (
165 <TableRow key={row.number}>
166 <TableCell>{row.number}</TableCell>
167 <TableCell>
168 <FormatDate value={row.dueDate} dateStyle="medium" />
169 </TableCell>
170 <TableCell numeric>
171 <FormatNumber
172 value={row.payment}
173 format="currency"
174 currency={contract.currency}
175 minimumFractionDigits={2}
176 maximumFractionDigits={2}
177 />
178 </TableCell>
179 <TableCell numeric>
180 <FormatNumber
181 value={row.principal}
182 format="currency"
183 currency={contract.currency}
184 minimumFractionDigits={2}
185 maximumFractionDigits={2}
186 />
187 </TableCell>
188 <TableCell numeric>
189 <FormatNumber
190 value={row.interest}
191 format="currency"
192 currency={contract.currency}
193 minimumFractionDigits={2}
194 maximumFractionDigits={2}
195 />
196 </TableCell>
197 <TableCell numeric>
198 <FormatNumber
199 value={row.remaining}
200 format="currency"
201 currency={contract.currency}
202 minimumFractionDigits={2}
203 maximumFractionDigits={2}
204 />
205 </TableCell>
206 <TableCell>
207 <Badge tone={statusTone(row.status)}>
208 {statusLabel(row.status)}
209 </Badge>
210 </TableCell>
211 </TableRow>
212 ))}
213 </TableBody>
214 </Table>
215 </Card>
216
217 <Card>
218 <CardHeader>
219 <CardTitle>Signed documents</CardTitle>
220 </CardHeader>
221 <Table aria-label="Signed documents">
222 <TableHead>
223 <TableRow>
224 <TableHeader>Document</TableHeader>
225 <TableHeader>Signed on</TableHeader>
226 </TableRow>
227 </TableHead>
228 <TableBody>
229 {documents.map((doc) => (
230 <TableRow key={doc.name}>
231 <TableCell>{doc.name}</TableCell>
232 <TableCell>
233 <FormatDate value={doc.signedAt} dateStyle="long" />
234 </TableCell>
235 </TableRow>
236 ))}
237 </TableBody>
238 </Table>
239 </Card>
240 </Stack>
241 </div>
242 );
243 }
244 ```
245
246 This looks good. Let me double-check imports: all used. Text used. Badge used. Good.
247
248 One more consideration: should I sort documents by signedAt? Not required. Keep order.
249
250 Should I add LocaleProvider? I decided no. Fine.
251
252 Let me also reconsider: the grader might expect the contract status badge tone to be success for "active". But I used neutral. Given guidelines "neutral for everything else", active is everything else. Fine.
253
254 I think this is complete. Write it.<|end|><|start|> fileList <|constrain|>xml<|message|><rfl:parameter name="path">
255 page.tsx
5 get_component, get_component, get_component, get_component 148 158 $0.0000
6 get_component, get_component, get_component, get_component 11,180 124 $0.0000
7 get_component, get_component, get_component, get_component 3,153 86 $0.0000
8 write_file 3,269 7,308 $0.0000