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 41 $0.0000 1 list_components 1,696 49 $0.0000 2 get_component 4,194 577 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 Card,
8 CardHeader,
9 CardTitle,
10 CardBody,
11 DataList,
12 FormatNumber,
13 FormField,
14 Select,
15 Textarea,
16 Checkbox,
17 Button,
18 Heading,
19 } from "@vektos/ds";
20
21 export default function Page() {
22 const [reason, setReason] = useState<string | null>(null);
23 const [description, setDescription] = useState<string>("");
24 const [contacted, setContacted] = useState<boolean>(false);
25 const [submitted, setSubmitted] = useState<boolean>(false);
26 const [errors, setErrors] = useState<{
27 reason?: string;
28 description?: string;
29 contacted?: string;
30 }>({});
31
32 const handleSubmit = (e: React.FormEvent) => {
33 e.preventDefault();
34 const newErrors: typeof errors = {};
35
36 // Reason required
37 if (!reason) {
38 newErrors.reason = "Select a reason";
39 }
40
41 // Description at least 30 characters
42 if (description.length < 30) {
43 newErrors.description = "At least 30 characters";
44 }
45
46 // Contacted checkbox must be checked
47 if (!contacted) {
48 newErrors.contacted = "Check this box";
49 }
50
51 setErrors(newErrors);
52
53 // If no errors, submit
54 if (Object.keys(newErrors).length === 0) {
55 setSubmitted(true);
56 }
57 };
58
59 if (submitted) {
60 return (
61 <main className="p-8">
62 <Heading level={2} size="xl">
63 Dispute submitted
64 </Heading>
65 <p>
66 Your dispute is open. The bank will reply within{" "}
67 {data.replyDays} working days.
68 </p>
69 </main>
70 );
71 }
72
73 return (
74 <main className="p-8 max-w-2xl">
75 <h1 className="mb-6 text-3xl font-bold">Dispute a card payment</h1>
76
77 {/* Payment details */}
78 <Card>
79 <CardHeader>
80 <CardTitle>Payment details</CardTitle>
81 </CardHeader>
82 <CardBody>
83 <DataList
84 items={[
85 { label: "Merchant", value: data.transaction.merchant },
86 { label: "Date", value: data.transaction.date },
87 {
88 label: "Amount",
89 value: <FormatNumber value={data.transaction.amount} format="currency" currency={data.transaction.currency} />,
90 },
91 { label: "Card", value: data.transaction.card },
92 ]}
93 orientation="vertical"
94 />
95 </CardBody>
96 </Card>
97
98 {/* Deadline hint */}
99 <p className="mt-4 text-sm text-muted">
100 A dispute must be opened within{" "}
101 {data.deadlineDays} days of the payment.
102 </p>
103
104 {/* Form */}
105 <form onSubmit={handleSubmit} className="mt-8">
106 {/* Reason */}
107 <FormField
108 label="Reason"
109 error={errors.reason}
110 >
111 <Select
112 placeholder="Select a reason"
113 value={reason ?? ""}
114 onValueChange={setReason}
115 options={data.reasons.map((r) => ({ label: r.label, value: r.value }))}
116 />
117 </FormField>
118
119 {/* What happened */}
120 <FormField
121 label="What happened"
122 error={errors.description}
123 >
124 <Textarea
125 rows={4}
126 placeholder="Describe what happened..."
127 value={description}
128 onChange={(e) => setDescription(e.target.value)}
129 />
130 </FormField>
131
132 {/* I contacted the merchant */}
133 <FormField
134 label="I contacted the merchant first and could not solve it"
135 error={errors.contacted}
136 >
137 <Checkbox
138 checked={contacted}
139 onCheckedChange={setContacted}
140 required
141 >
142 I contacted the merchant first and could not solve it
143 </Checkbox>
144 </FormField>
145
146 <Button type="submit" width="full">
147 Submit dispute
148 </Button>
149 </form>
150 </main>
151 );
152 }
4 get_component 1,892 30 $0.0000
5 get_component 2,666 30 $0.0000
6 get_component 1,221 29 $0.0000
7 write_file 2,114 1,667 $0.0000
8 check_code 3,808 968 $0.0000
9 write_file 741 1,453 $0.0000
10 check_code 125 958 $0.0000