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 184 34 $0.0000 2 get_guidelines, list_components 348 38 $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 CardFooter,
11 CardHeader,
12 CardTitle,
13 DataList,
14 DatePicker,
15 FormField,
16 Heading,
17 Input,
18 RadioGroup,
19 Select,
20 Stack,
21 } from "@vektos/ds";
22
23 export default function Page() {
24 const [dateOfBirth, setDateOfBirth] = useState<string | null>(null);
25 const [nationality, setNationality] = useState("");
26 const [countryOfResidence, setCountryOfResidence] = useState("");
27 const [taxId, setTaxId] = useState("");
28 const [documentType, setDocumentType] = useState("");
29 const [documentNumber, setDocumentNumber] = useState("");
30 const [pep, setPep] = useState("");
31 const [errors, setErrors] = useState<Record<string, string>>({});
32 const [reviewing, setReviewing] = useState(false);
33
34 const countryOptions = data.countries.map((c) => ({ label: c.name, value: c.code }));
35 const documentOptions = data.documentTypes.map((d) => ({ label: d.label, value: d.value }));
36
37 const validate = () => {
38 const next: Record<string, string> = {};
39 if (!dateOfBirth) next.dateOfBirth = "Enter your date of birth.";
40 if (!nationality) next.nationality = "Select your nationality.";
41 if (!countryOfResidence) next.countryOfResidence = "Select your country of residence.";
42 if (!taxId.trim()) next.taxId = "Enter your tax identification number.";
43 if (!documentType) next.documentType = "Select the type of identity document.";
44 if (!documentNumber.trim()) next.documentNumber = "Enter your document number.";
45 if (!pep) next.pep = "Select whether you are a politically exposed person.";
46 setErrors(next);
47 return Object.keys(next).length === 0;
48 };
49
50 const handleSubmit = () => {
51 if (validate()) setReviewing(true);
52 };
53
54 const customerName = `${data.customer.firstName} ${data.customer.lastName}`;
55
56 if (reviewing) {
57 return (
58 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlockStart="8">
59 <Heading level={1}>Identity verification</Heading>
60 <Alert tone="neutral" title="Details being reviewed">
61 Your identity details are being reviewed.
62 </Alert>
63 </Stack>
64 );
65 }
66
67 return (
68 <Stack gap="6" maxWidth="md" marginInline="auto" marginBlockStart="8">
69 <Heading level={1}>Identity verification</Heading>
70 <Card>
71 <CardHeader>
72 <CardTitle>Customer details</CardTitle>
73 </CardHeader>
74 <CardBody>
75 <DataList
76 items={[
77 { label: "Full name", value: customerName },
78 { label: "Email", value: data.customer.email },
79 ]}
80 />
81 </CardBody>
82 </Card>
83 <Card>
84 <CardHeader>
85 <CardTitle>Verify your identity</CardTitle>
86 </CardHeader>
87 <CardBody>
88 <Stack gap="4">
89 <FormField label="Date of birth" required error={errors.dateOfBirth}>
90 <DatePicker value={dateOfBirth} onValueChange={setDateOfBirth} />
91 </FormField>
92 <FormField label="Nationality" required error={errors.nationality}>
93 <Select
94 options={countryOptions}
95 value={nationality}
96 onValueChange={setNationality}
97 placeholder="Select your nationality"
98 />
99 </FormField>
100 <FormField label="Country of residence" required error={errors.countryOfResidence}>
101 <Select
102 options={countryOptions}
103 value={countryOfResidence}
104 onValueChange={setCountryOfResidence}
105 placeholder="Select your country of residence"
106 />
107 </FormField>
108 <FormField label="Tax identification number" required error={errors.taxId}>
109 <Input value={taxId} onChange={(e) => setTaxId(e.target.value)} />
110 </FormField>
111 <FormField label="Type of identity document" required error={errors.documentType}>
112 <Select
113 options={documentOptions}
114 value={documentType}
115 onValueChange={setDocumentType}
116 placeholder="Select a document type"
117 />
118 </FormField>
119 <FormField label="Document number" required error={errors.documentNumber}>
120 <Input value={documentNumber} onChange={(e) => setDocumentNumber(e.target.value)} />
121 </FormField>
122 <RadioGroup
123 label="Are you a politically exposed person?"
124 required
125 value={pep}
126 onValueChange={setPep}
127 error={errors.pep}
128 options={[
129 { label: "Yes", value: "yes" },
130 { label: "No", value: "no" },
131 ]}
132 orientation="horizontal"
133 />
134 </Stack>
135 </CardBody>
136 <CardFooter>
137 <Button onClick={handleSubmit}>Submit</Button>
138 </CardFooter>
139 </Card>
140 </Stack>
141 );
142 }
get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component 1,979 120 $0.0000
5 get_component, get_component, get_component, get_component 5,046 97 $0.0000
6 list_tokens 2,843 33 $0.0000
7 list_files 1,045 33 $0.0000
10 get_component 66 964 $0.0000
11 list_tokens 1,517 445 $0.0000
12 check_code 18,452 3,320 $0.0000
13 check_code 4,128 1,144 $0.0000
14 write_file 1,191 3,632 $0.0000
15 check_code 8,239 1,135 $0.0000