ScenarioScript

stable

Linear step sequence for documenting agent interaction flows — shows state badge, copy, and annotation per step

import { ScenarioScript } from "@nodus/design-system/patterns"

Demo coming soon

Props

Prop	Type	Default	Description
`steps`req	`Array<{ state: InteractionState; copy: string; note?: string }>`	—	Ordered steps: each with an interaction state, copy example, and optional annotation.

stepsrequired

Type Array<{ state: InteractionState; copy: string; note?: string }>Default —

Ordered steps: each with an interaction state, copy example, and optional annotation.

Design Rationale

This component was designed to express:

Color-coded uppercase badge for the six canonical AI interaction states (loading, thinking, acting, confirming, error, recovery)

Animated dot indicator for AI interaction states — CSS-only animations with prefers-reduced-motion support

Was this helpful?