TaskRows

Live status rows for agent tasks — completed, running with a step spinner, failed with retry — each expandable to show its sub-steps.

When to use

• Show a handful of background agent tasks and their status in a reply or a side panel.
• Use Capsules (separate floating rows) in open layouts and List (one bordered card with dividers) inside denser panels.
• Not for a single indeterminate wait — use LoadingState. Not for a reasoning or tool trace — use ThinkingState or ToolChips. Not for user-facing onboarding steps — use OnboardingChecklist or Stepper.

Usage

import TaskRows from "@/components/iris/task-rows/task-rows";

h(TaskRows, {
  variant: "List",
  rows: [
    {
      key: "verify",
      label: "Checked open tasks",
      amount: "38 tasks",
      status: "done",
      details: [{ label: "Matched owners", meta: "38/38" }],
    },
    {
      key: "index",
      label: "Index the project",
      amount: "214 documents",
      status: "running",
      step: 2,
      details: [{ label: "Building semantic search", meta: "68%" }],
    },
  ],
  onToggleRow: (key, open) => log(key, open),
});

Props

Prop	Type	Default	Description
variant	"Capsules" | "List"	"Capsules"	Row styling.
rows	{ key: string; label: string; amount: string; status: "done" | "running" | "sequence"; step?: number; details: { label: string; meta: string }[] }[]	3 CapyDB upkeep tasks	done shows a green check and a Completed pill, and running shows a spinning ring with step. sequence plays pending → Failed (with retry) → Completed on a fixed timer. details appear when a row is expanded.
labels	Partial<{ completed: string; failed: string }>	Completed / Failed	Pill text.
className	string	—	Extra classes on the outer column (max 440px wide).
onToggleRow	(key: string, open: boolean) => void	—	Called when a person expands or collapses a row.

Notes

• The status run is a fixed demo timeline that plays once. The row whose key is "index" auto-expands between about 1.5s and 3.9s, and sequence rows resolve at about 5.3s. Status isn't driven by props, so for live data, map each task to done or running and re-render.
• Each row header is a button with aria-expanded that toggles its details. The chevron is aria-hidden.
• Reads --surface, --inset, --line, --ink, --ink-3, --green/--green-tint and --red/--red-tint, plus shadow-card.