# App shell

URL: /products/app/app-shell · Id: `page:products/app/app-shell`

> The frame every signed-in screen sits in, and the screens an App compiles for each Noun and Verb a Persona may use.

The shell is the frame around every signed-in screen of an [App](/business/nouns/app): navigation, the [Tenant](/business/nouns/tenant) switch, the reader's inbox and the ask control. Inside it, each screen compiles from a [Noun](/business/nouns/noun) or a [Verb](/business/nouns/verb) the reader's [Persona](/business/nouns/persona) may use.

## The frame
| Part | [Component](/business/nouns/component) | What it holds |
| --- | --- | --- |
| Navigation | [`Navigation`](/code/ui/components/navigation) | One entry per Noun the reader's [Role](/business/nouns/role) may read, in the declaration's order |
| Tenant switch | [`TenantSwitcher`](/code/ui/components/tenant-switcher) | Every Tenant the reader belongs to |
| Profile | [`UserMenu`](/code/ui/components/user-menu) | Profile, sign-in methods, notification choices and sign-out |
| Inbox | [`TaskInbox`](/code/ui/components/task-inbox) | The [Tasks](/business/nouns/task) and [Approvals](/business/nouns/approval) waiting on the reader |
| Ask | [`AgentChat`](/code/ui/components/agent-chat) | A plain-language request to the [Startup](/business/nouns/startup)'s agents, answered in place |

A manager at Riverside Property sees leases in the navigation and the renewals waiting on her in the inbox. A resident's navigation has one entry, leases, and no button that changes one.

## Screens per Noun and Verb
| Screen | Component | Compiled from |
| --- | --- | --- |
| List | [`DataTable`](/code/ui/components/data-table) | The Noun's properties, filters by state, and the reader's [Permissions](/business/nouns/permission) |
| Record | [`ThingDetail`](/code/ui/components/thing-detail) | Properties, relationships, history and a [`StateBadge`](/code/ui/components/state-badge) |
| Verb sheet | [`VerbSheet`](/code/ui/components/verb-sheet) | The Verb's inputs, with its price and any [Approval](/business/nouns/approval) beside the button |
| Progress | [`ActionStatus`](/code/ui/components/action-status) | The [Action](/business/nouns/action) a form started, until it is `done` or `refused` |

A record shows only the Verbs its state allows and the reader may call. Grant the Role one more Verb, and its button appears on the next request. A Verb the reader may not call never renders, so nothing is hidden with CSS.

## First run
A [Flow](/business/nouns/flow) is the path one Persona takes from first sign-in to an [Offer](/business/nouns/offer)'s activation [Event](/business/nouns/event). Leaseline's manager Flow adds units, imports leases, sends the first notice and ends at `Customer.activated`.

Each step is a screen that ends in the Verb that opens the next. Where a new [Customer](/business/nouns/customer) stalls, the step that holds them shows in the Flow's numbers.

## Every screen, three ways
Each screen renders as HTML for people, Markdown for an [Agent](/business/nouns/agent)'s context and JSON for a native client, from the same frame. An agent reading a lease's screen gets the facts a manager sees, with no scraping.

## Next
- [Customize](/products/app/customize): replace one part and keep the rest compiling.
- [UI components](/code/ui): every Component, its props and renderers.