Status mark
An agent task status glyph that morphs from an idle ring to a progress arc, then draws a check or a cross.
QueuedPending
The glyph cycles on its own; a button holds a state while it is pressed again.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type ReactNode,9} from "react";10 11export type StatusMarkStatus =12 "pending" | "running" | "done" | "failed" | "cancelled";13 14export interface StatusMarkProps {15 status?: StatusMarkStatus;16 progress?: number;17 label?: ReactNode;18 color?: string;19 doneColor?: string;20 errorColor?: string;21 size?: number;22 strokeWidth?: number;23 dashes?: number;24 fontSize?: number;25 spinDuration?: number;26 arcLength?: number;27 drawDuration?: number;28 fillOpacity?: number;