Screens Overview
Route-level UI contracts — what each screen shows, its states, and the data it reads and writes
Each screen page documents one route in the app. A screen page covers:
- Route — the file-based path
- Purpose — one sentence on why the screen exists
- Reads — Convex queries and session state the screen subscribes to
- Writes — mutations and actions the screen triggers
- States — empty, loading, error, populated
- Key components — the atoms/organisms that make up the screen
- Related workflow — the workflow doc this screen participates in
Screens are the UI contract. Workflows describe behavior across time; schemas describe data; screens describe what the user sees on a given route.
Screen index
- Canvas Frame — the shared chrome every canvas screen sits in, and how the container and document screens fill it
- Container Screen —
/app/canvas/$routeKey(a Workspace or Project: its own card with its children filed beneath it) - Document Work Screen —
/app/canvas/$routeKey(the active document, with the capability-gated Inspector Panel beside it) - Story Screen —
/story(the animated advertisement; a marketing surface, no auth and no Convex, styled from the same Counsel tokens as the rest of the app) - Story —
/story(animated ad) and/story-page(scrollable page); two public marketing surfaces sharing one wordmark, button, and block-card source