Runs / kyc-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 get_guidelines, list_components, list_tokens, list_files, read_file 374 117 $0.0000 1 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 7,646 257 $0.0000 2 get_component 9,890 63
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 DatePicker,
14 FormField,
15 Heading,
16 Input,
17 RadioGroup,
18 Select,
19 Stack,
20 Text,
21 } from "@vektos/ds";
22
23 const countryOptions = data.countries.map((c) => ({
24 label: c.name,
25 value: c.code,
26 }));
27
28 const documentOptions = data.documentTypes.map((d) => ({
29 label: d.label,
30 value: d.value,
31 }));
32
33 const pepOptions = [
34 { label: "Yes", value: "yes" },
35 { label: "No", value: "no" },
36 ];
37
38 export default function Page() {
39 const [dob, setDob] = useState<string | null>(null);
40 const [nationality, setNationality] = useState("");
41 const [residence, setResidence] = useState("");
42 const [taxId, setTaxId] = useState("");
43 const [docType, setDocType] = useState("");
44 const [docNumber, setDocNumber] = useState("");
45 const [pep, setPep] = useState("");
46 const [errors, setErrors] = useState<Record<string, string>>({});
47 const [submitted, setSubmitted] = useState(false);
48
49 function clearError(key: string) {
50 setErrors((prev) => {
51 if (!prev[key]) return prev;
52 const next = { ...prev };
53 delete next[key];
54 return next;
55 });
56 }
57
58 function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
59 event.preventDefault();
60 const next: Record<string, string> = {};
61 if (!dob) next.dob = "Enter your date of birth.";
62 if (!nationality) next.nationality = "Select your nationality.";
63 if (!residence) next.residence = "Select your country of residence.";
64 if (!taxId.trim()) next.taxId = "Enter your tax identification number.";
65 if (!docType) next.docType = "Select the type of identity document.";
66 if (!docNumber.trim()) next.docNumber = "Enter your document number.";
67 if (!pep) next.pep = "Select whether you are a politically exposed person.";
68 setErrors(next);
69 if (Object.keys(next).length === 0) {
70 setSubmitted(true);
71 }
72 }
73
74 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
75
76 if (submitted) {
77 return (
78 <div className="vektos">
79 <Stack gap="4" maxWidth="md" marginInline="auto" marginBlock="8">
80 <Heading level={1}>Identity verification</Heading>
81 <Alert tone="success" title="Details submitted">
82 Your details are being reviewed.
83 </Alert>
84 </Stack>
85 </div>
86 );
87 }
88
89 return (
90 <div className="vektos">
91 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlock="8">
92 <Heading level={1}>Identity verification</Heading>
93 <Text tone="muted" size="sm">
94 Confirm your identity to continue opening your account.
95 </Text>
96 <Card>
97 <CardHeader>
98 <CardTitle>Your details</CardTitle>
99 </CardHeader>
100 <CardBody>
101 <DataList
102 items={[
103 { label: "Full name", value: fullName },
104 { label: "Email", value: data.customer.email },
105 ]}
106 />
107 </CardBody>
108 </Card>
109 <Card>
110 <CardHeader>
111 <CardTitle>Identity information</CardTitle>
112 </CardHeader>
113 <CardBody>
114 <form onSubmit={handleSubmit}>
115 <Stack gap="4">
116 <FormField label="Date of birth" error={errors.dob}>
117 <DatePicker
118 value={dob}
119 onValueChange={(value) => {
120 setDob(value);
121 clearError("dob");
122 }}
123 />
124 </FormField>
125 <FormField label="Nationality" error={errors.nationality}>
126 <Select
127 options={countryOptions}
128 value={nationality}
129 onValueChange={(value) => {
130 setNationality(value);
131 clearError("nationality");
132 }}
133 placeholder="Select nationality"
134 />
135 </FormField>
136 <FormField label="Country of residence" error={errors.residence}>
137 <Select
138 options={countryOptions}
139 value={residence}
140 onValueChange={(value) => {
141 setResidence(value);
142 clearError("residence");
143 }}
144 placeholder="Select country of residence"
145 />
146 </FormField>
147 <FormField label="Tax identification number" error={errors.taxId}>
148 <Input
149 value={taxId}
150 onChange={(event) => {
151 setTaxId(event.target.value);
152 clearError("taxId");
153 }}
154 />
155 </FormField>
156 <FormField label="Type of identity document" error={errors.docType}>
157 <Select
158 options={documentOptions}
159 value={docType}
160 onValueChange={(value) => {
161 setDocType(value);
162 clearError("docType");
163 }}
164 placeholder="Select document type"
165 />
166 </FormField>
167 <FormField label="Document number" error={errors.docNumber}>
168 <Input
169 value={docNumber}
170 onChange={(event) => {
171 setDocNumber(event.target.value);
172 clearError("docNumber");
173 }}
174 />
175 </FormField>
176 <RadioGroup
177 label="Are you a politically exposed person?"
178 value={pep}
179 onValueChange={(value) => {
180 setPep(value);
181 clearError("pep");
182 }}
183 options={pepOptions}
184 orientation="horizontal"
185 error={errors.pep}
186 required
187 />
188 <Stack flexDirection="row" justifyContent="flex-end">
189 <Button type="submit" variant="solid">
190 Submit
191 </Button>
192 </Stack>
193 </Stack>
194 </form>
195 </CardBody>
196 </Card>
197 </Stack>
198 </div>
199 );
200 }
201
3 write_file 648 3,493 $0.0000
4 check_code 21,829 1,347 $0.0000
5 write_file 1,376 1,483 $0.0000
6 check_code 1,539 1,341 $0.0000