Generative UI Smoke

Fixed fixture for Streamdown, Shiki, widgets, mermaid, ANSI, and folding behavior.
Text Shimmer
Thinking
Surface Shimmer
Status Badge
RunningDoneErrorUnknown
Assistant Markdown

Generative UI Smoke

Inline code: const answer = 42

Inline math: $E=mc^2$

01x2dx=13\int_0^1 x^2 \, dx = \frac{1}{3}

JavaScript

js
export function sum(a, b) {
  return a + b;
}

console.log(sum(20, 22));

Shell

sh
printf '\033[31mred\033[0m\n'
git diff --color=always

TypeScript

ts
type Sample = {
  id: string;
  count: number;
};

const item: Sample = { id: "alpha", count: 3 };

Mermaid

Rendering diagram...

Widget

Smoke Widget

Gallery

CJK Streamdown

中文链接 https://example.com,后面还有中文句子。

Long Code Block
txt
1line 01 = 12line 02 = 23line 03 = 34line 04 = 45line 05 = 56line 06 = 67line 07 = 78line 08 = 89line 09 = 910line 10 = 1011line 11 = 1112line 12 = 1213line 13 = 1314line 14 = 1415line 15 = 1516line 16 = 1617line 17 = 1718line 18 = 1819line 19 = 1920line 20 = 2021line 21 = 2122line 22 = 2223line 23 = 2324line 24 = 2425line 25 = 2526line 26 = 2627line 27 = 2728line 28 = 2829line 29 = 2930line 30 = 3031line 31 = 3132line 32 = 32
Short Code Block
ts
1const shortValue = 7;2console.log(shortValue);
Shiki Cache
ts
1type CacheProbe = {2  key: string;3  value: number;4};5
6const cacheProbe: CacheProbe = { key: "alpha", value: 42 };7console.log(cacheProbe);8
Shiki Async
Unknown Language Fallback
mysterydsl
1foo: alpha2bar -> beta3emit "plain text fallback"
Clipboard Mock
ts
1const clipboardProbe = true;
text
1line with ``` inside
text
1const unlabeledFence = true;
Local Paths
No local file opened yet

Open plan

Local Preview Paths
Smoke GPT-5

Generated local preview assets: public/file.svg public/globe.svg

SVG Visual Code
Smoke GPT-5
svg preview
Compound Components
compound-ts
compound line 1
compound line 2
compound line 3
compound line 4
compound line 5
compound line 6
compound line 7
compound line 8
compound line 9
compound line 10
compound line 11
compound line 12
compound line 13
compound line 14
compound line 15
compound line 16
compound line 17
compound line 18
compound line 19
compound line 20
compound line 21
compound line 22
compound line 23
compound line 24
README.smoke.mdmarkdown7 lineslive

Smoke File

This markdown preview validates the real file viewer integration.

ts
export const smokeValue = 42;console.log(smokeValue);
slides/demo.pptxSlide 2 / 4
Summary
Document surface fixture
  • Reuses shared file viewer shell
  • Overview sheet
All slides
Process Panel
MessageView Integration
Smoke GPT-5219

Streaming markdown from the real MessageView.

Relative smoke image
ts
line 01 = 1
line 02 = 2
line 03 = 3
line 04 = 4
line 05 = 5
line 06 = 6
line 07 = 7
line 08 = 8
line 09 = 9
line 10 = 10
line 11 = 11
line 12 = 12
line 13 = 13
line 14 = 14
line 15 = 15
line 16 = 16
line 17 = 17
line 18 = 18
line 19 = 19
line 20 = 20
line 21 = 21
line 22 = 22
line 23 = 23
line 24 = 24
line 25 = 25
line 26 = 26
line 27 = 27
line 28 = 28
line 29 = 29
line 30 = 30
line 31 = 31
line 32 = 32
html preview
User Image Message
Uploaded image preview
06:26
Custom MessageView
🤖

Subagent finished the review pass.

  • Updated shared message shell
  • Preserved markdown body rendering
06:32

Background task completed: Compound coverage expansion (Custom message shell)

Shared custom message surface is now reused in MessageView.

Compound coverage expansion06:33
Widget Streaming Placeholder
Smoke GPT-536

Streaming widget prelude.

Streaming Widgetstreaming…
Non-CDN Widget
Smoke GPT-5
Local Widget
Report Update Placeholder
Smoke GPT-5
Analysis report updated
FileViewer Integration
TerminalOutput ANSI
PASS npm run lint WARN long output collapsed below ERR simulated stderr line line 01 = 1 line 02 = 2 line 03 = 3 line 04 = 4 line 05 = 5 line 06 = 6 line 07 = 7 line 08 = 8 line 09 = 9 line 10 = 10 line 11 = 11 line 12 = 12 line 13 = 13 line 14 = 14 line 15 = 15 line 16 = 16 line 17 = 17 line 18 = 18 line 19 = 19 line 20 = 20 line 21 = 21 line 22 = 22 line 23 = 23 line 24 = 24 line 25 = 25 line 26 = 26 line 27 = 27 line 28 = 28 line 29 = 29 line 30 = 30 line 31 = 31 line 32 = 32
ToolResultPreview
PASS npm run lint WARN long output collapsed below ERR simulated stderr line line 01 = 1 line 02 = 2 line 03 = 3 line 04 = 4 line 05 = 5 line 06 = 6 line 07 = 7 line 08 = 8 line 09 = 9 line 10 = 10 line 11 = 11 line 12 = 12 line 13 = 13 line 14 = 14 line 15 = 15 line 16 = 16 line 17 = 17 line 18 = 18 line 19 = 19 line 20 = 20 line 21 = 21 line 22 = 22 line 23 = 23 line 24 = 24 line 25 = 25 line 26 = 26 line 27 = 27 line 28 = 28 line 29 = 29 line 30 = 30 line 31 = 31 line 32 = 32