1import data from "./fixture.json";2import {3 Card,4 CardHeader,5 CardTitle,6 CardDescription,7 CardBody,8 Stack,9 Text,10 Badge,
Violations
35 counted, under 5 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
page.tsx:56:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:59:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:60:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:63:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:67:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:70:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
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,214
40
$0.0000
1
list_components
1,764
49
$0.0000
2
get_component
4,262
404
$0.0000
3
cdb5d9e77633
Output cap
20,000 tokens a step
11 Table,
12 TableHead,
13 TableBody,
14 TableRow,
15 TableHeader,
16 TableCell,
17} from "@vektos/ds";
18
19const { shipment, packages, events } = data;
20
21const totalWeight = packages.reduce((sum, pkg) => sum + pkg.weightKg, 0).toFixed(2);
22
23// Transform status code to human readable
24const statusLabel =
25 shipment.status === "in_transit" ? "In transit" : shipment.status;
26
27// Sort events newest first
28const sortedEvents = [...events].sort(
29 (a, b) => new Date(b.at).valueOf() - new Date(a.at).valueOf()
30);
31
32// Helper to format date/time
33function formatDate(iso: string) {
34 return new Date(iso).toLocaleString(undefined, {
page.tsx:71:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:74:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:78:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:81:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:82:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:85:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:89:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:92:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:93:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:96:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:100:20Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:105:21Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:119:24Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:121:25Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:122:24Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:124:25Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:129:22Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:130:22Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:132:23Property 'Item' does not exist on type '({ flexDirection, gap, alignItems, justifyContent, flexWrap, UNSAFE_className, UNSAFE_style, ...rest }: StackProps) => Element'.
page.tsx:55:26 · <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`…).
page.tsx:66:26 · <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`…).
page.tsx:77:26 · <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`…).
page.tsx:88:26 · <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`…).
page.tsx:99:26 · <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`…).
page.tsx:118:35 · <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`…).
page.tsx:128:20 · <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`…).
page.tsx:131:23 · <Text fontWeight>`fontWeight` is not a layout prop of `Text`: how it looks belongs to the component. Use one of its variants, or a layout prop (`marginInlineStart`, `flexGrow`, `width`…).
page.tsx:1:1Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Shipmen
page.tsx:55:26Not countedType '{ gap: "4"; direction: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:66:26Not countedType '{ gap: "4"; direction: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:77:26Not countedType '{ gap: "4"; direction: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:88:26Not countedType '{ gap: "4"; direction: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:99:26Not countedType '{ gap: "4"; direction: string; children: Element; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:118:35Not countedType '{ key: string; direction: string; gap: "4"; align: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:128:20Not countedType '{ direction: string; gap: "4"; align: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
page.tsx:131:23Not countedType '{ fontWeight: string; children: string[]; }' is not assignable to type 'IntrinsicAttributes & TextProps'.