Task rows

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useRef, useState, type CSSProperties } from 'react';import { TASKS, type Task, type TaskStatus } from './data';import { useAutoplay } from './use-autoplay';import styles from './task-rows.module.css';export type { Task, TaskStatus, TaskStep } from './data';export type TaskLayout = 'capsules' | 'list';/* * Task rows: an agent's tasks as they run, one row each. A row reads its status at a glance: a * green check once completed, a red cross once failed (its pill then spins a retry arrow), its * number in a turning ring while running, and in a still ring while it waits. Then the task, * what it works on ("12 suppliers"), a status pill, and a chevron: the row opens onto its * sub-steps, each with its figure in monospace. * * - Two layouts, switched under the rows: capsules (a pill each, 8 px apart, which square off a *   little while open) and a list (one card, rows split by hairlines). Switching keeps what is *   open; the rows rise in again, 80 ms apart. * - A row opens by animating grid-template-rows between 0fr and 1fr, the content fading along: *   no height is ever measured. Its sub-steps rise in 100 ms apart.

/* Task rows (task-rows.tsx): a soft grey card, and in its middle a column 440 px wide at most:   the rows, as capsules or as a list, and under them the Capsules | List switcher.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme). Shadows that differ between the schemes are   written once with every layer, the layers a scheme does not use being transparent.   Motion. Rows rise in by a transform, 80 ms apart; a row opens by animating grid-template-rows   between 0fr and 1fr, so nothing is measured; a new status pops its icon in and fades its pill   in. Under reduced motion all of it is instant and the rings stand still. */.root {  /* The card, the rows on it, and a row under the pointer. */  --canvas: oklch(96.1% 0.002 247.84);  --surface: oklch(100% 0 0);  --inset: oklch(97.9% 0.002 247.839);  /* The ink in three strengths, and the hairlines. */  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);  --ink-3: oklch(69.5% 0.009 264.505);  --line: oklch(94.6% 0.003 264.542);  /* The switcher's track. */  --field: oklch(96.1% 0.001 286.375);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * What the rows show: the tasks of an agent's run, each with its status and the sub-steps it opens * onto. The sample is an ice-cream shop's agent, getting its suppliers and its reorders in order. */export type TaskStatus = 'pending' | 'running' | 'failed' | 'completed';export type TaskStep = {  /** What the step did: "Reading POS export". */  label: string;  /** Its figure, set in monospace on the right: "3 files", "68%", "draft". */  value: string;};export type Task = {  id: string;  /** The task, in a few words. */  title: string;  /** What it works on, counted: "12 suppliers". */  count?: string;  status: TaskStatus;  /** The sub-steps the row opens onto; without them the row does not open. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;