Design System

Artifacts - Edit & Voice

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.

Artifact Edit & Voice

Transition artifacts for focused editing, revision summaries, and resumable voice handoff states.

Focused Editing & Voice

Transition artifacts, revision summaries, and handoff states keep editing and multimodal work grounded.

Developer details

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

src/shared/ui/chat/artifacts/FocusEditTransitionArtifact.tsx · src/shared/ui/chat/artifacts/FocusEditChangeSummaryArtifact.tsx · src/shared/ui/chat/artifacts/VoiceHandoffArtifact.tsx

Your draft is ready for Focus Edit

I've prepared the current layout. Continue refining in chat or open Focus Edit for precise structural changes.

Changes Applied

  • Updated hero image to "after" photo
  • Added materials section with granite details
  • Reworded solution approach for clarity
Revision #3

Session saved — pick up anytime

Saved

Your progress is saved.

We collected project photos and identified the work type. Next up: describe the problem you solved.

Waiting on you

Tell me about the customer problem

Saved for later: 3 photos, project type: chimney rebuild