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 get_guidelines, list_components, list_tokens, list_files 407 96 $0.0000 1 read_file 7,594 28 $0.0000 2 read_file 278 48 $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 export default function Page() {
24 const tx = data.transaction;
25
26 const [reason, setReason] = useState("");
27 const [whatHappened, setWhatHappened] = useState("");
28 const [contacted, setContacted] = useState(false);
29 const [submitted, setSubmitted] = useState(false);
30 const [open, setOpen] = useState(false);
31
32 const reasonError =
33 submitted && !reason ? "Select a reason." : undefined;
34 const whatHappenedError =
35 submitted && whatHappened.trim().length < 30
36 ? "Describe what happened in at least 30 characters."
37 : undefined;
38 const contactedError =
39 submitted && !contacted
40 ? "You must confirm you contacted the merchant first."
41 : undefined;
42
43 const handleSubmit = (e: FormEvent) => {
44 e.preventDefault();
45 setSubmitted(true);
46 if (!reason || whatHappened.trim().length < 30 || !contacted) return;
47 setOpen(true);
48 };
49
50 return (
51 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlock="8">
52 <Heading level={1}>Dispute a card payment</Heading>
53
54 <Alert tone="warning" title="120-day limit">
55 A dispute must be opened within {data.deadlineDays} days of the payment.
56 </Alert>
57
58 <Card>
59 <CardHeader>
60 <CardTitle>Payment being disputed</CardTitle>
61 </CardHeader>
62 <CardBody>
63 <DataList
64 items={[
65 { label: "Merchant", value: tx.merchant },
66 {
67 label: "Date",
68 value: <FormatDate value={tx.date} dateStyle="long" />,
69 },
70 {
71 label: "Amount",
72 value: (
73 <FormatNumber
74 value={tx.amount}
75 format="currency"
76 currency={tx.currency}
77 />
78 ),
79 },
80 { label: "Card", value: tx.card },
81 ]}
82 />
83 </CardBody>
84 </Card>
85
86 {open ? (
87 <Alert tone="success" title="Dispute open">
88 The dispute is open. The bank will reply within {data.replyDays} working
89 days.
90 </Alert>
91 ) : (
92 <Card>
93 <CardHeader>
94 <CardTitle>Dispute details</CardTitle>
95 </CardHeader>
96 <CardBody>
97 <form onSubmit={handleSubmit}>
98 <Stack gap="4">
99 <FormField label="Reason" required error={reasonError}>
100 <Select
101 placeholder="Select a reason"
102 options={data.reasons.map((r) => ({
103 label: r.label,
104 value: r.value,
105 }))}
106 value={reason}
107 onValueChange={setReason}
108 />
109 </FormField>
110
111 <FormField
112 label="What happened"
113 helperText="At least 30 characters."
114 required
115 error={whatHappenedError}
116 >
117 <Textarea
118 rows={4}
119 value={whatHappened}
120 onChange={(e) => setWhatHappened(e.target.value)}
121 />
122 </FormField>
123
124 <Checkbox
125 checked={contacted}
126 onCheckedChange={setContacted}
127 required
128 error={contactedError}
129 >
130 I contacted the merchant first and could not solve it
131 </Checkbox>
132
133 <Stack
134 flexDirection="row"
135 gap="2"
136 justifyContent="flex-end"
137 >
138 <Button type="submit" variant="solid">
139 Open dispute
140 </Button>
141 </Stack>
142 </Stack>
143 </form>
144 </CardBody>
145 </Card>
146 )}
147 </Stack>
148 );
149 }
150
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
4 get_component, get_component 11,785 55 $0.0000
5 write_file 1,601 2,376 $0.0000
6 check_code 23,457 909 $0.0000
7 write_file 966 1,058 $0.0000
8 check_code 1,088 906 $0.0000