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 2 counted, under 2 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_files 1,290 50 $0.0004 1 read_file, list_components 2,625 61 $0.0009 2 get_component, get_component, get_component, list_tokens 1,199 112 $0.0005
e02ef3974528
Output cap The provider's default 4 Badge,
5 Card,
6 CardBody,
7 CardDescription,
8 CardHeader,
9 CardTitle,
10 Table,
11 TableBody,
12 TableCell,
13 TableHead,
14 TableHeader,
15 TableRow,
16 } from "@vektos/ds";
17 import { css } from "styled-system/css";
18 import data from "./fixture.json";
19
20 type BadgeTone = "neutral" | "success" | "warning" | "danger";
21
22 const amountFormatter = new Intl.NumberFormat("en-GB", {
23 minimumFractionDigits: 2,
24 maximumFractionDigits: 2,
25 });
26
27 const percentFormatter = new Intl.NumberFormat("en-GB", {
28 style: "percent",
29 minimumFractionDigits: 2,
30 maximumFractionDigits: 2,
31 });
32
33 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
34 day: "2-digit",
35 month: "short",
36 year: "numeric",
37 });
38
39 function formatDate(isoDate: string): string {
40 const [year, month, day] = isoDate.split("-").map(Number);
41 return dateFormatter.format(new Date(year, month - 1, day));
42 }
43
44 function formatAmount(value: number): string {
45 return amountFormatter.format(value);
46 }
47
48 function instalmentStatus(status: string): { tone: BadgeTone; label: string } {
49 if (status === "paid") {
50 return { tone: "success", label: "Paid" };
51 }
52 if (status === "due") {
53 return { tone: "warning", label: "Due" };
54 }
55 return { tone: "neutral", label: "Upcoming" };
56 }
57
58 export default function LoanContractPage() {
59 const { contract, schedule, documents } = data;
60 const currency = contract.currency;
61
62 const keyTerms = [
63 { label: "Amount borrowed", value: `${formatAmount(contract.principal)} ${currency}` },
64 { label: "Nominal interest rate", value: percentFormatter.format(contract.nominalRate) },
65 { label: "APR", value: percentFormatter.format(contract.apr) },
66 { label: "Term", value: `${contract.termMonths} months` },
67 { label: "Monthly payment", value: `${formatAmount(contract.monthlyPayment)} ${currency}` },
68 { label: "Start date", value: formatDate(contract.startDate) },
69 ];
70
71 return (
72 <div
73 className={`vektos ${css({
74 bg: "bg.canvas",
75 color: "fg.default",
76 padding: "6",
77 })}`}
78 >
79 <div
80 className={css({
81 display: "flex",
82 flexDirection: "column",
83 gap: "6",
84 })}
85 >
86 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
87 <div
88 className={css({
89 display: "flex",
90 alignItems: "center",
91 gap: "3",
92 flexWrap: "wrap",
93 })}
94 >
95 <h1
96 className={css({
97 fontSize: "lg",
98 fontWeight: "semibold",
99 lineHeight: "tight",
100 color: "fg.default",
101 })}
102 >
103 {contract.product}
104 </h1>
105 <Badge tone="neutral">Active</Badge>
106 </div>
107 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
108 Contract {contract.number} · Borrower {contract.borrower}
109 </p>
110 </header>
111
112 <Card>
113 <CardHeader>
114 <CardTitle>Outstanding balance</CardTitle>
115 <CardDescription>Remaining principal still to repay on this contract.</CardDescription>
116 </CardHeader>
117 <CardBody>
118 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
119 <p className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
120 {formatAmount(contract.outstanding)} {currency}
121 </p>
122 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
123 Of {formatAmount(contract.principal)} {currency} borrowed.
124 </p>
125 </div>
126 </CardBody>
127 </Card>
128
129 <Card>
130 <CardHeader>
131 <CardTitle>Key terms</CardTitle>
132 <CardDescription>What was agreed when the contract was signed.</CardDescription>
133 </CardHeader>
134 <CardBody>
135 <dl
136 className={css({
137 display: "flex",
138 flexWrap: "wrap",
139 gap: "6",
140 margin: "0",
141 })}
142 >
143 {keyTerms.map((term) => (
144 <div
145 key={term.label}
146 className={css({
147 display: "flex",
148 flexDirection: "column",
149 gap: "1",
150 minWidth: "60",
151 })}
152 >
153 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>{term.label}</dt>
154 <dd
155 className={css({
156 fontSize: "md",
157 fontWeight: "semibold",
158 color: "fg.default",
159 margin: "0",
160 })}
161 >
162 {term.value}
163 </dd>
164 </div>
165 ))}
166 </dl>
167 </CardBody>
168 </Card>
169
170 <Card>
171 <CardHeader>
172 <CardTitle>Repayment schedule</CardTitle>
173 <CardDescription>
174 {schedule.length} instalments shown of {contract.termMonths} in total.
175 </CardDescription>
176 </CardHeader>
177 <Table
178 aria-label="Repayment schedule"
179 className={css({ marginBlockStart: "4" })}
180 >
181 <TableHead>
182 <TableRow>
183 <TableHeader>Instalment</TableHeader>
184 <TableHeader>Due date</TableHeader>
185 <TableHeader numeric>Payment ({currency})</TableHeader>
186 <TableHeader numeric>Principal ({currency})</TableHeader>
187 <TableHeader numeric>Interest ({currency})</TableHeader>
188 <TableHeader numeric>Balance after ({currency})</TableHeader>
189 <TableHeader>Status</TableHeader>
190 </TableRow>
191 </TableHead>
192 <TableBody>
193 {schedule.map((instalment) => {
194 const status = instalmentStatus(instalment.status);
195 return (
196 <TableRow key={instalment.number}>
197 <TableCell numeric>{instalment.number}</TableCell>
198 <TableCell>{formatDate(instalment.dueDate)}</TableCell>
199 <TableCell numeric>{formatAmount(instalment.payment)}</TableCell>
200 <TableCell numeric>{formatAmount(instalment.principal)}</TableCell>
201 <TableCell numeric>{formatAmount(instalment.interest)}</TableCell>
202 <TableCell numeric>{formatAmount(instalment.remaining)}</TableCell>
203 <TableCell>
204 <Badge tone={status.tone}>{status.label}</Badge>
205 </TableCell>
206 </TableRow>
207 );
208 })}
209 </TableBody>
210 </Table>
211 </Card>
212
213 <Card>
214 <CardHeader>
215 <CardTitle>Signed documents</CardTitle>
216 <CardDescription>Documents signed as part of this contract.</CardDescription>
217 </CardHeader>
218 <Table
219 aria-label="Signed documents"
220 className={css({ marginBlockStart: "4" })}
221 >
222 <TableHead>
223 <TableRow>
224 <TableHeader>Document</TableHeader>
225 <TableHeader>Signed on</TableHeader>
226 </TableRow>
227 </TableHead>
228 <TableBody>
229 {documents.map((document) => (
230 <TableRow key={document.name}>
231 <TableCell>{document.name}</TableCell>
232 <TableCell>{formatDate(document.signedAt)}</TableCell>
233 </TableRow>
234 ))}
235 </TableBody>
236 </Table>
237 </Card>
238 </div>
239 </div>
240 );
241 }
242
4 check_code 4,435 1,811 $0.0036