50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3da9,// Hairline UI · task-progress · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { AlertCircle, ArrowRight, CircleSlash, RotateCcw } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * TASK PROGRESS: work that takes minutes, not seconds * * running phases fill left to right; the current one sweeps; * the status line names the phase as it morphs from * one to the next; timer and stats roll; Cancel * done the last bar fills, a check draws itself, "Finished * in 4m 12s"; Cancel grows into "Open report" * error the failed phase fills red, the reason opens in, * "Stopped at reading"; the button becomes Retry * cancelled stopped by the user; the button folds away * * The button and the status line are one surface each: they * change shape and wording instead of being swapped. For deep * research, long builds and batch jobs. Tell people they can * leave; the card is what they come back to. * ───────────────────────────────────────────────────────── */ export type TaskProgressStatus = "running" | "done" | "error" | "cancelled"; export interface TaskStat { label: string; /** Numbers roll when they change. */ value: React.ReactNode; } export interface TaskProgressProps extends Omit, "title"> { title: string; status: TaskProgressStatus; /** The stages, e.g. ["Searching", "Reading", "Writing"]. */ phases: string[]; /** Index of the current phase. */ phase: number; /** Start time (ms); shows a live timer. */ startedAt?: number; /** Total time (ms), if you know it once finished. */ duration?: number; stats?: TaskStat[]; /** A line under the progress, e.g. "You can close this tab. We'll keep going." */ message?: string; onCancel?: () => void; onOpen?: () => void; openLabel?: string; errorText?: string; onRetry?: () => void; } const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; // A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph. const SHEEN = "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"; const TWO_DIGITS = { minimumIntegerDigits: 2 }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); function formatTime(ms: number) { const s = Math.max(0, Math.floor(ms / 1000)); return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, "0")}s`; } /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } /** A block that opens to its height and folds back to nothing. */ function Fold({ show, reduced, children }: { show: boolean; reduced: boolean; children: React.ReactNode }) { return (

{children}

); } /** Seconds that roll up as they pass; minutes slide open at the first minute. */ function Elapsed({ ms, reduced }: { ms: number; reduced: boolean }) { const total = Math.max(0, Math.floor(ms / 1000)); const minutes = Math.floor(total / 60); return ( 0} reduced={reduced}> ); } function DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } export function TaskProgress({ title, status, phases, phase, startedAt, duration, stats, message, onCancel, onOpen, openLabel = "Open result", errorText, onRetry, className = "", ...props }: TaskProgressProps) { const reduced = useReducedMotion(); const running = status === "running"; const [now, setNow] = React.useState(startedAt ?? 0); const [endedAt, setEndedAt] = React.useState(undefined); const cardRef = React.useRef(null); const actionRef = React.useRef(null); React.useEffect(() => { if (!running) { setEndedAt((prev) => prev ?? Date.now()); return; } setEndedAt(undefined); if (startedAt === undefined) return; setNow(Date.now()); const timer = window.setInterval(() => setNow(Date.now()), 1000); return () => window.clearInterval(timer); }, [running, startedAt]); const elapsed = duration ?? (startedAt === undefined ? undefined : (running ? now : (endedAt ?? now)) - startedAt); const current = Math.min(Math.max(phase, 0), phases.length - 1); // The one button: Cancel while it runs, Retry after a failure, the result once done. const action = running && onCancel ? { kind: "cancel", label: "Cancel", run: onCancel } : status === "error" && onRetry ? { kind: "retry", label: "Retry", run: onRetry } : status === "done" && onOpen ? { kind: "open", label: openLabel, run: onOpen } : null; const [lastAction, setLastAction] = React.useState(action); if (action && (action.kind !== lastAction?.kind || action.label !== lastAction.label)) setLastAction(action); const shown = action ?? lastAction; const primary = action?.kind === "open"; // If the button folds away while focused (Cancel pressed), keep focus on the card instead of the page. React.useLayoutEffect(() => { if (!action && document.activeElement === actionRef.current) cardRef.current?.focus({ preventScroll: true }); }, [action]); const statusLine = running ? phases[current] : status === "done" ? "Finished" : status === "error" ? `Stopped at ${phases[current].toLowerCase()}` : "Cancelled"; const timeJoin = status === "done" ? "in" : "after"; const showTime = (status === "done" || status === "cancelled") && elapsed !== undefined; const iconKey = status === "running" ? null : status; return (

{title}

{elapsed !== undefined && ( )}

{/* Each phase fills from the left when it's finished; the live one sweeps. */}

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

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

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

)} {message && (

{message}

)}

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

{/* One status line: it names the phase while it runs and becomes the outcome. */} {shown && ( )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-scan {\n\tfrom {\n\t\ttransform: translateX(-100%);\n\t}\n\tto {\n\t\ttransform: translateX(250%);\n\t}\n}\n\n@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/task-progress.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]