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