"use client" import * as React from "react" import { useReducedMotion } from "motion/react" import { AgentCode } from "@/components/agents/agent-code" import { ToolResult, ToolResultOutput, type ToolResultStatus, } from "@/components/agents/tool-result" /** Reveals `steps` items one by one, then settles on `finalStatus`. */ function useSteps( steps: number, interval = 420, finalStatus: Exclude = "success" ) { const reduce = useReducedMotion() ?? false const [visible, setVisible] = React.useState(0) const [status, setStatus] = React.useState("running") React.useEffect(() => { if (reduce) return const timers = Array.from({ length: steps }, (_, i) => window.setTimeout(() => setVisible(i + 1), i * interval + 180) ) timers.push( window.setTimeout(() => setStatus(finalStatus), steps * interval + 480) ) return () => timers.forEach(window.clearTimeout) }, [finalStatus, interval, reduce, steps]) return reduce ? { visible: steps, status: finalStatus as ToolResultStatus } : { visible, status } } const TERMINAL = [ "$ pnpm build", "▲ Next.js 16.4.0 (Turbopack)", "✓ Compiled successfully in 1.3s", "✓ Finished TypeScript in 4.3s", "✓ Generating static pages (4/4)", "registry.json: 58 items", ] as const function TerminalRun({ onReplay }: { onReplay: () => void }) { const { visible, status } = useSteps(TERMINAL.length) const output = TERMINAL.slice(0, visible).join("\n") return ( {output} ) } const RESPONSE = `{ "error": "rate_limit_exceeded", "retryAfter": 30, "requestId": "req_8f21" }` function RequestRun({ onReplay }: { onReplay: () => void }) { const { visible, status } = useSteps(3, 600, "error") return ( {visible < 3 ? ( {visible === 0 ? "Preparing request…" : visible === 1 ? "GET /v1/activity\nConnecting…" : "GET /v1/activity\nWaiting for response…"} ) : ( )} ) } export default function ToolResultDemo() { const [run, setRun] = React.useState(0) const replay = () => setRun((r) => r + 1) return (

) }

Tool Result

Installation

Dependencies

Source