Runs / loan-contract Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations None. The run followed every rule that was checked.
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, read_file, list_files 1,323 78 $0.0005 1 list_components, list_tokens 2,039 45 $0.0007 2 get_component, get_component, get_component 2,195 99 $0.0008
e02ef3974528
Output cap The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16
17 import data from "./fixture.json";
18
19 type Tone = "neutral" | "success" | "warning" | "danger";
20
21 const { contract, schedule, documents } = data;
22
23 const amountFormatter = new Intl.NumberFormat("en-US", {
24 minimumFractionDigits: 2,
25 maximumFractionDigits: 2,
26 });
27
28 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
29 day: "2-digit",
30 month: "short",
31 year: "numeric",
32 timeZone: "UTC",
33 });
34
35 function money(value: number): string {
36 return `${contract.currency} ${amountFormatter.format(value)}`;
37 }
38
39 function percent(value: number): string {
40 return `${(value * 100).toFixed(2)}%`;
41 }
42
43 function formatDate(isoDate: string): string {
44 return dateFormatter.format(new Date(isoDate));
45 }
46
47 const contractStatuses: Record<string, { label: string; tone: Tone }> = {
48 active: { label: "Active", tone: "success" },
49 draft: { label: "Draft", tone: "neutral" },
50 settled: { label: "Settled", tone: "neutral" },
51 overdue: { label: "Overdue", tone: "danger" },
52 };
53
54 const instalmentStatuses: Record<string, { label: string; tone: Tone }> = {
55 paid: { label: "Paid", tone: "success" },
56 due: { label: "Due", tone: "warning" },
57 upcoming: { label: "Upcoming", tone: "neutral" },
58 };
59
60 function statusMeta(
61 map: Record<string, { label: string; tone: Tone }>,
62 status: string,
63 ): { label: string; tone: Tone } {
64 return map[status] ?? { label: status, tone: "neutral" };
65 }
66
67 const contractStatus = statusMeta(contractStatuses, contract.status);
68
69 const terms: { label: string; value: string }[] = [
70 { label: "Amount borrowed", value: money(contract.principal) },
71 { label: "Nominal interest rate", value: percent(contract.nominalRate) },
72 { label: "APR", value: percent(contract.apr) },
73 { label: "Term", value: `${contract.termMonths} months` },
74 { label: "Monthly payment", value: money(contract.monthlyPayment) },
75 { label: "Start date", value: formatDate(contract.startDate) },
76 ];
77
78 export default function Page() {
79 return (
80 <div className="vektos">
81 <main
82 className={css({
83 minHeight: "full",
84 bg: "bg.canvas",
85 color: "fg.default",
86 px: "4",
87 py: "8",
88 })}
89 >
90 <div
91 className={css({
92 display: "flex",
93 flexDirection: "column",
94 gap: "6",
95 maxWidth: "full",
96 marginInline: "auto",
97 })}
98 >
99 <Card>
100 <CardHeader>
101 <CardTitle>{contract.product}</CardTitle>
102 <CardDescription>
103 Contract {contract.number} · {contract.borrower}
104 </CardDescription>
105 </CardHeader>
106 <CardBody>
107 <div
108 className={css({
109 display: "flex",
110 flexDirection: "column",
111 gap: "6",
112 })}
113 >
114 <div
115 className={css({
116 display: "flex",
117 alignItems: "center",
118 gap: "3",
119 })}
120 >
121 <span
122 className={css({ fontSize: "sm", color: "fg.muted" })}
123 >
124 Contract status
125 </span>
126 <Badge tone={contractStatus.tone}>
127 {contractStatus.label}
128 </Badge>
129 </div>
130 <div
131 className={css({
132 display: "flex",
133 flexDirection: "column",
134 gap: "1",
135 })}
136 >
137 <span
138 className={css({ fontSize: "sm", color: "fg.muted" })}
139 >
140 Outstanding balance
141 </span>
142 <span
143 className={css({
144 fontSize: "lg",
145 fontWeight: "semibold",
146 color: "fg.default",
147 })}
148 >
149 {money(contract.outstanding)}
150 </span>
151 </div>
152 </div>
153 </CardBody>
154 </Card>
155
156 <Card>
157 <CardHeader>
158 <CardTitle>Key terms</CardTitle>
159 <CardDescription>
160 Agreed conditions of the contract.
161 </CardDescription>
162 </CardHeader>
163 <CardBody>
164 <div
165 className={css({
166 display: "grid",
167 gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
168 gap: "4",
169 })}
170 >
171 {terms.map((term) => (
172 <div
173 key={term.label}
174 className={css({
175 display: "flex",
176 flexDirection: "column",
177 gap: "0.5",
178 })}
179 >
180 <span
181 className={css({ fontSize: "xs", color: "fg.muted" })}
182 >
183 {term.label}
184 </span>
185 <span
186 className={css({
187 fontSize: "md",
188 fontWeight: "medium",
189 color: "fg.default",
190 })}
191 >
192 {term.value}
193 </span>
194 </div>
195 ))}
196 </div>
197 </CardBody>
198 </Card>
199
200 <Card>
201 <CardHeader>
202 <CardTitle>Repayment schedule</CardTitle>
203 <CardDescription>
204 {`${schedule.length} instalments shown · amounts in ${contract.currency}`}
205 </CardDescription>
206 </CardHeader>
207 <Table
208 aria-label="Repayment schedule"
209 className={css({ marginBlockStart: "4" })}
210 >
211 <TableHead>
212 <TableRow>
213 <TableHeader numeric>Instalment</TableHeader>
214 <TableHeader>Due date</TableHeader>
215 <TableHeader numeric>Payment</TableHeader>
216 <TableHeader numeric>Principal</TableHeader>
217 <TableHeader numeric>Interest</TableHeader>
218 <TableHeader numeric>Balance after</TableHeader>
219 <TableHeader>Status</TableHeader>
220 </TableRow>
221 </TableHead>
222 <TableBody>
223 {schedule.map((instalment) => {
224 const status = statusMeta(
225 instalmentStatuses,
226 instalment.status,
227 );
228
229 return (
230 <TableRow key={instalment.number}>
231 <TableCell numeric>{instalment.number}</TableCell>
232 <TableCell>{formatDate(instalment.dueDate)}</TableCell>
233 <TableCell numeric>
234 {amountFormatter.format(instalment.payment)}
235 </TableCell>
236 <TableCell numeric>
237 {amountFormatter.format(instalment.principal)}
238 </TableCell>
239 <TableCell numeric>
240 {amountFormatter.format(instalment.interest)}
241 </TableCell>
242 <TableCell numeric>
243 {amountFormatter.format(instalment.remaining)}
244 </TableCell>
245 <TableCell>
246 <Badge tone={status.tone}>{status.label}</Badge>
247 </TableCell>
248 </TableRow>
249 );
250 })}
251 </TableBody>
252 </Table>
253 </Card>
254
255 <Card>
256 <CardHeader>
257 <CardTitle>Signed documents</CardTitle>
258 <CardDescription>
259 Documents signed by the borrower.
260 </CardDescription>
261 </CardHeader>
262 <Table
263 aria-label="Signed documents"
264 className={css({ marginBlockStart: "4" })}
265 >
266 <TableHead>
267 <TableRow>
268 <TableHeader>Document</TableHeader>
269 <TableHeader>Signed on</TableHeader>
270 </TableRow>
271 </TableHead>
272 <TableBody>
273 {documents.map((document) => (
274 <TableRow key={document.name}>
275 <TableCell>{document.name}</TableCell>
276 <TableCell>{formatDate(document.signedAt)}</TableCell>
277 </TableRow>
278 ))}
279 </TableBody>
280 </Table>
281 </Card>
282 </div>
283 </main>
284 </div>
285 );
286 }
287
4 check_code 4,961 1,899 $0.0038