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 2 counted, under 2 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 196 32 $0.0000 1 read_file 50 33 $0.0000 2 get_guidelines, list_components 548 40 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 Checkbox,
14 DataList,
15 Heading,
16 RadioGroup,
17 Stack,
18 Switch,
19 Text,
20 Toaster,
21 toast,
22 } from "@vektos/ds";
23
24 export default function Page() {
25 const [alertStates, setAlertStates] = useState<Record<string, boolean>>(() =>
26 Object.fromEntries(data.alerts.map((alert) => [alert.id, alert.enabled])),
27 );
28 const [frequency, setFrequency] = useState(data.summary.frequency);
29 const [productNews, setProductNews] = useState(data.productNews);
30
31 const handleAlertToggle = (id: string, label: string, checked: boolean) => {
32 setAlertStates((prev) => ({ ...prev, [id]: checked }));
33 toast({ title: `${label} alerts ${checked ? "on" : "off"}` });
34 };
35
36 const handleSave = () => {
37 toast({ title: "Summary email settings saved" });
38 };
39
40 return (
41 <div className="vektos">
42 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="6">
43 <Stack gap="1">
44 <Heading level={1}>Notification settings</Heading>
45 <Text tone="muted" size="sm">
46 Choose what this business account is notified about and how often.
47 </Text>
48 </Stack>
49
50 <Card>
51 <CardHeader>
52 <CardTitle>Where notifications are sent</CardTitle>
53 <CardDescription>
54 Alerts and summary emails go to this company and address.
55 </CardDescription>
56 </CardHeader>
57 <CardBody>
58 <DataList
59 items={[
60 { label: "Company", value: data.account.name },
61 { label: "Email", value: data.account.email },
62 ]}
63 />
64 </CardBody>
65 </Card>
66
67 <Card>
68 <CardHeader>
69 <CardTitle>Alerts</CardTitle>
70 <CardDescription>
71 Each alert applies as soon as you toggle it.
72 </CardDescription>
73 </CardHeader>
74 <CardBody>
75 <Stack gap="4">
76 {data.alerts.map((alert) => (
77 <Switch
78 key={alert.id}
79 checked={alertStates[alert.id]}
80 onCheckedChange={(checked) =>
81 handleAlertToggle(alert.id, alert.label, checked)
82 }
83 helperText={alert.description}
84 >
85 {alert.label}
86 </Switch>
87 ))}
88 </Stack>
89 </CardBody>
90 </Card>
91
92 <Card>
93 <CardHeader>
94 <CardTitle>Summary email</CardTitle>
95 <CardDescription>
96 Choose how often to receive a summary, and whether to receive product news.
97 </CardDescription>
98 </CardHeader>
99 <CardBody>
100 <Stack gap="4">
101 <RadioGroup
102 label="Frequency"
103 value={frequency}
104 onValueChange={setFrequency}
105 options={data.summary.options}
106 />
107 <Checkbox
108 checked={productNews}
109 onCheckedChange={setProductNews}
110 >
111 Send me product news
112 </Checkbox>
113 </Stack>
114 </CardBody>
115 <CardFooter>
116 <Button onClick={handleSave}>Save</Button>
117 </CardFooter>
118 </Card>
119 </Stack>
120 <Toaster />
121 </div>
122 );
123 }
4 get_component, get_component, get_component, get_component 104 119 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 2,452 195 $0.0000
6 get_component 6,956 98 $0.0000
7 write_file 1,136 2,777 $0.0000
8 check_code 18,273 778 $0.0000