AutonomyLevel

Stable

Switch between a short summary, each step, or every detail of what an assistant did.

Also known as altitude toggle, autonomy level, autonomy slider, detail level

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

A short account of the result and anything that needs you.

Sorted your receipts and sent one invoice.

const [view, setView] = useState<Altitude>("summary");
<AutonomyLevel value={view} onChange={setView} />

Pick a view and the list below changes.

Usage Code Design Accessibility

When to use it

Lets people choose how much of an assistant's work to read: a short summary, each step, or every detail. The summary comes first, and the detail is one press away.

Made of: Group of three choices · Hint line for the chosen view

Use it for

Above a run report or transcript, to switch between a summary and full detail.
Letting people who check work closely see everything the assistant read and tried.

Not for

Choosing between options that are not levels of detail: use SegmentedControl.
One section that people open and close: use Collapsible.
The assistant's reasoning, shown on request: use ThinkingBlock.

Do and avoid

A short account of the result and anything that needs you.

Do. Three levels, summary first, with a line that explains each one.

Avoid. Five levels of detail are too many to tell apart.

Do

Start on Summary for long runs.
Keep the same three names across your product.
Let people change the view without losing their place.
Make Everything truly complete.

Avoid

Don't add more than three levels.
Don't hide errors in Summary.
Don't change the view for people on their own.
Don't use it to pick a topic. It only sets detail.

On a phone

The three options sit in one row that scrolls sideways inside its own box if the labels are too wide for the screen.
Each option keeps its size and has a 44px tap area on a touch screen.
The hint line under the control is plain text, so it stays visible and does not need a hover.

Seen in products

Amir Elion's library names 'transparency theater' as a failure and suggests an altitude control, where people choose the level of detail.
Anthropic advises showing the agent's planning steps openly.

Properties

Prop	Type	Default	Description
value	Altitude	none	Selected view (controlled): summary \| steps \| everything.
defaultValue	Altitude	"summary"	Starting view when uncontrolled.
onChange	(value: Altitude) => void	none	Called when the view changes.
labels	Partial<Record<Altitude, string>>	none	Replace the names of the views.
hints	Partial<Record<Altitude, string>>	none	Replace the hint line for each view.
label	string	"How much detail"	Accessible name for the group.
className	string	none	Extra classes on the wrapper.

"Show code under the preview gives the code for the example on the stage."

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

summary: The Summary level shows a short account of the result and anything that needs you.
steps: The Steps level shows each thing the assistant did, one line at a time.
everything: The Everything level shows every detail, including what it read and tried.

Tokens

Change one of these and every part that uses it follows.

--border
--surface-sunken

Three levels of detail