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 list_files 155 30 $0.0000 1 read_file 71 29 $0.0000 2 get_guidelines, list_components 859 38 $0.0000 3
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 NumberInput,
18 Select,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 type Confirmation = {
25 amount: number;
26 beneficiary: string;
27 };
28
29 export default function Page() {
30 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
31 const [beneficiary, setBeneficiary] = useState<string>("");
32 const [iban, setIban] = useState<string>("");
33 const [amount, setAmount] = useState<number | null>(null);
34 const [reference, setReference] = useState<string>("");
35 const [confirmation, setConfirmation] = useState<Confirmation | null>(null);
36
37 const selectedAccount = data.accounts.find((a) => a.id === accountId);
38 const balance = selectedAccount?.available ?? 0;
39 const amountError =
40 amount != null && amount > balance
41 ? "Amount exceeds the available balance."
42 : undefined;
43
44 const canSubmit =
45 beneficiary.trim().length > 0 &&
46 iban.trim().length > 0 &&
47 amount != null &&
48 amount > 0 &&
49 !amountError;
50
51 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
52 event.preventDefault();
53 if (!canSubmit || amount == null) return;
54 setConfirmation({ amount, beneficiary: beneficiary.trim() });
55 setBeneficiary("");
56 setIban("");
57 setAmount(null);
58 setReference("");
59 }
60
61 const rootClass = css({ minHeight: "full", p: { base: "4", md: "8" } });
62
63 return (
64 <div className={`vektos ${rootClass}`}>
65 <Stack gap="6" maxWidth="md">
66 <Heading level={1}>SEPA transfer</Heading>
67
68 {confirmation && (
69 <Alert tone="success" title="Transfer sent">
70 <FormatNumber
71 value={confirmation.amount}
72 format="currency"
73 currency={data.currency}
74 />{" "}
75 to {confirmation.beneficiary}.
76 </Alert>
77 )}
78
79 <Card>
80 <CardHeader>
81 <CardTitle>Payment details</CardTitle>
82 </CardHeader>
83 <form id="transfer-form" onSubmit={handleSubmit}>
84 <CardBody>
85 <Stack gap="4">
86 <FormField label="Pay from">
87 <Select
88 value={accountId}
89 onValueChange={setAccountId}
90 options={data.accounts.map((a) => ({
91 label: a.name,
92 value: a.id,
93 }))}
94 />
95 </FormField>
96
97 <Text size="sm" tone="muted">
98 Available balance:{" "}
99 <FormatNumber
100 value={balance}
101 format="currency"
102 currency={data.currency}
103 />
104 </Text>
105
106 <FormField label="Beneficiary name">
107 <Input
108 value={beneficiary}
109 onChange={(e) => setBeneficiary(e.target.value)}
110 placeholder="Recipient name"
111 required
112 />
113 </FormField>
114
115 <FormField label="Beneficiary IBAN">
116 <Input
117 value={iban}
118 onChange={(e) => setIban(e.target.value)}
119 placeholder="IT00 X000 0000 0000 0000 0000 000"
120 required
121 />
122 </FormField>
123
124 <FormField
125 label="Amount"
126 error={amountError}
127 helperText={amountError ? undefined : "Amount in euro."}
128 >
129 <NumberInput
130 value={amount}
131 onValueChange={setAmount}
132 format="currency"
133 currency={data.currency}
134 fractionDigits={2}
135 min={0.01}
136 showSteppers={false}
137 />
138 </FormField>
139
140 <FormField label="Reference" helperText="Optional.">
141 <Input
142 value={reference}
143 onChange={(e) => setReference(e.target.value)}
144 placeholder="Invoice number, reason…"
145 />
146 </FormField>
147 </Stack>
148 </CardBody>
149 </form>
150 <CardFooter>
151 <Button
152 type="submit"
153 form="transfer-form"
154 disabled={!canSubmit}
155 variant="solid"
156 >
157 Send transfer
158 </Button>
159 </CardFooter>
160 </Card>
161 </Stack>
162 </div>
163 );
164 }
165
get_component, get_component, get_component
4 get_component, get_component, get_component, get_component 1,956 81 $0.0000
5 get_component, get_component, get_component, get_component, get_component 3,496 111 $0.0000
6 get_component, get_component, get_component 4,365 74 $0.0000
7 list_tokens 17,769 31 $0.0000
8 list_files 1,057 27 $0.0000
9 list_files 3,722 35 $0.0000
10 list_tokens, list_tokens 59 117 $0.0000
11 list_tokens, list_tokens, list_tokens 605 69 $0.0000
12 write_file 468 4,801 $0.0000
13 check_code 5,933 994 $0.0000
14 list_files 5,863 424 $0.0000
16 write_file 76 1,219 $0.0000
17 check_code 2,791 984 $0.0000
18 write_file 1,047 1,251 $0.0000
19 check_code 1,298 1,002 $0.0000