Raft Design System

People and Agents

Working agents

Where it shows that an agent is working, and on what — the summary at the top of the screen, Working now, the agent's row and the place's subtitle — and why there is no live bar.

People who share a server with agents want to know three things: whether anyone is working, who, and on what. A glance at the top of the screen answers the first two. The third is written where the work already appears: in the agent's row, in the header of the place it works in, and next to its name in a direct message. Nothing moves while the work goes on, and there is no live bar (0006).

When it applies

Any screen that shows agents while they work. An agent is working while its runtime reports that it is thinking or working; its presence light is then the still yellow busy (Identity and presence).

Where working shows

PlaceWhat it shows
The top of the screen: the right of the web top bar, the right of a phone's Home bar, or the desktop Chat sidebar header when there is no top barThe summary: up to 3 faces and the count. It opens Working now
Working nowOne row per working agent: its avatar and light, its name, and what it is doing
The agent's row in the sidebar, on Home and in MembersWhat it is doing replaces its runtime on the right of the row
The header of a channelThe subtitle starts with up to 3 faces and "2 agents working", then " · " and the channel's description
The header of a direct message with the agentIts light and what it is doing, after its name
The conversationThe yellow light on its avatar, on each of its messages

Where these sit in Raft Chat is in Raft Chat.

The summary and Working now

sidebar/compositions/phone-home
  • Show at most 3 faces in the summary, at 19px (xs), each overlapping the one before by 5px. Follow them with the count in Space Mono. Give the rest only in the count.
  • Give the summary the full sentence as its accessible name: "2 agents working". The faces are hidden from assistive technology.
  • Hide the summary when no one is working. Don't write 0.
  • Open Working now in a Popover 300px wide, aligned to the end of the summary, on a phone too. Title it Working now.
  • Give each row the agent's avatar at 27px (sm) with its light, its name in bold, and what it is doing on up to 2 lines in foreground-muted. Selecting a row opens the agent's page.
  • Order the faces and the rows by when each agent started. Keep that order while the work goes on, so a face moves only when someone starts or stops.
  • Keep an agent listed for 5 seconds after it goes idle. Agents pause between steps; without the grace, faces would leave and come back several times a minute.
  • Take an agent out when it stops, and when no signal has come from it for 90 seconds, so an agent that crashed doesn't stay listed.

Rows and subtitles

conversation-panel/compositions/conversation-panel-header
  • In the agent's row, write what it is doing in place of its runtime, in text-footnote and foreground-muted. Let it take at most 58% of the row, so the name stays readable (Sidebar).
  • Hide that text from assistive technology. The row's name stays the agent's name, a sentence that changes every few seconds isn't announced, and the light already carries the state.
  • Keep an external agent's runtime in its row instead of what it is doing: its presence is estimated from when it was last seen, and the activity can outlive it.
  • In a channel's header, count only the agents who are members of that channel. Start PanelMeta with the working line, then the description (Panel).
  • In a direct message's header, write the agent's state after its name in Space Mono, text-mono-meta and foreground-hint, with the full text in a tooltip.

What it says

  • Say what the agent is doing, as its runtime reports it, with the task number when there is one: "Editing Flow.tsx · #25".
  • When the runtime reports no detail, write the state: Thinking…, Working…, Starting…, Compacting context….
  • Don't write "Processing…", "Running" or "Busy". More on wording is in Writing about agents.

Why there is no live bar

Raft Chat used to show a live strip of working agents above the phone tab bar and at the bottom of the desktop sidebar (LiveAgentActivityBar). It answered all three questions in one place, and it was the wrong place:

  • It took the spot on the screen that thumbs reach most.
  • Its content changed all the time.
  • It was usually about something other than the page being read.

The strip is split up and each part goes back where it belongs: the summary at the top of the screen, the agent's row, the place's header and Working now. LiveAgentActivityBar is deprecated in raft-ui and is removed in 1.0 (LiveAgentActivityBar).

  • Don't add a live bar above the tab bar, at the bottom of the sidebar or anywhere else.
  • Don't add a typing indicator for agents.

Motion

Working is a state, not an event, so it doesn't animate (Motion).

  • Keep the light still. Thinking and working are the same still yellow. The product stopped animating lights because a looping animation kept the page rendering at the screen's refresh rate, and a dozen pulsing avatars got in the way of reading (0006).
  • When an agent joins the summary, let its face slide in and fade, with ease-slide, over about 200ms. With reduced motion, it appears.
  • Replace the count and the text. Don't roll the digits or animate the sentence.

Turning it off

  • Let people hide the summary and the channel's working line in Appearance › Live agent activity. The setting is saved on the device.
  • Keep the lights and the agents' rows when it is off: they are the agent's state, not a feed.

When the work ends

  • When an agent finishes, take it out of the summary and Working now. It posts a message that says what it did, with its proof (Hand-offs and approvals).
  • When an agent fails, its light turns orange, it leaves the summary, and its profile says why (Hand-offs and approvals).