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 3 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, list_tokens 1,591 160 $0.0002 1 get_component, get_component, get_component 6,603 139 $0.0007 2 write_file 9,558 4,360 $0.0031
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 type Tone = "neutral" | "success" | "warning" | "danger";
19
20 const { contract, schedule, documents } = data;
21
22 const money = new Intl.NumberFormat("en-US", {
23 style: "currency",
24 currency: contract.currency,
25 });
26
27 const percent = new Intl.NumberFormat("en-US", {
28 style: "percent",
29 minimumFractionDigits: 2,
30 maximumFractionDigits: 2,
31 });
32
33 const formatDate = (iso: string) =>
34 new Intl.DateTimeFormat("en-GB", {
35 day: "numeric",
36 month: "short",
37 year: "numeric",
38 timeZone: "UTC",
39 }).format(new Date(`${iso}T00:00:00Z`));
40
41 const contractMeta: Record<string, { label: string; tone: Tone }> = {
42 active: { label: "Active", tone: "success" },
43 };
44
45 const scheduleMeta: Record<string, { label: string; tone: Tone }> = {
46 paid: { label: "Paid", tone: "success" },
47 due: { label: "Due", tone: "warning" },
48 upcoming: { label: "Upcoming", tone: "neutral" },
49 };
50
51 const contractStatus = contractMeta[contract.status] ?? {
52 label: contract.status,
53 tone: "neutral" as Tone,
54 };
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 <main
69 className={css({
70 minHeight: "100vh",
71 bg: "bg.canvas",
72 color: "fg.default",
73 px: "4",
74 py: "8",
75 })}
76 >
77 <div
78 className={css({
79 maxWidth: "lg",
80 mx: "auto",
81 display: "flex",
82 flexDirection: "column",
83 gap: "6",
84 })}
85 >
86 <header className={css({ display: "flex", flexDirection: "column", gap: "2" })}>
87 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
88 Contract {contract.number}
89 </p>
90 <div className={css({ display: "flex", alignItems: "center", gap: "3", flexWrap: "wrap" })}>
91 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
92 {contract.product}
93 </h1>
94 <Badge tone={contractStatus.tone}>{contractStatus.label}</Badge>
95 </div>
96 <p className={css({ fontSize: "sm", color: "fg.muted" })}>Borrower: {contract.borrower}</p>
97 </header>
98
99 <Card>
100 <CardHeader>
101 <CardTitle>Key terms</CardTitle>
102 <CardDescription>The conditions agreed in the credit agreement.</CardDescription>
103 </CardHeader>
104 <CardBody>
105 <dl
106 className={css({
107 display: "grid",
108 gridTemplateColumns: { base: "1fr", md: "repeat(3, 1fr)" },
109 gap: "6",
110 })}
111 >
112 {terms.map((term) => (
113 <div key={term.label} className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
114 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>{term.label}</dt>
115 <dd className={css({ fontSize: "lg", fontWeight: "semibold", m: "0" })}>
116 {term.value}
117 </dd>
118 </div>
119 ))}
120 </dl>
121 </CardBody>
122 </Card>
123
124 <Card>
125 <CardHeader>
126 <CardTitle>Repayment schedule</CardTitle>
127 <CardDescription>Each instalment, how it is split, and the balance left after it.</CardDescription>
128 </CardHeader>
129 <div className={css({ overflowX: "auto" })}>
130 <Table aria-label="Repayment schedule">
131 <TableHead>
132 <TableRow>
133 <TableHeader numeric>No.</TableHeader>
134 <TableHeader>Due date</TableHeader>
135 <TableHeader numeric>Payment (EUR)</TableHeader>
136 <TableHeader numeric>Principal (EUR)</TableHeader>
137 <TableHeader numeric>Interest (EUR)</TableHeader>
138 <TableHeader numeric>Balance after (EUR)</TableHeader>
139 <TableHeader>Status</TableHeader>
140 </TableRow>
141 </TableHead>
142 <TableBody>
143 {schedule.map((row) => {
144 const meta = scheduleMeta[row.status] ?? {
145 label: row.status,
146 tone: "neutral" as Tone,
147 };
148 return (
149 <TableRow key={row.number}>
150 <TableCell numeric>{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={meta.tone}>{meta.label}</Badge>
158 </TableCell>
159 </TableRow>
160 );
161 })}
162 </TableBody>
163 </Table>
164 </div>
165 </Card>
166
167 <Card>
168 <CardHeader>
169 <CardTitle>Signed documents</CardTitle>
170 </CardHeader>
171 <Table aria-label="Signed documents">
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 </div>
189 </main>
190 );
191 }
192