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 3 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 6,260 $0.0041
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 const formatDate = (iso: string) => dateFormat.format(new Date(iso));
41
42 const contractStatus: Record<string, { label: string; tone: Tone }> = {
43 active: { label: "Active", tone: "success" },
44 };
45
46 const installmentStatus: Record<string, { label: string; tone: Tone }> = {
47 paid: { label: "Paid", tone: "success" },
48 due: { label: "Due", tone: "warning" },
49 upcoming: { label: "Upcoming", tone: "neutral" },
50 };
51
52 const status = contractStatus[contract.status] ?? {
53 label: contract.status,
54 tone: "neutral" as Tone,
55 };
56
57 const terms = [
58 { label: "Amount borrowed", value: money.format(contract.principal) },
59 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
60 { label: "APR", value: percent.format(contract.apr) },
61 { label: "Term", value: `${contract.termMonths} months` },
62 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
63 { label: "Start date", value: formatDate(contract.startDate) },
64 { label: "Still owed", value: money.format(contract.outstanding) },
65 ];
66
67 const sectionTitle = css({ fontSize: "lg", fontWeight: "semibold" });
68
69 export default function LoanContractPage() {
70 return (
71 <main
72 className={`vektos ${css({
73 bg: "bg.canvas",
74 color: "fg.default",
75 minHeight: "100vh",
76 px: "6",
77 py: "8",
78 })}`}
79 >
80 <div
81 className={css({
82 display: "flex",
83 flexDirection: "column",
84 gap: "6",
85 maxWidth: "full",
86 })}
87 >
88 <header
89 className={css({
90 display: "flex",
91 flexWrap: "wrap",
92 alignItems: "center",
93 justifyContent: "space-between",
94 gap: "4",
95 })}
96 >
97 <div>
98 <h1 className={sectionTitle}>{contract.product}</h1>
99 <p className={css({ fontSize: "sm", color: "fg.muted" })}>
100 Contract {contract.number}
101 </p>
102 </div>
103 <Badge tone={status.tone}>{status.label}</Badge>
104 </header>
105
106 <Card>
107 <CardHeader>
108 <CardTitle asChild>
109 <h2 className={sectionTitle}>Key terms</h2>
110 </CardTitle>
111 </CardHeader>
112 <CardBody>
113 <dl
114 className={css({
115 display: "grid",
116 gridTemplateColumns: {
117 base: "1fr",
118 sm: "repeat(2, minmax(0, 1fr))",
119 lg: "repeat(4, minmax(0, 1fr))",
120 },
121 gap: "6",
122 })}
123 >
124 {terms.map((term) => (
125 <div key={term.label}>
126 <dt className={css({ fontSize: "sm", color: "fg.muted" })}>
127 {term.label}
128 </dt>
129 <dd
130 className={css({
131 mt: "1",
132 fontSize: "md",
133 fontWeight: "semibold",
134 })}
135 >
136 {term.value}
137 </dd>
138 </div>
139 ))}
140 </dl>
141 </CardBody>
142 </Card>
143
144 <Card>
145 <CardHeader>
146 <CardTitle asChild>
147 <h2 className={sectionTitle}>Repayment schedule</h2>
148 </CardTitle>
149 <CardDescription>
150 Showing {schedule.length} of {contract.termMonths} instalments.
151 </CardDescription>
152 </CardHeader>
153 <div className={css({ overflowX: "auto" })}>
154 <Table aria-label="Repayment schedule">
155 <TableHead>
156 <TableRow>
157 <TableHeader>No.</TableHeader>
158 <TableHeader>Due date</TableHeader>
159 <TableHeader numeric>Payment</TableHeader>
160 <TableHeader numeric>Principal</TableHeader>
161 <TableHeader numeric>Interest</TableHeader>
162 <TableHeader numeric>Balance after</TableHeader>
163 <TableHeader>Status</TableHeader>
164 </TableRow>
165 </TableHead>
166 <TableBody>
167 {schedule.map((row) => {
168 const state = installmentStatus[row.status] ?? {
169 label: row.status,
170 tone: "neutral" as Tone,
171 };
172 return (
173 <TableRow key={row.number}>
174 <TableCell>{row.number}</TableCell>
175 <TableCell>{formatDate(row.dueDate)}</TableCell>
176 <TableCell numeric>{money.format(row.payment)}</TableCell>
177 <TableCell numeric>{money.format(row.principal)}</TableCell>
178 <TableCell numeric>{money.format(row.interest)}</TableCell>
179 <TableCell numeric>{money.format(row.remaining)}</TableCell>
180 <TableCell>
181 <Badge tone={state.tone}>{state.label}</Badge>
182 </TableCell>
183 </TableRow>
184 );
185 })}
186 </TableBody>
187 </Table>
188 </div>
189 </Card>
190
191 <Card>
192 <CardHeader>
193 <CardTitle asChild>
194 <h2 className={sectionTitle}>Signed documents</h2>
195 </CardTitle>
196 </CardHeader>
197 <Table aria-label="Signed documents">
198 <TableHead>
199 <TableRow>
200 <TableHeader>Document</TableHeader>
201 <TableHeader>Signed on</TableHeader>
202 </TableRow>
203 </TableHead>
204 <TableBody>
205 {documents.map((doc) => (
206 <TableRow key={doc.name}>
207 <TableCell>{doc.name}</TableCell>
208 <TableCell>{formatDate(doc.signedAt)}</TableCell>
209 </TableRow>
210 ))}
211 </TableBody>
212 </Table>
213 </Card>
214 </div>
215 </main>
216 );
217 }
218
No overload matches this call.