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 4 rules. “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 get_guidelines, read_file, list_components 1,591 131 $0.0002 1 get_component, get_component, get_component, list_tokens 4,831 164 $0.0006 2 write_file 9,554 3,731 $0.0028
Output cap The provider's default 3 Card,
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 money = new Intl.NumberFormat("en-GB", { style: "currency", currency: "EUR" });
19
20 function formatMoney(value: number): string {
21 return money.format(value);
22 }
23
24 function formatPercent(value: number): string {
25 return `${(value * 100).toFixed(2)}%`;
26 }
27
28 function formatDate(iso: string): string {
29 return new Intl.DateTimeFormat("en-GB", {
30 day: "numeric",
31 month: "short",
32 year: "numeric",
33 timeZone: "UTC",
34 }).format(new Date(iso));
35 }
36
37 const contractTones: Record<string, "neutral" | "success" | "warning" | "danger"> = {
38 active: "success",
39 closed: "neutral",
40 overdue: "danger",
41 };
42
43 const contractLabels: Record<string, string> = {
44 active: "Active",
45 closed: "Closed",
46 overdue: "Overdue",
47 };
48
49 const instalmentTones: Record<string, "neutral" | "success" | "warning" | "danger"> = {
50 paid: "success",
51 due: "warning",
52 upcoming: "neutral",
53 };
54
55 const instalmentLabels: Record<string, string> = {
56 paid: "Paid",
57 due: "Due",
58 upcoming: "Upcoming",
59 };
60
61 const { contract, schedule, documents } = data;
62
63 const terms: { label: string; value: string }[] = [
64 { label: "Amount borrowed", value: formatMoney(contract.principal) },
65 { label: "Nominal interest rate", value: formatPercent(contract.nominalRate) },
66 { label: "APR", value: formatPercent(contract.apr) },
67 { label: "Term", value: `${contract.termMonths} months` },
68 { label: "Monthly payment", value: formatMoney(contract.monthlyPayment) },
69 { label: "Start date", value: formatDate(contract.startDate) },
70 { label: "Still owed", value: formatMoney(contract.outstanding) },
71 ];
72
73 export default function LoanContractPage() {
74 return (
75 <main
76 className={css({
77 minHeight: "100vh",
78 bg: "bg.canvas",
79 color: "fg.default",
80 py: "8",
81 px: "4",
82 })}
83 >
84 <div
85 className={css({
86 maxWidth: "lg",
87 mx: "auto",
88 display: "flex",
89 flexDirection: "column",
90 gap: "6",
91 })}
92 >
93 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
94 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
95 Contract {contract.number}
96 </p>
97 <div className={css({ display: "flex", alignItems: "center", gap: "3", flexWrap: "wrap" })}>
98 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
99 {contract.product}
100 </h1>
101 <Badge tone={contractTones[contract.status] ?? "neutral"}>
102 {contractLabels[contract.status] ?? contract.status}
103 </Badge>
104 </div>
105 </header>
106
107 <Card>
108 <CardHeader>
109 <CardTitle>Key terms</CardTitle>
110 <CardDescription>Terms agreed for this loan.</CardDescription>
111 </CardHeader>
112 <CardBody>
113 <dl
114 className={css({
115 display: "grid",
116 gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))",
117 gap: "4",
118 margin: "0",
119 })}
120 >
121 {terms.map((term) => (
122 <div key={term.label} className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
123 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>{term.label}</dt>
124 <dd className={css({ margin: "0", fontSize: "md", fontWeight: "semibold" })}>
125 {term.value}
126 </dd>
127 </div>
128 ))}
129 </dl>
130 </CardBody>
131 </Card>
132
133 <Card>
134 <CardHeader>
135 <CardTitle>Repayment schedule</CardTitle>
136 <CardDescription>
137 {schedule.length} instalments, from {formatDate(schedule[0].dueDate)}.
138 </CardDescription>
139 </CardHeader>
140 <div className={css({ overflowX: "auto" })}>
141 <Table aria-label="Repayment schedule">
142 <TableHead>
143 <TableRow>
144 <TableHeader>No.</TableHeader>
145 <TableHeader>Due date</TableHeader>
146 <TableHeader numeric>Payment</TableHeader>
147 <TableHeader numeric>Principal</TableHeader>
148 <TableHeader numeric>Interest</TableHeader>
149 <TableHeader numeric>Balance after</TableHeader>
150 <TableHeader>Status</TableHeader>
151 </TableRow>
152 </TableHead>
153 <TableBody>
154 {schedule.map((row) => (
155 <TableRow key={row.number}>
156 <TableCell>{row.number}</TableCell>
157 <TableCell>{formatDate(row.dueDate)}</TableCell>
158 <TableCell numeric>{formatMoney(row.payment)}</TableCell>
159 <TableCell numeric>{formatMoney(row.principal)}</TableCell>
160 <TableCell numeric>{formatMoney(row.interest)}</TableCell>
161 <TableCell numeric>{formatMoney(row.remaining)}</TableCell>
162 <TableCell>
163 <Badge tone={instalmentTones[row.status] ?? "neutral"}>
164 {instalmentLabels[row.status] ?? row.status}
165 </Badge>
166 </TableCell>
167 </TableRow>
168 ))}
169 </TableBody>
170 </Table>
171 </div>
172 </Card>
173
174 <Card>
175 <CardHeader>
176 <CardTitle>Signed documents</CardTitle>
177 <CardDescription>Documents signed for this contract.</CardDescription>
178 </CardHeader>
179 <Table aria-label="Signed documents">
180 <TableHead>
181 <TableRow>
182 <TableHeader>Document</TableHeader>
183 <TableHeader>Signed on</TableHeader>
184 </TableRow>
185 </TableHead>
186 <TableBody>
187 {documents.map((doc) => (
188 <TableRow key={doc.name}>
189 <TableCell>{doc.name}</TableCell>
190 <TableCell>{formatDate(doc.signedAt)}</TableCell>
191 </TableRow>
192 ))}
193 </TableBody>
194 </Table>
195 </Card>
196 </div>
197 </main>
198 );
199 }
200
typecheck/TS2769 0 quality