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[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:T29ed,"use client"; import { forwardRef, useEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useFancyId } from "../../internals/use-id"; import { formatElapsed } from "../../internals/use-elapsed"; import { useInertAttribute } from "../../internals/dom/use-inert-attribute"; import { useSoundCue } from "../../sound/use-sound"; import type { ToolCallData } from "../../internals/ai-types"; import "./tool-call.css"; /** * Props for ToolCall */ export interface ToolCallProps { /** The invocation to render: name, status, and whatever payloads exist so far. */ call: ToolCallData; /** * Whether the payloads are expanded. Controlled when supplied — pair it with * `onToggle`, the React counterpart of the Svelte source's `bind:open`. Left * out until either the reader or a failure decides — see the open-behaviour * contract in the README. */ open?: boolean; /** Replaces the default request rendering. Receives `call.input`. */ input?: (value: unknown) => ReactNode; /** Replaces the default result rendering. Receives `call.output`. */ output?: (value: unknown) => ReactNode; /** Leading icon, replacing the default wrench. */ icon?: ReactNode; /** Called whenever the card opens or closes, by click or on its own. */ onToggle?: (open: boolean) => void; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } /** Spoken alongside the tool name, since the dot's colour says nothing out loud. */ const STATUS_LABELS = { pending: "Pending", running: "Running", done: "Completed", error: "Failed", cancelled: "Cancelled", } as const; /** Shown when a call reports failure without saying why. */ const FALLBACK_ERROR = "The tool call failed."; /** * The shared formatter floors to the second, which reads as "0s" for anything * quicker than that — and a tool call more often than not is. Sub-second work * is reported in milliseconds here; everything else defers to the shared * formatter, whose contract other callers depend on. */ function formatDuration(ms: number): string { if (Number.isFinite(ms) && ms >= 0 && ms < 1000) return `${Math.round(ms)}ms`; return formatElapsed(ms); } /** * Objects and arrays get pretty-printed JSON; primitives are rendered bare so * a string result reads as prose rather than as a quoted literal. * * The two things `JSON.stringify` refuses outright — a cycle and a bigint — * are what tool payloads are actually made of, and `String()` turns both into * `[object Object]`, which tells the reader nothing. So a refusal earns a * second attempt through a replacer that names them instead; `String` is left * for the payload that defeats even that, such as a `toJSON` that throws. */ function formatPayload(value: unknown): string { if (value === undefined) return ""; if (value === null || typeof value !== "object") return String(value); try { return JSON.stringify(value, null, 2) ?? String(value); } catch { try { // Tracking every object ever seen would call the second of two // siblings pointing at one value a cycle, which it is not. Only the // chain currently being descended counts. `this` is whatever object // owns the key being visited, so popping back to it before the check // unwinds the stack on the way out of a branch. const ancestors: unknown[] = []; const json = JSON.stringify( value, function (this: unknown, _key, entry: unknown) { if (typeof entry === "bigint") return `${entry}n`; if (entry !== null && typeof entry === "object") { while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) { ancestors.pop(); } if (ancestors.includes(entry)) return "[Circular]"; ancestors.push(entry); } return entry; }, 2 ); return json ?? String(value); } catch { return String(value); } } } /** * One tool invocation as a collapsible card: name, status dot, duration in the * header; request and result payloads behind a click. * * The root element arrives through the ref channel rather than a `ref` prop, * per PORTING.md — the Svelte source declares `ref = $bindable(null)`. */ export const ToolCall = forwardRef(function ToolCall( { call, open, input, output, icon, onToggle, className, sound = false }, ref ) { const uid = useFancyId(); const headerId = `${uid}-header`; const bodyId = `${uid}-body`; const requestId = `${uid}-request`; const resultId = `${uid}-result`; const playCue = useSoundCue(sound); // `open` stays undefined until something actually decides: `autoOpen` carries // the answer in the meantime, so a consumer that never touches the prop still // gets the automatic behaviour and one that controls it still owns the value. // Seeded from the initial status as well, because the effect that opens a // failed call never runs on the server: a call that already reports failure // would otherwise be rendered folded and only spring open at hydration. const [autoOpen, setAutoOpen] = useState(() => call.status === "error"); const userToggledRef = useRef(false); const isOpen = open ?? autoOpen; const inertRef = useInertAttribute(!isOpen); const status = call.status; const isError = status === "error"; const errorText = isError ? (call.error ?? FALLBACK_ERROR) : ""; const duration = call.durationMs === undefined ? "" : formatDuration(call.durationMs); // A render prop counts as content on its own: a caller who renders the // payload themselves may well have nothing on `call` for us to look at. const hasRequest = input !== undefined || call.input !== undefined; const hasOutput = output !== undefined || call.output !== undefined; const hasResult = hasOutput || errorText !== ""; const requestText = hasRequest ? formatPayload(call.input) : ""; const resultText = hasOutput ? formatPayload(call.output) : ""; function commit(next: boolean) { if ((open ?? autoOpen) === next) return; setAutoOpen(next); onToggle?.(next); } function toggle() { // From here on the reader owns the card: a later failure will not pop it // open again behind their back. userToggledRef.current = true; const next = !isOpen; // Only this click plays a cue — the error auto-open effect and the // initial `autoOpen` seed both bypass `commit()` (or fold through it // silently) and must stay silent, so the play sits here rather than in // `commit()`. playCue(next ? "open" : "close"); commit(next); } // A failure is the one thing worth reading without being asked, so it expands // itself — unless the reader has already taken over. Everything but the // status is read through refs so that taking over, or the card opening some // other way, does not itself re-run this. const isOpenRef = useRef(isOpen); isOpenRef.current = isOpen; const onToggleRef = useRef(onToggle); onToggleRef.current = onToggle; useEffect(() => { if (call.status !== "error" || userToggledRef.current) return; if (isOpenRef.current) return; setAutoOpen(true); onToggleRef.current?.(true); }, [call.status]); return (

{hasRequest ? (

Request

{input ? input(call.input) :

{requestText}

}

) : null} {hasResult ? (

Result

{errorText ?

{errorText}

: null} {output ? ( output(call.output) ) : hasOutput ? (

{resultText}

) : null}

) : null} {!hasRequest && !hasResult ? (

Nothing recorded yet.

) : null}

); }); 53:Te15,/* * Every status colour is read at the point of use through two hooks: the * component's own `--ft-toolcall-*`, then the `--ft-status-*` vocabulary every * component in this family shares, then the literal. Setting either anywhere up * the tree retints the state without having to win a specificity fight against * these scoped rules — the shared one recolours the whole family at once. */ .ft-toolcall-dot { position: relative; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; } /* Hollow: nothing has happened yet, or nothing ever will. The two share a hue and stay apart on the ring's weight, plus the struck-through name below. */ .ft-toolcall-dot.ft-status-pending { box-shadow: inset 0 0 0 1.5px var( --ft-toolcall-pending, color-mix( in oklab, var(--ft-status-pending, light-dark(oklch(0.5 0.02 260), oklch(0.72 0.02 260))) 55%, transparent ) ); } .ft-toolcall-dot.ft-status-cancelled { box-shadow: inset 0 0 0 1.5px var( --ft-toolcall-cancelled, color-mix( in oklab, var(--ft-status-cancelled, light-dark(oklch(0.5 0.02 260), oklch(0.72 0.02 260))) 40%, transparent ) ); } .ft-toolcall-dot.ft-status-running { background: var( --ft-toolcall-running, var(--ft-status-running, light-dark(oklch(0.5 0.18 265), oklch(0.72 0.15 265))) ); } .ft-toolcall-dot.ft-status-done { background: var( --ft-toolcall-done, var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145))) ); } .ft-toolcall-dot.ft-status-error { background: var( --ft-toolcall-error, var(--ft-status-error, light-dark(oklch(0.5 0.19 25), oklch(0.7 0.18 25))) ); } .ft-toolcall-name.ft-struck { text-decoration: line-through; opacity: 0.7; } .ft-toolcall-error-text { color: var( --ft-toolcall-error, var(--ft-status-error, light-dark(oklch(0.5 0.19 25), oklch(0.7 0.18 25))) ); font-size: 0.75rem; line-height: 1.5; } .ft-toolcall-payload { max-height: var(--ft-toolcall-max-height, 16rem); overflow-y: auto; border-radius: 0.375rem; background: var(--ft-toolcall-payload-bg, color-mix(in oklab, currentColor 6%, transparent)); padding: 0.5rem 0.625rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; line-height: 1.5; /* Wrapping rather than scrolling sideways: a long URL in a payload should not put the whole card on a horizontal rail. */ white-space: pre-wrap; overflow-wrap: anywhere; } /* * 0fr → 1fr on a one-row grid is the only way to transition "auto" height * without measuring anything. The inner wrapper does the clipping. */ .ft-toolcall-body { display: grid; grid-template-rows: 0fr; } .ft-toolcall-body.ft-open { grid-template-rows: 1fr; } .ft-toolcall-chevron.ft-open { transform: rotate(90deg); } /* * Everything that moves lives behind the query, so reduced motion gets the * same states with nothing to shorten or fall back from — a running call is * still a filled accent dot, it just stops breathing. */ @media (prefers-reduced-motion: no-preference) { .ft-toolcall-body { transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1); } .ft-toolcall-chevron { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); } .ft-toolcall-dot.ft-status-running::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ft-toolcall-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; } } @keyframes ft-toolcall-ping { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } } 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":[null,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/tool-call/ToolCall.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/tool-call/ToolCall.tsx"},{"path":"react/src/components/tool-call/index.ts","content":"\"use client\";\n\nexport { ToolCall } from \"./ToolCall\";\nexport type { ToolCallProps } from \"./ToolCall\";\n","type":"registry:ui","target":"@ui/fancy/components/tool-call/index.ts"},{"path":"react/src/components/tool-call/tool-call.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/tool-call/tool-call.css"}],"className":"h-[70svh] min-h-80"}]]}]