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 75 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 122 32 $0.0000 1 read_file 168 42 $0.0000 2 list_files 2,244 35 $0.0000 3
Output cap The provider's default 3 import { useMemo, useState } from "react";
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Transaction = {
8 id: string;
9 date: string;
10 description: string;
11 amount: number;
12 status: string;
13 };
14
15 const pageSize = data.pageSize ?? 10;
16 const views = ["All", "Money in", "Money out"] as const;
17 type View = (typeof views)[number];
18
19 const formatAmount = (amount: number) => {
20 const sign = amount < 0 ? "-" : "";
21 return `${sign}€${Math.abs(amount).toFixed(2)}`;
22 };
23
24 export default function TransactionsPage() {
25 const [view, setView] = useState<View>("All");
26 const [page, setPage] = useState(1);
27
28 const sorted = useMemo(
29 () =>
30 [...(data.transactions as Transaction[])].sort((a, b) =>
31 b.date.localeCompare(a.date) || b.id.localeCompare(a.id)
32 ),
33 []
34 );
35
36 const filtered = useMemo(() => {
37 if (view === "Money in") return sorted.filter((t) => t.amount > 0);
38 if (view === "Money out") return sorted.filter((t) => t.amount < 0);
39 return sorted;
40 }, [sorted, view]);
41
42 const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
43 const currentPage = Math.min(page, totalPages);
44 const pageItems = filtered.slice(
45 (currentPage - 1) * pageSize,
46 currentPage * pageSize
47 );
48
49 const changeView = (next: View) => {
50 setView(next);
51 setPage(1);
52 };
53
54 return (
55 <main
56 className={css({
57 maxWidth: "960px",
58 margin: "0 auto",
59 padding: "24px",
60 fontFamily: "system-ui, sans-serif",
61 })}
62 >
63 <header className={css({ marginBottom: "24px" })}>
64 <h1 className={css({ fontSize: "24px", fontWeight: "bold", margin: 0 })}>
65 {data.account.name}
66 </h1>
67 <p className={css({ color: "#555", margin: "4px 0 0" })}>
68 {data.account.holder} · {data.account.currency}
69 </p>
70 </header>
71
72 <div
73 role="tablist"
74 aria-label="Transaction views"
75 className={css({ display: "flex", gap: "8px", marginBottom: "16px" })}
76 >
77 {views.map((v) => (
78 <button
79 key={v}
80 role="tab"
81 aria-selected={view === v}
82 onClick={() => changeView(v)}
83 className={css({
84 padding: "8px 16px",
85 borderRadius: "8px",
86 border: "1px solid #ddd",
87 background: view === v ? "#111" : "#fff",
88 color: view === v ? "#fff" : "#111",
89 cursor: "pointer",
90 fontWeight: view === v ? "bold" : "normal",
91 })}
92 >
93 {v}
94 </button>
95 ))}
96 </div>
97
98 <table
99 className={css({
100 width: "100%",
101 borderCollapse: "collapse",
102 fontSize: "14px",
103 })}
104 >
105 <thead>
106 <tr>
107 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #ddd" })}>
108 Date
109 </th>
110 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #ddd" })}>
111 Description
112 </th>
113 <th className={css({ textAlign: "right", padding: "8px", borderBottom: "1px solid #ddd" })}>
114 Amount
115 </th>
116 <th className={css({ textAlign: "left", padding: "8px", borderBottom: "1px solid #ddd" })}>
117 Status
118 </th>
119 </tr>
120 </thead>
121 <tbody>
122 {pageItems.map((tx) => {
123 const pending = tx.status === "pending";
124 return (
125 <tr
126 key={tx.id}
127 data-pending={pending ? "true" : "false"}
128 className={css({
129 background: pending ? "#fff8e1" : "transparent",
130 })}
131 >
132 <td className={css({ padding: "8px", borderBottom: "1px solid #eee" })}>
133 {tx.date}
134 </td>
135 <td className={css({ padding: "8px", borderBottom: "1px solid #eee" })}>
136 {tx.description}
137 </td>
138 <td
139 className={css({
140 padding: "8px",
141 borderBottom: "1px solid #eee",
142 textAlign: "right",
143 color: tx.amount < 0 ? "#111" : "#1a7f37",
144 fontWeight: "medium",
145 })}
146 >
147 {formatAmount(tx.amount)}
148 </td>
149 <td className={css({ padding: "8px", borderBottom: "1px solid #eee" })}>
150 <span
151 className={css({
152 display: "inline-block",
153 padding: "2px 8px",
154 borderRadius: "999px",
155 fontSize: "12px",
156 fontWeight: "bold",
157 background: pending ? "#f59e0b" : "#e5e7eb",
158 color: pending ? "#fff" : "#374151",
159 })}
160 >
161 {pending ? "Pending" : "Booked"}
162 </span>
163 </td>
164 </tr>
165 );
166 })}
167 </tbody>
168 </table>
169
170 <div
171 className={css({
172 display: "flex",
173 alignItems: "center",
174 justifyContent: "space-between",
175 marginTop: "16px",
176 gap: "12px",
177 })}
178 >
179 <button
180 onClick={() => setPage((p) => Math.max(1, p - 1))}
181 disabled={currentPage <= 1}
182 className={css({
183 padding: "8px 16px",
184 borderRadius: "8px",
185 border: "1px solid #ddd",
186 background: "#fff",
187 cursor: "pointer",
188 _disabled: { opacity: 0.5, cursor: "not-allowed" },
189 })}
190 >
191 Previous
192 </button>
193 <span className={css({ fontSize: "14px" })}>
194 Page {currentPage} of {totalPages}
195 </span>
196 <button
197 onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
198 disabled={currentPage >= totalPages}
199 className={css({
200 padding: "8px 16px",
201 borderRadius: "8px",
202 border: "1px solid #ddd",
203 background: "#fff",
204 cursor: "pointer",
205 _disabled: { opacity: 0.5, cursor: "not-allowed" },
206 })}
207 >
208 Next
209 </button>
210 </div>
211 </main>
212 );
213 }
214
`8px 16px` is a raw length. Use a token.
raw-values/raw-color 25 design-system page.tsx:67:36 · #555 `#555` is a raw color. Use a semantic color token. page.tsx:86:23 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:87:40 · #111 `#111` is a raw color. Use a semantic color token. page.tsx:87:49 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:88:35 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:88:44 · #111 `#111` is a raw color. Use a semantic color token. page.tsx:107:83 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:110:83 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:113:84 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:116:83 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:129:41 · #fff8e1 `#fff8e1` is a raw color. Use a semantic color token. page.tsx:132:68 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:135:68 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:141:35 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:143:44 · #111 `#111` is a raw color. Use a semantic color token. page.tsx:143:53 · #1a7f37 `#1a7f37` is a raw color. Use a semantic color token. page.tsx:149:68 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:157:45 · #f59e0b `#f59e0b` is a raw color. Use a semantic color token. page.tsx:157:57 · #e5e7eb `#e5e7eb` is a raw color. Use a semantic color token. page.tsx:158:40 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:158:49 · #374151 `#374151` is a raw color. Use a semantic color token. page.tsx:185:21 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:186:25 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:202:21 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:203:25 · #fff `#fff` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 11 quality page.tsx:63:32 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:75:55 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:107:69 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:110:69 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:113:70 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:116:69 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:132:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:135:54 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:149:54 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:175:11 Use the logical property "marginBlockStart" instead of the physical "marginTop". Every run that broke lint/@pandacss(no-physical-properties) token-names/unknown-token 4 design-system page.tsx:60: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:64:60 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:90:40 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:156:35 · bold `fontWeight: "bold"`: `bold` 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 · <span class="d_inline-block p_2px_8px bdr_999px fs_12px fw_bold bg_#f59e0b c_#fff">Pending</span> Elements must meet minimum color contrast ratio thresholds (2 elements, light theme) page.tsx:1:1 · <p class="c_#555 m_4px_0_0">Giulia Rossi · EUR</p> Elements must meet minimum color contrast ratio thresholds (16 elements, dark theme) Every run that broke a11y/color-contrast lint/unicorn(no-array-sort) 1 quality typecheck/TS2769 0 quality 6 write_file 305 4,208 $0.0000
7 write_file 4,537 1,590 $0.0000