Runs / notification-settings 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 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 180 30 $0.0000 1 read_file 96 42 $0.0000 2 list_files 347 33 $0.0000 3
Output cap The provider's default 3
4 import { useCallback, useState } from "react";
5 import data from "./fixture.json";
6
7 type Alert = {
8 id: string;
9 label: string;
10 description: string;
11 enabled: boolean;
12 };
13
14 export default function NotificationSettingsPage() {
15 const [alerts, setAlerts] = useState<Alert[]>(
16 data.alerts.map((a) => ({ ...a })),
17 );
18 const [frequency, setFrequency] = useState(data.summary.frequency);
19 const [productNews, setProductNews] = useState(data.productNews);
20 const [toast, setToast] = useState<string | null>(null);
21
22 const showToast = useCallback((message: string) => {
23 setToast(message);
24 window.setTimeout(() => setToast(null), 3000);
25 }, []);
26
27 const toggleAlert = (id: string) => {
28 const current = alerts.find((a) => a.id === id);
29 if (!current) return;
30 const next = !current.enabled;
31 setAlerts((prev) =>
32 prev.map((a) => (a.id === id ? { ...a, enabled: next } : a)),
33 );
34 showToast(`${current.label} alerts ${next ? "on" : "off"}`);
35 };
36
37 const saveSummary = () => {
38 showToast("Summary email settings saved");
39 };
40
41 return (
42 <main
43 className={css({
44 maxWidth: "720px",
45 margin: "0 auto",
46 padding: "2rem 1.5rem",
47 fontFamily: "system-ui, sans-serif",
48 })}
49 >
50 <h1 className={css({ fontSize: "1.75rem", fontWeight: "700", marginBottom: "1.5rem" })}>
51 Notification settings
52 </h1>
53
54 <section
55 className={css({
56 marginBottom: "2rem",
57 padding: "1rem 1.25rem",
58 border: "1px solid #e2e8f0",
59 borderRadius: "0.5rem",
60 })}
61 >
62 <h2 className={css({ fontSize: "1.125rem", fontWeight: "600", marginBottom: "0.5rem" })}>
63 Notifications sent to
64 </h2>
65 <p className={css({ margin: 0, fontWeight: "600" })}>{data.account.name}</p>
66 <p className={css({ margin: 0, color: "#475569" })}>{data.account.email}</p>
67 </section>
68
69 <section className={css({ marginBottom: "2rem" })}>
70 <h2 className={css({ fontSize: "1.125rem", fontWeight: "600", marginBottom: "1rem" })}>
71 Alerts
72 </h2>
73 <ul className={css({ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "1rem" })}>
74 {alerts.map((alert) => (
75 <li
76 key={alert.id}
77 className={css({
78 display: "flex",
79 alignItems: "flex-start",
80 justifyContent: "space-between",
81 gap: "1rem",
82 padding: "0.75rem 0",
83 borderBottom: "1px solid #f1f5f9",
84 })}
85 >
86 <div>
87 <div className={css({ fontWeight: "600" })}>{alert.label}</div>
88 <div className={css({ color: "#475569", fontSize: "0.875rem", marginTop: "0.25rem" })}>
89 {alert.description}
90 </div>
91 </div>
92 <label className={css({ display: "inline-flex", alignItems: "center", cursor: "pointer" })}>
93 <input
94 type="checkbox"
95 role="switch"
96 checked={alert.enabled}
97 onChange={() => toggleAlert(alert.id)}
98 aria-label={alert.label}
99 className={css({ width: "2.5rem", height: "1.25rem" })}
100 />
101 </label>
102 </li>
103 ))}
104 </ul>
105 </section>
106
107 <section
108 className={css({
109 marginBottom: "2rem",
110 padding: "1rem 1.25rem",
111 border: "1px solid #e2e8f0",
112 borderRadius: "0.5rem",
113 })}
114 >
115 <h2 className={css({ fontSize: "1.125rem", fontWeight: "600", marginBottom: "1rem" })}>
116 Summary email
117 </h2>
118 <div className={css({ marginBottom: "1rem" })}>
119 <label className={css({ display: "block", marginBottom: "0.5rem", fontWeight: "500" })} htmlFor="frequency">
120 Frequency
121 </label>
122 <select
123 id="frequency"
124 value={frequency}
125 onChange={(e) => setFrequency(e.target.value)}
126 className={css({ padding: "0.5rem", borderRadius: "0.375rem", border: "1px solid #cbd5e1" })}
127 >
128 {data.summary.options.map((opt) => (
129 <option key={opt.value} value={opt.value}>
130 {opt.label}
131 </option>
132 ))}
133 </select>
134 </div>
135 <label className={css({ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "1rem" })}>
136 <input
137 type="checkbox"
138 checked={productNews}
139 onChange={(e) => setProductNews(e.target.checked)}
140 />
141 Send me product news
142 </label>
143 <button
144 type="button"
145 onClick={saveSummary}
146 className={css({
147 padding: "0.5rem 1rem",
148 borderRadius: "0.375rem",
149 border: "none",
150 background: "#2563eb",
151 color: "white",
152 cursor: "pointer",
153 fontWeight: "600",
154 })}
155 >
156 Save
157 </button>
158 </section>
159
160 {toast && (
161 <div
162 role="status"
163 aria-live="polite"
164 className={css({
165 position: "fixed",
166 bottom: "1.5rem",
167 left: "50%",
168 transform: "translateX(-50%)",
169 background: "#1e293b",
170 color: "white",
171 padding: "0.75rem 1.25rem",
172 borderRadius: "0.5rem",
173 boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
174 })}
175 >
176 {toast}
177 </div>
178 )}
179 </main>
180 );
181 }
182
page.tsx:171:22 · 0.75rem 1.25rem `0.75rem 1.25rem` is a raw length. Use a token. lint/@pandacss(no-physical-properties) 14 quality page.tsx:50:68 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:56:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:62:71 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:69:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:70:71 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:83:17 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:88:79 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:109:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:115:71 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:118:31 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:119:53 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:135:87 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:166:13 Use the logical property "insetBlockEnd" instead of the physical "bottom". page.tsx:167:13 Use the logical property "insetInlineStart" instead of the physical "left". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-color 11 design-system page.tsx:58:19 · 1px solid #e2e8f0 `1px solid #e2e8f0` is a raw color. Use a semantic color token. page.tsx:66:47 · #475569 `#475569` is a raw color. Use a semantic color token. page.tsx:83:31 · 1px solid #f1f5f9 `1px solid #f1f5f9` is a raw color. Use a semantic color token. page.tsx:88:46 · #475569 `#475569` is a raw color. Use a semantic color token. page.tsx:111:19 · 1px solid #e2e8f0 `1px solid #e2e8f0` is a raw color. Use a semantic color token. page.tsx:126:83 · 1px solid #cbd5e1 `1px solid #cbd5e1` is a raw color. Use a semantic color token. page.tsx:150:25 · #2563eb `#2563eb` is a raw color. Use a semantic color token. page.tsx:151:20 · white `white` is a raw color. Use a semantic color token. page.tsx:169:25 · #1e293b `#1e293b` is a raw color. Use a semantic color token. page.tsx:170:20 · white `white` is a raw color. Use a semantic color token. page.tsx:173:24 · 0 4px 12px rgba(0,0,0,0.15) `0 4px 12px rgba(0,0,0,0.15)` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color token-names/unknown-token 9 design-system page.tsx:47: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:50:61 · 700 `fontWeight: "700"`: `700` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:62:64 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:65:52 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:70:64 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:87:51 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:115:64 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:119:89 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:153:25 · 600 `fontWeight: "600"`: `600` 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 lint/jsx-a11y(role-has-required-aria-props) 1 quality typecheck/TS2769 0 quality 11 write_file 290 2,590 $0.0000
12 write_file 2,648 1,762 $0.0000