Runs / shipment-detail 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 3 counted, under 2 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 list_files 484 32 $0.0000 1 read_file 210 29 $0.0000 2 list_files 612 25 $0.0000 3
Output cap 20,000 tokens a step 2 import data from "./fixture.json";
3
4 const statusLabels: Record<string, string> = {
5 in_transit: "In transit",
6 };
7
8 const statusTones: Record<string, "neutral" | "success" | "warning" | "danger"> = {
9 in_transit: "neutral",
10 };
11
12 export default function ShipmentDetailPage() {
13 const { shipment, packages, events } = data;
14
15 const totalWeight = packages.reduce((sum, pkg) => sum + pkg.weightKg, 0);
16
17 const history = [...events].sort(
18 (a, b) => new Date(b.at).getTime() - new Date(a.at).getTime(),
19 );
20
21 return (
22 <div className="vektos">
23 <Stack gap="6" marginBlock="6" marginInline="6">
24 <Stack flexDirection={{ base: "column", sm: "row" }} alignItems={{ base: "flex-start", sm: "center" }} gap="3">
25 <Heading level={1}>Shipment {shipment.id}</Heading>
26 <Badge tone={statusTones[shipment.status] ?? "neutral"}>
27 {statusLabels[shipment.status] ?? shipment.status}
28 </Badge>
29 </Stack>
30
31 <Card>
32 <CardHeader>
33 <CardTitle>Shipment details</CardTitle>
34 </CardHeader>
35 <CardBody>
36 <DataList
37 items={[
38 { label: "Carrier", value: shipment.carrier },
39 { label: "Service", value: shipment.service },
40 {
41 label: "Tracking number",
42 value: (
43 <Stack flexDirection="row" alignItems="center" gap="2">
44 <Text mono>{shipment.tracking}</Text>
45 <Clipboard label="tracking number" value={shipment.tracking} showValue={false} />
46 </Stack>
47 ),
48 },
49 { label: "Order", value: shipment.order },
50 {
51 label: "Shipped",
52 value: (
53 <FormatDate value={shipment.shippedAt} dateStyle="medium" timeStyle="short" timeZone="UTC" />
54 ),
55 },
56 {
57 label: "Estimated delivery",
58 value: (
59 <FormatDate value={shipment.estimatedDelivery} dateStyle="long" timeZone="UTC" />
60 ),
61 },
62 { label: "Destination", value: shipment.destination.name },
63 {
64 label: "Address",
65 value: `${shipment.destination.street}, ${shipment.destination.postcode} ${shipment.destination.city}, ${shipment.destination.country}`,
66 },
67 ]}
68 />
69 </CardBody>
70 </Card>
71
72 <Card>
73 <CardHeader>
74 <CardTitle>Packages</CardTitle>
75 </CardHeader>
76 <Table aria-label="Packages">
77 <TableHead>
78 <TableRow>
79 <TableHeader>Package</TableHeader>
80 <TableHeader>Dimensions (cm)</TableHeader>
81 <TableHeader numeric>Weight (kg)</TableHeader>
82 </TableRow>
83 </TableHead>
84 <TableBody>
85 {packages.map((pkg) => (
86 <TableRow key={pkg.id}>
87 <TableCell>{pkg.id}</TableCell>
88 <TableCell>{pkg.dimensionsCm}</TableCell>
89 <TableCell numeric>
90 <FormatNumber value={pkg.weightKg} maximumFractionDigits={2} />
91 </TableCell>
92 </TableRow>
93 ))}
94 <TableRow>
95 <TableCell>
96 <Text weight="semibold">Total weight</Text>
97 </TableCell>
98 <TableCell />
99 <TableCell numeric>
100 <Text weight="semibold">
101 <FormatNumber value={totalWeight} maximumFractionDigits={2} />
102 </Text>
103 </TableCell>
104 </TableRow>
105 </TableBody>
106 </Table>
107 </Card>
108
109 <Card>
110 <CardHeader>
111 <CardTitle>Tracking history</CardTitle>
112 </CardHeader>
113 <Table aria-label="Tracking history">
114 <TableHead>
115 <TableRow>
116 <TableHeader>Time</TableHeader>
117 <TableHeader>Place</TableHeader>
118 <TableHeader>Event</TableHeader>
119 </TableRow>
120 </TableHead>
121 <TableBody>
122 {history.map((event) => (
123 <TableRow key={`${event.at}-${event.location}`}>
124 <TableCell>
125 <FormatDate value={event.at} dateStyle="medium" timeStyle="short" timeZone="UTC" />
126 </TableCell>
127 <TableCell>{event.location}</TableCell>
128 <TableCell>{event.description}</TableCell>
129 </TableRow>
130 ))}
131 </TableBody>
132 </Table>
133 </Card>
134 </Stack>
135 </div>
136 );
137 }
138
get_guidelines, list_components
4 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,017 198 $0.0000
5 list_tokens 8,148 58 $0.0000
6 list_files 1,063 402 $0.0000
8 get_component 72 339 $0.0000
9 list_tokens 1,022 1,529 $0.0000
10 list_tokens 18,657 72 $0.0000
11 write_file 302 2,109 $0.0000
12 write_file 4,222 1,198 $0.0000