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 4 counted, under 4 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 1,367 40 $0.0000 1 list_components 1,662 46 $0.0000 2 write_file 4,157 1,635 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Alert,
13 Card,
14 CardHeader,
15 CardTitle,
16 CardBody,
17 Stack,
18 } from "@vektos/ds";
19
20 export default function Page() {
21 const [selectedId, setSelectedId] = useState(data.defaultAccountId);
22 const [beneficiaryName, setBeneficiaryName] = useState("");
23 const [beneficiaryIban, setBeneficiaryIban] = useState("");
24 const [amount, setAmount] = useState("");
25 const [reference, setReference] = useState("");
26 const [showConfirmation, setShowConfirmation] = useState(false);
27 const [amountError, setAmountError] = useState(false);
28
29 const account = data.accounts.find((a) => a.id === selectedId) ?? data.accounts[0];
30 const balance = account.available;
31
32 const handleAmountChange = (value: string) => {
33 const num = Number(value);
34 setAmountError(num > balance ? true : false);
35 setAmount(value);
36 };
37
38 const handleSubmit = (e: React.FormEvent) => {
39 e.preventDefault();
40 // simulate successful submit
41 setShowConfirmation(true);
42 setAmountError(false);
43 setAmount("");
44 setBeneficiaryName("");
45 setBeneficiaryIban("");
46 setReference("");
47 };
48
49 return (
50 <Card>
51 <CardHeader>
52 <CardTitle>SEPA Transfer</CardTitle>
53 </CardHeader>
54 <CardBody>
55 <Stack gap={4}>
56 {/* From account */}
57 <FormField
58 label="From account"
59 control={
60 <Select
61 value={selectedId}
62 onValueChange={setSelectedId}
63 isSearchable
64 >
65 {data.accounts.map((a) => (
66 <Select.Item key={a.id} value={a.id}>
67 {a.name}
68 </Select.Item>
69 ))}
70 </Select>
71 }
72 >
73 {({ error }) => {
74 // show balance next to field
75 return null; // we'll show balance separately
76 }}
77 </FormField>
78 <Stack direction="row" gap={2} align="center">
79 <Select.Item value={selectedId} disabled>
80 {selectedId}
81 </Select.Item>
82 <span>{balance?.toFixed(2)} {data.currency}</span>
83 </Stack>
84
85 {/* Beneficiary name */}
86 <FormField label="Beneficiary name">
87 <Input
88 value={beneficiaryName}
89 onChange={(e) => setBeneficiaryName(e.target.value)}
90 placeholder="e.g. Acme Corp"
91 />
92 </FormField>
93
94 {/* Beneficiary IBAN */}
95 <FormField label="Beneficiary IBAN">
96 <Input
97 value={beneficiaryIban}
98 onChange={(e) => setBeneficiaryIban(e.target.value)}
99 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
100 />
101 </FormField>
102
103 {/* Amount */}
104 <FormField
105 label="Amount"
106 error={amountError}
107 helperText={amountError ? "Amount exceeds available balance" : undefined}
108 >
109 <NumberInput
110 value={amount}
111 onChange={handleAmountChange}
112 min={0}
113 step={0.01}
114 placeholder="0.00"
115 />
116 </FormField>
117
118 {/* Reference (optional)}}
119 <FormField label="Reference (optional)">
120 <Input
121 value={reference}
122 onChange={(e) => setReference(e.target.value)}
123 placeholder="Optional reference"
124 />
125 </FormField>
126
127 {/* Submit */}
128 <Button type="submit" disabled={amountError}>
129 Submit
130 </Button>
131 </Stack>
132 </CardBody>
133 </Card>
134
135 {showConfirmation && (
136 <Alert tone="success" aria-live="polite">
137 <Stack direction="row" gap={2} align="center">
138 <span>SEPA transfer of {amount} {data.currency} to {beneficiaryName} submitted successfully.</span>
139 <Button variant="ghost" onClick={() => setShowConfirmation(false)}>
140 Close
141 </Button>
142 </Stack>
143 </Alert>
144 )}
145 );
146 }