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 None. The run followed every rule that was checked.
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 158 $0.0003 1 get_component, get_component, get_component 6,793 139 $0.0007 2 write_file 9,748 4,996 $0.0035
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 function formatDate(iso: string): string {
39 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
40 }
41
42 const contractStatusTone: Record<string, "neutral" | "success" | "warning" | "danger"> = {
43 active: "success",
44 closed: "neutral",
45 overdue: "danger",
46 };
47
48 const contractStatusLabel: Record<string, string> = {
49 active: "Active",
50 closed: "Closed",
51 overdue: "Overdue",
52 };
53
54 const instalmentTone: Record<string, "neutral" | "success" | "warning" | "danger"> = {
55 paid: "success",
56 due: "warning",
57 upcoming: "neutral",
58 };
59
60 const instalmentLabel: Record<string, string> = {
61 paid: "Paid",
62 due: "Due",
63 upcoming: "Upcoming",
64 };
65
66 const keyTerms = [
67 { label: "Amount borrowed", value: money.format(contract.principal) },
68 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
69 { label: "APR", value: percent.format(contract.apr) },
70 { label: "Term", value: `${contract.termMonths} months` },
71 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
72 { label: "Start date", value: formatDate(contract.startDate) },
73 { label: "Still owed", value: money.format(contract.outstanding) },
74 ];
75
76 const pageStyles = css({
77 display: "flex",
78 flexDirection: "column",
79 gap: "6",
80 p: "6",
81 width: "full",
82 });
83
84 const headerStyles = css({
85 display: "flex",
86 flexWrap: "wrap",
87 alignItems: "center",
88 justifyContent: "space-between",
89 gap: "3",
90 });
91
92 const titleStyles = css({
93 fontSize: "lg",
94 fontWeight: "semibold",
95 lineHeight: "tight",
96 color: "fg.default",
97 });
98
99 const metaStyles = css({
100 display: "flex",
101 flexWrap: "wrap",
102 alignItems: "center",
103 gap: "3",
104 fontSize: "sm",
105 color: "fg.muted",
106 });
107
108 const termsStyles = css({
109 display: "flex",
110 flexWrap: "wrap",
111 gap: "6",
112 padding: "4",
113 margin: "0",
114 });
115
116 const termItemStyles = css({
117 display: "flex",
118 flexDirection: "column",
119 gap: "1",
120 minWidth: "60",
121 });
122
123 const termLabelStyles = css({
124 fontSize: "sm",
125 color: "fg.muted",
126 });
127
128 const termValueStyles = css({
129 fontSize: "lg",
130 fontWeight: "semibold",
131 color: "fg.default",
132 });
133
134 export default function LoanContractPage() {
135 return (
136 <main className={`vektos ${pageStyles}`}>
137 <header className={headerStyles}>
138 <div className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
139 <h1 className={titleStyles}>{contract.product}</h1>
140 <p className={metaStyles}>
141 <span>Contract {contract.number}</span>
142 <span>Borrower {contract.borrower}</span>
143 </p>
144 </div>
145 <Badge tone={contractStatusTone[contract.status] ?? "neutral"}>
146 {contractStatusLabel[contract.status] ?? contract.status}
147 </Badge>
148 </header>
149
150 <Card>
151 <CardHeader>
152 <CardTitle asChild>
153 <h2>Key terms</h2>
154 </CardTitle>
155 <CardDescription>Contract {contract.number}</CardDescription>
156 </CardHeader>
157 <CardBody>
158 <dl className={termsStyles}>
159 {keyTerms.map((term) => (
160 <div key={term.label} className={termItemStyles}>
161 <dt className={termLabelStyles}>{term.label}</dt>
162 <dd className={termValueStyles}>{term.value}</dd>
163 </div>
164 ))}
165 </dl>
166 </CardBody>
167 </Card>
168
169 <Card>
170 <CardHeader>
171 <CardTitle asChild>
172 <h2>Repayment schedule</h2>
173 </CardTitle>
174 <CardDescription>
175 {schedule.length} of {contract.termMonths} instalments shown
176 </CardDescription>
177 </CardHeader>
178 <Table aria-label="Repayment schedule" className={css({ marginBlockStart: "4" })}>
179 <TableHead>
180 <TableRow>
181 <TableHeader>No.</TableHeader>
182 <TableHeader>Due date</TableHeader>
183 <TableHeader numeric>Payment</TableHeader>
184 <TableHeader numeric>Principal</TableHeader>
185 <TableHeader numeric>Interest</TableHeader>
186 <TableHeader numeric>Balance after</TableHeader>
187 <TableHeader>Status</TableHeader>
188 </TableRow>
189 </TableHead>
190 <TableBody>
191 {schedule.map((row) => (
192 <TableRow key={row.number}>
193 <TableCell>{row.number}</TableCell>
194 <TableCell>{formatDate(row.dueDate)}</TableCell>
195 <TableCell numeric>{money.format(row.payment)}</TableCell>
196 <TableCell numeric>{money.format(row.principal)}</TableCell>
197 <TableCell numeric>{money.format(row.interest)}</TableCell>
198 <TableCell numeric>{money.format(row.remaining)}</TableCell>
199 <TableCell>
200 <Badge tone={instalmentTone[row.status] ?? "neutral"}>
201 {instalmentLabel[row.status] ?? row.status}
202 </Badge>
203 </TableCell>
204 </TableRow>
205 ))}
206 </TableBody>
207 </Table>
208 </Card>
209
210 <Card>
211 <CardHeader>
212 <CardTitle asChild>
213 <h2>Signed documents</h2>
214 </CardTitle>
215 <CardDescription>
216 {documents.length} documents signed for this contract
217 </CardDescription>
218 </CardHeader>
219 <Table aria-label="Signed documents" className={css({ marginBlockStart: "4" })}>
220 <TableHead>
221 <TableRow>
222 <TableHeader>Document</TableHeader>
223 <TableHeader>Signed on</TableHeader>
224 </TableRow>
225 </TableHead>
226 <TableBody>
227 {documents.map((doc) => (
228 <TableRow key={doc.name}>
229 <TableCell>{doc.name}</TableCell>
230 <TableCell>{formatDate(doc.signedAt)}</TableCell>
231 </TableRow>
232 ))}
233 </TableBody>
234 </Table>
235 </Card>
236 </main>
237 );
238 }
239