Runs / card-dispute 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 198 57 $0.0000 1 read_file, get_guidelines, list_components 77 57 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,560 285
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardHeader,
11 CardTitle,
12 Checkbox,
13 DataList,
14 FormField,
15 FormatDate,
16 FormatNumber,
17 Heading,
18 Select,
19 Stack,
20 Text,
21 Textarea,
22 } from "@vektos/ds";
23
24 type Errors = {
25 reason?: string;
26 description?: string;
27 contacted?: string;
28 };
29
30 export default function Page() {
31 const [reason, setReason] = useState("");
32 const [description, setDescription] = useState("");
33 const [contacted, setContacted] = useState(false);
34 const [errors, setErrors] = useState<Errors>({});
35 const [submitted, setSubmitted] = useState(false);
36
37 const handleSubmit = (event: React.FormEvent) => {
38 event.preventDefault();
39 const nextErrors: Errors = {};
40 if (!reason) {
41 nextErrors.reason = "Select a reason.";
42 }
43 if (description.trim().length < 30) {
44 nextErrors.description =
45 "Describe what happened in at least 30 characters.";
46 }
47 if (!contacted) {
48 nextErrors.contacted =
49 "You must confirm you contacted the merchant first.";
50 }
51 setErrors(nextErrors);
52 if (Object.keys(nextErrors).length === 0) {
53 setSubmitted(true);
54 }
55 };
56
57 const { transaction } = data;
58
59 return (
60 <div className="vektos">
61 <Stack gap="6" maxWidth="lg">
62 <Heading level={1}>Dispute a card payment</Heading>
63
64 <Card>
65 <CardHeader>
66 <CardTitle>Payment being disputed</CardTitle>
67 </CardHeader>
68 <CardBody>
69 <DataList
70 items={[
71 { label: "Merchant", value: transaction.merchant },
72 {
73 label: "Date",
74 value: <FormatDate value={transaction.date} dateStyle="long" />,
75 },
76 {
77 label: "Amount",
78 value: (
79 <FormatNumber
80 value={transaction.amount}
81 format="currency"
82 currency={transaction.currency}
83 />
84 ),
85 },
86 { label: "Card", value: transaction.card },
87 ]}
88 />
89 </CardBody>
90 </Card>
91
92 <Alert tone="warning" title="Open within 120 days">
93 A dispute must be opened within {data.deadlineDays} days of the
94 payment.
95 </Alert>
96
97 {submitted ? (
98 <Alert tone="success" title="Dispute open">
99 Your dispute is open. The bank will reply within {data.replyDays}{" "}
100 working days.
101 </Alert>
102 ) : (
103 <Card>
104 <CardHeader>
105 <CardTitle>Dispute details</CardTitle>
106 </CardHeader>
107 <CardBody>
108 <form onSubmit={handleSubmit}>
109 <Stack gap="4">
110 <FormField label="Reason" required error={errors.reason}>
111 <Select
112 options={data.reasons.map((r) => ({
113 label: r.label,
114 value: r.value,
115 }))}
116 value={reason}
117 onValueChange={setReason}
118 placeholder="Select a reason"
119 />
120 </FormField>
121
122 <FormField
123 label="What happened"
124 required
125 error={errors.description}
126 helperText="At least 30 characters."
127 >
128 <Textarea
129 rows={4}
130 value={description}
131 onChange={(e) => setDescription(e.target.value)}
132 />
133 </FormField>
134
135 <Checkbox
136 checked={contacted}
137 onCheckedChange={setContacted}
138 error={errors.contacted}
139 >
140 I contacted the merchant first and could not solve it
141 </Checkbox>
142
143 <Stack
144 flexDirection="row"
145 justifyContent="flex-end"
146 gap="2"
147 >
148 <Button type="submit" variant="solid">
149 Open dispute
150 </Button>
151 </Stack>
152 </Stack>
153 </form>
154 </CardBody>
155 </Card>
156 )}
157 </Stack>
158 </div>
159 );
160 }
161
3 list_tokens 11,192 688 $0.0000
4 list_tokens 1,729 1,093 $0.0000
5 list_tokens 1,328 126 $0.0000