Agents

ToolCall

Agent tool status surface for pending, running, success, and error states.

read_registryrunning

chat.json + mastra usage

map_partssuccess

runner data mapped into installed components

fallbackerror

Unknown part handled locally

Composition

The preferred shape for composing the installed agent from its exported parts.

Parts

Exported compound parts from the installed source.

ToolCall

├── ToolCallHeader

├── ToolCallTitle

├── ToolCallStatus

├── ToolCallBody

├── ToolCallInput

└── ToolCallOutput

This agent installs from the chat registry. Install the bundle with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/chat.json

See registry manifest

Usage

import { ToolCall, ToolCallHeader, ToolCallStatus, ToolCallTitle } from "@/components/refined-ui/tool-call";

export function Example() {

return (

<ToolCall name="read_file" state="running">

<ToolCallHeader>

<ToolCallTitle />

<ToolCallStatus />

</ToolCallHeader>

</ToolCall>

);

}

Installed dependencies

Installed with this agent because the visible component depends on them; they are support files, not separate product surfaces.

Behavior hooksrc/registry/hooks/use-tool-call.tsHook

Raw code

Primary installed agent source

Component

src/registry/sources/refined/tool-call.tsx

"use client";

import type { ComponentProps } from "react";

import { createContext, useContext } from "react";

import type { ToolCallProps } from "@/components/refined-ui/contracts";

import { useToolCall } from "@/components/refined-ui/hooks/use-tool-call";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

type ToolCallContextValue = ReturnType<typeof useToolCall> & {

name: string;

};

const ToolCallContext = createContext<ToolCallContextValue | null>(null);

function useToolCallContext() {

const context = useContext(ToolCallContext);

if (!context) throw new Error("ToolCall compound components must be rendered inside <ToolCall>.");

return context;

}

export function ToolCall({ name, state = "pending", className, children, ...props }: ToolCallProps) {

const tool = useToolCall(state);

return (

<ToolCallContext.Provider value={{ ...tool, name }}>

      {/* fx anchor candidate: "tool-call:result-layer" — anchors are added on demand (see /architecture#extension-contract);

          persistent-state fx (running shimmer, success/error washes) need no anchor: style the emitted data-state in CSS. */}

<section

data-ui="agent"

data-component="tool-call"

data-state={state}

className={cn(

"my-2 overflow-hidden rounded-2xl border bg-card/68 text-body shadow-sm",

tool.isError ? "border-destructive/35" : "border-border",

skinSlot("tool-call", { state }),

className,

)}

{...props}

>

{children}

</section>

</ToolCallContext.Provider>

);

}

export type ToolCallHeaderProps = ComponentProps<"div">;

export function ToolCallHeader({ className, ...props }: ToolCallHeaderProps) {

return (

<div

className={cn(

"flex items-center justify-between gap-3 border-b bg-muted/35 px-3 py-1.5 text-meta font-medium",

skinSlot("tool-call-header", {}),

className,

)}

{...props}

/>

);

}

export type ToolCallTitleProps = ComponentProps<"span">;

export function ToolCallTitle({ children, ...props }: ToolCallTitleProps) {

const tool = useToolCallContext();

return <span {...props}>{children ?? tool.name}</span>;

}

export type ToolCallStatusProps = ComponentProps<"span">;

export function ToolCallStatus({ className, children, ...props }: ToolCallStatusProps) {

const tool = useToolCallContext();

return (

<span

className={cn(

"rounded-[var(--radius-control)] px-2 py-0.5 text-micro font-medium",

tool.isSuccess && "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",

tool.isError && "bg-destructive/10 text-destructive",

tool.isRunning && "bg-blue-500/10 text-blue-700 dark:text-blue-300",

tool.isPending && "bg-muted text-muted-foreground",

skinSlot("tool-call-status", { state: tool.state }),

className,

)}

{...props}

>

{children ?? tool.state}

</span>

);

}

export type ToolCallBodyProps = ComponentProps<"div">;

export function ToolCallBody({ className, ...props }: ToolCallBodyProps) {

return <div className={cn("grid gap-1.5 p-2.5", skinSlot("tool-call-body", {}), className)} {...props} />;

}

export type ToolCallInputProps = ComponentProps<"div">;

export function ToolCallInput({ className, ...props }: ToolCallInputProps) {

return (

<div

className={cn(

"whitespace-pre-wrap rounded-xl bg-muted/45 p-2 font-mono text-meta text-muted-foreground",

skinSlot("tool-call-input", {}),

className,

)}

{...props}

/>

);

}

export type ToolCallOutputProps = ComponentProps<"div">;

export function ToolCallOutput({ className, ...props }: ToolCallOutputProps) {

return (

<div

      className={cn("rounded-xl bg-background p-2 text-meta ring-1 ring-border", skinSlot("tool-call-output", {}), className)}

{...props}

/>

);

}

Refined UI

ToolCall

Composition

Parts

Usage

Installed dependencies

Raw code