Theme

App shell

The frame every Serre app shares: a sidebar with the workspace, search, links and a footer, and the page beside it, scrolling on its own under its top bar. The sidebar collapses to a rail of icons, remembered for the reader, and becomes a drawer on phones.

Examples

A whole app, contained: collapse the sidebar with the button at its foot

Verification gaps

Judging

Where a model's claims outrun the evidence its sources give, and how often a reviewer would catch it.

Overview

Runs

Dossier

Activity

A paragraph of the overview view, long enough that the page scrolls under the top bar while the sidebar and the attribute panel stay where they are.

Open the example app to see it fill the window, and narrow the window to see the sidebar become a drawer.

Props

`AppShell`

The frame every Serre app shares: a sidebar on the left with the workspace, search, links and a footer, and the page beside it, scrolling on its own. The sidebar collapses to a rail of icons, remembered for the reader; on phones it is a drawer that the TopBar's menu button opens.

Prop	Type	Default	Description
`workspace`	`ReactNode`	—	The top of the sidebar: a WorkspaceSwitcher with the app's name and mark.
`palette?`	`ReactNode`	—	A CommandPalette. The shell adds a search button below the workspace that opens it, and the palette then shows no button of its own.
`nav`	`ReactNode`	—	The sidebar's links: NavItem and NavGroup elements.
`navLabel?`	`string`	`"Main"`	Names the navigation landmark.
`footer?`	`ReactNode`	—	Pinned to the bottom of the sidebar: settings, help and the signed-in user (NavItem, SidebarUser).
`defaultCollapsed?`	`boolean`	`false`	Start as a rail of icons. The reader's own choice, kept in the cookie SIDEBAR_COOKIE, wins once the page runs; pass sidebarCollapsed(cookie) from the server to avoid a jump.
`contained?`	`boolean`	`false`	Fill the parent rather than the viewport, and do not claim the page's main landmark: for a preview of the shell inside another page.
`children`	`ReactNode`	—	The page: a TopBar, then the content, which scrolls on its own.

Keyboard

Key	Does
`Tab`	Moves from the skip link through the sidebar into the page
`Enter` or `Space`	On the sidebar's foot button, collapses or expands it
`⌘K` or `Ctrl+K`	Opens the command palette, when the shell has one
`Escape`	Closes the drawer on a phone and returns focus to its button

Accessibility

A skip link leads to the page's main landmark; the sidebar's links are a navigation landmark named by navLabel.
In the rail, labels are clipped rather than removed, so every link keeps its name for screen readers.
On phones the drawer is a modal dialog: focus moves in, stays in and returns to the menu button; following a link closes it.
The rail is kept in the serre-sidebar cookie. A server can read it with sidebarCollapsed() and pass defaultCollapsed, so the first paint has the right width.
The rail's width animates over motion.slow, which is zero under reduced motion.