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_files 699 55 $0.0001 1 get_component, get_component, get_component, get_component, get_component, list_tokens, read_file 3 120 $0.0004 2 list_tokens 3 292 $0.0006
Output cap The provider's default 4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardHeader,
10 CardTitle,
11 FormField,
12 Input,
13 Select,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const money = new Intl.NumberFormat("en-IE", {
19 style: "currency",
20 currency: data.currency,
21 });
22
23 export default function Page() {
24 const [accountId, setAccountId] = useState(data.defaultAccountId);
25 const [amount, setAmount] = useState("");
26 const [beneficiary, setBeneficiary] = useState("");
27 const [confirmation, setConfirmation] = useState<{ amount: number; beneficiary: string } | null>(null);
28
29 const account = data.accounts.find((item) => item.id === accountId) ?? data.accounts[0]!;
30 const parsedAmount = Number(amount.trim().replace(",", "."));
31 const amountIsValid = amount.trim() !== "" && Number.isFinite(parsedAmount) && parsedAmount > 0;
32 const exceedsBalance = amountIsValid && parsedAmount > account.available;
33 const amountError = exceedsBalance
34 ? "This amount is higher than the available balance."
35 : amount.trim() !== "" && !amountIsValid
36 ? "Enter a valid amount greater than zero."
37 : undefined;
38
39 function handleSubmit(event: FormEvent<HTMLFormElement>) {
40 event.preventDefault();
41 if (!amountIsValid || exceedsBalance || !beneficiary.trim()) return;
42 setConfirmation({ amount: parsedAmount, beneficiary: beneficiary.trim() });
43 }
44
45 return (
46 <main className={css({ bg: "bg.canvas", color: "fg.default", px: "4", py: "8" })}>
47 <div className={css({ width: "full", maxWidth: "md", mx: "auto" })}>
48 <header className={css({ marginBlockEnd: "6" })}>
49 <p className={css({ color: "accent.default", fontSize: "sm", fontWeight: "semibold", marginBlockEnd: "2" })}>
50 PAYMENTS
51 </p>
52 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", marginBlockEnd: "2" })}>Send a SEPA transfer</h1>
53 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
54 Make a euro payment to any SEPA beneficiary.
55 </p>
56 </header>
57
58 <Card>
59 <CardHeader>
60 <CardTitle>Transfer details</CardTitle>
61 <CardDescription>Choose an account and enter the beneficiary details.</CardDescription>
62 </CardHeader>
63 <CardBody>
64 {confirmation && (
65 <output
66 className={css({
67 display: "block",
68 bg: "success.subtle",
69 color: "success.text",
70 borderRadius: "md",
71 p: "4",
72 marginBlockEnd: "6",
73 fontSize: "sm",
74 })}
75 >
76 <p className={css({ fontWeight: "semibold", marginBlockEnd: "1" })}>Transfer sent</p>
77 <p>
78 {money.format(confirmation.amount)} sent to {confirmation.beneficiary}.
79 </p>
80 </output>
81 )}
82
83 <form onSubmit={handleSubmit} className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
84 <div>
85 <FormField label="Pay from">
86 <Select
87 options={data.accounts.map((item) => ({
88 label: `${item.name} · ${item.iban}`,
89 value: item.id,
90 }))}
91 value={accountId}
92 onValueChange={(value) => {
93 setAccountId(value);
94 setConfirmation(null);
95 }}
96 />
97 </FormField>
98 <div
99 className={css({
100 display: "flex",
101 justifyContent: "space-between",
102 alignItems: "center",
103 bg: "bg.subtle",
104 borderRadius: "md",
105 marginBlockStart: "2",
106 px: "3",
107 py: "2",
108 fontSize: "sm",
109 })}
110 >
111 <span className={css({ color: "fg.muted" })}>Available balance</span>
112 <span className={css({ fontWeight: "semibold" })}>{money.format(account.available)}</span>
113 </div>
114 </div>
115
116 <FormField label="Beneficiary name">
117 <Input
118 autoComplete="name"
119 required
120 value={beneficiary}
121 onChange={(event) => {
122 setBeneficiary(event.target.value);
123 setConfirmation(null);
124 }}
125 placeholder="e.g. Alex Morgan"
126 />
127 </FormField>
128
129 <FormField label="Beneficiary IBAN" helperText="Enter the beneficiary's SEPA account IBAN.">
130 <Input
131 autoComplete="off"
132 required
133 placeholder="e.g. DE89 3704 0044 0532 0130 00"
134 onChange={() => setConfirmation(null)}
135 />
136 </FormField>
137
138 <FormField
139 label={`Amount (${data.currency})`}
140 helperText="Enter an amount in euros."
141 error={amountError}
142 >
143 <Input
144 inputMode="decimal"
145 required
146 placeholder="0.00"
147 value={amount}
148 onChange={(event) => {
149 setAmount(event.target.value);
150 setConfirmation(null);
151 }}
152 aria-invalid={Boolean(amountError)}
153 />
154 </FormField>
155
156 <FormField label="Reference (optional)">
157 <Input placeholder="Add a payment reference" onChange={() => setConfirmation(null)} />
158 </FormField>
159
160 <div className={css({ display: "flex", justifyContent: "flex-end", paddingBlockStart: "2" })}>
161 <Button type="submit" disabled={Boolean(amountError)}>
162 Send transfer
163 </Button>
164 </div>
165 </form>
166 </CardBody>
167 </Card>
168 <p className={css({ color: "fg.muted", fontSize: "xs", marginBlockStart: "4", textAlign: "center" })}>
169 SEPA transfers are sent in {data.currency}.
170 </p>
171 </div>
172 </main>
173 );
174 }
175