Call chip
A chip that reports a running command, its elapsed time, and its outcome, with a live announcement for screen readers.
Job chip
The chip reports a running job, its elapsed time, and its outcome. The live region speaks the state once, not on every tick.
The suite has not run yet.
Implementation
1"use client";2 3import { useEffect, useRef, type HTMLAttributes } from "react";4import { Check, RotateCcw, Terminal } from "lucide-react";5 6export type CallChipStatus = "idle" | "running" | "done" | "error";7 8export type CallChipProps = Omit<9 HTMLAttributes<HTMLSpanElement>,10 "children" | "onChange"11> & {12 /** The command or tool name, for example "npm test". */13 name: string;14 /** The argument or subcommand shown after the name. */15 argument?: string;16 /** The state of the job. */17 status?: CallChipStatus;18 /** Expected duration in milliseconds; the fill uses it as its scale. */19 expectedMs?: number;20 /** Whether the elapsed time is shown. */21 showTimer?: boolean;22 /** Called when the retry control is pressed in the error state. */23 onRetry?: () => void;24 /** Additional class name for the root. */25 className?: string;26};27 28const TICK_MS = 100;