Mischief

12 / Agent UI

Thinking State

A status row for work in progress, with a live elapsed timer and optional reasoning behind a disclosure.

Live previewSource
Thinking0.0s

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Status({ startedAt }: { startedAt: number }) {
  return (
    <ThinkingState
      status="thinking"
      startedAt={startedAt}
      reasoning={<StreamingText source={reasoningStream} />}
    />
  )
}

API

status"idle" | "thinking" | "done" | "error"The current phase. Defaults to "thinking".
label, doneLabel, errorLabelReactNodeCopy for each phase.
startedAtnumberEpoch milliseconds. Drives a timer that ticks while thinking.
elapsedMsnumberA fixed duration, used instead of the timer when supplied.
showElapsedbooleanShows the duration. Defaults to true.
reasoningReactNodeOptional detail behind a disclosure. Compose Streaming Text here for live reasoning.
open, defaultOpen, onOpenChangeboolean, boolean, (open: boolean) => voidControls the reasoning disclosure.

Accessibility

The root carries aria-busy while thinking and drops it once the work settles. Reasoning uses a native button with aria-expanded and aria-controls rather than a details element, so it can animate and stay predictable. The spinner and label stop animating under reduced motion.

Dependencies

lucide-react