Runs / transactions 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 78 counted, under 8 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 442 25 $0.0000 1 read_file 161 30 $0.0000 2 list_files 2,097 24 $0.0000 3
Output cap The provider's default 3 import { useMemo, useState } from "react";
4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 type Transaction = (typeof data.transactions)[number];
8 type View = "All" | "Money in" | "Money out";
9
10 const pageSize = data.pageSize ?? 10;
11 const views: View[] = ["All", "Money in", "Money out"];
12
13 function matchesView(tx: Transaction, view: View): boolean {
14 if (view === "Money in") return tx.amount > 0;
15 if (view === "Money out") return tx.amount < 0;
16 return true;
17 }
18
19 export default function TransactionsPage() {
20 const [view, setView] = useState<View>("All");
21 const [page, setPage] = useState(1);
22
23 const filtered = useMemo(() => {
24 return data.transactions
25 .filter((tx) => matchesView(tx, view))
26 .slice()
27 .sort((a, b) => b.date.localeCompare(a.date));
28 }, [view]);
29
30 const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
31 const currentPage = Math.min(page, totalPages);
32 const start = (currentPage - 1) * pageSize;
33 const pageItems = filtered.slice(start, start + pageSize);
34
35 function changeView(next: View) {
36 setView(next);
37 setPage(1);
38 }
39
40 return (
41 <main
42 className={css({
43 maxWidth: "960px",
44 margin: "0 auto",
45 padding: "24px",
46 fontFamily: "system-ui, sans-serif",
47 })}
48 >
49 <header
50 className={css({
51 marginBottom: "24px",
52 })}
53 >
54 <h1
55 className={css({
56 fontSize: "28px",
57 fontWeight: "700",
58 margin: "0 0 4px 0",
59 })}
60 >
61 {data.account.name}
62 </h1>
63 <p
64 className={css({
65 color: "#6b7280",
66 margin: 0,
67 })}
68 >
69 {data.account.holder} · {data.account.currency}
70 </p>
71 </header>
72
73 <div
74 role="tablist"
75 aria-label="Transaction views"
76 className={css({
77 display: "flex",
78 gap: "8px",
79 marginBottom: "16px",
80 })}
81 >
82 {views.map((v) => (
83 <button
84 key={v}
85 role="tab"
86 aria-selected={view === v}
87 onClick={() => changeView(v)}
88 className={css({
89 padding: "8px 16px",
90 borderRadius: "8px",
91 border: "1px solid",
92 borderColor: view === v ? "#2563eb" : "#d1d5db",
93 background: view === v ? "#2563eb" : "#ffffff",
94 color: view === v ? "#ffffff" : "#000000",
95 cursor: "pointer",
96 fontWeight: view === v ? "600" : "400",
97 })}
98 >
99 {v}
100 </button>
101 ))}
102 </div>
103
104 <table
105 className={css({
106 width: "100%",
107 borderCollapse: "collapse",
108 })}
109 >
110 <thead>
111 <tr>
112 {["Date", "Description", "Amount", "Status"].map((h) => (
113 <th
114 key={h}
115 className={css({
116 textAlign: h === "Amount" ? "right" : "left",
117 padding: "8px",
118 borderBottom: "1px solid",
119 borderColor: "#e5e7eb",
120 })}
121 >
122 {h}
123 </th>
124 ))}
125 </tr>
126 </thead>
127 <tbody>
128 {pageItems.map((tx) => {
129 const pending = tx.status === "pending";
130 return (
131 <tr
132 key={tx.id}
133 data-status={tx.status}
134 className={css({
135 backgroundColor: pending ? "#fefce8" : "transparent",
136 })}
137 >
138 <td
139 className={css({
140 padding: "8px",
141 borderBottom: "1px solid",
142 borderColor: "#f3f4f6",
143 })}
144 >
145 <time dateTime={tx.date}>{tx.date}</time>
146 </td>
147 <td
148 className={css({
149 padding: "8px",
150 borderBottom: "1px solid",
151 borderColor: "#f3f4f6",
152 })}
153 >
154 {tx.description}
155 </td>
156 <td
157 className={css({
158 padding: "8px",
159 borderBottom: "1px solid",
160 borderColor: "#f3f4f6",
161 textAlign: "right",
162 color: tx.amount >= 0 ? "#16a34a" : "inherit",
163 })}
164 >
165 €{tx.amount.toFixed(2)}
166 </td>
167 <td
168 className={css({
169 padding: "8px",
170 borderBottom: "1px solid",
171 borderColor: "#f3f4f6",
172 })}
173 >
174 {pending ? (
175 <span
176 className={css({
177 display: "inline-block",
178 padding: "2px 8px",
179 borderRadius: "999px",
180 background: "#fef08a",
181 color: "#713f12",
182 fontSize: "12px",
183 fontWeight: "600",
184 })}
185 >
186 Pending
187 </span>
188 ) : (
189 "Booked"
190 )}
191 </td>
192 </tr>
193 );
194 })}
195 </tbody>
196 </table>
197
198 {filtered.length === 0 && (
199 <p
200 className={css({
201 padding: "16px",
202 textAlign: "center",
203 color: "#6b7280",
204 })}
205 >
206 No transactions.
207 </p>
208 )}
209
210 <nav
211 aria-label="Pagination"
212 className={css({
213 display: "flex",
214 alignItems: "center",
215 justifyContent: "center",
216 gap: "8px",
217 marginTop: "16px",
218 })}
219 >
220 <button
221 onClick={() => setPage((p) => Math.max(1, p - 1))}
222 disabled={currentPage <= 1}
223 className={css({ padding: "6px 12px", cursor: "pointer" })}
224 >
225 Previous
226 </button>
227 {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
228 <button
229 key={n}
230 onClick={() => setPage(n)}
231 aria-current={n === currentPage ? "page" : undefined}
232 className={css({
233 padding: "6px 10px",
234 cursor: "pointer",
235 fontWeight: n === currentPage ? "700" : "400",
236 background: n === currentPage ? "#dbeafe" : "transparent",
237 border: "1px solid",
238 borderColor: "#d1d5db",
239 borderRadius: "4px",
240 })}
241 >
242 {n}
243 </button>
244 ))}
245 <button
246 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
247 disabled={currentPage >= totalPages}
248 className={css({ padding: "6px 12px", cursor: "pointer" })}
249 >
250 Next
251 </button>
252 <span
253 className={css({
254 marginLeft: "8px",
255 color: "#6b7280",
256 fontSize: "14px",
257 })}
258 >
259 Page {currentPage} of {totalPages}
260 </span>
261 </nav>
262 </main>
263 );
264 }
265
`8px 16px` is a raw length. Use a token.
lint/@pandacss(no-physical-properties) 9 quality page.tsx:51:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:79:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:118:19 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:141:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:150:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:159:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:170:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:217:11 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:254:13 Use the logical property "marginInlineStart" instead of the physical "marginLeft". Every run that broke lint/@pandacss(no-physical-properties) token-names/unknown-token 7 design-system page.tsx:46:21 · system-ui, sans-serif `fontFamily: "system-ui, sans-serif"`: `system-ui, sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:57:25 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:96:40 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:96:48 · 400 `fontWeight: "400"`: `400` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:183:37 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:235:47 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:235:55 · 400 `fontWeight: "400"`: `400` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token a11y/color-contrast 2 quality page.tsx:1:1 · <p class="c_#6b7280 m_0">Giulia Rossi · EUR</p> Elements must meet minimum color contrast ratio thresholds (3 elements, light theme) page.tsx:1:1 · <p class="c_#6b7280 m_0">Giulia Rossi · EUR</p> Elements must meet minimum color contrast ratio thresholds (8 elements, dark theme) Every run that broke a11y/color-contrast lint/unicorn(no-array-sort) 1 quality typecheck/TS2769 1 quality 9 read_file 2,635 110 $0.0000
10 write_file 146 4,793 $0.0000
11 write_file 4,836 1,903 $0.0000