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, list_components, list_files 725 55 $0.0001 1 read_file, get_component, get_component, get_component, list_tokens 3 120 $0.0004 2 list_tokens 3 153 $0.0005
e02ef3974528
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 formatCurrency = (amount: number) =>
19 new Intl.NumberFormat("en-IE", {
20 style: "currency",
21 currency: data.contract.currency,
22 }).format(amount);
23
24 const formatDate = (value: string) => {
25 const [year = 0, month = 1, day = 1] = value.split("-").map(Number);
26 return new Intl.DateTimeFormat("en-GB", {
27 day: "numeric",
28 month: "short",
29 year: "numeric",
30 timeZone: "UTC",
31 }).format(new Date(Date.UTC(year, month - 1, day)));
32 };
33
34 const repaymentStatus = (status: string) => {
35 switch (status) {
36 case "paid":
37 return { label: "Paid", tone: "success" as const };
38 case "due":
39 return { label: "Due", tone: "warning" as const };
40 default:
41 return { label: "Upcoming", tone: "neutral" as const };
42 }
43 };
44
45 const terms = [
46 { label: "Amount borrowed", value: formatCurrency(data.contract.principal) },
47 { label: "Nominal interest rate", value: `${(data.contract.nominalRate * 100).toFixed(2)}%` },
48 { label: "APR", value: `${(data.contract.apr * 100).toFixed(2)}%` },
49 { label: "Term", value: `${data.contract.termMonths} months` },
50 { label: "Monthly payment", value: formatCurrency(data.contract.monthlyPayment) },
51 { label: "Start date", value: formatDate(data.contract.startDate) },
52 ];
53
54 export default function ContractDetailPage() {
55 return (
56 <main className={`vektos ${css({ bg: "bg.canvas", color: "fg.default" })}`}>
57 <div className={css({ width: "full", marginInline: "auto", px: "4", py: "8" })}>
58 <header className={css({ marginBlockEnd: "8" })}>
59 <p className={css({ color: "fg.muted", fontSize: "sm", fontWeight: "medium", marginBlockEnd: "2" })}>
60 LOAN CONTRACT · {data.contract.number}
61 </p>
62 <div className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "4" })}>
63 <div>
64 <h1 className={css({ fontSize: "lg", fontWeight: "semibold" })}>{data.contract.product}</h1>
65 <p className={css({ marginBlockStart: "1", color: "fg.muted" })}>
66 Contract for {data.contract.borrower}
67 </p>
68 </div>
69 <Badge tone="success">Active</Badge>
70 </div>
71 </header>
72
73 <section aria-label="Contract overview" className={css({ display: "flex", flexDirection: "column", gap: "6" })}>
74 <Card>
75 <CardBody>
76 <div className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "4" })}>
77 <div>
78 <p className={css({ color: "fg.muted", fontSize: "sm", fontWeight: "medium" })}>
79 Outstanding balance
80 </p>
81 <p className={css({ marginBlockStart: "1", fontSize: "lg", fontWeight: "semibold" })}>
82 {formatCurrency(data.contract.outstanding)}
83 </p>
84 </div>
85 <div className={css({ rounded: "lg", bg: "bg.subtle", px: "4", py: "3" })}>
86 <p className={css({ color: "fg.muted", fontSize: "sm" })}>Contract number</p>
87 <p className={css({ marginBlockStart: "1", fontWeight: "semibold" })}>{data.contract.number}</p>
88 </div>
89 </div>
90 </CardBody>
91 </Card>
92
93 <Card>
94 <CardHeader>
95 <CardTitle>Key terms</CardTitle>
96 <CardDescription>Your loan details at a glance.</CardDescription>
97 </CardHeader>
98 <CardBody>
99 <dl className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
100 {terms.map((term) => (
101 <div key={term.label} className={css({ display: "flex", justifyContent: "space-between", gap: "4" })}>
102 <dt className={css({ color: "fg.muted", fontSize: "sm" })}>{term.label}</dt>
103 <dd className={css({ fontWeight: "semibold" })}>{term.value}</dd>
104 </div>
105 ))}
106 </dl>
107 </CardBody>
108 </Card>
109 </section>
110
111 <section className={css({ marginBlockStart: "8" })} aria-labelledby="repayment-heading">
112 <div className={css({ marginBlockEnd: "4" })}>
113 <h2 id="repayment-heading" className={css({ fontSize: "lg", fontWeight: "semibold" })}>
114 Repayment schedule
115 </h2>
116 <p className={css({ marginBlockStart: "1", color: "fg.muted", fontSize: "sm" })}>
117 Instalments and remaining balance for this contract.
118 </p>
119 </div>
120 <Card>
121 <div className={css({ overflowX: "auto" })}>
122 <Table aria-label="Repayment schedule">
123 <TableHead>
124 <TableRow>
125 <TableHeader>Instalment</TableHeader>
126 <TableHeader>Due date</TableHeader>
127 <TableHeader numeric>Payment</TableHeader>
128 <TableHeader numeric>Principal</TableHeader>
129 <TableHeader numeric>Interest</TableHeader>
130 <TableHeader numeric>Balance after</TableHeader>
131 <TableHeader>Status</TableHeader>
132 </TableRow>
133 </TableHead>
134 <TableBody>
135 {data.schedule.map((instalment) => {
136 const status = repaymentStatus(instalment.status);
137 return (
138 <TableRow key={instalment.number}>
139 <TableCell>{String(instalment.number).padStart(2, "0")}</TableCell>
140 <TableCell>{formatDate(instalment.dueDate)}</TableCell>
141 <TableCell numeric>{formatCurrency(instalment.payment)}</TableCell>
142 <TableCell numeric>{formatCurrency(instalment.principal)}</TableCell>
143 <TableCell numeric>{formatCurrency(instalment.interest)}</TableCell>
144 <TableCell numeric>{formatCurrency(instalment.remaining)}</TableCell>
145 <TableCell><Badge tone={status.tone}>{status.label}</Badge></TableCell>
146 </TableRow>
147 );
148 })}
149 </TableBody>
150 </Table>
151 </div>
152 </Card>
153 </section>
154
155 <section className={css({ marginBlockStart: "8" })} aria-labelledby="documents-heading">
156 <div className={css({ marginBlockEnd: "4" })}>
157 <h2 id="documents-heading" className={css({ fontSize: "lg", fontWeight: "semibold" })}>
158 Signed documents
159 </h2>
160 <p className={css({ marginBlockStart: "1", color: "fg.muted", fontSize: "sm" })}>
161 Documents associated with your loan contract.
162 </p>
163 </div>
164 <Card>
165 <CardBody>
166 <ul className={css({ display: "flex", flexDirection: "column", gap: "4" })}>
167 {data.documents.map((document) => (
168 <li key={document.name} className={css({ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "2" })}>
169 <span className={css({ fontWeight: "medium" })}>{document.name}</span>
170 <span className={css({ color: "fg.muted", fontSize: "sm" })}>
171 Signed {formatDate(document.signedAt)}
172 </span>
173 </li>
174 ))}
175 </ul>
176 </CardBody>
177 </Card>
178 </section>
179 </div>
180 </main>
181 );
182 }
183
6 list_tokens, list_tokens, list_tokens 3 118 $0.0006
9 list_tokens 3 1,072 $0.0010
10 write_file 3 2,547 $0.0016
11 check_code 3 2,170 $0.0016
12 write_file 3 2,606 $0.0018
13 check_code 3 2,160 $0.0017