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 2 counted, under 2 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,783 160 $0.0003 1 get_component, get_component, get_component 6,795 139 $0.0007 2 write_file 9,750 4,889 $0.0034
Output cap The provider's default 4 CardDescription,
5 CardHeader,
6 CardTitle,
7 Table,
8 TableBody,
9 TableCell,
10 TableHead,
11 TableHeader,
12 TableRow,
13 } from "@vektos/ds";
14 import { css } from "styled-system/css";
15 import data from "./fixture.json";
16
17 type Tone = "neutral" | "success" | "warning" | "danger";
18
19 const { contract, schedule, documents } = data;
20
21 const money = new Intl.NumberFormat("en-GB", {
22 style: "currency",
23 currency: contract.currency,
24 });
25
26 const percent = new Intl.NumberFormat("en-GB", {
27 style: "percent",
28 minimumFractionDigits: 2,
29 maximumFractionDigits: 2,
30 });
31
32 const dateFormat = new Intl.DateTimeFormat("en-GB", {
33 day: "numeric",
34 month: "short",
35 year: "numeric",
36 timeZone: "UTC",
37 });
38
39 const formatDate = (iso: string) => dateFormat.format(new Date(`${iso}T00:00:00Z`));
40
41 const contractStatus: Record<string, { label: string; tone: Tone }> = {
42 active: { label: "Active", tone: "success" },
43 };
44
45 const instalmentStatus: 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 status = contractStatus[contract.status] ?? { label: contract.status, tone: "neutral" as Tone };
52
53 const terms = [
54 { label: "Amount borrowed", value: money.format(contract.principal) },
55 { label: "Nominal interest rate", value: percent.format(contract.nominalRate) },
56 { label: "APR", value: percent.format(contract.apr) },
57 { label: "Term", value: `${contract.termMonths} months` },
58 { label: "Monthly payment", value: money.format(contract.monthlyPayment) },
59 { label: "Start date", value: formatDate(contract.startDate) },
60 { label: "Still owed", value: money.format(contract.outstanding) },
61 ];
62
63 export default function LoanContractPage() {
64 return (
65 <div
66 className={`vektos ${css({
67 bg: "bg.canvas",
68 color: "fg.default",
69 p: "6",
70 display: "flex",
71 flexDirection: "column",
72 gap: "6",
73 })}`}
74 >
75 <header className={css({ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "3" })}>
76 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
77 {contract.product}
78 </h1>
79 <Badge tone={status.tone}>{status.label}</Badge>
80 <p className={css({ color: "fg.muted", fontSize: "sm", width: "full" })}>
81 Contract {contract.number} · Borrower {contract.borrower}
82 </p>
83 </header>
84
85 <Card>
86 <CardHeader>
87 <CardTitle asChild>
88 <h2>Key terms</h2>
89 </CardTitle>
90 <CardDescription>Terms agreed in the credit agreement.</CardDescription>
91 </CardHeader>
92 <dl
93 className={css({
94 display: "grid",
95 gridTemplateColumns: { base: "1fr", md: "repeat(3, 1fr)" },
96 gap: "6",
97 p: "6",
98 pt: "4",
99 })}
100 >
101 {terms.map((term) => (
102 <div key={term.label} className={css({ display: "flex", flexDirection: "column", gap: "1" })}>
103 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>{term.label}</dt>
104 <dd className={css({ fontSize: "lg", fontWeight: "semibold" })}>{term.value}</dd>
105 </div>
106 ))}
107 </dl>
108 </Card>
109
110 <Card>
111 <CardHeader>
112 <CardTitle asChild>
113 <h2>Repayment schedule</h2>
114 </CardTitle>
115 <CardDescription>
116 Showing {schedule.length} of {contract.termMonths} instalments.
117 </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 state = 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={state.tone}>{state.label}</Badge>
144 </TableCell>
145 </TableRow>
146 );
147 })}
148 </TableBody>
149 </Table>
150 </Card>
151
152 <Card>
153 <CardHeader>
154 <CardTitle asChild>
155 <h2>Signed documents</h2>
156 </CardTitle>
157 </CardHeader>
158 <Table aria-label="Signed documents" className={css({ marginBlockStart: "4" })}>
159 <TableHead>
160 <TableRow>
161 <TableHeader>Document</TableHeader>
162 <TableHeader>Signed on</TableHeader>
163 </TableRow>
164 </TableHead>
165 <TableBody>
166 {documents.map((doc) => (
167 <TableRow key={doc.name}>
168 <TableCell>{doc.name}</TableCell>
169 <TableCell>{formatDate(doc.signedAt)}</TableCell>
170 </TableRow>
171 ))}
172 </TableBody>
173 </Table>
174 </Card>
175 </div>
176 );
177 }
178
4 write_file 17,205 2,494 $0.0030