AppShell – Design

​

Options

AppShell composes up to four regions — a full-width header, a left rail, a required center chat, and a right artifact panel. All region state (visibility, width, presentation) lives inside the shell; drive it imperatively through useAppSurface() or a controlRef, never through props that re-render the slots.

​

Regions

​

Artifact

The right-side region — typically a canvas or generated-artifact panel. Omit it to render no artifact. It’s drag-resizable from its leading edge and yields to a modal drawer, after the rail, once the shell can no longer fit it inline.

​

Chat

The required, invariant center. Chat is always inline and never collapses — it’s the one region guaranteed to remain, and it flexes to absorb whatever width the side regions yield.

​

Header

The full-width region across the top, typically an AppHeader. Omit it for a shell with no header.

​

Left Rail

The left region — typically navigation. It’s fixed-width (240px) and never drag-resized; when it no longer fits, it yields to a drawer before the artifact does.

​

Artifact Width

defaultArtifactWidth sets the starting preset — "regular", a fixed 560px (the default, shown in Regions above), or "large", a 720px floor that fills the available width and collapses the rail to reclaim its space. Either preset is a starting point only; the artifact stays drag-resizable from there, and the same presets are available imperatively via showArtifact({ width }) / toggleArtifact({ width }).

​

Behavior

Region presentation responds purely to available width — there are no viewport breakpoints — and every region can be shown or hidden imperatively regardless of how it got there.

​

Artifact Resize

Drag the artifact’s leading edge (or focus its handle and use the arrow keys) to resize it. Dragging past the point where chat would drop below its minimum width detaches the artifact into a drawer that keeps widening up to the full viewport; dragging back re-attaches it inline. Chat never goes below its minimum — the artifact and rail absorb the constraint instead.

​

Auto-collapse

When a side region no longer fits inline, it becomes a modal drawer rather than disappearing — reachable again via the header’s toggle. The rail collapses first (lowest priority), then the artifact, purely based on each region’s own minimum width against the space available. Widening the shell re-inlines a region the instant it fits again.

​

Initial Visibility

Region state is internal, so initial visibility is set imperatively rather than through a prop: grab a controlRef and call hideRail() (or hideArtifact()) in an effect on mount. Its space is reclaimed by chat until the header’s toggle brings it back.

​

Keyboard Interaction

Users can navigate, resize, and dismiss AppShell’s regions using standard keyboard controls.

​

Patterns that use this component

• Agentic Experience Shell — Arranges the header, history rail, conversation, and supporting panel