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 None. The run followed every rule that was checked.
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 1,420 53 $0.0000 1 list_components 1,757 47 $0.0000 2 get_component 4,253 692 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import { Toaster, toast } from "@vektos/ds";
7 import {
8 Stack,
9 Switch,
10 Select,
11 FormField,
12 Text,
13 Button,
14 } from "@vektos/ds";
15
16 export default function NotificationSettingsPage() {
17 // Alerts state – keep a copy that we can mutate locally
18 const [alerts, setAlerts] = useState(
19 data.alerts.map((a) => ({ ...a, enabled: a.enabled }))
20 );
21
22 // Summary email state
23 const [summaryFrequency, setSummaryFrequency] = useState(
24 data.summary.frequency
25 );
26 const [productNews, setProductNews] = useState(data.productNews);
27
28 // Toggle a single alert and show a transient confirmation
29 const handleAlertToggle = (id: string, checked: boolean) => {
30 setAlerts((prev) =>
31 prev.map((a) => (a.id === id ? { ...a, enabled: checked } : a))
32 );
33 const alert = data.alerts.find((a) => a.id === id);
34 if (alert) {
35 toast({
36 title: `${alert.label} alerts ${checked ? "on" : "off"}`,
37 });
38 }
39 };
40
41 return (
42 <>
43 <Toaster />
44 <Stack gap="6" maxWidth="lg">
45 {/* Who the notifications go to */}
46 <Stack gap="2" alignItems="center">
47 <Text size="lg" weight="semibold">
48 {data.account.name}
49 </Text>
50 <Text tone="muted">
51 {data.account.email}
52 </Text>
53 </Stack>
54
55 {/* Alerts */}
56 <Stack gap="4">
57 <Text size="lg" weight="medium">
58 Alerts
59 </Text>
60 {alerts.map((alert) => (
61 <Stack
62 key={alert.id}
63 gap="3"
64 alignItems="center"
65 >
66 <Switch
67 checked={alert.enabled}
68 onCheckedChange={(checked) =>
69 handleAlertToggle(alert.id, checked)
70 }
71 helperText={alert.description}
72 >
73 {alert.label}
74 </Switch>
75 </Stack>
76 ))}
77
78 {/* Summary email */}
79 <Stack
80 gap="4"
81 flexDirection={{ base: "column", md: "row" }}
82 justifyContent="space-between"
83 >
84 <FormField label="Summary frequency">
85 <Select
86 options={data.summary.options.map((o) => ({
87 label: o.label,
88 value: o.value,
89 }))}
90 value={summaryFrequency}
91 onValueChange={setSummaryFrequency}
92 placeholder="Select frequency"
93 />
94 </FormField>
95
96 <Stack gap="2">
97 <Switch
98 checked={productNews}
99 onCheckedChange={(checked) => setProductNews(checked)}
100 >
101 Send me product news
102 </Switch>
103 </Stack>
104 </Stack>
105 </Stack>
106
107 {/* Save button */}
108 <Stack justifyContent="flex-end">
109 <Button variant="solid" onClick={() => toast({ title: "Summary saved" })}>
110 Save
111 </Button>
112 </Stack>
113 </Stack>
114 </>
115 );
116 }
4 get_component 2,232 30 $0.0000
5 get_component 648 139 $0.0000
6 write_file 1,787 1,818 $0.0000
7 check_code 3,633 791 $0.0000
8 get_component 1,163 136 $0.0000
9 get_component 1,740 142 $0.0000
10 write_file 2,757 1,160 $0.0000
11 check_code 3,944 759 $0.0000
12 write_file 929 2,101 $0.0000
13 check_code 3,058 745 $0.0000
14 write_file 3,884 1,211 $0.0000
15 check_code 930 743 $0.0000