Runs / transfer-form Batch Runs from different design-system versions should not be compared.
app/page.tsx As the agent left it; marked lines broke a rule.
Violations 15 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 read_file 817 46 $0.0000 1 write_file 1,118 2,852 $0.0000 2 stop 3,997 29 $0.0000
cdb5d9e77633
Output cap 20,000 tokens a step 12 };
13
14 export default function Page() {
15 const accounts: Account[] = data.accounts;
16 const [selectedId, setSelectedId] = React.useState<string | null>(
17 data.defaultAccountId
18 );
19 const [beneficiaryName, setBeneficiaryName] = React.useState("");
20 const [beneficiaryIban, setBeneficiaryIban] = React.useState("");
21 const [amount, setAmount] = React.useState("");
22 const [reference, setReference] = React.useState("");
23 const [error, setError] = React.useState<string | null>(null);
24 const [submitted, setSubmitted] = React.useState<
25 { beneficiary: string; amount: number } | null
26 >(null);
27
28 const selectedAccount = accounts.find((a) => a.id === selectedId) ?? accounts[0];
29 const balance = selectedAccount?.available ?? 0;
30
31 const handleSubmit = (e: React.FormEvent) => {
32 e.preventDefault();
33 const amt = parseFloat(amount);
34 if (isNaN(amt) || amt > balance) {
35 setError("Amount exceeds balance");
36 return;
37 }
38 setError(null);
39 setSubmitted({ beneficiary: beneficiaryName, amount: amt });
40 // reset form
41 setBeneficiaryName("");
42 setBeneficiaryIban("");
43 setAmount("");
44 setReference("");
45 };
46
47 return (
48 <main
49 className={css({
50 maxWidth: 400,
51 margin: "2rem auto",
52 })}
53 >
54 <h1>SEPA Transfer</h1>
55
56 {/* Account selection */}
57 <label htmlFor="account-select">From account:</label>
58 <select
59 id="account-select"
60 value={selectedId ?? ""}
61 onChange={(e) => setSelectedId(e.target.value as string)}
62 className={css({
63 marginBottom: 1,
64 width: "100%",
65 })}
66 >
67 <option value="">Select account</option>
68 {accounts.map((acc) => (
69 <option key={acc.id} value={acc.id}>
70 {acc.name} – {acc.iban}
71 </option>
72 ))}
73 </select>
74
75 {/* Balance display */}
76 {selectedId && (
77 <p
78 className={css({
79 margin: 0.5,
80 fontSize: 14,
81 color: "var(--muted)",
82 })}
83 >
84 Available balance: {balance.toFixed(2)} {data.currency}
85 </p>
86 )}
87
88 {/* Form */}
89 <form onSubmit={handleSubmit} className={css({ marginTop: 1 })}>
90 {error && (
91 <p
92 className={css({
93 color: "red",
94 marginBottom: 1,
95 })}
96 >
97 {error}
98 </p>
99 )}
100
101 <label htmlFor="beneficiary-name">Beneficiary name:</label>
102 <input
103 id="beneficiary-name"
104 value={beneficiaryName}
105 onChange={(e) => setBeneficiaryName(e.target.value)}
106 placeholder="e.g. John Doe"
107 className={css({
108 width: "100%",
109 marginBottom: 1,
110 padding: 0.5,
111 borderRadius: 3,
112 border: "1px solid #ccc",
113 })}
114 />
115
116 <label htmlFor="beneficiary-iban">Beneficiary IBAN:</label>
117 <input
118 id="beneficiary-iban"
119 value={beneficiaryIban}
120 onChange={(e) => setBeneficiaryIban(e.target.value)}
121 placeholder="e.g. IT60 X054 ..."
122 className={css({
123 width: "100%",
124 marginBottom: 1,
125 padding: 0.5,
126 borderRadius: 3,
127 border: "1px solid #ccc",
128 })}
129 />
130
131 <label htmlFor="amount">Amount:</label>
132 <input
133 id="amount"
134 type="number"
135 value={amount}
136 onChange={(e) => setAmount(e.target.value)}
137 placeholder={selectedId ? `max ${balance.toFixed(2)}` : ""}
138 className={css({
139 width: "100%",
140 marginBottom: 1,
141 padding: 0.5,
142 borderRadius: 3,
143 border: "1px solid #ccc",
144 color: error ? "red" : undefined,
145 })}
146 />
147
148 <label htmlFor="reference">Reference (optional):</label>
149 <input
150 id="reference"
151 value={reference}
152 onChange={(e) => setReference(e.target.value)}
153 placeholder="Optional reference"
154 className={css({
155 width: "100%",
156 marginBottom: 1,
157 padding: 0.5,
158 borderRadius: 3,
159 border: "1px solid #ccc",
160 })}
161 />
162
163 <button type="submit" disabled={!selectedId || (!!amount && parseFloat(amount) > balance) || !!error}>
164 {submitted ? "Sent" : "Transfer"}
165 </button>
166 </form>
167
168 {submitted && (
169 <div
170 className={css({
171 marginTop: 1,
172 padding: 1,
173 background: "#e6f7ff",
174 borderRadius: 3,
175 border: "1px solid #b3e5fc",
176 })}
177 >
178 <p>
179 Confirmation:{" "}
180 {submitted.amount} {data.currency} to{" "}
181 {submitted.beneficiary}
182 </p>
183 </div>
184 )}
185 </main>
186 );
187 }
app/page.tsx:173:25
· #e6f7ff
`#e6f7ff` is a raw color. Use a semantic color token.
app/page.tsx:175:21 · 1px solid #b3e5fc `1px solid #b3e5fc` is a raw color. Use a semantic color token. raw-values/raw-length 1 design-system