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 45 32 $0.0000 1 read_file 91 35 $0.0000 2 get_guidelines 270 24 $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 Textarea,
21 } from "@vektos/ds";
22
23 const { transaction, deadlineDays, replyDays, reasons } = data;
24
25 type Errors = {
26 reason?: string;
27 description?: string;
28 contacted?: string;
29 };
30
31 export default function DisputePaymentPage() {
32 const [reason, setReason] = useState("");
33 const [description, setDescription] = useState("");
34 const [contacted, setContacted] = useState(false);
35 const [errors, setErrors] = useState<Errors>({});
36 const [submitted, setSubmitted] = useState(false);
37
38 function validate() {
39 const next: Errors = {};
40 if (!reason) next.reason = "Select a reason for the dispute.";
41 if (description.trim().length < 30)
42 next.description = "Write at least 30 characters.";
43 if (!contacted)
44 next.contacted = "Confirm that you contacted the merchant first.";
45 setErrors(next);
46 return Object.keys(next).length === 0;
47 }
48
49 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
50 event.preventDefault();
51 if (validate()) setSubmitted(true);
52 }
53
54 const paymentCard = (
55 <Card>
56 <CardHeader>
57 <CardTitle>Payment being disputed</CardTitle>
58 </CardHeader>
59 <CardBody>
60 <DataList
61 items={[
62 { label: "Merchant", value: transaction.merchant },
63 {
64 label: "Date",
65 value: <FormatDate value={transaction.date} dateStyle="long" />,
66 },
67 {
68 label: "Amount",
69 value: (
70 <FormatNumber
71 value={transaction.amount}
72 format="currency"
73 currency={transaction.currency}
74 />
75 ),
76 },
77 { label: "Card", value: transaction.card },
78 ]}
79 />
80 </CardBody>
81 </Card>
82 );
83
84 if (submitted) {
85 return (
86 <Stack gap="6" maxWidth="md">
87 <Heading level={1}>Dispute a card payment</Heading>
88 {paymentCard}
89 <Alert tone="success" title="Dispute open">
90 Your dispute is open. The bank will reply within {replyDays} working days.
91 </Alert>
92 </Stack>
93 );
94 }
95
96 return (
97 <Stack gap="6" maxWidth="md">
98 <Heading level={1}>Dispute a card payment</Heading>
99
100 <Alert tone="warning">
101 A dispute must be opened within {deadlineDays} days of the payment.
102 </Alert>
103
104 {paymentCard}
105
106 <form onSubmit={handleSubmit}>
107 <Stack gap="4">
108 <FormField label="Reason" required error={errors.reason}>
109 <Select
110 placeholder="Select a reason"
111 options={reasons.map((r) => ({
112 label: r.label,
113 value: r.value,
114 }))}
115 value={reason}
116 onValueChange={setReason}
117 />
118 </FormField>
119
120 <FormField
121 label="What happened"
122 required
123 error={errors.description}
124 helperText="At least 30 characters."
125 >
126 <Textarea
127 rows={4}
128 value={description}
129 onChange={(e) => setDescription(e.target.value)}
130 />
131 </FormField>
132
133 <Checkbox
134 checked={contacted}
135 onCheckedChange={setContacted}
136 error={errors.contacted}
137 required
138 >
139 I contacted the merchant first and could not solve it
140 </Checkbox>
141
142 <Button type="submit" variant="solid">
143 Submit dispute
144 </Button>
145 </Stack>
146 </form>
147 </Stack>
148 );
149 }
150
4 get_component, get_component, get_component, get_component, get_component 4,960 132 $0.0000
5 get_component, get_component, get_component, get_component, get_component 3,418 116 $0.0000
6 get_component, get_component, get_component, get_component, get_component 4,091 111 $0.0000
7 list_files 4,866 38 $0.0000
9 list_tokens, list_tokens 117 63 $0.0000
10 list_tokens, list_tokens, list_tokens, list_tokens, list_tokens 1,296 110 $0.0000
11 list_files 16,868 110 $0.0000
12 write_file 160 2,568 $0.0000
13 check_code 2,624 853 $0.0000
14 write_file 4,411 854 $0.0000
15 check_code 1,769 847 $0.0000
16 write_file 903 1,762 $0.0000
17 check_code 1,793 865 $0.0000