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 2,203 30 $0.0000 1 read_file 71 29 $0.0000 2 docs-list 244 35 $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 FormatDate,
15 FormatNumber,
16 FormField,
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 tx = data.transaction;
31
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(): Errors {
39 const next: Errors = {};
40 if (!reason) next.reason = "Select a reason.";
41 if (description.trim().length < 30)
42 next.description = "Write at least 30 characters.";
43 if (!contacted)
44 next.contacted = "You must confirm you contacted the merchant first.";
45 return next;
46 }
47
48 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
49 event.preventDefault();
50 const next = validate();
51 setErrors(next);
52 if (Object.keys(next).length === 0) setSubmitted(true);
53 }
54
55 return (
56 <Stack gap="6">
57 <Heading level={1}>Dispute a card payment</Heading>
58
59 <Card>
60 <CardHeader>
61 <CardTitle>Payment being disputed</CardTitle>
62 </CardHeader>
63 <CardBody>
64 <DataList
65 items={[
66 { label: "Merchant", value: tx.merchant },
67 { label: "Date", value: <FormatDate value={tx.date} dateStyle="long" /> },
68 {
69 label: "Amount",
70 value: (
71 <FormatNumber
72 value={tx.amount}
73 format="currency"
74 currency={tx.currency}
75 />
76 ),
77 },
78 { label: "Card", value: tx.card },
79 ]}
80 />
81 </CardBody>
82 </Card>
83
84 <Alert tone="warning" title={`Open within ${data.deadlineDays} days`}>
85 A dispute must be opened within {data.deadlineDays} days of the payment.
86 </Alert>
87
88 {submitted ? (
89 <Alert tone="success" title="Dispute open">
90 Your dispute is open. The bank will reply within {data.replyDays} working
91 days.
92 </Alert>
93 ) : (
94 <form onSubmit={handleSubmit}>
95 <Stack gap="4">
96 <FormField label="Reason" required error={errors.reason}>
97 <Select
98 placeholder="Select a reason"
99 options={data.reasons.map((r) => ({
100 label: r.label,
101 value: r.value,
102 }))}
103 value={reason}
104 onValueChange={setReason}
105 />
106 </FormField>
107
108 <FormField
109 label="What happened"
110 required
111 error={errors.description}
112 helperText="Describe what happened in your own words (at least 30 characters)."
113 >
114 <Textarea
115 rows={4}
116 value={description}
117 onChange={(e) => setDescription(e.target.value)}
118 />
119 </FormField>
120
121 <Checkbox
122 checked={contacted}
123 onCheckedChange={setContacted}
124 error={errors.contacted}
125 required
126 >
127 I contacted the merchant first and could not solve it
128 </Checkbox>
129
130 <Stack flexDirection="row" justifyContent="flex-end">
131 <Button>Submit dispute</Button>
132 </Stack>
133 </Stack>
134 </form>
135 )}
136 </Stack>
137 );
138 }
139
docs-show, docs-show, docs-show
4 docs-show, docs-show, docs-show 2,423 77 $0.0000
5 docs-show, docs-show, docs-show 2,958 71 $0.0000
6 docs-show, docs-show 1,622 49 $0.0000
7 list_files 1,742 143 $0.0000
11 write_file 170 1,053 $0.0000
12 write_file 1,119 922 $0.0000
13 stories-changed 977 82 $0.0000