Reasoning
The user wants the current weather in Tokyo. I should call the weather tool first.
{ "city": "Tokyo" }
{ "temp": "22C", "condition": "Partly cloudy" }
Reasoning
Got the weather result. I can now answer the user directly.
Showcase / host composition
chain-of-thought-primitive.tsx: stacked reasoning + tool-call + answer. No new MVP component — host groups parts in order.
Deferred: part-grouping runtime, streaming CoT animation. Escape all tool args/results as text.
<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="components/tool-call/tool-call.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-extracts.css">