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:T5127,// Hairline UI · thinking-trace · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { AlertCircle, ChevronDown, CircleSlash, Globe, Search, Sparkle, X } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * THINKING TRACE: an expandable record of what an agent did * * steps a checklist: spinner on the live step, which blurs * into a check that draws itself when it's done * reasoning sentences of reasoning * search the query, then the sources read * tools tool calls: reads, edits with +/− counts, commands * * The header never swaps: "Thinking 6s" morphs into "Thought for * 6s" (the seconds roll as they pass), "Searching the web" into * "Searched the web", the sparkle into an alert on error. The * list eases taller as steps arrive. * * Drive it from your stream: pass the steps you have so far and a * status. It opens while running, folds away once done (stays open * on error so the failure is visible), and can always be reopened. * ───────────────────────────────────────────────────────── */ export type ThinkingVariant = "steps" | "reasoning" | "search" | "tools"; export type ThinkingStatus = "running" | "done" | "error" | "cancelled"; export type ThinkingStepStatus = "pending" | "running" | "done" | "error"; export interface ThinkingStep { /** A step, a sentence of reasoning, a source title or a tool name. */ label: string; /** Supporting text: a count, a domain or a file path. */ detail?: string; /** Makes the row a link, e.g. a search source. */ href?: string; /** Replaces the row's default mark, e.g. a site favicon. */ icon?: React.ReactNode; /** Defaults to "running" for the last step while running, "done" otherwise. */ status?: ThinkingStepStatus; /** Lines added and removed, for edit tool calls. */ additions?: number; deletions?: number; } export interface ThinkingTraceProps extends Omit, "title"> { steps: ThinkingStep[]; variant?: ThinkingVariant; status?: ThinkingStatus; /** Header while running. Defaults per variant, e.g. "Searching the web". */ label?: string; /** Header once settled. Defaults to e.g. "Thought for 6s" when timing is known. */ doneLabel?: string; /** When the work started (ms). Shows a live timer and times the done label. */ startedAt?: number; /** How long it took (ms), if your stream reports it. */ duration?: number; /** The search query, shown above the sources. */ query?: string; /** Items not listed, shown as "+N more". */ more?: number; /** Replaces the sparkle in the header. */ icon?: React.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Makes rows without an href clickable, e.g. to show a tool's output. */ onStepClick?: (step: ThinkingStep, index: number) => void; } const RUNNING_LABEL: Record = { steps: "Thinking", reasoning: "Thinking", search: "Searching the web", tools: "Running tools", }; const SOURCE_TONES = ["bg-blue-600", "bg-orange-500", "bg-emerald-600", "bg-violet-600"]; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const ROW = "flex min-h-7 w-full gap-2 rounded-md px-1.5 py-0.5 text-left"; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; // 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}`, }); /** 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} ); } /** 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.round(ms / 1000)); const minutes = Math.floor(total / 60); return ( 0} reduced={reduced}> ); } function StepCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } function toneFor(key: string) { let hash = 0; for (let i = 0; i < key.length; i++) hash = (hash * 31 + key.charCodeAt(i)) | 0; return SOURCE_TONES[Math.abs(hash) % SOURCE_TONES.length]; } function formatDuration(ms: number) { const s = Math.max(0, Math.round(ms / 1000)); return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`; } /** Spins only while it's showing, so a faded-out spinner never keeps the page busy. */ function Spinner({ spinning = true }: { spinning?: boolean }) { return ( ); } export function ThinkingTrace({ steps, variant = "steps", status = "done", label, doneLabel, startedAt, duration, query, more, icon, open, defaultOpen, onOpenChange, onStepClick, className = "", ...props }: ThinkingTraceProps) { const reduced = useReducedMotion(); const running = status === "running"; const [autoOpen, setAutoOpen] = React.useState(running); const [userOpen, setUserOpen] = React.useState(defaultOpen); const expanded = open ?? userOpen ?? autoOpen; const panelId = React.useId(); // Rows present on first render stagger in; rows streamed in later appear as they arrive. const initialCount = React.useRef(steps.length); const listRef = React.useRef(null); const [listHeight, setListHeight] = React.useState(null); // The panel takes the height of its list, so each new step eases it taller instead of jumping. React.useLayoutEffect(() => { const el = listRef.current; if (!el) return; const measure = () => setListHeight((h) => (h === el.offsetHeight ? h : el.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, []); // Live timer while running; remember when it settled so the done label can say how long it took. const [now, setNow] = React.useState(startedAt ?? 0); const [endedAt, setEndedAt] = React.useState(undefined); 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]); // Open while working; fold away after it settles, except on error so the failure stays visible. React.useEffect(() => { if (running || status === "error") { setAutoOpen(true); return; } const timer = window.setTimeout(() => setAutoOpen(false), 900); return () => window.clearTimeout(timer); }, [running, status]); const toggle = () => { const next = !expanded; if (open === undefined) setUserOpen(next); onOpenChange?.(next); }; const took = duration ?? (startedAt !== undefined && endedAt !== undefined ? endedAt - startedAt : undefined); // "Thought for" keeps the timer beside it, so the seconds that ran become the answer. const timed = status === "done" && !doneLabel && (variant === "steps" || variant === "reasoning") && took !== undefined; const settledLabel = status === "error" ? "Couldn’t finish" : status === "cancelled" ? "Stopped" : variant === "search" ? "Searched the web" : variant === "tools" ? `Ran ${steps.length} ${steps.length === 1 ? "tool" : "tools"}` : timed ? "Thought for" : "Thought it through"; const text = running ? (label ?? RUNNING_LABEL[variant]) : (doneLabel ?? settledLabel); const showTime = (running && startedAt !== undefined) || timed; const time = running ? now - (startedAt ?? now) : (took ?? 0); const spoken = running ? text : timed ? `${text} ${formatDuration(time)}` : text; const headerIcons: Record<"sparkle" | "error" | "cancelled", React.ReactNode> = { sparkle: , error: , cancelled: , }; const headerKey = status === "error" ? "error" : status === "cancelled" ? "cancelled" : "sparkle"; return (

{/* Outside the button, so its name stays its label. Never the ticking timer. */} {spoken}

) : variant === "search" ? ( step.icon ? ( ) : ( ) ) : null; const trailing = variant === "search" || variant === "tools" ? ( Failed ) : null; const content = ( <> {mark} {variant === "tools" ? ( <> {step.label} {step.detail && {step.detail}} ) : ( <> {step.label} {step.detail && {step.detail}} )} {step.additions !== undefined && ( +{step.additions} −{step.deletions ?? 0} )} {trailing} ); const delay = i < initialCount.current ? i * 90 : 0; return (

{step.href ? ( {content} ) : onStepClick ? ( ) : (

{content}

)}

); })} {more ? (

+{more} more

) : null}

); } 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-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}\n\n@keyframes ui-fade-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/thinking-trace.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]