Runs / account-details 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 31 counted, under 6 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 841 44 $0.0000 1 read_file 896 38 $0.0000 2 write_file 1,356 1,768 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import { css } from "styled-system/css";
6
7 const BankAccount: React.FC = () => {
8 const [copied, setCopied] = useState(false);
9
10 const copyIban = () => {
11 navigator.clipboard.writeText(data.account.iban);
12 setCopied(true);
13 setTimeout(() => setCopied(false), 2000);
14 };
15
16 return (
17 <main className={css({ padding: 2 })}>
18 {/* Breadcrumb */}
19 <nav aria-label="breadcrumb" className={css({ marginBottom: 2 })}>
20 <ol>
21 <li>
22 <a href="/accounts">Accounts</a>
23 </li>
24 <li><span>Business current account</span></li>
25 </ol>
26 </nav>
27
28 {/* Account details */}
29 <section className={css({ marginBottom: 2 })}>
30 <h1 className={css({ fontSize: 3, marginBottom: 1 })}>
31 {data.account.name}
32 </h1>
33
34 <p>
35 <strong>Holder:</strong> {data.account.holder}
36 </p>
37 <p>
38 <strong>IBAN:</strong>
39 <span
40 className={css({ fontFamily: "monospace", marginRight: 1 })}
41 >
42 {data.account.iban}
43 </span>
44 <button
45 onClick={copyIban}
46 title="Copies IBAN to clipboard"
47 className={css({
48 marginLeft: 1,
49 verticalAlign: "middle",
50 })}
51 >
52 Copy
53 </button>
54 </p>
55
56 <p>
57 <strong>BIC:</strong> {data.account.bic}
58 </p>
59 <p>
60 <strong>Balance:</strong> {data.account.balance} {data.account.currency}
61 </p>
62 <p>
63 <strong>Available:</strong> {data.account.available} {data.account.currency}
64 </p>
65 </section>
66
67 {/* Copy confirmation toast */}
68 {copied && (
69 <p className={css({ marginTop: 1, color: "success" })}>Copied!</p>
70 )}
71
72 {/* Recent transactions */}
73 <section className={css({ marginTop: 2 })}>
74 <h2 className={css({ fontSize: 2, marginBottom: 1 })}>
75 Recent transactions
76 </h2>
77 <ul>
78 {data.recent.slice(0, 5).map((tx) => (
79 <li key={tx.id} className={css({ display: "flex", justifyContent: "space-between", marginBottom: 0.5 })}>
80 <span>
81 {tx.date} - {tx.description}
82 </span>
83 <span>
84 {tx.amount > 0 ? "+" : ""}{tx.amount} {data.account.currency}
85 </span>
86 </li>
87 ))}
88 </ul>
89
90 <a
91 href="/accounts/business/transactions"
92 className={css({ marginTop: 1, color: "primary" })}
93 >
94 View all transactions
95 </a>
96 </section>
97 </main>
98 );
99 };
100
101 export default BankAccount;
lint/@pandacss(no-physical-properties) 10 quality page.tsx:19:53 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:29:33 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:30:43 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:40:55 Use the logical property "marginInlineEnd" instead of the physical "marginRight". page.tsx:48:15 Use the logical property "marginInlineStart" instead of the physical "marginLeft". page.tsx:69:29 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:73:33 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:74:43 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:79:96 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:92:28 Use the logical property "marginBlockStart" instead of the physical "marginTop". Every run that broke lint/@pandacss(no-physical-properties) lint/typescript(no-floating-promises) 1 quality