Skip to main content
v0.1 dev

Component 61 · Edge AI

Model insight card

Present an AI-assisted finding with evidence and uncertainty.

implementedPhase 4stable

Overview

Present an AI-assisted finding with evidence and uncertainty. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Model insight card when you need to present an AI-assisted finding with evidence and uncertainty. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

Atlantic · interactive specimen

AI-assisted observation

Gait pattern changed

Observed across four valid raceway passes.

Confidence 78%
<article class="he-model-insight-card"><header><p class="he-eyebrow">AI-assisted observation</p><h3>Gait pattern changed</h3></header><p>Observed across four valid raceway passes.</p><div class="he-confidence-indicator" style="--he-confidence:78%"><div><b>Confidence</b> 78%</div><div class="he-confidence-indicator__track"><div class="he-confidence-indicator__value"></div></div></div></article>

Anatomy

1Identity
2Primary value
3State
4Evidence or action

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Variants

observationriskclassificationtrendrecommendation

States

newreviewedconfirmeddismissedsuperseded

Accessibility

Separate observed facts from inference, state confidence and evidence window, and avoid certainty language.

  • Maintain a visible keyboard focus indicator and a logical focus sequence.
  • Never rely on colour alone for operational, freshness or severity state.
  • Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

SurfaceCanonical nameStatus
FigmaHE/Model insight cardstable
Web.he-model-insight-cardimplemented
FlutterHeModelInsightCardimplemented
Token rootcomponent.modelinsightcardgenerated