Runs / stock-adjustment 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 10 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 503 37 $0.0000 1 read_file 234 33 $0.0000 2 list_files 801 38 $0.0000 3
Output cap 20,000 tokens a step 3
4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Reason = (typeof data.reasons)[number];
8
9 export default function Page() {
10 const item = data.item;
11 const [quantity, setQuantity] = useState("");
12 const [reasonCode, setReasonCode] = useState("");
13 const [comment, setComment] = useState("");
14 const [errors, setErrors] = useState<{ quantity?: string; reason?: string }>({});
15 const [saved, setSaved] = useState<string | null>(null);
16
17 const selectedReason = data.reasons.find((r) => r.code === reasonCode);
18
19 const parsedQuantity = quantity.trim() === "" ? null : Number(quantity);
20 const isValidQuantity =
21 quantity.trim() !== "" &&
22 Number.isInteger(parsedQuantity) &&
23 (parsedQuantity as number) >= 0;
24 const diff =
25 isValidQuantity && parsedQuantity !== null
26 ? (parsedQuantity as number) - item.onHand
27 : null;
28
29 function validate() {
30 const next: { quantity?: string; reason?: string } = {};
31 if (quantity.trim() === "") {
32 next.quantity = "Required";
33 } else if (!Number.isInteger(Number(quantity))) {
34 next.quantity = "Enter a whole number";
35 } else if (Number(quantity) < 0) {
36 next.quantity = "Cannot be negative";
37 }
38 if (reasonCode === "") {
39 next.reason = "Required";
40 }
41 setErrors(next);
42 return Object.keys(next).length === 0;
43 }
44
45 function handleSubmit(e: React.FormEvent) {
46 e.preventDefault();
47 if (!validate()) return;
48 const newQty = Number(quantity);
49 setSaved(`Adjusted to ${newQty} ${item.unit}.`);
50 setErrors({});
51 }
52
53 return (
54 <main
55 className={css({
56 maxWidth: "640px",
57 margin: "0 auto",
58 padding: "24px",
59 fontFamily: "system-ui, sans-serif",
60 })}
61 >
62 <h1 className={css({ fontSize: "1.5rem", fontWeight: "bold", marginBottom: "16px" })}>
63 Correct stock
64 </h1>
65
66 <section
67 className={css({
68 border: "1px solid #e5e7eb",
69 borderRadius: "8px",
70 padding: "16px",
71 marginBottom: "24px",
72 })}
73 >
74 <p className={css({ marginBottom: "4px" })}>
75 <strong>SKU:</strong> {item.sku}
76 </p>
77 <p className={css({ marginBottom: "4px" })}>
78 <strong>Name:</strong> {item.name}
79 </p>
80 <p className={css({ marginBottom: "4px" })}>
81 <strong>Location:</strong> {item.location}
82 </p>
83 <p className={css({ marginBottom: "0" })}>
84 <strong>On hand:</strong> {item.onHand} {item.unit}
85 </p>
86 </section>
87
88 <form onSubmit={handleSubmit} noValidate>
89 <div className={css({ marginBottom: "16px" })}>
90 <label
91 htmlFor="quantity"
92 className={css({ display: "block", marginBottom: "4px", fontWeight: "500" })}
93 >
94 New quantity
95 </label>
96 <input
97 id="quantity"
98 type="number"
99 inputMode="numeric"
100 value={quantity}
101 onChange={(e) => setQuantity(e.target.value)}
102 className={css({
103 width: "100%",
104 padding: "8px",
105 border: errors.quantity ? "1px solid #ef4444" : "1px solid #d1d5db",
106 borderRadius: "8px",
107 })}
108 aria-invalid={!!errors.quantity}
109 />
110 {errors.quantity && (
111 <p className={css({ color: "#ef4444", marginTop: "4px", fontSize: "0.875rem" })}>
112 {errors.quantity}
113 </p>
114 )}
115 <p className={css({ marginTop: "4px", fontSize: "0.875rem", color: "#4b5563" })}>
116 Difference:{" "}
117 {diff === null
118 ? "—"
119 : `${diff >= 0 ? "+" : ""}${diff} ${item.unit}`}
120 </p>
121 </div>
122
123 <div className={css({ marginBottom: "16px" })}>
124 <label
125 htmlFor="reason"
126 className={css({ display: "block", marginBottom: "4px", fontWeight: "500" })}
127 >
128 Reason
129 </label>
130 <select
131 id="reason"
132 value={reasonCode}
133 onChange={(e) => setReasonCode(e.target.value)}
134 className={css({
135 width: "100%",
136 padding: "8px",
137 border: errors.reason ? "1px solid #ef4444" : "1px solid #d1d5db",
138 borderRadius: "8px",
139 })}
140 aria-invalid={!!errors.reason}
141 >
142 <option value="">Select a reason</option>
143 {data.reasons.map((r: Reason) => (
144 <option key={r.code} value={r.code}>
145 {r.label}
146 </option>
147 ))}
148 </select>
149 {errors.reason && (
150 <p className={css({ color: "#ef4444", marginTop: "4px", fontSize: "0.875rem" })}>
151 {errors.reason}
152 </p>
153 )}
154 {selectedReason && (
155 <p className={css({ marginTop: "4px", fontSize: "0.875rem", color: "#4b5563" })}>
156 {selectedReason.description}
157 </p>
158 )}
159 </div>
160
161 <div className={css({ marginBottom: "16px" })}>
162 <label
163 htmlFor="comment"
164 className={css({ display: "block", marginBottom: "4px", fontWeight: "500" })}
165 >
166 Comment
167 </label>
168 <textarea
169 id="comment"
170 value={comment}
171 onChange={(e) => setComment(e.target.value)}
172 className={css({
173 width: "100%",
174 padding: "8px",
175 border: "1px solid #d1d5db",
176 borderRadius: "8px",
177 })}
178 rows={3}
179 />
180 </div>
181
182 <button
183 type="submit"
184 className={css({
185 padding: "10px 16px",
186 backgroundColor: "#2563eb",
187 color: "#ffffff",
188 border: "none",
189 borderRadius: "8px",
190 cursor: "pointer",
191 fontWeight: "500",
192 })}
193 >
194 Save adjustment
195 </button>
196 </form>
197
198 {saved && (
199 <p
200 role="status"
201 className={css({ marginTop: "16px", color: "#16a34a", fontWeight: "500" })}
202 >
203 {saved}
204 </p>
205 )}
206 </main>
207 );
208 }
`4px` is a raw length. Use a token.
lint/@pandacss(no-physical-properties) 17 quality page.tsx:62:68 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:71:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:74:29 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:77:29 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:80:29 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:83:29 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:89:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:92:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:111:51 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:115:31 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:123:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:126:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:150:51 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:155:33 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:161:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:164:48 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:201:28 Use the logical property "marginBlockStart" instead of the physical "marginTop". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-color 13 design-system page.tsx:68:19 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:105:41 · 1px solid #ef4444 `1px solid #ef4444` is a raw color. Use a semantic color token. page.tsx:105:63 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:111:40 · #ef4444 `#ef4444` is a raw color. Use a semantic color token. page.tsx:115:78 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:137:39 · 1px solid #ef4444 `1px solid #ef4444` is a raw color. Use a semantic color token. page.tsx:137:61 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:150:40 · #ef4444 `#ef4444` is a raw color. Use a semantic color token. page.tsx:155:80 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:175:23 · 1px solid #d1d5db `1px solid #d1d5db` is a raw color. Use a semantic color token. page.tsx:186:30 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:187:20 · #ffffff `#ffffff` is a raw color. Use a semantic color token. page.tsx:201:54 · #16a34a `#16a34a` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color token-names/unknown-token 7 design-system page.tsx:59: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:62:60 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:92:81 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:126:81 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:164:81 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:191:25 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:201:77 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token lint/jsx-a11y(prefer-tag-over-role) 1 quality typecheck/TS2769 0 quality 10 write_file 124 2,764 $0.0000
11 write_file 4,000 2,117 $0.0000