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 6 counted, under 6 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 40 $0.0000 1 write_file 1,177 1,763 $0.0000 2 stop 2,962 41 $0.0000
cdb5d9e77633
Output cap The provider's default 11 const [companyName, setCompanyName] = useState(data.account.name);
12 const [email, setEmail] = useState(data.account.email);
13
14 // alerts state keyed by id
15 const [alerts, setAlerts] = useState<Alert[]>(data.alerts.map((a) => ({ ...a, toggled: a.enabled })));
16
17 // summary state
18 const [frequency, setFrequency] = useState<FrequencyOption["value"]>(data.summary.frequency);
19 const [productNews, setProductNews] = useState(data.productNews);
20
21 // transient messages
22 const [alertMessage, setAlertMessage] = useState<string | null>(null);
23 const [summaryMessage, setSummaryMessage] = useState<string | null>(null);
24
25 // toggle an alert
26 const handleAlertToggle = (id: Alert["id"], value: boolean) => {
27 setAlerts((prev) =>
28 prev.map((a) => (a.id === id ? { ...a, toggled: value } : a))
29 );
30 // immediate effect: update underlying data for confirmation
31 setAlertMessage(` ${data.alerts.find((a) => a.id === id)!.label} alerts ${value ? "on" : "off"}.`);
32 // auto clear after 3s
33 const timer = setTimeout(() => setAlertMessage(null), 3000);
34 // cleanup if re-runs
35 return () => clearTimeout(timer);
36 };
37
38 const handleSaveSummary = () => {
39 // persist combined settings
40 const updatedSummary = {
41 frequency,
42 productNews,
43 };
44 // simulate save; in real app would POST/PUT
45 setSummaryMessage(` Summary saved (frequency: ${frequency}, product news: ${productNews}).`);
46 const timer = setTimeout(() => setSummaryMessage(null), 3000);
47 return () => clearTimeout(timer);
48 };
49
50 // initialise page data from fixture (already done via useState)
51
52 return (
53 <div
54 style={css(
55 {
56 maxWidth: 600,
57 margin: "0 auto",
58 padding: 24,
59 fontFamily: "system-ui, sans-serif",
60 }
61 )}
62 >
63 <h1>Notification settings</h1>
64
65 {/* Who notifications go to */}
66 <section>
67 <h2>Notify</h2>
68 <p>
69 <strong>{companyName}</strong> <{email}>
70 </p>
71 </section>
72
73 {/* Alerts */}
74 <section>
75 <h2>Alerts</h2>
76 {alerts.map((alert) => (
77 <div
78 key={alert.id}
79 style={css({ marginBottom: 12, display: "flex", alignItems: "center" })}
80 >
81 <label
82 style={css({ flexGrow: 1, fontWeight: "500" })}
83 >
84 {alert.label}{" "}
85 <span style={css({ color: "var(--muted)", fontSize: 12 })}>{alert.description}</span>
86 </label>
87 <input
88 type="checkbox"
89 checked={alert.toggled}
90 onChange={() => handleAlertToggle(alert.id, alert.toggled)}
91 style={css({ marginRight: 8, cursor: "pointer" })}
92 />
93 </div>
94 ))}
95
96 {alertMessage && (
97 <p style={css({ marginTop: 8, color: "green" })}>{alertMessage}</p>
98 )}
99 </section>
100
101 {/* Summary email */}
102 <section>
103 <h2>Summary email</h2>
104
105 <label>
106 Frequency:
107 <select
108 value={frequency}
109 onChange={(e) => setFrequency(e.target.value as FrequencyOption["value"])}
110 style={css({ marginLeft: 8, cursor: "pointer" })}
111 >
112 {data.summary.options.map((opt) => (
113 <option key={opt.value} value={opt.value}>
114 {opt.label}
115 </option>
116 ))}
117 </select>
118 </label>
119
120 <label>
121 <input
122 type="checkbox"
123 checked={productNews}
124 onChange={(e) => setProductNews(e.target.checked)}
125 style={css({ marginLeft: 8, cursor: "pointer" })}
126 />
127 Send me product news
128 </label>
129
130 <button
131 onClick={handleSaveSummary}
132 style={css({
133 marginTop: 12,
134 padding: "8 16",
135 font: "inherit",
136 cursor: "pointer",
137 })}
138 >
139 Save
140 </button>
141
142 {summaryMessage && (
143 <p style={css({ marginTop: 8, color: "green" })}>{summaryMessage}</p>
144 )}
145 </section>
146 </div>
147 );
148 }
typecheck/TS1003
1 quality
typecheck/TS1005 1 quality typecheck/TS17008 1 quality