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 21 counted, under 10 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 817 36 $0.0000 1 read_file 873 38 $0.0000 2 write_file 1,166 2,631 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 };
13
14 export default function Page() {
15 const accounts: Account[] = data.accounts as Account[];
16 const defaultAccountId: string = data.defaultAccountId;
17 const selected = accounts.find((a) => a.id === defaultAccountId) || accounts[0];
18
19 const [fromAccount, setFromAccount] = useState<Account>(selected!);
20 const [beneficiaryName, setBeneficiaryName] = useState("");
21 const [beneficiaryIban, setBeneficiaryIban] = useState("");
22 const [amount, setAmount] = useState<number | null>(null);
23 const [reference, setReference] = useState("");
24 const [error, setError] = useState<string | null>(null);
25 const [showConfirm, setShowConfirm] = useState(false);
26
27 const balance = fromAccount.available;
28 const currency = data.currency; // EUR
29
30 const handleSubmit = (e: React.FormEvent) => {
31 e.preventDefault();
32 if (!amount || amount > balance) {
33 setError("Amount exceeds available balance");
34 return;
35 }
36 setError(null);
37 setShowConfirm(true);
38 // reset form fields
39 setBeneficiaryName("");
40 setBeneficiaryIban("");
41 setAmount(null);
42 setReference("");
43 };
44
45 return (
46 <div style={css({ maxWidth: "400px", margin: "2rem auto" })}>
47 {/* Account selector with balance */}
48 <label style={css({ display: "flex", alignItems: "center", marginBottom: "1rem" })}>
49 From:
50 <select
51 value={fromAccount.id}
52 onChange={(e) =>
53 setFromAccount(accounts.find((a) => a.id === e.target.value) || accounts[0])
54 }
55 >
56 {accounts.map((acc) => (
57 <option key={acc.id} value={acc.id}>
58 {acc.name}
59 </option>
60 ))}
61 </select>
62 {balance} {currency}
63 </label>
64
65 <form onSubmit={handleSubmit} noValidate>
66 <div style={css({ marginBottom: "1rem" })}}>
67 <label>Beneficiary name</label>
68 <input
69 type="text"
70 value={beneficiaryName}
71 onChange={(e) => setBeneficiaryName(e.target.value)}
72 placeholder="e.g. John Doe"
73 required
74 />
75 </div>
76
77 <div style={css({ marginBottom: "1rem" })}}>
78 <label>Beneficiary IBAN</label>
79 <input
80 type="text"
81 value={beneficiaryIban}
82 onChange={(e) => setBeneficiaryIban(e.target.value)}
83 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
84 required
85 />
86 </div>
87
88 <div style={css({ marginBottom: "1rem" })}}>
89 <label>Amount</label>
90 <input
91 type="number"
92 value={amount !== null ? amount.toString() : ""}
93 onChange={(e) =>
94 setAmount(e.target.value ? Number(e.target.value) : null)
95 }
96 min={0}
97 step="0.01"
98 />
99 {error && (
100 <span style={{ color: "red", display: "block", marginTop: "0.5rem" }}>
101 {error}
102 </span>
103 )}
104 </div>
105
106 <div style={css({ marginBottom: "1rem" })}}>
107 <label>Reference (optional)</label>
108 <input
109 type="text"
110 value={reference}
111 onChange={(e) => setReference(e.target.value)}
112 placeholder="Optional reference"
113 />
114 </div>
115
116 <button type="submit" disabled={!amount || amount > balance || !beneficiaryName || !beneficiaryIban}>
117 Transfer
118 </button>
119 </form>
120
121 {showConfirm && (
122 <div style={css({ marginTop: "1rem", padding: "0.5rem", background: "#e6f7ff", borderRadius: "4px" })}>
123 <p>
124 Transfer of{" "}
125 {amount?.toFixed(2) ?? "0.00"} {currency} to{" "}
126 {beneficiaryName} submitted successfully!
127 </p>
128 </div>
129 )}
130 </div>
131 );
132 }
typecheck/TS2657 3 quality typecheck/TS1005 2 quality typecheck/TS1109 2 quality lint/syntax-error 1 quality render/build-failed 1 completeness typecheck/TS1382 1 quality