Showcase / 02

Keep the stream honest.

Put streaming, success, error, and cancelled on the message itself. Never invent a finished answer.

chat-threadchat-messagethinking-indicatorthinking-steps

live-run / summarystreaming / waiting for tokens

Human09:41

Summarize the latest changes and keep the draft editable.

Agent09:42

I am still assembling the release note...

Agent is thinking

Read the repository0.4s

Write the summaryrunning

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/thinking-indicator/thinking-indicator.css">
<link rel="stylesheet" href="components/thinking-steps/thinking-steps.css">
<link rel="stylesheet" href="host-chrome.css">

Without JavaScript, the streaming specimen above remains readable. The controls only demonstrate host state changes.