Tool Call Badge
A badge announces the tool an agent is calling, turns while it runs, then settles into the result count.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tool Call Badge
*
* An agent announcing the tool it is reaching for: the badge slides in,
* a ring turns while the call is in flight, then the ring gives way to aAbout this pattern
Agents spend most of a turn doing something other than writing, and a silent gap reads as a hang. This badge names the call as it starts, holds a turning ring for as long as the work takes, then swaps the ring for a tick and widens to admit the count that came back. The widening is a layout animation with position-only children, so the glyphs are scale-corrected and no text stretches while the pill resizes — the one detail that separates this from a jittery chip.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Tool invocations surface inline in the turn with a running state that resolves to a summary.
Related patterns
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- Streaming Code BlockGenerated code arrives line by line while the panel grows downward to fit it.
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.