Runs / card-dispute Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 38 counted, under 8 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 read_file 1,245 48 $0.0000 1 list_components 1,508 65 $0.0000 2 get_component 4,022 588 $0.0000 3
cdb5d9e77633
Output cap The provider's default 11
12 Select,
13 FormField,
14 Textarea,
15 Checkbox,
16 Button,
17 } from "@vektos/ds";
18
19 export default function DisputePage() {
20 const [reason, setReason] = useState<string | null>(null);
21 const [description, setDescription] = useState<string>("");
22 const [contactedMerchant, setContactedMerchant] = useState<boolean>(false);
23 const [submitted, setSubmitted] = useState<boolean>(false);
24 const [errors, setErrors] = useState<{
25 reason?: string;
26 description?: string;
27 contactedMerchant?: string;
28 }>({});
29
30 const reasons = data.reasons; // [{value, label}]
31
32 const handleSubmit = (
33 e: React.FormEvent
34 ) => {
35 e.preventDefault();
36 const newErrors: {
37 reason?: string;
38 description?: string;
39 contactedMerchant?: string;
40 } = {};
41
42 if (!reason) {
43 newErrors.reason = "Please select a reason";
44 }
45 if (description.length < 30) {
46 newErrors.description = "Description must be at least 30 characters";
47 }
48 if (!contactedMerchant) {
49 newErrors.contactedMerchant = "You must confirm you contacted the merchant first";
50 }
51
52 setErrors(newErrors);
53 if (Object.keys(newErrors).length === 0) {
54 setSubmitted(true);
55 }
56 };
57
58 if (submitted) {
59 return (
60 <div>
61 <Text>Your dispute is now open.</Text>
62 <Text>
63 The bank will reply within{" "}
64 {data.replyDays} working days.
65 </Text>
66 </div>
67 );
68 }
69
70 return (
71 <div>
72 <h2>Dispute a card payment</h2>
73
74 {/* Payment details */}
75 <Card>
76 <CardHeader>
77 <CardTitle>Payment details</CardTitle>
78 </CardHeader>
79 <CardBody>
80 <DataList>
81 <DataList.Row>
82 <DataList.Label>Merchant</DataList.Label>
83 <DataList.Value>{data.transaction.merchant}</DataList.Value>
84 </DataList.Row>
85 <DataList.Row>
86 <DataList.Label>Date</DataList.Label>
87 <DataList.Value>
88 {new Date(data.transaction.date).toLocaleDateString()}
89 </DataList.Value>
90 </DataList.Row>
91 <DataList.Row>
92 <DataList.Label>Amount</DataList.Label>
93 <DataList.Value>
94 {data.transaction.amount} {data.transaction.currency}
95 </DataList.Value>
96 </DataList.Row>
97 <DataList.Row>
98 <DataList.Label>Card</DataList.Label>
99 <DataList.Value>{data.transaction.card}</DataList.Value>
100 </DataList.Row>
101 </DataList>
102 </CardBody>
103 </Card>
104
105 {/* Deadline */}
106 <p>
107 A dispute must be opened within{" "}
108 {data.deadlineDays} days of the payment.
109 </p>
110
111 {/* Form */}
112 <form onSubmit={handleSubmit}>
113 {/* Reason */}
114 <FormField
115 label="Reason"
116 error={errors.reason}
117 helperText="Select a reason for the dispute"
118 >
119 <Select
120 value={reason ?? ""}
121 onValueChange={setReason}
122 placeholder="Select a reason"
123 options={
124 reasons.map((r) => ({
125 label: r.label,
126 value: r.value,
127 }))
128 }
129 required
130 />
131 </FormField>
132
133 {/* What happened */}
134 <FormField
135 label="What happened"
136 error={errors.description}
137 helperText="Describe what happened in your own words"
138 >
139 <Textarea
140 rows={4}
141 placeholder="Enter a description..."
142 value={description}
143 onChange={e =>
144 setDescription((e.target as HTMLTextAreaElement).value)
145 }
146 />
147 </FormField>
148
149 {/* I contacted the merchant first */}
150 <FormField
151 label="I contacted the merchant first and could not solve it"
152 error={errors.contactedMerchant}
153 helperText="Confirm you've tried to resolve with the merchant first"
154 >
155 <Checkbox
156 checked={contactedMerchant}
157 onCheckedChange={setContactedMerchant}
158 required
159 >
160 I contacted the merchant first and could not solve it
161 </Checkbox>
162 </FormField>
163
164 <Button type="submit">Submit dispute</Button>
165 </form>
166 </div>
167 );
168 }
Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'.
page.tsx:86:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:86:46 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:87:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:89:26 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:90:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:91:23 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:92:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:92:48 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:93:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:95:26 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:96:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:97:23 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:98:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:98:46 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:99:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:99:65 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:100:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. typecheck/TS2304 6 quality lint/react(jsx-no-undef) 3 quality lint/eslint(no-unused-vars) 1 quality render/runtime-error 1 completeness typecheck/TS2322 1 quality page.tsx:129:13 Type '{ value: string; onValueChange: Dispatch<SetStateAction<string | null>>; placeholder: string; options: { label: string; value: string; }[]; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. Every run that broke typecheck/TS2322 4 get_component 1,817 37 $0.0000
5 list_files 2,718 1,420 $0.0000
6 write_file 4,157 1,151 $0.0000