ToolCallCard

Expandable tool execution visualization

ToolCallCard displays tool executions in an expandable card format with status indicators, syntax highlighting, and support for 10+ different action types.

Preview

Command

npm install @ash-cloud/ash-ui

Output

added 2 packages in 1.2s

2 packages are looking for funding
  run `npm fund` for details

Import

import

import { ToolCallCard } from '@ash-cloud/ash-ui';

Usage

ToolList.tsx

import { ToolCallCard } from '@ash-cloud/ash-ui';
import type { NormalizedToolCall } from '@ash-cloud/ash-ui/types';

function ToolList({ toolCalls }: { toolCalls: NormalizedToolCall[] }) {
  return (
    <div className="space-y-2">
      {toolCalls.map((toolCall) => (
        <ToolCallCard
          key={toolCall.id}
          toolCall={toolCall}
          defaultExpanded={false}
        />
      ))}
    </div>
  );
}

Props

Prop	Type	Default	Description
toolCall	NormalizedToolCall	required	The tool call data to display
defaultExpanded	boolean	false	Whether card is expanded initially
className	string	undefined	Additional CSS classes

Supported Action Types

ToolCallCard renders different content based on the action type:

command_run

Bash command execution

file_read

File reading operations

file_edit

File editing with diffs

file_write

New file creation

search

Code search operations

glob

File pattern matching

web_fetch

HTTP requests

web_search

Web searches

mcp_tool

MCP server tools

generic

Generic tool calls

Status Indicators

pending

Tool is executing

success

Completed successfully

failed

Execution failed

NormalizedToolCall Type

types.ts

type NormalizedToolCall = {
  id: string;
  toolName: string;
  actionType: ActionType;
  status: 'pending' | 'success' | 'failed';
  summary: string;
  startedAt?: string;
  completedAt?: string;
  isError?: boolean;

  // Action-specific data
  action: CommandRunAction | FileReadAction | FileEditAction | ...
};