Progress
Thinking
Expandable reasoning traces in structured step and prose forms.
Starts when it scrolls into view
NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW
- Type
Thinking- Source
thinking.rs- Story
thinking- Demo height
- 306 px
- Events
- ThinkingEvent
Code
Cut from the gallery story this page runs, so it stays true.
let trace = ThinkingTrace::new()
.thought_for(Duration::from_secs(9))
.steps([
ThinkingStep::new("Reading the supplier schema")
.status(StepStatus::Done),
ThinkingStep::new("Comparing unit prices")
.detail("Alpenrose is **7% cheaper** at equal volume.")
.status(StepStatus::Done),
ThinkingStep::new("Checking delivery constraints"),
]);
let trace = if self.sim.answer.is_streaming() {
Progressive::running(trace)
} else {
Progressive::complete(trace)
};
v_flex()
.gap_8()
.child(
Thinking::new("trace", &trace)
.open(self.trace_open)
.on_event(cx.listener(
|this, event: &ThinkingEvent, _, cx| {
let ThinkingEvent::Toggled { open, .. } = event;
this.trace_open = *open;
cx.notify();
},
)),
)
.child(
v_flex()
.gap_3()
.child(
div()
.text_xs()
.font_semibold()
.text_color(cx.theme().muted_foreground)
.child("THINKING — PROSE"),
)
.child(Thinking::new(
"trace-prose",
&Progressive::complete(
ThinkingTrace::new()
.thought_for(Duration::from_secs(4))
.prose(
"The March sheet supersedes prior quotes, so the \
comparison should use *current* volume tiers. \
Delivery windows match, which removes the main \
switching risk.",
),
),
)
.open(true)),
)
Events and ownership
- Who owns the state
- Thinking renders state supplied by the application; it does not own durable work.
- What it emits
- Interactive intent is reported through the typed ThinkingEvent contract and stable application IDs.
- What it means
- Expandable reasoning traces in structured step and prose forms.
- Overflow and motion
- Wide content retains context in a bounded surface; reduced motion preserves a useful state.
Event types
- ThinkingEvent
What the demo does and does not show
The demo above is the same Rust as the native component, compiled to WebAssembly and drawn on a WebGPU canvas — not a mock-up, a recording, or a re-implementation. What it paints is what the component paints: layout, colour from the live theme, and motion.
The live browser specimen requires WebGPU; the native component remains the authoritative runtime.
A canvas cannot stand in for the platform, so treat everything that goes through the operating system as unproven here: keyboard handling and shortcuts, screen reader semantics, text input and IME, the clipboard, file drops, and the frame rate you would get on your own GPU. Judge those in a native build. If your browser has no WebGPU, the frame says so rather than showing an empty box.