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 4 counted, under 3 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, get_guidelines, list_components, list_tokens 45 85 $0.0000 1 read_file 7,221 30 $0.0000 2 list_files 291 27 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Checkbox,
13 DataList,
14 FormField,
15 FormatDate,
16 FormatNumber,
17 Heading,
18 Select,
19 Stack,
20 Textarea,
21 } from "@vektos/ds";
22
23 export default function Page() {
24 const { transaction, deadlineDays, replyDays, reasons } = data;
25
26 const [reason, setReason] = useState("");
27 const [description, setDescription] = useState("");
28 const [contacted, setContacted] = useState(false);
29 const [errors, setErrors] = useState<{
30 reason?: string;
31 description?: string;
32 contacted?: string;
33 }>({});
34 const [submitted, setSubmitted] = useState(false);
35
36 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
37 event.preventDefault();
38 const nextErrors: typeof errors = {};
39 if (!reason) {
40 nextErrors.reason = "Select a reason.";
41 }
42 if (description.trim().length < 30) {
43 nextErrors.description = "Write at least 30 characters.";
44 }
45 if (!contacted) {
46 nextErrors.contacted = "You must confirm you contacted the merchant first.";
47 }
48 setErrors(nextErrors);
49 if (Object.keys(nextErrors).length === 0) {
50 setSubmitted(true);
51 }
52 }
53
54 return (
55 <Stack gap="6">
56 <Heading level={1}>Dispute a card payment</Heading>
57
58 <Card>
59 <CardHeader>
60 <CardTitle>Payment being disputed</CardTitle>
61 </CardHeader>
62 <CardBody>
63 <DataList
64 items={[
65 { label: "Merchant", value: transaction.merchant },
66 {
67 label: "Date",
68 value: <FormatDate value={transaction.date} dateStyle="long" />,
69 },
70 {
71 label: "Amount",
72 value: (
73 <FormatNumber
74 value={transaction.amount}
75 format="currency"
76 currency={transaction.currency}
77 />
78 ),
79 },
80 { label: "Card", value: transaction.card },
81 ]}
82 />
83 </CardBody>
84 </Card>
85
86 <Alert tone="warning" title="Time limit">
87 A dispute must be opened within {deadlineDays} days of the payment.
88 </Alert>
89
90 {submitted ? (
91 <Alert tone="success" title="Dispute open">
92 The bank will reply within {replyDays} working days.
93 </Alert>
94 ) : (
95 <form onSubmit={handleSubmit}>
96 <Stack gap="4">
97 <FormField
98 label="Reason"
99 required
100 error={errors.reason}
101 >
102 <Select
103 placeholder="Select a reason"
104 options={reasons.map((r) => ({
105 label: r.label,
106 value: r.value,
107 }))}
108 value={reason}
109 onValueChange={setReason}
110 />
111 </FormField>
112
113 <FormField
114 label="What happened"
115 required
116 error={errors.description}
117 >
118 <Textarea
119 rows={4}
120 value={description}
121 onChange={(e) => setDescription(e.target.value)}
122 />
123 </FormField>
124
125 <Checkbox
126 checked={contacted}
127 onCheckedChange={setContacted}
128 error={errors.contacted}
129 required
130 >
131 I contacted the merchant first and could not solve it
132 </Checkbox>
133
134 <Button type="submit" variant="solid">
135 Submit dispute
136 </Button>
137 </Stack>
138 </form>
139 )}
140 </Stack>
141 );
142 }
143 ```
144
145 Wait: FormField required prop may not be typed? It accepts HTML props, required boolean okay. But FormField underlying element? required on div is not standard but React allows. The example uses it, so okay.
146
147 Checkbox required prop typed boolean. Good.
148
149 Select value/onValueChange typed. Good.
150
151 Now check_code.<|end|><|start|><|start|>assistant to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
152 "use client";
153
154 import { useState } from "react";
155 import data from "./fixture.json";
156 import {
157 Alert,
158 Button,
159 Card,
160 CardBody,
161 CardHeader,
162 CardTitle,
163 Checkbox,
164 DataList,
165 FormField,
166 FormatDate,
167 FormatNumber,
168 Heading,
169 Select,
170 Stack,
171 Textarea,
172 } from "@vektos/ds";
173
174 export default function Page() {
175 const { transaction, deadlineDays, replyDays, reasons } = data;
176
177 const [reason, setReason] = useState("");
178 const [description, setDescription] = useState("");
179 const [contacted, setContacted] = useState(false);
180 const [errors, setErrors] = useState<{
181 reason?: string;
182 description?: string;
183 contacted?: string;
184 }>({});
185 const [submitted, setSubmitted] = useState(false);
186
187 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
188 event.preventDefault();
189 const nextErrors: typeof errors = {};
190 if (!reason) {
191 nextErrors.reason = "Select a reason.";
192 }
193 if (description.trim().length < 30) {
194 nextErrors.description = "Write at least 30 characters.";
195 }
196 if (!contacted) {
197 nextErrors.contacted = "You must confirm you contacted the merchant first.";
198 }
199 setErrors(nextErrors);
200 if (Object.keys(nextErrors).length === 0) {
201 setSubmitted(true);
202 }
203 }
204
205 return (
206 <Stack gap="6">
207 <Heading level={1}>Dispute a card payment</Heading>
208
209 <Card>
210 <CardHeader>
211 <CardTitle>Payment being disputed</CardTitle>
212 </CardHeader>
213 <CardBody>
214 <DataList
215 items={[
216 { label: "Merchant", value: transaction.merchant },
217 {
218 label: "Date",
219 value: <FormatDate value={transaction.date} dateStyle="long" />,
220 },
221 {
222 label: "Amount",
223 value: (
224 <FormatNumber
225 value={transaction.amount}
226 format="currency"
227 currency={transaction.currency}
228 />
229 ),
230 },
231 { label: "Card", value: transaction.card },
232 ]}
233 />
234 </CardBody>
235 </Card>
236
237 <Alert tone="warning" title="Time limit">
238 A dispute must be opened within {deadlineDays} days of the payment.
239 </Alert>
240
241 {submitted ? (
242 <Alert tone="success" title="Dispute open">
243 The bank will reply within {replyDays} working days.
244 </Alert>
245 ) : (
246 <form onSubmit={handleSubmit}>
247 <Stack gap="4">
248 <FormField
249 label="Reason"
250 required
251 error={errors.reason}
252 >
253 <Select
254 placeholder="Select a reason"
255 options={reasons.map((r) => ({
256 label: r.label,
257 value: r.value,
258 }))}
259 value={reason}
260 onValueChange={setReason}
261 />
262 </FormField>
263
264 <FormField
265 label="What happened"
266 required
267 error={errors.description}
268 >
269 <Textarea
270 rows={4}
271 value={description}
272 onChange={(e) => setDescription(e.target.value)}
273 />
274 </FormField>
275
276 <Checkbox
277 checked={contacted}
278 onCheckedChange={setContacted}
279 error={errors.contacted}
280 required
281 >
282 I contacted the merchant first and could not solve it
283 </Checkbox>
284
285 <Button type="submit" variant="solid">
286 Submit dispute
287 </Button>
288 </Stack>
289 </form>
290 )}
291 </Stack>
292 );
293 }
294
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 write_file 19,039 3,849 $0.0000
5 check_code 3,904 804 $0.0000
7 check_code 2,079 1,061 $0.0000