{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"task-log","type":"registry:component","title":"Task log","description":"What the agent did, task by task, as it does it: steps arrive on a hairline trail, files sit in chips, titles turn past tense.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/task-log.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AlertCircle, ChevronDown, FileCode2, RotateCcw } from \"lucide-react\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * TASK LOG: what the agent did, task by task, as it does it\n *\n * running the task's title carries a sweep of light; its\n * steps arrive one at a time on a hairline trail,\n * each opening to its height and rising out of a\n * light blur, the newest one shimmering\n * done the title morphs into the past tense (\"Finding\n * project files\" becomes \"Found project files\") and\n * the sweep stops; the steps can fold away\n * error the title turns red behind an alert, keeping the\n * steps that ran\n * rerun once every task is settled, \"Run again\" folds in\n *\n * Files in a step sit in small chips; counts and outcomes trail\n * after in a quieter grey. Feed it the tasks you have so far.\n * ───────────────────────────────────────────────────────── */\n\nexport type TaskLogStatus = \"running\" | \"done\" | \"error\";\n\nexport interface TaskLogStep {\n id: string;\n /** What happened, e.g. \"Read\" or \"Searching \\\"app/page.tsx\\\"\". */\n text: string;\n /** A file it touched, shown as a chip after the text. */\n file?: string;\n /** A quieter outcome after it, e.g. \"0 errors\". */\n detail?: string;\n}\n\nexport interface TaskLogTask {\n id: string;\n /** While it runs, e.g. \"Finding project files\". */\n title: string;\n /** Once it's done, e.g. \"Found project files\". Defaults to title. */\n doneTitle?: string;\n icon?: React.ReactNode;\n status: TaskLogStatus;\n steps: TaskLogStep[];\n}\n\nexport interface TaskLogProps extends React.HTMLAttributes {\n tasks: TaskLogTask[];\n /** Shows \"Run again\" once every task is settled. */\n onRerun?: () => void;\n rerunLabel?: string;\n}\n\nconst EASE = \"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 moving mask, so it also 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]\";\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/** Opens to its height and rises out of a blur the first time it appears (not when the log first renders). */\nfunction Arrive({ animate, reduced, children }: { animate: boolean; reduced: boolean; children: React.ReactNode }) {\n const [shown, setShown] = React.useState(!animate || reduced);\n React.useEffect(() => {\n if (shown) return;\n let inner = 0;\n const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(() => setShown(true))));\n return () => {\n cancelAnimationFrame(outer);\n cancelAnimationFrame(inner);\n };\n }, [shown]);\n return (\n \n
{children}
\n \n );\n}\n\nfunction FileChip({ name }: { name: string }) {\n return (\n \n \n {name}\n \n );\n}\n\nfunction Task({ task, animate, mounted, reduced }: { task: TaskLogTask; animate: boolean; mounted: boolean; reduced: boolean }) {\n const [open, setOpen] = React.useState(true);\n const listId = React.useId();\n const running = task.status === \"running\";\n const failed = task.status === \"error\";\n const title = running ? task.title : task.doneTitle ?? task.title;\n return (\n
  • \n \n setOpen((o) => !o)}\n className={`group flex min-h-7 w-full items-center gap-2 rounded-md py-0.5 text-left text-[13px] ${FOCUS}`}\n >\n \n {failed ? : task.icon}\n \n \n {title}\n \n \n \n \n \n
      \n {task.steps.map((step, i) => {\n const last = i === task.steps.length - 1;\n const live = running && last;\n return (\n
    • \n \n {/* The trail: a hairline down from the task, branching to each step, the last one turning the corner. */}\n \n \n
      \n {step.text}\n {step.file && }\n {step.detail && {step.detail}}\n
      \n       \n
      • \n );\n })}\n
    \n \n
    • \n );\n}\n\nexport function TaskLog({ tasks, onRerun, rerunLabel = \"Run again\", className = \"\", ...props }: TaskLogProps) {\n const reduced = useReducedMotion();\n // Tasks and steps that exist on the first render just sit there; later ones arrive.\n const [mounted, setMounted] = React.useState(false);\n React.useEffect(() => setMounted(true), []);\n const settled = tasks.length > 0 && tasks.every((t) => t.status !== \"running\");\n const live = tasks.find((t) => t.status === \"running\");\n const lastStep = live?.steps[live.steps.length - 1];\n\n return (\n
    \n
      \n {tasks.map((t) => (\n \n ))}\n
    \n\n {onRerun && (\n \n
    \n \n \n {rerunLabel}\n \n
    \n
    \n )}\n\n

    \n {live ? `${live.title}${lastStep ? `: ${lastStep.text}${lastStep.file ? ` ${lastStep.file}` : \"\"}` : \"\"}` : settled ? \"All tasks finished\" : \"\"}\n

    \n \n );\n}\n"}],"css":{"@keyframes ui-sheen":{"from":{"mask-position":"150% 0"},"to":{"mask-position":"-50% 0"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/task-log"}