Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self-contained port from 21st.dev Agent Elements.
"use client"; import { ToolGroup } from "@/components/ui/tool-group"; export default function Demo() { return ( <div className="min-h-screen w-full flex items-center justify-center p-6 bg-white dark:bg-neutral-950"> <div className="w-full max-w-[420px]"> <ToolGroup state="interrupted" completeLabel="Task completed" shimmerLabel="Running task" interruptedLabel="Task interrupted" /> </div> </div> ); }