Showcase / host composition

Message timing.

message-timing.tsx: tabular latency badge that expands to first-token / total / speed / chunks. Host owns metrics; no network.

message-timing.tsxhost-chromecompose

badgedetails panel

In action bar

Here is a short answer.

1.23s

First token312ms

Total1.23s

Speed82.5 tok/s

Chunks47

Open

1.23s

First token312ms

Total1.23s

Speed82.5 tok/s

Chunks47

Deferred: live timing from stream runtime. Escape/format numbers in the host.

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-extracts.css">