4e: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"] 4f: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"] 50: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"] 51: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"] 52:T36c2,// Hairline UI · tool-call · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { AlertCircle, Ban, ChevronDown, RotateCcw, Wrench } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * TOOL CALL: one tool invocation, from arguments to result * * preparing the model is still writing the arguments; the * panel eases taller as each one arrives * running a spinner opens in and the label morphs to * "Running" * done the spinner blurs into a check that draws itself * and the run time rolls up from zero; the output * rises in as the panel eases to fit it * error the label morphs to "Failed" in red, with the * message and a retry * denied the user said no * * One status pill throughout: its icon slot opens and closes, * icons swap through a blur and the label morphs, so it never * swaps out. Arguments render as readable fields; nested * values as JSON. * Pass renderOutput to show a result your own way. * ───────────────────────────────────────────────────────── */ export type ToolCallStatus = "preparing" | "running" | "done" | "error" | "denied"; export interface ToolCallProps extends Omit, "title"> { /** The tool's name as the model calls it, e.g. "search_flights". */ name: string; /** A human label, e.g. "Search flights". */ title?: string; status: ToolCallStatus; /** Arguments, possibly partial while preparing. */ input?: unknown; /** The result, once done. */ output?: unknown; /** Render the result yourself, e.g. as a small card. */ renderOutput?: (output: unknown) => React.ReactNode; errorText?: string; onRetry?: () => void; /** How long it ran (ms). */ duration?: number; icon?: React.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; 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 LABELS: Record = { preparing: "Preparing", running: "Running", done: "Done", error: "Failed", denied: "Denied" }; 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 DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) { return ( ); } /** The run time, in the unit that reads best; it rolls up from zero when the call has just finished. */ function Duration({ ms, rollIn }: { ms: number; rollIn: boolean }) { const from = rollIn ? 0 : undefined; if (ms < 1000) return ; if (ms < 60000) return ; return ( <> ); } const ONE_DECIMAL = { minimumFractionDigits: 1, maximumFractionDigits: 1 }; function isPlainObject(value: unknown): value is Record { return typeof value === "object" && value !== null && !Array.isArray(value); } function Value({ value }: { value: unknown }) { if (typeof value === "string") return {value}; if (typeof value === "number" || typeof value === "boolean" || value === null) return {String(value)}; return {JSON.stringify(value)}; } function Fields({ value }: { value: unknown }) { if (isPlainObject(value)) { const entries = Object.entries(value); if (entries.length === 0) return

No arguments

; return (

{key}

); } if (typeof value === "string") return

{value}

; return (

      {JSON.stringify(value, null, 2)}

); } function Label({ children }: { children: React.ReactNode }) { return

{children}

; } export function ToolCall({ name, title, status, input, output, renderOutput, errorText, onRetry, duration, icon, open, defaultOpen = false, onOpenChange, className = "", ...props }: ToolCallProps) { const reduced = useReducedMotion(); const [ownOpen, setOwnOpen] = React.useState(defaultOpen); const [errorSeen, setErrorSeen] = React.useState(false); const panelId = React.useId(); const bodyRef = React.useRef(null); const [bodyHeight, setBodyHeight] = React.useState(null); // Each time it finishes while you watch, the run time rolls up from zero (a finished call in history just sits). const [prevStatus, setPrevStatus] = React.useState(status); const [finishes, setFinishes] = React.useState(0); if (prevStatus !== status) { setPrevStatus(status); if (status === "done") setFinishes((n) => n + 1); } // The panel takes the height of what's in it, so arguments and output arriving ease it taller instead of jumping. React.useLayoutEffect(() => { const el = bodyRef.current; if (!el) return; const measure = () => setBodyHeight((h) => (h === el.offsetHeight ? h : el.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, []); // Failures open themselves once, so the reason is visible without a click. React.useEffect(() => { if (status === "error" && !errorSeen) { setErrorSeen(true); if (open === undefined) setOwnOpen(true); } }, [status, errorSeen, open]); const expanded = open ?? ownOpen; const toggle = () => { const next = !expanded; if (open === undefined) setOwnOpen(next); onOpenChange?.(next); }; const showTime = status === "done" && duration !== undefined; const icons: Partial> = { // Spins only while running, so a hidden spinner never keeps the page busy. running: ( ), done: ( ), error: , denied: , }; const badge = ( {showTime ? "" : LABELS[status]} {duration !== undefined && ( 0 && !reduced} /> )} ); return (

{input !== undefined && (

Input

)} {status === "done" && output !== undefined && (

Output {renderOutput ? renderOutput(output) : }

)} {status === "error" && (

{errorText ?? "The tool failed."}

{onRetry && ( )}

)} {status === "denied" &&

You declined this action, so it didn’t run.

}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L4f",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":["$","$L50",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}"}]}]]}]]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/tool-call.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]