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 87 counted, under 9 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 29 $0.0000 1 read_file 208 32 $0.0000 2 list_files 806 45 $0.0000 3
Output cap
The provider's default 3
4 type Contract = {
5 number: string;
6 product: string;
7 status: string;
8 borrower: string;
9 currency: string;
10 principal: number;
11 nominalRate: number;
12 apr: number;
13 termMonths: number;
14 monthlyPayment: number;
15 startDate: string;
16 outstanding: number;
17 };
18
19 type ScheduleItem = {
20 number: number;
21 dueDate: string;
22 payment: number;
23 principal: number;
24 interest: number;
25 remaining: number;
26 status: "paid" | "due" | "upcoming";
27 };
28
29 type Document = {
30 name: string;
31 signedAt: string;
32 };
33
34 const contract = data.contract as Contract;
35 const schedule = data.schedule as ScheduleItem[];
36 const documents = data.documents as Document[];
37
38 const money = new Intl.NumberFormat("it-IT", {
39 style: "currency",
40 currency: contract.currency,
41 });
42
43 const dateFmt = new Intl.DateTimeFormat("it-IT", {
44 day: "2-digit",
45 month: "short",
46 year: "numeric",
47 });
48
49 function moneyValue(value: number) {
50 return money.format(value);
51 }
52
53 function dateValue(value: string) {
54 return dateFmt.format(new Date(value));
55 }
56
57 function percentValue(value: number) {
58 return `${(value * 100).toFixed(2)}%`;
59 }
60
61 const statusLabel: Record<string, string> = {
62 paid: "Paid",
63 due: "Due",
64 upcoming: "Upcoming",
65 };
66
67 export default function Page() {
68 return (
69 <main
70 className={css({
71 maxWidth: "960px",
72 margin: "0 auto",
73 padding: "2rem 1.5rem",
74 fontFamily: "sans",
75 })}
76 >
77 <header className={css({ marginBottom: "2rem" })}>
78 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", marginBottom: "0.25rem" })}>
79 {contract.product}
80 </h1>
81 <p className={css({ color: "gray.600" })}>
82 Contract {contract.number} · {contract.status}
83 </p>
84 </header>
85
86 <section className={css({ marginBottom: "2rem" })}>
87 <h2 className={css({ fontSize: "lg", fontWeight: "semibold", marginBottom: "1rem" })}>
88 Key terms
89 </h2>
90 <dl
91 className={css({
92 display: "grid",
93 gridTemplateColumns: "repeat(2, 1fr)",
94 gap: "0.75rem 2rem",
95 })}
96 >
97 <div>
98 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Amount borrowed</dt>
99 <dd className={css({ fontWeight: "medium" })}>{moneyValue(contract.principal)}</dd>
100 </div>
101 <div>
102 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Nominal interest rate</dt>
103 <dd className={css({ fontWeight: "medium" })}>{percentValue(contract.nominalRate)}</dd>
104 </div>
105 <div>
106 <dt className={css({ color: "gray.500", fontSize: "sm" })}>APR</dt>
107 <dd className={css({ fontWeight: "medium" })}>{percentValue(contract.apr)}</dd>
108 </div>
109 <div>
110 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Term (months)</dt>
111 <dd className={css({ fontWeight: "medium" })}>{contract.termMonths}</dd>
112 </div>
113 <div>
114 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Monthly payment</dt>
115 <dd className={css({ fontWeight: "medium" })}>{moneyValue(contract.monthlyPayment)}</dd>
116 </div>
117 <div>
118 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Start date</dt>
119 <dd className={css({ fontWeight: "medium" })}>{dateValue(contract.startDate)}</dd>
120 </div>
121 <div>
122 <dt className={css({ color: "gray.500", fontSize: "sm" })}>Still owed</dt>
123 <dd className={css({ fontWeight: "medium" })}>{moneyValue(contract.outstanding)}</dd>
124 </div>
125 </dl>
126 </section>
127
128 <section className={css({ marginBottom: "2rem" })}>
129 <h2 className={css({ fontSize: "lg", fontWeight: "semibold", marginBottom: "1rem" })}>
130 Repayment schedule
131 </h2>
132 <div className={css({ overflowX: "auto" })}>
133 <table className={css({ width: "100%", borderCollapse: "collapse" })}>
134 <thead>
135 <tr>
136 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
137 Due date
138 </th>
139 <th className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
140 Payment
141 </th>
142 <th className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
143 Principal
144 </th>
145 <th className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
146 Interest
147 </th>
148 <th className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
149 Balance
150 </th>
151 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.200" })}>
152 Status
153 </th>
154 </tr>
155 </thead>
156 <tbody>
157 {schedule.map((item) => (
158 <tr key={item.number}>
159 <td className={css({ padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
160 {dateValue(item.dueDate)}
161 </td>
162 <td className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
163 {moneyValue(item.payment)}
164 </td>
165 <td className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
166 {moneyValue(item.principal)}
167 </td>
168 <td className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
169 {moneyValue(item.interest)}
170 </td>
171 <td className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
172 {moneyValue(item.remaining)}
173 </td>
174 <td className={css({ padding: "0.5rem", borderBottom: "1px solid", borderColor: "gray.100" })}>
175 {statusLabel[item.status] ?? item.status}
176 </td>
177 </tr>
178 ))}
179 </tbody>
180 </table>
181 </div>
182 </section>
183
184 <section>
185 <h2 className={css({ fontSize: "lg", fontWeight: "semibold", marginBottom: "1rem" })}>
186 Signed documents
187 </h2>
188 <ul className={css({ listStyle: "none", padding: 0, margin: 0 })}>
189 {documents.map((doc) => (
190 <li
191 key={doc.name}
192 className={css({
193 display: "flex",
194 justifyContent: "space-between",
195 padding: "0.5rem 0",
196 borderBottom: "1px solid",
197 borderColor: "gray.100",
198 })}
199 >
200 <span>{doc.name}</span>
201 <span className={css({ color: "gray.500" })}>{dateValue(doc.signedAt)}</span>
202 </li>
203 ))}
204 </ul>
205 </section>
206 </main>
207 );
208 }
209
token-roles/palette 22 design-system page.tsx:81:36 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:98:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:102:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:106:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:110:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:114:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:118:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:122:41 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:136:116 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:139:117 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:142:117 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:145:117 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:148:117 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:151:116 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:159:99 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:162:119 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:165:119 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:168:119 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:171:119 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:174:99 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:197:30 · gray.100 `gray.100` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:201:45 · gray.500 `gray.500` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette lint/@pandacss(no-physical-properties) 20 quality page.tsx:77:32 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:78:67 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:86:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:87:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:128:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:129:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:136:76 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:139:77 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:142:77 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:145:77 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:148:77 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:151:76 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:159:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:162:79 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:165:79 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:168:79 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:171:79 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:174:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:185:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:196:17 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2769 3 quality 4 list_files 1,447 78 $0.0000
7 write_file 154 2,696 $0.0000