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 3 counted, under 5 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
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 32 $0.0000 1 read_file 265 35 $0.0000 2 docs-list 252 36 $0.0000 3
Output cap The provider's default 4 import { css } from "styled-system/css";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardHeader,
11 CardTitle,
12 Checkbox,
13 DataList,
14 FormField,
15 Heading,
16 Select,
17 Stack,
18 Text,
19 Textarea,
20 FormatDate,
21 FormatNumber,
22 } from "@vektos/ds";
23 import data from "./fixture.json";
24
25 const tx = data.transaction;
26
27 export default function DisputePage() {
28 const [reason, setReason] = useState("");
29 const [description, setDescription] = useState("");
30 const [contacted, setContacted] = useState(false);
31 const [errors, setErrors] = useState<{
32 reason?: string;
33 description?: string;
34 contacted?: string;
35 }>({});
36 const [submitted, setSubmitted] = useState(false);
37
38 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
39 event.preventDefault();
40 const nextErrors: typeof errors = {};
41 if (!reason) {
42 nextErrors.reason = "Select a reason for the dispute.";
43 }
44 if (description.trim().length < 30) {
45 nextErrors.description =
46 "Describe what happened in at least 30 characters.";
47 }
48 if (!contacted) {
49 nextErrors.contacted =
50 "You must confirm you contacted the merchant first.";
51 }
52 setErrors(nextErrors);
53 if (Object.keys(nextErrors).length === 0) {
54 setSubmitted(true);
55 }
56 };
57
58 return (
59 <Stack gap="6" className={css({ maxWidth: "640px", margin: "0 auto", padding: "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: tx.merchant },
70 { label: "Date", value: <FormatDate value={tx.date} dateStyle="long" /> },
71 {
72 label: "Amount",
73 value: (
74 <FormatNumber
75 value={tx.amount}
76 format="currency"
77 currency={tx.currency}
78 />
79 ),
80 },
81 { label: "Card", value: tx.card },
82 ]}
83 />
84 </CardBody>
85 </Card>
86
87 <Alert tone="warning" title="Time limit">
88 A dispute must be opened within {data.deadlineDays} days of the payment.
89 </Alert>
90
91 {submitted ? (
92 <Alert tone="success" title="Dispute opened">
93 Your dispute is open. The bank will reply within {data.replyDays} working
94 days.
95 </Alert>
96 ) : (
97 <form onSubmit={handleSubmit} noValidate>
98 <Stack gap="4">
99 <FormField label="Reason" error={errors.reason}>
100 <Select
101 placeholder="Select a reason"
102 options={data.reasons.map((r) => ({
103 label: r.label,
104 value: r.value,
105 }))}
106 value={reason}
107 onValueChange={setReason}
108 />
109 </FormField>
110
111 <FormField label="What happened" error={errors.description}>
112 <Textarea
113 rows={4}
114 value={description}
115 onChange={(e) => setDescription(e.target.value)}
116 />
117 </FormField>
118
119 <Checkbox
120 checked={contacted}
121 onCheckedChange={setContacted}
122 error={errors.contacted}
123 >
124 I contacted the merchant first and could not solve it
125 </Checkbox>
126
127 <Stack flexDirection="row" justifyContent="flex-end">
128 <Button type="submit" variant="solid">
129 Submit dispute
130 </Button>
131 </Stack>
132 </Stack>
133 </form>
134 )}
135 </Stack>
136 );
137 }
138
`640px` is a raw length. Use a token.
typecheck/TS2769 0 quality docs-show, docs-show, docs-show, docs-show, docs-show, docs-show
4 list_files 5,111 49 $0.0000
5 docs-show, docs-show, docs-show, docs-show 118 94 $0.0000
6 docs-show, docs-show 2,589 189 $0.0000
7 list_files 1,889 1,511 $0.0000
9 write_file 105 1,357 $0.0000