Runs / loan-contract Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 15 counted, under 6 rules. “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 read_file 1,212 40 $0.0000 1 list_components 2,022 47 $0.0000 2 get_component 4,518 354 $0.0000 3
cdb5d9e77633
Output cap The provider's default 11
12 TableHead,
13 TableBody,
14 TableRow,
15 TableCell,
16 TableHeader,
17 Badge,
18 Stack,
19 Heading,
20 Text,
21 FormatNumber,
22 FormatDate,
23 } from "@vektos/ds";
24
25 export default function Page() {
26 const { contract, schedule, documents } = data;
27
28 return (
29 <main className="p-6">
30 {/* Top section: product, contract number, status */}
31 <Stack gap={4} align="center">
32 <Heading size="xl" fontWeight="semibold">
33 {contract.product}
34 </Heading>
35
36 <Stack direction="row" gap={2} align="center">
37 <Text>Contract number:{ " " } {contract.number}</Text>
38 <Badge
39 tone={
40 contract.status === "active"
41 ? "success"
42 : contract.status === "closed"
43 ? "neutral"
44 : "warning"
45 }
46 >
47 {contract.status}
48 </Badge>
49 </Stack>
50 </Stack>
51
52 {/* Key terms */}
53 <Card>
54 <CardHeader>
55 <CardTitle>Key terms</CardTitle>
56 </CardHeader>
57 <CardBody>
58 <DataList orientation="vertical" items={[
59 { label: "Amount borrowed", value: <FormatNumber value={contract.principal} format="currency" currency={contract.currency} /> },
60 { label: "Nominal interest rate", value: `${(contract.nominalRate * 100).toFixed(2)}%` },
61 { label: "APR", value: `${(contract.apr * 100).toFixed(2)}%` },
62 { label: "Term", value: `${contract.termMonths} months` },
63 { label: "Monthly payment", value: <FormatNumber value={contract.monthlyPayment} format="currency" currency={contract.currency} /> },
64 { label: "Start date", value: contract.startDate },
65 { label: "Outstanding", value: <FormatNumber value={contract.outstanding} format="currency" currency={contract.currency} /> },
66 ]} />
67 </CardBody>
68 </Card>
69
70 {/* Repayment schedule */}
71 <Card>
72 <CardHeader>
73 <CardTitle>Repayment schedule</CardTitle>
74 </CardHeader>
75 <CardBody>
76 <Table aria-label="Repayment schedule">
77 <TableHead>
78 <TableRow>
79 <TableHeader>Due date</TableHeader>
80 <TableHeader numeric>Payment</TableHeader>
81 <TableHeader numeric>Principal</TableHeader>
82 <TableHeader numeric>Interest</TableHeader>
83 <TableHeader numeric>Balance</TableHeader>
84 <TableHeader>Status</TableHeader>
85 </TableRow>
86 </TableHead>
87 <TableBody>
88 {schedule.map((inst) => (
89 <TableRow key={inst.number}>
90 <TableCell>{inst.dueDate}</TableCell>
91 <TableCell numeric>{inst.payment}</TableCell>
92 <TableCell numeric>{inst.principal}</TableCell>
93 <TableCell numeric>{inst.interest}</TableCell>
94 <TableCell numeric>{inst.remaining}</TableCell>
95 <TableCell>
96 <Badge
97 tone={
98 inst.status === "paid"
99 ? "success"
100 : inst.status === "due"
101 ? "warning"
102 : "danger"
103 }
104 >
105 {inst.status}
106 </Badge>
107 </TableCell>
108 </TableRow>
109 ))}
110 </TableBody>
111 </Table>
112 </CardBody>
113 </Card>
114
115 {/* Signed documents */}
116 <Card>
117 <CardHeader>
118 <CardTitle>Signed documents</CardTitle>
119 </CardHeader>
120 <CardBody>
121 <DataList orientation="vertical" items={documents.map((doc) => ({
122 label: doc.name,
123 value: `${doc.name} (signed ${doc.signedAt})`,
124 }))} />
125 </CardBody>
126 </Card>
127 </main>
128 );
129 }
outside-styling/styled-from-outside 2 design-system page.tsx:32:28 · <Heading fontWeight> `fontWeight` is not a layout prop of `Heading`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…). page.tsx:36:16 · <Stack direction> `direction` is not a layout prop of `Stack`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…). Every run that broke outside-styling/styled-from-outside render/runtime-error 1 completeness typecheck/TS2322 1 quality page.tsx:31:14 Type 'number' is not assignable to type 'ConditionalValue<SpacingValue>'. page.tsx:32:28 Not counted Type '{ size: "xl"; fontWeight: string; children: string; }' is not assignable to type 'IntrinsicAttributes & HeadingProps'. page.tsx:36:32 Not counted Type 'number' is not assignable to type 'ConditionalValue<SpacingValue>'. Every run that broke typecheck/TS2322 4 get_component 2,342 37 $0.0000
5 get_component 901 37 $0.0000
6 write_file 2,276 2,235 $0.0000