Design System

App Surfaces - Inspector Rail

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.

Inspector Rail

A supporting detail rail for the selected preview item. Treat runtime diagnostics as a subtype, not the primary definition of the pattern.

The installable building blocks live under Widgets & Registry. Keep this page focused on when the pattern belongs in the product.

Inspector Rail

The canonical pattern is a selected preview on the left and expanded supporting detail in a right rail. Runtime diagnostics remain a valid subtype, but not the default story.

What it is for

Expand a selected preview into richer supporting detail without replacing the thread or forcing a fullscreen mode.

Use when

The user needs grouped metadata, rationale, and richer actions for one selected item.

Do not use when

The content is still simple enough for an inline card or has grown into a true workspace.

Related patterns

Widgets & Registry · Inspector Rail · App Surfaces · Side Panel · Generative UI

Escalation path

Preview card → inspector rail → fullscreen workspace.

Developer details

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

src/shared/ui/chat/ResultPreviewCard.tsx · src/shared/ui/chat/InspectorDetailRail.tsx · src/shared/ui/chat/ListDetailShell.tsx

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

Why the rail exists

Keep the thread preview compact, then let the rail hold grouped metadata and longer rationale.

The preview card should help the user choose. It should not hide tabs, nested navigation, or a second application inside the card.

KnearMe keeps the product language and styling, but borrows the host-aware interaction model: compact preview in the thread, expanded supporting detail in the rail, fullscreen only when editing truly needs more room.

Diagnostics subtype

Keep the task in view

medium
Open panel
Workspace context
Preview focus
Local runtime session
Pinned items
2 pinned beside chat
What changed

This remains useful for runtime-specific metadata, but it should be documented as a subtype of the broader rail pattern.

Completion61%
What to review next

Workflow health snapshot

Tool state
Connection quality
Retry guidance
KnearMe | Service Portfolio Platform