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 list_files 1,407 49 $0.0000 1 read_file 1,476 38 $0.0000 2 list_components 1,781 153 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 FormField,
8 Input,
9 Select,
10 DatePicker,
11 Checkbox,
12 Button,
13 Stack,
14 Text,
15 } from "@vektos/ds";
16
17 export default function Page() {
18 const [submitted, setSubmitted] = useState(false);
19 const [dateOfBirth, setDateOfBirth] = useState<string | null>(null);
20 const [nationality, setNationality] = useState<string>("");
21 const [countryOfResidence, setCountryOfResidence] = useState<string>("");
22 const [taxId, setTaxId] = useState<string>("");
23 const [documentType, setDocumentType] = useState<string>("");
24 const [documentNumber, setDocumentNumber] = useState<string>("");
25 const [politicallyExposed, setPoliticallyExposed] = useState<boolean>(false);
26 const [errors, setErrors] = useState<Record<string, string>>({});
27
28 const handleSubmit = (e: React.FormEvent) => {
29 e.preventDefault();
30 const newErrors: Record<string, string> = {};
31 if (!dateOfBirth) newErrors.dateOfBirth = "This field is required";
32 if (!nationality) newErrors.nationality = "This field is required";
33 if (!countryOfResidence) newErrors.countryOfResidence = "This field is required";
34 if (!taxId) newErrors.taxId = "This field is required";
35 if (!documentType) newErrors.documentType = "This field is required";
36 if (!documentNumber) newErrors.documentNumber = "This field is required";
37 setErrors(newErrors);
38 if (Object.keys(newErrors).length === 0) {
39 setSubmitted(true);
40 }
41 };
42
43 if (submitted) {
44 return (
45 <Stack gap="4">
46 <Text>Identity verification details are being reviewed.</Text>
47 </Stack>
48 );
49 }
50
51 return (
52 <Stack gap="4">
53 <Stack gap="2">
54 <Text>Full name: {data.customer.firstName} {data.customer.lastName}</Text>
55 <Text>Email: {data.customer.email}</Text>
56 </Stack>
57
58 <form onSubmit={handleSubmit}>
59 <FormField label="Date of birth" error={errors.dateOfBirth}>
60 <DatePicker
61 name="dateOfBirth"
62 placeholder="YYYY‑MM‑DD"
63 value={dateOfBirth}
64 onValueChange={(v) => setDateOfBirth(v)}
65 />
66 </FormField>
67
68 <FormField label="Nationality" error={errors.nationality}>
69 <Select
70 name="nationality"
71 placeholder="Select nationality"
72 value={nationality}
73 onValueChange={(v) => setNationality(v)}
74 options={data.countries.map((c) => ({ label: c.name, value: c.code }))}
75 />
76 </FormField>
77
78 <FormField label="Country of residence" error={errors.countryOfResidence}>
79 <Select
80 name="countryOfResidence"
81 placeholder="Select country of residence"
82 value={countryOfResidence}
83 onValueChange={(v) => setCountryOfResidence(v)}
84 options={data.countries.map((c) => ({ label: c.name, value: c.code }))}
85 />
86 </FormField>
87
88 <FormField label="Tax identification number" error={errors.taxId}>
89 <Input
90 name="taxId"
91 placeholder="Enter tax ID"
92 value={taxId}
93 onChange={(e) => setTaxId(e.target.value)}
94 />
95 </FormField>
96
97 <FormField label="Type of identity document" error={errors.documentType}>
98 <Select
99 name="documentType"
100 placeholder="Select document type"
101 value={documentType}
102 onValueChange={(v) => setDocumentType(v)}
103 options={data.documentTypes.map((d) => ({ label: d.label, value: d.value }))}
104 />
105 </FormField>
106
107 <FormField label="Document number" error={errors.documentNumber}>
108 <Input
109 name="documentNumber"
110 placeholder="Enter document number"
111 value={documentNumber}
112 onChange={(e) => setDocumentNumber(e.target.value)}
113 />
114 </FormField>
115
116 <FormField label="Politically exposed person" error={errors.politicallyExposed}>
117 <Checkbox
118 name="politicallyExposed"
119 checked={politicallyExposed}
120 onCheckedChange={(checked) => setPoliticallyExposed(checked)}
121 >
122 Yes, I am a politically exposed person
123 </Checkbox>
124 </FormField>
125
126 <Button type="submit" variant="solid" size="md">
127 Continue
128 </Button>
129 </form>
130 </Stack>
131 );
132 }
4 get_component 5,541 29 $0.0000
5 get_component 1,854 30 $0.0000
6 get_component 2,628 30 $0.0000
7 get_component 1,437 29 $0.0000
8 get_component 2,330 45 $0.0000
9 write_file 9,145 3,573 $0.0000
10 check_code 169 1,335 $0.0000
11 get_component 14,626 1,021 $0.0000
12 write_file 1,976 1,842 $0.0000
13 check_code 3,845 1,294 $0.0000
14 write_file 1,325 2,048 $0.0000
15 check_code 3,400 1,258 $0.0000
16 check_code 2,751 2,939 $0.0000
17 write_file 1,685 1,550 $0.0000
18 check_code 3,261 1,088 $0.0000
19 write_file 214 1,480 $0.0000