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 23 32 $0.0000 1 read_file, get_guidelines 69 45 $0.0000 2 list_components, list_tokens 2,828 45 $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 { transaction, deadlineDays, replyDays, reasons } = data;
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 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
39 event.preventDefault();
40 const next: Errors = {};
41 if (!reason) {
42 next.reason = "Select a reason.";
43 }
44 if (description.trim().length < 30) {
45 next.description = "Describe what happened in at least 30 characters.";
46 }
47 if (!contacted) {
48 next.contacted = "You must confirm you contacted the merchant first.";
49 }
50 setErrors(next);
51 if (Object.keys(next).length === 0) {
52 setSubmitted(true);
53 }
54 };
55
56 return (
57 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="8">
58 <Heading level={1}>Dispute a card payment</Heading>
59
60 <Alert tone="warning" title="Dispute window">
61 A dispute must be opened within {deadlineDays} days of the payment.
62 </Alert>
63
64 <Card>
65 <CardHeader>
66 <CardTitle>Payment being disputed</CardTitle>
67 </CardHeader>
68 <CardBody>
69 <DataList
70 items={[
71 { label: "Merchant", value: transaction.merchant },
72 { label: "Date", value: <FormatDate value={transaction.date} dateStyle="long" /> },
73 {
74 label: "Amount",
75 value: <FormatNumber value={transaction.amount} format="currency" currency={transaction.currency} />,
76 },
77 { label: "Card", value: transaction.card },
78 ]}
79 />
80 </CardBody>
81 </Card>
82
83 {submitted ? (
84 <Alert tone="success" title="Dispute open">
85 The dispute is open. The bank will reply within {replyDays} working days.
86 </Alert>
87 ) : (
88 <Card>
89 <CardHeader>
90 <CardTitle>Dispute details</CardTitle>
91 </CardHeader>
92 <CardBody>
93 <form onSubmit={handleSubmit}>
94 <Stack gap="4">
95 <FormField label="Reason" error={errors.reason}>
96 <Select
97 placeholder="Select a reason"
98 options={reasons.map((r) => ({ label: r.label, value: r.value }))}
99 value={reason}
100 onValueChange={setReason}
101 />
102 </FormField>
103
104 <FormField
105 label="What happened"
106 helperText="At least 30 characters."
107 error={errors.description}
108 >
109 <Textarea
110 rows={4}
111 value={description}
112 onChange={(event) => setDescription(event.target.value)}
113 />
114 </FormField>
115
116 <Checkbox
117 checked={contacted}
118 onCheckedChange={setContacted}
119 error={errors.contacted}
120 >
121 I contacted the merchant first and could not solve it
122 </Checkbox>
123
124 <Button type="submit" variant="solid">
125 Submit dispute
126 </Button>
127 </Stack>
128 </form>
129 </CardBody>
130 </Card>
131 )}
132 </Stack>
133 );
134 }
135
list_tokens, list_tokens, list_tokens, list_tokens
4 get_component, get_component, get_component, get_component, get_component, get_component 788 115 $0.0000
5 get_component, get_component, get_component, get_component, get_component, get_component 3,856 136 $0.0000
6 get_component, get_component 5,623 56 $0.0000
9 write_file 58 2,938 $0.0000
10 check_code 3,020 847 $0.0000
11 write_file 883 949 $0.0000
12 check_code 1,024 851 $0.0000