FreeIn reviewv1.0.0

Agent Activity

A timeline of what an agent is doing: done steps ticked, the running one spinning, the rest queued.

npx shadcn@latest add @vibebox/agent-activity

Content

Controls

Accent

<AgentActivity />

About

Agents are legible when their steps are. This is the smallest honest version: a list, a status each, and the accent for 'done' and 'now'.

Use it when

An agent or job runs several steps the user can follow.

Skip it when

Steps are hundreds long: virtualise a log instead.

Install

1Add the VibeBox registry to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2Add the component with the shadcn CLI:
npx shadcn@latest add @vibebox/agent-activity

3Use it:

import { AgentActivity } from "@/components/vibebox/agent-activity";

<AgentActivity accent="#7c5cff" />

AI prompt

Everything an AI coding tool needs to rebuild this component the way it looks here: colours, fonts, the art it draws, props and rules.

Read the prompt

Build the VibeBox Motion component "Agent Activity" (AI and agents) in a Next.js App Router project with Tailwind CSS v4.

What it is
- A timeline of what an agent is doing: done steps ticked, the running one spinning, the rest queued.
- An activity feed for an agent: a vertical timeline with a tick for finished steps, a spinner on the one running and a quiet circle for those queued. The status is also in the text for screen readers, and the running step is marked `aria-current`.

Install
- `npx shadcn@latest add @vibebox/agent-activity`
- Registry: add `"@vibebox": "https://motion.vibeboxph.com/r/{name}.json"` to components.json, then run the command. The source lands in `components/vibebox/agent-activity` and is yours to edit.

Visual spec
- Colours (the VibeBox spectrum, the same in light and dark):
    - --spectrum-1: #00c5fc (cyan)
    - --spectrum-2: #1d6ef0 (blue)
    - --spectrum-3: #5225ed (indigo)
    - --spectrum-4: #e434dc (magenta)
    - --spectrum-5: #fd3aa9 (pink)
    - --spectrum-6: #f98472 (coral)
    - --spectrum-7: #fcbe72 (amber)
- Ink surface (dark): background #05070c, card #0a0d15, text #f5f6fa, muted text #a3abbd, border rgba(255,255,255,0.08).
- Paper surface (light): background #f3f0ea, card #fbfaf7, text #0c0e14, muted text #4a4f5c, border rgba(12,14,20,0.12).
- Fonts:
    - Display and body: Figtree (400, 500, 600, 700), falling back to ui-sans-serif, system-ui.
    - Emphasis: Fraunces italic, for one or two words of a heading.
    - Labels and code: JetBrains Mono (400, 500), uppercase labels with 0.14em tracking.
- Shape: radius 8 to 12px on cards and panels; pills may be fully round. Hairline borders, soft glow instead of heavy shadow.
- Motion: animate transform and opacity only; fast ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 140ms for micro-interactions, 320 to 520ms for reveals.

Art and media
- Built from HTML, CSS and inline SVG only; no image files or video.

Props
- `steps`: `{ title: string; detail?: string; status: "done" | "running" | "queued" }[]`. The steps, in order.
- `accent`: `string` (default "blue"). The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
- `className`: `string`. Merged with cn(); give it a width.

Behaviour and access
- Reduced motion: Nothing animates on its own.
- Keyboard: Every control is a native element in reading order.
- Screen readers: Semantic elements with accessible names; decorative marks are hidden.
- Touch: Targets are 36 px or larger; nothing depends on hover.
- Budget: about 0 KB of JavaScript, WebGL none, GPU none. It pauses while off screen.

Theming
Everything reads `--app-accent` (set by the `accent` prop, or by a parent) and the mode's tokens, so light and dark and any brand colour work without code changes. Pass a named accent or any CSS colour; Launchpad sets it once per app from the client's theme.

Usage
```tsx
import { AgentActivity } from "@/components/vibebox/agent-activity";

<AgentActivity accent="#7c5cff" />
```

