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_files 182 57 $0.0000 1 read_file, list_tokens 5,023 50 $0.0000 2 get_component, get_component, get_component 1,322 90 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Button,
7 Card,
8 CardBody,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12 Combobox,
13 DataList,
14 DatePicker,
15 FormField,
16 Heading,
17 Input,
18 RadioGroup,
19 Select,
20 Stack,
21 Text,
22 } from "@vektos/ds";
23
24 export default function Page() {
25 const { customer, countries, documentTypes } = data;
26
27 const [dob, setDob] = useState<string | null>(null);
28 const [nationality, setNationality] = useState<string | null>(null);
29 const [residence, setResidence] = useState<string | null>(null);
30 const [tin, setTin] = useState("");
31 const [docType, setDocType] = useState("");
32 const [docNumber, setDocNumber] = useState("");
33 const [pep, setPep] = useState("");
34
35 const [errors, setErrors] = useState<Record<string, string>>({});
36 const [reviewing, setReviewing] = useState(false);
37
38 const countryOptions = countries.map((country) => ({
39 label: country.name,
40 value: country.code,
41 }));
42 const documentOptions = documentTypes.map((document) => ({
43 label: document.label,
44 value: document.value,
45 }));
46
47 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
48 event.preventDefault();
49 const nextErrors: Record<string, string> = {};
50 if (!dob) nextErrors.dob = "Enter your date of birth.";
51 if (!nationality) nextErrors.nationality = "Select your nationality.";
52 if (!residence) nextErrors.residence = "Select your country of residence.";
53 if (!tin.trim()) nextErrors.tin = "Enter your tax identification number.";
54 if (!docType) nextErrors.docType = "Select a type of identity document.";
55 if (!docNumber.trim()) nextErrors.docNumber = "Enter your document number.";
56 if (!pep) nextErrors.pep = "Select whether you are a politically exposed person.";
57 setErrors(nextErrors);
58 if (Object.keys(nextErrors).length === 0) {
59 setReviewing(true);
60 }
61 };
62
63 if (reviewing) {
64 return (
65 <div className="vektos">
66 <Stack gap="4" maxWidth="lg" marginInline="auto" marginBlock="8">
67 <Heading level={1}>Identity verification</Heading>
68 <Card>
69 <CardBody>
70 <Text>Your details are being reviewed.</Text>
71 </CardBody>
72 </Card>
73 </Stack>
74 </div>
75 );
76 }
77
78 return (
79 <div className="vektos">
80 <Stack gap="4" maxWidth="lg" marginInline="auto" marginBlock="8">
81 <Heading level={1}>Identity verification</Heading>
82
83 <Card>
84 <CardHeader>
85 <CardTitle>Customer details</CardTitle>
86 <CardDescription>
87 These details are already on file and cannot be edited.
88 </CardDescription>
89 </CardHeader>
90 <CardBody>
91 <DataList
92 items={[
93 {
94 label: "Full name",
95 value: `${customer.firstName} ${customer.lastName}`,
96 },
97 { label: "Email", value: customer.email },
98 ]}
99 />
100 </CardBody>
101 </Card>
102
103 <Card>
104 <CardHeader>
105 <CardTitle>Identity details</CardTitle>
106 </CardHeader>
107 <CardBody>
108 <form onSubmit={handleSubmit}>
109 <Stack gap="4">
110 <FormField label="Date of birth" error={errors.dob}>
111 <DatePicker value={dob} onValueChange={setDob} />
112 </FormField>
113
114 <FormField label="Nationality" error={errors.nationality}>
115 <Combobox
116 options={countryOptions}
117 value={nationality}
118 onValueChange={setNationality}
119 placeholder="Type a country"
120 />
121 </FormField>
122
123 <FormField label="Country of residence" error={errors.residence}>
124 <Combobox
125 options={countryOptions}
126 value={residence}
127 onValueChange={setResidence}
128 placeholder="Type a country"
129 />
130 </FormField>
131
132 <FormField
133 label="Tax identification number"
134 error={errors.tin}
135 >
136 <Input
137 value={tin}
138 onChange={(event) => setTin(event.target.value)}
139 />
140 </FormField>
141
142 <FormField
143 label="Type of identity document"
144 error={errors.docType}
145 >
146 <Select
147 options={documentOptions}
148 value={docType}
149 onValueChange={setDocType}
150 placeholder="Choose a document"
151 />
152 </FormField>
153
154 <FormField label="Document number" error={errors.docNumber}>
155 <Input
156 value={docNumber}
157 onChange={(event) => setDocNumber(event.target.value)}
158 />
159 </FormField>
160
161 <RadioGroup
162 label="Are you a politically exposed person?"
163 error={errors.pep}
164 value={pep}
165 onValueChange={setPep}
166 options={[
167 { label: "Yes", value: "yes" },
168 { label: "No", value: "no" },
169 ]}
170 orientation="horizontal"
171 />
172
173 <Stack
174 flexDirection="row"
175 justifyContent="flex-end"
176 gap="2"
177 >
178 <Button type="submit">Submit</Button>
179 </Stack>
180 </Stack>
181 </form>
182 </CardBody>
183 </Card>
184 </Stack>
185 </div>
186 );
187 }
get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 3,006 476 $0.0000
5 get_component 5,432 130 $0.0000
6 write_file 737 4,613 $0.0000
7 check_code 4,670 1,252 $0.0000
8 write_file 1,338 1,470 $0.0000
9 check_code 1,552 1,241 $0.0000
10 write_file 26,241 1,696 $0.0000
11 check_code 3,001 1,236 $0.0000