A plain ledger of tool calls: a hairline fills under the step that is running, its duration lands on the right when it finishes, and the answer settles in below.
The import and the props worth knowing about, in one place.
import { Ai47 } from "@/components/beste/piece/ai47";
<Ai47
tools={[
{
"label": "Searching docs",
"ms": 800
},
{
"label": "Reading file",
"ms": 1100
},
{
"label": "Running query",
"ms": 1400
},
{
"label": "Writing answer",
"ms": 900
}
]}
answer="Churn rose 2.1% in August, mostly from trial accounts that never connected a data source."
/>Tool invocation card with the function name, typed arguments in monospace, and a running or done status pill.
Reasoning panel whose numbered steps stagger in once while a thin connector draws down between them, finishing on a final answer row that stays in place.
Vertical agent plan with done, active, and pending states indicated by check, spinner, and dot icons.
Monthly quota meter with a tone-colored SVG donut arc, percentage in the middle, used/total request count, and reset countdown.