Runs / account-details Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 65 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 295 31 $0.0000 1 read_file 212 29 $0.0000 2 list_files 530 40 $0.0000 3
cdb5d9e77633
Output cap The provider's default 11
12 style: "currency",
13 currency: account.currency,
14 });
15
16 export default function AccountPage() {
17 const [copied, setCopied] = useState(false);
18 const [tooltipVisible, setTooltipVisible] = useState(false);
19 const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
20
21 const copyIban = useCallback(async () => {
22 try {
23 await navigator.clipboard.writeText(account.iban);
24 } catch {
25 const ta = document.createElement("textarea");
26 ta.value = account.iban;
27 document.body.appendChild(ta);
28 ta.select();
29 document.execCommand("copy");
30 document.body.removeChild(ta);
31 }
32 setCopied(true);
33 if (timerRef.current) clearTimeout(timerRef.current);
34 timerRef.current = setTimeout(() => setCopied(false), 2000);
35 }, []);
36
37 useEffect(() => {
38 return () => {
39 if (timerRef.current) clearTimeout(timerRef.current);
40 };
41 }, []);
42
43 return (
44 <main
45 className={css({
46 maxWidth: "960px",
47 margin: "0 auto",
48 padding: "24px",
49 fontFamily: "sans-serif",
50 })}
51 >
52 <nav aria-label="Breadcrumb">
53 <ol
54 className={css({
55 display: "flex",
56 gap: "8px",
57 listStyle: "none",
58 padding: 0,
59 margin: "0 0 24px",
60 fontSize: "14px",
61 })}
62 >
63 <li>
64 <Link href="/accounts" className={css({ color: "#2563eb", textDecoration: "underline" })}>
65 Accounts
66 </Link>
67 </li>
68 <li aria-hidden="true">/</li>
69 <li aria-current="page">{account.name}</li>
70 </ol>
71 </nav>
72
73 <section
74 className={css({
75 border: "1px solid",
76 borderColor: "#e5e7eb",
77 borderRadius: "12px",
78 padding: "24px",
79 marginBottom: "32px",
80 })}
81 >
82 <h1 className={css({ fontSize: "24px", fontWeight: "bold", marginBottom: "16px" })}>
83 {account.name}
84 </h1>
85 <dl
86 className={css({
87 display: "grid",
88 gridTemplateColumns: "160px 1fr",
89 gap: "8px 16px",
90 margin: 0,
91 })}
92 >
93 <dt className={css({ fontWeight: "600" })}>Holder</dt>
94 <dd className={css({ margin: 0 })}>{account.holder}</dd>
95
96 <dt className={css({ fontWeight: "600" })}>IBAN</dt>
97 <dd className={css({ margin: 0, display: "flex", alignItems: "center", gap: "8px" })}>
98 <span>{account.iban}</span>
99 <span className={css({ position: "relative", display: "inline-block" })}>
100 <button
101 type="button"
102 onClick={copyIban}
103 onMouseEnter={() => setTooltipVisible(true)}
104 onMouseLeave={() => setTooltipVisible(false)}
105 onFocus={() => setTooltipVisible(true)}
106 onBlur={() => setTooltipVisible(false)}
107 aria-label="Copy IBAN to clipboard"
108 className={css({
109 border: "1px solid",
110 borderColor: "#d1d5db",
111 borderRadius: "6px",
112 padding: "2px 8px",
113 background: "#ffffff",
114 cursor: "pointer",
115 fontSize: "12px",
116 })}
117 >
118 Copy
119 </button>
120 {tooltipVisible && (
121 <span
122 role="tooltip"
123 className={css({
124 position: "absolute",
125 bottom: "100%",
126 left: "50%",
127 transform: "translateX(-50%)",
128 marginBottom: "4px",
129 background: "#111827",
130 color: "#ffffff",
131 padding: "4px 8px",
132 borderRadius: "4px",
133 fontSize: "12px",
134 whiteSpace: "nowrap",
135 })}
136 >
137 Copy IBAN to clipboard
138 </span>
139 )}
140 </span>
141 {copied && (
142 <span
143 role="status"
144 aria-live="polite"
145 className={css({ color: "#16a34a", fontSize: "12px" })}
146 >
147 Copied!
148 </span>
149 )}
150 </dd>
151
152 <dt className={css({ fontWeight: "600" })}>BIC</dt>
153 <dd className={css({ margin: 0 })}>{account.bic}</dd>
154
155 <dt className={css({ fontWeight: "600" })}>Balance</dt>
156 <dd className={css({ margin: 0 })}>{money.format(account.balance)}</dd>
157
158 <dt className={css({ fontWeight: "600" })}>Available balance</dt>
159 <dd className={css({ margin: 0 })}>{money.format(account.available)}</dd>
160 </dl>
161 </section>
162
163 <section>
164 <h2 className={css({ fontSize: "20px", fontWeight: "bold", marginBottom: "12px" })}>
165 Recent transactions
166 </h2>
167 <ul className={css({ listStyle: "none", padding: 0, margin: "0 0 16px" })}>
168 {recent.map((tx) => (
169 <li
170 key={tx.id}
171 className={css({
172 display: "flex",
173 justifyContent: "space-between",
174 padding: "12px 0",
175 borderBottom: "1px solid",
176 borderColor: "#f3f4f6",
177 })}
178 >
179 <div>
180 <div className={css({ fontWeight: "500" })}>{tx.description}</div>
181 <div className={css({ fontSize: "12px", color: "#6b7280" })}>{tx.date}</div>
182 </div>
183 <div
184 className={css({
185 fontWeight: "600",
186 color: tx.amount < 0 ? "#dc2626" : "#16a34a",
187 })}
188 >
189 {money.format(tx.amount)}
190 </div>
191 </li>
192 ))}
193 </ul>
194 <Link
195 href="/accounts/business/transactions"
196 className={css({ color: "#2563eb", textDecoration: "underline" })}
197 >
198 View all transactions
199 </Link>
200 </section>
201 </main>
202 );
203 }
204
`24px` is a raw length. Use a token.
token-names/unknown-token 10 design-system page.tsx:49:21 · sans-serif `fontFamily: "sans-serif"`: `sans-serif` is not a fonts token. Use one of: sans, mono. page.tsx:82:60 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:93:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:96:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:152:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:155:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:158:44 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:164:60 · bold `fontWeight: "bold"`: `bold` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:180:51 · 500 `fontWeight: "500"`: `500` is not a fontWeights token. Use one of: normal, medium, semibold. page.tsx:185:31 · 600 `fontWeight: "600"`: `600` is not a fontWeights token. Use one of: normal, medium, semibold. Every run that broke token-names/unknown-token typecheck/TS2769 4 quality lint/jsx-a11y(prefer-tag-over-role) 1 quality render/runtime-error 1 completeness 13 write_file 73 1,550 $0.0000
14 write_file 1,583 1,685 $0.0000