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 133 $0.0002 1 get_component, get_component, get_component, list_tokens 5,064 164 $0.0006 2 write_file, check_code 9,787 6,608 $0.0043
e02ef3974528
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 type Tone = "neutral" | "success" | "warning" | "danger";
21
22 const money = new Intl.NumberFormat("en-GB", {
23 style: "currency",
24 currency: contract.currency,
25 });
26
27 const percent = new Intl.NumberFormat("en-GB", {
28 style: "percent",
29 minimumFractionDigits: 2,
30 maximumFractionDigits: 2,
31 });
32
33 const dateFormat = new Intl.DateTimeFormat("en-GB", {
34 day: "numeric",
35 month: "short",
36 year: "numeric",
37 timeZone: "UTC",
38 });
39
40 function formatDate(iso: string): string {
41 return dateFormat.format(new Date(`${iso}T00:00:00Z`));
42 }
43
44 const contractStatuses: Record<string, { tone: Tone; label: string }> = {
45 active: { tone: "success", label: "Active" },
46 closed: { tone: "neutral", label: "Closed" },
47 defaulted: { tone: "danger", label: "Defaulted" },
48 };
49
50 const instalmentStatuses: Record<string, { tone: Tone; label: string }> = {
51 paid: { tone: "success", label: "Paid" },
52 due: { tone: "warning", label: "Due" },
53 upcoming: { tone: "neutral", label: "Upcoming" },
54 };
55
56 const contractStatus = contractStatuses[contract.status] ?? {
57 tone: "neutral" as const,
58 label: contract.status,
59 };
60
61 const summary = [
62 { label: "Amount borrowed", value: money.format(contract.principal) },
63 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
64 { label: "APR", value: percent.format(contract.apr) },
65 { label: "Term", value: `${contract.termMonths} months` },
66 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
67 { label: "Start date", value: formatDate(contract.startDate) },
68 { label: "Still owed", value: money.format(contract.outstanding) },
69 ];
70
71 export default function LoanContractPage() {
72 return (
73 <main
74 className={css({
75 display: "flex",
76 flexDirection: "column",
77 gap: "6",
78 maxWidth: "lg",
79 marginInline: "auto",
80 padding: "6",
81 bg: "bg.canvas",
82 })}
83 >
84 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
85 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
86 Contract {contract.number}
87 </p>
88 <div className={css({ display: "flex", alignItems: "center", gap: "3", flexWrap: "wrap" })}>
89 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", color: "fg.default" })}>
90 {contract.product}
91 </h1>
92 <Badge tone={contractStatus.tone}>{contractStatus.label}</Badge>
93 </div>
94 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
95 Borrower: {contract.borrower}
96 </p>
97 </header>
98
99 <Card>
100 <CardHeader>
101 <CardTitle>Key terms</CardTitle>
102 <CardDescription>Terms agreed when the loan was signed.</CardDescription>
103 </CardHeader>
104 <CardBody>
105 <dl
106 className={css({
107 display: "grid",
108 gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))",
109 gap: "4",
110 margin: "0",
111 })}
112 >
113 {summary.map((item) => (
114 <div key={item.label} className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
115 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>{item.label}</dt>
116 <dd className={css({ margin: "0", fontSize: "lg", fontWeight: "semibold", color: "fg.default" })}>
117 {item.value}
118 </dd>
119 </div>
120 ))}
121 </dl>
122 </CardBody>
123 </Card>
124
125 <Card>
126 <CardHeader>
127 <CardTitle>Repayment schedule</CardTitle>
128 <CardDescription>Each instalment, with its principal, interest and the balance left after it.</CardDescription>
129 </CardHeader>
130 <Table aria-label="Repayment schedule" className={css({ marginBlockStart: "4" })}>
131 <TableHead>
132 <TableRow>
133 <TableHeader>No.</TableHeader>
134 <TableHeader>Due date</TableHeader>
135 <TableHeader numeric>Payment</TableHeader>
136 <TableHeader numeric>Principal</TableHeader>
137 <TableHeader numeric>Interest</TableHeader>
138 <TableHeader numeric>Balance after</TableHeader>
139 <TableHeader>Status</TableHeader>
140 </TableRow>
141 </TableHead>
142 <TableBody>
143 {schedule.map((row) => {
144 const status = instalmentStatuses[row.status] ?? {
145 tone: "neutral" as const,
146 label: row.status,
147 };
148 return (
149 <TableRow key={row.number}>
150 <TableCell>{row.number}</TableCell>
151 <TableCell>{formatDate(row.dueDate)}</TableCell>
152 <TableCell numeric>{money.format(row.payment)}</TableCell>
153 <TableCell numeric>{money.format(row.principal)}</TableCell>
154 <TableCell numeric>{money.format(row.interest)}</TableCell>
155 <TableCell numeric>{money.format(row.remaining)}</TableCell>
156 <TableCell>
157 <Badge tone={status.tone}>{status.label}</Badge>
158 </TableCell>
159 </TableRow>
160 );
161 })}
162 </TableBody>
163 </Table>
164 </Card>
165
166 <Card>
167 <CardHeader>
168 <CardTitle>Signed documents</CardTitle>
169 <CardDescription>Documents signed for this contract.</CardDescription>
170 </CardHeader>
171 <Table aria-label="Signed documents" className={css({ marginBlockStart: "4" })}>
172 <TableHead>
173 <TableRow>
174 <TableHeader>Document</TableHeader>
175 <TableHeader>Signed on</TableHeader>
176 </TableRow>
177 </TableHead>
178 <TableBody>
179 {documents.map((doc) => (
180 <TableRow key={doc.name}>
181 <TableCell>{doc.name}</TableCell>
182 <TableCell>{formatDate(doc.signedAt)}</TableCell>
183 </TableRow>
184 ))}
185 </TableBody>
186 </Table>
187 </Card>
188 </main>
189 );
190 }
191