Agent work
Tool chips
Compact, typed status for tool calls without hiding their lifecycle.
Starts when it scrolls into view
NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW
Code
Cut from the gallery story this page runs, so it stays true.
h_flex()
.flex_wrap()
.gap_2()
.child(
ToolChip::new("chip-1", "read pricing.md").status(ToolStatus::Success),
)
.child(
ToolChip::new("chip-2", "edit suppliers.rs")
.status(ToolStatus::Running)
.detail("+12 −3"),
)
.child(
ToolChip::new("chip-3", "run cargo test").status(ToolStatus::Pending),
)
.child(
ToolChip::new("chip-4", "query prices-db")
.status(ToolStatus::Failed)
.detail("timeout"),
)
Events and ownership
- Who owns the state
- ToolChip renders state supplied by the application; it does not own durable work.
- What it emits
- Interactive intent is reported through the typed ToolChipEvent contract and stable application IDs.
- What it means
- Compact, typed status for tool calls without hiding their lifecycle.
- Overflow and motion
- Wide content retains context in a bounded surface; reduced motion preserves a useful state.
Event types
- ToolChipEvent
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.