@creance

Agents are rounded squares; people are circles.

A status as tone, icon and word.

A glass capsule. Blue is for the one primary action; red text marks refusal.

A native checkbox with its label.

Inline code, or a scrollable block.

What went wrong and what to do next.

A ring that fills to a percentage. Red only past a limit you set.

A button with only an icon. Its label is required and shows as a tooltip.

A text field.

A keyboard key.

Three dots beside what is happening.

Shortens the middle of a path or ID and keeps both ends.

Progress toward a known total.

A native radio with its label.

The native select, styled. The operating system draws the menu.

A hairline between groups.

A placeholder while content loads.

A trend with no axes, for a table cell or a stat card.

Something is happening, with no known end.

A small mark and a word. Each status has its own shape as well as tone.

An on/off setting that applies immediately.

A multi-line text field.

A button that stays on or off.

Extra text on hover and keyboard focus.

A message in the page: what happened and what to do.

A full-width notice in three tones.

Amounts across categories. More than one series stacks.

A ranking: a name, a bar and a value on every row.

Where you are. Long trails fold the middle.

A browser window drawn around a preview.

Spend against a limit. It warns at 80% and flags going over.

A day or a range. Arrow keys move by day, Page Up and Down by month.

A glass tile for grouping related content.

Card-sized options for a choice that needs a sentence each.

A text field with a clear button that puts focus back in the field.

Sections that open and close.

Type to filter and pick one. Arrow keys move, Enter picks, Escape closes.

Search everything and act from the keyboard. Press ⌘K or Ctrl+K to see it in use: the search on this site is a CommandMenu.

How sure the agent is: a range in words with reasons, never a percentage.

A preview on hover or keyboard focus. Focus never moves into it.

Opens on right-click, long-press, or Shift+F10.

Copies text, shows a check for two seconds, and tells screen readers.

Terms and their values.

For actions that cannot be undone. The red button stays off until the name is typed.

A question over a dimmed page. It traps focus and returns it when closed.

One line of a diff, with line numbers and screen-reader text.

Parts of a whole, with each slice’s value and share in the legend.

A "…" button with secondary actions for one row.

An empty list as an invitation to act.

An agent or a person as a row.

A failure that needs a decision: what broke, the error, and what you can do.

Thumbs up or down, then an optional comment.

A label, a control, and the hint or error that describes it, wired for screen readers.

Files and folders with change markers. Arrow keys walk the tree.

The end of a page: brand, groups of links, and a line for copyright.

JSON as a tree you can fold.

A shortcut and what it does.

A trend over time. Point at it, or focus it and press the arrow keys.

A full-width button under a list that says when it is loading.

Actions behind a button. Put destructive ones last, after a separator.

One turn. Yours sit right in a tile; the agent’s are plain text under its name.

A scrolling column that follows new messages until you scroll up.

Chooses which model answers.

Pick several. Picks become chips; Backspace removes the last one.

The bar across the top. When it gets narrow, the links move into a menu.

Page numbers, or a compact previous and next.

A phone drawn around content, to show a component at phone size.

A project-wide notice with one action.

Where you write to an agent. Enter sends; Send becomes Stop while it works.

One choice from a short list.

The agent’s thinking, folded away behind how long it took.

"2 hours ago", with the exact local and UTC time on hover or focus.

How risky an action is, in words.

A horizontal strip that fades where there is more.

A search field with a shortcut hint, a spinner and a clear button.

A panel that slides in from an edge.

Long content cut to a few lines, with a button to show the rest.

Links down the side, in groups. Collapses to icons that keep their names.

One value, a range, or steps, read out in words.

Shell commands with a copy button. The prompt sign is never copied.

What an answer is based on, with numbered markers in the text.

The common action, with alternatives in a menu.

One number, what it is, and how it moved.

A status with a running clock.

Where someone is in a fixed sequence. Each status has a shape and a spoken label.

Starting points above the input. Choosing one sends it.

Sortable columns, row selection with Shift-click ranges, and bulk actions.

A segmented control and its panels. Arrow keys move between tabs.

Text with a copy button beside it.

Light, dark or match the system. This one really switches this page, starting from its current theme.

A short message that rises from the bottom. Call toast() from anywhere.

A segmented control: pick one, or any.

Names a tool call and shows its state and attempt.

A player with glass controls. It starts muted and never autoplays.

The point where the agent hands control back: outcome, summary, next actions.

One specific action to allow or deny. A, Shift+A and D work while focus is inside it.

A whole conversation with an agent: messages, suggestions and the input. Type something to try it.

Pick a point to roll back to and see what it undoes before confirming.

A decision per hunk before anything lands. J and K move, Y and N decide.

Many agents at once, as birds on lines back to you. The one that needs you flies in on a taut line.

Hold for a second to stop the agent. Letting go early does nothing. Space or Enter held does the same.

Everything blocked on a person, across agents, most urgent first.

Everything you said "Always allow" to, how often it has been used, and a way to take it back.

Reorder, edit, remove and add steps before anything runs. Alt+Up and Alt+Down move a step.

When the agent needs information rather than permission.

The run's steps and tool calls. It follows the newest step until you scroll up.

One tool call's whole life: input, result, errors and retries.

The run screen. It takes organisms as slots, so your app decides what goes where.

The frame of an app: sidebar, header, content and an optional aside.

Shared helpers, base styles and the design tokens every Creance component uses.

Shared layout and styles for the chart components.

The agent event model, useAgentRun and its selectors: turn events from any agent into run state for the agent components.