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 35 counted, under 7 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, get-storybook-story-instructions, docs-list 3 87 $0.0001 1 read_file, docs-show, docs-show, docs-show, docs-show, docs-show 3 136 $0.0004 2 write_file 3 3,052 $0.0019
Output cap The provider's default 3 import { useState, type FormEvent } from "react";
4 import {
5 Button,
6 Card,
7 CardBody,
8 CardDescription,
9 CardFooter,
10 CardHeader,
11 CardTitle,
12 FormField,
13 Input,
14 Select,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17 import data from "./fixture.json";
18
19 const formatMoney = (amount: number) =>
20 new Intl.NumberFormat("en-IE", {
21 style: "currency",
22 currency: data.currency,
23 }).format(amount);
24
25 const amountAsNumber = (amount: string) => {
26 if (!amount.trim()) return Number.NaN;
27 return Number(amount.trim().replace(",", "."));
28 };
29
30 export default function TransferPage() {
31 const [accountId, setAccountId] = useState(data.defaultAccountId);
32 const [beneficiary, setBeneficiary] = useState("");
33 const [iban, setIban] = useState("");
34 const [amount, setAmount] = useState("");
35 const [reference, setReference] = useState("");
36 const [sentTransfer, setSentTransfer] = useState<{
37 amount: number;
38 beneficiary: string;
39 } | null>(null);
40
41 const selectedAccount = data.accounts.find((account) => account.id === accountId) ?? data.accounts[0];
42 const numericAmount = amountAsNumber(amount);
43 const amountError =
44 Number.isFinite(numericAmount) && numericAmount > selectedAccount.available
45 ? "This amount is higher than your available balance."
46 : undefined;
47
48 function handleSubmit(event: FormEvent<HTMLFormElement>) {
49 event.preventDefault();
50 if (amountError || !Number.isFinite(numericAmount) || numericAmount <= 0) return;
51
52 setSentTransfer({ amount: numericAmount, beneficiary: beneficiary.trim() });
53 }
54
55 function updateAmount(value: string) {
56 setAmount(value);
57 setSentTransfer(null);
58 }
59
60 return (
61 <main className={css({ minHeight: "100vh", background: "#f5f7fb", color: "#172338", padding: { base: "8", md: "14" } })}>
62 <div className={css({ maxWidth: "680px", marginInline: "auto" })}>
63 <div className={css({ display: "flex", alignItems: "center", gap: "3", marginBottom: "8" })}>
64 <div className={css({ display: "grid", placeItems: "center", width: "11", height: "11", borderRadius: "xl", background: "#e7efff", color: "#2759b8", fontSize: "xl", fontWeight: "bold" })} aria-hidden="true">
65 ↗
66 </div>
67 <div>
68 <p className={css({ margin: 0, color: "#65738b", fontSize: "sm", fontWeight: "semibold", letterSpacing: "0.08em", textTransform: "uppercase" })}>Payments</p>
69 <h1 className={css({ margin: 0, fontSize: { base: "2xl", md: "3xl" }, fontWeight: "bold", letterSpacing: "-0.03em" })}>Send a SEPA transfer</h1>
70 </div>
71 </div>
72
73 {sentTransfer ? (
74 <Card>
75 <CardBody>
76 <section className={css({ display: "flex", gap: "4", alignItems: "flex-start", paddingBlock: "4" })} role="status" aria-live="polite">
77 <div className={css({ display: "grid", flexShrink: 0, placeItems: "center", width: "12", height: "12", borderRadius: "full", background: "#e5f7ee", color: "#147849", fontSize: "2xl", fontWeight: "bold" })} aria-hidden="true">✓</div>
78 <div>
79 <h2 className={css({ margin: 0, marginBottom: "2", fontSize: "xl", fontWeight: "bold" })}>Transfer sent</h2>
80 <p className={css({ margin: 0, color: "#53627a", lineHeight: "1.6" })}>
81 {formatMoney(sentTransfer.amount)} is on its way to {sentTransfer.beneficiary}.
82 </p>
83 <Button className={css({ marginTop: "6" })} variant="outline" size="sm" onClick={() => setSentTransfer(null)}>
84 Send another transfer
85 </Button>
86 </div>
87 </section>
88 </CardBody>
89 </Card>
90 ) : (
91 <Card>
92 <CardHeader>
93 <CardTitle>Transfer details</CardTitle>
94 <CardDescription>Send euros to any account in the SEPA area.</CardDescription>
95 </CardHeader>
96 <form onSubmit={handleSubmit}>
97 <CardBody>
98 <div className={css({ display: "flex", flexDirection: "column", gap: "6" })}>
99 <FormField label="Pay from">
100 <Select
101 value={accountId}
102 onValueChange={(value) => {
103 setAccountId(value);
104 setSentTransfer(null);
105 }}
106 options={data.accounts.map((account) => ({ label: account.name, value: account.id }))}
107 size="md"
108 />
109 </FormField>
110
111 <div className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "3", marginTop: "-4", padding: "4", borderRadius: "lg", background: "#f5f8ff", border: "1px solid #e4eaf5" })}>
112 <div>
113 <p className={css({ margin: 0, marginBottom: "1", color: "#65738b", fontSize: "sm" })}>Available balance</p>
114 <p className={css({ margin: 0, fontSize: "lg", fontWeight: "bold", fontVariantNumeric: "tabular-nums" })}>{formatMoney(selectedAccount.available)}</p>
115 </div>
116 <span className={css({ color: "#72809a", fontSize: "sm", textAlign: "right" })}>{selectedAccount.iban}</span>
117 </div>
118
119 <FormField label="Beneficiary name">
120 <Input required autoComplete="name" value={beneficiary} onChange={(event) => { setBeneficiary(event.target.value); setSentTransfer(null); }} placeholder="e.g. Alex Morgan" />
121 </FormField>
122
123 <FormField label="Beneficiary IBAN" helperText="Enter the IBAN of the account receiving the transfer.">
124 <Input required autoComplete="off" value={iban} onChange={(event) => { setIban(event.target.value); setSentTransfer(null); }} placeholder="e.g. DE89 3704 0044 0532 0130 00" />
125 </FormField>
126
127 <FormField label="Amount" helperText={`Maximum available: ${formatMoney(selectedAccount.available)}`} error={amountError}>
128 <Input
129 required
130 inputMode="decimal"
131 type="number"
132 min="0.01"
133 step="0.01"
134 value={amount}
135 onChange={(event) => updateAmount(event.target.value)}
136 placeholder="0.00"
137 />
138 </FormField>
139
140 <FormField label="Reference (optional)" helperText="Add a note to help identify this payment.">
141 <Input value={reference} onChange={(event) => { setReference(event.target.value); setSentTransfer(null); }} placeholder="e.g. Rent for June" />
142 </FormField>
143 </div>
144 </CardBody>
145 <CardFooter>
146 <Button type="submit" variant="solid" size="md" disabled={Boolean(amountError)}>
147 Send transfer
148 </Button>
149 </CardFooter>
150 </form>
151 </Card>
152 )}
153
154 <p className={css({ marginTop: "5", color: "#748198", fontSize: "sm", textAlign: "center" })}>
155 Transfers are sent securely through the SEPA network.
156 </p>
157 </div>
158 </main>
159 );
160 }
161
`#147849` is a raw color. Use a semantic color token.
page.tsx:80:57 · #53627a `#53627a` is a raw color. Use a semantic color token. page.tsx:111:205 · 1px solid #e4eaf5 `1px solid #e4eaf5` is a raw color. Use a semantic color token. page.tsx:113:80 · #65738b `#65738b` is a raw color. Use a semantic color token. page.tsx:116:51 · #72809a `#72809a` is a raw color. Use a semantic color token. page.tsx:154:52 · #748198 `#748198` is a raw color. Use a semantic color token. typecheck/TS2769 5 quality raw-values/raw-length 4 design-system typecheck/TS18048 4 quality a11y/color-contrast 2 quality page.tsx:1:1 · <p class="m_0 c_#65738b fs_sm fw_semibold ls_0.08em tt_uppercase">Payments</p> Elements must meet minimum color contrast ratio thresholds (3 elements, light theme) page.tsx:1:1 · <p class="m_0 c_#65738b fs_sm fw_semibold ls_0.08em tt_uppercase">Payments</p> Elements must meet minimum color contrast ratio thresholds (4 elements, dark theme) Every run that broke a11y/color-contrast lint/jsx-a11y(prefer-tag-over-role) 1 quality stories-changed, stories-find-by-component
4 stories-find-by-component 3 116 $0.0002