Dev experience · 12

Output preview pane

stdout / stderr / network / json tabs with tone-coded badges. Drop-in for SDK CLI runs.

Production answer

Output preview pane is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Output preview pane states
Generative search brief

Output preview pane: stdout / stderr / network / json tabs with tone-coded badges. Drop-in for SDK CLI runs.

pnpm quote:create — full run output
> @mufflermen/sdk@3.4.0 quote:create
> tsx scripts/first-quote.ts

Resolved bay availability for bay_oak_flats_03
Created quote qte_2026_xforce_extractor_001
Quote total: AUD 1842.50
Behaviour

Each stream gets its own tone — teal for stdout, red for stderr, amber for network, green for JSON. Tabs use proper role="tab" / aria-selected. The pane is a <pre> so whitespace and indentation are preserved in assistive output.