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 3 counted, under 2 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 get_guidelines, list_components, list_tokens, list_files 539 100 $0.0000 1 read_file, list_files 7,922 45 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component 7,522 185 $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 CardDescription,
11 CardFooter,
12 CardHeader,
13 CardTitle,
14 FormField,
15 FormatNumber,
16 Heading,
17 Input,
18 NumberInput,
19 Select,
20 Stack,
21 Text,
22 Toaster,
23 } from "@vektos/ds";
24
25 type Account = (typeof data.accounts)[number];
26
27 export default function Page() {
28 const accounts = data.accounts as Account[];
29 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
30 const account = 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 [submitted, setSubmitted] = useState<{ amount: number; beneficiary: string } | null>(null);
37
38 const amountError =
39 amount !== null && amount > account.available
40 ? "The amount is higher than the available balance."
41 : undefined;
42
43 const canSubmit =
44 beneficiary.trim().length > 0 &&
45 iban.trim().length > 0 &&
46 amount !== null &&
47 amount > 0 &&
48 !amountError;
49
50 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
51 event.preventDefault();
52 if (!canSubmit || amount === null) return;
53 setSubmitted({ amount, beneficiary: beneficiary.trim() });
54 }
55
56 function reset() {
57 setSubmitted(null);
58 setBeneficiary("");
59 setIban("");
60 setAmount(null);
61 setReference("");
62 }
63
64 if (submitted) {
65 return (
66 <div className="vektos">
67 <Stack gap="6">
68 <Heading level={1}>SEPA transfer</Heading>
69 <Alert tone="success" title="Transfer sent">
70 <FormatNumber value={submitted.amount} format="currency" currency={data.currency} /> to{" "}
71 {submitted.beneficiary}.
72 </Alert>
73 <Button variant="outline" onClick={reset}>
74 Send another transfer
75 </Button>
76 </Stack>
77 <Toaster />
78 </div>
79 );
80 }
81
82 return (
83 <div className="vektos">
84 <Stack gap="6">
85 <Heading level={1}>SEPA transfer</Heading>
86 <Card maxWidth="md">
87 <CardHeader>
88 <CardTitle>Send a transfer</CardTitle>
89 <CardDescription>Pay a beneficiary by SEPA credit transfer.</CardDescription>
90 </CardHeader>
91 <CardBody>
92 <form id="transfer-form" onSubmit={handleSubmit}>
93 <Stack gap="4">
94 <FormField label="Pay from">
95 <Select
96 value={accountId}
97 onValueChange={setAccountId}
98 options={accounts.map((a) => ({ label: a.name, value: a.id }))}
99 />
100 </FormField>
101 <Stack gap="1">
102 <Text size="sm" tone="muted">
103 Available balance
104 </Text>
105 <Text size="lg" weight="semibold" numeric>
106 <FormatNumber value={account.available} format="currency" currency={data.currency} />
107 </Text>
108 </Stack>
109 <FormField label="Beneficiary name" required>
110 <Input
111 value={beneficiary}
112 onChange={(e) => setBeneficiary(e.target.value)}
113 placeholder="Beneficiary name"
114 />
115 </FormField>
116 <FormField label="Beneficiary IBAN" required>
117 <Input
118 value={iban}
119 onChange={(e) => setIban(e.target.value)}
120 placeholder="IT00 X000 0000 0000 0000 0000 000"
121 />
122 </FormField>
123 <FormField label="Amount" required error={amountError}>
124 <NumberInput
125 value={amount}
126 onValueChange={setAmount}
127 format="currency"
128 currency={data.currency}
129 fractionDigits={2}
130 min={0.01}
131 showSteppers={false}
132 />
133 </FormField>
134 <FormField label="Reference" helperText="Optional. Shown on the beneficiary's statement.">
135 <Input
136 value={reference}
137 onChange={(e) => setReference(e.target.value)}
138 placeholder="Reference"
139 />
140 </FormField>
141 </Stack>
142 </form>
143 </CardBody>
144 <CardFooter>
145 <Button type="submit" form="transfer-form" disabled={!canSubmit}>
146 Send transfer
147 </Button>
148 </CardFooter>
149 </Card>
150 </Stack>
151 <Toaster />
152 </div>
153 );
154 }
155
3 get_component, get_component, get_component, get_component, get_component 4,849 135 $0.0000
4 get_component, get_component, get_component, get_component, get_component 4,398 121 $0.0000
5 write_file 3,220 4,705 $0.0000
6 write_file 4,749 2,104 $0.0000
7 check_code 2,141 1,076 $0.0000
8 read_file 1,129 278 $0.0000
9 write_file 2,390 1,336 $0.0000
10 read_file 1,382 59 $0.0000
11 check_code 1,132 1,064 $0.0000