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 1,822 134 $0.0002 1 get_component, get_component, get_component, list_tokens 5,065 164 $0.0006 2 write_file, check_code 9,788 8,282 $0.0051
e02ef3974528
Output cap The provider's default 4 CardBody,
5 CardHeader,
6 CardTitle,
7 Table,
8 TableBody,
9 TableCell,
10 TableHead,
11 TableHeader,
12 TableRow,
13 } from "@vektos/ds";
14 import { css } from "styled-system/css";
15 import data from "./fixture.json";
16
17 type Tone = "neutral" | "success" | "warning" | "danger";
18
19 const { contract, schedule, documents } = data;
20
21 const money = new Intl.NumberFormat("en-GB", {
22 style: "currency",
23 currency: contract.currency,
24 });
25
26 const percent = new Intl.NumberFormat("en-GB", {
27 style: "percent",
28 minimumFractionDigits: 2,
29 maximumFractionDigits: 2,
30 });
31
32 const dateFormat = new Intl.DateTimeFormat("en-GB", {
33 day: "numeric",
34 month: "short",
35 year: "numeric",
36 timeZone: "UTC",
37 });
38
39 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
40
41 const statusView: Record<string, { tone: Tone; label: string }> = {
42 active: { tone: "success", label: "Active" },
43 paid: { tone: "success", label: "Paid" },
44 due: { tone: "warning", label: "Due" },
45 upcoming: { tone: "neutral", label: "Upcoming" },
46 };
47
48 const viewOf = (status: string): { tone: Tone; label: string } =>
49 statusView[status] ?? { tone: "neutral", label: status };
50
51 const contractStatus = viewOf(contract.status);
52
53 const keyTerms = [
54 { label: "Amount borrowed", value: money.format(contract.principal) },
55 { label: "Still owed", value: money.format(contract.outstanding) },
56 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
57 { label: "APR", value: percent.format(contract.apr) },
58 { label: "Term", value: `${contract.termMonths} months` },
59 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
60 { label: "Start date", value: formatDate(contract.startDate) },
61 ];
62
63 const page = css({
64 display: "flex",
65 flexDirection: "column",
66 gap: "6",
67 p: "6",
68 bg: "bg.canvas",
69 color: "fg.default",
70 });
71
72 const termsList = css({
73 display: "flex",
74 flexWrap: "wrap",
75 gap: "6",
76 margin: "0",
77 });
78
79 const term = css({
80 minWidth: "60",
81 display: "flex",
82 flexDirection: "column",
83 gap: "1",
84 });
85
86 const termLabel = css({
87 fontSize: "sm",
88 color: "fg.muted",
89 });
90
91 const termValue = css({
92 fontSize: "md",
93 fontWeight: "semibold",
94 });
95
96 const cardHeading = css({
97 fontSize: "md",
98 fontWeight: "semibold",
99 });
100
101 const meta = css({
102 fontSize: "sm",
103 color: "fg.muted",
104 });
105
106 export default function LoanContractPage() {
107 return (
108 <main className={`vektos ${page}`}>
109 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
110 <div className={css({ display: "flex", alignItems: "center", gap: "3", flexWrap: "wrap" })}>
111 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
112 {contract.product}
113 </h1>
114 <Badge tone={contractStatus.tone}>{contractStatus.label}</Badge>
115 </div>
116 <p className={meta}>
117 Contract number {contract.number} · Borrower {contract.borrower}
118 </p>
119 </header>
120
121 <Card>
122 <CardHeader>
123 <CardTitle asChild>
124 <h2 className={cardHeading}>Key terms</h2>
125 </CardTitle>
126 </CardHeader>
127 <CardBody>
128 <dl className={termsList}>
129 {keyTerms.map((item) => (
130 <div key={item.label} className={term}>
131 <dt className={termLabel}>{item.label}</dt>
132 <dd className={termValue}>{item.value}</dd>
133 </div>
134 ))}
135 </dl>
136 </CardBody>
137 </Card>
138
139 <Card>
140 <CardHeader>
141 <CardTitle asChild>
142 <h2 className={cardHeading}>Repayment schedule</h2>
143 </CardTitle>
144 </CardHeader>
145 <Table aria-label="Repayment schedule">
146 <TableHead>
147 <TableRow>
148 <TableHeader numeric>No.</TableHeader>
149 <TableHeader>Due date</TableHeader>
150 <TableHeader numeric>Payment</TableHeader>
151 <TableHeader numeric>Principal</TableHeader>
152 <TableHeader numeric>Interest</TableHeader>
153 <TableHeader numeric>Balance after</TableHeader>
154 <TableHeader>Status</TableHeader>
155 </TableRow>
156 </TableHead>
157 <TableBody>
158 {schedule.map((row) => {
159 const status = viewOf(row.status);
160 return (
161 <TableRow key={row.number}>
162 <TableCell numeric>{row.number}</TableCell>
163 <TableCell>{formatDate(row.dueDate)}</TableCell>
164 <TableCell numeric>{money.format(row.payment)}</TableCell>
165 <TableCell numeric>{money.format(row.principal)}</TableCell>
166 <TableCell numeric>{money.format(row.interest)}</TableCell>
167 <TableCell numeric>{money.format(row.remaining)}</TableCell>
168 <TableCell>
169 <Badge tone={status.tone}>{status.label}</Badge>
170 </TableCell>
171 </TableRow>
172 );
173 })}
174 </TableBody>
175 </Table>
176 </Card>
177
178 <Card>
179 <CardHeader>
180 <CardTitle asChild>
181 <h2 className={cardHeading}>Signed documents</h2>
182 </CardTitle>
183 </CardHeader>
184 <Table aria-label="Signed documents">
185 <TableHead>
186 <TableRow>
187 <TableHeader>Document</TableHeader>
188 <TableHeader>Signed on</TableHeader>
189 </TableRow>
190 </TableHead>
191 <TableBody>
192 {documents.map((doc) => (
193 <TableRow key={doc.name}>
194 <TableCell>{doc.name}</TableCell>
195 <TableCell>{formatDate(doc.signedAt)}</TableCell>
196 </TableRow>
197 ))}
198 </TableBody>
199 </Table>
200 </Card>
201 </main>
202 );
203 }
204