Pages

Pages shows what people see: the routes your app serves, arranged for front-end inspection.

What Pages shows

Pages is the app's front-end route surface on an app board. Nothing is drawn by hand. Routes come from the code plugin's ui.pages aspect, and screenshots come from /inspect.

Pages is app-board-only. The root hub and published boards do not have a Pages screen.

Three panes, one selection

The screen works like a design tool. Layers on the left is the route tree. The canvas in the middle is the map. The inspector on the right shows the selected page.

Select a page anywhere and the other two panes follow. Hover a row in Layers and its tile lights on the canvas. Click a page in the inspector's navigation list and the canvas moves to it.

Hide Layers with the button beside the title, or resize any pane by dragging the divider. Press ⌘F to find a page by route, title, owner or component name. The tree filters and tiles that do not match fade.

Expand

1. 1

   Layers is the route tree

   Hover a row and its tile lights on the canvas.

2. 2

   The canvas is the map

   Pages cluster by feature inside dashed frames on a stable grid.

3. 3

   The inspector shows the selected page

   Select a page anywhere and the other two panes follow.

The canvas

Pages cluster by Feature or Owning layer inside dashed frames on a stable grid. There is no dragging or saved position, so the map looks the same for everyone every time.

A tile changes with zoom. Zoomed out, it shows the route pattern. Zoom in to load the newest ready capture.

Above 100%, the capture's element map appears over the screenshot. Hover an element to see its component name; click it to open the inspector.

Tiles carry small marks for what is worth seeing at a glance: intents anchored to the page, an auth guard, forms, and a route with no error boundary. Every mark names itself on hover.

Double-click a tile to zoom to it, double-click a frame to fit it, and double-click empty canvas to fit everything. The zoom readout at the bottom right returns to 100%.

A tile with nothing to show says "No capture — run /inspect". The empty state names the command that fixes it.

The links between pages

Links are drawn as wires only for the page you are on, the way a prototype shows connections for the selected frame. Hover or select a page to see where it goes and what links to it.

When a target cannot be resolved to a real page, the wire ends at a dashed unresolved ghost in a frame of its own. The gap stays visible without inventing a connection.

Flow follows the wires forward. Start a flow from the selected page with the Flow button or F, and every page reachable from it stays lit while the rest fade. Press F again or Escape to clear it.

The inspector

The inspector shows the selected page's route facts, then:

• Captures: every stored screenshot, by viewport. Pick one and the tile and the elements section switch to it.
• Elements: the render tree from the code, linked to the elements the capture found. Hover a component and its elements light up on the tile. Click one for its role, selector, size and source file.
• Navigates to and Linked from: the resolved links as a list. Click any of them to move there.
• Intents: what is already anchored to this page. Click one to open it.

Owners and notes stay editable at the bottom. Select several tiles at once, by dragging a box or shift-clicking, and the inspector switches to the selection so you can set owners on all of them together.

Keyboard

Right-click a tile for the same actions as a menu, plus Reveal in layers and Copy link.

Opening one page

A page has its own address: ?item=page:<id> opens directly to it with the tile in view. Paste the link into a review, or anchor an intent to the screen it concerns, and the next person opens the same page.

Getting pages onto the board

Two commands, in order, in the repo bound to this board:

1. /adopt --aspect ui.pages extracts the route surface from the code and reconciles it onto the board. This is what fills the screen at all.
2. /inspect opens your running app and stores a page capture, a clean screenshot plus an element map, on each correlated page.

Both commands live in the code plugin, and empty states tell you which one is missing. Once both have run, the hub card shows page and feature counts.

Where Pages fits

Pages is a screen, not a seventh facet. It views the ui.pages aspect as a map instead of a table. It sits between Canvas and Intents in the tab strip.

Captures can become intent visual context, so a request to change a screen includes the screen itself.

What's next