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 1 rule. “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 list_files, get_guidelines, list_components 164 61 $0.0000 1 read_file, list_tokens, read_file 5,137 75 $0.0000 2 get_component, get_component, get_component, get_component, get_component, get_component 6,845 150 $0.0000
Output cap The provider's default 3
4 const statusTone = {
5 paid: "success",
6 due: "warning",
7 upcoming: "neutral",
8 } as const;
9
10 const statusLabel = {
11 paid: "Paid",
12 due: "Due",
13 upcoming: "Upcoming",
14 } as const;
15
16 export default function Page() {
17 const { contract, schedule, documents } = data;
18
19 return (
20 <div className="vektos">
21 <Stack gap="6" marginBlock="6" marginInline="6">
22 <Stack gap="2">
23 <Stack flexDirection={{ base: "column", md: "row" }} alignItems={{ base: "flex-start", md: "center" }} gap="3">
24 <Heading level={1}>{contract.product}</Heading>
25 <Badge tone="neutral">{contract.status === "active" ? "Active" : contract.status}</Badge>
26 </Stack>
27 <Clipboard label="Contract number" value={contract.number} />
28 </Stack>
29
30 <Card>
31 <CardHeader>
32 <CardTitle>Key terms</CardTitle>
33 </CardHeader>
34 <CardBody>
35 <DataList
36 items={[
37 {
38 label: "Amount borrowed",
39 value: (
40 <FormatNumber value={contract.principal} format="currency" currency={contract.currency} />
41 ),
42 },
43 {
44 label: "Nominal interest rate",
45 value: (
46 <FormatNumber
47 value={contract.nominalRate}
48 format="percent"
49 minimumFractionDigits={2}
50 maximumFractionDigits={2}
51 />
52 ),
53 },
54 {
55 label: "APR",
56 value: (
57 <FormatNumber
58 value={contract.apr}
59 format="percent"
60 minimumFractionDigits={2}
61 maximumFractionDigits={2}
62 />
63 ),
64 },
65 { label: "Term", value: `${contract.termMonths} months` },
66 {
67 label: "Monthly payment",
68 value: (
69 <FormatNumber value={contract.monthlyPayment} format="currency" currency={contract.currency} />
70 ),
71 },
72 {
73 label: "Start date",
74 value: <FormatDate value={contract.startDate} dateStyle="medium" />,
75 },
76 {
77 label: "Still owed",
78 value: (
79 <FormatNumber value={contract.outstanding} format="currency" currency={contract.currency} />
80 ),
81 },
82 ]}
83 />
84 </CardBody>
85 </Card>
86
87 <Card>
88 <CardHeader>
89 <CardTitle>Repayment schedule</CardTitle>
90 </CardHeader>
91 <Table aria-label="Repayment schedule">
92 <TableHead>
93 <TableRow>
94 <TableHeader numeric>Instalment</TableHeader>
95 <TableHeader>Due date</TableHeader>
96 <TableHeader numeric>Payment</TableHeader>
97 <TableHeader numeric>Principal</TableHeader>
98 <TableHeader numeric>Interest</TableHeader>
99 <TableHeader numeric>Balance after</TableHeader>
100 <TableHeader>Status</TableHeader>
101 </TableRow>
102 </TableHead>
103 <TableBody>
104 {schedule.map((row) => (
105 <TableRow key={row.number}>
106 <TableCell numeric>{row.number}</TableCell>
107 <TableCell>
108 <FormatDate value={row.dueDate} dateStyle="medium" />
109 </TableCell>
110 <TableCell numeric>
111 <FormatNumber value={row.payment} format="currency" currency={contract.currency} />
112 </TableCell>
113 <TableCell numeric>
114 <FormatNumber value={row.principal} format="currency" currency={contract.currency} />
115 </TableCell>
116 <TableCell numeric>
117 <FormatNumber value={row.interest} format="currency" currency={contract.currency} />
118 </TableCell>
119 <TableCell numeric>
120 <FormatNumber value={row.remaining} format="currency" currency={contract.currency} />
121 </TableCell>
122 <TableCell>
123 <Badge tone={statusTone[row.status as keyof typeof statusTone]}>
124 {statusLabel[row.status as keyof typeof statusLabel]}
125 </Badge>
126 </TableCell>
127 </TableRow>
128 ))}
129 </TableBody>
130 </Table>
131 </Card>
132
133 <Card>
134 <CardHeader>
135 <CardTitle>Signed documents</CardTitle>
136 </CardHeader>
137 <CardBody>
138 <DataList
139 items={documents.map((doc) => ({
140 label: doc.name,
141 value: <FormatDate value={doc.signedAt} dateStyle="medium" />,
142 }))}
143 />
144 </CardBody>
145 </Card>
146 </Stack>
147 </div>
148 );
149 }
150
3 get_component, get_component, get_component, get_component 5,069 85 $0.0000
4 get_component, get_component, get_component, list_tokens 11,093 365 $0.0000
5 write_file 2,703 4,007 $0.0000
6 write_file 4,046 1,170 $0.0000
7 write_file 1,208 1,203 $0.0000