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 56 counted, under 7 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 165 33 $0.0000 1 read_file 340 29 $0.0000 2 list_files 807 33 $0.0000 3
Output cap The provider's default 3
4 const currency = new Intl.NumberFormat("en-GB", {
5 style: "currency",
6 currency: data.contract.currency,
7 });
8
9 const dateFmt = new Intl.DateTimeFormat("en-GB", {
10 day: "numeric",
11 month: "long",
12 year: "numeric",
13 });
14
15 function formatDate(iso: string) {
16 return dateFmt.format(new Date(iso));
17 }
18
19 function percent(value: number) {
20 return `${(value * 100).toFixed(2)}%`;
21 }
22
23 const statusLabel: Record<string, string> = {
24 paid: "Paid",
25 due: "Due",
26 upcoming: "Upcoming",
27 active: "Active",
28 };
29
30 export default function LoanContractDetailPage() {
31 const { contract, schedule, documents } = data;
32
33 return (
34 <main
35 className={css({
36 maxW: "960px",
37 mx: "auto",
38 px: "6",
39 py: "8",
40 fontFamily: "sans",
41 })}
42 >
43 <header className={css({ mb: "8" })}>
44 <h1
45 className={css({
46 fontSize: "2xl",
47 fontWeight: "bold",
48 mb: "1",
49 })}
50 >
51 {contract.product}
52 </h1>
53 <p className={css({ color: "gray.500", mb: "3" })}>
54 Contract {contract.number}
55 </p>
56 <span
57 className={css({
58 display: "inline-block",
59 px: "3",
60 py: "1",
61 borderRadius: "full",
62 fontSize: "sm",
63 fontWeight: "medium",
64 bg: "green.100",
65 color: "green.800",
66 textTransform: "capitalize",
67 })}
68 >
69 {statusLabel[contract.status] ?? contract.status}
70 </span>
71 </header>
72
73 <section className={css({ mb: "8" })}>
74 <h2
75 className={css({
76 fontSize: "lg",
77 fontWeight: "semibold",
78 mb: "4",
79 })}
80 >
81 Key terms
82 </h2>
83 <dl
84 className={css({
85 display: "grid",
86 gridTemplateColumns: { base: "1fr", md: "1fr 1fr" },
87 gap: "4",
88 })}
89 >
90 {[
91 { label: "Amount borrowed", value: currency.format(contract.principal) },
92 { label: "Nominal interest rate", value: percent(contract.nominalRate) },
93 { label: "APR", value: percent(contract.apr) },
94 { label: "Term", value: `${contract.termMonths} months` },
95 { label: "Monthly payment", value: currency.format(contract.monthlyPayment) },
96 { label: "Start date", value: formatDate(contract.startDate) },
97 { label: "Amount still owed", value: currency.format(contract.outstanding) },
98 ].map((item) => (
99 <div
100 key={item.label}
101 className={css({
102 p: "4",
103 borderWidth: "1px",
104 borderColor: "gray.200",
105 borderRadius: "md",
106 })}
107 >
108 <dt className={css({ fontSize: "sm", color: "gray.500", mb: "1" })}>
109 {item.label}
110 </dt>
111 <dd className={css({ fontSize: "lg", fontWeight: "semibold" })}>
112 {item.value}
113 </dd>
114 </div>
115 ))}
116 </dl>
117 </section>
118
119 <section className={css({ mb: "8" })}>
120 <h2
121 className={css({
122 fontSize: "lg",
123 fontWeight: "semibold",
124 mb: "4",
125 })}
126 >
127 Repayment schedule
128 </h2>
129 <div className={css({ overflowX: "auto" })}>
130 <table
131 className={css({
132 width: "100%",
133 borderCollapse: "collapse",
134 fontSize: "sm",
135 })}
136 >
137 <thead>
138 <tr>
139 {[
140 "#",
141 "Due date",
142 "Payment",
143 "Principal",
144 "Interest",
145 "Balance",
146 "Status",
147 ].map((h) => (
148 <th
149 key={h}
150 className={css({
151 textAlign: "left",
152 p: "3",
153 borderBottomWidth: "1px",
154 borderColor: "gray.200",
155 fontWeight: "semibold",
156 color: "gray.500",
157 })}
158 >
159 {h}
160 </th>
161 ))}
162 </tr>
163 </thead>
164 <tbody>
165 {schedule.map((row) => (
166 <tr key={row.number}>
167 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
168 {row.number}
169 </td>
170 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
171 {formatDate(row.dueDate)}
172 </td>
173 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
174 {currency.format(row.payment)}
175 </td>
176 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
177 {currency.format(row.principal)}
178 </td>
179 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
180 {currency.format(row.interest)}
181 </td>
182 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
183 {currency.format(row.remaining)}
184 </td>
185 <td className={css({ p: "3", borderBottomWidth: "1px", borderColor: "gray.200" })}>
186 <span
187 className={css({
188 display: "inline-block",
189 px: "2",
190 py: "0.5",
191 borderRadius: "full",
192 fontSize: "xs",
193 fontWeight: "medium",
194 textTransform: "capitalize",
195 bg:
196 row.status === "paid"
197 ? "green.100"
198 : row.status === "due"
199 ? "yellow.100"
200 : "gray.100",
201 color:
202 row.status === "paid"
203 ? "green.800"
204 : row.status === "due"
205 ? "yellow.800"
206 : "gray.800",
207 })}
208 >
209 {statusLabel[row.status] ?? row.status}
210 </span>
211 </td>
212 </tr>
213 ))}
214 </tbody>
215 </table>
216 </div>
217 </section>
218
219 <section>
220 <h2
221 className={css({
222 fontSize: "lg",
223 fontWeight: "semibold",
224 mb: "4",
225 })}
226 >
227 Signed documents
228 </h2>
229 <ul className={css({ listStyle: "none", p: "0", m: "0" })}>
230 {documents.map((doc) => (
231 <li
232 key={doc.name}
233 className={css({
234 display: "flex",
235 justifyContent: "space-between",
236 alignItems: "center",
237 p: "3",
238 borderWidth: "1px",
239 borderColor: "gray.200",
240 borderRadius: "md",
241 mb: "2",
242 })}
243 >
244 <span>{doc.name}</span>
245 <span className={css({ color: "gray.500", fontSize: "sm" })}>
246 Signed {formatDate(doc.signedAt)}
247 </span>
248 </li>
249 ))}
250 </ul>
251 </section>
252 </main>
253 );
254 }
255
`gray.500` is a palette shade: it ignores the theme. Use a semantic color token.
page.tsx:167:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:170:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:173:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:176:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:179:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:182:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:185:87 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:197:31 · green.100 `green.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:199:31 · yellow.100 `yellow.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:200:31 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:203:31 · green.800 `green.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:205:31 · yellow.800 `yellow.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:206:31 · gray.800 `gray.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:239:30 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:245:45 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. lint/@pandacss(no-physical-properties) 18 quality page.tsx:43:32 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:48:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:53:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:73:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:78:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:108:71 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:119:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:124:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:153:23 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:167:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:170:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:173:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:176:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:179:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:182:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:185:48 Use the logical property "borderBlockEndWidth" instead of the physical "borderBottomWidth". page.tsx:224:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:241:17 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-length 11 design-system typecheck/TS2769 1 quality 9 write_file 373 3,218 $0.0000
10 write_file 3,296 2,246 $0.0000