Runs / card-dispute Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 28 counted, under 5 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,423 48 $0.0000 1 list_components 1,686 245 $0.0000 2 get_component 4,380 639 $0.0000 3
Design system
cdb5d9e77633
Output cap The provider's default 11
12 Button,
13 Card,
14 CardHeader,
15 CardTitle,
16 CardBody,
17 DataList,
18 Alert,
19 FormField,
20 } from "@vektos/ds";
21
22 export default function Page() {
23 const {
24 transaction,
25 reasons,
26 deadlineDays,
27 replyDays,
28 } = data;
29
30 const [reason, setReason] = useState<string | null>(null);
31 const [description, setDescription] = useState<string>("");
32 const [contactedMerchant, setContactedMerchant] = useState<boolean>(false);
33 const [submitted, setSubmitted] = useState<boolean>(false);
34 const [errors, setErrors] = useState<{
35 reason?: string;
36 description?: string;
37 contactedMerchant?: string;
38 }>({});
39
40 const handleSubmit = (e: React.FormEvent) => {
41 e.preventDefault();
42 const newErrors: {
43 reason?: string;
44 description?: string;
45 contactedMerchant?: string;
46 } = {};
47
48 if (!reason) {
49 newErrors.reason = "Please select a reason";
50 }
51 if (description.length < 30) {
52 newErrors.description = "At least 30 characters required";
53 }
54 if (!contactedMerchant) {
55 newErrors.contactedMerchant = "You must confirm you contacted the merchant";
56 }
57
58 setErrors(newErrors);
59
60 if (Object.keys(newErrors).length === 0) {
61 setSubmitted(true);
62 }
63 };
64
65 if (submitted) {
66 return (
67 <Alert tone="success" title="Dispute opened">
68 Your dispute is open. The bank will reply within{" "}
69 {replyDays} working days.
70 </Alert>
71 );
72 }
73
74 return (
75 <>
76 <Card>
77 <CardHeader>
78 <CardTitle>Payment details</CardTitle>
79 </CardHeader>
80 <CardBody>
81 <DataList>
82 <DataList.Row>
83 <DataList.Row.Label>Merchant</DataList.Row.Label>
84 <DataList.Row.Content>{transaction.merchant}</DataList.Row.Content>
85 </DataList.Row>
86 <DataList.Row>
87 <DataList.Row.Label>Date</DataList.Row.Label>
88 <DataList.Row.Content>{transaction.date}</DataList.Row.Content>
89 </DataList.Row>
90 <DataList.Row>
91 <DataList.Row.Label>Amount</DataList.Row.Label>
92 <DataList.Row.Content>
93 {transaction.amount} {transaction.currency}
94 </DataList.Row.Content>
95 </DataList.Row>
96 <DataList.Row>
97 <DataList.Row.Label>Card</DataList.Row.Label>
98 <DataList.Row.Content>{transaction.card}</DataList.Row.Content>
99 </DataList.Row>
100 </DataList>
101
102 <p>
103 A dispute must be opened within{" "}
104 <span style={{ color: "var(--vds-color-fg-muted)" }}>{deadlineDays}</span>
105 days of the payment.
106 </p>
107 </CardBody>
108 </Card>
109
110 <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
111 <FormField label="Reason" error={errors.reason}>
112 <Select
113 options={reasons.map((r) => ({ label: r.label, value: r.value }))}
114 value={reason ?? ""}
115 onValueChange={setReason}
116 placeholder="Select a reason"
117 required
118 />
119 </FormField>
120
121 <FormField label="What happened" error={errors.description}>
122 <Textarea
123 rows={4}
124 placeholder="Describe what happened in your own words"
125 onChange={e => setDescription(e.target.value)}
126 />
127 </FormField>
128
129 <FormField
130 label="I contacted the merchant first and could not solve it"
131 error={errors.contactedMerchant}
132 >
133 <Checkbox
134 checked={contactedMerchant}
135 onCheckedChange={setContactedMerchant}
136 >
137 I contacted the merchant first and could not solve it
138 </Checkbox>
139 </FormField>
140
141 <Button type="submit" disabled={submitted}>
142 {submitted ? "Dispute submitted" : "Open dispute"}
143 </Button>
144 </form>
145 </>
146 );
147 }
Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'.
page.tsx:87:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:87:50 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:88:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:88:66 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:89:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:90:23 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:91:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:91:52 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:92:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:94:26 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:95:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:96:23 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:97:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:97:50 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:98:25 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:98:66 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:99:24 Property 'Row' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. lint/eslint(no-unused-vars) 1 quality typecheck/TS2322 1 quality page.tsx:117:13 Type '{ options: { label: string; value: string; }[]; value: string; onValueChange: Dispatch<SetStateAction<string | null>>; placeholder: string; required: true; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. Every run that broke typecheck/TS2322 4 get_component 2,224 29 $0.0000
5 get_component 1,021 37 $0.0000
6 get_component 1,540 426 $0.0000
7 list_tokens 2,777 877 $0.0000
8 write_file 2,584 4,414 $0.0000
9 check_code 7,025 1,017 $0.0000
10 check_code 1,801 1,088 $0.0000