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