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 3 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 get_guidelines, list_components, list_files 179 57 $0.0000 1 read_file 5,148 29 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 330 198 $0.0000
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 Heading,
16 RadioGroup,
17 Stack,
18 Switch,
19 Text,
20 Toaster,
21 toast,
22 } from "@vektos/ds";
23 import { css } from "styled-system/css";
24
25 type Alert = {
26 id: string;
27 label: string;
28 description: string;
29 enabled: boolean;
30 };
31
32 export default function NotificationSettingsPage() {
33 const [alerts, setAlerts] = useState<Alert[]>(
34 data.alerts.map((a) => ({ ...a })),
35 );
36 const [frequency, setFrequency] = useState(data.summary.frequency);
37 const [productNews, setProductNews] = useState(data.productNews);
38
39 const handleAlertToggle = (id: string, checked: boolean) => {
40 const alert = alerts.find((a) => a.id === id);
41 setAlerts((prev) =>
42 prev.map((a) => (a.id === id ? { ...a, enabled: checked } : a)),
43 );
44 if (alert) {
45 toast({ title: `${alert.label} alerts ${checked ? "on" : "off"}` });
46 }
47 };
48
49 const handleSave = () => {
50 toast({ title: "Summary email settings saved", tone: "success" });
51 };
52
53 return (
54 <div
55 className={`vektos ${css({
56 minH: "100vh",
57 bg: "bg.canvas",
58 color: "fg.default",
59 px: { base: "4", md: "6" },
60 py: "8",
61 })}`}
62 >
63 <Stack gap="6" maxWidth="page">
64 <Heading level={1}>Notification settings</Heading>
65
66 <Card>
67 <CardHeader>
68 <CardTitle>Recipient</CardTitle>
69 <CardDescription>
70 Notifications are sent to this address.
71 </CardDescription>
72 </CardHeader>
73 <CardBody>
74 <Stack flexDirection="row" alignItems="center" gap="3">
75 <Avatar name={data.account.name} />
76 <Stack gap="0">
77 <Text weight="semibold">{data.account.name}</Text>
78 <Text size="sm" tone="muted">{data.account.email}</Text>
79 </Stack>
80 </Stack>
81 </CardBody>
82 </Card>
83
84 <Card>
85 <CardHeader>
86 <CardTitle>Alerts</CardTitle>
87 <CardDescription>
88 Each alert is applied as soon as you change it.
89 </CardDescription>
90 </CardHeader>
91 <CardBody>
92 <Stack gap="4">
93 {alerts.map((alert) => (
94 <Switch
95 key={alert.id}
96 checked={alert.enabled}
97 onCheckedChange={(checked) =>
98 handleAlertToggle(alert.id, checked)
99 }
100 helperText={alert.description}
101 >
102 {alert.label}
103 </Switch>
104 ))}
105 </Stack>
106 </CardBody>
107 </Card>
108
109 <Card>
110 <CardHeader>
111 <CardTitle>Summary email</CardTitle>
112 <CardDescription>
113 How often you receive the summary, and product news.
114 </CardDescription>
115 </CardHeader>
116 <CardBody>
117 <Stack gap="4">
118 <RadioGroup
119 label="Frequency"
120 value={frequency}
121 onValueChange={setFrequency}
122 options={data.summary.options}
123 />
124 <Checkbox
125 checked={productNews}
126 onCheckedChange={setProductNews}
127 >
128 Send me product news
129 </Checkbox>
130 </Stack>
131 </CardBody>
132 <CardFooter>
133 <Button onClick={handleSave}>Save</Button>
134 </CardFooter>
135 </Card>
136 </Stack>
137 <Toaster />
138 </div>
139 );
140 }
141
No overload matches this call.
3 get_component, get_component, get_component, get_component, list_tokens 6,557 292 $0.0000
4 list_tokens 4,465 2,477 $0.0000
5 list_tokens 2,760 29 $0.0000
6 write_file 234 1,339 $0.0000
7 read_file 1,405 207 $0.0000
8 write_file 1,109 875 $0.0000