Runs / goods-receipt 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 2 counted, under 1 rule. “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 get_guidelines, list_components, list_files 433 62 $0.0000 1 read_file 5,023 29 $0.0000 2 list_tokens, get_component, get_component, get_component 319 83 $0.0000
Output cap 20,000 tokens a step 3 import { useState } from "react";
4 import data from "./fixture.json";
5 import {
6 Alert,
7 Button,
8 Card,
9 CardBody,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13 Checkbox,
14 DataList,
15 FormField,
16 FormatDate,
17 Heading,
18 NumberInput,
19 Select,
20 Stack,
21 Table,
22 TableBody,
23 TableCell,
24 TableHead,
25 TableHeader,
26 TableRow,
27 Text,
28 Textarea,
29 Toaster,
30 toast,
31 } from "@vektos/ds";
32
33 type Line = (typeof data.lines)[number];
34
35 function quantityError(ordered: number, value: number | null): string | undefined {
36 if (value === null) return "Enter the quantity received.";
37 if (value < 0) return "Quantity cannot be negative.";
38 if (value > ordered) return "Quantity cannot exceed the quantity ordered.";
39 return undefined;
40 }
41
42 export default function Page() {
43 const po = data.purchaseOrder;
44
45 const [received, setReceived] = useState<Record<string, number | null>>(() =>
46 Object.fromEntries(data.lines.map((line) => [line.sku, line.ordered])),
47 );
48 const [dock, setDock] = useState("");
49 const [damaged, setDamaged] = useState(false);
50 const [damageNote, setDamageNote] = useState("");
51 const [confirmed, setConfirmed] = useState(false);
52
53 const dockError = dock ? undefined : "Select the dock where the delivery was unloaded.";
54
55 const canConfirm =
56 !dockError &&
57 data.lines.every((line) =>
58 !quantityError(line.ordered, received[line.sku] ?? null),
59 );
60
61 const handleConfirm = () => {
62 if (!canConfirm || confirmed) return;
63 setConfirmed(true);
64 toast({ title: `Receipt confirmed for ${po.number}`, tone: "success" });
65 };
66
67 return (
68 <div className="vektos">
69 <Toaster />
70 <Stack gap="6" margin="6">
71 <Heading level={1}>Receive delivery</Heading>
72
73 <Card>
74 <CardHeader>
75 <CardTitle>Delivery details</CardTitle>
76 </CardHeader>
77 <CardBody>
78 <DataList
79 items={[
80 { label: "Purchase order", value: po.number },
81 { label: "Supplier", value: po.supplier },
82 {
83 label: "Expected on",
84 value: <FormatDate value={po.expectedOn} dateStyle="long" />,
85 },
86 ]}
87 />
88 </CardBody>
89 </Card>
90
91 <Card>
92 <CardHeader>
93 <CardTitle>Order lines</CardTitle>
94 </CardHeader>
95 <Table aria-label="Order lines">
96 <TableHead>
97 <TableRow>
98 <TableHeader>Product</TableHeader>
99 <TableHeader numeric>Ordered</TableHeader>
100 <TableHeader>Received</TableHeader>
101 </TableRow>
102 </TableHead>
103 <TableBody>
104 {data.lines.map((line: Line) => {
105 const value = received[line.sku] ?? null;
106 const error = quantityError(line.ordered, value);
107 return (
108 <TableRow key={line.sku}>
109 <TableCell>
110 <Text weight="medium">{line.name}</Text>
111 <Text size="sm" tone="muted" mono>
112 {line.sku}
113 </Text>
114 </TableCell>
115 <TableCell numeric>
116 {line.ordered} {line.unit}
117 </TableCell>
118 <TableCell>
119 <FormField
120 label="Received"
121 required
122 error={error}
123 >
124 <NumberInput
125 value={value}
126 onValueChange={(next) =>
127 setReceived((prev) => ({
128 ...prev,
129 [line.sku]: next,
130 }))
131 }
132 showSteppers={false}
133 disabled={confirmed}
134 />
135 </FormField>
136 </TableCell>
137 </TableRow>
138 );
139 })}
140 </TableBody>
141 </Table>
142 </Card>
143
144 <Card>
145 <CardHeader>
146 <CardTitle>Unloading</CardTitle>
147 </CardHeader>
148 <CardBody>
149 <Stack gap="4">
150 <FormField label="Dock" required error={dockError}>
151 <Select
152 placeholder="Select a dock"
153 options={data.docks.map((dockName) => ({
154 label: dockName,
155 value: dockName,
156 }))}
157 {...(dock ? { value: dock } : {})}
158 onValueChange={setDock}
159 disabled={confirmed}
160 />
161 </FormField>
162
163 <Checkbox
164 checked={damaged}
165 onCheckedChange={setDamaged}
166 disabled={confirmed}
167 >
168 Some goods arrived damaged
169 </Checkbox>
170
171 {damaged && (
172 <FormField label="What was damaged">
173 <Textarea
174 rows={3}
175 value={damageNote}
176 onChange={(event) =>
177 setDamageNote(event.target.value)
178 }
179 disabled={confirmed}
180 />
181 </FormField>
182 )}
183 </Stack>
184 </CardBody>
185 <CardFooter>
186 <Button
187 variant="solid"
188 onClick={handleConfirm}
189 disabled={!canConfirm || confirmed}
190 >
191 Confirm receipt
192 </Button>
193 </CardFooter>
194 </Card>
195
196 {confirmed && (
197 <Alert tone="success" title="Receipt confirmed">
198 Delivery for purchase order {po.number} has been recorded.
199 </Alert>
200 )}
201 </Stack>
202 </div>
203 );
204 }
205
get_component, get_component, get_component, get_component, get_component, get_component
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,342 175 $0.0000
5 get_component, get_component 5,654 100 $0.0000
6 list_components 1,800 169 $0.0000
7 get_component 2,571 39 $0.0000
8 list_files 472 1,477 $0.0000
10 write_file 114 4,731 $0.0000
11 check_code check_code: 4 violations:
- line 150: typecheck/TS2375: Type '{ placeholder: string; options: { label: string; value: string; }[]; value: string | undefined; onValueChange: Dispatch<SetStateAction<string>>; disabled: boolean; }' is not assignable to type 'SelectProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
- line 184: typecheck/TS2304: Cannot find name 'CardFooter'.
- line 184: lint/react(jsx-no-undef): 'CardFooter' is not defined.
- line 192: typecheck/TS2304: Cannot find name 'CardFooter'.
4,805 1,192 $0.0000
12 write_file 1,373 1,412 $0.0000
13 check_code check_code: No violations.
1,465 1,202 $0.0000