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 None. The run followed every rule that was checked.
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 154 37 $0.0000 1 read_file, get_guidelines 205 45 $0.0000 2 list_components, list_tokens 2,837 40 $0.0000 3
Output cap The provider's default 4
5 import data from "./fixture.json";
6
7 import {
8 Avatar,
9 Button,
10 Card,
11 CardBody,
12 CardDescription,
13 CardFooter,
14 CardHeader,
15 CardTitle,
16 Checkbox,
17 DataList,
18 FormField,
19 Heading,
20 Select,
21 Stack,
22 Switch,
23 Text,
24 Toaster,
25 toast,
26 } from "@vektos/ds";
27
28 export default function Page() {
29 const [alerts, setAlerts] = useState(data.alerts);
30 const [frequency, setFrequency] = useState(data.summary.frequency);
31 const [productNews, setProductNews] = useState(data.productNews);
32
33 const toggleAlert = (id: string, enabled: boolean) => {
34 setAlerts((prev) =>
35 prev.map((alert) => (alert.id === id ? { ...alert, enabled } : alert)),
36 );
37 const alert = data.alerts.find((item) => item.id === id);
38 toast({ title: `${alert?.label} alerts ${enabled ? "on" : "off"}` });
39 };
40
41 return (
42 <>
43 <Stack gap="6" marginBlock="6" marginInline="auto" maxWidth="lg">
44 <Heading level={1}>Notification settings</Heading>
45
46 <Card>
47 <CardHeader>
48 <CardTitle>Notifications go to</CardTitle>
49 </CardHeader>
50 <CardBody>
51 <Stack flexDirection="row" gap="4" alignItems="center">
52 <Avatar name={data.account.name} />
53 <Stack gap="1">
54 <Text weight="medium">{data.account.name}</Text>
55 <Text size="sm" tone="muted">
56 {data.account.email}
57 </Text>
58 </Stack>
59 </Stack>
60 <DataList
61 marginBlockStart="4"
62 items={[
63 { label: "Company", value: data.account.name },
64 { label: "Email", value: data.account.email },
65 ]}
66 />
67 </CardBody>
68 </Card>
69
70 <Card>
71 <CardHeader>
72 <CardTitle>Alerts</CardTitle>
73 <CardDescription>Each alert takes effect as soon as you toggle it.</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) => toggleAlert(alert.id, checked)}
82 helperText={alert.description}
83 >
84 {alert.label}
85 </Switch>
86 ))}
87 </Stack>
88 </CardBody>
89 </Card>
90
91 <Card>
92 <CardHeader>
93 <CardTitle>Summary email</CardTitle>
94 </CardHeader>
95 <CardBody>
96 <Stack gap="4">
97 <FormField label="Frequency">
98 <Select
99 value={frequency}
100 onValueChange={setFrequency}
101 options={data.summary.options}
102 />
103 </FormField>
104 <Checkbox
105 checked={productNews}
106 onCheckedChange={setProductNews}
107 >
108 Send me product news
109 </Checkbox>
110 </Stack>
111 </CardBody>
112 <CardFooter>
113 <Button onClick={() => toast({ title: "Summary email settings saved" })}>
114 Save
115 </Button>
116 </CardFooter>
117 </Card>
118 </Stack>
119 <Toaster />
120 </>
121 );
122 }
123
5 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 86 242 $0.0000
6 get_component, get_component, get_component 9,118 69 $0.0000
7 get_component, list_tokens 1,408 63 $0.0000
8 write_file 788 3,153 $0.0000
9 list_tokens 3,191 182 $0.0000
10 check_code 471 767 $0.0000
11 write_file 835 853 $0.0000
12 check_code 880 795 $0.0000