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 200 30 $0.0000 1 read_file 52 34 $0.0000 2 list_files 551 24 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Button,
7 Card,
8 CardBody,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 Checkbox,
13 DataList,
14 Heading,
15 RadioGroup,
16 Stack,
17 Switch,
18 Toaster,
19 } from "@vektos/ds";
20 import * as DS from "@vektos/ds";
21
22 const notify = (title: string) => {
23 const toast = (DS as { toast?: (options: { title: string }) => void }).toast ??
24 (globalThis as { toast?: (options: { title: string }) => void }).toast;
25 toast?.({ title });
26 };
27
28 export default function NotificationSettingsPage() {
29 const [alerts, setAlerts] = useState(data.alerts);
30 const [frequency, setFrequency] = useState(data.summary.frequency);
31 const [productNews, setProductNews] = useState(data.productNews);
32
33 return (
34 <Stack gap="6">
35 <Heading level={1}>Notification settings</Heading>
36
37 <Card>
38 <CardHeader>
39 <CardTitle>Notifications go to</CardTitle>
40 </CardHeader>
41 <CardBody>
42 <DataList
43 items={[
44 { label: "Company", value: data.account.name },
45 { label: "Email", value: data.account.email },
46 ]}
47 />
48 </CardBody>
49 </Card>
50
51 <Card>
52 <CardHeader>
53 <CardTitle>Alerts</CardTitle>
54 </CardHeader>
55 <CardBody>
56 <Stack gap="4">
57 {alerts.map((alert) => (
58 <Switch
59 key={alert.id}
60 checked={alert.enabled}
61 onCheckedChange={(checked: boolean) => {
62 setAlerts((prev) =>
63 prev.map((item) =>
64 item.id === alert.id ? { ...item, enabled: checked } : item
65 )
66 );
67 notify(`${alert.label} alerts ${checked ? "on" : "off"}`);
68 }}
69 helperText={alert.description}
70 >
71 {alert.label}
72 </Switch>
73 ))}
74 </Stack>
75 </CardBody>
76 </Card>
77
78 <Card>
79 <CardHeader>
80 <CardTitle>Summary email</CardTitle>
81 </CardHeader>
82 <CardBody>
83 <Stack gap="4">
84 <RadioGroup
85 label="How often"
86 value={frequency}
87 onValueChange={setFrequency}
88 options={data.summary.options}
89 />
90 <Checkbox
91 checked={productNews}
92 onCheckedChange={setProductNews}
93 >
94 Send me product news
95 </Checkbox>
96 </Stack>
97 </CardBody>
98 <CardFooter>
99 <Button
100 onClick={() => notify("Summary email settings saved")}
101 >
102 Save
103 </Button>
104 </CardFooter>
105 </Card>
106
107 <Toaster />
108 </Stack>
109 );
110 }
7 docs-show, docs-show, docs-show, docs-show 1,424 135 $0.0000
8 docs-show-story 2,956 65 $0.0000
9 docs-show, docs-show, docs-show, docs-show 415 124 $0.0000
10 docs-show 3,590 489 $0.0000
11 read_file 1,249 136 $0.0000
12 read_file 9,862 1,861 $0.0000
13 read_file 1,897 81 $0.0000
14 write_file 153 2,223 $0.0000