Activity row | Arcadia Design

Can you check why the smoke flow went red?

Juniper is looking through files

import { ActivityRow, AgentAvatar, Bubble, MessageGroup } from "@arcadia/ui";

<div {...sx("cmp-thread", styles.thread)}>
  <MessageGroup side="end">
    <Bubble side="end">Can you check why the smoke flow went red?</Bubble>
  </MessageGroup>
  <ActivityRow status="Juniper is looking through files" label="Looking through files" meta="41s"
    avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state="working" poke aria-hidden />} />
</div>

TSX

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

<ActivityRow status={`${agent.name} is ${step.toLowerCase()}`} label={step} state="working" enter="arrive"
  avatar={<AgentAvatar avatar={agent.avatar} name={agent.name} size={28} state="working" poke enter aria-hidden />} />

The other side is at work. No bubble: its character at 28px and one plain line beside it, where its next message will land. The character is the indicator, so give the AgentAvatar the same state; the label names the step in a few plain words and rolls when the step changes. Any state but idle shimmers the label. meta holds how long the turn has run, in figures that keep their width.

The row is as tall as a one-line bubble, and its character stands --activity-row-px in, on a composer's first control. Under the pointer the character's eyes widen and it leans toward the pointer.

Examples

Steps

A new label rolls in from below as the old one leaves upward, clipped to the line. Pace the changes yourself: a label that stays under about half a second only flickers.

Juniper: Thinking

import { useState } from "react";
import { ActivityRow, AgentAvatar, Button } from "@arcadia/ui";

function Steps() {
  const [i, setI] = useState(0);
  const state: AgentAvatarState = i === 0 ? "thinking" : i === STEPS.length - 1 ? "composing" : "working";
  return (
    <div {...sx("cmp-thread", styles.thread)}>
      <ActivityRow label={STEPS[i]} state={state} status={`Juniper: ${STEPS[i]}`}
        avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state={state} poke aria-hidden />} />
      <Button variant="secondary" size="sm" onClick={() => setI((i + 1) % STEPS.length)}>Next step</Button>
    </div>
  );
}

The reply lands

Set leaving when the reply is ready and unmount on onExited.

import { useEffect, useState } from "react";
import {
  ActivityRow, AgentAvatar, Bubble, Button, MessageGroup,
} from "@arcadia/ui";

function Landing() {
  const [phase, setPhase] = useState<"work" | "leave" | "said">("work");
  useEffect(() => {
    if (phase !== "said") return;
    const t = setTimeout(() => setPhase("work"), 2400);
    return () => clearTimeout(t);
  }, [phase]);
  return (
    <div {...sx("cmp-thread", styles.thread)}>
      <div {...sx("cmp-activity-swap", styles.swap)}>
        {phase !== "said" && (
          <div {...sx(null, styles.cell)}>
            <ActivityRow label="Writing" state="composing" enter="arrive" leaving={phase === "leave"} onExited={() => setPhase("said")}
              avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state="composing" aria-hidden />} />
          </div>
        )}
        {phase !== "work" && (
          <div {...sx(null, styles.cell)}>
            <MessageGroup><Bubble enter="land">The smoke flow is green again.</Bubble></MessageGroup>
          </div>
        )}
      </div>
      <Button variant="secondary" size="sm" disabled={phase !== "work"} onClick={() => setPhase("leave")}>Reply</Button>
    </div>
  );
}

The row fades and sets back over --duration-exit; a Bubble with enter="land" waits for that and comes in whole. Keep both in one grid cell while they cross, so the list never dips.

States

The eight states of an agent, each with its body clip and its eyes. done and failed play their one move when the state changes, never on mount.

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

<div {...sx("cmp-activity-states", styles.states)}>
  {AGENT_AVATAR_STATES.map((s) => (
    <ActivityRow key={s} label={LABEL[s]} state={s}
      avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state={s} aria-hidden />} />
  ))}
</div>

Who is doing it

With who, the name and the label read as one sentence, one word space apart. A long name gives way at its end; the words after it stay whole.

Juniper is thinking

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

<ActivityRow who="Juniper" label="is thinking" state="thinking" status="Juniper is thinking"
  avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state="thinking" aria-hidden />} />

Nothing named yet

Without a label the character stands alone, for the first moment of a turn: its working state is the motion.

Juniper is working

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

<ActivityRow status="Juniper is working" avatar={<AgentAvatar avatar={JUNIPER} name="Juniper" size={28} state="thinking" aria-hidden />} />

rootStyle takes where the row sits and these knobs: its height and inset as size tokens, and how long its entrance waits.

--activity-row-h: Ref<Control | Space> | `calc(${Ref<Control | Space>} + ${Ref<Space>})`Default calc(var(--control-lg) + var(--space-1)); The row's height: one line of a conversation's bubbles.
--activity-row-px: Ref<Space>Default var(--space-2); Inline padding before the character: it stands on the composer's first control.
--activity-row-enter-delay: Ref<Duration> | "0s"Default 0s; How long the entrance waits (the row stays hidden until then): a reply's row waits for the sent bubble to land.

With status the row is a polite status region that reads the sentence once per change; the character, the rolling label and the time stay out of it. Without status the whole row is hidden from assistive tech, for a conversation whose live region already says what the agent does.

Nothing in the row takes focus and no input waits on its motion. Reduced motion ends every entrance and exit at once, swaps the label in place and shows it as plain text; the character holds still and its eyes still tell the state.

ActivityRow

avatarrequired: ReactNode; The character: an AgentAvatar at 28px, given the same state (and poke, enter).
label: string | null; What it is doing, in a few plain words ("Searching the web", or "is thinking" when who is set). Without it the character alone says it is working: nothing has a name yet.
who: string | null; Who is doing the step: it gives way by whole words, and label is the rest ("is thinking"), which never shrinks.
state: "idle" | "thinking" | "working" | "composing" | "done" | "failed" | "waiting" | "asleep"Default "working"; The agent's state: anything but idle shimmers the label.
meta: ReactNode; A quiet note after the label, in figures that keep their width: the turn's elapsed time.
status: string; The sentence a screen reader hears ("Juniper is searching the web"): the row becomes a polite status that reads it once per change. Omit when a live region already says so.
enter: ActivityRowEnter | null; Plays once on mount. Omit for a row that was already there (a reload).
leaving: booleanDefault false; The row is leaving: it fades and sets back over --duration-exit, then onExited fires.
onExited: () => void; The exit has ended (at once under reduced motion): unmount the row.
rootStyle: RootStyle<ActivityRowKnobs>; Typed StyleX override: layout and the --activity-row-* knobs.

Rest props go to HTMLAttributes<HTMLDivElement>.

Usage