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 3 counted, under 2 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 read_file 1,420 40 $0.0000 1 list_components 1,744 48 $0.0000 2 get_component 4,241 441 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import { Toaster, toast } from "@vektos/ds";
5 import {
6 Switch,
7 Select,
8 Checkbox,
9 Button,
10 Stack,
11 FormField,
12 Accordion,
13 AccordionItem,
14 AccordionTrigger,
15 AccordionContent,
16 } from "@vektos/ds";
17
18 import data from "./fixture.json";
19
20 type AlertEntry = { enabled: boolean; label: string; description: string };
21 type AlertState = Record<string, AlertEntry>;
22
23 export default function NotificationSettings() {
24 // initialise alerts state from fixture
25 const initialAlerts = data.alerts.reduce(
26 (acc, a) => {
27 acc[a.id] = { enabled: a.enabled, label: a.label, description: a.description };
28 return acc;
29 },
30 {} as AlertState
31 );
32
33 const [alerts, setAlerts] = React.useState<AlertState>(initialAlerts);
34
35 const [frequency, setFrequency] = React.useState(data.summary.frequency);
36 const [productNews, setProductNews] = React.useState(data.productNews);
37
38 // --- toggle a single alert ---
39 const toggleAlert = (id: string, checked: boolean) => {
40 setAlerts((prev: AlertState) => ({
41 ...prev,
42 [id]: { ...prev[id], enabled: checked },
43 }));
44 const label = alerts[id]!.label;
45 if (checked) {
46 toast({ title: `${label} alerts on`, tone: "success" });
47 } else {
48 toast({ title: `${label} alerts off`, tone: "warning" });
49 }
50 };
51
52 // --- save the summary preferences ---
53 const handleSave = () => {
54 setProductNews(true);
55 toast({ title: "Summary saved", tone: "success" });
56 // In a real app you would persist the changes here.
57 };
58
59 // ------- Who the notifications go to -------
60 return (
61 <div className="p-6">
62 <Toaster />
63
64 <Stack>
65 <Stack>
66 <h1 className="font-semibold text-lg">
67 {data.account.name}
68 </h1>
69 <p className="text-muted">{data.account.email}</p>
70 </Stack>
71 <p className="text-xs text-muted">
72 Notifications will be sent to the company{" "}
73 {data.account.name} and the email address{" "}{data.account.email}.
74 </p>
75 </Stack>
76
77 {/* ------- Alerts section ------- */}
78 <Accordion multiple defaultValue={[data.alerts[0].id]}>
79 {data.alerts.map((alert) => (
80 <AccordionItem key={alert.id} value={alert.id}>
81 <AccordionTrigger>{alert.label}</AccordionTrigger>
82 <AccordionContent>
83 <Switch
84 checked={alerts[alert.id].enabled}
85 onCheckedChange={(checked) => toggleAlert(alert.id, checked)}
86 helperText={alert.description}
87 >
88 {alert.label}
89 </Switch>
90 </AccordionContent>
91 </AccordionItem>
92 ))}
93 </Accordion>
94
95 {/* ------- Summary email section ------- */}
96 <Stack>
97 <FormField label="Summary email frequency">
98 <Select
99 value={frequency}
100 onValueChange={setFrequency}
101 placeholder="Select frequency"
102 options={data.summary.options.map((opt) => ({
103 label: opt.label,
104 value: opt.value,
105 }))}
106 />
107 </FormField>
108
109 <FormField label="Send me product news">
110 <Checkbox
111 checked={productNews}
112 onCheckedChange={setProductNews}
113 >
114 Send me product news
115 </Checkbox>
116 </FormField>
117
118 <Button variant="solid" onClick={handleSave}>
119 Save
120 </Button>
121 </Stack>
122 </div>
123 );
124 }
4 get_component 1,968 54 $0.0000
5 get_component 2,886 28 $0.0000
6 write_file 1,300 1,262 $0.0000
7 check_code 2,589 849 $0.0000
8 write_file 3,516 1,528 $0.0000
9 check_code 2,975 845 $0.0000
10 get_component 2,427 696 $0.0000
11 write_file 2,568 1,946 $0.0000
12 check_code 2,445 855 $0.0000
13 write_file 1,476 1,606 $0.0000
14 check_code 1,013 856 $0.0000
15 write_file 2,011 1,709 $0.0000
16 check_code 1,651 862 $0.0000
17 write_file 2,641 1,749 $0.0000
18 check_code 2,321 870 $0.0000
19 write_file 3,320 1,697 $0.0000