# Thinking indicator

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/thinking-indicator
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=601-225

```tsx
import { ThinkingIndicator } from '@commenda/pathfinder/thinking-indicator';

<ThinkingIndicator
  variant="orb"
  size={32}
  label="Thinking…"
  showLabel={!hasContent}
/>;
```


## Usage [#usage]

```tsx
import { ThinkingIndicator } from '@commenda/pathfinder/thinking-indicator';

<ThinkingIndicator
  variant="orb"
  size={32}
  label="Thinking…"
  showLabel={!hasContent}
/>;
```

## Live activity [#live-activity]


```tsx
import { ThinkingIndicator } from '@commenda/pathfinder/thinking-indicator';

<ThinkingIndicator
  variant="orb"
  size={32}
  label="Thinking…"
  showLabel={!hasContent}
/>;
```


Use Start/Finish activity to exercise streaming updates. New run resets disclosure intent.

## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `variant` | `"orb" \| "dots"` | optional | Rings by default; hidden Figma avatar/globe variants are excluded |
| `size` | `24 \| 32 \| 40` | optional | 32 in a Thinking row; 40 for a standalone chat mark |
| `label` | `string` | optional | Accessible status, defaults to Thinking… |
| `showLabel` | `boolean` | optional | Default true; hide after first step or word while retaining the orb |
| `active` | `boolean` | optional | Default true; false renders a still |
| `className` | `string` | optional | Layout override |

## Design rules [#design-rules]

- **THINKING-01:** Figma 599:7 / 599:28306: approved dotted rings and typing dots only; sizes 24/32/40. Default row 32, Label13 pearl800, gap4.
- **THINKING-02:** Remove the visible Thinking… label after the first step/word. Keep the orb for the generation; unmount when finished. The host owns this lifecycle.
- **THINKING-03:** The canvas loop uses Figma ring counts, radii and tilts, a 1s sine gather, 1.9s cubic growth staggered by 0.3s, and an inner-first 1.8s fold when switching from orb to dots, and stops in background tabs. Reduced motion and inactive states render a still. The status label remains accessible.

## Accessibility and integration [#accessibility-and-integration]

The canvas is decorative and hidden from assistive technology. A persistent `role="status"` label uses polite announcements; `showLabel={false}` keeps that label available to screen readers. Render one meaningful status per response and do not replace its label with every streamed token. Reduced motion and `active={false}` produce a still, with the same accessible text. There are no interactive controls in ThinkingIndicator itself.

The application owns requests, cancellation, approval, retries, durations, and history persistence. No AI SDK provider is required. See [AI content integration](/docs/guides/ai-content) for migration mappings; consumer migration is outside this phase.