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 5 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 list_files 159 32 $0.0000 1 read_file 77 30 $0.0000 2 list_files 354 23 $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 FormatNumber,
14 Heading,
15 Input,
16 NumberInput,
17 Select,
18 Stack,
19 Text,
20 } from "@vektos/ds";
21 import { css } from "styled-system/css";
22
23 type Account = (typeof data.accounts)[number];
24
25 export default function Page() {
26 const [accountId, setAccountId] = useState<string>(data.defaultAccountId);
27 const account = (data.accounts.find((a) => a.id === accountId) ??
28 data.accounts[0]) as Account;
29
30 const [beneficiary, setBeneficiary] = useState("");
31 const [iban, setIban] = useState("");
32 const [amount, setAmount] = useState<number | null>(null);
33 const [reference, setReference] = useState("");
34
35 const [submitted, setSubmitted] = useState<{
36 amount: number;
37 beneficiary: string;
38 } | null>(null);
39
40 const amountError =
41 amount !== null && amount > account.available
42 ? "The amount cannot exceed the available balance."
43 : amount !== null && amount <= 0
44 ? "Enter an amount greater than zero."
45 : undefined;
46
47 const canSubmit =
48 !amountError &&
49 amount !== null &&
50 beneficiary.trim() !== "" &&
51 iban.trim() !== "";
52
53 const handleSubmit = (event: React.FormEvent) => {
54 event.preventDefault();
55 if (!canSubmit || amount === null) return;
56 setSubmitted({ amount, beneficiary: beneficiary.trim() });
57 };
58
59 return (
60 <Stack gap="6" className={css({ maxWidth: "32rem", margin: "0 auto" })}>
61 <Heading level={1}>SEPA transfer</Heading>
62
63 {submitted && (
64 <Alert tone="success" title="Transfer sent">
65 <FormatNumber
66 value={submitted.amount}
67 format="currency"
68 currency={data.currency}
69 />{" "}
70 to {submitted.beneficiary}
71 </Alert>
72 )}
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Transfer details</CardTitle>
77 </CardHeader>
78 <CardBody>
79 <form onSubmit={handleSubmit}>
80 <Stack gap="4">
81 <FormField label="From account">
82 <Select
83 options={data.accounts.map((a) => ({
84 label: a.name,
85 value: a.id,
86 }))}
87 value={accountId}
88 onValueChange={(value) => setAccountId(value)}
89 />
90 </FormField>
91
92 <Text tone="muted" size="sm">
93 Available balance:{" "}
94 <FormatNumber
95 value={account.available}
96 format="currency"
97 currency={data.currency}
98 />
99 </Text>
100
101 <FormField label="Beneficiary name" required>
102 <Input
103 value={beneficiary}
104 onChange={(e) => setBeneficiary(e.target.value)}
105 placeholder="Beneficiary name"
106 />
107 </FormField>
108
109 <FormField label="Beneficiary IBAN" required>
110 <Input
111 value={iban}
112 onChange={(e) => setIban(e.target.value)}
113 placeholder="IT00 X000 0000 0000 0000 0000 000"
114 />
115 </FormField>
116
117 <FormField
118 label="Amount"
119 required
120 helperText="In the account currency."
121 error={amountError}
122 invalid={!!amountError}
123 >
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 placeholder="0.00"
133 />
134 </FormField>
135
136 <FormField label="Reference">
137 <Input
138 value={reference}
139 onChange={(e) => setReference(e.target.value)}
140 placeholder="Optional reference"
141 />
142 </FormField>
143
144 <Button type="submit" variant="solid" disabled={!canSubmit}>
145 Send transfer
146 </Button>
147 </Stack>
148 </form>
149 </CardBody>
150 </Card>
151 </Stack>
152 );
153 }
`32rem` is a raw length. Use a token.
typecheck/TS2769 0 quality 7 docs-show, docs-show, docs-show, docs-show 1,482 119 $0.0000
8 docs-show, docs-show, docs-show, docs-show, docs-show, docs-show, docs-show 3,107 153 $0.0000
9 list_files 5,834 236 $0.0000
11 docs-show, docs-show, docs-show, docs-show 98 163 $0.0000
12 docs-show 1,521 33 $0.0000
14 write_file 15,430 4,164 $0.0000
15 write_file 4,194 1,325 $0.0000
16 stories-changed 1,383 98 $0.0000
17 stories-find-by-component 169 82 $0.0000
19 write_file 1,072 2,154 $0.0000