{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"task-progress","type":"registry:component","title":"Task progress","description":"For work that takes minutes: phases, a live timer, stats, cancel, and the result when it’s done.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/task-progress.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AlertCircle, ArrowRight, CircleSlash, RotateCcw } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * TASK PROGRESS: work that takes minutes, not seconds\n *\n * running phases fill left to right; the current one sweeps;\n * the status line names the phase as it morphs from\n * one to the next; timer and stats roll; Cancel\n * done the last bar fills, a check draws itself, \"Finished\n * in 4m 12s\"; Cancel grows into \"Open report\"\n * error the failed phase fills red, the reason opens in,\n * \"Stopped at reading\"; the button becomes Retry\n * cancelled stopped by the user; the button folds away\n *\n * The button and the status line are one surface each: they\n * change shape and wording instead of being swapped. For deep\n * research, long builds and batch jobs. Tell people they can\n * leave; the card is what they come back to.\n * ───────────────────────────────────────────────────────── */\n\nexport type TaskProgressStatus = \"running\" | \"done\" | \"error\" | \"cancelled\";\n\nexport interface TaskStat {\n label: string;\n /** Numbers roll when they change. */\n value: React.ReactNode;\n}\n\nexport interface TaskProgressProps extends Omit, \"title\"> {\n title: string;\n status: TaskProgressStatus;\n /** The stages, e.g. [\"Searching\", \"Reading\", \"Writing\"]. */\n phases: string[];\n /** Index of the current phase. */\n phase: number;\n /** Start time (ms); shows a live timer. */\n startedAt?: number;\n /** Total time (ms), if you know it once finished. */\n duration?: number;\n stats?: TaskStat[];\n /** A line under the progress, e.g. \"You can close this tab. We'll keep going.\" */\n message?: string;\n onCancel?: () => void;\n onOpen?: () => void;\n openLabel?: string;\n errorText?: string;\n onRetry?: () => void;\n}\n\nconst MORPH = \"cubic-bezier(0.16,1,0.3,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\n// A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph.\nconst SHEEN =\n \"text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70\";\nconst TWO_DIGITS = { minimumIntegerDigits: 2 };\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** Icons trade places through a blur: the old one shrinks away as the new one grows in. */\nconst swap = (on: boolean, reduced: boolean): React.CSSProperties => ({\n opacity: on ? 1 : 0,\n transform: on ? \"none\" : \"scale(0.6)\",\n filter: on ? \"none\" : \"blur(3px)\",\n transition: reduced ? \"none\" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`,\n});\n\nfunction formatTime(ms: number) {\n const s = Math.max(0, Math.floor(ms / 1000));\n return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, \"0\")}s`;\n}\n\n/** A piece of a line that opens out of nothing and folds back into it. */\nfunction Reveal({ show, reduced, className = \"\", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n/** A block that opens to its height and folds back to nothing. */\nfunction Fold({ show, reduced, children }: { show: boolean; reduced: boolean; children: React.ReactNode }) {\n return (\n \n
{children}
\n \n );\n}\n\n/** Seconds that roll up as they pass; minutes slide open at the first minute. */\nfunction Elapsed({ ms, reduced }: { ms: number; reduced: boolean }) {\n const total = Math.max(0, Math.floor(ms / 1000));\n const minutes = Math.floor(total / 60);\n return (\n \n 0} reduced={reduced}>\n \n  \n \n \n \n );\n}\n\nfunction DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) {\n return (\n \n \n \n );\n}\n\nexport function TaskProgress({\n title,\n status,\n phases,\n phase,\n startedAt,\n duration,\n stats,\n message,\n onCancel,\n onOpen,\n openLabel = \"Open result\",\n errorText,\n onRetry,\n className = \"\",\n ...props\n}: TaskProgressProps) {\n const reduced = useReducedMotion();\n const running = status === \"running\";\n const [now, setNow] = React.useState(startedAt ?? 0);\n const [endedAt, setEndedAt] = React.useState(undefined);\n const cardRef = React.useRef(null);\n const actionRef = React.useRef(null);\n\n React.useEffect(() => {\n if (!running) {\n setEndedAt((prev) => prev ?? Date.now());\n return;\n }\n setEndedAt(undefined);\n if (startedAt === undefined) return;\n setNow(Date.now());\n const timer = window.setInterval(() => setNow(Date.now()), 1000);\n return () => window.clearInterval(timer);\n }, [running, startedAt]);\n\n const elapsed = duration ?? (startedAt === undefined ? undefined : (running ? now : (endedAt ?? now)) - startedAt);\n const current = Math.min(Math.max(phase, 0), phases.length - 1);\n\n // The one button: Cancel while it runs, Retry after a failure, the result once done.\n const action =\n running && onCancel\n ? { kind: \"cancel\", label: \"Cancel\", run: onCancel }\n : status === \"error\" && onRetry\n ? { kind: \"retry\", label: \"Retry\", run: onRetry }\n : status === \"done\" && onOpen\n ? { kind: \"open\", label: openLabel, run: onOpen }\n : null;\n const [lastAction, setLastAction] = React.useState(action);\n if (action && (action.kind !== lastAction?.kind || action.label !== lastAction.label)) setLastAction(action);\n const shown = action ?? lastAction;\n const primary = action?.kind === \"open\";\n\n // If the button folds away while focused (Cancel pressed), keep focus on the card instead of the page.\n React.useLayoutEffect(() => {\n if (!action && document.activeElement === actionRef.current) cardRef.current?.focus({ preventScroll: true });\n }, [action]);\n\n const statusLine = running ? phases[current] : status === \"done\" ? \"Finished\" : status === \"error\" ? `Stopped at ${phases[current].toLowerCase()}` : \"Cancelled\";\n const timeJoin = status === \"done\" ? \"in\" : \"after\";\n const showTime = (status === \"done\" || status === \"cancelled\") && elapsed !== undefined;\n const iconKey = status === \"running\" ? null : status;\n\n return (\n
\n
\n

{title}

\n {elapsed !== undefined && (\n \n \n \n )}\n
\n\n {/* Each phase fills from the left when it's finished; the live one sweeps. */}\n
\n {phases.map((p, i) => {\n const complete = status === \"done\" || i < current;\n const failed = status === \"error\" && i === current;\n const live = running && i === current;\n return (\n \n \n \n \n );\n })}\n
\n\n
\n {phases.map((p, i) => (\n \n {p}\n \n ))}\n
\n\n

\n {status === \"done\"\n ? `${title} finished${elapsed !== undefined ? ` in ${formatTime(elapsed)}` : \"\"}`\n : status === \"error\"\n ? `${title} failed. ${errorText ?? \"\"}`\n : status === \"cancelled\"\n ? `${title} cancelled`\n : `${phases[current]}`}\n

\n\n {stats && stats.length > 0 && (\n

\n {stats.map((s) => (\n \n {typeof s.value === \"number\" ? : s.value}\n {s.label}\n \n ))}\n

\n )}\n\n {message && (\n \n

{message}

\n \n )}\n \n

{errorText ?? \"Something went wrong partway through.\"}

\n \n\n
\n {/* One status line: it names the phase while it runs and becomes the outcome. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {statusLine}\n \n {elapsed !== undefined && (\n \n \n {timeJoin}\n  \n \n \n \n )}\n \n\n {shown && (\n \n \n action?.run()}\n className={`inline-flex h-8 items-center rounded-lg px-3 text-[12.5px] font-medium transition-[background-color,color,box-shadow,transform] duration-300 active:scale-[0.97] ${FOCUS} ${\n primary ? \"bg-primary text-primary-foreground hover:bg-primary/90\" : \"text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent\"\n }`}\n >\n \n \n \n {shown.label}\n \n \n \n \n \n \n )}\n
\n
\n );\n}\n"}],"css":{"@keyframes ui-scan":{"from":{"transform":"translateX(-100%)"},"to":{"transform":"translateX(250%)"}},"@keyframes ui-sheen":{"from":{"mask-position":"150% 0"},"to":{"mask-position":"-50% 0"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/task-progress"}