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 1 counted, under 1 rule. “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, get_guidelines, list_components, read_file 196 81 $0.0000 1 get_component, get_component, get_component, get_component, get_component 5,268 134 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 4,570 166
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 Checkbox,
13 DataList,
14 Heading,
15 Select,
16 Stack,
17 Switch,
18 Toaster,
19 toast,
20 } from "@vektos/ds";
21 import data from "./fixture.json";
22
23 type Alert = (typeof data.alerts)[number];
24
25 export default function Page() {
26 const [alerts, setAlerts] = useState<Alert[]>(() =>
27 data.alerts.map((a) => ({ ...a })),
28 );
29 const [frequency, setFrequency] = useState(data.summary.frequency);
30 const [productNews, setProductNews] = useState(data.productNews);
31
32 const toggleAlert = (id: string, enabled: boolean) => {
33 setAlerts((prev) =>
34 prev.map((a) => (a.id === id ? { ...a, enabled } : a)),
35 );
36 const alert = alerts.find((a) => a.id === id);
37 if (alert) {
38 toast({ title: `${alert.label} alerts ${enabled ? "on" : "off"}` });
39 }
40 };
41
42 const saveSummary = () => {
43 toast({ title: "Summary email settings saved", tone: "success" });
44 };
45
46 return (
47 <>
48 <Stack gap="6">
49 <Heading level={1}>Notification settings</Heading>
50
51 <Card>
52 <CardHeader>
53 <CardTitle>Recipients</CardTitle>
54 <CardDescription>
55 Notifications are sent to the company account.
56 </CardDescription>
57 </CardHeader>
58 <CardBody>
59 <DataList
60 items={[
61 { label: "Company", value: data.account.name },
62 { label: "Email", value: data.account.email },
63 ]}
64 />
65 </CardBody>
66 </Card>
67
68 <Card>
69 <CardHeader>
70 <CardTitle>Alerts</CardTitle>
71 <CardDescription>Each alert applies immediately.</CardDescription>
72 </CardHeader>
73 <CardBody>
74 <Stack gap="4">
75 {alerts.map((alert) => (
76 <Switch
77 key={alert.id}
78 checked={alert.enabled}
79 onCheckedChange={(checked) => toggleAlert(alert.id, checked)}
80 helperText={alert.description}
81 >
82 {alert.label}
83 </Switch>
84 ))}
85 </Stack>
86 </CardBody>
87 </Card>
88
89 <Card>
90 <CardHeader>
91 <CardTitle>Summary email</CardTitle>
92 <CardDescription>
93 How often you receive the summary, and product news.
94 </CardDescription>
95 </CardHeader>
96 <CardBody>
97 <Stack gap="4">
98 <Select
99 aria-label="Summary frequency"
100 options={data.summary.options}
101 value={frequency}
102 onValueChange={setFrequency}
103 />
104 <Checkbox
105 checked={productNews}
106 onCheckedChange={setProductNews}
107 >
108 Send me product news
109 </Checkbox>
110 </Stack>
111 </CardBody>
112 <CardFooter>
113 <Button onClick={saveSummary}>Save</Button>
114 </CardFooter>
115 </Card>
116 </Stack>
117 <Toaster />
118 </>
119 );
120 }
121
4 write_file 98 2,234 $0.0000
5 check_code 2,292 727 $0.0000