Function useToolExecution

src/web-ui/src/hooks/useToolExecution.ts:22–101

(
  options: UseToolExecutionOptions = {}
)

}

export const useToolExecution = (
  options: UseToolExecutionOptions = {}
): UseToolExecutionReturn => {
  const {
    autoConnect = true,
    eventTypes = ['all'],
    maxMessages = 50
  } = options;

  const [toolMessages, setToolMessages] = useState<ToolDisplayMessage[]>([]);
  const [activeExecutions, setActiveExecutions] = useState<ToolExecutionInfo[]>([]);

  const handleToolEvent = useCallback((message: ToolDisplayMessage) => {
    if (!message.id || message.id === 'tool_exec_undefined' || message.id === 'tool_result_undefined') {
      log.warn('Ignoring invalid tool message', { messageId: message.id });
      return;
    }
    
    setToolMessages(prev => {
      const exists = prev.some(msg => msg.id === message.id);
      if (exists) {
        return prev;
      }
      
      const newMessages = [...prev, message];
      if (newMessages.length > maxMessages) {
        return newMessages.slice(-maxMessages);
      }
      
      return newMessages;
    });

    if (message.type === 'tool_use' || message.toolExecution) {
      const service = ToolExecutionService.getInstance();
      setActiveExecutions(service.getActiveExecutions());
    }
  }, [maxMessages]);

  useEffect(() => {
    if (!autoConnect) return;

    const service = ToolExecutionService.getInstance();
    const cleanupFunctions: (() => void)[] = [];

    eventTypes.forEach(eventType => {
      const cleanup = service.onToolEvent(eventType, handleToolEvent);
      cleanupFunctions.push(cleanup);
    });

    setActiveExecutions(service.getActiveExecutions());

    return () => {
      cleanupFunctions.forEach(cleanup => cleanup());
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoConnect]);

  const clearToolMessages = useCallback(() => {