Runs / statement 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 39 counted, under 5 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 get-storybook-story-instructions 3 18 $0.0000 1 docs-list 3 20 $0.0002 2 docs-show, docs-show, docs-show 3 62 $0.0001 3
Output cap The provider's default 3 import data from "./fixture.json";
4
5 const formatDate = (value: string) =>
6 new Intl.DateTimeFormat("en-GB", {
7 day: "2-digit",
8 month: "short",
9 year: "numeric",
10 timeZone: "UTC",
11 }).format(new Date(`${value}T00:00:00Z`));
12
13 const formatMoney = (amount: number) =>
14 new Intl.NumberFormat("en-GB", {
15 style: "currency",
16 currency: data.account.currency,
17 minimumFractionDigits: 2,
18 }).format(amount);
19
20 export default function OctoberStatementPage() {
21 const period = new Intl.DateTimeFormat("en-GB", {
22 month: "long",
23 year: "numeric",
24 timeZone: "UTC",
25 }).format(new Date(`${data.account.period.from}T00:00:00Z`));
26
27 return (
28 <main
29 className={css({
30 minHeight: "100vh",
31 background: "#f6f7f9",
32 padding: { base: "6", md: "12" },
33 color: "#172033",
34 })}
35 >
36 <div className={css({ maxWidth: "1120px", marginInline: "auto" })}>
37 <header className={css({ marginBottom: "8" })}>
38 <p
39 className={css({
40 color: "#52627a",
41 fontSize: "sm",
42 fontWeight: "semibold",
43 letterSpacing: "0.08em",
44 textTransform: "uppercase",
45 marginBottom: "2",
46 })}
47 >
48 Current account · Statement
49 </p>
50 <h1
51 className={css({
52 fontSize: { base: "3xl", md: "4xl" },
53 lineHeight: "1.15",
54 fontWeight: "bold",
55 letterSpacing: "-0.035em",
56 margin: 0,
57 })}
58 >
59 {period} statement
60 </h1>
61 <p className={css({ color: "#657187", marginTop: "2", fontSize: "md" })}>
62 Account activity from {formatDate(data.account.period.from)} to {formatDate(data.account.period.to)}
63 </p>
64 </header>
65
66 <Card>
67 <CardBody>
68 <div
69 className={css({
70 display: "grid",
71 gridTemplateColumns: { base: "1fr", md: "1fr 1.15fr 1fr" },
72 gap: { base: "6", md: "8" },
73 alignItems: "center",
74 })}
75 >
76 <section aria-label="Account holder">
77 <p className={metaLabel}>Account holder</p>
78 <p className={css({ fontSize: "lg", fontWeight: "semibold", margin: 0 })}>
79 {data.account.holder}
80 </p>
81 </section>
82 <section aria-label="IBAN">
83 <p className={metaLabel}>IBAN</p>
84 <p
85 className={css({
86 fontSize: "md",
87 fontWeight: "medium",
88 fontFamily: "mono",
89 letterSpacing: "0.015em",
90 margin: 0,
91 overflowWrap: "anywhere",
92 })}
93 >
94 {data.account.iban}
95 </p>
96 </section>
97 <section
98 aria-label="Current balance"
99 className={css({
100 borderLeft: { base: "none", md: "1px solid #e3e7ed" },
101 borderTop: { base: "1px solid #e3e7ed", md: "none" },
102 paddingLeft: { base: "0", md: "8" },
103 paddingTop: { base: "5", md: "0" },
104 })}
105 >
106 <p className={metaLabel}>Current balance</p>
107 <p
108 className={css({
109 color: "#173f75",
110 fontSize: { base: "2xl", md: "3xl" },
111 fontWeight: "bold",
112 letterSpacing: "-0.03em",
113 fontVariantNumeric: "tabular-nums",
114 margin: 0,
115 })}
116 >
117 {formatMoney(data.account.balance)}
118 </p>
119 </section>
120 </div>
121 </CardBody>
122 </Card>
123
124 <section className={css({ marginTop: "10" })} aria-labelledby="transactions-title">
125 <Card>
126 <CardHeader>
127 <div
128 className={css({
129 display: "flex",
130 flexWrap: "wrap",
131 justifyContent: "space-between",
132 alignItems: "end",
133 gap: "3",
134 })}
135 >
136 <div>
137 <CardTitle asChild>
138 <h2 id="transactions-title" className={css({ fontSize: "xl", margin: 0 })}>
139 Transactions
140 </h2>
141 </CardTitle>
142 <CardDescription>
143 {data.transactions.length} transactions · Amounts in {data.account.currency}
144 </CardDescription>
145 </div>
146 <p className={css({ color: "#657187", fontSize: "sm", margin: 0 })}>
147 Newest first
148 </p>
149 </div>
150 </CardHeader>
151 <div className={css({ overflowX: "auto" })}>
152 <Table aria-label={`${period} account transactions`}>
153 <TableHead>
154 <TableRow>
155 <TableHeader>Date</TableHeader>
156 <TableHeader>Description</TableHeader>
157 <TableHeader>Category</TableHeader>
158 <TableHeader>Status</TableHeader>
159 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
160 </TableRow>
161 </TableHead>
162 <TableBody>
163 {data.transactions.map((transaction) => (
164 <TableRow key={transaction.id}>
165 <TableCell>
166 <time dateTime={transaction.date} className={css({ whiteSpace: "nowrap" })}>
167 {formatDate(transaction.date)}
168 </time>
169 </TableCell>
170 <TableCell>
171 <span className={css({ fontWeight: "medium", color: "#202b3e" })}>
172 {transaction.description}
173 </span>
174 </TableCell>
175 <TableCell>
176 <span className={css({ color: "#52627a" })}>{transaction.category}</span>
177 </TableCell>
178 <TableCell>
179 {transaction.status === "pending" ? (
180 <Badge tone="warning">Pending</Badge>
181 ) : (
182 <span className={css({ color: "#657187", fontSize: "sm" })}>Booked</span>
183 )}
184 </TableCell>
185 <TableCell numeric>
186 <span
187 className={css({
188 whiteSpace: "nowrap",
189 fontWeight: "semibold",
190 color: transaction.amount < 0 ? "#263449" : "#18754b",
191 })}
192 >
193 {formatMoney(transaction.amount)}
194 </span>
195 </TableCell>
196 </TableRow>
197 ))}
198 </TableBody>
199 </Table>
200 </div>
201 <div
202 className={css({
203 display: "flex",
204 justifyContent: "space-between",
205 alignItems: "center",
206 gap: "3",
207 borderTop: "1px solid #e3e7ed",
208 padding: { base: "4", md: "5" },
209 color: "#657187",
210 fontSize: "sm",
211 })}
212 >
213 <span>Pending transactions are not final and may change.</span>
214 <span className={css({ whiteSpace: "nowrap" })}>{data.transactions.length} total</span>
215 </div>
216 </Card>
217 </section>
218 </div>
219 </main>
220 );
221 }
222
223 const metaLabel = css({
224 color: "#657187",
225 fontSize: "xs",
226 fontWeight: "semibold",
227 letterSpacing: "0.07em",
228 textTransform: "uppercase",
229 margin: "0 0 1.5",
230 });
231
· #173f75
`#173f75` is a raw color. Use a semantic color token.
page.tsx:146:44 · #657187 `#657187` is a raw color. Use a semantic color token. page.tsx:171:77 · #202b3e `#202b3e` is a raw color. Use a semantic color token. page.tsx:176:55 · #52627a `#52627a` is a raw color. Use a semantic color token. page.tsx:182:57 · #657187 `#657187` is a raw color. Use a semantic color token. page.tsx:190:61 · #263449 `#263449` is a raw color. Use a semantic color token. page.tsx:190:73 · #18754b `#18754b` is a raw color. Use a semantic color token. page.tsx:207:28 · 1px solid #e3e7ed `1px solid #e3e7ed` is a raw color. Use a semantic color token. page.tsx:209:24 · #657187 `#657187` is a raw color. Use a semantic color token. page.tsx:224:10 · #657187 `#657187` is a raw color. Use a semantic color token. lint/@pandacss(no-physical-properties) 9 quality page.tsx:37:34 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:45:15 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:61:49 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:100:19 Use the logical property "borderInlineStart" instead of the physical "borderLeft". page.tsx:101:19 Use the logical property "borderBlockStart" instead of the physical "borderTop". page.tsx:102:19 Use the logical property "paddingInlineStart" instead of the physical "paddingLeft". page.tsx:103:19 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:124:35 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:207:17 Use the logical property "borderBlockStart" instead of the physical "borderTop". Every run that broke lint/@pandacss(no-physical-properties) raw-values/raw-length 7 design-system typecheck/TS2769 6 quality 6 stories-changed 3 149 $0.0004
7 stories-find-by-component 3 71 $0.0002
9 stories-preview 3 129 $0.0002