Structure

The Structure tab is the main visual planning surface: one connected graph of the application, with four views — Routes, Components, State, Nav — asking four different questions of the same plan. Because every view reads the same graph, attaching a component or drawing a navigation link never creates a second copy of the application to keep in sync. This is application structure designed as a whole — routes, composition, state, and navigation together — rather than four separate diagrams.

Routes

Draw the route tree by painting it on a grid: each row is a level, painting straight down makes a chain of nested routes, painting across makes siblings. The root / is protected — it cannot be deleted or renamed, so the project always generates a valid home page.

Every route's URL is a consequence of where it sits in the tree, and the inspector shows the exact file it will generate. Per route you can set:

• Segment kind — static, param ([postId]), catch-all, or optional catch-all — chosen from a list rather than typed as brackets, so renaming a route renames its param with it. The params a route receives are derived from its ancestors, never declared twice.
• Layout marks and route groups — a route can declare a layout over everything beneath it, and a level can be grouped into a (group) in one keystroke.
• App Router companion files — loading.tsx, error.tsx, and not-found.tsx per route.

A breadth-first naming walk lets you name the whole tree without touching the mouse, and the AI structure agent generates routes from the project description — additively, so a re-run complements the board you have drawn instead of replacing it.

Components and state

The Components and State views keep the route tree on the board but lock it: the tree is what is being annotated. A brush attaches components or stores to every route it sweeps, and the attachments become real imports and usage in the generated code.

The component catalogue follows the project's target platform — the shadcn/ui registry on Web, Desktop, and Extension, Ink terminal components on Terminal, React Native and Expo parts on Mobile — so the rail never offers a part the export cannot actually emit. Your own component names type in freely alongside it. Selecting a component records its props, slots, and whether it renders on the server or the client; selecting a store records the state it holds, its actions, and its zustand middlewares. A note on a component's use is per route, because the same table legitimately does a different job on two pages — and it survives into the generated file as the comment on that component's line.

Navigation

The Nav view links routes: press a route and drag across others, and each route the stroke enters is linked from the one before it, so one stroke draws a whole user path. Links become real <Link> elements in the generated pages. Navigation is planned as its own layer precisely because the route tree says where pages live, not how users move between them — and the SEO panel's reachability stats read these same links, so an orphan page is visible before it is built.

Role guards from Domain load onto the link tool and land on the destination page, not the link — a guard is a fact about the page, so it holds however the user arrives, including by typing the URL. Guarded pages generate a real requireGuards call, and the guards appear as derived denials in the Security matrix.

Working efficiently

The canvas is keyboard-driven: Shift+A adds a route, G groups a level, L tidies the board into a clean site tree, W cycles the select modes (rectangle, circle brush, whole-level). The inspector edits whatever is selected; the rail lists the board in a structured form.

Structure feeds nearly everything downstream: the Export tab's file tree and build order, SEO and accessibility reviews, Security, Traceability, and the project report. The node types it draws are covered in the reference pages for pages, components, layouts, and stores.