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 179 65 $0.0000 1 read_file, list_components 2,636 44 $0.0000 2 list_files 2,721 49 $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 toast,
20 } from "@vektos/ds";
21 import { css } from "styled-system/css";
22
23 export default function Page() {
24 const [alertStates, setAlertStates] = useState<Record<string, boolean>>(() =>
25 Object.fromEntries(data.alerts.map((alert) => [alert.id, alert.enabled])),
26 );
27 const [frequency, setFrequency] = useState(data.summary.frequency);
28 const [productNews, setProductNews] = useState(data.productNews);
29
30 return (
31 <div className={css({ minHeight: "full" }) + " vektos"}>
32 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="6">
33 <Toaster />
34 <Heading level={1}>Notification settings</Heading>
35
36 <Card>
37 <CardHeader>
38 <CardTitle>Notifications go to</CardTitle>
39 </CardHeader>
40 <CardBody>
41 <DataList
42 items={[
43 { label: "Company name", value: data.account.name },
44 { label: "Email address", value: data.account.email },
45 ]}
46 />
47 </CardBody>
48 </Card>
49
50 <Card>
51 <CardHeader>
52 <CardTitle>Alerts</CardTitle>
53 </CardHeader>
54 <CardBody>
55 <Stack gap="4">
56 {data.alerts.map((alert) => (
57 <Switch
58 key={alert.id}
59 checked={alertStates[alert.id]}
60 onCheckedChange={(checked) => {
61 setAlertStates((prev) => ({ ...prev, [alert.id]: checked }));
62 toast({ title: `${alert.label} alerts ${checked ? "on" : "off"}` });
63 }}
64 helperText={alert.description}
65 >
66 {alert.label}
67 </Switch>
68 ))}
69 </Stack>
70 </CardBody>
71 </Card>
72
73 <Card>
74 <CardHeader>
75 <CardTitle>Summary email</CardTitle>
76 </CardHeader>
77 <CardBody>
78 <Stack gap="4">
79 <RadioGroup
80 label="Frequency"
81 value={frequency}
82 onValueChange={setFrequency}
83 options={data.summary.options}
84 />
85 <Checkbox
86 checked={productNews}
87 onCheckedChange={setProductNews}
88 >
89 Send me product news
90 </Checkbox>
91 </Stack>
92 </CardBody>
93 <CardFooter>
94 <Button
95 onClick={() =>
96 toast({ title: "Summary email settings saved" })
97 }
98 >
99 Save
100 </Button>
101 </CardFooter>
102 </Card>
103 </Stack>
104 </div>
105 );
106 }
107
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 list_tokens 9,287 2,971 $0.0000
5 write_file 3,212 1,957 $0.0000