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 7 counted, under 6 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 3,840 28 $0.0000 1 read_file 3,888 38 $0.0000 2 docs-list 2,085 108 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 } from "@vektos/ds";
13
14 import data from "./fixture.json";
15
16 type Account = {
17 id: string;
18 name: string;
19 iban: string;
20 available: number;
21 };
22
23 export const SepaTransfer = () => {
24 const defaultAccountId = data.defaultAccountId;
25 const [selectedAccountId, setSelectedAccountId] = useState<string>(defaultAccountId);
26 const [beneficiaryName, setBeneficiaryName] = useState<string>("");
27 const [beneficiaryIban, setBeneficiaryIban] = useState<string>("");
28 const [amount, setAmount] = useState<number | null>(null);
29 const [reference, setReference] = useState<string>("");
30 const [error, setError] = useState<string | null>(null);
31 const [submitted, setSubmitted] = useState<{ amount: number; beneficiary: string } | null>(null);
32
33 const accounts: Account[] = data.accounts.map((a) => ({
34 id: a.id,
35 name: a.name,
36 iban: a.iban,
37 available: a.available,
38 }));
39
40 const selectedAccount = accounts.find((a) => a.id === selectedAccountId)!;
41 const availableBalance = selectedAccount.available;
42
43 const handleSubmit = (e: React.FormEvent) => {
44 e.preventDefault();
45 if (amount !== null && amount > availableBalance) {
46 setError("Amount exceeds available balance");
47 return;
48 }
49 setError(null);
50 setSubmitted({ amount, beneficiary: beneficiaryName });
51 // reset form
52 setBeneficiaryName("");
53 setBeneficiaryIban("");
54 setAmount(null);
55 setReference("");
56 };
57
58 return (
59 <Stack spacing={4} direction="column" maxWidth="400px">
60 <Stack gap={2} align="center">
61 <h2>SEPA Transfer</h2>
62 </Stack>
63
64 {/* From account selector */}
65 <FormField
66 label="From account"
67 control={<Select
68 value={selectedAccountId}
69 onValueChange={setSelectedAccountId}
70 placeholder="Select account"
71 >}
72 {accounts.map((ac) => (
73 <Select.Item key={ac.id} value={ac.id}>
74 {ac.name}
75 </Select.Item>
76 ))}
77 </FormField>
78
79 {/* Available balance display */}
80 <Stack direction="row" justify="space-between">
81 <Text>Available balance: {selectedAccount.available.toFixed(2)} EUR</Text>
82 </Stack>
83
84 {/* Beneficiary name */}
85 <FormField label="Beneficiary name">
86 <Input
87 placeholder="Enter beneficiary name"
88 value={beneficiaryName}
89 onChange={(e) => setBeneficiaryName(e.target.value)}
90 />
91 </FormField>
92
93 {/* Beneficiary IBAN */}
94 <FormField label="Beneficiary IBAN">
95 <Input
96 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
97 value={beneficiaryIban}
98 onChange={(e) => setBeneficiaryIban(e.target.value)}
99 />
100 </FormField>
101
102 {/* Amount */}
103 <FormField label="Amount (EUR)">
104 <Input
105 type="number"
106 min={0}
107 step={0.01}
108 value={amount !== null ? amount.toString() : ""}
109 onChange={(e) => {
110 const val = e.target.valueAsNumber;
111 setAmount(val ?? null);
112 // validate against balance instantly
113 if (val !== null && val > availableBalance) {
114 setError("Amount exceeds available balance");
115 } else {
116 setError(null);
117 }
118 }}
119 />
120 {error && <Alert tone="danger">{error}</Alert>}
121 </FormField>
122
123 {/* Optional reference */}
124 <FormField label="Reference (optional)">
125 <Input
126 placeholder="e.g. Invoice #123"
127 value={reference}
128 onChange={(e) => setReference(e.target.value)}
129 />
130 </FormField>
131
132 <Button type="submit" disabled={!amount || amount > availableBalance}>
133 Transfer
134 </Button>
135
136 {/* Confirmation */}
137 {submitted && (
138 <Alert tone="success">
139 <p>
140 EUR{" "}{submitted.amount.toFixed(2)} transferred to{" "}
141 {submitted.beneficiary}
142 </p>
143 </Alert>
144 )}
145 </Stack>
146 );
147 };
typecheck/TS1003 1 quality typecheck/TS1381 1 quality typecheck/TS17002 1 quality 7 write_file 1,641 1,319 $0.0000
8 write_file 2,987 1,190 $0.0000