happy
Hops and squashes as it lands. Success.
The agent heap for a moment when the last agent finishes; the empty conversation waking up.
mood="happy"Beads
Every agent is a bead: a colour it keeps, something it wears so it can be told apart, and a mood that shows what it is doing right now. All three are props on
Bead, and none of them ever moves anything round it.The bead
Bead
Bare, in a ring that fills as it works, done, in black glass, or in a heap.
tsx
<Bead hue={338} size={36} />
<Bead hue={46} size={24} progress={0.35} /> // in a ring that fills as it works
<Bead hue={STATUS.done} size={28} done /> // with a tick
<Bead hue="ink" size={32} /> // black glass
<BeadHeap hues={HUES} size={20} />Moods
A mood is an animation that shows state on a bead: a pose, and on beads 24px and up, marks drawn around it. Give any bead a mood. Each loop is eased per phase, so a hop slows as it rises and speeds up as it falls. Moods use transforms and sit over the bead, so they never shift the layout, and they stop when reduced motion is on.
love
Pulses twice with hearts rising. Positive feedback.
Feedback marked helpful; files dragged over a drop zone.
mood="love"celebrating
Hops side to side under confetti. A large task finished.
Save it for the end of a long run, like a merged PR or a finished migration.
mood="celebrating"!!?!!
surprised
Jumps with shock lines and a cycling mark: “!”, “!?”, “!!”. Needs attention.
A tool call waiting to run; a Confirmation asking for the go-ahead.
mood="surprised"!!?!!??
thinking
Lifts and tilts under circling question marks. Reasoning.
The agent avatar while it reasons; ThinkingBar; the active ChainOfThought step; the prompt lead while you type.
mood="thinking"??working
Bobs inside a turning ring. In progress.
Agents at work; running tools; the avatar while its team works; the prompt lead once sent.
mood="working"confused
Sways under circling stars. Uncertain.
An answer with low confidence, or a prompt it could not split into parts.
mood="confused"zzz
sleepy
Tilts with z’s rising. Idle.
The prompt lead while the box is empty; one of the crew in the empty conversation.
mood="sleepy"zzzsad
Shrinks under a rain cloud. Failed.
Failed tools; stuck agents; a denied Confirmation; a stopped run; feedback marked unhelpful.
mood="sad"angry
Shakes with an anger mark and puffs of smoke. Out of room or blocked.
The ContextMeter past 85% full; rate limits.
mood="angry"Changing moods
A mood is a prop, and changing it animates: the bead squashes briefly, springs into the new pose, and the old marks fade out as the new ones fade in. Nothing around it moves.
zzz
mood="sleepy"
tsx
// the mood follows what the agent is doing; the change animates by itself
const mood: Mood = failed ? 'sad' : done ? 'happy' : working ? 'working' : thinking ? 'thinking' : 'sleepy'
<Bead hue={264} size={32} mood={mood} />Using a mood
tsx
<Bead hue={264} size={32} mood="thinking" />
// an avatar that says what the agent is up to
<MessageAvatar hue="ink" mood={streaming ? 'thinking' : undefined} />
// a working agent in its ring
<Bead hue={198} size={18} progress={0.4} mood="working" />
// a heap that cheers, without head decor
<BeadHeap hues={HUES} mood="happy" />Accessories
A mood is how an agent is doing right now; an accessory is who it is. Two agents of one colour can still be told apart by what they wear. An accessory is worn on the bead's body, so it hops, slumps and squishes along with every mood.
crown
The orchestrator, who hands out the work.
accessory="crown"goggles
A researcher that goes off and digs.
accessory="goggles"beanie
A coder: head down, in the zone.
accessory="beanie"tophat
A reviewer: formal, and has the final say.
accessory="tophat"wizard
A writer, or a planner that makes hard things look easy.
accessory="wizard"sprout
A new agent, still learning the codebase.
accessory="sprout"bow
A designer, or anyone who wants one.
accessory="bow"sunhat
A cheerful helper for light work.
accessory="sunhat"bunny
A quick one that hops between tasks.
accessory="bunny"bucket
A tester that goes out in the field.
accessory="bucket"camera
Takes screenshots and records what it sees.
accessory="camera"angel
A guardian that checks safety and permissions.
accessory="angel"devil
A red-teamer that tries to break things.
accessory="devil"hearts
A people person: support and feedback.
accessory="hearts"chef
Cooks up new code from a recipe.
accessory="chef"bandana
A hacker that ships fast and fixes things on the spot.
accessory="bandana"binoculars
A scout that watches from afar: monitoring, errors, outages.
accessory="binoculars"Colour
An agent's colour is a hue and nothing else; the kit dyes everything from it at a set saturation and lightness, so any pick reads in light and dark. BeadOrbit picks one: tap a bead on the ring and it rolls in and hits the one in the middle, which takes its colour, or drag round the ring for any hue between.
hue=198tsx
const [hue, setHue] = useState(198)
<BeadOrbit hue={hue} onChange={setHue} accessory="goggles" />Size and decor
14px
18px
??24px
??32px
??44px
decor
Under 24px a bead acts with its body alone; there is no room round its head. decor turns it on or off by hand.