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 read_file 1,440 39 $0.0000 1 get_guidelines 1,694 62 $0.0000 2 list_components 4,337 38 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 Card,
8 CardHeader,
9 CardBody,
10 CardTitle,
11 FormField,
12 Select,
13 Textarea,
14 Checkbox,
15 Button,
16 Text,
17 Stack,
18 } from "@vektos/ds";
19
20 export default function DisputePage() {
21 const [reason, setReason] = useState<string>("");
22 const [description, setDescription] = useState<string>("");
23 const [contactedMerchant, setContactedMerchant] = useState<boolean>(false);
24 const [submitted, setSubmitted] = useState<boolean>(false);
25 const [errors, setErrors] = useState<{
26 reason?: string;
27 description?: string;
28 contactedMerchant?: string;
29 }>({});
30
31 const handleSubmit = () => {
32 const newErrors: {
33 reason?: string;
34 description?: string;
35 contactedMerchant?: string;
36 } = {};
37
38 if (!reason) newErrors.reason = "Required";
39 if (description.length < 30)
40 newErrors.description = "At least 30 characters";
41 if (!contactedMerchant)
42 newErrors.contactedMerchant = "You must confirm you contacted the merchant";
43
44 setErrors(newErrors);
45 if (Object.keys(newErrors).length === 0) {
46 setSubmitted(true);
47 }
48 };
49
50 if (submitted) {
51 return (
52 <div>
53 <Text tone="success">Dispute opened</Text>
54 <Text>
55 The bank will reply within{" "}{data.replyDays}{" "}working days
56 </Text>
57 </div>
58 );
59 }
60
61 return (
62 <Card>
63 <CardHeader>
64 <CardTitle>Dispute payment</CardTitle>
65 </CardHeader>
66 <CardBody>
67 <Text>Payment details</Text>
68 <Stack gap={{ base: "4" }}>
69 <Stack>
70 <Text>Merchant: {data.transaction.merchant}</Text>
71 <Text>Date: {data.transaction.date}</Text>
72 <Text>
73 Amount:{" "}{data.transaction.amount} {data.transaction.currency}
74 </Text>
75 <Text>Card: {data.transaction.card}</Text>
76 </Stack>
77 <Text>
78 A dispute must be opened within{" "}{data.deadlineDays}{" "}days of the
79 payment.
80 </Text>
81 </Stack>
82
83 {/* Reason field */}
84 <FormField
85 label="Reason"
86 error={errors.reason}
87 >
88 <Select
89 value={reason}
90 onValueChange={setReason}
91 placeholder="Select a reason"
92 options={data.reasons.map((r) => ({
93 label: r.label,
94 value: r.value,
95 }))}
96 />
97 </FormField>
98
99 {/* What happened field */}
100 <FormField
101 label="What happened"
102 error={errors.description}
103 >
104 <Textarea
105 rows={4}
106 placeholder="Describe what happened..."
107 onChange={e => setDescription(e.target.value)}
108 />
109 </FormField>
110
111 {/* I contacted the merchant checkbox */}
112 <Checkbox
113 checked={contactedMerchant}
114 onCheckedChange={setContactedMerchant}
115 required
116 >
117 I contacted the merchant first and could not solve it
118 </Checkbox>
119 {errors.contactedMerchant && (
120 <Text tone="danger">{errors.contactedMerchant}</Text>
121 )}
122
123 <Button type="submit" onClick={handleSubmit}>
124 Submit dispute
125 </Button>
126 </CardBody>
127 </Card>
128 );
129 }
4 get_component 1,786 32 $0.0000
5 get_component 2,439 31 $0.0000
6 write_file 1,238 2,000 $0.0000
7 check_code 3,265 847 $0.0000
8 check_code 3,091 999 $0.0000
9 write_file 2,128 1,953 $0.0000
10 check_code 2,012 832 $0.0000