Runs / kyc-form Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 11 counted, under 4 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
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 read_file 1,767 158 $0.0000 1 write_file 4,288 2,131 $0.0000 2 stop 6,445 166 $0.0000
cdb5d9e77633
Output cap The provider's default 11
12 customerEmail: string;
13 countries: Country[];
14 docTypes: DocType[];
15 }
16
17 export const IdentityVerificationPage: React.FC = () => {
18 const [dob, setDob] = useState("");
19 const [nationality, setNationality] = useState("");
20 const [residenceCountry, setResidenceCountry] = useState("");
21 const [tin, setTin] = useState("");
22 const [docType, setDocType] = useState("");
23 const [docNumber, setDocNumber] = useState("");
24 const [isPEP, setIsPEP] = useState<string | null>(null);
25 const [submitted, setSubmitted] = useState(false);
26 const [errors, setErrors] = useState<Record<string, boolean>>({
27 dob: false,
28 nationality: false,
29 residenceCountry: false,
30 tin: false,
31 docType: false,
32 docNumber: false,
33 isPEP: false,
34 });
35
36 const countries: Country[] = data.countries.map((c) => ({ code: c.code, name: c.name }));
37 const docTypes: DocType[] = data.docTypes.map((d) => ({ value: d.value, label: d.label }));
38
39 const handleSubmit = (e: React.FormEvent) => {
40 e.preventDefault();
41 const newErrors: Record<string, boolean> = {
42 dob: !dob.trim(),
43 nationality: !nationality.trim(),
44 residenceCountry: !residenceCountry.trim(),
45 tin: !tin.trim(),
46 docType: !docType.trim(),
47 docNumber: !docNumber.trim(),
48 isPEP: !isPEP,
49 };
50 setErrors(newErrors);
51 const allFilled = Object.values(newErrors).every((v) => v === false);
52 if (allFilled) {
53 setSubmitted(true);
54 }
55 };
56
57 if (submitted) {
58 return <p>Details are being reviewed.</p>;
59 }
60
61 const fullName = `${data.customer.firstName} ${data.customer.lastName}`;
62
63 return (
64 <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: "2rem auto" }}>
65 {/* Display known customer info */}
66 <div style={{ marginBottom: 1rem }}>
67 <strong>Full Name:</strong> {fullName}{" "}{" "}<br />
68 <strong>Email:</strong> {data.customer.email}
69 </div>
70
71 {/* DOB */}
72 <div style={{ marginBottom: 0.8rem }}>
73 <label htmlFor="dob">Date of Birth</label>
74 <input
75 id="dob"
76 type="date"
77 value={dob}
78 onChange={(e) => setDob(e.target.value)}
79 style={{
80 width: "100%",
81 padding: "0.4rem",
82 marginTop: "0.2rem",
83 }}
84 />
85 {errors.dob && <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>}
86 </div>
87
88 {/* Nationality */}
89 <div style={{ marginBottom: 0.8rem }}>
90 <label htmlFor="nationality">Nationality</label>
91 <select
92 id="nationality"
93 value={nationality}
94 onChange={(e) => setNationality(e.target.value)}
95 style={{ width: "100%", padding: "0.4rem", marginTop: "0.2rem" }}
96 >
97 <option value="">Select nationality</option>
98 {countries.map((c) => (
99 <option key={c.code} value={c.name}>
100 {c.name}
101 </option>
102 ))}
103 </select>
104 {errors.nationality && (
105 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
106 )}
107 </div>
108
109 {/* Country of residence */}
110 <div style={{ marginBottom: 0.8rem }}>
111 <label htmlFor="residenceCountry">Country of Residence</label>
112 <select
113 id="residenceCountry"
114 value={residenceCountry}
115 onChange={(e) => setResidenceCountry(e.target.value)}
116 style={{ width: "100%", padding: "0.4rem", marginTop: "0.2rem" }}
117 >
118 <option value="">Select country</option>
119 {countries.map((c) => (
120 <option key={c.code} value={c.name}>
121 {c.name}
122 </option>
123 ))}
124 </select>
125 {errors.residenceCountry && (
126 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
127 )}
128 </div>
129
130 {/* Tax Identification Number */}
131 <div style={{ marginBottom: 0.8rem }}>
132 <label htmlFor="tin">Tax Identification Number</label>
133 <input
134 id="tin"
135 type="text"
136 value={tin}
137 onChange={(e) => setTin(e.target.value)}
138 style={{
139 width: "100%",
140 padding: "0.4rem",
141 marginTop: "0.2rem",
142 }}
143 />
144 {errors.tin && (
145 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
146 )}
147 </div>
148
149 {/* Type of identity document */}
150 <div style={{ marginBottom: 0.8rem }}>
151 <label htmlFor="docType">Identity Document Type</label>
152 <select
153 id="docType"
154 value={docType}
155 onChange={(e) => setDocType(e.target.value)}
156 style={{ width: "100%", padding: "0.4rem", marginTop: "0.2rem" }}
157 >
158 <option value="">Select document type</option>
159 {docTypes.map((d) => (
160 <option key={d.value} value={d.label}>
161 {d.label}
162 </option>
163 ))}
164 </select>
165 {errors.docType && (
166 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
167 )}
168 </div>
169
170 {/* Document number */}
171 <div style={{ marginBottom: 0.8rem }}>
172 <label htmlFor="docNumber">Document Number</label>
173 <input
174 id="docNumber"
175 type="text"
176 value={docNumber}
177 onChange={(e) => setDocNumber(e.target.value)}
178 style={{
179 width: "100%",
180 padding: "0.4rem",
181 marginTop: "0.2rem",
182 }}
183 />
184 {errors.docNumber && (
185 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
186 )}
187 </div>
188
189 {/* PEP */}
190 <div style={{ marginBottom: 0.8rem }}>
191 <label>Are you a Politically Exposed Person?</label>
192 <label style={{ marginRight: "1.5rem" }}>
193 <input
194 type="radio"
195 name="pep"
196 value="yes"
197 checked={isPEP === "yes"}
198 onChange={() => setIsPEP("yes")}
199 />
200 Yes
201 </label>
202 <label>
203 <input
204 type="radio"
205 name="pep"
206 value="no"
207 checked={isPEP === "no"}
208 onChange={() => setIsPEP("no")}
209 />
210 No
211 </label>
212 {errors.isPEP && (
213 <p style={{ color: "red", fontSize: "0.8rem" }}>This field is required.</p>
214 )}
215 </div>
216
217 <button type="submit" style={{ padding: "0.6rem 1rem", fontSize: "1rem" }}>
218 Continue
219 </button>
220 </form>
221 );
222 };
223
224 export default IdentityVerificationPage;
lint/syntax-error 1 quality render/build-failed 1 completeness