Agent state · 0nlyType

Example

Ready

Thinking

Working

Input

Needs your input

Done

Word, ready

Ready

Word, thinking

Thinking

Word, working

Working

Word, input

Needs your input

Word, done

Done

Thinking, right to left

يفكر

Own words

Reading the brief

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base, marker, and spinner along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/agent-state.json

Usage

This example also uses Button.

npx shadcn@latest add https://thedirectors.agency/ui/r/button.json

agent-state-example.tsx

"use client"import * as React from "react"import { AgentState, type AgentStateValue } from "@/components/ui/agent-state"import { Button } from "@/components/ui/button"const order: AgentStateValue[] = ["ready", "thinking", "working", "input", "done"]// The agent's state comes from outside, as it would from a real agent; here the person moves it on.export default function Example() {const [at, setAt] = React.useState(0)const state = order[at]return (<div className="grid justify-items-start gap-(--ot-space-6)"><AgentState state={state}>{state === "working" ? "Reading the brief" : undefined}</AgentState><Button variant="quiet" onClick={() => setAt((n) => (n + 1) % order.length)}>{at === order.length - 1 ? "Start again" : "Next state"}</Button></div>)}

Contract

Underneath: native, composed from marker (its status line) and spinner.
Anatomy: <p class="ot-marker ot-agent" data-state="ready | thinking | working | input | done" data-variant="word" role="status" aria-live="polite"> holding .ot-agent-mark (aria-hidden) and .ot-agent-word. aria-busy while thinking or working. data-turned once the state has changed.
Where an agent is, as the words say it: Ready, Thinking, Working, Needs your input, Done (agentStateWords; children gives other words, "Reading the brief"). The mark lives the life of a day on the "28 December" calendar: ready is a hairline ring (to come), thinking is the ring breathing (the breath spinner), working is three voices going round it (the round spinner), input is the one accent disc (now: it's your turn), done is the disc filled in ink (gone by) with the word stepped back to pencil. The word is graphite at rest and ink while the agent is busy or waiting on you.
It moves only while state is thinking or working, which the caller drives from the agent's real state, so it is not motion that plays by itself; the loops are the spinner's, slow and eased. When the state changes the new ring or disc lands with spiccato (never on first paint).
word (variant="word"): no mark. The word carries the state: inked letter by letter while busy (the word spinner, its copy for readers in a .ot-sr), set in the accent when it's your turn, pencil when done.
A polite status, so each change is heard once. Reduced motion: the spinners' own still frames. Right to left the mark leads from the right. Forced colours: the ring and the ink disc in CanvasText, the accent in Highlight.

Props

Props of Agent state
Prop	Type	Default	What it does
`state`	`"ready" \| "thinking" \| "working" \| "input" \| "done"`		Where the agent is, which the caller drives from the agent's real state. ready: a hairline ring, graphite. thinking: the ring breathes (the breath spinner). working: three voices go round it (the round spinner). input: the one accent disc, the word in ink: it's your turn. done: the disc filled in ink, the word stepped back to pencil. Only thinking and working move. It is a polite status, so each change is heard once.
`variant`	`"dot" \| "word"`	`"dot"`	dot: the mark before the word, after the calendar's discs (to come a ring, now the accent, gone ink). word: no mark; the word carries the state, inked letter by letter while busy (the word spinner) and set in the accent when it's your turn.
`children`	`string`		Other words for the state ("Reading the brief"). Left out, each state says its own: Ready, Thinking, Working, Needs your input, Done.
`agentStateWords`	`Record<AgentStateValue, string>`		The default words, exported so an agent chat can say the same thing elsewhere.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Agent state	"28 December" discs; the busy button's present-tense word	A ring to come, the accent disc for your turn, an ink disc when done; the ring breathes or goes round while it works
Word agent state	The word spinner	No mark: the word is inked letter by letter while busy, and takes the accent when it's your turn

How it moves

How it moves
Component	Articulation	What moves
Agent state	Breath, then canon	Only while thinking (the ring breathes) or working (three voices round it); a new ring or disc lands with spiccato