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 None. The run followed every rule that was checked.
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, get_guidelines, list_components 518 62 $0.0000 1 read_file, list_tokens 5,684 50 $0.0000 2 list_files 1,293 43 $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 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 DisputeCardPaymentPage() {
31 const transaction = data.transaction;
32
33 const [reason, setReason] = useState("");
34 const [description, setDescription] = useState("");
35 const [contacted, setContacted] = useState(false);
36 const [submitted, setSubmitted] = useState(false);
37 const [errors, setErrors] = useState<Errors>({});
38
39 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
40 event.preventDefault();
41 const nextErrors: Errors = {};
42 if (!reason) {
43 nextErrors.reason = "Select a reason for the dispute.";
44 }
45 if (description.trim().length < 30) {
46 nextErrors.description = "Describe what happened in at least 30 characters.";
47 }
48 if (!contacted) {
49 nextErrors.contacted =
50 "You must confirm you contacted the merchant first.";
51 }
52 setErrors(nextErrors);
53 if (Object.keys(nextErrors).length === 0) {
54 setSubmitted(true);
55 }
56 };
57
58 return (
59 <Stack gap="6" marginBlock="8">
60 <Stack gap="2">
61 <Heading level={1}>Dispute a card payment</Heading>
62 <Text tone="muted" size="sm">
63 Open a dispute for the payment below.
64 </Text>
65 </Stack>
66
67 <Alert tone="warning">
68 A dispute must be opened within {data.deadlineDays} days of the payment.
69 </Alert>
70
71 <Card>
72 <CardHeader>
73 <CardTitle>Payment being disputed</CardTitle>
74 </CardHeader>
75 <CardBody>
76 <DataList
77 items={[
78 { label: "Merchant", value: transaction.merchant },
79 {
80 label: "Date",
81 value: <FormatDate value={transaction.date} dateStyle="long" />,
82 },
83 {
84 label: "Amount",
85 value: (
86 <FormatNumber
87 value={transaction.amount}
88 format="currency"
89 currency={transaction.currency}
90 />
91 ),
92 },
93 { label: "Card", value: transaction.card },
94 ]}
95 />
96 </CardBody>
97 </Card>
98
99 {submitted ? (
100 <Card>
101 <CardHeader>
102 <CardTitle>Dispute open</CardTitle>
103 </CardHeader>
104 <CardBody>
105 <Stack gap="2">
106 <Text>Your dispute has been opened.</Text>
107 <Text tone="muted" size="sm">
108 The bank will reply within {data.replyDays} working days.
109 </Text>
110 </Stack>
111 </CardBody>
112 </Card>
113 ) : (
114 <Card>
115 <CardHeader>
116 <CardTitle>Dispute details</CardTitle>
117 </CardHeader>
118 <CardBody>
119 <form onSubmit={handleSubmit}>
120 <Stack gap="4">
121 <FormField
122 label="Reason"
123 required
124 error={errors.reason}
125 >
126 <Select
127 placeholder="Select a reason"
128 options={data.reasons}
129 value={reason}
130 onValueChange={setReason}
131 />
132 </FormField>
133
134 <FormField
135 label="What happened"
136 required
137 error={errors.description}
138 >
139 <Textarea
140 rows={4}
141 value={description}
142 onChange={(event) => setDescription(event.target.value)}
143 />
144 </FormField>
145
146 <Checkbox
147 checked={contacted}
148 onCheckedChange={setContacted}
149 error={errors.contacted}
150 >
151 I contacted the merchant first and could not solve it
152 </Checkbox>
153
154 <Stack flexDirection="row" justifyContent="flex-end">
155 <Button type="submit" variant="solid">
156 Submit dispute
157 </Button>
158 </Stack>
159 </Stack>
160 </form>
161 </CardBody>
162 </Card>
163 )}
164 </Stack>
165 );
166 }
167
get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 4,754 371 $0.0000
5 write_file 11,403 2,573 $0.0000
6 write_file 2,600 1,248 $0.0000