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 17 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_guidelines, list_components, list_tokens, list_files 624 66 $0.0001 1 read_file, get_component, get_component, get_component 3 106 $0.0005 2 write_file 3 2,476 $0.0016
Output cap
The provider's default 3 Card,
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 contract = data.contract;
19 const currency = new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: contract.currency,
22 });
23 const dateFormat = new Intl.DateTimeFormat("en-GB", {
24 day: "numeric",
25 month: "short",
26 year: "numeric",
27 timeZone: "UTC",
28 });
29
30 function money(value: number) {
31 return currency.format(value);
32 }
33
34 function date(value: string) {
35 return dateFormat.format(new Date(`${value}T00:00:00Z`));
36 }
37
38 const terms = [
39 { label: "Amount borrowed", value: money(contract.principal) },
40 { label: "Nominal interest rate", value: `${(contract.nominalRate * 100).toFixed(2)}%` },
41 { label: "Annual percentage rate (APR)", value: `${(contract.apr * 100).toFixed(2)}%` },
42 { label: "Term", value: `${contract.termMonths} months` },
43 { label: "Monthly payment", value: money(contract.monthlyPayment) },
44 { label: "Start date", value: date(contract.startDate) },
45 ];
46
47 const statusTone = {
48 paid: "success",
49 due: "warning",
50 upcoming: "neutral",
51 } as const;
52
53 const statusLabel = {
54 paid: "Paid",
55 due: "Due",
56 upcoming: "Upcoming",
57 } as const;
58
59 export default function LoanContractPage() {
60 return (
61 <main className={`vektos ${css({ minH: "100vh", bg: "bg.canvas", color: "fg.default" })}`}>
62 <div
63 className={css({
64 maxW: "lg",
65 mx: "auto",
66 px: "4",
67 py: "8",
68 display: "flex",
69 flexDirection: "column",
70 gap: "6",
71 })}
72 >
73 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
74 <p className={css({ fontSize: "sm", color: "fg.muted", fontWeight: "medium" })}>
75 Loans <span aria-hidden="true">/</span> Contract details
76 </p>
77 <div
78 className={css({
79 display: "flex",
80 alignItems: "flex-start",
81 justifyContent: "space-between",
82 gap: "4",
83 flexWrap: "wrap",
84 })}
85 >
86 <div className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
87 <h1 className={css({ fontSize: "lg", lineHeight: "tight", fontWeight: "semibold" })}>
88 {contract.product}
89 </h1>
90 <p className={css({ color: "fg.muted", fontSize: "sm" })}>
91 Contract <span className={css({ color: "fg.default", fontWeight: "medium" })}>{contract.number}</span>
92 </p>
93 </div>
94 <Badge tone="success">{contract.status.charAt(0).toUpperCase() + contract.status.slice(1)}</Badge>
95 </div>
96 </div>
97
98 <Card>
99 <CardHeader>
100 <CardTitle>Contract overview</CardTitle>
101 <CardDescription>Your loan details and current balance.</CardDescription>
102 </CardHeader>
103 <CardBody>
104 <div
105 className={css({
106 display: "grid",
107 gridTemplateColumns: { base: "1fr", md: "repeat(3, minmax(0, 1fr))" },
108 gap: "4",
109 mb: "6",
110 p: "4",
111 bg: "bg.subtle",
112 rounded: "md",
113 })}
114 >
115 <div>
116 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Still owed</p>
117 <p className={css({ fontSize: "lg", fontWeight: "semibold", mt: "1" })}>
118 {money(contract.outstanding)}
119 </p>
120 </div>
121 <div>
122 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Borrower</p>
123 <p className={css({ fontSize: "md", fontWeight: "medium", mt: "1" })}>{contract.borrower}</p>
124 </div>
125 <div>
126 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Contract number</p>
127 <p className={css({ fontSize: "md", fontWeight: "medium", mt: "1" })}>{contract.number}</p>
128 </div>
129 </div>
130 <dl
131 className={css({
132 display: "grid",
133 gridTemplateColumns: { base: "repeat(2, minmax(0, 1fr))", md: "repeat(3, minmax(0, 1fr))" },
134 gap: "6",
135 })}
136 >
137 {terms.map((term) => (
138 <div key={term.label}>
139 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>{term.label}</dt>
140 <dd className={css({ mt: "1", fontWeight: "semibold" })}>{term.value}</dd>
141 </div>
142 ))}
143 </dl>
144 </CardBody>
145 </Card>
146
147 <Card>
148 <CardHeader>
149 <CardTitle>Repayment schedule</CardTitle>
150 <CardDescription>Instalment breakdown and remaining balance after each payment.</CardDescription>
151 </CardHeader>
152 <div className={css({ overflowX: "auto" })}>
153 <Table aria-label="Repayment schedule">
154 <TableHead>
155 <TableRow>
156 <TableHeader>Instalment</TableHeader>
157 <TableHeader>Due date</TableHeader>
158 <TableHeader numeric>Payment</TableHeader>
159 <TableHeader numeric>Principal</TableHeader>
160 <TableHeader numeric>Interest</TableHeader>
161 <TableHeader numeric>Balance after</TableHeader>
162 <TableHeader>Status</TableHeader>
163 </TableRow>
164 </TableHead>
165 <TableBody>
166 {data.schedule.map((item) => (
167 <TableRow key={item.number}>
168 <TableCell>{String(item.number).padStart(2, "0")}</TableCell>
169 <TableCell>{date(item.dueDate)}</TableCell>
170 <TableCell numeric>{money(item.payment)}</TableCell>
171 <TableCell numeric>{money(item.principal)}</TableCell>
172 <TableCell numeric>{money(item.interest)}</TableCell>
173 <TableCell numeric>{money(item.remaining)}</TableCell>
174 <TableCell>
175 <Badge tone={statusTone[item.status as keyof typeof statusTone]}>
176 {statusLabel[item.status as keyof typeof statusLabel]}
177 </Badge>
178 </TableCell>
179 </TableRow>
180 ))}
181 </TableBody>
182 </Table>
183 </div>
184 </Card>
185
186 <Card>
187 <CardHeader>
188 <CardTitle>Signed documents</CardTitle>
189 <CardDescription>Documents associated with this contract.</CardDescription>
190 </CardHeader>
191 <CardBody>
192 <ul className={css({ display: "flex", flexDirection: "column", gap: "0" })}>
193 {data.documents.map((document) => (
194 <li
195 key={document.name}
196 className={css({
197 display: "flex",
198 alignItems: "center",
199 justifyContent: "space-between",
200 gap: "4",
201 py: "3",
202 borderBottomWidth: "thin",
203 borderColor: "border.default",
204 _last: { borderBottomWidth: "0", pb: "0" },
205 _first: { pt: "0" },
206 })}
207 >
208 <span className={css({ fontWeight: "medium" })}>{document.name}</span>
209 <span className={css({ color: "fg.muted", fontSize: "sm", whiteSpace: "nowrap" })}>
210 Signed {date(document.signedAt)}
211 </span>
212 </li>
213 ))}
214 </ul>
215 </CardBody>
216 </Card>
217 </div>
218 </main>
219 );
220 }
221
Use the logical property "paddingBlockEnd" instead of the physical "paddingBottom".
page.tsx:205:31 Use the logical property "paddingBlockStart" instead of the physical "paddingTop". typecheck/TS2769 3 quality raw-values/raw-length 1 design-system