Runs / transfer-form Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations None. The run followed every rule that was checked.
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 get_guidelines, list_components, list_tokens, list_files 113 73 $0.0000 1 read_file, list_files 7,277 45 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component 349 157 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardHeader,
11 CardTitle,
12 FormField,
13 FormatNumber,
14 Heading,
15 Input,
16 NumberInput,
17 Select,
18 Stack,
19 Text,
20 Toaster,
21 toast,
22 } from "@vektos/ds";
23
24 type Account = (typeof data.accounts)[number];
25
26 export default function Page() {
27 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
28 const account = data.accounts.find((a) => a.id === accountId)!;
29 const [beneficiary, setBeneficiary] = useState("");
30 const [iban, setIban] = useState("");
31 const [amount, setAmount] = useState<number | null>(null);
32 const [reference, setReference] = useState("");
33 const [submitted, setSubmitted] = useState<{
34 amount: number;
35 beneficiary: string;
36 reference: string;
37 } | null>(null);
38
39 const balance = account.available;
40 const amountError =
41 amount !== null && amount > balance
42 ? "The amount is higher than the available balance."
43 : undefined;
44
45 const canSubmit =
46 beneficiary.trim() !== "" &&
47 iban.trim() !== "" &&
48 amount !== null &&
49 amount > 0 &&
50 !amountError;
51
52 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
53 event.preventDefault();
54 if (!canSubmit || amount === null) return;
55 setSubmitted({ amount, beneficiary: beneficiary.trim(), reference: reference.trim() });
56 toast({
57 title: "Transfer sent",
58 description: `${beneficiary.trim()} will receive the funds.`,
59 tone: "success",
60 });
61 setBeneficiary("");
62 setIban("");
63 setAmount(null);
64 setReference("");
65 };
66
67 const accountOptions = data.accounts.map((a: Account) => ({
68 label: a.name,
69 value: a.id,
70 }));
71
72 return (
73 <Stack
74 gap="6"
75 maxWidth="md"
76 marginInline="auto"
77 marginBlock="6"
78 >
79 <Heading level={1}>Send a SEPA transfer</Heading>
80
81 {submitted ? (
82 <Alert tone="success" title="Transfer sent">
83 <FormatNumber
84 value={submitted.amount}
85 format="currency"
86 currency={data.currency}
87 />{" "}
88 sent to {submitted.beneficiary}.
89 </Alert>
90 ) : null}
91
92 <Card>
93 <CardHeader>
94 <CardTitle>Transfer details</CardTitle>
95 </CardHeader>
96 <CardBody>
97 <form onSubmit={handleSubmit}>
98 <Stack gap="4">
99 <FormField label="Pay from">
100 <Select
101 options={accountOptions}
102 value={accountId}
103 onValueChange={setAccountId}
104 />
105 </FormField>
106
107 <Text tone="muted" size="sm">
108 Available balance:{" "}
109 <FormatNumber
110 value={balance}
111 format="currency"
112 currency={data.currency}
113 />
114 </Text>
115
116 <FormField label="Beneficiary name">
117 <Input
118 value={beneficiary}
119 onChange={(e) => setBeneficiary(e.target.value)}
120 placeholder="Full name"
121 required
122 />
123 </FormField>
124
125 <FormField label="Beneficiary IBAN">
126 <Input
127 value={iban}
128 onChange={(e) => setIban(e.target.value)}
129 placeholder="IT00 X000 0000 0000 0000 0000 000"
130 required
131 />
132 </FormField>
133
134 <FormField
135 label="Amount"
136 error={amountError}
137 >
138 <NumberInput
139 value={amount}
140 onValueChange={setAmount}
141 format="currency"
142 currency={data.currency}
143 fractionDigits={2}
144 min={0.01}
145 showSteppers={false}
146 />
147 </FormField>
148
149 <FormField label="Reference" helperText="Optional payment reference.">
150 <Input
151 value={reference}
152 onChange={(e) => setReference(e.target.value)}
153 placeholder="Invoice number"
154 />
155 </FormField>
156
157 <Stack flexDirection="row" justifyContent="flex-end" gap="2">
158 <Button type="submit" variant="solid" disabled={!canSubmit}>
159 Send transfer
160 </Button>
161 </Stack>
162 </Stack>
163 </form>
164 </CardBody>
165 </Card>
166
167 <Toaster />
168 </Stack>
169 );
170 }
171
3 get_component, get_component, get_component, get_component, get_component, get_component 4,816 162 $0.0000
4 write_file 4,846 3,164 $0.0000
5 check_code 21,026 1,007 $0.0000
6 write_file 1,223 1,393 $0.0000
7 check_code 1,424 946 $0.0000
8 write_file 1,008 1,327 $0.0000
9 check_code 1,399 1,036 $0.0000
10 check_code 1,106 1,503 $0.0000