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 40 counted, under 10 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 857 40 $0.0000 1 write_file 1,117 1,859 $0.0000 2 stop 3,003 48 $0.0000
cdb5d9e77633
Output cap 20,000 tokens a step 12 interface Item {
13 sku: string;
14 name: string;
15 location: string;
16 onHand: number;
17 unit: string;
18 }
19
20 const reasons: Reason[] = data.reasons;
21 const item: Item = data.item;
22
23 export default function Page() {
24 const [newQuantity, setNewQuantity] = React.useState<number>(item.onHand);
25 const [selectedReason, setSelectedReason] = React.useState<Reason | null>(null);
26 const [comment, setComment] = React.useState<string>("");
27 const [message, setMessage] = React.useState<string | null>(null);
28 const [errors, setErrors] = React.useState<{ newQty?: string; reason?: string }>({});
29
30 const currentQty = item.onHand;
31 const diff = newQuantity - currentQty;
32 const diffSign = diff > 0 ? "+" : diff < 0 ? "-" : "";
33 const diffAbs = Math.abs(diff);
34
35 // validate newQuantity on blur/change
36 const handleNewQuantity = (e: React.ChangeEvent<HTMLInputElement>) => {
37 const val = e.target.value;
38 const num = Number(val);
39 const errors: { newQty?: string; reason?: string } = {};
40
41 if (!val || !Number.isInteger(num) || num < 0) {
42 errors.newQty = "Enter a whole number (0 or greater)";
43 } else {
44 setNewQuantity(num);
45 }
46 setErrors(errors);
47 };
48
49 const handleReasonChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
50 const code = e.target.value;
51 const reason = reasons.find((r) => r.code === code);
52 setSelectedReason(reason ?? null);
53 setErrors({ ...errors, reason: reason ? null : "Select a reason" });
54 };
55
56 const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
57 setComment(e.target.value);
58 };
59
60 const handleSave = () => {
61 const newErrors: { newQty?: string; reason?: string } = {};
62 if (!selectedReason) {
63 newErrors.reason = "Select a reason";
64 }
65 if (typeof newQuantity !== "number" || !Number.isInteger(newQuantity) || newQuantity < 0) {
66 newErrors.newQty = "Enter a whole number (0 or greater)";
67 }
68 if (Object.keys(newErrors).length) {
69 setErrors(newErrors);
70 return;
71 }
72 // save logic
73 setMessage(`Adjusted quantity to ${newQuantity}`);
74 // reset form
75 setNewQuantity(item.onHand);
76 setSelectedReason(null);
77 setComment("");
78 setErrors({});
79 };
80
81 return (
82 <div css={css({ maxWidth: 600, margin: "2rem auto", padding: 2 })}>
83 <h1 css={css({ marginBottom: 1.5 })}>Stock Correction</h1>
84
85 {/* Item info */}
86 <div css={css({ borderBottom: "1px solid #e2e8f0", paddingBottom: 1, marginBottom: 1 })}>
87 <p>SKU: {item.sku}</p>
88 <p>Name: {item.name}</p>
89 <p>Location: {item.location}</p>
90 <p>Current quantity on hand: {item.onHand} {item.unit}</p>
91 </div>
92
93 {/* New quantity field */}
94 <div>
95 <label htmlFor="newQuantity" display: block marginBottom 0.5>
96 New quantity:
97 </label>
98 <input
99 id="newQuantity"
100 type="number"
101 value={String(newQuantity)}
102 onChange={handleNewQuantity}
103 required
104 aria-invalid={!!errors.newQty}
105 css={css({ width: "100%", padding: 0.5, marginTop 0.5 })}
106 />
107 {errors.newQty && (
108 <p css={css({ color: "red", fontSize: 0.8, marginTop: 0.2 })}>{errors.newQty}</p>
109 )}
110 <p css={css({ marginTop: 0.5, color: "#555" }})>
111 Difference: {diffSign}{diffAbs} {item.unit}
112 </p>
113 </div>
114
115 {/* Reason select */}
116 <div>
117 <label htmlFor="reason" display: block marginBottom 0.5>
118 Reason:
119 </label>
120 <select
121 id="reason"
122 value={selectedReason?.code ?? ""}
123 onChange={handleReasonChange}
124 required
125 aria-invalid={!!errors.reason}
126 css={css({ width: "100%", padding: 0.5, marginTop: 0.5 })}
127 >
128 <option value="">— Select a reason —</option>
129 {reasons.map((r) => (
130 <option key={r.code} value={r.code}>
131 {r.label}
132 </option>
133 ))}
134 </select>
135 {errors.reason && (
136 <p css={css({ color: "red", fontSize: 0.8, marginTop: 0.2 })}>{errors.reason}</p>
137 )}
138 </div>
139
140 {/* Optional comment */}
141 <div>
142 <label htmlFor="comment" display: block marginBottom 0.5>
143 Comment (optional):
144 </label>
145 <textarea
146 id="comment"
147 rows={3}
148 value={comment}
149 onChange={handleCommentChange}
150 css={css({ width: "100%", padding: 0.5, marginTop: 0.5 })}
151 ></textarea>
152 </div>
153
154 {/* Save button */}
155 <button
156 onClick={handleSave}
157 disabled={!!errors.newQty || !selectedReason}
158 css={css({ marginTop: 1, padding: 0.75, background: "#3b82f6", color: "white", border: "none", borderRadius: 0.3 })}
159 >
160 Save adjustment
161 </button>
162
163 {/* Message after save */}
164 {message && (
165 <p css={css({ marginTop: 1, color: "#059669", fontWeight: 500 })}>{message}</p>
166 )}
167 </div>
168 );
169 }
':' expected.
typecheck/TS1003 10 quality typecheck/TS1128 7 quality typecheck/TS1382 2 quality typecheck/TS17002 2 quality lint/syntax-error 1 quality typecheck/TS1109 1 quality typecheck/TS1136 1 quality