AI indicators and thermal aura

Quick usage

Import the shared component; never copy its markup into a feature. The Web TSX tab beside the live stage has a complete, working example.

import Chip from '@/shared/components/Chip';
import AiSparkle from '@/shared/components/AiSparkle';
import { AiEmptyGreeting } from '@/shared/components/AiChat/AiEmptyGreeting';

Live stage and code

The live component and its controls on the left, the code on the right; change a control and the code follows: Web TSX (the component in a working example), Tailwind and HTML (the markup it renders, with its data attributes), React Native, SwiftUI and Jetpack Compose. The header theme switch drives every stage.

Props

Read from the component's source when the docs build: names and defaults from its signature, types and descriptions from its JSDoc. A blank type means the prop has no JSDoc yet.

DOM contract

What the rendered element carries: the data attributes its styles key on, its roles and ARIA, its focus style, and whether its stylesheet draws the 44px hit boundary. Also read from the source.

Accessibility and touch

The indicator is metadata; any control beside it has its own target.

AI indicators and thermal aura is passive: it reports a condition and is not pressed, so it has no hit boundary. If a design makes it pressable, it gains the 44 by 44 boundary and is marked /* ds-chip: why */.

Human in the loop

An AI mark is a claim about who wrote a value, so it has to stay true. These rules come from FRONTEND_PR_COMPLIANCE.md sec.16.1. Try the first one on the stage above: edit the vendor.

• Provenance clears the moment a person edits the value. The pill goes and the field edge returns to the standard focus, on --duration-instant, border and shadow only. There is no undo to the AI value and no confirmation prompt: a pill that survives a human edit claims the machine wrote something it did not.
• In code, Input takes origin="ai" or "human", and the caller flips it to "human" on the first edit. Nothing clears it automatically, so every AI-filled field must do this.
• Confidence is an affordance, never a gate. A confidence value never skips or short-circuits a human review step; high confidence is not approval.
• Confidence takes warm sand and terracotta, never a status hue. A green "high confidence" chip reads as verified, which is the one claim a confidence score cannot make.
• AI output is reviewed at the HITL review step, never in chat. An agent can name a match and describe an action, but never executes it from chat.

Do and avoid

Rules and constraints