Agent avatar | Arcadia Design

import { AgentAvatar, ListRow } from "@arcadia/ui";

<div {...sx("cmp-rows", cmp.rows)}>
  <ListRow size="lg" leading={<AgentAvatar avatar={JUNIPER} name="Juniper" live expression="working" />} label="Juniper" meta="Working" active />
  <ListRow size="lg" leading={<AgentAvatar avatar={PEBBLE} name="Pebble" />} label="Pebble" />
  <ListRow size="lg" leading={<AgentAvatar avatar={ATLAS} name="Atlas" expression="waiting" />} label="Atlas" meta="Waiting for you" />
  <ListRow size="lg" leading={<AgentAvatar avatar={EMBER} name="Ember" expression="sleepy" />} label="Ember" meta="Paused" />
</div>

TSX

import { AgentAvatar } from "@arcadia/ui";

<AgentAvatar avatar={agent.avatar} name={agent.name} size={20} live={agent.running} expression={agent.running ? "working" : "neutral"} />

A character is a body, a colour, a face and a small tilt, drawn from a seed. Store the picked fields, not the seed: a later change to the lists never re-skins an agent. characterFromId draws the same character for the same id every time; shuffledCharacter draws a fresh one, and both can avoid one colour so two agents made in a row never look alike.

At 20px and below the body is drawn flat with dot eyes, so the silhouette stays legible in a row. A photo shows circle-cropped at every size, with the character standing in while it loads and if it fails.

Examples

Sizes

16 to 96. A ListRow leading slot takes 20; the profile header takes 72 and the empty state 96.

Expressions

Eyes only, no mouth: working reads along a line, waiting widens, sleepy closes and sad drops the inner corners.

Faces

Six eye styles, each placed by the body so the eyes sit right on a heart, a house or a star.

Picker

Every pick hands back the whole next character; write it at once.

import { useState } from "react";
import { AgentAvatarPicker, shuffledCharacter } from "@arcadia/ui";

function Picker() {
  const [value, setValue] = useState<CharacterAvatar>(JUNIPER);
  const [photo, setPhoto] = useState(false);
  return (
    <AgentAvatarPicker name="Juniper" value={value} onChange={setValue}
      onShuffle={() => setValue(shuffledCharacter(value.color))} onReset={() => setValue(JUNIPER)}
      onUpload={() => setPhoto(true)} hasPhoto={photo} onRemovePhoto={() => setPhoto(false)} />
  );
}

Stack

A few agents, overlapping on discs of the surface colour, with the rest folded into a count.

import { AvatarStack } from "@arcadia/ui";

function Stack() {
  const team = [
    { id: "a", name: "Juniper", avatar: JUNIPER }, { id: "b", name: "Pebble", avatar: PEBBLE },
    { id: "c", name: "Atlas", avatar: ATLAS }, { id: "d", name: "Ember", avatar: EMBER },
  ];
  return (
    <>
      <AvatarStack agents={team.slice(0, 2)} label="Agents on lookout" />
      <AvatarStack agents={team} label="Agents on lookout" />
      <AvatarStack agents={team} size={24} max={4} label="Agents on lookout" />
    </>
  );
}

rootStyle takes layout and the blink period. The stack takes the ring colour of the surface it sits on.

Knob	Takes	Default	Sets
	``calc(${Ref<Duration>} * ${number})``	`calc(${duration["--loop-watch"]`	One blink cycle (seeded per agent from 1.25× to 2.2× the watch loop, about 4 to 7 seconds).

Knob	Takes	Default	Sets
	`Paint`	`var(--bg-sidebar)`	The ring around each avatar: the surface the stack sits on.

AgentAvatar

avatarrequired: AgentAvatarValue; The stored avatar: a character, or a photo with its character as the stand-in.
namerequired: string; Accessible name: the agent's name.
size: AgentAvatarSizeDefault20; Width and height in pixels. 20 and below draw flat with dot eyes, so the shape stays legible.
expression: AgentExpressionDefault"neutral"; Eye-only mood for the agent's state: working (a live turn), waiting (needs the user), sleepy (paused or archived), sad (failed).
live: boolean; Blinks now and then (live agents, and every avatar at 72px and up). Never under reduced motion.
photoSrc: string; The photo's address when avatar is a photo; while it loads, and if it fails, the character shows.
rootStyle: RootStyle<AgentAvatarKnobs>; Typed StyleX override: layout and the blink knob.

Rest props go to HTMLAttributes<HTMLSpanElement>.

Usage

Examples

Sizes

Expressions

Faces

Picker

Stack

Matrix

Customising

Accessibility

API reference

AgentAvatar

AgentAvatarPicker9 props

AvatarStack5 props

AgentGlyph8 props