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 113 39 $0.0000 1 read_file, get_guidelines 166 45 $0.0000 2 list_components, list_tokens 2,900 40 $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 CardHeader,
11 CardTitle,
12 FormField,
13 Heading,
14 Input,
15 NumberInput,
16 Select,
17 Stack,
18 Text,
19 Toaster,
20 toast,
21 FormatNumber,
22 } from "@vektos/ds";
23 import { css } from "styled-system/css";
24
25 export default function Page() {
26 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
27
28 const [beneficiaryName, setBeneficiaryName] = useState("");
29 const [beneficiaryIban, setBeneficiaryIban] = useState("");
30 const [amount, setAmount] = useState<number | null>(null);
31 const [reference, setReference] = useState("");
32 const [confirmation, setConfirmation] = useState<{
33 amount: number;
34 beneficiary: string;
35 } | null>(null);
36
37 const foundAccount = data.accounts.find((a) => a.id === accountId);
38 const account = foundAccount ?? data.accounts[0];
39 if (!account) throw new Error("No account available");
40
41 const amountError =
42 amount !== null && amount > account.available
43 ? "The amount exceeds the available balance."
44 : undefined;
45
46 const canSubmit =
47 amount !== null &&
48 amount > 0 &&
49 amountError === undefined &&
50 beneficiaryName.trim() !== "" &&
51 beneficiaryIban.trim() !== "";
52
53 const handleSubmit = (event: FormEvent) => {
54 event.preventDefault();
55 if (!canSubmit || amount === null) return;
56 const beneficiary = beneficiaryName.trim();
57 setConfirmation({ amount, beneficiary });
58 toast({
59 title: "Transfer sent",
60 description: `${beneficiary} · ${amount}`,
61 tone: "success",
62 });
63 setAmount(null);
64 setBeneficiaryName("");
65 setBeneficiaryIban("");
66 setReference("");
67 };
68
69 return (
70 <div
71 className={`vektos ${css({ minHeight: "full", bg: "bg.canvas", color: "fg.default", p: "6" })}`}
72 >
73 <Stack gap="6" maxWidth="lg" marginInline="auto">
74 <Heading level={1}>SEPA transfer</Heading>
75
76 {confirmation ? (
77 <Alert tone="success" title="Transfer sent">
78 <FormatNumber
79 value={confirmation.amount}
80 format="currency"
81 currency={data.currency}
82 />{" "}
83 to {confirmation.beneficiary}
84 </Alert>
85 ) : null}
86
87 <Card>
88 <CardHeader>
89 <CardTitle>Payment details</CardTitle>
90 </CardHeader>
91 <CardBody>
92 <form onSubmit={handleSubmit}>
93 <Stack gap="4">
94 <FormField label="Pay from">
95 <Select
96 value={accountId}
97 onValueChange={setAccountId}
98 options={data.accounts.map((a) => ({
99 label: a.name,
100 value: a.id,
101 }))}
102 />
103 </FormField>
104
105 <Text size="sm" tone="muted">
106 Available balance:{" "}
107 <FormatNumber
108 value={account.available}
109 format="currency"
110 currency={data.currency}
111 />
112 </Text>
113
114 <FormField label="Beneficiary name">
115 <Input
116 value={beneficiaryName}
117 onChange={(e) => setBeneficiaryName(e.target.value)}
118 placeholder="Beneficiary name"
119 />
120 </FormField>
121
122 <FormField label="Beneficiary IBAN">
123 <Input
124 value={beneficiaryIban}
125 onChange={(e) => setBeneficiaryIban(e.target.value)}
126 placeholder="IT00 X000 0000 0000 0000 0000 000"
127 />
128 </FormField>
129
130 <FormField label="Amount" error={amountError}>
131 <NumberInput
132 value={amount}
133 onValueChange={setAmount}
134 format="currency"
135 currency={data.currency}
136 fractionDigits={2}
137 min={0.01}
138 showSteppers={false}
139 />
140 </FormField>
141
142 <FormField label="Reference" helperText="Optional">
143 <Input
144 value={reference}
145 onChange={(e) => setReference(e.target.value)}
146 placeholder="Reference"
147 />
148 </FormField>
149
150 <Stack flexDirection="row" justifyContent="flex-end">
151 <Button type="submit" disabled={!canSubmit}>
152 Send transfer
153 </Button>
154 </Stack>
155 </Stack>
156 </form>
157 </CardBody>
158 </Card>
159 </Stack>
160 <Toaster />
161 </div>
162 );
163 }
164
spacing As the agent left it; marked lines broke a rule.
get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component 3,058 116 $0.0000
5 get_component, get_component, get_component 4,115 64 $0.0000
6 get_component, get_component, get_component 2,494 67 $0.0000
7 list_files 2,467 33 $0.0000
10 read_file, read_file 157 54 $0.0000
11 write_file 125 4,191 $0.0000
12 list_tokens 4,274 133 $0.0000
13 write_file, check_code 417 2,089 $0.0000
14 write_file 2,267 1,544 $0.0000
15 check_code 1,595 1,041 $0.0000
16 write_file 1,211 1,476 $0.0000
17 write_file 1,559 1,668 $0.0000
18 check_code 1,715 1,034 $0.0000
19 write_file 29,516 1,244 $0.0000