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 4 counted, under 1 rule. “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 read_file, docs-list, read_file 5,425 179 $0.0006 1 docs-show, docs-show, docs-show 6,922 165 $0.0008 2 write_file 9,647 4,140 $0.0030 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 { 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 contractStatusTone: Record<string, "neutral" | "success" | "warning" | "danger"> = {
41 active: "success",
42 };
43
44 const contractStatusLabel: Record<string, string> = {
45 active: "Active",
46 };
47
48 const instalmentTone: Record<string, "neutral" | "success" | "warning" | "danger"> = {
49 paid: "success",
50 due: "warning",
51 upcoming: "neutral",
52 };
53
54 const instalmentLabel: Record<string, string> = {
55 paid: "Paid",
56 due: "Due",
57 upcoming: "Upcoming",
58 };
59
60 const page = css({
61 display: "flex",
62 flexDirection: "column",
63 gap: "6",
64 maxWidth: "5xl",
65 marginInline: "auto",
66 padding: "6",
67 });
68
69 const termsGrid = css({
70 display: "grid",
71 gridTemplateColumns: { base: "1fr", md: "repeat(3, 1fr)" },
72 gap: "5",
73 margin: "0",
74 });
75
76 const term = css({
77 display: "flex",
78 flexDirection: "column",
79 gap: "1",
80 });
81
82 const termValue = css({
83 fontSize: "lg",
84 fontWeight: "semibold",
85 margin: "0",
86 });
87
88 const termLabel = css({
89 fontSize: "sm",
90 margin: "0",
91 });
92
93 const headline = css({
94 display: "flex",
95 flexWrap: "wrap",
96 alignItems: "center",
97 gap: "3",
98 });
99
100 const title = css({
101 fontSize: "2xl",
102 fontWeight: "semibold",
103 margin: "0",
104 });
105
106 const tableWrapper = css({
107 overflowX: "auto",
108 });
109
110 type TermProps = { label: string; children: React.ReactNode };
111
112 function Term({ label, children }: TermProps) {
113 return (
114 <div className={term}>
115 <dt className={termLabel}>{label}</dt>
116 <dd className={termValue}>{children}</dd>
117 </div>
118 );
119 }
120
121 export default function LoanContractPage() {
122 const statusTone = contractStatusTone[contract.status] ?? "neutral";
123 const statusLabel = contractStatusLabel[contract.status] ?? contract.status;
124
125 return (
126 <main className={page}>
127 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
128 <div className={headline}>
129 <h1 className={title}>{contract.product}</h1>
130 <Badge tone={statusTone}>{statusLabel}</Badge>
131 </div>
132 <p className={css({ margin: "0" })}>
133 Contract number <span className={css({ fontWeight: "semibold" })}>{contract.number}</span>
134 </p>
135 </header>
136
137 <Card>
138 <CardHeader>
139 <CardTitle asChild>
140 <h2>Key terms</h2>
141 </CardTitle>
142 <CardDescription>Terms agreed in the credit agreement.</CardDescription>
143 </CardHeader>
144 <CardBody>
145 <dl className={termsGrid}>
146 <Term label="Amount borrowed">{money.format(contract.principal)}</Term>
147 <Term label="Still owed">{money.format(contract.outstanding)}</Term>
148 <Term label="Monthly payment">{money.format(contract.monthlyPayment)}</Term>
149 <Term label="Nominal interest rate">{percent.format(contract.nominalRate)}</Term>
150 <Term label="APR">{percent.format(contract.apr)}</Term>
151 <Term label="Term">{`${contract.termMonths} months`}</Term>
152 <Term label="Start date">{formatDate(contract.startDate)}</Term>
153 </dl>
154 </CardBody>
155 </Card>
156
157 <Card>
158 <CardHeader>
159 <CardTitle asChild>
160 <h2>Repayment schedule</h2>
161 </CardTitle>
162 <CardDescription>Each instalment, how it is split, and the balance left after it.</CardDescription>
163 </CardHeader>
164 <div className={tableWrapper}>
165 <Table aria-label="Repayment schedule">
166 <TableHead>
167 <TableRow>
168 <TableHeader>No.</TableHeader>
169 <TableHeader>Due date</TableHeader>
170 <TableHeader numeric>Payment</TableHeader>
171 <TableHeader numeric>Principal</TableHeader>
172 <TableHeader numeric>Interest</TableHeader>
173 <TableHeader numeric>Balance after</TableHeader>
174 <TableHeader>Status</TableHeader>
175 </TableRow>
176 </TableHead>
177 <TableBody>
178 {schedule.map((row) => (
179 <TableRow key={row.number}>
180 <TableCell>{row.number}</TableCell>
181 <TableCell>{formatDate(row.dueDate)}</TableCell>
182 <TableCell numeric>{money.format(row.payment)}</TableCell>
183 <TableCell numeric>{money.format(row.principal)}</TableCell>
184 <TableCell numeric>{money.format(row.interest)}</TableCell>
185 <TableCell numeric>{money.format(row.remaining)}</TableCell>
186 <TableCell>
187 <Badge tone={instalmentTone[row.status] ?? "neutral"}>
188 {instalmentLabel[row.status] ?? row.status}
189 </Badge>
190 </TableCell>
191 </TableRow>
192 ))}
193 </TableBody>
194 </Table>
195 </div>
196 </Card>
197
198 <Card>
199 <CardHeader>
200 <CardTitle asChild>
201 <h2>Signed documents</h2>
202 </CardTitle>
203 <CardDescription>Documents signed for this contract.</CardDescription>
204 </CardHeader>
205 <Table aria-label="Signed documents">
206 <TableHead>
207 <TableRow>
208 <TableHeader>Document</TableHeader>
209 <TableHeader>Signed on</TableHeader>
210 </TableRow>
211 </TableHead>
212 <TableBody>
213 {documents.map((doc) => (
214 <TableRow key={doc.name}>
215 <TableCell>{doc.name}</TableCell>
216 <TableCell>{formatDate(doc.signedAt)}</TableCell>
217 </TableRow>
218 ))}
219 </TableBody>
220 </Table>
221 </Card>
222 </main>
223 );
224 }
225