Runs / payment-approval 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 76 counted, under 13 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 454 30 $0.0000 1 read_file 50 29 $0.0000 2 list_files 1,010 28 $0.0000 3
Output cap The provider's default 3
4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 type Payment = (typeof data.payments)[number];
8
9 const formatMoney = (value: number) =>
10 `${data.currency === "EUR" ? "€" : data.currency + " "}${value.toFixed(2)}`;
11
12 export default function Page() {
13 const [approved, setApproved] = useState<Set<string>>(new Set());
14 const [selected, setSelected] = useState<Payment | null>(null);
15
16 const openDialog = (p: Payment) => setSelected(p);
17 const closeDialog = () => setSelected(null);
18
19 const confirm = () => {
20 if (selected) {
21 setApproved((prev) => {
22 const next = new Set(prev);
23 next.add(selected.id);
24 return next;
25 });
26 }
27 closeDialog();
28 };
29
30 return (
31 <main
32 className={css({
33 maxWidth: "1080px",
34 margin: "0 auto",
35 padding: "2rem",
36 fontFamily: "sans-serif",
37 })}
38 >
39 <h1 className={css({ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "1rem" })}>
40 Payments awaiting approval
41 </h1>
42
43 <div className={css({ overflowX: "auto" })}>
44 <table className={css({ width: "100%", borderCollapse: "collapse" })}>
45 <thead>
46 <tr>
47 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
48 Beneficiary
49 </th>
50 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
51 IBAN
52 </th>
53 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
54 Due date
55 </th>
56 <th className={css({ textAlign: "right", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
57 Amount
58 </th>
59 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
60 Status
61 </th>
62 <th className={css({ textAlign: "left", padding: "0.5rem", borderBottom: "1px solid #ddd" })}>
63 Action
64 </th>
65 </tr>
66 </thead>
67 <tbody>
68 {data.payments.map((p) => {
69 const isApproved = approved.has(p.id);
70 return (
71 <tr key={p.id}>
72 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee" })}>
73 {p.beneficiary}
74 </td>
75 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee" })}>
76 {p.iban}
77 </td>
78 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee" })}>
79 {p.dueDate}
80 </td>
81 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee", textAlign: "right" })}>
82 {formatMoney(p.amount)}
83 </td>
84 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee" })}>
85 {isApproved ? "Approved" : "Pending"}
86 </td>
87 <td className={css({ padding: "0.5rem", borderBottom: "1px solid #eee" })}>
88 <button
89 type="button"
90 disabled={isApproved}
91 onClick={() => openDialog(p)}
92 className={css({
93 padding: "0.35rem 0.75rem",
94 borderRadius: "6px",
95 border: "1px solid #333",
96 background: isApproved ? "#eee" : "#fff",
97 cursor: isApproved ? "not-allowed" : "pointer",
98 })}
99 >
100 Approve
101 </button>
102 </td>
103 </tr>
104 );
105 })}
106 </tbody>
107 </table>
108 </div>
109
110 {selected && (
111 <div
112 role="dialog"
113 aria-modal="true"
114 className={css({
115 position: "fixed",
116 inset: 0,
117 display: "flex",
118 alignItems: "center",
119 justifyContent: "center",
120 background: "rgba(0,0,0,0.4)",
121 zIndex: 50,
122 })}
123 onClick={closeDialog}
124 >
125 <div
126 className={css({
127 background: "#fff",
128 padding: "1.5rem",
129 borderRadius: "8px",
130 minWidth: "320px",
131 maxWidth: "420px",
132 })}
133 onClick={(e) => e.stopPropagation()}
134 >
135 <h2 className={css({ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "1rem" })}>
136 Confirm payment
137 </h2>
138 <dl className={css({ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.5rem 1rem", marginBottom: "1rem" })}>
139 <dt>Beneficiary</dt>
140 <dd>{selected.beneficiary}</dd>
141 <dt>IBAN</dt>
142 <dd>{selected.iban}</dd>
143 <dt>Amount</dt>
144 <dd>{formatMoney(selected.amount)}</dd>
145 <dt>Fee</dt>
146 <dd>{formatMoney(data.fees[selected.scheme as keyof typeof data.fees])}</dd>
147 <dt>Total</dt>
148 <dd>{formatMoney(selected.amount + data.fees[selected.scheme as keyof typeof data.fees])}</dd>
149 </dl>
150 <div className={css({ display: "flex", justifyContent: "flex-end", gap: "0.5rem" })}>
151 <button type="button" onClick={closeDialog}>
152 Cancel
153 </button>
154 <button type="button" onClick={confirm}>
155 Confirm
156 </button>
157 </div>
158 </div>
159 </div>
160 )}
161 </main>
162 );
163 }
164
`0.5rem` is a raw length. Use a token.
page.tsx:93:34 · 0.35rem 0.75rem `0.35rem 0.75rem` is a raw length. Use a token. raw-values/raw-color 17 design-system page.tsx:47:88 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:50:88 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:53:88 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:56:89 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:59:88 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:62:88 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:72:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:75:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:78:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:81:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:84:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:87:73 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:95:33 · 1px solid #333 `1px solid #333` is a raw color. Use a semantic color token. page.tsx:96:50 · #eee `#eee` is a raw color. Use a semantic color token. page.tsx:96:59 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:120:25 · rgba(0,0,0,0.4) `rgba(0,0,0,0.4)` is a raw color. Use a semantic color token. page.tsx:127:27 · #fff `#fff` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 15 quality page.tsx:39:68 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:47:74 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:50:74 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:53:74 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:56:75 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:59:74 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:62:74 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:72:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:75:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:78:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:81:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:84:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:87:59 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:135:74 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:138:104 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 1 quality page.tsx:1:1 · <button type="button" class="p_0.35rem_0.75rem bdr_6px bd_1px_solid_#333 bg_#fff cursor_pointer">Approve</button> Elements must meet minimum color contrast ratio thresholds (4 elements, dark theme) Every run that broke a11y/color-contrast lint/jsx-a11y(no-noninteractive-element-interactions) 1 quality lint/jsx-a11y(no-static-element-interactions) 1 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 1 quality 5 list_files 1,169 37 $0.0000
9 read_file 1,280 158 $0.0000
10 write_file 1,655 3,180 $0.0000