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, read_file 676 81 $0.0000 1 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 5,785 271 $0.0000 2 read_file, read_file, list_tokens 17,928 168
Output cap The provider's default 4 Card,
5 CardBody,
6 CardHeader,
7 CardTitle,
8 DataList,
9 FormatDate,
10 FormatNumber,
11 Heading,
12 Stack,
13 Table,
14 TableBody,
15 TableCell,
16 TableHead,
17 TableHeader,
18 TableRow,
19 Text,
20 } from "@vektos/ds";
21
22 const { contract, schedule, documents } = data;
23
24 const currency = contract.currency;
25
26 const statusTone = (status: string) => {
27 if (status === "paid") return "success" as const;
28 if (status === "due") return "warning" as const;
29 return "neutral" as const;
30 };
31
32 const statusLabel = (status: string) => {
33 if (status === "paid") return "Paid";
34 if (status === "due") return "Due";
35 return "Upcoming";
36 };
37
38 export default function LoanContractDetailPage() {
39 return (
40 <Stack gap="6" margin="6">
41 <Stack gap="2">
42 <Heading level={1}>{contract.product}</Heading>
43 <Stack flexDirection="row" gap="3" alignItems="center">
44 <Text as="span" mono size="sm" tone="muted">
45 {contract.number}
46 </Text>
47 <Badge tone="success">{contract.status}</Badge>
48 </Stack>
49 <Text size="sm" tone="muted">
50 Borrower: {contract.borrower}
51 </Text>
52 </Stack>
53
54 <Card>
55 <CardHeader>
56 <CardTitle>Key terms</CardTitle>
57 </CardHeader>
58 <CardBody>
59 <DataList
60 items={[
61 {
62 label: "Amount borrowed",
63 value: (
64 <FormatNumber
65 value={contract.principal}
66 format="currency"
67 currency={currency}
68 />
69 ),
70 },
71 {
72 label: "Nominal interest rate",
73 value: (
74 <FormatNumber
75 value={contract.nominalRate}
76 format="percent"
77 minimumFractionDigits={2}
78 maximumFractionDigits={2}
79 />
80 ),
81 },
82 {
83 label: "APR",
84 value: (
85 <FormatNumber
86 value={contract.apr}
87 format="percent"
88 minimumFractionDigits={2}
89 maximumFractionDigits={2}
90 />
91 ),
92 },
93 {
94 label: "Term",
95 value: `${contract.termMonths} months`,
96 },
97 {
98 label: "Monthly payment",
99 value: (
100 <FormatNumber
101 value={contract.monthlyPayment}
102 format="currency"
103 currency={currency}
104 />
105 ),
106 },
107 {
108 label: "Start date",
109 value: <FormatDate value={contract.startDate} dateStyle="long" />,
110 },
111 {
112 label: "Still owed",
113 value: (
114 <FormatNumber
115 value={contract.outstanding}
116 format="currency"
117 currency={currency}
118 />
119 ),
120 },
121 ]}
122 />
123 </CardBody>
124 </Card>
125
126 <Card>
127 <CardHeader>
128 <CardTitle>Repayment schedule</CardTitle>
129 </CardHeader>
130 <Table aria-label="Repayment schedule">
131 <TableHead>
132 <TableRow>
133 <TableHeader>Instalment</TableHeader>
134 <TableHeader>Due date</TableHeader>
135 <TableHeader numeric>Payment</TableHeader>
136 <TableHeader numeric>Principal</TableHeader>
137 <TableHeader numeric>Interest</TableHeader>
138 <TableHeader numeric>Balance</TableHeader>
139 <TableHeader>Status</TableHeader>
140 </TableRow>
141 </TableHead>
142 <TableBody>
143 {schedule.map((row) => (
144 <TableRow key={row.number}>
145 <TableCell>{row.number}</TableCell>
146 <TableCell>
147 <FormatDate value={row.dueDate} dateStyle="medium" />
148 </TableCell>
149 <TableCell numeric>
150 <FormatNumber
151 value={row.payment}
152 format="currency"
153 currency={currency}
154 />
155 </TableCell>
156 <TableCell numeric>
157 <FormatNumber
158 value={row.principal}
159 format="currency"
160 currency={currency}
161 />
162 </TableCell>
163 <TableCell numeric>
164 <FormatNumber
165 value={row.interest}
166 format="currency"
167 currency={currency}
168 />
169 </TableCell>
170 <TableCell numeric>
171 <FormatNumber
172 value={row.remaining}
173 format="currency"
174 currency={currency}
175 />
176 </TableCell>
177 <TableCell>
178 <Badge tone={statusTone(row.status)}>
179 {statusLabel(row.status)}
180 </Badge>
181 </TableCell>
182 </TableRow>
183 ))}
184 </TableBody>
185 </Table>
186 </Card>
187
188 <Card>
189 <CardHeader>
190 <CardTitle>Signed documents</CardTitle>
191 </CardHeader>
192 <CardBody>
193 <DataList
194 items={documents.map((doc) => ({
195 label: doc.name,
196 value: <FormatDate value={doc.signedAt} dateStyle="long" />,
197 }))}
198 />
199 </CardBody>
200 </Card>
201 </Stack>
202 );
203 }
204
3 write_file 1,200 2,562 $0.0000
4 write_file 2,634 1,146 $0.0000