Runs / loan-contract 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 40 counted, under 4 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_guidelines 692 15 $0.0001 1 list_files, list_components, list_tokens 3 56 $0.0003 2 read_file 3 19 $0.0002 3
Output cap The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const formatCurrency = (amount: number) =>
19 new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: data.contract.currency,
22 }).format(amount);
23
24 const formatDate = (date: string) =>
25 new Intl.DateTimeFormat("en-GB", {
26 day: "numeric",
27 month: "short",
28 year: "numeric",
29 timeZone: "UTC",
30 }).format(new Date(`${date}T00:00:00Z`));
31
32 const scheduleTone = {
33 paid: "success",
34 due: "warning",
35 upcoming: "neutral",
36 } as const;
37
38 const scheduleLabel = {
39 paid: "Paid",
40 due: "Due",
41 upcoming: "Upcoming",
42 } as const;
43
44 const pageClass = css({
45 minHeight: "full",
46 bg: "bg.canvas",
47 color: "fg.default",
48 px: { base: "4", md: "8" },
49 py: { base: "6", md: "10" },
50 });
51
52 const containerClass = css({
53 width: "100%",
54 maxWidth: "6xl",
55 mx: "auto",
56 });
57
58 const metricClass = css({
59 p: "4",
60 borderWidth: "1",
61 borderStyle: "solid",
62 borderColor: "border.default",
63 rounded: "md",
64 bg: "bg.surface",
65 minWidth: "0",
66 });
67
68 const metricLabelClass = css({
69 color: "fg.muted",
70 fontSize: "sm",
71 mb: "2",
72 });
73
74 const metricValueClass = css({
75 fontSize: { base: "lg", md: "xl" },
76 fontWeight: "semibold",
77 lineHeight: "tight",
78 fontVariantNumeric: "tabular-nums",
79 });
80
81 export default function ContractDetailPage() {
82 const { contract, schedule, documents } = data;
83
84 return (
85 <main className={`vektos ${pageClass}`}>
86 <div className={containerClass}>
87 <header
88 className={css({
89 mb: "8",
90 display: "flex",
91 flexDirection: { base: "column", sm: "row" },
92 justifyContent: "space-between",
93 alignItems: { base: "flex-start", sm: "flex-end" },
94 gap: "4",
95 })}
96 >
97 <div>
98 <p
99 className={css({
100 color: "fg.muted",
101 fontSize: "sm",
102 fontWeight: "medium",
103 mb: "2",
104 })}
105 >
106 LOAN ACCOUNT <span aria-hidden="true">/</span> CONTRACT DETAILS
107 </p>
108 <h1
109 className={css({
110 fontSize: { base: "2xl", md: "3xl" },
111 fontWeight: "bold",
112 letterSpacing: "tight",
113 lineHeight: "tight",
114 })}
115 >
116 {contract.product}
117 </h1>
118 <p className={css({ color: "fg.muted", mt: "2" })}>
119 Contract <span className={css({ color: "fg.default", fontWeight: "medium" })}>{contract.number}</span>
120 <span aria-hidden="true"> · </span>
121 Borrower {contract.borrower}
122 </p>
123 </div>
124 <Badge tone="success">{contract.status[0].toUpperCase() + contract.status.slice(1)}</Badge>
125 </header>
126
127 <section aria-labelledby="overview-heading" className={css({ mb: "8" })}>
128 <h2
129 id="overview-heading"
130 className={css({ fontSize: "lg", fontWeight: "semibold", mb: "4" })}
131 >
132 Loan overview
133 </h2>
134 <Card>
135 <CardBody>
136 <div
137 className={css({
138 display: "grid",
139 gridTemplateColumns: { base: "1fr", md: "repeat(3, minmax(0, 1fr))" },
140 gap: "4",
141 mb: "5",
142 })}
143 >
144 <div
145 className={css({
146 p: "5",
147 rounded: "md",
148 bg: "bg.subtle",
149 gridColumn: { md: "span 2" },
150 })}
151 >
152 <p className={metricLabelClass}>Still owed</p>
153 <p className={css({ fontSize: { base: "3xl", md: "4xl" }, fontWeight: "bold", lineHeight: "tight", fontVariantNumeric: "tabular-nums" })}>
154 {formatCurrency(contract.outstanding)}
155 </p>
156 <p className={css({ color: "fg.muted", fontSize: "sm", mt: "2" })}>
157 Outstanding balance on your loan
158 </p>
159 </div>
160 <div className={metricClass}>
161 <p className={metricLabelClass}>Monthly payment</p>
162 <p className={metricValueClass}>{formatCurrency(contract.monthlyPayment)}</p>
163 <p className={css({ color: "fg.muted", fontSize: "sm", mt: "2" })}>Per month</p>
164 </div>
165 </div>
166
167 <div
168 className={css({
169 display: "grid",
170 gridTemplateColumns: { base: "repeat(2, minmax(0, 1fr))", md: "repeat(5, minmax(0, 1fr))" },
171 gap: "3",
172 })}
173 >
174 <div className={metricClass}>
175 <p className={metricLabelClass}>Amount borrowed</p>
176 <p className={metricValueClass}>{formatCurrency(contract.principal)}</p>
177 </div>
178 <div className={metricClass}>
179 <p className={metricLabelClass}>Nominal rate</p>
180 <p className={metricValueClass}>{(contract.nominalRate * 100).toFixed(2)}%</p>
181 </div>
182 <div className={metricClass}>
183 <p className={metricLabelClass}>APR</p>
184 <p className={metricValueClass}>{(contract.apr * 100).toFixed(2)}%</p>
185 </div>
186 <div className={metricClass}>
187 <p className={metricLabelClass}>Term</p>
188 <p className={metricValueClass}>{contract.termMonths} months</p>
189 </div>
190 <div className={metricClass}>
191 <p className={metricLabelClass}>Start date</p>
192 <p className={css({ fontSize: "md", fontWeight: "semibold" })}>{formatDate(contract.startDate)}</p>
193 </div>
194 </div>
195 </CardBody>
196 </Card>
197 </section>
198
199 <section aria-labelledby="schedule-heading" className={css({ mb: "8" })}>
200 <Card>
201 <CardHeader>
202 <CardTitle>
203 <span id="schedule-heading">Repayment schedule</span>
204 </CardTitle>
205 <CardDescription>Instalments for this contract</CardDescription>
206 </CardHeader>
207 <div className={css({ overflowX: "auto", width: "100%" })}>
208 <Table aria-label="Repayment schedule" className={css({ minWidth: "5xl" })}>
209 <TableHead>
210 <TableRow>
211 <TableHeader>Instalment</TableHeader>
212 <TableHeader>Due date</TableHeader>
213 <TableHeader numeric>Payment</TableHeader>
214 <TableHeader numeric>Principal</TableHeader>
215 <TableHeader numeric>Interest</TableHeader>
216 <TableHeader numeric>Balance after payment</TableHeader>
217 <TableHeader>Status</TableHeader>
218 </TableRow>
219 </TableHead>
220 <TableBody>
221 {schedule.map((instalment) => (
222 <TableRow key={instalment.number}>
223 <TableCell>#{String(instalment.number).padStart(2, "0")}</TableCell>
224 <TableCell>{formatDate(instalment.dueDate)}</TableCell>
225 <TableCell numeric>{formatCurrency(instalment.payment)}</TableCell>
226 <TableCell numeric>{formatCurrency(instalment.principal)}</TableCell>
227 <TableCell numeric>{formatCurrency(instalment.interest)}</TableCell>
228 <TableCell numeric>{formatCurrency(instalment.remaining)}</TableCell>
229 <TableCell>
230 <Badge tone={scheduleTone[instalment.status as keyof typeof scheduleTone]}>
231 {scheduleLabel[instalment.status as keyof typeof scheduleLabel]}
232 </Badge>
233 </TableCell>
234 </TableRow>
235 ))}
236 </TableBody>
237 </Table>
238 </div>
239 </Card>
240 </section>
241
242 <section aria-labelledby="documents-heading">
243 <Card>
244 <CardHeader>
245 <CardTitle>
246 <span id="documents-heading">Signed documents</span>
247 </CardTitle>
248 <CardDescription>Documents associated with this loan contract</CardDescription>
249 </CardHeader>
250 <CardBody>
251 <ul className={css({ listStyle: "none", m: "0", p: "0" })}>
252 {documents.map((document, index) => (
253 <li
254 key={document.name}
255 className={css({
256 display: "flex",
257 alignItems: "center",
258 justifyContent: "space-between",
259 gap: "4",
260 py: "4",
261 borderTopWidth: "1",
262 borderTopStyle: "solid",
263 borderColor: "border.default",
264 _first: { borderTopWidth: "0", pt: "0" },
265 _last: { pb: "0" },
266 })}
267 >
268 <div className={css({ display: "flex", alignItems: "center", gap: "3", minWidth: "0" })}>
269 <span
270 aria-hidden="true"
271 className={css({
272 display: "flex",
273 alignItems: "center",
274 justifyContent: "center",
275 width: "10",
276 height: "10",
277 flexShrink: "0",
278 rounded: "md",
279 bg: "bg.subtle",
280 color: "fg.muted",
281 fontSize: "sm",
282 fontWeight: "semibold",
283 })}
284 >
285 {String(index + 1).padStart(2, "0")}
286 </span>
287 <span className={css({ fontWeight: "medium" })}>{document.name}</span>
288 </div>
289 <time dateTime={document.signedAt} className={css({ color: "fg.muted", fontSize: "sm", flexShrink: "0" })}>
290 Signed {formatDate(document.signedAt)}
291 </time>
292 </li>
293 ))}
294 </ul>
295 </CardBody>
296 </Card>
297 </section>
298 </div>
299 </main>
300 );
301 }
302
No overload matches this call.
lint/@pandacss(no-physical-properties) 14 quality page.tsx:71:3 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:89:13 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:103:17 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:118:52 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:127:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:130:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:141:19 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:156:74 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:163:74 Use the logical property "marginBlockStart" instead of the physical "marginTop". page.tsx:199:70 Use the logical property "marginBlockEnd" instead of the physical "marginBottom". page.tsx:261:23 Use the logical property "borderBlockStartWidth" instead of the physical "borderTopWidth". page.tsx:264:33 Use the logical property "borderBlockStartWidth" instead of the physical "borderTopWidth". page.tsx:264:54 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". page.tsx:265:32 Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom". Every run that broke lint/@pandacss(no-physical-properties) typecheck/TS2532 1 quality get_component, get_component, get_component