L3/L4 streaming: replace raw <pre> output with skeleton + progressive reveal #133

New issue

Closed

opened 2026-05-11 11:31:14 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-05-11 11:31:14 -07:00

Owner

Problem

Level 3/4 recipe streaming currently dumps raw tokens into a <pre> block. This exposes internal formatting artifacts, lacks visual hierarchy, and reads as broken to users who are not expecting raw LLM output.

Proposed approach

While streaming: show a recipe skeleton card (title placeholder, ingredient count placeholder, method step placeholders) with a subtle shimmer animation
On stream complete: parse the streamed markdown/JSON response and render a proper RecipeCard component
Keep the raw token buffer hidden; only reveal structured output
Honour prefers-reduced-motion (skeleton shimmer already gated in theme.css)

Acceptance criteria

No raw <pre> visible to user during or after streaming
Skeleton visible during stream, replaced by card on completion
Error state shown cleanly if stream fails mid-way

From

kiwi UX audit (2026-05-11) — cf-a11y longer-term #2

## Problem Level 3/4 recipe streaming currently dumps raw tokens into a `<pre>` block. This exposes internal formatting artifacts, lacks visual hierarchy, and reads as broken to users who are not expecting raw LLM output. ## Proposed approach - While streaming: show a recipe skeleton card (title placeholder, ingredient count placeholder, method step placeholders) with a subtle shimmer animation - On stream complete: parse the streamed markdown/JSON response and render a proper RecipeCard component - Keep the raw token buffer hidden; only reveal structured output - Honour `prefers-reduced-motion` (skeleton shimmer already gated in theme.css) ## Acceptance criteria - No raw `<pre>` visible to user during or after streaming - Skeleton visible during stream, replaced by card on completion - Error state shown cleanly if stream fails mid-way ## From kiwi UX audit (2026-05-11) — cf-a11y longer-term #2