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, get_guidelines, list_components 753 55 $0.0000 1 read_file, get_component, get_component, get_component 5,336 85 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 2,191 238
cdb5d9e77633
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 DataList,
13 FormField,
14 FormatNumber,
15 Heading,
16 Input,
17 NumberInput,
18 Select,
19 Stack,
20 Text,
21 Textarea,
22 Toaster,
23 toast,
24 } from "@vektos/ds";
25
26 type Submitted = { amount: number; beneficiary: string };
27
28 export default function Page() {
29 const accounts = data.accounts;
30 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
31 const selected =
32 accounts.find((a) => a.id === accountId) ?? accounts[0]!;
33
34 const [beneficiary, setBeneficiary] = useState("");
35 const [iban, setIban] = useState("");
36 const [amount, setAmount] = useState<number | null>(null);
37 const [reference, setReference] = useState("");
38 const [submitted, setSubmitted] = useState<Submitted | null>(null);
39
40 const amountError =
41 amount !== null && amount > selected.available
42 ? "Amount exceeds the available balance."
43 : undefined;
44
45 const canSubmit =
46 beneficiary.trim() !== "" &&
47 iban.trim() !== "" &&
48 amount !== null &&
49 amountError === undefined;
50
51 function handleSubmit() {
52 if (!canSubmit || amount === null) return;
53 setSubmitted({ amount, beneficiary: beneficiary.trim() });
54 toast({
55 title: "Transfer sent",
56 description: `${beneficiary.trim()} · ${amount}`,
57 tone: "success",
58 });
59 }
60
61 return (
62 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="8">
63 <Toaster />
64 <Heading level={1}>SEPA transfer</Heading>
65
66 {submitted ? (
67 <Alert tone="success" title="Transfer sent">
68 <Text as="span">
69 <FormatNumber
70 value={submitted.amount}
71 format="currency"
72 currency={data.currency}
73 />{" "}
74 to {submitted.beneficiary}
75 </Text>
76 </Alert>
77 ) : null}
78
79 <Card>
80 <CardHeader>
81 <CardTitle>Send a transfer</CardTitle>
82 </CardHeader>
83 <CardBody>
84 <Stack gap="4">
85 <FormField label="Pay from">
86 <Select
87 value={accountId}
88 onValueChange={setAccountId}
89 options={accounts.map((a) => ({
90 label: a.name,
91 value: a.id,
92 }))}
93 />
94 </FormField>
95
96 <DataList
97 items={[
98 {
99 label: "Available balance",
100 value: (
101 <FormatNumber
102 value={selected.available}
103 format="currency"
104 currency={data.currency}
105 />
106 ),
107 },
108 ]}
109 />
110
111 <FormField label="Beneficiary name" required>
112 <Input
113 value={beneficiary}
114 onChange={(e) => setBeneficiary(e.target.value)}
115 placeholder="Beneficiary name"
116 />
117 </FormField>
118
119 <FormField label="Beneficiary IBAN" required>
120 <Input
121 value={iban}
122 onChange={(e) => setIban(e.target.value)}
123 placeholder="IT00 X000 0000 0000 0000 0000 000"
124 />
125 </FormField>
126
127 <FormField label="Amount" required error={amountError}>
128 <NumberInput
129 value={amount}
130 onValueChange={setAmount}
131 format="currency"
132 currency={data.currency}
133 fractionDigits={2}
134 min={0.01}
135 showSteppers={false}
136 />
137 </FormField>
138
139 <FormField label="Reference" helperText="Optional">
140 <Textarea
141 value={reference}
142 onChange={(e) => setReference(e.target.value)}
143 rows={2}
144 />
145 </FormField>
146
147 <Stack flexDirection="row" justifyContent="flex-end">
148 <Button
149 variant="solid"
150 disabled={!canSubmit}
151 onClick={handleSubmit}
152 >
153 Send transfer
154 </Button>
155 </Stack>
156 </Stack>
157 </CardBody>
158 </Card>
159 </Stack>
160 );
161 }
162
3 get_component, get_component, get_component, get_component, list_tokens 16,364 176 $0.0000
4 list_files, read_file 4,090 47 $0.0000
5 write_file 138 3,186 $0.0000
6 check_code 3,220 984 $0.0000
7 write_file 1,068 1,041 $0.0000
8 check_code 1,109 945 $0.0000