Screens / The app around the agent

Session list and app shell

Hold the product together: where you are, your threads, the main places and the search.

For: Everyone, on every visit.

Markdown

See it running: the workspace app example, on sample data in your browser.

3 ways to lay it out

1. Sidebar with sessions

Pick it when: The default for a chat-first product: threads are the main thing people return to.

A left sidebar with a new-thread button, places and the thread list, the page in the middle and an optional side panel.

App layoutProThe frame: sidebar, main column and a resizable side panel.
App sidebarProThe brand, a new-thread button, the main places and the thread list.
Session listProThreads, newest first, grouped by day, with pinned ones on top.
Environment bandProA strip naming the account and environment in scope.

Install sidebar with sessions

Pro and Premium items need a licence key; free ones install as they are.

2. Workspace frame

Pick it when: A business app with a handful of places, where people move between places more than between threads.

One L of chrome: a narrow rail of places with the brand at its top, a top bar from the rail's edge to the end with the scope, search and the person, and the page set into the L as an inset canvas.

App layoutProThe frame: with frame="app", the navigation and the top bar as one L round the page on an inset canvas.
Nav railProThe places as a narrow rail of icons with their names, an urgent count filled and read in the name; on a phone, the same places on a tab bar.
Top barProThe top arm: where the person is at the start, search beside it, and buttons at the end.
Scope switcherProWhere the person is working, level by level, with the environment and the agent's mode as the app reports them.
Person menuProThe person's avatar, opening their profile, shortcuts, theme, help and sign-out.
Command paletteProSearch or jump: pages, records and actions from one box, opened from the top bar's trigger or ⌘K.

Install workspace frame

Pro and Premium items need a licence key; free ones install as they are.

3. Single column

Pick it when: Narrow screens: one thing at a time, with the list a step back.

One narrow column holding a thread, with a back control and a sessions button.

Session listProThe list, as its own screen.
ThreadFreeThe conversation.
Page stateFreeWhat a page shows instead of its content: empty, no match, failed.

Install single column

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

The agent is always named, by the app
The shell names the agent and the environment from your records, so a person always knows who they're talking to and where.
Unknown stays unknown
A list that failed to load says so; an empty state is only shown when it's empty.
A control that can't be used says why
A place the person can't open stays in the list and says why.

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build the app shell with Candor UI: AppLayout with an AppSidebar (a new-thread button, places and a SessionList) and an optional SidePanel.
SessionList groups threads by day, newest first, pinned on top.
Add EnvironmentBand to name the account and environment in scope, in the environment's own colour.
For a business app with a handful of places, use AppLayout with frame="app": a NavRail as the L's arm under your brand, and a TopBar holding a ScopeSwitcher, a CommandTrigger and the PersonMenu.
Keep search in the top bar: the CommandTrigger opens CommandPalette (⌘K) for pages, threads and actions; add ShortcutsDialog printed for the person's platform.
On a phone, give AppLayout a TabBar made from the rail's own places with navRailTabs, so the rail and the bar never disagree.
Use PageState for empty, no-match and failed pages; "empty" only when the list really is empty.
Put PageHeader at the top of every page that isn't a thread.
Name the agent and environment from your app's data.

Start from the "Sidebar with sessions" layout: A left sidebar with a new-thread button, places and the thread list, the page in the middle and an optional side panel.
Candor items: app-layout (https://candor.themethodic.com/docs/app-layout.md), app-sidebar (https://candor.themethodic.com/docs/app-sidebar.md), session-list (https://candor.themethodic.com/docs/session-list.md), environment-band (https://candor.themethodic.com/docs/environment-band.md).
Install: npx candor-ui add app-layout app-sidebar session-list environment-band
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.