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 get_guidelines, list_components, list_tokens, list_files 51 74 $0.0000 1 read_file 7,344 43 $0.0000 2 list_files 364 60 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Avatar,
7 Button,
8 Card,
9 CardBody,
10 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 Checkbox,
15 FormField,
16 Heading,
17 Select,
18 Stack,
19 Switch,
20 Text,
21 Toaster,
22 toast,
23 } from "@vektos/ds";
24
25 type Alert = (typeof data.alerts)[number];
26
27 export default function NotificationSettingsPage() {
28 const [alerts, setAlerts] = useState<Alert[]>(data.alerts);
29 const [frequency, setFrequency] = useState(data.summary.frequency);
30 const [productNews, setProductNews] = useState(data.productNews);
31
32 const handleToggleAlert = (id: string, checked: boolean) => {
33 setAlerts((prev) =>
34 prev.map((alert) =>
35 alert.id === id ? { ...alert, enabled: checked } : alert
36 )
37 );
38 const alert = alerts.find((item) => item.id === id);
39 if (alert) {
40 toast({ title: `${alert.label} alerts ${checked ? "on" : "off"}` });
41 }
42 };
43
44 const handleSaveSummary = () => {
45 toast({ title: "Summary email saved" });
46 };
47
48 return (
49 <div className="vektos">
50 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlock="6">
51 <Heading level={1}>Notification settings</Heading>
52
53 <Card>
54 <CardHeader>
55 <CardTitle>Notifications go to</CardTitle>
56 </CardHeader>
57 <CardBody>
58 <Stack flexDirection="row" alignItems="center" gap="3">
59 <Avatar name={data.account.name} />
60 <Stack gap="0">
61 <Text weight="medium">{data.account.name}</Text>
62 <Text size="sm" tone="muted">{data.account.email}</Text>
63 </Stack>
64 </Stack>
65 </CardBody>
66 </Card>
67
68 <Card>
69 <CardHeader>
70 <CardTitle>Alerts</CardTitle>
71 <CardDescription>
72 Each alert applies as soon as you turn it on or off.
73 </CardDescription>
74 </CardHeader>
75 <CardBody>
76 <Stack gap="4">
77 {alerts.map((alert) => (
78 <Switch
79 key={alert.id}
80 checked={alert.enabled}
81 onCheckedChange={(checked) =>
82 handleToggleAlert(alert.id, checked)
83 }
84 helperText={alert.description}
85 >
86 {alert.label}
87 </Switch>
88 ))}
89 </Stack>
90 </CardBody>
91 </Card>
92
93 <Card>
94 <CardHeader>
95 <CardTitle>Summary email</CardTitle>
96 <CardDescription>
97 How often you receive the summary, and product news.
98 </CardDescription>
99 </CardHeader>
100 <CardBody>
101 <Stack gap="4">
102 <FormField label="Frequency">
103 <Select
104 options={data.summary.options}
105 value={frequency}
106 onValueChange={setFrequency}
107 />
108 </FormField>
109 <Checkbox
110 checked={productNews}
111 onCheckedChange={setProductNews}
112 >
113 Send me product news
114 </Checkbox>
115 </Stack>
116 </CardBody>
117 <CardFooter>
118 <Button variant="solid" onClick={handleSaveSummary}>
119 Save
120 </Button>
121 </CardFooter>
122 </Card>
123
124 <Toaster />
125 </Stack>
126 </div>
127 );
128 }
129
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 145 328 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component 6,719 133 $0.0000
6 list_files 3,568 1,150 $0.0000
8 write_file 174 3,901 $0.0000
9 write_file 23,107 989 $0.0000