Panel shell
The scaffold every destination view (Activity, Analytics, Git, Replay, …) sits inside. A sticky header carries the back affordance, title, an optional quiet meta slot, and an actions slot; the body flows in a centered, max-width content column with consistent padding.
Included in the single kansho full pack. Components are not offered as separate installs.
Default
Back affordance + title + a trailing actionActivity
claude · alpha · started 10:00
writer-agent · beta · started 10:05
claude · alpha · started 09:40
With meta
A quiet freshness / count slot beside the titleAnalytics
Empty body
Rootless panel (no back) framing an empty stateApprovals
Nothing waiting
No run is paused on a gate right now. Approvals from across the fleet land here the moment an agent needs a decision.
Component documentation
Panel Shell
components/shell/panel-shell.tsxPurpose
Provides a constrained panel frame with title, back action, metadata, actions, and content.
Appropriate use
Use for inspector, detail, or nested task panels that need a consistent toolbar and readable maximum width.
Example
components/shell/panel-shell.tsx has a representative live example in the "Default" section on /components/panel-shell.
States
Supports optional back action, metadata and actions, configurable maximum width, custom class, and test identifier.
API and props
PanelShell accepts title, backLabel, onBack, actions, meta, maxWidth, className, data-testid, and children.
Dependencies
React, Lucide icons, and the Kansho cn utility.
Accessibility
Uses a native labelled back button and a visible heading; the caller supplies accessible labels for any custom toolbar actions.
Limitations
It does not manage route history, focus restoration, overlay behaviour, or panel open state.
Source
Source: components/shell/panel-shell.tsx.
Full pack
components/shell/panel-shell.tsx is documented at /components/panel-shell and installs only through the single Kansho full pack; no individual component install is offered.