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_tokens, list_files 53 96 $0.0000 1 read_file 7,368 30 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 796 239 $0.0000
Output cap The provider's default 4 Card,
5 CardBody,
6 CardHeader,
7 CardTitle,
8 DataList,
9 FormatDate,
10 FormatNumber,
11 Heading,
12 LocaleProvider,
13 Stack,
14 Table,
15 TableBody,
16 TableCell,
17 TableHead,
18 TableHeader,
19 TableRow,
20 Text,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 const { contract, schedule, documents } = data;
25
26 const contractStatusTone = (status: string) =>
27 status === "paid" || status === "completed" ? "success" : "neutral";
28
29 const instalmentTone = (status: string) =>
30 status === "paid" ? "success" : status === "due" ? "warning" : "neutral";
31
32 const instalmentLabel = (status: string) =>
33 status === "paid" ? "Paid" : status === "due" ? "Due" : "Upcoming";
34
35 export default function Page() {
36 return (
37 <LocaleProvider locale="it-IT">
38 <div
39 className={`vektos ${css({
40 maxWidth: "page",
41 mx: "auto",
42 px: { base: "4", md: "8" },
43 py: "6",
44 })}`}
45 >
46 <Stack gap="6">
47 <Stack gap="2">
48 <Heading level={1}>{contract.product}</Heading>
49 <Stack flexDirection="row" gap="2" alignItems="center" flexWrap="wrap">
50 <Text as="span" mono size="sm" tone="muted">
51 {contract.number}
52 </Text>
53 <Badge tone={contractStatusTone(contract.status)}>
54 {contract.status.charAt(0).toUpperCase() + contract.status.slice(1)}
55 </Badge>
56 </Stack>
57 <Text size="sm" tone="muted">
58 {contract.borrower}
59 </Text>
60 </Stack>
61
62 <Card>
63 <CardHeader>
64 <CardTitle>Key terms</CardTitle>
65 </CardHeader>
66 <CardBody>
67 <DataList
68 items={[
69 {
70 label: "Amount borrowed",
71 value: (
72 <FormatNumber
73 value={contract.principal}
74 format="currency"
75 currency={contract.currency}
76 />
77 ),
78 },
79 {
80 label: "Nominal interest rate",
81 value: (
82 <FormatNumber
83 value={contract.nominalRate}
84 format="percent"
85 maximumFractionDigits={2}
86 />
87 ),
88 },
89 {
90 label: "APR",
91 value: (
92 <FormatNumber
93 value={contract.apr}
94 format="percent"
95 maximumFractionDigits={2}
96 />
97 ),
98 },
99 {
100 label: "Term (months)",
101 value: (
102 <FormatNumber
103 value={contract.termMonths}
104 format="decimal"
105 maximumFractionDigits={0}
106 />
107 ),
108 },
109 {
110 label: "Monthly payment",
111 value: (
112 <FormatNumber
113 value={contract.monthlyPayment}
114 format="currency"
115 currency={contract.currency}
116 />
117 ),
118 },
119 {
120 label: "Start date",
121 value: <FormatDate value={contract.startDate} dateStyle="long" />,
122 },
123 {
124 label: "Still owed",
125 value: (
126 <FormatNumber
127 value={contract.outstanding}
128 format="currency"
129 currency={contract.currency}
130 />
131 ),
132 },
133 ]}
134 />
135 </CardBody>
136 </Card>
137
138 <Card>
139 <CardHeader>
140 <CardTitle>Repayment schedule</CardTitle>
141 </CardHeader>
142 <Table aria-label="Repayment schedule">
143 <TableHead>
144 <TableRow>
145 <TableHeader>#</TableHeader>
146 <TableHeader>Due date</TableHeader>
147 <TableHeader numeric>Payment</TableHeader>
148 <TableHeader numeric>Principal</TableHeader>
149 <TableHeader numeric>Interest</TableHeader>
150 <TableHeader numeric>Balance</TableHeader>
151 <TableHeader>Status</TableHeader>
152 </TableRow>
153 </TableHead>
154 <TableBody>
155 {schedule.map((row) => (
156 <TableRow key={row.number}>
157 <TableCell numeric>{row.number}</TableCell>
158 <TableCell>
159 <FormatDate value={row.dueDate} dateStyle="medium" />
160 </TableCell>
161 <TableCell numeric>
162 <FormatNumber
163 value={row.payment}
164 format="currency"
165 currency={contract.currency}
166 />
167 </TableCell>
168 <TableCell numeric>
169 <FormatNumber
170 value={row.principal}
171 format="currency"
172 currency={contract.currency}
173 />
174 </TableCell>
175 <TableCell numeric>
176 <FormatNumber
177 value={row.interest}
178 format="currency"
179 currency={contract.currency}
180 />
181 </TableCell>
182 <TableCell numeric>
183 <FormatNumber
184 value={row.remaining}
185 format="currency"
186 currency={contract.currency}
187 />
188 </TableCell>
189 <TableCell>
190 <Badge tone={instalmentTone(row.status)}>
191 {instalmentLabel(row.status)}
192 </Badge>
193 </TableCell>
194 </TableRow>
195 ))}
196 </TableBody>
197 </Table>
198 </Card>
199
200 <Card>
201 <CardHeader>
202 <CardTitle>Signed documents</CardTitle>
203 </CardHeader>
204 <Table aria-label="Signed documents">
205 <TableHead>
206 <TableRow>
207 <TableHeader>Document</TableHeader>
208 <TableHeader>Signed on</TableHeader>
209 </TableRow>
210 </TableHead>
211 <TableBody>
212 {documents.map((doc) => (
213 <TableRow key={doc.name}>
214 <TableCell>{doc.name}</TableCell>
215 <TableCell>
216 <FormatDate value={doc.signedAt} dateStyle="long" />
217 </TableCell>
218 </TableRow>
219 ))}
220 </TableBody>
221 </Table>
222 </Card>
223 </Stack>
224 </div>
225 </LocaleProvider>
226 );
227 }
228
4 get_component, get_component, get_component, get_component 87 122 $0.0000
5 write_file 3,725 4,149 $0.0000
6 check_code 4,186 1,343 $0.0000
7 write_file 1,393 1,956 $0.0000
8 check_code 2,029 1,322 $0.0000