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 20 counted, under 9 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 817 59 $0.0000 1 write_file 1,131 2,045 $0.0000 2 stop 3,203 34 $0.0000
cdb5d9e77633
Output cap 20,000 tokens a step 11 FormMessage,
12 } from "@vektos/ds";
13
14 interface Account {
15 id: string;
16 name: string;
17 iban: string;
18 available: number;
19 }
20
21 interface FormState {
22 selectedAccountId: string;
23 beneficiaryName: string;
24 beneficiaryIban: string;
25 amount: number;
26 reference: string | undefined;
27 error: string | null;
28 submitted: boolean;
29 confirmationAmount: number | null;
30 confirmationBeneficiary: string | null;
31 }
32
33 const initialState: FormState = {
34 selectedAccountId: data.defaultAccountId,
35 beneficiaryName: "",
36 beneficiaryIban: "",
37 amount: 0,
38 reference: undefined,
39 error: null,
40 submitted: false,
41 confirmationAmount: null,
42 confirmationBeneficiary: null,
43 };
44
45 export default function Home() {
46 const [state, setState] = React.useState<FormState>(initialState);
47
48 // compute selected account
49 const selectedAccount = data.accounts.find((a) => a.id === state.selectedAccountId)!;
50 const balance = selectedAccount.available;
51
52 // handle account change
53 const handleAccountChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
54 const id = e.target.value;
55 setState((s) => ({ ...s, selectedAccountId: id, error: null }));
56 };
57
58 // handle input changes
59 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
60 const { name, value } = e.target;
61 let val = value;
62 if (name === "amount") {
63 const num = parseFloat(value);
64 val = isNaN(num) ? 0 : num;
65 }
66 setState((s) => ({
67 ...s,
68 [name]: val as any,
69 error: null,
70 }));
71 };
72
73 // handle reference change (optional)
74 const handleReferenceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
75 setState((s) => ({ ...s, reference: e.target.value || undefined, error: null }));
76 };
77
78 // form submit
79 const handleSubmit = async (e: React.FormEvent) => {
80 e.preventDefault();
81 const { amount, selectedAccountId, beneficiaryName, beneficiaryIban, reference } = state;
82 const account = data.accounts.find((a) => a.id === selectedAccountId)!;
83 if (amount > account.available) {
84 setState((s) => ({ ...s, error: "Insufficient funds", submitted: false }));
85 return;
86 }
87 // simulate successful submit
88 await new Promise((r) => setTimeout(r, 800));
89 setState({
90 ...initialState,
91 submitted: true,
92 confirmationAmount: amount,
93 confirmationBeneficiary: beneficiaryName,
94 });
95 };
96
97 if (state.submitted) {
98 return (
99 <div className={css({ marginTop: "2rem", fontWeight: "medium" })}>
100 <p>
101 SEPA transfer of{" "}{state.confirmationAmount!.toFixed(2)} {data.currency}
102 to {state.confirmationBeneficiary!} was successful!
103 </p>
104 <Button onClick={() => setState(initialState)}>Make another transfer</Button>
105 </div>
106 );
107 }
108
109 return (
110 <main className={css({ maxWidth: "600px", margin: "2rem auto" })}>
111 <h1>SEPA Transfer</h1>
112
113 <form onSubmit={handleSubmit} noValidate>
114 {/* From account */}
115 <Label htmlFor="account">From account</Label>
116 <Select
117 id="account"
118 value={state.selectedAccountId}
119 onChange={handleAccountChange}
120 placeholder="Select account"
121 >
122 {data.accounts.map((acc) => (
123 <Option key={acc.id} value={acc.id}>
124 {acc.name}
125 </Option>
126 ))}
127 </Select>
128
129 {/* Available balance */}
130 {selectedAccount && (
131 <p className={css({ margin: "0.5rem 0", color: "muted" })}>
132 Available balance:{" "}
133 {selectedAccount.available.toFixed(2)} {data.currency}
134 </p>
135 )}
136
137 {/* Beneficiary name */}
138 <Label htmlFor="beneficiaryName">Beneficiary name</Label>
139 <Input
140 id="beneficiaryName"
141 name="beneficiaryName"
142 type="text"
143 value={state.beneficiaryName}
144 onChange={handleInputChange}
145 placeholder="e.g. John Doe"
146 required
147 />
148
149 {/* Beneficiary IBAN */}
150 <Label htmlFor="beneficiaryIban">Beneficiary IBAN</Label>
151 <Input
152 id="beneficiaryIban"
153 name="beneficiaryIban"
154 type="text"
155 value={state.beneficiaryIban}
156 onChange={handleInputChange}
157 placeholder="e.g. IT60X0542811101000000123456"
158 required
159 />
160
161 {/* Amount */}
162 <Label htmlFor="amount">Amount</Label>
163 <Input
164 id="amount"
165 name="amount"
166 type="number"
167 step="0.01"
168 value={state.amount}
169 onChange={handleInputChange}
170 placeholder="0.00"
171 required
172 />
173 {state.error && (
174 <p className={css({ color: "error", marginTop: "0.5rem" })}>
175 {state.error}
176 </p>
177 )}
178
179 {/* Optional reference */}
180 <Label htmlFor="reference">Reference (optional)</Label>
181 <Input
182 id="reference"
183 name="reference"
184 type="text"
185 value={state.reference ?? ""}
186 onChange={handleReferenceChange}
187 placeholder="Optional reference"
188 />
189
190 <Button type="submit" disabled={state.error ? true : undefined}>
191 Send SEPA transfer
192 </Button>
193 </form>
194 </main>
195 );
196 }
· 2rem
`2rem` is a raw length. Use a token.
typecheck/TS2322 2 quality page.tsx:64:7 Type 'number' is not assignable to type 'string'. page.tsx:117:11 Type '{ id: string; value: string; onChange: (e: ChangeEvent<HTMLSelectElement, Element>) => void; placeholder: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. Every run that broke typecheck/TS2322 lint/typescript(no-unsafe-type-assertion) 1 quality typecheck/TS2769 0 quality