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 140 30 $0.0000 1 read_file, list_files 56 46 $0.0000 2 get_guidelines, list_components 372 44 $0.0000 3
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 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 = data.customer;
26 const countries = data.countries.map((c) => ({ label: c.name, value: c.code }));
27 const documentTypes = data.documentTypes.map((d) => ({
28 label: d.label,
29 value: d.value,
30 }));
31
32 const [dob, setDob] = useState<string | null>(null);
33 const [nationality, setNationality] = useState<string | null>(null);
34 const [residence, setResidence] = useState<string | null>(null);
35 const [taxId, setTaxId] = useState("");
36 const [docType, setDocType] = useState("");
37 const [docNumber, setDocNumber] = useState("");
38 const [pep, setPep] = useState("");
39
40 const [errors, setErrors] = useState<Record<string, string>>({});
41 const [reviewing, setReviewing] = useState(false);
42
43 const handleSubmit = () => {
44 const next: Record<string, string> = {};
45 if (!dob) next.dob = "Enter your date of birth.";
46 if (!nationality) next.nationality = "Select your nationality.";
47 if (!residence) next.residence = "Select your country of residence.";
48 if (!taxId.trim()) next.taxId = "Enter your tax identification number.";
49 if (!docType) next.docType = "Select the type of identity document.";
50 if (!docNumber.trim()) next.docNumber = "Enter the document number.";
51 if (!pep) next.pep = "Select yes or no.";
52 setErrors(next);
53 if (Object.keys(next).length === 0) setReviewing(true);
54 };
55
56 if (reviewing) {
57 return (
58 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="8">
59 <Heading level={1}>Identity verification</Heading>
60 <Alert tone="success" title="Details submitted">
61 Your details are being reviewed.
62 </Alert>
63 </Stack>
64 );
65 }
66
67 return (
68 <Stack gap="6" maxWidth="lg" marginInline="auto" marginBlock="8">
69 <Heading level={1}>Identity verification</Heading>
70
71 <Card>
72 <CardHeader>
73 <CardTitle>Your details</CardTitle>
74 </CardHeader>
75 <CardBody>
76 <DataList
77 items={[
78 { label: "Full name", value: `${customer.firstName} ${customer.lastName}` },
79 { label: "Email", value: customer.email },
80 ]}
81 />
82 <Text size="sm" tone="muted" marginBlockStart="3">
83 These details are already on file and cannot be changed here.
84 </Text>
85 </CardBody>
86 </Card>
87
88 <Card>
89 <CardHeader>
90 <CardTitle>Identity information</CardTitle>
91 </CardHeader>
92 <CardBody>
93 <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
94 <Stack gap="4">
95 <FormField label="Date of birth" error={errors.dob}>
96 <DatePicker value={dob} onValueChange={setDob} />
97 </FormField>
98
99 <FormField label="Nationality" error={errors.nationality}>
100 <Combobox
101 options={countries}
102 value={nationality}
103 onValueChange={setNationality}
104 placeholder="Select a country"
105 />
106 </FormField>
107
108 <FormField label="Country of residence" error={errors.residence}>
109 <Combobox
110 options={countries}
111 value={residence}
112 onValueChange={setResidence}
113 placeholder="Select a country"
114 />
115 </FormField>
116
117 <FormField label="Tax identification number" error={errors.taxId}>
118 <Input
119 value={taxId}
120 onChange={(e) => setTaxId(e.target.value)}
121 />
122 </FormField>
123
124 <FormField label="Type of identity document" error={errors.docType}>
125 <Select
126 options={documentTypes}
127 value={docType}
128 onValueChange={setDocType}
129 placeholder="Select a document type"
130 />
131 </FormField>
132
133 <FormField label="Document number" error={errors.docNumber}>
134 <Input
135 value={docNumber}
136 onChange={(e) => setDocNumber(e.target.value)}
137 />
138 </FormField>
139
140 <RadioGroup
141 label="Are you a politically exposed person?"
142 value={pep}
143 onValueChange={setPep}
144 error={errors.pep}
145 options={[
146 { label: "Yes", value: "yes" },
147 { label: "No", value: "no" },
148 ]}
149 orientation="horizontal"
150 />
151
152 <Stack flexDirection="row" justifyContent="flex-end">
153 <Button type="submit">Submit</Button>
154 </Stack>
155 </Stack>
156 </form>
157 </CardBody>
158 </Card>
159 </Stack>
160 );
161 }
162
get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component 3,793 137 $0.0000
5 get_component, get_component 5,048 309 $0.0000
6 write_file 16,420 3,966 $0.0000
7 check_code 5,946 1,147 $0.0000
8 check_code 1,220 461 $0.0000
9 write_file 480 1,302 $0.0000
10 check_code 1,358 1,164 $0.0000