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 173 32 $0.0000 1 read_file 475 35 $0.0000 2 get_guidelines 718 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 type Errors = {
24 reason?: string;
25 description?: string;
26 contacted?: string;
27 };
28
29 export default function Page() {
30 const [reason, setReason] = useState("");
31 const [description, setDescription] = useState("");
32 const [contacted, setContacted] = useState(false);
33 const [errors, setErrors] = useState<Errors>({});
34 const [submitted, setSubmitted] = useState(false);
35
36 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
37 event.preventDefault();
38 const nextErrors: Errors = {};
39
40 if (!reason) {
41 nextErrors.reason = "Select a reason for the dispute.";
42 }
43 if (description.trim().length < 30) {
44 nextErrors.description =
45 "Describe what happened in at least 30 characters.";
46 }
47 if (!contacted) {
48 nextErrors.contacted =
49 "Confirm that you contacted the merchant first.";
50 }
51
52 setErrors(nextErrors);
53 if (Object.keys(nextErrors).length === 0) {
54 setSubmitted(true);
55 }
56 };
57
58 return (
59 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="6">
60 <Heading level={1}>Dispute a card payment</Heading>
61
62 <Card>
63 <CardHeader>
64 <CardTitle>Payment being disputed</CardTitle>
65 </CardHeader>
66 <CardBody>
67 <DataList
68 items={[
69 { label: "Merchant", value: data.transaction.merchant },
70 {
71 label: "Date",
72 value: <FormatDate value={data.transaction.date} dateStyle="long" />,
73 },
74 {
75 label: "Amount",
76 value: (
77 <FormatNumber
78 value={data.transaction.amount}
79 format="currency"
80 currency={data.transaction.currency}
81 />
82 ),
83 },
84 { label: "Card", value: data.transaction.card },
85 ]}
86 />
87 </CardBody>
88 </Card>
89
90 <Alert tone="warning" title="Dispute deadline">
91 A dispute must be opened within {data.deadlineDays} days of the payment.
92 </Alert>
93
94 {submitted ? (
95 <Alert tone="success" title="Dispute open">
96 The dispute is open. The bank will reply within {data.replyDays} working
97 days.
98 </Alert>
99 ) : (
100 <Card>
101 <CardHeader>
102 <CardTitle>Dispute details</CardTitle>
103 </CardHeader>
104 <CardBody>
105 <form onSubmit={handleSubmit}>
106 <Stack gap="4">
107 <FormField
108 label="Reason"
109 required
110 error={errors.reason}
111 >
112 <Select
113 placeholder="Select a reason"
114 options={data.reasons}
115 value={reason}
116 onValueChange={setReason}
117 />
118 </FormField>
119
120 <FormField
121 label="What happened"
122 required
123 helperText="Describe what happened in your own words."
124 error={errors.description}
125 >
126 <Textarea
127 rows={4}
128 value={description}
129 onChange={(event) => setDescription(event.target.value)}
130 placeholder="Describe what happened"
131 />
132 </FormField>
133
134 <Checkbox
135 checked={contacted}
136 onCheckedChange={setContacted}
137 error={errors.contacted}
138 >
139 I contacted the merchant first and could not solve it
140 </Checkbox>
141
142 <Stack flexDirection="row" justifyContent="flex-end">
143 <Button type="submit" variant="solid">
144 Submit dispute
145 </Button>
146 </Stack>
147 </Stack>
148 </form>
149 </CardBody>
150 </Card>
151 )}
152 </Stack>
153 );
154 }
4 get_component, get_component, get_component, get_component 2,467 115 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 2,947 201 $0.0000
6 list_files 8,847 25 $0.0000
8 write_file 1,088 2,718 $0.0000
9 list_tokens 2,742 26 $0.0000
10 write_file 314 895 $0.0000
11 check_code 977 881 $0.0000
12 write_file 1,029 988 $0.0000
13 check_code 1,017 872 $0.0000
14 write_file 1,088 938 $0.0000
15 check_code 962 883 $0.0000