ReasonTag
react-fancyWhy
Agent-generated suggestions (forecasts, classifications, recommendations) need visible confidence signals and explainability without burying reasons in dense tooltips or cluttering the UI with extra prose. Without it, humans treat all suggestions equally, missing high-confidence wins and wasting time double-checking low-confidence guesses.
What
ReasonTag wraps any value with a confidence-driven visual affordance—a coloured dot (default), dotted underline, or pill chip—that reveals the agent's reasoning, sources, and confidence on hover or in an always-visible inline annotation. Three confidence tiers (high/medium/low, 0–1) automatically colour-code the trigger, while reason (string), sources (array of label + optional href), by (agent name), and onFollowUp (callback) populate the popover or pinned annotation.How
Import from
@particle-academy/react-fancy and wrap your value: <ReasonTag value="$1.4M" reason="Projected Q3 ARR…" confidence={0.91} sources={[{ label: "Q2 actuals · CRM" }]} by="Forecaster" />. Pass theme="chip" for a bold pill or pinned={true} for always-visible reasoning. The component is fully controlled—no internal state—and pairs naturally with agent-emitted suggestions via JSON-friendly props.