Notes
Add the VibeBox Motion Agent Activity with `npx shadcn@latest add @vibebox/agent-activity`. Map your job's states to `done`, `running` and `queued`. Set the brand colour once with `--app-accent` on a parent (or the `accent` prop). It follows light and dark through the tokens; keep the licence header.

Rules
- Keep the licence header on every installed file.
- Original code only: do not copy components from other libraries, and do not add GSAP.
- Use tokens for colour, type and radius; no hard-coded brand values.
- Server Components by default; `"use client"` only for the island.

Code

1 files

components/vibebox/agent-activity/index.tsx

/**
 * VibeBox Motion · Agent Activity
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { cn } from "@/lib/utils";
import { accentStyle } from "@/lib/vibebox/app-accent";

export type AgentStep = { title: string; detail?: string; status: "done" | "running" | "queued" };
export type AgentActivityProps = { steps?: AgentStep[]; accent?: string; className?: string };

const SAMPLE: AgentStep[] = [
  { title: "Read the brief", detail: "3 files, 1 spec", status: "done" },
  { title: "Draft the sections", detail: "Hero, services, pricing", status: "done" },
  { title: "Check the copy against the facts", detail: "Hours and prices left as fill-ins", status: "running" },
  { title: "Prepare the preview", status: "queued" },
];

/** What an agent is doing: a vertical timeline of steps, with a spinner on the one running. */
export function AgentActivity({ steps = SAMPLE, accent, className }: AgentActivityProps) {
  return (
    <ol data-vb="agent-activity" style={accentStyle(accent)} className={cn("grid gap-0 rounded-xl border border-border bg-card p-4", className)} aria-label="Agent activity">
      {steps.map((step, i) => (
        <li key={i} className="relative grid grid-cols-[1.5rem_minmax(0,1fr)] gap-3 pb-4 last:pb-0" aria-current={step.status === "running" ? "step" : undefined}>
          {i < steps.length - 1 && <span aria-hidden="true" className="absolute top-6 bottom-0 left-[0.7rem] w-px bg-border" />}
          <span aria-hidden="true" className={cn("relative z-10 mt-0.5 inline-grid size-[1.4rem] place-items-center rounded-full border", step.status === "done" && "border-transparent bg-[var(--app-accent)] text-[var(--app-accent-fg,#fff)]", step.status === "running" && "border-[var(--app-accent)]", step.status === "queued" && "border-border")}>
            {step.status === "done" && <svg viewBox="0 0 24 24" className="size-3" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5" /></svg>}
            {step.status === "running" && <i className="size-2.5 rounded-full border-2 border-[var(--app-accent)] border-t-transparent motion-safe:animate-spin" />}
          </span>
          <div>
            <p className={cn("text-small font-medium", step.status === "queued" && "text-muted-foreground")}>{step.title}<span className="sr-only"> ({step.status})</span></p>
            {step.detail && <p className="text-caption text-muted-foreground">{step.detail}</p>}
          </div>
        </li>
      ))}
    </ol>
  );
}

Props

Prop	Type	Default	Description
steps	{ title: string; detail?: string; status: "done" \| "running" \| "queued" }[]	—	The steps, in order.
accent	string	"blue"	The accent colour: blue, violet, emerald, amber, rose, or any CSS colour. It sets --app-accent on the root, so a parent can set it once for a whole screen.
className	string	—	Merged with cn(); give it a width.

Accessibility and motion

Keyboard: Every control is a native element in reading order.
Screen readers: Semantic elements with accessible names; decorative marks are hidden.
Touch: Targets are 36 px or larger; nothing depends on hover.
Reduced motion: Nothing animates on its own.

Edge cases and limits

Only one step should be running at a time.

Tool Call Card
Free
A tool call an agent made: name and status on a line, arguments and result under a disclosure.
AI and agents · Server
Chat Thread
Free
A chat conversation: your messages in the accent, replies on a card, and a typing indicator.
AI and agents · Server
Prompt Composer
Free
A prompt box that grows with its text, with a model chip and a send button that wakes when there is text.
AI and agents · CSS