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 1 counted, under 1 rule. “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, read_file 132 68 $0.0001 1 list_components, get_component, get_component 2,107 92 $0.0007 2 get_component, list_tokens 4,913 69 $0.0016
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 import data from "./fixture.json";
17
18 const { contract, schedule, documents } = data;
19
20 const currency = contract.currency;
21
22 const money = new Intl.NumberFormat("en-GB", {
23 style: "currency",
24 currency,
25 currencyDisplay: "code",
26 minimumFractionDigits: 2,
27 maximumFractionDigits: 2,
28 });
29
30 const amount = new Intl.NumberFormat("en-GB", {
31 minimumFractionDigits: 2,
32 maximumFractionDigits: 2,
33 });
34
35 const percent = new Intl.NumberFormat("en-GB", {
36 style: "percent",
37 minimumFractionDigits: 2,
38 maximumFractionDigits: 2,
39 });
40
41 const dateFormat = new Intl.DateTimeFormat("en-GB", {
42 day: "numeric",
43 month: "short",
44 year: "numeric",
45 });
46
47 const formatDate = (isoDate: string) =>
48 dateFormat.format(new Date(`${isoDate}T00:00:00`));
49
50 type Tone = "neutral" | "success" | "warning" | "danger";
51
52 const tones: Record<string, Tone> = {
53 active: "neutral",
54 settled: "success",
55 overdue: "danger",
56 paid: "success",
57 due: "warning",
58 upcoming: "neutral",
59 };
60
61 const labels: Record<string, string> = {
62 active: "Active",
63 settled: "Settled",
64 overdue: "Overdue",
65 paid: "Paid",
66 due: "Due",
67 upcoming: "Upcoming",
68 };
69
70 const toneFor = (status: string): Tone => tones[status] ?? "neutral";
71 const labelFor = (status: string): string => labels[status] ?? status;
72
73 const terms: { label: string; value: string }[] = [
74 { label: "Amount borrowed", value: money.format(contract.principal) },
75 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
76 { label: "APR", value: percent.format(contract.apr) },
77 { label: "Term", value: `${contract.termMonths} months` },
78 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
79 { label: "Start date", value: formatDate(contract.startDate) },
80 ];
81
82 const signedDocuments = [...documents].sort((a, b) =>
83 a.signedAt.localeCompare(b.signedAt),
84 );
85
86 export default function LoanContractPage() {
87 const paidInstalments = schedule.filter((row) => row.status === "paid").length;
88
89 return (
90 <main
91 className={`vektos ${css({
92 minHeight: "full",
93 bg: "bg.canvas",
94 color: "fg.default",
95 px: "6",
96 py: "8",
97 })}`}
98 >
99 <div className={css({ display: "flex", flexDirection: "column", gap: "6" })}>
100 <header
101 className={css({
102 display: "flex",
103 flexWrap: "wrap",
104 alignItems: "center",
105 justifyContent: "space-between",
106 gap: "4",
107 })}
108 >
109 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
110 <h1
111 className={css({
112 fontSize: "lg",
113 fontWeight: "semibold",
114 lineHeight: "tight",
115 color: "fg.default",
116 })}
117 >
118 {contract.product}
119 </h1>
120 <p className={css({ fontSize: "sm", color: "fg.muted", m: "0" })}>
121 Contract {contract.number} · {contract.borrower}
122 </p>
123 </div>
124 <Badge tone={toneFor(contract.status)}>{labelFor(contract.status)}</Badge>
125 </header>
126
127 <Card>
128 <CardHeader>
129 <CardTitle asChild>
130 <h2>Key terms</h2>
131 </CardTitle>
132 <CardDescription>
133 Borrower {contract.borrower}. All amounts in {currency}.
134 </CardDescription>
135 </CardHeader>
136 <CardBody>
137 <dl className={css({ display: "flex", flexWrap: "wrap", gap: "6", m: "0" })}>
138 {terms.map((term) => (
139 <div
140 key={term.label}
141 className={css({
142 display: "flex",
143 flexDirection: "column",
144 gap: "1",
145 minWidth: "60",
146 })}
147 >
148 <dt
149 className={css({
150 fontSize: "xs",
151 fontWeight: "medium",
152 color: "fg.muted",
153 m: "0",
154 })}
155 >
156 {term.label}
157 </dt>
158 <dd
159 className={css({
160 fontSize: "md",
161 fontWeight: "semibold",
162 color: "fg.default",
163 m: "0",
164 })}
165 >
166 {term.value}
167 </dd>
168 </div>
169 ))}
170 </dl>
171 </CardBody>
172 </Card>
173
174 <Card>
175 <CardHeader>
176 <CardTitle asChild>
177 <h2>Outstanding balance</h2>
178 </CardTitle>
179 <CardDescription>
180 After {paidInstalments} of {contract.termMonths} instalments paid.
181 </CardDescription>
182 </CardHeader>
183 <CardBody>
184 <p
185 className={css({
186 fontSize: "lg",
187 fontWeight: "semibold",
188 color: "fg.default",
189 m: "0",
190 })}
191 >
192 {money.format(contract.outstanding)}
193 </p>
194 </CardBody>
195 </Card>
196
197 <Card>
198 <CardHeader>
199 <CardTitle asChild>
200 <h2>Repayment schedule</h2>
201 </CardTitle>
202 <CardDescription>
203 {schedule.length} of {contract.termMonths} instalments shown. All amounts in{" "}
204 {currency}.
205 </CardDescription>
206 </CardHeader>
207 <div className={css({ overflowX: "auto" })}>
208 <Table
209 aria-label="Repayment schedule"
210 className={css({ marginBlockStart: "4" })}
211 >
212 <TableHead>
213 <TableRow>
214 <TableHeader numeric>No.</TableHeader>
215 <TableHeader>Due date</TableHeader>
216 <TableHeader numeric>Payment ({currency})</TableHeader>
217 <TableHeader numeric>Principal ({currency})</TableHeader>
218 <TableHeader numeric>Interest ({currency})</TableHeader>
219 <TableHeader numeric>Balance after ({currency})</TableHeader>
220 <TableHeader>Status</TableHeader>
221 </TableRow>
222 </TableHead>
223 <TableBody>
224 {schedule.map((instalment) => (
225 <TableRow key={instalment.number}>
226 <TableCell numeric>{instalment.number}</TableCell>
227 <TableCell>{formatDate(instalment.dueDate)}</TableCell>
228 <TableCell numeric>{amount.format(instalment.payment)}</TableCell>
229 <TableCell numeric>{amount.format(instalment.principal)}</TableCell>
230 <TableCell numeric>{amount.format(instalment.interest)}</TableCell>
231 <TableCell numeric>{amount.format(instalment.remaining)}</TableCell>
232 <TableCell>
233 <Badge tone={toneFor(instalment.status)}>
234 {labelFor(instalment.status)}
235 </Badge>
236 </TableCell>
237 </TableRow>
238 ))}
239 </TableBody>
240 </Table>
241 </div>
242 </Card>
243
244 <Card>
245 <CardHeader>
246 <CardTitle asChild>
247 <h2>Signed documents</h2>
248 </CardTitle>
249 <CardDescription>
250 {signedDocuments.length} documents on file for this contract.
251 </CardDescription>
252 </CardHeader>
253 <Table
254 aria-label="Signed documents"
255 className={css({ marginBlockStart: "4" })}
256 >
257 <TableHead>
258 <TableRow>
259 <TableHeader>Document</TableHeader>
260 <TableHeader>Signed on</TableHeader>
261 </TableRow>
262 </TableHead>
263 <TableBody>
264 {signedDocuments.map((document) => (
265 <TableRow key={document.name}>
266 <TableCell>{document.name}</TableCell>
267 <TableCell>{formatDate(document.signedAt)}</TableCell>
268 </TableRow>
269 ))}
270 </TableBody>
271 </Table>
272 </Card>
273 </div>
274 </main>
275 );
276 }
277
list_tokens, list_tokens, list_files
5 write_file 1,609 9,621 $0.0121