Navigation & Shells
The structural grammar for chat workspaces: shell, rail, panel tabs, overlays, and floating affordances.
Workspace Shell Grammar
KnearMe needs bounded shells and context rails, not full-bleed messaging chrome.
What it is for
Establish the shell grammar before deciding on message treatments or artifact content.
Use when
You are defining where the main conversation ends and where supporting context begins.
Do not use when
You are treating shell chrome as decorative instead of structural.
Related patterns
App Surfaces · Artifacts
Escalation path
Bounded chat shell first, then a context rail, then explicit panel states inside the rail.
Developer details
Start from these files when you need to trace the live implementation.
src/shared/ui/chat/ChatSurface.tsx · src/shared/ui/chat/CanvasPanel.tsx
Bounded chat surface
Primary chat shell
Project workspace
Chat remains dominant; utility controls stay quiet.
Context rail
Secondary supporting context
Navigation Roles
Shell navigation breaks into history, panel state, and floating preview controls.
Developer details
Start from these files when you need to trace the live implementation.
src/shared/ui/compact-panel-tabs.tsx · src/shared/ui/chat/PreviewPill.tsx
History rail
Panel tabs
Keep labels visible until the panel vocabulary is learned. Icon-only tabs are too ambiguous for primary shell navigation.
Floating preview affordance
Keep one named metric visible while the user stays in the conversation.
Floating tasks need a title and context, not just a percentage badge floating on its own.
Panel-State Expectations
Every shell-level panel should have stable loading, empty, and active geometry.
Developer details
Start from these files when you need to trace the live implementation.
src/shared/ui/chat/PreviewOverlay.tsx · src/shared/ui/chat/ChatStatusOverlays.tsx
Loading
loading
Preparing preview
Loading should keep geometry stable so the rail does not jump as data arrives.
Empty
empty
Nothing pinned yet
Empty states should preserve the same panel boundary as active states.
Active
active
Context visible
The active state should look like the loading and empty variants, only with content swapped in.