Runs / transfer-form Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 10 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 get_guidelines, list_components, list_files 155 55 $0.0000 1 read_file 4,994 32 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component 281 135 $0.0000
cdb5d9e77633
Output cap The provider's default 12 CardTitle,
13 FormField,
14 FormatNumber,
15 Heading,
16 Input,
17 NumberInput,
18 Select,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 type Account = (typeof data.accounts)[number];
25
26 export default function Page() {
27 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
28 const account: Account =
29 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
30
31 const [beneficiary, setBeneficiary] = useState("");
32 const [iban, setIban] = useState("");
33 const [amount, setAmount] = useState<number | null>(null);
34 const [reference, setReference] = useState("");
35 const [confirmation, setConfirmation] = useState<{
36 amount: number;
37 beneficiary: string;
38 } | null>(null);
39
40 const amountError =
41 amount !== null && amount > account.available
42 ? "Amount exceeds the available balance."
43 : undefined;
44
45 const canSubmit =
46 beneficiary.trim().length > 0 &&
47 iban.trim().length > 0 &&
48 amount !== null &&
49 amount > 0 &&
50 !amountError;
51
52 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
53 event.preventDefault();
54 if (!canSubmit || amount === null) return;
55 setConfirmation({ amount, beneficiary: beneficiary.trim() });
56 }
57
58 return (
59 <div className="vektos">
60 <Stack
61 gap="6"
62 maxWidth="lg"
63 marginInline="auto"
64 marginBlock="8"
65 width="full"
66 >
67 <Heading level={1}>SEPA transfer</Heading>
68
69 {confirmation && (
70 <Alert tone="success" title="Transfer sent">
71 <Text as="span">
72 <FormatNumber
73 value={confirmation.amount}
74 format="currency"
75 currency={data.currency}
76 />{" "}
77 sent to {confirmation.beneficiary}.
78 </Text>
79 </Alert>
80 )}
81
82 <Card>
83 <CardHeader>
84 <CardTitle>Transfer details</CardTitle>
85 </CardHeader>
86 <form onSubmit={handleSubmit}>
87 <CardBody>
88 <Stack gap="4">
89 <FormField label="Pay from">
90 <Select
91 options={data.accounts.map((a) => ({
92 label: a.name,
93 value: a.id,
94 }))}
95 value={accountId}
96 onValueChange={setAccountId}
97 placeholder="Choose an account"
98 />
99 </FormField>
100
101 <Text tone="muted" size="sm">
102 Available balance:{" "}
103 <FormatNumber
104 value={account.available}
105 format="currency"
106 currency={data.currency}
107 />
108 </Text>
109
110 <FormField label="Beneficiary name" required>
111 <Input
112 value={beneficiary}
113 onChange={(e) => setBeneficiary(e.target.value)}
114 placeholder="Name of the recipient"
115 />
116 </FormField>
117
118 <FormField label="Beneficiary IBAN" required>
119 <Input
120 value={iban}
121 onChange={(e) => setIban(e.target.value)}
122 placeholder="IT00 X000 0000 0000 0000 0000 000"
123 mono={false}
124 />
125 </FormField>
126
127 <FormField
128 label="Amount"
129 required
130 error={amountError}
131 helperText={
132 amountError
133 ? undefined
134 : "Amount in the account currency."
135 }
136 >
137 <NumberInput
138 value={amount}
139 onValueChange={setAmount}
140 format="currency"
141 currency={data.currency}
142 fractionDigits={2}
143 min={0.01}
144 showSteppers={false}
145 />
146 </FormField>
147
148 <FormField label="Reference (optional)">
149 <Input
150 value={reference}
151 onChange={(e) => setReference(e.target.value)}
152 placeholder="Invoice number, note…"
153 />
154 </FormField>
155 </Stack>
156 </CardBody>
157 <CardFooter>
158 <Button type="submit" disabled={!canSubmit}>
159 Send transfer
160 </Button>
161 </CardFooter>
162 </form>
163 </Card>
164 </Stack>
165 </div>
166 );
167 }
168 ```
169
170 Wait Input doesn't have `mono` prop? Text has mono, Input maybe not. I added mono={false} to Input; Input props only size + HTML. `mono` not a valid prop for Input -> type error. Remove. Also Input onChange event type fine.
171
172 CardFooter might expect buttons; okay.
173
174 `<Text mono>`? no.
175
176 Also `required` on FormField? FormField props doesn't include required? It accepts underlying HTML element props (div?) Actually FormField "Also accepts props of underlying HTML element" likely div. required may be invalid/meaningless but type maybe allowed? Better remove required from FormField to avoid type errors? FormField examples use `required` in examples: "WithInput with `required`." So required prop probably accepted via underlying? It's a div, required not standard for div. Hmm examples say Required with `required` maybe FormField supports required? The props table doesn't list required, but "Also accepts props of underlying HTML element" underlying might be fieldset? Not sure. To be safe, remove required attributes; not essential. But examples use required. Could keep. Type check will tell. Let's run check_code.<|end|><|start|>assis to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
177 "use client";
178
179 import { useState } from "react";
180 import data from "./fixture.json";
181 import {
182 Alert,
183 Button,
184 Card,
185 CardBody,
186 CardFooter,
187 CardHeader,
188 CardTitle,
189 FormField,
190 FormatNumber,
191 Heading,
192 Input,
193 NumberInput,
194 Select,
195 Stack,
196 Text,
197 } from "@vektos/ds";
198 import { css } from "styled-system/css";
199
200 type Account = (typeof data.accounts)[number];
201
202 export default function Page() {
203 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
204 const account: Account =
205 data.accounts.find((a) => a.id === accountId) ?? data.accounts[0];
206
207 const [beneficiary, setBeneficiary] = useState("");
208 const [iban, setIban] = useState("");
209 const [amount, setAmount] = useState<number | null>(null);
210 const [reference, setReference] = useState("");
211 const [confirmation, setConfirmation] = useState<{
212 amount: number;
213 beneficiary: string;
214 } | null>(null);
215
216 const amountError =
217 amount !== null && amount > account.available
218 ? "Amount exceeds the available balance."
219 : undefined;
220
221 const canSubmit =
222 beneficiary.trim().length > 0 &&
223 iban.trim().length > 0 &&
224 amount !== null &&
225 amount > 0 &&
226 !amountError;
227
228 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
229 event.preventDefault();
230 if (!canSubmit || amount === null) return;
231 setConfirmation({ amount, beneficiary: beneficiary.trim() });
232 }
233
234 return (
235 <div className="vektos">
236 <Stack
237 gap="6"
238 maxWidth="lg"
239 marginInline="auto"
240 marginBlock="8"
241 width="full"
242 >
243 <Heading level={1}>SEPA transfer</Heading>
244
245 {confirmation && (
246 <Alert tone="success" title="Transfer sent">
247 <Text as="span">
248 <FormatNumber
249 value={confirmation.amount}
250 format="currency"
251 currency={data.currency}
252 />{" "}
253 sent to {confirmation.beneficiary}.
254 </Text>
255 </Alert>
256 )}
257
258 <Card>
259 <CardHeader>
260 <CardTitle>Transfer details</CardTitle>
261 </CardHeader>
262 <form onSubmit={handleSubmit}>
263 <CardBody>
264 <Stack gap="4">
265 <FormField label="Pay from">
266 <Select
267 options={data.accounts.map((a) => ({
268 label: a.name,
269 value: a.id,
270 }))}
271 value={accountId}
272 onValueChange={setAccountId}
273 placeholder="Choose an account"
274 />
275 </FormField>
276
277 <Text tone="muted" size="sm">
278 Available balance:{" "}
279 <FormatNumber
280 value={account.available}
281 format="currency"
282 currency={data.currency}
283 />
284 </Text>
285
286 <FormField label="Beneficiary name" required>
287 <Input
288 value={beneficiary}
289 onChange={(e) => setBeneficiary(e.target.value)}
290 placeholder="Name of the recipient"
291 />
292 </FormField>
293
294 <FormField label="Beneficiary IBAN" required>
295 <Input
296 value={iban}
297 onChange={(e) => setIban(e.target.value)}
298 placeholder="IT00 X000 0000 0000 0000 0000 000"
299 />
300 </FormField>
301
302 <FormField
303 label="Amount"
304 required
305 error={amountError}
306 helperText={
307 amountError
308 ? undefined
309 : "Amount in the account currency."
310 }
311 >
312 <NumberInput
313 value={amount}
314 onValueChange={setAmount}
315 format="currency"
316 currency={data.currency}
317 fractionDigits={2}
318 min={0.01}
319 showSteppers={false}
320 />
321 </FormField>
322
323 <FormField label="Reference (optional)">
324 <Input
325 value={reference}
326 onChange={(e) => setReference(e.target.value)}
327 placeholder="Invoice number, note…"
328 />
329 </FormField>
330 </Stack>
331 </CardBody>
332 <CardFooter>
333 <Button type="submit" disabled={!canSubmit}>
334 Send transfer
335 </Button>
336 </CardFooter>
337 </form>
338 </Card>
339 </Stack>
340 </div>
341 );
342 }
343
';' expected.
render/build-failed 1 completeness typecheck/TS1160 1 quality 3 get_component, get_component, get_component, get_component, get_component, get_component, get_component 4,790 220 $0.0000
4 list_tokens, get_component, get_component 6,115 73 $0.0000
5 read_file 2,350 187 $0.0000
6 list_tokens 254 2,649 $0.0000
7 write_file 2,945 2,243 $0.0000
8 check_code 2,269 1,004 $0.0000