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 get_guidelines 410 30 $0.0000 1 list_components, list_tokens, read_file 2,564 59 $0.0000 2 list_files 3,711 25 $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 function handleSave() {
26 toast({ title: "Summary email settings saved" });
27 }
28
29 export default function Page() {
30 const [alerts, setAlerts] = useState<Record<string, boolean>>(() =>
31 Object.fromEntries(data.alerts.map((a) => [a.id, a.enabled])),
32 );
33 const [frequency, setFrequency] = useState(data.summary.frequency);
34 const [productNews, setProductNews] = useState(data.productNews);
35
36 const toggleAlert = (id: string, label: string, checked: boolean) => {
37 setAlerts((prev) => ({ ...prev, [id]: checked }));
38 toast({ title: `${label} alerts ${checked ? "on" : "off"}` });
39 };
40
41 return (
42 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="6">
43 <Stack gap="1">
44 <Heading level={1}>Notification settings</Heading>
45 <Text tone="muted" size="sm">
46 Manage how you are notified about account activity.
47 </Text>
48 </Stack>
49
50 <Card>
51 <CardHeader>
52 <CardTitle>Recipients</CardTitle>
53 <CardDescription>
54 Notifications are sent to the business account contact.
55 </CardDescription>
56 </CardHeader>
57 <CardBody>
58 <Stack flexDirection="row" gap="3" alignItems="center">
59 <Avatar name={data.account.name} />
60 <Stack gap="0">
61 <Text weight="medium">{data.account.name}</Text>
62 <Text size="sm" tone="muted">
63 {data.account.email}
64 </Text>
65 </Stack>
66 </Stack>
67 </CardBody>
68 </Card>
69
70 <Card>
71 <CardHeader>
72 <CardTitle>Alerts</CardTitle>
73 <CardDescription>
74 Each alert is applied as soon as you switch it.
75 </CardDescription>
76 </CardHeader>
77 <CardBody>
78 <Stack gap="4">
79 {data.alerts.map((alert) => (
80 <Switch
81 key={alert.id}
82 checked={alerts[alert.id] ?? false}
83 onCheckedChange={(checked) =>
84 toggleAlert(alert.id, alert.label, 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 How often you receive a summary of account activity.
100 </CardDescription>
101 </CardHeader>
102 <CardBody>
103 <Stack gap="4">
104 <FormField label="Frequency">
105 <Select
106 value={frequency}
107 onValueChange={setFrequency}
108 options={data.summary.options}
109 />
110 </FormField>
111 <Checkbox
112 checked={productNews}
113 onCheckedChange={setProductNews}
114 >
115 Send me product news
116 </Checkbox>
117 </Stack>
118 </CardBody>
119 <CardFooter>
120 <Button onClick={handleSave}>Save</Button>
121 </CardFooter>
122 </Card>
123
124 <Toaster />
125 </Stack>
126 );
127 }
128
list_tokens, list_tokens, list_tokens, list_tokens
4 get_component, get_component, get_component, get_component, get_component, get_component 754 150 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component 5,149 132 $0.0000
6 get_component, get_component 16,578 48 $0.0000
7 write_file 5,594 3,445 $0.0000
8 check_code 3,495 853 $0.0000
9 write_file 1,043 1,055 $0.0000
10 check_code 1,098 834 $0.0000