Runs / direct-debits 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 46 counted, under 9 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 164 30 $0.0000 1 read_file 80 33 $0.0000 2 list_files 469 26 $0.0000 3
Output cap The provider's default 4 import { css } from "styled-system/css";
5 import data from "./fixture.json";
6
7 type Mandate = {
8 id: string;
9 creditor: string;
10 lastCollection: { date: string; amount: number };
11 status: "active" | "failed" | "cancelled";
12 };
13
14 const initialMandates: Mandate[] = data.mandates.map((m) => ({
15 id: m.id,
16 creditor: m.creditor,
17 lastCollection: { date: m.lastCollection.date, amount: m.lastCollection.amount },
18 status: m.status as Mandate["status"],
19 }));
20
21 function formatAmount(amount: number, currency: string) {
22 return new Intl.NumberFormat("en-US", {
23 style: "currency",
24 currency,
25 }).format(amount);
26 }
27
28 export default function Page() {
29 const [mandates, setMandates] = useState<Mandate[]>(initialMandates);
30 const [toast, setToast] = useState<string | null>(null);
31
32 const failedCount = mandates.filter((m) => m.status === "failed").length;
33
34 const handleCancel = (mandate: Mandate) => {
35 const confirmed = window.confirm(
36 `Cancel mandate for ${mandate.creditor}?`
37 );
38 if (!confirmed) return;
39 setMandates((prev) =>
40 prev.map((m) =>
41 m.id === mandate.id ? { ...m, status: "cancelled" } : m
42 )
43 );
44 setToast(`Mandate for ${mandate.creditor} cancelled.`);
45 window.setTimeout(() => setToast(null), 3000);
46 };
47
48 return (
49 <main
50 className={css({
51 maxWidth: "960px",
52 margin: "0 auto",
53 padding: "2rem",
54 fontFamily: "sans-serif",
55 })}
56 >
57 <h1 className={css({ fontSize: "2xl", fontWeight: "bold", marginBottom: "1rem" })}>
58 Direct debit mandates
59 </h1>
60 <p className={css({ marginBottom: "1rem", color: "gray.600" })}>
61 {data.company}
62 </p>
63
64 {failedCount > 0 && (
65 <div
66 className={css({
67 marginBottom: "1.5rem",
68 padding: "1rem",
69 borderRadius: "md",
70 background: "red.50",
71 color: "red.800",
72 border: "1px solid",
73 borderColor: "red.200",
74 })}
75 >
76 {failedCount} collection{failedCount === 1 ? "" : "s"} failed. Each
77 creditor will try again in {data.retryDays} working days.
78 </div>
79 )}
80
81 <ul className={css({ listStyle: "none", padding: 0, margin: 0 })}>
82 {mandates.map((m) => (
83 <li
84 key={m.id}
85 className={css({
86 border: "1px solid",
87 borderColor: "gray.200",
88 borderRadius: "md",
89 padding: "1rem",
90 marginBottom: "0.75rem",
91 })}
92 >
93 <div className={css({ fontWeight: "semibold" })}>{m.creditor}</div>
94 <div className={css({ fontSize: "sm", color: "gray.600" })}>
95 Mandate reference: {m.id}
96 </div>
97 <div className={css({ fontSize: "sm", marginTop: "0.5rem" })}>
98 Last collection: {m.lastCollection.date} —{" "}
99 {formatAmount(m.lastCollection.amount, data.currency)}
100 </div>
101 <div className={css({ fontSize: "sm", marginTop: "0.25rem" })}>
102 Status: {m.status}
103 </div>
104 {(m.status === "active" || m.status === "failed") && (
105 <button
106 type="button"
107 onClick={() => handleCancel(m)}
108 className={css({
109 marginTop: "0.75rem",
110 padding: "0.5rem 1rem",
111 borderRadius: "md",
112 border: "1px solid",
113 borderColor: "red.500",
114 color: "red.600",
115 background: "white",
116 cursor: "pointer",
117 })}
118 >
119 Cancel mandate
120 </button>
121 )}
122 </li>
123 ))}
124 </ul>
125
126 {toast && (
127 <div
128 className={css({
129 position: "fixed",
130 bottom: "1.5rem",
131 right: "1.5rem",
132 padding: "0.75rem 1rem",
133 borderRadius: "md",
134 background: "green.600",
135 color: "white",
136 })}
137 role="status"
138 >
139 {toast}
140 </div>
141 )}
142 </main>
143 );
144 }
145
`1px solid` is a raw length. Use a token.
lint/@pandacss(no-physical-properties) 9 quality page.tsx:57:65 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:60:27 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:67:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:90:15 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:97:51 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:101:51 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:109:19 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:130:13 Use the logical property "insetBlockEnd" instead of the physical "bottom". page.tsx:131:13 Use the logical property "insetInlineEnd" instead of the physical "right". Every run that broke lint/@pandacss(no-physical-properties) token-roles/palette 9 design-system page.tsx:60:56 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:70:25 · red.50 `red.50` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:71:20 · red.800 `red.800` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:73:26 · red.200 `red.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:87:28 · gray.200 `gray.200` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:94:58 · gray.600 `gray.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:113:32 · red.500 `red.500` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:114:26 · red.600 `red.600` is a palette shade: it ignores the theme. Use a semantic color token. page.tsx:134:25 · green.600 `green.600` is a palette shade: it ignores the theme. Use a semantic color token. Every run that broke token-roles/palette raw-values/raw-color 2 design-system typecheck/TS2769 2 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality 13 write_file 120 2,167 $0.0000