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 3 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 read_file, docs-list 5,425 157 $0.0006 1 docs-show, docs-show, docs-show 6,862 195 $0.0008 2 write_file 9,617 5,004 $0.0035 3
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 type Tone = "neutral" | "success" | "warning" | "danger";
19
20 const money = new Intl.NumberFormat("en-IE", {
21 style: "currency",
22 currency: data.contract.currency,
23 });
24
25 const percent = new Intl.NumberFormat("en-IE", {
26 style: "percent",
27 minimumFractionDigits: 2,
28 maximumFractionDigits: 2,
29 });
30
31 const dateFormat = new Intl.DateTimeFormat("en-GB", {
32 day: "numeric",
33 month: "short",
34 year: "numeric",
35 timeZone: "UTC",
36 });
37
38 function formatDate(iso: string): string {
39 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
40 }
41
42 const contractStatuses: Record<string, { tone: Tone; label: string }> = {
43 active: { tone: "success", label: "Active" },
44 closed: { tone: "neutral", label: "Closed" },
45 overdue: { tone: "danger", label: "Overdue" },
46 };
47
48 const instalmentStatuses: Record<string, { tone: Tone; label: string }> = {
49 paid: { tone: "success", label: "Paid" },
50 due: { tone: "warning", label: "Due" },
51 upcoming: { tone: "neutral", label: "Upcoming" },
52 };
53
54 const { contract, schedule, documents } = data;
55 const contractStatus = contractStatuses[contract.status] ?? {
56 tone: "neutral" as Tone,
57 label: contract.status,
58 };
59
60 const pageStyle = css({
61 display: "flex",
62 flexDirection: "column",
63 gap: "6",
64 maxWidth: "5xl",
65 marginInline: "auto",
66 padding: "6",
67 });
68
69 const headerStyle = css({
70 display: "flex",
71 flexWrap: "wrap",
72 alignItems: "center",
73 justifyContent: "space-between",
74 gap: "3",
75 });
76
77 const titleStyle = css({
78 fontSize: "2xl",
79 fontWeight: "semibold",
80 margin: "0",
81 });
82
83 const termsStyle = css({
84 display: "grid",
85 gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))",
86 gap: "5",
87 margin: "0",
88 });
89
90 const termLabelStyle = css({
91 fontSize: "sm",
92 opacity: "0.7",
93 margin: "0",
94 });
95
96 const termValueStyle = css({
97 fontSize: "lg",
98 fontWeight: "semibold",
99 fontVariantNumeric: "tabular-nums",
100 margin: "0",
101 });
102
103 const scrollStyle = css({
104 overflowX: "auto",
105 });
106
107 const numericStyle = css({
108 fontVariantNumeric: "tabular-nums",
109 });
110
111 const terms: { label: string; value: string }[] = [
112 { label: "Amount borrowed", value: money.format(contract.principal) },
113 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
114 { label: "APR", value: percent.format(contract.apr) },
115 { label: "Term", value: `${contract.termMonths} months` },
116 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
117 { label: "Start date", value: formatDate(contract.startDate) },
118 { label: "Still owed", value: money.format(contract.outstanding) },
119 ];
120
121 export default function LoanContractPage() {
122 return (
123 <main className={pageStyle}>
124 <header className={headerStyle}>
125 <div>
126 <h1 className={titleStyle}>{contract.product}</h1>
127 <p className={css({ margin: "0" })}>
128 Contract {contract.number}
129 </p>
130 </div>
131 <Badge tone={contractStatus.tone}>{contractStatus.label}</Badge>
132 </header>
133
134 <Card>
135 <CardHeader>
136 <CardTitle asChild>
137 <h2>Key terms</h2>
138 </CardTitle>
139 <CardDescription>Terms agreed for this loan.</CardDescription>
140 </CardHeader>
141 <CardBody>
142 <dl className={termsStyle}>
143 {terms.map((term) => (
144 <div key={term.label}>
145 <dt className={termLabelStyle}>{term.label}</dt>
146 <dd className={termValueStyle}>{term.value}</dd>
147 </div>
148 ))}
149 </dl>
150 </CardBody>
151 </Card>
152
153 <Card>
154 <CardHeader>
155 <CardTitle asChild>
156 <h2>Repayment schedule</h2>
157 </CardTitle>
158 <CardDescription>
159 Each instalment, how it splits into principal and interest, and the balance left after it.
160 </CardDescription>
161 </CardHeader>
162 <div className={scrollStyle}>
163 <Table aria-label="Repayment schedule">
164 <TableHead>
165 <TableRow>
166 <TableHeader>No.</TableHeader>
167 <TableHeader>Due date</TableHeader>
168 <TableHeader numeric>Payment</TableHeader>
169 <TableHeader numeric>Principal</TableHeader>
170 <TableHeader numeric>Interest</TableHeader>
171 <TableHeader numeric>Balance after</TableHeader>
172 <TableHeader>Status</TableHeader>
173 </TableRow>
174 </TableHead>
175 <TableBody>
176 {schedule.map((row) => {
177 const status = instalmentStatuses[row.status] ?? {
178 tone: "neutral" as Tone,
179 label: row.status,
180 };
181 return (
182 <TableRow key={row.number}>
183 <TableCell>{row.number}</TableCell>
184 <TableCell>{formatDate(row.dueDate)}</TableCell>
185 <TableCell numeric>{money.format(row.payment)}</TableCell>
186 <TableCell numeric>{money.format(row.principal)}</TableCell>
187 <TableCell numeric>{money.format(row.interest)}</TableCell>
188 <TableCell numeric>{money.format(row.remaining)}</TableCell>
189 <TableCell>
190 <Badge tone={status.tone}>{status.label}</Badge>
191 </TableCell>
192 </TableRow>
193 );
194 })}
195 </TableBody>
196 </Table>
197 </div>
198 </Card>
199
200 <Card>
201 <CardHeader>
202 <CardTitle asChild>
203 <h2>Signed documents</h2>
204 </CardTitle>
205 <CardDescription>Documents signed for this contract.</CardDescription>
206 </CardHeader>
207 <Table aria-label="Signed documents">
208 <TableHead>
209 <TableRow>
210 <TableHeader>Document</TableHeader>
211 <TableHeader>Signed on</TableHeader>
212 </TableRow>
213 </TableHead>
214 <TableBody>
215 {documents.map((doc) => (
216 <TableRow key={doc.name}>
217 <TableCell>{doc.name}</TableCell>
218 <TableCell className={numericStyle}>{formatDate(doc.signedAt)}</TableCell>
219 </TableRow>
220 ))}
221 </TableBody>
222 </Table>
223 </Card>
224 </main>
225 );
226 }
227