Completion stop reason card where the icon tile color flips per reason (end_turn, stop_sequence, tool_use, max_tokens) and shows the token count.
The import and the props worth knowing about, in one place.
import { Ai14 } from "@/components/beste/piece/ai14";
<Ai14
surface="card"
bordered={true}
inverted={false}
label="end_turn"
hint="Response completed normally."
icon="check"
tone="emerald"
tokens={248}
maxTokens={1024}
/>Token-usage card with used of total readout and a fill bar that shifts emerald to amber to rose.
You are a concise copywriter. Reply in 2 sentences max and avoid em dashes.
Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.
Training run card with current epoch, step counter, loss value, and a violet progress bar reflecting completion.
Batch inference progress card with completed/failed counts and a stacked bar where the error segment shows in rose.
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.