Runs / stock-levels 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 62 counted, under 8 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 485 30 $0.0000 1 read_file, list_files 209 44 $0.0000 2 list_files 1,324 32 $0.0000 3
Output cap 20,000 tokens a step 3
4 const countedAt = data.warehouse.countedAt;
5 const totalItems = data.items.length;
6 const reorderCount = data.items.filter(
7 (item) => item.onHand <= item.reorderPoint
8 ).length;
9
10 export default function WarehouseStockPage() {
11 return (
12 <main
13 className={css({
14 maxWidth: "1200px",
15 margin: "0 auto",
16 padding: "2rem 1.5rem",
17 fontFamily: "system-ui, sans-serif",
18 color: "#111827",
19 })}
20 >
21 <header className={css({ marginBottom: "1.5rem" })}>
22 <h1 className={css({ fontSize: "1.75rem", fontWeight: 700, margin: 0 })}>
23 {data.warehouse.name}
24 </h1>
25 <p className={css({ color: "#4b5563", marginTop: "0.25rem" })}>
26 Last counted:{" "}
27 {new Date(countedAt).toLocaleString("en-GB", {
28 dateStyle: "medium",
29 timeStyle: "short",
30 timeZone: "UTC",
31 })}{" "}
32 ({countedAt})
33 </p>
34 </header>
35
36 <section
37 className={css({
38 display: "flex",
39 gap: "2rem",
40 marginBottom: "2rem",
41 flexWrap: "wrap",
42 })}
43 >
44 <div
45 className={css({
46 padding: "1rem 1.5rem",
47 border: "1px solid #e5e7eb",
48 borderRadius: "0.5rem",
49 })}
50 >
51 <div className={css({ fontSize: "0.875rem", color: "#4b5563" })}>
52 Items held
53 </div>
54 <div className={css({ fontSize: "2rem", fontWeight: 700 })}>
55 {totalItems}
56 </div>
57 </div>
58 <div
59 className={css({
60 padding: "1rem 1.5rem",
61 border: "1px solid #e5e7eb",
62 borderRadius: "0.5rem",
63 })}
64 >
65 <div className={css({ fontSize: "0.875rem", color: "#4b5563" })}>
66 Need reordering
67 </div>
68 <div className={css({ fontSize: "2rem", fontWeight: 700 })}>
69 {reorderCount}
70 </div>
71 </div>
72 </section>
73
74 <div className={css({ overflowX: "auto" })}>
75 <table
76 className={css({
77 width: "100%",
78 borderCollapse: "collapse",
79 fontSize: "0.9rem",
80 })}
81 >
82 <thead>
83 <tr>
84 {[
85 "SKU",
86 "Name",
87 "Location",
88 "On hand",
89 "Reserved",
90 "Available",
91 "Unit",
92 "Status",
93 ].map((header) => (
94 <th
95 key={header}
96 className={css({
97 textAlign: "left",
98 padding: "0.5rem 0.75rem",
99 borderBottom: "2px solid #e5e7eb",
100 fontWeight: 600,
101 })}
102 >
103 {header}
104 </th>
105 ))}
106 </tr>
107 </thead>
108 <tbody>
109 {data.items.map((item) => {
110 const available = item.onHand - item.reserved;
111 const needsReorder = item.onHand <= item.reorderPoint;
112 return (
113 <tr key={item.sku}>
114 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
115 {item.sku}
116 </td>
117 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
118 {item.name}
119 </td>
120 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
121 {item.location}
122 </td>
123 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
124 {item.onHand}
125 </td>
126 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
127 {item.reserved}
128 </td>
129 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
130 {available}
131 </td>
132 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
133 {item.unit}
134 </td>
135 <td className={css({ padding: "0.5rem 0.75rem", borderBottom: "1px solid #f3f4f6" })}>
136 {needsReorder ? (
137 <span
138 className={css({
139 color: "#dc2626",
140 fontWeight: 600,
141 })}
142 >
143 Reorder
144 </span>
145 ) : null}
146 </td>
147 </tr>
148 );
149 })}
150 </tbody>
151 </table>
152 </div>
153 </main>
154 );
155 }
page.tsx:46:22 · 1rem 1.5rem `1rem 1.5rem` is a raw length. Use a token. page.tsx:60:22 · 1rem 1.5rem `1rem 1.5rem` is a raw length. Use a token. page.tsx:98:30 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:114:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:117:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:120:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:123:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:126:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:129:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:132:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. page.tsx:135:49 · 0.5rem 0.75rem `0.5rem 0.75rem` is a raw length. Use a token. raw-values/raw-color 16 design-system page.tsx:18:16 · #111827 `#111827` is a raw color. Use a semantic color token. page.tsx:25:36 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:47:21 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:51:62 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:61:21 · 1px solid #e5e7eb `1px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:65:62 · #4b5563 `#4b5563` is a raw color. Use a semantic color token. page.tsx:99:35 · 2px solid #e5e7eb `2px solid #e5e7eb` is a raw color. Use a semantic color token. page.tsx:114:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:117:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:120:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:123:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:126:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:129:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:132:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:135:81 · 1px solid #f3f4f6 `1px solid #f3f4f6` is a raw color. Use a semantic color token. page.tsx:139:34 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color lint/@pandacss(no-physical-properties) 12 quality page.tsx:21:32 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:25:47 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:40:11 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:99:21 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:114:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:117:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:120:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:123:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:126:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:129:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:132:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". page.tsx:135:67 Use the logical property "borderBlockEnd" instead of the physical "borderBottom". Every run that broke lint/@pandacss(no-physical-properties) a11y/color-contrast 2 quality page.tsx:1:1 · <span class="c_#dc2626 fw_600">Reorder</span> Elements must meet minimum color contrast ratio thresholds (3 elements, light theme) page.tsx:1:1 · <h1 class="fs_1.75rem fw_700 m_0">Milano Nord DC</h1> Elements must meet minimum color contrast ratio thresholds (65 elements, dark theme) Every run that broke a11y/color-contrast typecheck/TS2769 0 quality 6 list_files 1,014 40 $0.0000
11 write_file 147 3,137 $0.0000
12 write_file 5,100 1,592 $0.0000