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 215 30 $0.0000 1 read_file, get_guidelines 451 45 $0.0000 2 list_components, list_tokens 2,762 40 $0.0000 3
Output cap The provider's default 3
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
23 type Errors = {
24 reason?: string;
25 description?: string;
26 contacted?: string;
27 };
28
29 export default function Page() {
30 const [reason, setReason] = useState("");
31 const [description, setDescription] = useState("");
32 const [contacted, setContacted] = useState(false);
33 const [submitted, setSubmitted] = useState(false);
34 const [errors, setErrors] = useState<Errors>({});
35
36 const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
37 event.preventDefault();
38 const nextErrors: Errors = {};
39 if (!reason) {
40 nextErrors.reason = "Select a reason for the dispute.";
41 }
42 if (description.trim().length < 30) {
43 nextErrors.description =
44 "Describe what happened in at least 30 characters.";
45 }
46 if (!contacted) {
47 nextErrors.contacted =
48 "You must confirm that you contacted the merchant first.";
49 }
50 setErrors(nextErrors);
51 if (Object.keys(nextErrors).length === 0) {
52 setSubmitted(true);
53 }
54 };
55
56 return (
57 <Stack gap="6">
58 <Heading level={1}>Dispute a card payment</Heading>
59
60 <Card>
61 <CardHeader>
62 <CardTitle>Payment being disputed</CardTitle>
63 </CardHeader>
64 <CardBody>
65 <DataList
66 items={[
67 { label: "Merchant", value: data.transaction.merchant },
68 {
69 label: "Date",
70 value: (
71 <FormatDate value={data.transaction.date} dateStyle="long" />
72 ),
73 },
74 {
75 label: "Amount",
76 value: (
77 <FormatNumber
78 value={data.transaction.amount}
79 format="currency"
80 currency={data.transaction.currency}
81 />
82 ),
83 },
84 { label: "Card", value: data.transaction.card },
85 ]}
86 />
87 </CardBody>
88 </Card>
89
90 {submitted ? (
91 <Alert
92 tone="success"
93 title="Dispute opened"
94 >
95 The bank will reply within {data.replyDays} working days.
96 </Alert>
97 ) : (
98 <Stack gap="4">
99 <Alert tone="warning" title="Time limit">
100 A dispute must be opened within {data.deadlineDays} days of the
101 payment.
102 </Alert>
103
104 <form onSubmit={handleSubmit} noValidate>
105 <Stack gap="4">
106 <FormField
107 label="Reason"
108 required
109 error={errors.reason}
110 >
111 <Select
112 options={data.reasons}
113 value={reason}
114 onValueChange={setReason}
115 placeholder="Select a reason"
116 />
117 </FormField>
118
119 <FormField
120 label="What happened"
121 required
122 error={errors.description}
123 >
124 <Textarea
125 rows={4}
126 value={description}
127 onChange={(event) => setDescription(event.target.value)}
128 placeholder="Describe what happened in your own words"
129 />
130 </FormField>
131
132 <Checkbox
133 checked={contacted}
134 onCheckedChange={setContacted}
135 error={errors.contacted}
136 >
137 I contacted the merchant first and could not solve it
138 </Checkbox>
139
140 <Button type="submit" variant="solid">
141 Open dispute
142 </Button>
143 </Stack>
144 </form>
145 </Stack>
146 )}
147 </Stack>
148 );
149 }
get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 5,969 113 $0.0000
5 get_component, get_component, get_component, get_component 14,047 92 $0.0000
6 list_files 8,656 39 $0.0000
8 read_file, read_file, read_file 88 175 $0.0000
9 write_file 262 3,496 $0.0000
10 check_code 7,494 859 $0.0000
11 list_tokens, list_tokens 949 508 $0.0000
12 write_file 990 1,253 $0.0000
13 check_code 1,307 825 $0.0000
15 write_file 8,502 1,483 $0.0000
16 check_code 2,521 830 $0.0000