Runs / notification-settings Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 46 counted, under 12 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 read_file 853 35 $0.0000 1 write_file 1,172 1,960 $0.0000 2 stop 3,159 17 $0.0000
cdb5d9e77633
Output cap The provider's default 11 enabled: boolean;
12 };
13
14 type FrequencyOption = { value: string; label: string };
15
16 const toastDuration = 3000;
17
18 function useToast() {
19 const [message, setMessage] = useState<string | null>(null);
20 useEffect(() => {
21 if (message) {
22 const timer = setTimeout(() => setMessage(null), toastDuration);
23 return () => clearTimeout(timer);
24 }
25 }, [message]);
26 return message;
27 }
28
29 export default function Page() {
30 const [alerts, setAlerts] = useState<Alert[]>(
31 data.alerts.map((a) => ({ ...a, enabled: a.enabled }))
32 );
33 const [frequency, setFrequency] = useState<string>(data.summary.frequency);
34 const [productNews, setProductNews] = useState<boolean>(data.productNews);
35 const toast = useToast();
36
37 // persist changes (here just update state; in real app would POST)
38 const handleSave = () => {
39 // simulate save; show toast
40 setMessage("Settings saved");
41 };
42
43 const handleAlertToggle = (id: string, checked: boolean) => {
44 setAlerts((prev) =>
45 prev.map((a) => (a.id === id ? { ...a, enabled: checked } : a))
46 );
47 const alert = data.alerts.find((a) => a.id === id);
48 if (alert) {
49 setMessage(`${alert.label} alerts ${checked ? "on" : "off"}`);
50 }
51 };
52
53 const handleFrequencyChange = (value: string) => {
54 setFrequency(value);
55 };
56
57 const handleProductNewsToggle = (checked: boolean) => {
58 setProductNews(checked);
59 };
60
61 // initial toast for frequency and product news could be shown on load, but we follow spec
62
63 return (
64 <div
65 style={css({
66 maxWidth: "600px",
67 margin: "0 auto",
68 padding: "2rem",
69 fontFamily: "system-ui, sans-serif",
70 })}
71 >
72 <header style={css({ marginBottom: "2rem" })}>
73 <h1>Notification settings</h1>
74 <p>
75 {"Notifications go to "}
76 <strong>{data.account.name}</strong>
77 {"& "}
78 <strong>{data.account.email}</strong>
79 </p>
80 </header>
81
82 {/* Alerts section */}
83 <section>
84 <h2>Alerts</h2>
85 {alerts.map((alert) => (
86 <div
87 key={alert.id}
88 style={css({
89 display: "flex",
90 alignItems: "center",
91 gap: "0.5rem",
92 marginBottom: "0.5rem",
93 })}
94 >
95 <input
96 type="checkbox"
97 checked={alert.enabled}
98 onChange={() => handleAlertToggle(alert.id, alert.enabled)}
99 style={css({ accentColor: "currentColor" })}
100 />
101 <span>{alert.label}</span>
102 <small style={css({ color: "var(--muted)", marginLeft: "1rem" })}>
103 {alert.description}
104 </small>
105 </div>
106 ))}
107 </section>
108
109 {/* Summary email section */}
110 <section>
111 <h2>Summary email</h2>
112 <p>
113 <label>Frequency:
114 <select
115 value={frequency}
116 onChange={(e) => handleFrequencyChange(e.target.value)}
117 style={css({
118 padding: "0.25rem 0.5rem",
119 borderRadius: "4px",
120 border: "1px solid #ccc",
121 })}
122 >
123 {data.summary.options.map((opt) => (
124 <option key={opt.value} value={opt.value}>
125 {opt.label}
126 </option>
127 ))}
128 </select>
129 </label>
130 </p>
131 <label>
132 <input
133 type="checkbox"
134 checked={productNews}
135 onChange={() => handleProductNewsToggle(productNews)}
136 style={css({ accentColor: "currentColor" })}
137 />
138 Send me product news
139 </label>
140 <button
141 onClick={handleSave}
142 style={css({
143 marginTop: "1rem",
144 padding: "0.5rem 1rem",
145 borderRadius: "4px",
146 border: "none",
147 background: "#0066ff",
148 color: "#fff",
149 cursor: "pointer",
150 })}
151 >
152 Save
153 </button>
154 </section>
155
156 {/* Toast notification */}
157 {toast && (
158 <div
159 style={css({
160 position: "fixed",
161 bottom: "1rem",
162 left: "50%",
163 transform: "translateX(-50%)",
164 background: "#333",
165 color: "#fff",
166 padding: "0.5rem 1rem",
167 borderRadius: "4px",
168 zIndex: 9999,
169 fontSize: "0.875rem",
170 })}
171 >
172 {toast}
173 </div>
174 )}
175 </div>
176 );
177 }
typecheck/TS2559 9 quality page.tsx:65:7 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:72:15 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:88:13 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:99:15 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:102:20 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:117:15 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:136:13 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:142:11 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. page.tsx:159:11 Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. Every run that broke typecheck/TS2559 lint/eslint(no-unused-vars) 1 quality lint/typescript(consistent-return) 1 quality lint/unicorn(consistent-function-scoping) 1 quality typecheck/TS2769 0 quality