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, read_file, list_files 369 109 $0.0000 1 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 7,494 233 $0.0000 2 get_component, get_component 8,457 59
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 FormField,
14 FormatNumber,
15 Heading,
16 Input,
17 LocaleProvider,
18 NumberInput,
19 Select,
20 Stack,
21 Text,
22 } from "@vektos/ds";
23
24 const accounts = data.accounts;
25 const currency = data.currency;
26
27 export default function Page() {
28 const [accountId, setAccountId] = useState(data.defaultAccountId);
29 const account =
30 (accounts.find((a) => a.id === accountId) ?? accounts[0])!;
31
32 const [beneficiary, setBeneficiary] = useState("");
33 const [iban, setIban] = useState("");
34 const [amount, setAmount] = useState<number | null>(null);
35 const [reference, setReference] = useState("");
36 const [confirmation, setConfirmation] = useState<{
37 amount: number;
38 beneficiary: string;
39 } | null>(null);
40
41 const amountError =
42 amount === null
43 ? undefined
44 : amount <= 0
45 ? "Enter an amount greater than zero."
46 : amount > account.available
47 ? "Amount exceeds the available balance."
48 : undefined;
49
50 const canSubmit =
51 beneficiary.trim() !== "" &&
52 iban.trim() !== "" &&
53 amount !== null &&
54 amount > 0 &&
55 amount <= account.available;
56
57 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
58 event.preventDefault();
59 if (!canSubmit || amount === null) return;
60 setConfirmation({ amount, beneficiary: beneficiary.trim() });
61 };
62
63 const selectOptions = accounts.map((a) => ({
64 label: a.name,
65 value: a.id,
66 }));
67
68 return (
69 <LocaleProvider locale="en-IE">
70 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlock="8">
71 <Heading level={1}>Send a SEPA transfer</Heading>
72
73 {confirmation && (
74 <Alert tone="success" title="Transfer sent">
75 <FormatNumber
76 value={confirmation.amount}
77 format="currency"
78 currency={currency}
79 />{" "}
80 to {confirmation.beneficiary}
81 </Alert>
82 )}
83
84 <form onSubmit={handleSubmit}>
85 <Card>
86 <CardHeader>
87 <CardTitle>Transfer details</CardTitle>
88 </CardHeader>
89 <CardBody>
90 <Stack gap="4">
91 <FormField label="Pay from account">
92 <Select
93 options={selectOptions}
94 value={accountId}
95 onValueChange={setAccountId}
96 />
97 </FormField>
98
99 <Text size="sm" tone="muted">
100 Available balance:{" "}
101 <FormatNumber
102 value={account.available}
103 format="currency"
104 currency={currency}
105 />
106 </Text>
107
108 <FormField label="Beneficiary name" required>
109 <Input
110 value={beneficiary}
111 onChange={(e) => setBeneficiary(e.target.value)}
112 placeholder="Beneficiary name"
113 />
114 </FormField>
115
116 <FormField label="Beneficiary IBAN" required>
117 <Input
118 value={iban}
119 onChange={(e) => setIban(e.target.value)}
120 placeholder="IT00 ..."
121 />
122 </FormField>
123
124 <FormField label="Amount" required error={amountError}>
125 <NumberInput
126 value={amount}
127 onValueChange={setAmount}
128 format="currency"
129 currency={currency}
130 fractionDigits={2}
131 min={0.01}
132 showSteppers={false}
133 />
134 </FormField>
135
136 <FormField label="Reference" helperText="Optional">
137 <Input
138 value={reference}
139 onChange={(e) => setReference(e.target.value)}
140 placeholder="Reference"
141 />
142 </FormField>
143 </Stack>
144 </CardBody>
145 <CardFooter>
146 <Button type="submit" disabled={!canSubmit}>
147 Send transfer
148 </Button>
149 </CardFooter>
150 </Card>
151 </form>
152 </Stack>
153 </LocaleProvider>
154 );
155 }
156
3 write_file 2,226 4,023 $0.0000
4 check_code 22,273 911 $0.0000
5 write_file 1,058 964 $0.0000
6 check_code 1,022 917 $0.0000