Tool call row

Once per app, add the registry to components.json:

{
  "registries": {
    "@pixilui": "https://pixilui.com/r/{name}.json"
  }
}

Or install from the URL, no namespace needed: npx shadcn@latest add https://pixilui.com/r/tool-call-row.json

1. 1

   Install the npm packages.

   TerminalCopy

   npm install motion clsx tailwind-merge

2. 2

   Add the items it depends on, the same way.

   • Foundation
   • Button
3. 3

   Copy each file to the path shown.

   components/pixilui/tool-call-row.tsxCopy

   "use client";
   
   import {
     Children,
     forwardRef,
     isValidElement,
     useCallback,
     useEffect,
     useId,
     useRef,
     useState,
     useSyncExternalStore,
     type ComponentPropsWithoutRef,
     type KeyboardEvent,
     type ReactElement,
     type ReactNode,
   } from "react";
   import { AnimatePresence, motion, useReducedMotion } from "motion/react";
   import { cn } from "./lib/utils";
   import { useMorphSize } from "./lib/use-morph-size";
   import { motionTokens, reducedTransition } from "./motion-tokens";
   import { Button } from "./button";
   
   const noSubscription = () => () => {};
   
   /**
    * useReducedMotion, held at false until hydration finishes. The server cannot know the
    * preference, so reading it on the first client render would change the markup and break
    * hydration; the reduced branch takes over on the next render instead.
    */
   function useReducedMotionAfterHydration() {
     const hydrated = useSyncExternalStore(noSubscription, () => true, () => false);
     const reduced = useReducedMotion();
     return hydrated && (reduced ?? false);
   }
   
   export type ToolCallRowStatus = "running" | "done" | "error";
   
   /** A JSON value: what tools take and return. Strings render as text, everything else as formatted JSON. */
   export type ToolCallRowValue = string | number | boolean | null | ToolCallRowValue[] | { [key: string]: ToolCallRowValue };
   
   export type ToolCallRowLabels = {
     input: string;
     output: string;
     copy: string;
     copied: string;
     retry: string;
     retrying: string;
     failed: string;
     running: string;
   };
   
   const defaultLabels: ToolCallRowLabels = {
     input: "Input",
     output: "Output",
     copy: "Copy",
     copied: "Copied",
     retry: "Retry",
     retrying: "Retrying",
     failed: "Failed",
     running: "Running",
   };
   
   export type ToolCallRowProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
     /** The tool, as its code name: "zendesk.search_tickets". Set in mono. */
     name: string;
     /** What the call did, in plain words and past tense once done: "Searched 14 tickets". */
     summary?: ReactNode;
     /** Running shows a thin indeterminate bar; error shows the message and Retry. */
     status: ToolCallRowStatus;
     /** The tool's mark, shown in a small tile. */
     icon?: ReactNode;
     /** How long the call took (ms). Shown once it finishes. */
     durationMs?: number;
     /** When the call started (epoch ms). Drives a live timer while running. */
     startedAt?: number;
     /** What the agent sent. Objects are formatted as JSON. */
     input?: ToolCallRowValue;
     /** What the tool returned. Objects are formatted as JSON. */
     output?: ToolCallRowValue;
     /** Why it failed, in a sentence. Shown under the summary on error. */
     error?: ReactNode;
     /** Controlled: whether the input and output are unfolded. */
     expanded?: boolean;
     /** Starting fold when uncontrolled. */
     defaultExpanded?: boolean;
     /** Called when the person folds or unfolds the row. */
     onExpandedChange?: (expanded: boolean) => void;
     /** Shows Retry on error. Return a promise and the button shows its own pending state. */
     onRetry?: () => void | Promise<void>;
     /** Copy overrides, for translation. */
     labels?: Partial<ToolCallRowLabels>;
   };
   
   /** One pass of the indeterminate bar: 1.44s, linear. */
   const SWEEP = motionTokens.duration.considered * 3;
   const TICK_MS = 250;
   const COPIED_MS = 1600;
   
   /** "820ms", "1.4s", "1m 04s". */
   function formatDuration(ms: number) {
     if (ms < 1000) return `${Math.round(ms)}ms`;
     if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
     const s = Math.round(ms / 1000);
     return `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, "0")}s`;
   }
   
   function formatLive(ms: number) {
     const s = Math.floor(ms / 1000);
     return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${String(s % 60).padStart(2, "0")}s`;
   }
   
   function useElapsed(startedAt: number | undefined, running: boolean) {
     const [now, setNow] = useState<number | null>(null);
     useEffect(() => {
       if (startedAt === undefined || !running) return;
       const tick = () => setNow(Date.now());
       tick();
       const id = setInterval(tick, TICK_MS);
       return () => clearInterval(id);
     }, [startedAt, running]);
     return startedAt === undefined || now === null ? null : Math.max(0, now - startedAt);
   }
   
   /** Digits keyed by place that roll up as the time grows. */
   function Ticker({ value, reduced }: { value: string; reduced: boolean }) {
     const chars = value.split("");
     return (
       <span role="timer" aria-label={value} className="numeric inline-flex">
         {chars.map((char, index) => {
           const place = chars.length - index;
           if (reduced || !/\d/.test(char)) {
             return (
               <span key={place} aria-hidden="true">
                 {char}
               </span>
             );
           }
           return (
             <span key={place} aria-hidden="true" className="relative inline-flex h-[1lh] overflow-hidden">
               <AnimatePresence initial={false} mode="popLayout">
                 <motion.span key={char} initial={{ y: "100%" }} animate={{ y: 0 }} exit={{ y: "-100%" }} transition={motionTokens.spring.snappy}>
                   {char}
                 </motion.span>
               </AnimatePresence>
             </span>
           );
         })}
       </span>
     );
   }
   
   /** A thin bar with a segment sliding across on linear easing. Still under reduced motion. */
   function IndeterminateBar({ reduced, className }: { reduced: boolean; className?: string }) {
     return (
       <span aria-hidden="true" data-slot="tool-call-row-progress" className={cn("pointer-events-none absolute h-0.5 overflow-hidden rounded-pill bg-border-subtle", className)}>
         {reduced ? null : (
           <motion.span
             className="absolute inset-y-0 left-0 w-1/3 rounded-pill bg-foreground/45"
             initial={{ x: "-100%" }}
             animate={{ x: "300%" }}
             transition={{ duration: SWEEP, ease: motionTokens.ease.linear, repeat: Infinity }}
           />
         )}
       </span>
     );
   }
   
   function Chevron({ open }: { open: boolean }) {
     return (
       <svg
         viewBox="0 0 12 12"
         fill="none"
         aria-hidden="true"
         className={cn("size-3 shrink-0 text-muted transition-transform duration-fast ease-swap motion-reduce:transition-none", open && "rotate-90")}
       >
         <path d="M4.5 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
     );
   }
   
   const JSON_TOKEN = /("(?:\\.|[^"\\])*")(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
   
   /** Formatted JSON with keys a step quieter than values. Plain strings stay as written. */
   function Payload({ value }: { value: ToolCallRowValue }) {
     if (typeof value === "string") return <>{value}</>;
     const text = JSON.stringify(value, null, 2);
     const parts: ReactNode[] = [];
     let last = 0;
     for (const match of text.matchAll(JSON_TOKEN)) {
       const index = match.index!;
       if (index > last) parts.push(text.slice(last, index));
       if (match[2] !== undefined) {
         parts.push(
           <span key={index} className="text-secondary">
             {match[1]}
           </span>,
           match[2],
         );
       } else {
         parts.push(
           <span key={index} className="text-foreground">
             {match[0]}
           </span>,
         );
       }
       last = index + match[0].length;
     }
     parts.push(text.slice(last));
     return <>{parts}</>;
   }
   
   function payloadText(value: ToolCallRowValue) {
     return typeof value === "string" ? value : JSON.stringify(value, null, 2);
   }
   
   function PayloadBlock({ label, value, labels, reduced }: { label: string; value: ToolCallRowValue; labels: ToolCallRowLabels; reduced: boolean }) {
     const [copied, setCopied] = useState(false);
     const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
     useEffect(() => () => {
       if (timer.current) clearTimeout(timer.current);
     }, []);
   
     const copy = async () => {
       try {
         await navigator.clipboard.writeText(payloadText(value));
         setCopied(true);
         if (timer.current) clearTimeout(timer.current);
         timer.current = setTimeout(() => setCopied(false), COPIED_MS);
       } catch {
         // Clipboard blocked (insecure context, denied permission): nothing to undo.
       }
     };
   
     const swap = reduced
       ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: reducedTransition }
       : {
           initial: { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` },
           animate: { opacity: 1, filter: "blur(0px)" },
           exit: { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` },
           transition: { duration: motionTokens.duration.quick, ease: motionTokens.ease.swap },
         };
   
     return (
       <div className="flex min-w-0 flex-col gap-1.5">
         <div className="flex items-center justify-between gap-2">
           <span className="text-12 text-muted">{label}</span>
           <button
             type="button"
             onClick={() => void copy()}
             aria-label={copied ? `${label} ${labels.copied.toLowerCase()}` : `${labels.copy} ${label.toLowerCase()}`}
             className="relative inline-flex h-6 items-center rounded-pill px-2 text-12 text-muted outline-none transition-colors duration-instant ease-swap hover-fine:bg-surface-muted hover-fine:text-foreground focus-visible:focus-ring"
           >
             <AnimatePresence initial={false} mode="popLayout">
               <motion.span key={copied ? "copied" : "copy"} className="inline-flex items-center gap-1" {...swap}>
                 {copied ? (
                   <svg viewBox="0 0 12 12" fill="none" aria-hidden="true" className="size-3">
                     <path d="M2.5 6.25l2.25 2.25 4.75-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                 ) : null}
                 {copied ? labels.copied : labels.copy}
               </motion.span>
             </AnimatePresence>
           </button>
         </div>
         <pre
           tabIndex={0}
           aria-label={label}
           className="max-h-48 min-w-0 overflow-auto whitespace-pre-wrap break-words rounded-control bg-surface-muted px-3.5 py-3 font-mono text-12 text-muted outline-none focus-visible:focus-ring"
         >
           <Payload value={value} />
         </pre>
       </div>
     );
   }
   
   export const ToolCallRow = forwardRef<HTMLDivElement, ToolCallRowProps>(function ToolCallRow(
     {
       name,
       summary,
       status,
       icon,
       durationMs,
       startedAt,
       input,
       output,
       error,
       expanded: expandedProp,
       defaultExpanded = false,
       onExpandedChange,
       onRetry,
       labels: labelsProp,
       className,
       ...rest
     },
     forwardedRef,
   ) {
     const labels = { ...defaultLabels, ...labelsProp };
     const reduced = useReducedMotionAfterHydration();
     const foldId = useId();
     const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
     const [retrying, setRetrying] = useState(false);
     const expandable = input !== undefined || output !== undefined;
     const open = (expandedProp ?? innerExpanded) && expandable;
     const live = useElapsed(startedAt, status === "running");
   
     const { containerRef, measureRef } = useMorphSize<HTMLDivElement, HTMLDivElement>("height", `${open}:${status}`);
     const setRef = useCallback(
       (node: HTMLDivElement | null) => {
         containerRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
       [forwardedRef, containerRef],
     );
   
     const toggle = () => {
       const next = !open;
       if (expandedProp === undefined) setInnerExpanded(next);
       onExpandedChange?.(next);
     };
   
     const retry = async () => {
       if (!onRetry || retrying) return;
       setRetrying(true);
       try {
         await onRetry();
       } finally {
         setRetrying(false);
       }
     };
   
     const time =
       status === "running" ? (
         live !== null ? (
           <Ticker value={formatLive(live)} reduced={reduced} />
         ) : null
       ) : status === "done" && durationMs !== undefined ? (
         <span className="numeric">{formatDuration(durationMs)}</span>
       ) : null;
   
     const headerContent = (
       <>
         <span className="grid size-7 shrink-0 place-items-center rounded-control bg-surface-muted text-foreground [&_svg]:size-3.5">{icon}</span>
         <span className="flex min-w-0 flex-1 flex-col">
           <span className="flex min-w-0 items-baseline gap-2">
             <span className="min-w-0 truncate text-foreground">{summary ?? name}</span>
             {summary ? <span className="min-w-0 shrink-[2] truncate font-mono text-12 text-muted max-sm:hidden">{name}</span> : null}
           </span>
           {status === "error" && error ? <span className="min-w-0 truncate text-12 text-danger">{error}</span> : null}
         </span>
         <span className="flex shrink-0 items-center gap-2 text-12 text-muted">
           {status === "error" ? <span className="text-danger">{labels.failed}</span> : null}
           {status === "running" ? <span className="sr-only">{labels.running}</span> : null}
           {time}
         </span>
         {expandable ? <Chevron open={open} /> : null}
       </>
     );
   
     const headerClass = "relative flex min-w-0 flex-1 items-center gap-3 rounded-control px-2 py-1.5 text-left";
   
     return (
       <div
         ref={setRef}
         data-status={status}
         data-expanded={open}
         aria-busy={status === "running"}
         className={cn("relative w-full min-w-0 overflow-hidden font-body text-14 text-foreground", className)}
         {...rest}
       >
         <div ref={measureRef}>
           <div className="relative flex min-w-0 items-center gap-1">
             {expandable ? (
               <button
                 type="button"
                 data-slot="tool-call-row-trigger"
                 aria-expanded={open}
                 aria-controls={foldId}
                 onClick={toggle}
                 className={cn(
                   headerClass,
                   "outline-none transition-colors duration-instant ease-swap hover-fine:bg-surface-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
                 )}
               >
                 {headerContent}
               </button>
             ) : (
               <div className={headerClass}>{headerContent}</div>
             )}
             {status === "error" && onRetry ? (
               <Button variant="secondary" size="sm" loading={retrying} onClick={() => void retry()} className="shrink-0">
                 {retrying ? labels.retrying : labels.retry}
               </Button>
             ) : null}
             {status === "running" ? <IndeterminateBar reduced={reduced} className="right-2 bottom-0 left-12" /> : null}
           </div>
   
           <AnimatePresence initial={false} mode="popLayout">
             {open ? (
               <motion.div
                 key="fold"
                 id={foldId}
                 data-slot="tool-call-row-fold"
                 className="flex flex-col gap-3 pt-1.5 pe-2 pb-3 ps-12"
                 initial={reduced ? { opacity: 0 } : { opacity: 0, y: motionTokens.distance.micro, filter: `blur(${motionTokens.blur.subtle}px)` }}
                 animate={reduced ? { opacity: 1 } : { opacity: 1, y: 0, filter: "blur(0px)" }}
                 exit={reduced ? { opacity: 0, transition: reducedTransition } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: motionTokens.ease.exit } }}
                 transition={reduced ? reducedTransition : { duration: motionTokens.duration.fast, ease: motionTokens.ease.enter, delay: motionTokens.stagger.item }}
               >
                 {input !== undefined ? <PayloadBlock label={labels.input} value={input} labels={labels} reduced={reduced} /> : null}
                 {output !== undefined ? <PayloadBlock label={labels.output} value={output} labels={labels} reduced={reduced} /> : null}
               </motion.div>
             ) : null}
           </AnimatePresence>
         </div>
       </div>
     );
   });
   
   export type ToolCallRowGroupCounts = {
     total: number;
     running: number;
     done: number;
     error: number;
     /** Sum of the finished calls' durations (ms). */
     durationMs: number;
   };
   
   export type ToolCallRowGroupProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
     /** ToolCallRow elements. The group reads their status, duration and icon to write its summary. */
     children: ReactNode;
     /** The summary line. A function receives the counts; the default reads "Used 4 tools" or "2 of 4 tools done". */
     summary?: ReactNode | ((counts: ToolCallRowGroupCounts) => ReactNode);
     /** Controlled: whether the rows are unfolded. */
     expanded?: boolean;
     /** Starting fold when uncontrolled. */
     defaultExpanded?: boolean;
     /** Called when the person folds or unfolds the group. */
     onExpandedChange?: (expanded: boolean) => void;
   };
   
   const defaultSummary = (c: ToolCallRowGroupCounts) => {
     const noun = c.total === 1 ? "tool" : "tools";
     if (c.running > 0) return `${c.done + c.error} of ${c.total} ${noun} done`;
     if (c.error > 0) return `Used ${c.total} ${noun}, ${c.error} failed`;
     return `Used ${c.total} ${noun}`;
   };
   
   export const ToolCallRowGroup = forwardRef<HTMLDivElement, ToolCallRowGroupProps>(function ToolCallRowGroup(
     { children, summary = defaultSummary, expanded: expandedProp, defaultExpanded = false, onExpandedChange, className, ...rest },
     forwardedRef,
   ) {
     const reduced = useReducedMotionAfterHydration();
     const listId = useId();
     const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
     const open = expandedProp ?? innerExpanded;
   
     const rows = Children.toArray(children).filter(isValidElement) as ReactElement<Partial<ToolCallRowProps>>[];
     const counts: ToolCallRowGroupCounts = { total: rows.length, running: 0, done: 0, error: 0, durationMs: 0 };
     for (const row of rows) {
       const s = row.props.status;
       if (s === "running") counts.running++;
       else if (s === "error") counts.error++;
       else if (s === "done") counts.done++;
       if (s !== "running" && typeof row.props.durationMs === "number") counts.durationMs += row.props.durationMs;
     }
     const icons = rows.map((row) => row.props.icon).filter(Boolean).slice(0, 3);
     const status: ToolCallRowStatus = counts.running > 0 ? "running" : counts.error > 0 ? "error" : "done";
     const line = typeof summary === "function" ? summary(counts) : summary;
   
     const { containerRef, measureRef } = useMorphSize<HTMLDivElement, HTMLDivElement>("height", `${open}:${rows.length}`);
     const setRef = useCallback(
       (node: HTMLDivElement | null) => {
         containerRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
         else if (forwardedRef) forwardedRef.current = node;
       },
       [forwardedRef, containerRef],
     );
   
     const toggle = () => {
       if (expandedProp === undefined) setInnerExpanded(!open);
       onExpandedChange?.(!open);
     };
   
     // Up and Down walk the row triggers, Home and End jump to the ends.
     const handleListKeys = (event: KeyboardEvent<HTMLDivElement>) => {
       if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
       const triggers = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[data-slot="tool-call-row-trigger"]'));
       const current = triggers.indexOf(event.target as HTMLElement);
       if (current === -1) return;
       event.preventDefault();
       const next =
         event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : Math.min(triggers.length - 1, Math.max(0, current + (event.key === "ArrowDown" ? 1 : -1)));
       triggers[next]?.focus();
     };
   
     const enter = reduced
       ? { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: reducedTransition }
       : {
           initial: { opacity: 0, y: motionTokens.distance.small, filter: `blur(${motionTokens.blur.subtle}px)` },
           animate: { opacity: 1, y: 0, filter: "blur(0px)" },
           transition: { duration: motionTokens.duration.fast, ease: motionTokens.ease.enter },
         };
   
     return (
       <div
         ref={setRef}
         data-status={status}
         data-expanded={open}
         aria-busy={counts.running > 0}
         className={cn("relative w-full min-w-0 overflow-hidden rounded-panel bg-surface font-body text-14 text-foreground shadow-resting hairline", className)}
         {...rest}
       >
         <div ref={measureRef} className="p-1.5">
           <button
             type="button"
             aria-expanded={open}
             aria-controls={listId}
             onClick={toggle}
             className="relative flex w-full min-w-0 items-center gap-3 rounded-control px-2 py-1.5 text-left outline-none transition-colors duration-instant ease-swap hover-fine:bg-surface-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus"
           >
             <span className="flex shrink-0 items-center">
               {icons.length > 0 ? (
                 icons.map((icon, index) => (
                   <span
                     key={index}
                     className={cn(
                       "grid size-7 place-items-center rounded-control bg-surface-muted text-foreground ring-2 ring-surface [&_svg]:size-3.5",
                       index > 0 && "-ms-2",
                     )}
                   >
                     {icon}
                   </span>
                 ))
               ) : (
                 <span className="size-7" />
               )}
             </span>
             <span className="min-w-0 flex-1 truncate text-foreground">{line}</span>
             {counts.running === 0 && counts.durationMs > 0 ? <span className="numeric shrink-0 text-12 text-muted">{formatDuration(counts.durationMs)}</span> : null}
             <Chevron open={open} />
             {counts.running > 0 && !open ? <IndeterminateBar reduced={reduced} className="right-2 bottom-0 left-12" /> : null}
           </button>
   
           <AnimatePresence initial={false} mode="popLayout">
             {open ? (
               <motion.div
                 key="rows"
                 id={listId}
                 role="group"
                 aria-label={typeof line === "string" ? line : undefined}
                 className="mt-1 flex flex-col border-t border-border-subtle pt-1"
                 onKeyDown={handleListKeys}
                 initial={reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }}
                 animate={reduced ? { opacity: 1 } : { opacity: 1, filter: "blur(0px)" }}
                 exit={reduced ? { opacity: 0, transition: reducedTransition } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: motionTokens.ease.exit } }}
                 transition={reduced ? reducedTransition : { duration: motionTokens.duration.fast, ease: motionTokens.ease.enter }}
               >
                 <AnimatePresence initial={false}>
                   {rows.map((row, index) => (
                     <motion.div key={row.key ?? index} {...enter}>
                       {row}
                     </motion.div>
                   ))}
                 </AnimatePresence>
               </motion.div>
             ) : null}
           </AnimatePresence>
         </div>
       </div>
     );
   });

4. 4

   Check that your global stylesheet imports the foundation, after Tailwind.

   app/globals.cssCopy

   @import "tailwindcss";
   @import "../components/pixilui/foundation.css";