Runs / transfer-form Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 4 counted, under 3 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 get_guidelines, list_components, list_tokens, list_files 731 108 $0.0000 1 read_file, read_file 7,354 56 $0.0000 2 list_files 381 59 $0.0000
cdb5d9e77633
Output cap 20,000 tokens a step 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 export default function Page() {
24 const currency = data.currency;
25 const accounts = data.accounts;
26
27 const [accountId, setAccountId] = useState(data.defaultAccountId);
28 const account = accounts.find((a) => a.id === accountId) ?? accounts[0];
29
30 const [beneficiaryName, setBeneficiaryName] = useState("");
31 const [iban, setIban] = useState("");
32 const [amount, setAmount] = useState<number | null>(null);
33 const [reference, setReference] = useState("");
34 const [submitted, setSubmitted] = useState<{ amount: number; beneficiary: string } | null>(
35 null,
36 );
37
38 const balance = account.available;
39 const amountExceeds = amount !== null && amount > balance;
40 const canSubmit =
41 beneficiaryName.trim() !== "" &&
42 iban.trim() !== "" &&
43 amount !== null &&
44 amount > 0 &&
45 !amountExceeds;
46
47 const handleSubmit = (event: React.FormEvent) => {
48 event.preventDefault();
49 if (!canSubmit || amount === null) return;
50 setSubmitted({ amount, beneficiary: beneficiaryName.trim() });
51 setBeneficiaryName("");
52 setIban("");
53 setAmount(null);
54 setReference("");
55 };
56
57 return (
58 <div
59 className={`vektos ${css({
60 bg: "bg.canvas",
61 color: "fg.default",
62 minHeight: "full",
63 p: "6",
64 })}`}
65 >
66 <Stack gap="6" maxWidth="md" marginInline="auto">
67 <Heading level={1}>Send a SEPA transfer</Heading>
68
69 {submitted && (
70 <Alert tone="success" title="Transfer sent">
71 <FormatNumber value={submitted.amount} format="currency" currency={currency} /> to{" "}
72 {submitted.beneficiary}
73 </Alert>
74 )}
75
76 <Card>
77 <CardHeader>
78 <CardTitle>Transfer details</CardTitle>
79 </CardHeader>
80 <CardBody>
81 <form onSubmit={handleSubmit}>
82 <Stack gap="4">
83 <FormField label="Pay from" required>
84 <Select
85 value={accountId}
86 onValueChange={setAccountId}
87 options={accounts.map((a) => ({ label: a.name, value: a.id }))}
88 />
89 </FormField>
90
91 <Text size="sm" tone="muted">
92 Available balance:{" "}
93 <FormatNumber value={balance} format="currency" currency={currency} />
94 </Text>
95
96 <FormField label="Beneficiary name" required>
97 <Input
98 value={beneficiaryName}
99 onChange={(e) => setBeneficiaryName(e.target.value)}
100 placeholder="Full name"
101 />
102 </FormField>
103
104 <FormField label="Beneficiary IBAN" required>
105 <Input
106 value={iban}
107 onChange={(e) => setIban(e.target.value)}
108 placeholder="IT00 X000 0000 0000 0000 0000 000"
109 />
110 </FormField>
111
112 <FormField
113 label="Amount"
114 required
115 error={
116 amountExceeds
117 ? "Amount exceeds the available balance."
118 : undefined
119 }
120 >
121 <NumberInput
122 value={amount}
123 onValueChange={setAmount}
124 format="currency"
125 currency={currency}
126 fractionDigits={2}
127 min={0.01}
128 showSteppers={false}
129 />
130 </FormField>
131
132 <FormField label="Reference" helperText="Optional">
133 <Input
134 value={reference}
135 onChange={(e) => setReference(e.target.value)}
136 placeholder="Invoice number or note"
137 />
138 </FormField>
139
140 <Stack flexDirection="row" gap="2" justifyContent="flex-end">
141 <Button type="submit" disabled={!canSubmit}>
142 Send transfer
143 </Button>
144 </Stack>
145 </Stack>
146 </form>
147 </CardBody>
148 </Card>
149 </Stack>
150 </div>
151 );
152 }
153 ```
154
155 Let me run check_code.<|end|><|start|> assistant to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="filename">
156 page.tsx
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component 9,021 103 $0.0000
5 list_files 1,988 44 $0.0000
6 write_file 10,878 3,670 $0.0000
7 check_code 3,756 1,029 $0.0000