Orbeez kit
Fun components for agent interfaces: the components agent apps commonly need. Agents are orbeez and they animate a mood to show state, and nothing shifts the layout as it streams in.
The kit working together. Send a prompt: it thinks, calls a tool, hands each part to an agent, then answers. Drop a file on it to attach it. See it as a whole chat app.
FoundationsPaper, ink, a tone scale per bead, buttons and the theme.??BeadsHow an agent looks: its colour, what it wears, and ten moods.
Input
Prompt areaThe box a prompt is written in, and everything that rides on it: suggestions, attachments, the crew of agents it goes to, mentions and commands, how full the context is, and prompts queued while the agents are busy.File uploadFiles dropped anywhere on what it wraps, or picked with a trigger, shown as chips dyed by the kind of file, each saying how its upload is going.
Conversation
MessageOne turn in the conversation. The user's message is a dark bubble on the right; an agent's is white, or tinted in its colour.Chat containerThe scrolling column a conversation sits in. It follows new content down, never shrinks by itself, and lets go when someone scrolls up.Chat timelineA rail down the side of a long conversation: a bead rolls to the turn being read, and each mark jumps to its turn.MarkdownGitHub's markdown set in the kit's type, with fenced code as CodeBlocks.Code blockCode in a card, with its language or file name and a copy button.Response streamAn answer arriving a character at a time, or a word at a time with a blur fade, with a bead as the caret.SourceA citation chip with the site's own bead. Hover or focus it for the page it points to.LoaderSomething is happening and there is nothing to show yet: beads hopping in turn, one breathing, one in a ring, one thinking, typing dots, or shimmering words.
Reasoning
Agents & tools
Agent listA team of agents: each a bead with a progress ring, beside a bubble with its task and current step.Agent huddleAgents discussing a task: the beads gather into a slowly turning ring and take turns to speak, with typing dots over whoever has the floor.HandoffWork passed from one agent to another: two beads with an arrow between, who handed it to whom, where it came from, and the work under that.Agent composerMakes an agent or changes one: its colour on a ring of beads, what it wears, a role to start from, its instructions, what each tool may do, the model, and how far a run may go.PlanAn agent's to-do list. Each step's bead goes from an empty ring to working to a tick, and the bead in the header fills as the list does.ArtifactThe thing an agent is making, like a file or a page, in a panel of its own beside the conversation, with a card in the conversation that opens it.ToolA call an agent made to a tool, dyed by how it is going, with what went in and what came out folded inside.ConfirmationAn agent stopping to ask before it does something it should not do alone.