Runs / stock-adjustment Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 14 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,229 53 $0.0000 1 list_components 1,502 44 $0.0000 2 write_file 3,995 1,425 $0.0000 3
cdb5d9e77633
Output cap 20,000 tokens a step 12 Button,
13 Alert,
14 Stack,
15 Heading,
16 } from "@vektos/ds";
17
18 export default function Page() {
19 const {
20 sku,
21 name,
22 location,
23 onHand,
24 unit,
25 } = data.item;
26
27 const reasons = data.reasons.map((r) => ({
28 value: r.code,
29 label: r.label,
30 description: r.description,
31 }));
32
33 const [newQty, setNewQty] = useState("");
34 const [difference, setDifference] = useState(0);
35 const [selectedReason, setSelectedReason] = useState<string | null>(null);
36 const [comment, setComment] = useState("");
37 const [message, setMessage] = useState<string | null>(null);
38 const [errorQty, setErrorQty] = useState<string | null>(null);
39 const [errorReason, setErrorReason] = useState<string | null>(null);
40
41 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
42 const val = e.target.value;
43 setNewQty(val);
44 const num = Number(val);
45 if (!Number.isInteger(num) || num < 0) {
46 setErrorQty("Please enter a whole number >= 0");
47 setDifference(0);
48 } else {
49 setErrorQty(null);
50 setDifference(num - onHand);
51 }
52 };
53
54 const handleSubmit = (e: React.FormEvent) => {
55 e.preventDefault();
56 const num = Number(newQty);
57 let valid = true;
58 if (!Number.isInteger(num) || num < 0) {
59 setErrorQty("Please enter a whole number >= 0");
60 valid = false;
61 } else {
62 setErrorQty(null);
63 }
64 if (!selectedReason) {
65 setErrorReason("Please select a reason");
66 valid = false;
67 } else {
68 setErrorReason(null);
69 }
70 if (valid) {
71 // simulate save
72 setMessage(`Adjusted quantity to ${num} ${unit}`);
73 // reset after a short timeout could be done but keep simple
74 }
75 };
76
77 return (
78 <Stack gap={4} maxWidth="full" padding={4}>
79 <Heading level={2} size="2">
80 Stock Correction – {name}
81 </Heading>
82
83 <Stack gap={2}>
84 <FormField label="SKU"><Input value={sku} readOnly /></FormField>
85 <FormField label="Name"><Input value={name} readOnly /></FormField>
86 <FormField label="Location"><Input value={location} readOnly /></FormField>
87 <FormField label={`Current quantity on hand (${unit})`}>
88 <Input value={onHand.toString()} readOnly />
89 </FormField>
90 </Stack>
91
92 <Stack gap={2}>
93 <FormField label="New quantity">
94 <NumberInput
95 min={0}
96 value={newQty}
97 onChange={handleChange}
98 error={errorQty ? { message: errorQty } : undefined}
99 />
100 {errorQty && <p className="text-sm text-danger">{errorQty}</p>}
101 </FormField>
102
103 <FormField label="Difference">
104 <Input
105 readOnly
106 value={
107 difference !== 0
108 ? difference > 0
109 ? `+${difference}`
110 : `${difference}`
111 : ""
112 }
113 />
114 </FormField>
115 </Stack>
116
117 <Stack gap={2}>
118 <FormField label="Reason">
119 <Select
120 value={selectedReason}
121 onValueChange={setSelectedReason}
122 error={errorReason ? { message: errorReason } : undefined}
123 >
124 <Select.Option value="">— Select a reason —</Select.Option>
125 {reasons.map((r) => (
126 <Select.Option key={r.value} value={r.value}>
127 {r.label}{" "}
128 {comment && selectedReason === r.value ? (
129 <span className="text-sm muted">{r.description}</span>
130 ) : null}
131 </Select.Option>
132 ))}
133 </Select>
134 {errorReason && (
135 <p className="text-sm text-danger">{errorReason}</p>
136 )}
137 </FormField>
138
139 <FormField label="Comment (optional)">
140 <Textarea
141 value={comment}
142 onChange={(e) => setComment(e.target.value)}
143 placeholder="Optional comment"
144 />
145 </FormField>
146 </Stack>
147
148 <Button type="primary" onClick={handleSubmit}>
149 Save adjustment
150 </Button>
151
152 {message && (
153 <Alert tone="positive">
154 {message}
155 </Alert>
156 )}
157 </Stack>
158 );
159 }
page.tsx:148:15
Type '"primary"' is not assignable to type '"button" | "reset" | "submit" | undefined'.
page.tsx:153:16 Type '"positive"' is not assignable to type '"danger" | "neutral" | "success" | "warning"'. typecheck/TS2339 4 quality page.tsx:124:21 Property 'Option' does not exist on type '({ options, value, defaultValue, onValueChange, placeholder, size, name, disabled, "aria-label": ariaLabel, UNSAFE_className, UNSAFE_style, ...rest }: SelectProps) => Element'. page.tsx:124:65 Property 'Option' does not exist on type '({ options, value, defaultValue, onValueChange, placeholder, size, name, disabled, "aria-label": ariaLabel, UNSAFE_className, UNSAFE_style, ...rest }: SelectProps) => Element'. page.tsx:126:23 Property 'Option' does not exist on type '({ options, value, defaultValue, onValueChange, placeholder, size, name, disabled, "aria-label": ariaLabel, UNSAFE_className, UNSAFE_style, ...rest }: SelectProps) => Element'. page.tsx:131:24 Property 'Option' does not exist on type '({ options, value, defaultValue, onValueChange, placeholder, size, name, disabled, "aria-label": ariaLabel, UNSAFE_className, UNSAFE_style, ...rest }: SelectProps) => Element'. Every run that broke typecheck/TS2339 render/runtime-error 1 completeness