> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synclair.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# App sitemap

> Every view the app serves — the route tree, a live preview of each screen, how they connect, and the components each one composes.

`/synclair/pages` is the map of the app's **front end**: every route it serves, what
each screen looks like, how they link together, and — crucially — which library items
each one is built from. If the System Map is "what's under the hood," the sitemap is
"what a user actually walks through."

## What it is

A live inventory of the whole view layer:

<CardGroup cols={2}>
  <Card title="The route tree" icon="sitemap">
    Every view/route the app serves, organized so you can see the whole surface at once.
  </Card>

  <Card title="Live previews" icon="display">
    A real, device-framed preview of each screen — not a screenshot, the running view.
  </Card>

  <Card title="Navigation edges" icon="arrow-right-arrow-left">
    How screens connect — the paths a user takes between them.
  </Card>

  <Card title="Composition" icon="shapes">
    Which components, blocks, and templates each screen is built from — the link from
    view back to library.
  </Card>
</CardGroup>

## What's in it

The map lives in `data/pages-map.json` (schema: `lib/system/pages-map.ts`) and renders
at `/synclair/pages`. The composition data is what makes it more than a list: it ties
each screen to the library items it uses, so you can trace a component to every view it
appears in — and spot views built from unregistered, one-off UI.

## How it works

The sitemap is generated by the `pages-map` skill via the `page-mapper` digger, which
reads the app's router (this repo's, or the **host** app's) and returns the route tree
plus each route's composition and a live-preview URL. It's kept honest by
**`check:pages`**, which flags when the map has drifted from the actual routes.

<Note>
  In companion mode, a live/boot banner lets the hub light up host route previews when the
  host's dev server is running — and offers to boot it when it isn't (`npm run host:status`
  / `npm run host:up`).
</Note>

## How to act on it

<AccordionGroup>
  <Accordion title="Generate or refresh it" icon="arrows-rotate">
    Run the `pages-map` skill ("map the pages / build a sitemap"). Re-run it when
    `check:pages` reports drift after routes change.
  </Accordion>

  <Accordion title="Find the view-layer gap" icon="magnifying-glass">
    Use the composition data to spot screens built from one-off UI that *should* be
    registered components — the same finding the build report ranks.
  </Accordion>

  <Accordion title="Review the whole app at a glance" icon="eye">
    Open `/synclair/pages` to see every screen's preview in one place — useful for a
    design pass or a stakeholder walkthrough.
  </Accordion>
</AccordionGroup>

<Card title="Related: System map" icon="diagram-project" href="/system-map">
  The backend/architecture counterpart — the two together answer "what is this app."
</Card>