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 5 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,189 53 $0.0000 1 list_components 1,497 135 $0.0000 2 write_file 4,081 1,250 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Alert,
13 Stack,
14 } from "@vektos/ds";
15
16 import data from "./fixture.json";
17
18 interface Account {
19 id: string;
20 name: string;
21 iban: string;
22 available: number;
23 }
24
25 export default function SEPATransferPage() {
26 const [selectedAccountId, setSelectedAccountId] = useState<string>(
27 data.defaultAccountId
28 );
29 const [beneficiaryName, setBeneficiaryName] = useState("");
30 const [beneficiaryIBAN, setBeneficiaryIBAN] = useState("");
31 const [amount, setAmount] = useState(0);
32 const [reference, setReference] = useState("");
33 const [submitted, setSubmitted] = useState(false);
34 const [error, setError] = useState<string | null>(null);
35
36 const accounts: Account[] = data.accounts;
37 const selectedAccount = accounts.find((a) => a.id === selectedAccountId)!;
38 const availableBalance = selectedAccount.available;
39
40 const handleSubmit = (e: React.FormEvent) => {
41 e.preventDefault();
42 const amt = Number(amount);
43 if (amt > availableBalance) {
44 setError("Amount exceeds available balance");
45 return;
46 }
47 setError(null);
48 setSubmitted(true);
49 // simulate async submit
50 setTimeout(() => {
51 // confirmation already rendered
52 }, 800);
53 };
54
55 return (
56 <Stack gap={4} maxWidth="full" padding={4}>
57 {submitted ? (
58 <Alert tone="success" role="status">
59 <FormatNumber
60 value={Number(amount)}
61 format="currency"
62 currency={data.currency}
63 /> transferred to {beneficiaryName}
64 </Alert>
65 ) : (
66 <form onSubmit={handleSubmit}>
67 <FormField
68 label="Pay from"
69 control={
70 <Select
71 value={selectedAccountId}
72 onValueChange={setSelectedAccountId}
73 isSearchable
74 >
75 {accounts.map((ac) => (
76 <Select.Option key={ac.id} value={ac.id}>
77 {ac.name}
78 </Select.Option>
79 ))}
80 </Select>
81 }
82 helperText={`Available balance: ${FormatNumber.value(
83 availableBalance
84 )} ${data.currency}`}
85 />
86
87 <FormField label="Beneficiary name" control={<Input value={beneficiaryName} onChange={(e) => setBeneficiaryName(e.target.value)} /> />} />
88
89 <FormField label="Beneficiary IBAN" control={
90 <Input value={beneficiaryIBAN} onChange={(e) => setBeneficiaryIBAN(e.target.value)} />
91 } /> />
92
93 <FormField
94 label=""
95 control={
96 <NumberInput
97 value={amount}
98 onChange={(e) => setAmount(Number(e.target.value) || 0)}
99 min={0}
100 disabled={submitted}
101 />
102 }
103 >
104 {error && <p className="text-danger">{error}</p>}
105 </FormField>
106
107 <FormField
108 label="Reference (optional)"
109 control={
110 <Textarea
111 value={reference}
112 onChange={(e) => setReference(e.target.value)}
113 placeholder="Optional reference"
114 rows={1}
115 />
116 } />
117 </form>
118 )}
119
120 { !submitted && (
121 <Button type="submit" disabled={!!error}>
122 Submit transfer
123 </Button>
124 )}
125 </Stack>
126 );
127 }
render/build-failed 1 completeness typecheck/TS1382 1 quality 4 write_file 1,397 867 $0.0000