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 196 30 $0.0000 1 read_file, get_guidelines 48 47 $0.0000 2 list_components, list_tokens 2,874 45 $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 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 export default function Page() {
26 const [alerts, setAlerts] = useState(() =>
27 data.alerts.map((a) => ({ ...a })),
28 );
29 const [frequency, setFrequency] = useState(data.summary.frequency);
30 const [productNews, setProductNews] = useState(data.productNews);
31
32 const handleAlertChange = (id: string, checked: boolean) => {
33 const alert = alerts.find((a) => a.id === id);
34 setAlerts((prev) =>
35 prev.map((a) => (a.id === id ? { ...a, enabled: checked } : a)),
36 );
37 if (alert) {
38 toast({ title: `${alert.label} alerts ${checked ? "on" : "off"}` });
39 }
40 };
41
42 const handleSave = (e: React.FormEvent) => {
43 e.preventDefault();
44 toast({ title: "Summary email settings saved" });
45 };
46
47 return (
48 <div className={`vektos ${css({ minH: "full", bg: "bg.canvas", px: "4", py: "6" })}`}>
49 <Stack gap="6" maxWidth="lg" marginInline="auto">
50 <Heading level={1}>Notification settings</Heading>
51
52 <Card>
53 <CardHeader>
54 <CardTitle>Recipient</CardTitle>
55 <CardDescription>
56 Notifications are sent to this account.
57 </CardDescription>
58 </CardHeader>
59 <CardBody>
60 <Stack flexDirection="row" gap="3" alignItems="center">
61 <Avatar name={data.account.name} size="lg" />
62 <Stack gap="0">
63 <Text weight="medium">{data.account.name}</Text>
64 <Text size="sm" tone="muted">{data.account.email}</Text>
65 </Stack>
66 </Stack>
67 </CardBody>
68 </Card>
69
70 <Card>
71 <CardHeader>
72 <CardTitle>Alerts</CardTitle>
73 <CardDescription>
74 Each alert applies as soon as you change it.
75 </CardDescription>
76 </CardHeader>
77 <CardBody>
78 <Stack gap="4">
79 {alerts.map((alert) => (
80 <Switch
81 key={alert.id}
82 checked={alert.enabled}
83 onCheckedChange={(checked) =>
84 handleAlertChange(alert.id, checked)
85 }
86 helperText={alert.description}
87 >
88 {alert.label}
89 </Switch>
90 ))}
91 </Stack>
92 </CardBody>
93 </Card>
94
95 <Card>
96 <CardHeader>
97 <CardTitle>Summary email</CardTitle>
98 <CardDescription>
99 Choose how often you receive the summary email.
100 </CardDescription>
101 </CardHeader>
102 <form onSubmit={handleSave}>
103 <CardBody>
104 <Stack gap="4">
105 <RadioGroup
106 label="Frequency"
107 value={frequency}
108 onValueChange={setFrequency}
109 options={data.summary.options}
110 />
111 <Checkbox
112 checked={productNews}
113 onCheckedChange={setProductNews}
114 >
115 Send me product news
116 </Checkbox>
117 </Stack>
118 </CardBody>
119 <CardFooter>
120 <Button type="submit" size="sm">
121 Save
122 </Button>
123 </CardFooter>
124 </form>
125 </Card>
126 </Stack>
127 <Toaster />
128 </div>
129 );
130 }
131
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 list_files 11,239 62 $0.0000
6 get_component, get_component, get_component 140 460 $0.0000
7 list_tokens 2,827 2,777 $0.0000
8 write_file 3,022 1,233 $0.0000
9 check_code 1,271 785 $0.0000
10 write_file 864 1,454 $0.0000
11 check_code 1,510 921 $0.0000