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 6 counted, under 2 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, read_file, list_components, list_tokens 1,783 159 $0.0003 1 get_component, get_component, get_component 6,794 139 $0.0007 2 write_file, check_code 9,749 3,892 $0.0029
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, schedule, documents } = data;
19
20 const money = new Intl.NumberFormat("en-GB", {
21 style: "currency",
22 currency: contract.currency,
23 });
24
25 const percent = new Intl.NumberFormat("en-GB", {
26 style: "percent",
27 minimumFractionDigits: 2,
28 maximumFractionDigits: 2,
29 });
30
31 const dateFormat = new Intl.DateTimeFormat("en-GB", {
32 day: "numeric",
33 month: "short",
34 year: "numeric",
35 timeZone: "UTC",
36 });
37
38 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
39
40 const contractTone = {
41 active: "success",
42 closed: "neutral",
43 overdue: "danger",
44 } as const;
45
46 const contractLabel = {
47 active: "Active",
48 closed: "Closed",
49 overdue: "Overdue",
50 } as const;
51
52 const instalmentTone = {
53 paid: "success",
54 due: "warning",
55 upcoming: "neutral",
56 } as const;
57
58 const instalmentLabel = {
59 paid: "Paid",
60 due: "Due",
61 upcoming: "Upcoming",
62 } as const;
63
64 const page = css({
65 display: "flex",
66 flexDirection: "column",
67 gap: "6",
68 maxWidth: "lg",
69 marginInline: "auto",
70 padding: "6",
71 bg: "bg.canvas",
72 color: "fg.default",
73 });
74
75 const heading = css({
76 fontSize: "lg",
77 fontWeight: "semibold",
78 lineHeight: "tight",
79 });
80
81 const headerRow = css({
82 display: "flex",
83 flexWrap: "wrap",
84 alignItems: "center",
85 justifyContent: "space-between",
86 gap: "3",
87 });
88
89 const termsGrid = css({
90 display: "flex",
91 flexWrap: "wrap",
92 gap: "6",
93 });
94
95 const term = css({
96 width: "60",
97 });
98
99 const termLabel = css({
100 fontSize: "sm",
101 color: "fg.muted",
102 });
103
104 const termValue = css({
105 fontSize: "md",
106 fontWeight: "semibold",
107 fontVariantNumeric: "tabular-nums",
108 });
109
110 const muted = css({
111 fontSize: "sm",
112 color: "fg.muted",
113 });
114
115 const scrollX = css({
116 overflowX: "auto",
117 });
118
119 export default function LoanContractPage() {
120 return (
121 <main className={`vektos ${page}`}>
122 <div className={headerRow}>
123 <div>
124 <h1 className={heading}>{contract.product}</h1>
125 <p className={muted}>Contract {contract.number}</p>
126 </div>
127 <Badge tone={contractTone[contract.status]}>
128 {contractLabel[contract.status]}
129 </Badge>
130 </div>
131
132 <Card>
133 <CardHeader>
134 <CardTitle>Key terms</CardTitle>
135 <CardDescription>Borrower: {contract.borrower}</CardDescription>
136 </CardHeader>
137 <CardBody>
138 <dl className={termsGrid}>
139 <div className={term}>
140 <dt className={termLabel}>Amount borrowed</dt>
141 <dd className={termValue}>{money.format(contract.principal)}</dd>
142 </div>
143 <div className={term}>
144 <dt className={termLabel}>Still owed</dt>
145 <dd className={termValue}>{money.format(contract.outstanding)}</dd>
146 </div>
147 <div className={term}>
148 <dt className={termLabel}>Nominal interest rate</dt>
149 <dd className={termValue}>{percent.format(contract.nominalRate)}</dd>
150 </div>
151 <div className={term}>
152 <dt className={termLabel}>APR</dt>
153 <dd className={termValue}>{percent.format(contract.apr)}</dd>
154 </div>
155 <div className={term}>
156 <dt className={termLabel}>Term</dt>
157 <dd className={termValue}>{contract.termMonths} months</dd>
158 </div>
159 <div className={term}>
160 <dt className={termLabel}>Monthly payment</dt>
161 <dd className={termValue}>{money.format(contract.monthlyPayment)}</dd>
162 </div>
163 <div className={term}>
164 <dt className={termLabel}>Start date</dt>
165 <dd className={termValue}>{formatDate(contract.startDate)}</dd>
166 </div>
167 </dl>
168 </CardBody>
169 </Card>
170
171 <Card>
172 <CardHeader>
173 <CardTitle>Repayment schedule</CardTitle>
174 <CardDescription>Instalments in due-date order.</CardDescription>
175 </CardHeader>
176 <div className={scrollX}>
177 <Table aria-label="Repayment schedule">
178 <TableHead>
179 <TableRow>
180 <TableHeader>No.</TableHeader>
181 <TableHeader>Due date</TableHeader>
182 <TableHeader numeric>Payment</TableHeader>
183 <TableHeader numeric>Principal</TableHeader>
184 <TableHeader numeric>Interest</TableHeader>
185 <TableHeader numeric>Balance after</TableHeader>
186 <TableHeader>Status</TableHeader>
187 </TableRow>
188 </TableHead>
189 <TableBody>
190 {schedule.map((row) => (
191 <TableRow key={row.number}>
192 <TableCell>{row.number}</TableCell>
193 <TableCell>{formatDate(row.dueDate)}</TableCell>
194 <TableCell numeric>{money.format(row.payment)}</TableCell>
195 <TableCell numeric>{money.format(row.principal)}</TableCell>
196 <TableCell numeric>{money.format(row.interest)}</TableCell>
197 <TableCell numeric>{money.format(row.remaining)}</TableCell>
198 <TableCell>
199 <Badge tone={instalmentTone[row.status]}>
200 {instalmentLabel[row.status]}
201 </Badge>
202 </TableCell>
203 </TableRow>
204 ))}
205 </TableBody>
206 </Table>
207 </div>
208 </Card>
209
210 <Card>
211 <CardHeader>
212 <CardTitle>Signed documents</CardTitle>
213 </CardHeader>
214 <Table aria-label="Signed documents">
215 <TableHead>
216 <TableRow>
217 <TableHeader>Document</TableHeader>
218 <TableHeader>Signed on</TableHeader>
219 </TableRow>
220 </TableHead>
221 <TableBody>
222 {documents.map((doc) => (
223 <TableRow key={doc.name}>
224 <TableCell>{doc.name}</TableCell>
225 <TableCell>{formatDate(doc.signedAt)}</TableCell>
226 </TableRow>
227 ))}
228 </TableBody>
229 </Table>
230 </Card>
231 </main>
232 );
233 }
234
page.tsx:1:1 · <div class="ov-x_auto"> Scrollable region must have keyboard access (1 element, light theme) page.tsx:1:1 · <div class="ov-x_auto"> Scrollable region must have keyboard access (1 element, dark theme)