Function ToolUseBlock

web/components/tools/ToolUseBlock.tsx:141–247

({
  toolName,
  toolInput: _toolInput,
  toolResult: _toolResult,
  isError = false,
  isRunning = false,
  startedAt,
  completedAt,
  children,
  defaultExpanded = false,
}: ToolUseBlockProps)

}

export function ToolUseBlock({
  toolName,
  toolInput: _toolInput,
  toolResult: _toolResult,
  isError = false,
  isRunning = false,
  startedAt,
  completedAt,
  children,
  defaultExpanded = false,
}: ToolUseBlockProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded || isRunning);
  const startRef = useRef(startedAt ?? Date.now());

  // Auto-expand while running, retain state after completion
  useEffect(() => {
    if (isRunning) setIsExpanded(true);
  }, [isRunning]);

  const Icon = getToolIcon(toolName);
  const label = getToolLabel(toolName);

  const borderColor = isRunning
    ? "border-brand-600/40"
    : isError
    ? "border-red-800/50"
    : "border-surface-700";

  const headerBg = isRunning
    ? "bg-brand-950/30"
    : isError
    ? "bg-red-950/20"
    : "bg-surface-850";

  return (
    <div
      className={cn(
        "rounded-lg border overflow-hidden text-sm",
        borderColor
      )}
    >
      {/* Header row */}
      <button
        onClick={() => setIsExpanded((v) => !v)}
        className={cn(
          "w-full flex items-center gap-2 px-3 py-2.5 text-left transition-colors",
          headerBg,
          "hover:bg-surface-800"
        )}
      >
        {/* Expand icon */}
        <span className="text-surface-500 flex-shrink-0">
          {isExpanded ? (
            <ChevronDown className="w-3.5 h-3.5" />
          ) : (
            <ChevronRight className="w-3.5 h-3.5" />
          )}
        </span>