1import { css } from "styled-system/css";2import data from "./fixture.json";34type Package = {5 id: string;6 weightKg: number;7 dimensionsCm: string;8};910type Event = {11 at: string; location: string;
Violations
49 counted, under 4 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
page.tsx:71:19 · 960px`960px` is a raw length. Use a token.
page.tsx:73:18 · 2rem`2rem` is a raw length. Use a token.
page.tsx:77:46 · 2rem`2rem` is a raw length. Use a token.
page.tsx:78:40 · 1.5rem`1.5rem` is a raw length. Use a token.
page.tsx:78:81 · 0.5rem`0.5rem` is a raw length. Use a token.
page.tsx:84:22 · 0.25rem 0.75rem`0.25rem 0.75rem` is a raw length. Use a token.
page.tsx:85:27 · 9999px`9999px` is a raw length. Use a token.
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
165
31
$0.0000
1
read_file
82
31
$0.0000
2
list_files
614
24
$0.0000
3
cdb5d9e77633
Output cap
20,000 tokens a step
12
13 description: string;
14};
15
16type Shipment = {
17 id: string;
18 order: string;
19 status: string;
20 carrier: string;
21 service: string;
22 tracking: string;
23 shippedAt: string;
24 estimatedDelivery: string;
25 destination: {
26 name: string;
27 street: string;
28 postcode: string;
29 city: string;
30 country: string;
31 };
32};
33
34const STATUS_LABELS: Record<string, string> = {
35 in_transit: "In transit",
36};
37
38function formatDateTime(iso: string): string {
39 return new Date(iso).toLocaleString("en-GB", {
40 day: "2-digit",
41 month: "short",
42 year: "numeric",
43 hour: "2-digit",
44 minute: "2-digit",
45 timeZone: "UTC",
46 });
47}
48
49function formatDate(iso: string): string {
50 const d = iso.includes("T") ? new Date(iso) : new Date(iso + "T00:00:00Z");
51 return d.toLocaleDateString("en-GB", {
52 day: "2-digit",
53 month: "short",
54 year: "numeric",
55 timeZone: "UTC",
56 });
57}
58
59export default function Page() {
60 const shipment = data.shipment as Shipment;
61 const packages = data.packages as Package[];
62 const events = [...(data.events as Event[])].sort(
63 (a, b) => new Date(b.at).getTime() - new Date(a.at).getTime()