Pages

Pages is an app board's map of its front end: every route your app serves, laid out so you can inspect what people see. It sits between Canvas and Work items in the tab strip.

Getting pages onto the board

Run two commands, in this order, in the repo bound to this board:

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

Both commands are part of the code plugin. If one hasn't run, the empty state names it. After both have run, you can add the hub's Pages card from Add widget.

A page capture can become a work item's visual context, so a request to change a screen includes the screen.

Only app boards have Pages; the root hub doesn't. A published board that includes pages gets the same screen, read-only. It shows one app at a time, with each page's latest desktop and mobile capture.

Three panes, one selection

Press ⌘F to find a page by route, title, owner or component name. Layers filters to the matches, and tiles that don't match fade.

Expand

1. 1

   Layers is the route tree

   Hover a row to highlight its tile on the canvas.

2. 2

   The canvas is the map

   Dashed frames group pages by feature on a stable grid.

3. 3

   The inspector shows the selected page

   Select a page in any pane and the other two follow.

The canvas

The canvas groups pages by Feature or Owning layer, inside dashed frames on a stable grid. You can't drag tiles.

Zoomed out, a tile shows the route pattern; zoomed in, it loads the newest ready capture.

Above 100%, the capture's element map appears over the screenshot. Click an element to open it in the inspector.

Marks on a tile show work items anchored to the page, an auth guard, forms, and a route with no error boundary.

Double-click a tile to zoom to it, a frame to fit it, or empty canvas to fit everything.

A tile without a capture reads "No capture — run /inspect".

The links between pages

The canvas draws links as wires only for the page you're on. Hover or select a page to see where it links to and what links to it.

If a link's target doesn't resolve to a real page, the wire ends at a dashed unresolved ghost in a frame of its own.

Start Flow with its button or F: every page reachable from the selected one stays lit, and 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 to switch the tile and the elements section to it.
• Elements: the render tree from the code, linked to the elements the capture found. Click one for its role, selector, size and source file.
• Navigates to and Linked from: the resolved links as a list. Click one to move to that page.
• Work items: what is already anchored to this page.

You can edit owners and notes at the bottom of the inspector. To work on several pages together, select their tiles by dragging a box, or by holding Shift or ⌘ while clicking; the inspector switches to the selection. On Windows and Linux, read ⌘ as Ctrl. Edits wait in the save bar until you choose Save changes.

Delete, at the bottom of the inspector, removes the page; on a selection it removes every selected page. A deleted page leaves the board when you choose Save changes; Undo brings it back until then. A page the code plugin extracted is governed the way a node is: when you commit, the work item records the removal as a proposal. See Edit or delete an aspect.

Keyboard

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

Opening one page

Each page has its own address: ?item=page:<id> opens the page directly, with its tile in view.

What's next