Agent progress

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type ReactNode,  type RefObject,} from 'react';import {  CheckIcon,  ChevronIcon,  CloseIcon,  DoneIcon,  FileIcon,  PauseIcon,  PlayIcon,  RerunIcon,  SearchIcon,  SpinnerIcon,

/* Agent progress (agent-progress.tsx): a white stage with the card in its middle, or at night a   near-black one with the card a step lighter. The root's --accent is the colour of the work in   progress; data-status says where the run is, and data-live is set while its clock moves, which   is when the icon and the spinner animate.   Colours are the tokens below, each light-dark(light, dark): 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). */.root {  /* The colour of each kind of work, of a finished run and of the card at rest: the script sets     --accent to one of them. At night they are lighter, to read on the dark card. */  --read: #7a5af0;  --search: #4a5df0;  --think: #e0782a;  --write: #2d9467;  --review: #d93f5d;  --done: #2d9467;  --idle: #a1a1aa;  --accent: var(--idle);  /* The tick on the accent, the tinted pieces, the reading lines, and the query typed in. */  --accent-ink: #fff;  --tint: color-mix(in srgb, var(--accent) 11%, #fff);  --skeleton: color-mix(in srgb, var(--accent) 20%, #fff);

/* * The run: what the agent does, step by step, and where it stands at any moment of it. A run is * a list of steps, each of a kind (reading, searching, thinking, writing, reviewing) with its * colour, its status line and what its detail panel shows. Everything the card draws is worked * out from the time the run has been going: which step is in progress, how far into it, how many * tokens it has spent, and how much of the step's detail has come in. *//** What a step does. Each kind has its own colour, status line and detail panel. */export type StepKind = 'read' | 'search' | 'think' | 'write' | 'review';/** A search hit: a title and where it comes from. */export type SearchResult = { title: string; source: string };/** A piece of a reviewed sentence: text that stays, or a change (text removed, text added). */export type DiffPart = string | { removed: string; added: string };type StepBase = {  /** What the step does, as the list shows it. */  label: string;  /** How long it takes, in ms. */  ms: number;  /** The tokens it spends. */  tokens: number;

/* * The card's small icons, drawn on a 16 × 16 grid in the current colour. All are decorative: the * buttons and the steps carry their names in text. */type IconProps = { className?: string };const svg = {  viewBox: '0 0 16 16',  fill: 'none',  stroke: 'currentColor',  strokeLinecap: 'round',  strokeLinejoin: 'round',  'aria-hidden': true,} as const;export function CheckIcon({ className }: IconProps) {  return (    <svg {...svg} className={className} strokeWidth={2}>      <path d="m4.6 8.3 2.3 2.3 4.6-4.9" pathLength={1} />    </svg>  );}

'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;