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 127 $0.0002 1 get_component, get_component, get_component, list_tokens 5,058 164 $0.0006 2 write_file, check_code 9,781 7,125 $0.0045
e02ef3974528
Output cap The provider's default 4 Card,
5 CardBody,
6 CardDescription,
7 CardHeader,
8 CardTitle,
9 Table,
10 TableBody,
11 TableCell,
12 TableHead,
13 TableHeader,
14 TableRow,
15 } from "@vektos/ds";
16 import { css } from "styled-system/css";
17
18 const { contract, schedule, documents } = data;
19
20 type Tone = "neutral" | "success" | "warning" | "danger";
21
22 const money = new Intl.NumberFormat("en-IE", {
23 style: "currency",
24 currency: contract.currency,
25 });
26
27 const percent = new Intl.NumberFormat("en-IE", {
28 style: "percent",
29 minimumFractionDigits: 2,
30 maximumFractionDigits: 2,
31 });
32
33 const dateFormat = new Intl.DateTimeFormat("en-GB", {
34 day: "2-digit",
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 contractStatus: Record<string, { label: string; tone: Tone }> = {
45 active: { label: "Active", tone: "success" },
46 };
47
48 const instalmentStatus: Record<string, { label: string; tone: Tone }> = {
49 paid: { label: "Paid", tone: "success" },
50 due: { label: "Due", tone: "warning" },
51 upcoming: { label: "Upcoming", tone: "neutral" },
52 };
53
54 const status = contractStatus[contract.status] ?? { label: contract.status, tone: "neutral" as Tone };
55
56 const terms = [
57 { label: "Amount borrowed", value: money.format(contract.principal) },
58 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
59 { label: "APR", value: percent.format(contract.apr) },
60 { label: "Term", value: `${contract.termMonths} months` },
61 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
62 { label: "Start date", value: formatDate(contract.startDate) },
63 { label: "Still owed", value: money.format(contract.outstanding) },
64 ];
65
66 export default function LoanContractPage() {
67 return (
68 <div
69 className={css({
70 display: "flex",
71 flexDirection: "column",
72 gap: "6",
73 width: "full",
74 padding: "6",
75 bg: "bg.canvas",
76 color: "fg.default",
77 })}
78 >
79 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
80 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
81 {contract.product}
82 </h1>
83 <div className={css({ display: "flex", alignItems: "center", gap: "3", flexWrap: "wrap" })}>
84 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
85 Contract {contract.number} · {contract.borrower}
86 </p>
87 <Badge tone={status.tone}>{status.label}</Badge>
88 </div>
89 </header>
90
91 <Card>
92 <CardHeader>
93 <CardTitle>Key terms</CardTitle>
94 <CardDescription>Terms agreed when the loan was signed.</CardDescription>
95 </CardHeader>
96 <CardBody>
97 <dl
98 className={css({
99 display: "flex",
100 flexWrap: "wrap",
101 gap: "6",
102 })}
103 >
104 {terms.map((term) => (
105 <div key={term.label} className={css({ display: "flex", flexDirection: "column", gap: "1", width: "60" })}>
106 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>{term.label}</dt>
107 <dd className={css({ fontSize: "md", fontWeight: "semibold" })}>{term.value}</dd>
108 </div>
109 ))}
110 </dl>
111 </CardBody>
112 </Card>
113
114 <Card>
115 <CardHeader>
116 <CardTitle>Repayment schedule</CardTitle>
117 <CardDescription>Each instalment, how it is split, and the balance left after it.</CardDescription>
118 </CardHeader>
119 <Table aria-label="Repayment schedule" className={css({ marginBlockStart: "4" })}>
120 <TableHead>
121 <TableRow>
122 <TableHeader>No.</TableHeader>
123 <TableHeader>Due date</TableHeader>
124 <TableHeader numeric>Payment</TableHeader>
125 <TableHeader numeric>Principal</TableHeader>
126 <TableHeader numeric>Interest</TableHeader>
127 <TableHeader numeric>Balance after</TableHeader>
128 <TableHeader>Status</TableHeader>
129 </TableRow>
130 </TableHead>
131 <TableBody>
132 {schedule.map((row) => {
133 const info = instalmentStatus[row.status] ?? { label: row.status, tone: "neutral" as Tone };
134 return (
135 <TableRow key={row.number}>
136 <TableCell>{row.number}</TableCell>
137 <TableCell>{formatDate(row.dueDate)}</TableCell>
138 <TableCell numeric>{money.format(row.payment)}</TableCell>
139 <TableCell numeric>{money.format(row.principal)}</TableCell>
140 <TableCell numeric>{money.format(row.interest)}</TableCell>
141 <TableCell numeric>{money.format(row.remaining)}</TableCell>
142 <TableCell>
143 <Badge tone={info.tone}>{info.label}</Badge>
144 </TableCell>
145 </TableRow>
146 );
147 })}
148 </TableBody>
149 </Table>
150 </Card>
151
152 <Card>
153 <CardHeader>
154 <CardTitle>Signed documents</CardTitle>
155 <CardDescription>Documents signed for this contract.</CardDescription>
156 </CardHeader>
157 <Table aria-label="Signed documents" className={css({ marginBlockStart: "4" })}>
158 <TableHead>
159 <TableRow>
160 <TableHeader>Document</TableHeader>
161 <TableHeader>Signed on</TableHeader>
162 </TableRow>
163 </TableHead>
164 <TableBody>
165 {documents.map((doc) => (
166 <TableRow key={doc.name}>
167 <TableCell>{doc.name}</TableCell>
168 <TableCell>{formatDate(doc.signedAt)}</TableCell>
169 </TableRow>
170 ))}
171 </TableBody>
172 </Table>
173 </Card>
174 </div>
175 );
176 }
177