Design System

Overview

Overview
Review paths
Preview chat app surfacesOpen the demo-only `/demo/chat-shell-preview` handoff for inline, carousel, PiP, and fullscreen review.Build an inline app surfaceUse the host-friendly card, rail, and fullscreen rules.Review widget inventoryCompare Apps SDK and ChatKit references, then inspect installable KnearMe surfaces.Review artifact cardsCompare reference, decision, and generated artifact patterns.Design a shellStart with bounded chat shells, context rails, and panel states.Compare mobileReview mode changes, device framing, and recipe-level examples.Inspect tokensCheck foundation rules before composing new surfaces.

Registry List Detail Shell

The shell composes the preview region and the supporting rail into one responsive contract while leaving selection logic to the parent surface.

List Detail Shell

The shell owns layout only. The parent route or surface controls which preview is selected and what the rail renders.

What it is for

Compose the preview region and the supporting inspector rail into one responsive review surface.

Use when

You need a stable list-to-detail pattern that collapses for mobile without changing child component APIs.

Do not use when

You are trying to publish a whole app shell or route-level navigation system.

Related patterns

Registry Items · Result Preview Card · Registry Items · Inspector Rail

Escalation path

Installable shell → product-specific workspace routes.

Developer details

Start from these files when you need to trace the live implementation.

shared/ui/chat/ListDetailShell.tsx

Presentation-only layout contract
Preview cards stay scan-friendly and avoid tabs, nested scroll areas, or deep drill-in.
The inspector rail holds grouped metadata, long-form rationale, and the next action without replacing the thread.
The shell only composes the two regions. Selection stays controlled by the parent surface or route.

Thread preview list

Keep the preview lightweight. Let the user scan, select, and only then expand detail in the supporting rail.

Surface preview
Trust-led portfolio treatment

Project page candidate

Rosedale limestone porch refresh

publish ready
Best when the business wants a trust-first hero, a short material story, and one clean CTA into the quote flow.
Service
Stone restoration
Readiness
92% complete
Focus
Hero + proof block
Location
Toronto, ON
Surface preview
Comparison-oriented option

Project page candidate

Danforth brick facade repointing

needs input
Best for a comparison-heavy selection moment where the user needs to scan a few options before expanding the one that deserves deeper editing.
Service
Brick repointing
Readiness
76% complete
Focus
Copy clarity
Location
East York, ON
Surface preview
Commercial proof option

Project page candidate

Leslieville storefront repair brief

in review
Best when the business needs a compact card in the thread but still wants a right-side reference surface with customer, scope, and proof context.
Service
Commercial masonry
Readiness
84% complete
Focus
Proof + CTA
Location
Toronto, ON
Supporting inspector railRosedale limestone porch refresh