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 1,384 32 $0.0000 1 read_file 1,436 35 $0.0000 2 list_components 1,726 54 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Card,
7 CardHeader,
8 CardTitle,
9 CardBody,
10 FormField,
11 Input,
12 NumberInput,
13 Select,
14 Button,
15 Alert,
16 Stack,
17 Text,
18 FormatNumber,
19 } from "@vektos/ds";
20
21 export default function Page() {
22 const {
23 currency,
24 accounts,
25 defaultAccountId,
26 } = data;
27
28 const [selectedAccountId, setSelectedAccountId] = useState(defaultAccountId);
29 const [beneficiaryName, setBeneficiaryName] = useState("");
30 const [beneficiaryIban, setBeneficiaryIban] = useState("");
31 const [amount, setAmount] = useState(0);
32 const [reference, setReference] = useState("");
33 const [submitted, setSubmitted] = useState(false);
34 const [error, setError] = useState("");
35
36 const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
37 const available = selectedAccount?.available ?? 0;
38
39 const handleSubmit = (e: React.FormEvent) => {
40 e.preventDefault();
41 setError("");
42 const amt = amount;
43 if (amt > available) {
44 setError("Amount exceeds available balance");
45 return;
46 }
47 setSubmitted(true);
48 };
49
50 if (submitted) {
51 return (
52 <Alert tone="success">
53 <Stack>
54 <Text>Transfer of </Text>
55 <FormatNumber value={amount} format="currency" currency={currency} />
56 <Text> to {beneficiaryName} submitted successfully.</Text>
57 </Stack>
58 </Alert>
59 );
60 }
61
62 return (
63 <Card>
64 <CardHeader>
65 <CardTitle>SEPA Transfer</CardTitle>
66 </CardHeader>
67 <CardBody>
68 <form onSubmit={handleSubmit}>
69 <Stack>
70 <FormField label="From account">
71 <Select
72 options={accounts.map((acc) => ({
73 label: acc.name,
74 value: acc.id,
75 }))}
76 value={selectedAccountId}
77 onValueChange={(v: string) => setSelectedAccountId(v)}
78 placeholder="Select account"
79 />
80 {selectedAccountId && (
81 <p>
82 Available balance{" "}
83 <FormatNumber
84 value={available}
85 format="currency"
86 currency={currency}
87 />
88 </p>
89 )}
90 </FormField>
91
92 <FormField label="Beneficiary name">
93 <Input
94 value={beneficiaryName}
95 onChange={(e) => setBeneficiaryName(e.target.value)}
96 placeholder="e.g. John Doe"
97 />
98 </FormField>
99
100 <FormField label="Beneficiary IBAN">
101 <Input
102 value={beneficiaryIban}
103 onChange={(e) => setBeneficiaryIban(e.target.value)}
104 placeholder="e.g. IT60 X054 2811 1010 0000 0123 456"
105 />
106 </FormField>
107
108 <FormField label="Amount">
109 <NumberInput
110 value={amount}
111 onValueChange={(v: number | null) => setAmount(v ?? 0)}
112 min={0}
113 format="currency"
114 currency={currency}
115 fractionDigits={2}
116 showSteppers={false}
117 />
118 {error && <p>{error}</p>}
119 </FormField>
120
121 <FormField label="Reference (optional)">
122 <Input
123 value={reference}
124 onChange={(e) => setReference(e.target.value)}
125 placeholder="Optional reference"
126 />
127 </FormField>
128
129 <Button type="submit" disabled={error !== "" || submitted}>
130 {submitted ? "Transfer sent" : "Transfer"}
131 </Button>
132 </Stack>
133 </form>
134 </CardBody>
135 </Card>
136 );
137 }
4 get_component 5,749 343 $0.0000
5 get_component 2,644 67 $0.0000
6 write_file 1,723 1,383 $0.0000
7 write_file 3,133 1,105 $0.0000
9 write_file 1,285 2,136 $0.0000
10 check_code 3,448 913 $0.0000
11 write_file 2,385 1,573 $0.0000
12 check_code 1,889 905 $0.0000
13 write_file 784 1,385 $0.0000
14 check_code 100 904 $0.0000