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 40 counted, under 6 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, read_file 1,101 111 $0.0002 1 write_file 2,064 2,938 $0.0017 2 stop 5,023 128 $0.0006
Output cap The provider's default 3
4 const { contract, schedule, documents } = data;
5
6 const money = new Intl.NumberFormat("en-GB", {
7 style: "currency",
8 currency: contract.currency,
9 });
10
11 const formatDate = (iso: string) =>
12 new Intl.DateTimeFormat("en-GB", {
13 day: "2-digit",
14 month: "short",
15 year: "numeric",
16 timeZone: "UTC",
17 }).format(new Date(`${iso}T00:00:00Z`));
18
19 const percent = (value: number) =>
20 new Intl.NumberFormat("en-GB", {
21 style: "percent",
22 minimumFractionDigits: 2,
23 maximumFractionDigits: 2,
24 }).format(value);
25
26 const statusLabel: Record<string, string> = {
27 active: "Active",
28 paid: "Paid",
29 due: "Due",
30 upcoming: "Upcoming",
31 };
32
33 const statusColor: Record<string, string> = {
34 active: "#166534",
35 paid: "#166534",
36 due: "#b45309",
37 upcoming: "#475569",
38 };
39
40 const page = css({
41 maxWidth: "960px",
42 margin: "0 auto",
43 padding: "32px 16px",
44 display: "flex",
45 flexDirection: "column",
46 gap: "32px",
47 color: "#0f172a",
48 });
49
50 const card = css({
51 border: "1px solid #e2e8f0",
52 borderRadius: "12px",
53 padding: "24px",
54 background: "white",
55 });
56
57 const sectionTitle = css({
58 fontSize: "18px",
59 fontWeight: "semibold",
60 marginBottom: "16px",
61 });
62
63 const termsGrid = css({
64 display: "grid",
65 gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
66 gap: "16px",
67 });
68
69 const label = css({
70 fontSize: "13px",
71 color: "#64748b",
72 marginBottom: "4px",
73 });
74
75 const value = css({
76 fontSize: "18px",
77 fontWeight: "semibold",
78 });
79
80 const tableWrap = css({
81 overflowX: "auto",
82 });
83
84 const table = css({
85 width: "100%",
86 borderCollapse: "collapse",
87 fontSize: "14px",
88 "& th, & td": {
89 padding: "10px 12px",
90 borderBottom: "1px solid #e2e8f0",
91 textAlign: "left",
92 whiteSpace: "nowrap",
93 },
94 "& th": {
95 fontSize: "12px",
96 textTransform: "uppercase",
97 letterSpacing: "0.04em",
98 color: "#64748b",
99 },
100 "& .num": {
101 textAlign: "right",
102 fontVariantNumeric: "tabular-nums",
103 },
104 });
105
106 const badge = css({
107 display: "inline-block",
108 padding: "2px 10px",
109 borderRadius: "999px",
110 fontSize: "12px",
111 fontWeight: "semibold",
112 border: "1px solid currentColor",
113 });
114
115 const terms: { label: string; value: string }[] = [
116 { label: "Amount borrowed", value: money.format(contract.principal) },
117 { label: "Nominal interest rate", value: percent(contract.nominalRate) },
118 { label: "APR", value: percent(contract.apr) },
119 { label: "Term", value: `${contract.termMonths} months` },
120 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
121 { label: "Start date", value: formatDate(contract.startDate) },
122 { label: "Still owed", value: money.format(contract.outstanding) },
123 ];
124
125 export default function LoanContractPage() {
126 return (
127 <main className={page}>
128 <header>
129 <p className={label}>{contract.product}</p>
130 <h1 className={css({ fontSize: "28px", fontWeight: "bold" })}>
131 Contract {contract.number}
132 </h1>
133 <p className={css({ marginTop: "8px" })}>
134 <span
135 className={badge}
136 style={{ color: statusColor[contract.status] }}
137 >
138 {statusLabel[contract.status] ?? contract.status}
139 </span>
140 </p>
141 </header>
142
143 <section className={card} aria-labelledby="terms-title">
144 <h2 id="terms-title" className={sectionTitle}>
145 Key terms
146 </h2>
147 <dl className={termsGrid}>
148 {terms.map((term) => (
149 <div key={term.label}>
150 <dt className={label}>{term.label}</dt>
151 <dd className={value} style={{ margin: 0 }}>
152 {term.value}
153 </dd>
154 </div>
155 ))}
156 </dl>
157 </section>
158
159 <section className={card} aria-labelledby="schedule-title">
160 <h2 id="schedule-title" className={sectionTitle}>
161 Repayment schedule
162 </h2>
163 <div className={tableWrap}>
164 <table className={table}>
165 <thead>
166 <tr>
167 <th scope="col">No.</th>
168 <th scope="col">Due date</th>
169 <th scope="col" className="num">Payment</th>
170 <th scope="col" className="num">Principal</th>
171 <th scope="col" className="num">Interest</th>
172 <th scope="col" className="num">Balance after</th>
173 <th scope="col">Status</th>
174 </tr>
175 </thead>
176 <tbody>
177 {schedule.map((row) => (
178 <tr key={row.number}>
179 <td>{row.number}</td>
180 <td>{formatDate(row.dueDate)}</td>
181 <td className="num">{money.format(row.payment)}</td>
182 <td className="num">{money.format(row.principal)}</td>
183 <td className="num">{money.format(row.interest)}</td>
184 <td className="num">{money.format(row.remaining)}</td>
185 <td>
186 <span
187 className={badge}
188 style={{ color: statusColor[row.status] }}
189 >
190 {statusLabel[row.status] ?? row.status}
191 </span>
192 </td>
193 </tr>
194 ))}
195 </tbody>
196 </table>
197 </div>
198 </section>
199
200 <section className={card} aria-labelledby="documents-title">
201 <h2 id="documents-title" className={sectionTitle}>
202 Signed documents
203 </h2>
204 <ul className={css({ listStyle: "none", padding: 0, margin: 0 })}>
205 {documents.map((doc) => (
206 <li
207 key={doc.name}
208 className={css({
209 display: "flex",
210 justifyContent: "space-between",
211 gap: "16px",
212 padding: "10px 0",
213 borderBottom: "1px solid #e2e8f0",
214 })}
215 >
216 <span>{doc.name}</span>
217 <span className={css({ color: "#64748b" })}>
218 Signed {formatDate(doc.signedAt)}
219 </span>
220 </li>
221 ))}
222 </ul>
223 </section>
224 </main>
225 );
226 }
227
`16px` is a raw length. Use a token.
page.tsx:112:11 · 1px solid currentColor `1px solid currentColor` is a raw length. Use a token. typecheck/TS2769 2 quality