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:T1f6d,"use client"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import * as React from "react"; /* ------------------------------------------------------------------ */ /* Types */ /* ------------------------------------------------------------------ */ export type ToolStatus = "running" | "success" | "error"; export type ToolCallProps = { name: string; input?: string; output?: string; status?: ToolStatus; duration?: string; icon?: React.ReactNode; onCancel?: () => void; defaultOpen?: boolean; className?: string; }; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ function TerminalIcon(props: React.SVGProps) { return ( ); } function ChevronIcon(props: React.SVGProps) { return ( ); } function CheckIcon(props: React.SVGProps) { return ( ); } function XIcon(props: React.SVGProps) { return ( ); } function StopIcon(props: React.SVGProps) { return ( ); } /* ------------------------------------------------------------------ */ /* Status pill */ /* ------------------------------------------------------------------ */ function StatusPill({ status, onCancel }: { status: ToolStatus; onCancel?: () => void }) { if (status === "running") { return ( ); } if (status === "success") { return ( Completed ); } return ( Failed ); } /* ------------------------------------------------------------------ */ /* ToolCall */ /* ------------------------------------------------------------------ */ export function ToolCall({ name, input, output, status = "running", duration, icon, onCancel, defaultOpen = status !== "running", className = "", }: ToolCallProps) { const [open, setOpen] = React.useState(defaultOpen); const hasDetails = (input?.length ?? 0) > 0 || (output?.length ?? 0) > 0; return ( {/* Header. The disclosure button covers the icon, name and duration only. It used to wrap the whole row, which put StatusPill's Cancel button inside it — nested buttons are invalid HTML, and React refuses to hydrate them. The pill and the chevron are siblings of the button now, so both controls stay independently clickable. */}

{hasDetails && ( )}

{/* Details */} {open && hasDetails && (

{input && (

Input

                {input}

)} {output && (

Output

                {output}

)}

)} ); } 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":"@scrimui","registryDependencies":["badge","button","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/showcase/tool-call/tool-call.tsx","content":"$52","type":"registry:ui","target":"components/ui/tool-call.tsx"}],"className":"h-[70svh] min-h-80"}]]}]