@antipopp/agno-react 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { AgnoClient } from '@antipopp/agno-client';
 import * as _antipopp_agno_types from '@antipopp/agno-types';
-import { AgnoClientConfig, ChatMessage, ClientState, SessionEntry, AgentDetails, TeamDetails, ToolCall } from '@antipopp/agno-types';
+import { AgnoClientConfig, ToolCall, ChatMessage, ClientState, SessionEntry, AgentDetails, TeamDetails } from '@antipopp/agno-types';
 export { AgentDetails, AgnoClientConfig, ChatMessage, ClientState, RunEvent, SessionEntry, TeamDetails, ToolCall } from '@antipopp/agno-types';
 
 interface AgnoProviderProps {
@@ -18,50 +18,6 @@ declare function AgnoProvider({ config, children }: AgnoProviderProps): react_js
  */
 declare function useAgnoClient(): AgnoClient;
 
-/**
- * Main hook for chat interactions
- * Provides messages, state, and methods to interact with the agent
- */
-declare function useAgnoChat(): {
-    messages: ChatMessage[];
-    sendMessage: (message: string | FormData, options?: {
-        headers?: Record<string, string>;
-    }) => Promise<void>;
-    clearMessages: () => void;
-    isStreaming: boolean;
-    isPaused: boolean;
-    error: string | undefined;
-    state: ClientState;
-};
-
-/**
- * Hook for session management
- */
-declare function useAgnoSession(): {
-    sessions: SessionEntry[];
-    currentSessionId: string | undefined;
-    loadSession: (sessionId: string) => Promise<ChatMessage[]>;
-    fetchSessions: () => Promise<SessionEntry[]>;
-    isLoading: boolean;
-    error: string | undefined;
-};
-
-/**
- * Hook for common actions like initialization, fetching agents/teams
- */
-declare function useAgnoActions(): {
-    initialize: () => Promise<{
-        agents: AgentDetails[];
-        teams: TeamDetails[];
-    }>;
-    checkStatus: () => Promise<boolean>;
-    fetchAgents: () => Promise<AgentDetails[]>;
-    fetchTeams: () => Promise<TeamDetails[]>;
-    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
-    isInitializing: boolean;
-    error: string | undefined;
-};
-
 /**
  * Tool handler function type
  */
@@ -77,7 +33,7 @@ interface ToolExecutionEvent {
 /**
  * Hook for handling frontend tool execution (HITL)
  *
- * @param handlers - Map of tool names to handler functions
+ * @param handlers - Map of tool names to handler functions (local handlers)
  * @param autoExecute - Whether to automatically execute tools when paused (default: true)
  *
  * @example
@@ -96,7 +52,7 @@ interface ToolExecutionEvent {
  * const { isPaused, isExecuting, pendingTools } = useAgnoToolExecution(toolHandlers);
  * ```
  */
-declare function useAgnoToolExecution(handlers: Record<string, ToolHandler>, autoExecute?: boolean): {
+declare function useAgnoToolExecution(handlers?: Record<string, ToolHandler>, autoExecute?: boolean): {
     /** Whether the run is currently paused awaiting tool execution */
     isPaused: boolean;
     /** Whether tools are currently being executed */
@@ -113,4 +69,90 @@ declare function useAgnoToolExecution(handlers: Record<string, ToolHandler>, aut
     executionError: string | undefined;
 };
 
-export { AgnoProvider, type AgnoProviderProps, type ToolExecutionEvent, type ToolHandler, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution };
+/**
+ * Context value for tool handler registry
+ */
+interface ToolHandlerContextValue {
+    handlers: Record<string, ToolHandler>;
+    registerHandler: (name: string, handler: ToolHandler) => void;
+    unregisterHandler: (name: string) => void;
+}
+interface ToolHandlerProviderProps {
+    handlers?: Record<string, ToolHandler>;
+    children: React.ReactNode;
+}
+/**
+ * Provider component that manages global tool handlers
+ *
+ * @example
+ * ```tsx
+ * const globalHandlers = {
+ *   fill_form: async (args) => {
+ *     // Implementation
+ *     return { success: true };
+ *   }
+ * };
+ *
+ * <ToolHandlerProvider handlers={globalHandlers}>
+ *   <App />
+ * </ToolHandlerProvider>
+ * ```
+ */
+declare function ToolHandlerProvider({ handlers: initialHandlers, children }: ToolHandlerProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access global tool handlers
+ *
+ * @returns Tool handler context value or null if not within ToolHandlerProvider
+ *
+ * @example
+ * ```tsx
+ * const { handlers, registerHandler } = useToolHandlers() || { handlers: {} };
+ * ```
+ */
+declare function useToolHandlers(): ToolHandlerContextValue | null;
+
+/**
+ * Main hook for chat interactions
+ * Provides messages, state, and methods to interact with the agent
+ */
+declare function useAgnoChat(): {
+    messages: ChatMessage[];
+    sendMessage: (message: string | FormData, options?: {
+        headers?: Record<string, string>;
+    }) => Promise<void>;
+    clearMessages: () => void;
+    isStreaming: boolean;
+    isPaused: boolean;
+    error: string | undefined;
+    state: ClientState;
+};
+
+/**
+ * Hook for session management
+ */
+declare function useAgnoSession(): {
+    sessions: SessionEntry[];
+    currentSessionId: string | undefined;
+    loadSession: (sessionId: string) => Promise<ChatMessage[]>;
+    fetchSessions: () => Promise<SessionEntry[]>;
+    isLoading: boolean;
+    error: string | undefined;
+};
+
+/**
+ * Hook for common actions like initialization, fetching agents/teams
+ */
+declare function useAgnoActions(): {
+    initialize: () => Promise<{
+        agents: AgentDetails[];
+        teams: TeamDetails[];
+    }>;
+    checkStatus: () => Promise<boolean>;
+    fetchAgents: () => Promise<AgentDetails[]>;
+    fetchTeams: () => Promise<TeamDetails[]>;
+    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
+    isInitializing: boolean;
+    error: string | undefined;
+};
+
+export { AgnoProvider, type AgnoProviderProps, type ToolExecutionEvent, type ToolHandler, type ToolHandlerContextValue, ToolHandlerProvider, type ToolHandlerProviderProps, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution, useToolHandlers };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { AgnoClient } from '@antipopp/agno-client';
 import * as _antipopp_agno_types from '@antipopp/agno-types';
-import { AgnoClientConfig, ChatMessage, ClientState, SessionEntry, AgentDetails, TeamDetails, ToolCall } from '@antipopp/agno-types';
+import { AgnoClientConfig, ToolCall, ChatMessage, ClientState, SessionEntry, AgentDetails, TeamDetails } from '@antipopp/agno-types';
 export { AgentDetails, AgnoClientConfig, ChatMessage, ClientState, RunEvent, SessionEntry, TeamDetails, ToolCall } from '@antipopp/agno-types';
 
 interface AgnoProviderProps {
@@ -18,50 +18,6 @@ declare function AgnoProvider({ config, children }: AgnoProviderProps): react_js
  */
 declare function useAgnoClient(): AgnoClient;
 
-/**
- * Main hook for chat interactions
- * Provides messages, state, and methods to interact with the agent
- */
-declare function useAgnoChat(): {
-    messages: ChatMessage[];
-    sendMessage: (message: string | FormData, options?: {
-        headers?: Record<string, string>;
-    }) => Promise<void>;
-    clearMessages: () => void;
-    isStreaming: boolean;
-    isPaused: boolean;
-    error: string | undefined;
-    state: ClientState;
-};
-
-/**
- * Hook for session management
- */
-declare function useAgnoSession(): {
-    sessions: SessionEntry[];
-    currentSessionId: string | undefined;
-    loadSession: (sessionId: string) => Promise<ChatMessage[]>;
-    fetchSessions: () => Promise<SessionEntry[]>;
-    isLoading: boolean;
-    error: string | undefined;
-};
-
-/**
- * Hook for common actions like initialization, fetching agents/teams
- */
-declare function useAgnoActions(): {
-    initialize: () => Promise<{
-        agents: AgentDetails[];
-        teams: TeamDetails[];
-    }>;
-    checkStatus: () => Promise<boolean>;
-    fetchAgents: () => Promise<AgentDetails[]>;
-    fetchTeams: () => Promise<TeamDetails[]>;
-    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
-    isInitializing: boolean;
-    error: string | undefined;
-};
-
 /**
  * Tool handler function type
  */
@@ -77,7 +33,7 @@ interface ToolExecutionEvent {
 /**
  * Hook for handling frontend tool execution (HITL)
  *
- * @param handlers - Map of tool names to handler functions
+ * @param handlers - Map of tool names to handler functions (local handlers)
  * @param autoExecute - Whether to automatically execute tools when paused (default: true)
  *
  * @example
@@ -96,7 +52,7 @@ interface ToolExecutionEvent {
  * const { isPaused, isExecuting, pendingTools } = useAgnoToolExecution(toolHandlers);
  * ```
  */
-declare function useAgnoToolExecution(handlers: Record<string, ToolHandler>, autoExecute?: boolean): {
+declare function useAgnoToolExecution(handlers?: Record<string, ToolHandler>, autoExecute?: boolean): {
     /** Whether the run is currently paused awaiting tool execution */
     isPaused: boolean;
     /** Whether tools are currently being executed */
@@ -113,4 +69,90 @@ declare function useAgnoToolExecution(handlers: Record<string, ToolHandler>, aut
     executionError: string | undefined;
 };
 
-export { AgnoProvider, type AgnoProviderProps, type ToolExecutionEvent, type ToolHandler, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution };
+/**
+ * Context value for tool handler registry
+ */
+interface ToolHandlerContextValue {
+    handlers: Record<string, ToolHandler>;
+    registerHandler: (name: string, handler: ToolHandler) => void;
+    unregisterHandler: (name: string) => void;
+}
+interface ToolHandlerProviderProps {
+    handlers?: Record<string, ToolHandler>;
+    children: React.ReactNode;
+}
+/**
+ * Provider component that manages global tool handlers
+ *
+ * @example
+ * ```tsx
+ * const globalHandlers = {
+ *   fill_form: async (args) => {
+ *     // Implementation
+ *     return { success: true };
+ *   }
+ * };
+ *
+ * <ToolHandlerProvider handlers={globalHandlers}>
+ *   <App />
+ * </ToolHandlerProvider>
+ * ```
+ */
+declare function ToolHandlerProvider({ handlers: initialHandlers, children }: ToolHandlerProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access global tool handlers
+ *
+ * @returns Tool handler context value or null if not within ToolHandlerProvider
+ *
+ * @example
+ * ```tsx
+ * const { handlers, registerHandler } = useToolHandlers() || { handlers: {} };
+ * ```
+ */
+declare function useToolHandlers(): ToolHandlerContextValue | null;
+
+/**
+ * Main hook for chat interactions
+ * Provides messages, state, and methods to interact with the agent
+ */
+declare function useAgnoChat(): {
+    messages: ChatMessage[];
+    sendMessage: (message: string | FormData, options?: {
+        headers?: Record<string, string>;
+    }) => Promise<void>;
+    clearMessages: () => void;
+    isStreaming: boolean;
+    isPaused: boolean;
+    error: string | undefined;
+    state: ClientState;
+};
+
+/**
+ * Hook for session management
+ */
+declare function useAgnoSession(): {
+    sessions: SessionEntry[];
+    currentSessionId: string | undefined;
+    loadSession: (sessionId: string) => Promise<ChatMessage[]>;
+    fetchSessions: () => Promise<SessionEntry[]>;
+    isLoading: boolean;
+    error: string | undefined;
+};
+
+/**
+ * Hook for common actions like initialization, fetching agents/teams
+ */
+declare function useAgnoActions(): {
+    initialize: () => Promise<{
+        agents: AgentDetails[];
+        teams: TeamDetails[];
+    }>;
+    checkStatus: () => Promise<boolean>;
+    fetchAgents: () => Promise<AgentDetails[]>;
+    fetchTeams: () => Promise<TeamDetails[]>;
+    updateConfig: (updates: Partial<Parameters<(updates: Partial<_antipopp_agno_types.AgnoClientConfig>) => void>[0]>) => void;
+    isInitializing: boolean;
+    error: string | undefined;
+};
+
+export { AgnoProvider, type AgnoProviderProps, type ToolExecutionEvent, type ToolHandler, type ToolHandlerContextValue, ToolHandlerProvider, type ToolHandlerProviderProps, useAgnoActions, useAgnoChat, useAgnoClient, useAgnoSession, useAgnoToolExecution, useToolHandlers };

package/dist/index.js

@@ -21,11 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AgnoProvider: () => AgnoProvider,
+  ToolHandlerProvider: () => ToolHandlerProvider,
   useAgnoActions: () => useAgnoActions,
   useAgnoChat: () => useAgnoChat,
   useAgnoClient: () => useAgnoClient,
   useAgnoSession: () => useAgnoSession,
-  useAgnoToolExecution: () => useAgnoToolExecution
+  useAgnoToolExecution: () => useAgnoToolExecution,
+  useToolHandlers: () => useToolHandlers
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -51,14 +53,40 @@ function useAgnoClient() {
   return client;
 }
 
-// src/hooks/useAgnoChat.ts
+// src/context/ToolHandlerContext.tsx
 var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ToolHandlerContext = (0, import_react2.createContext)(null);
+function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
+  const [handlers, setHandlers] = (0, import_react2.useState)(initialHandlers);
+  const registerHandler = (0, import_react2.useCallback)((name, handler) => {
+    setHandlers((prev) => ({ ...prev, [name]: handler }));
+  }, []);
+  const unregisterHandler = (0, import_react2.useCallback)((name) => {
+    setHandlers((prev) => {
+      const { [name]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const value = {
+    handlers,
+    registerHandler,
+    unregisterHandler
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToolHandlerContext.Provider, { value, children });
+}
+function useToolHandlers() {
+  return (0, import_react2.useContext)(ToolHandlerContext);
+}
+
+// src/hooks/useAgnoChat.ts
+var import_react3 = require("react");
 function useAgnoChat() {
   const client = useAgnoClient();
-  const [messages, setMessages] = (0, import_react2.useState)(client.getMessages());
-  const [state, setState] = (0, import_react2.useState)(client.getState());
-  const [error, setError] = (0, import_react2.useState)();
-  (0, import_react2.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react3.useState)(client.getMessages());
+  const [state, setState] = (0, import_react3.useState)(client.getState());
+  const [error, setError] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
     const handleMessageUpdate = (updatedMessages) => {
       console.log("[useAgnoChat] message:update event received, messages:", updatedMessages.length);
       setMessages(updatedMessages);
@@ -89,7 +117,7 @@ function useAgnoChat() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const sendMessage = (0, import_react2.useCallback)(
+  const sendMessage = (0, import_react3.useCallback)(
     async (message, options) => {
       setError(void 0);
       try {
@@ -102,7 +130,7 @@ function useAgnoChat() {
     },
     [client]
   );
-  const clearMessages = (0, import_react2.useCallback)(() => {
+  const clearMessages = (0, import_react3.useCallback)(() => {
     client.clearMessages();
     setMessages([]);
     setError(void 0);
@@ -119,16 +147,16 @@ function useAgnoChat() {
 }
 
 // src/hooks/useAgnoSession.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useAgnoSession() {
   const client = useAgnoClient();
-  const [sessions, setSessions] = (0, import_react3.useState)([]);
-  const [currentSessionId, setCurrentSessionId] = (0, import_react3.useState)(
+  const [sessions, setSessions] = (0, import_react4.useState)([]);
+  const [currentSessionId, setCurrentSessionId] = (0, import_react4.useState)(
     client.getConfig().sessionId
   );
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)();
+  (0, import_react4.useEffect)(() => {
     const handleSessionLoaded = (sessionId) => {
       setCurrentSessionId(sessionId);
     };
@@ -152,7 +180,7 @@ function useAgnoSession() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const loadSession = (0, import_react3.useCallback)(
+  const loadSession = (0, import_react4.useCallback)(
     async (sessionId) => {
       setIsLoading(true);
       setError(void 0);
@@ -170,7 +198,7 @@ function useAgnoSession() {
     },
     [client]
   );
-  const fetchSessions = (0, import_react3.useCallback)(async () => {
+  const fetchSessions = (0, import_react4.useCallback)(async () => {
     setIsLoading(true);
     setError(void 0);
     try {
@@ -196,12 +224,12 @@ function useAgnoSession() {
 }
 
 // src/hooks/useAgnoActions.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useAgnoActions() {
   const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)();
-  const initialize = (0, import_react4.useCallback)(async () => {
+  const [isInitializing, setIsInitializing] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)();
+  const initialize = (0, import_react5.useCallback)(async () => {
     setIsInitializing(true);
     setError(void 0);
     try {
@@ -215,7 +243,7 @@ function useAgnoActions() {
       setIsInitializing(false);
     }
   }, [client]);
-  const checkStatus = (0, import_react4.useCallback)(async () => {
+  const checkStatus = (0, import_react5.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.checkStatus();
@@ -225,7 +253,7 @@ function useAgnoActions() {
       return false;
     }
   }, [client]);
-  const fetchAgents = (0, import_react4.useCallback)(async () => {
+  const fetchAgents = (0, import_react5.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.fetchAgents();
@@ -235,7 +263,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const fetchTeams = (0, import_react4.useCallback)(async () => {
+  const fetchTeams = (0, import_react5.useCallback)(async () => {
     setError(void 0);
     try {
       return await client.fetchTeams();
@@ -245,7 +273,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const updateConfig = (0, import_react4.useCallback)(
+  const updateConfig = (0, import_react5.useCallback)(
     (updates) => {
       client.updateConfig(updates);
     },
@@ -263,16 +291,32 @@ function useAgnoActions() {
 }
 
 // src/hooks/useAgnoToolExecution.ts
-var import_react5 = require("react");
-function useAgnoToolExecution(handlers, autoExecute = true) {
+var import_react6 = require("react");
+function useAgnoToolExecution(handlers = {}, autoExecute = true) {
   const client = useAgnoClient();
-  const [pendingTools, setPendingTools] = (0, import_react5.useState)([]);
-  const [isPaused, setIsPaused] = (0, import_react5.useState)(false);
-  const [isExecuting, setIsExecuting] = (0, import_react5.useState)(false);
-  const [executionError, setExecutionError] = (0, import_react5.useState)();
-  (0, import_react5.useEffect)(() => {
+  const toolHandlerContext = useToolHandlers();
+  const mergedHandlers = (0, import_react6.useMemo)(() => {
+    const globalHandlers = toolHandlerContext?.handlers || {};
+    return { ...globalHandlers, ...handlers };
+  }, [toolHandlerContext?.handlers, handlers]);
+  const [pendingTools, setPendingTools] = (0, import_react6.useState)([]);
+  const [isPaused, setIsPaused] = (0, import_react6.useState)(false);
+  const [isExecuting, setIsExecuting] = (0, import_react6.useState)(false);
+  const [executionError, setExecutionError] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     const handleRunPaused = (event) => {
-      console.log("[useAgnoToolExecution] Run paused, tools:", event.tools);
+      console.log("[useAgnoToolExecution] Run paused event received");
+      console.log("[useAgnoToolExecution] Event:", event);
+      console.log("[useAgnoToolExecution] Tools:", event.tools);
+      console.log("[useAgnoToolExecution] Number of tools:", event.tools?.length);
+      event.tools?.forEach((tool, idx) => {
+        console.log(`[useAgnoToolExecution] Tool ${idx}:`, {
+          name: tool.tool_name,
+          id: tool.tool_call_id,
+          args_type: typeof tool.tool_args,
+          args: tool.tool_args
+        });
+      });
       setIsPaused(true);
       setPendingTools(event.tools);
       setExecutionError(void 0);
@@ -291,7 +335,7 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       client.off("run:continued", handleRunContinued);
     };
   }, [client]);
-  const executeAndContinue = (0, import_react5.useCallback)(async () => {
+  const executeAndContinue = (0, import_react6.useCallback)(async () => {
     if (!isPaused || pendingTools.length === 0) {
       console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
       return;
@@ -302,7 +346,7 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       console.log("[useAgnoToolExecution] Executing", pendingTools.length, "tools");
       const updatedTools = await Promise.all(
         pendingTools.map(async (tool) => {
-          const handler = handlers[tool.tool_name];
+          const handler = mergedHandlers[tool.tool_name];
           if (!handler) {
             console.warn(`[useAgnoToolExecution] No handler for tool: ${tool.tool_name}`);
             return {
@@ -340,12 +384,12 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       setIsExecuting(false);
       throw error;
     }
-  }, [client, handlers, isPaused, pendingTools]);
-  const executeTools = (0, import_react5.useCallback)(
+  }, [client, mergedHandlers, isPaused, pendingTools]);
+  const executeTools = (0, import_react6.useCallback)(
     async (tools) => {
       return Promise.all(
         tools.map(async (tool) => {
-          const handler = handlers[tool.tool_name];
+          const handler = mergedHandlers[tool.tool_name];
           if (!handler)
             return tool;
           try {
@@ -365,9 +409,9 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
         })
       );
     },
-    [handlers]
+    [mergedHandlers]
   );
-  const continueWithResults = (0, import_react5.useCallback)(
+  const continueWithResults = (0, import_react6.useCallback)(
     async (tools) => {
       if (!isPaused) {
         throw new Error("No paused run to continue");
@@ -382,7 +426,7 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
     },
     [client, isPaused]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (autoExecute && isPaused && !isExecuting && pendingTools.length > 0) {
       console.log("[useAgnoToolExecution] Auto-executing tools");
       executeAndContinue();
@@ -408,9 +452,11 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgnoProvider,
+  ToolHandlerProvider,
   useAgnoActions,
   useAgnoChat,
   useAgnoClient,
   useAgnoSession,
-  useAgnoToolExecution
+  useAgnoToolExecution,
+  useToolHandlers
 });

package/dist/index.mjs

@@ -20,13 +20,39 @@ function useAgnoClient() {
   return client;
 }
 
+// src/context/ToolHandlerContext.tsx
+import { createContext as createContext2, useContext as useContext2, useState, useCallback } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ToolHandlerContext = createContext2(null);
+function ToolHandlerProvider({ handlers: initialHandlers = {}, children }) {
+  const [handlers, setHandlers] = useState(initialHandlers);
+  const registerHandler = useCallback((name, handler) => {
+    setHandlers((prev) => ({ ...prev, [name]: handler }));
+  }, []);
+  const unregisterHandler = useCallback((name) => {
+    setHandlers((prev) => {
+      const { [name]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+  const value = {
+    handlers,
+    registerHandler,
+    unregisterHandler
+  };
+  return /* @__PURE__ */ jsx2(ToolHandlerContext.Provider, { value, children });
+}
+function useToolHandlers() {
+  return useContext2(ToolHandlerContext);
+}
+
 // src/hooks/useAgnoChat.ts
-import { useState, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 function useAgnoChat() {
   const client = useAgnoClient();
-  const [messages, setMessages] = useState(client.getMessages());
-  const [state, setState] = useState(client.getState());
-  const [error, setError] = useState();
+  const [messages, setMessages] = useState2(client.getMessages());
+  const [state, setState] = useState2(client.getState());
+  const [error, setError] = useState2();
   useEffect2(() => {
     const handleMessageUpdate = (updatedMessages) => {
       console.log("[useAgnoChat] message:update event received, messages:", updatedMessages.length);
@@ -58,7 +84,7 @@ function useAgnoChat() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const sendMessage = useCallback(
+  const sendMessage = useCallback2(
     async (message, options) => {
       setError(void 0);
       try {
@@ -71,7 +97,7 @@ function useAgnoChat() {
     },
     [client]
   );
-  const clearMessages = useCallback(() => {
+  const clearMessages = useCallback2(() => {
     client.clearMessages();
     setMessages([]);
     setError(void 0);
@@ -88,15 +114,15 @@ function useAgnoChat() {
 }
 
 // src/hooks/useAgnoSession.ts
-import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
 function useAgnoSession() {
   const client = useAgnoClient();
-  const [sessions, setSessions] = useState2([]);
-  const [currentSessionId, setCurrentSessionId] = useState2(
+  const [sessions, setSessions] = useState3([]);
+  const [currentSessionId, setCurrentSessionId] = useState3(
     client.getConfig().sessionId
   );
-  const [isLoading, setIsLoading] = useState2(false);
-  const [error, setError] = useState2();
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3();
   useEffect3(() => {
     const handleSessionLoaded = (sessionId) => {
       setCurrentSessionId(sessionId);
@@ -121,7 +147,7 @@ function useAgnoSession() {
       client.off("state:change", handleStateChange);
     };
   }, [client]);
-  const loadSession = useCallback2(
+  const loadSession = useCallback3(
     async (sessionId) => {
       setIsLoading(true);
       setError(void 0);
@@ -139,7 +165,7 @@ function useAgnoSession() {
     },
     [client]
   );
-  const fetchSessions = useCallback2(async () => {
+  const fetchSessions = useCallback3(async () => {
     setIsLoading(true);
     setError(void 0);
     try {
@@ -165,12 +191,12 @@ function useAgnoSession() {
 }
 
 // src/hooks/useAgnoActions.ts
-import { useState as useState3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useCallback as useCallback4 } from "react";
 function useAgnoActions() {
   const client = useAgnoClient();
-  const [isInitializing, setIsInitializing] = useState3(false);
-  const [error, setError] = useState3();
-  const initialize = useCallback3(async () => {
+  const [isInitializing, setIsInitializing] = useState4(false);
+  const [error, setError] = useState4();
+  const initialize = useCallback4(async () => {
     setIsInitializing(true);
     setError(void 0);
     try {
@@ -184,7 +210,7 @@ function useAgnoActions() {
       setIsInitializing(false);
     }
   }, [client]);
-  const checkStatus = useCallback3(async () => {
+  const checkStatus = useCallback4(async () => {
     setError(void 0);
     try {
       return await client.checkStatus();
@@ -194,7 +220,7 @@ function useAgnoActions() {
       return false;
     }
   }, [client]);
-  const fetchAgents = useCallback3(async () => {
+  const fetchAgents = useCallback4(async () => {
     setError(void 0);
     try {
       return await client.fetchAgents();
@@ -204,7 +230,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const fetchTeams = useCallback3(async () => {
+  const fetchTeams = useCallback4(async () => {
     setError(void 0);
     try {
       return await client.fetchTeams();
@@ -214,7 +240,7 @@ function useAgnoActions() {
       throw err;
     }
   }, [client]);
-  const updateConfig = useCallback3(
+  const updateConfig = useCallback4(
     (updates) => {
       client.updateConfig(updates);
     },
@@ -232,16 +258,32 @@ function useAgnoActions() {
 }
 
 // src/hooks/useAgnoToolExecution.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
-function useAgnoToolExecution(handlers, autoExecute = true) {
+import { useState as useState5, useEffect as useEffect4, useCallback as useCallback5, useMemo as useMemo2 } from "react";
+function useAgnoToolExecution(handlers = {}, autoExecute = true) {
   const client = useAgnoClient();
-  const [pendingTools, setPendingTools] = useState4([]);
-  const [isPaused, setIsPaused] = useState4(false);
-  const [isExecuting, setIsExecuting] = useState4(false);
-  const [executionError, setExecutionError] = useState4();
+  const toolHandlerContext = useToolHandlers();
+  const mergedHandlers = useMemo2(() => {
+    const globalHandlers = toolHandlerContext?.handlers || {};
+    return { ...globalHandlers, ...handlers };
+  }, [toolHandlerContext?.handlers, handlers]);
+  const [pendingTools, setPendingTools] = useState5([]);
+  const [isPaused, setIsPaused] = useState5(false);
+  const [isExecuting, setIsExecuting] = useState5(false);
+  const [executionError, setExecutionError] = useState5();
   useEffect4(() => {
     const handleRunPaused = (event) => {
-      console.log("[useAgnoToolExecution] Run paused, tools:", event.tools);
+      console.log("[useAgnoToolExecution] Run paused event received");
+      console.log("[useAgnoToolExecution] Event:", event);
+      console.log("[useAgnoToolExecution] Tools:", event.tools);
+      console.log("[useAgnoToolExecution] Number of tools:", event.tools?.length);
+      event.tools?.forEach((tool, idx) => {
+        console.log(`[useAgnoToolExecution] Tool ${idx}:`, {
+          name: tool.tool_name,
+          id: tool.tool_call_id,
+          args_type: typeof tool.tool_args,
+          args: tool.tool_args
+        });
+      });
       setIsPaused(true);
       setPendingTools(event.tools);
       setExecutionError(void 0);
@@ -260,7 +302,7 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       client.off("run:continued", handleRunContinued);
     };
   }, [client]);
-  const executeAndContinue = useCallback4(async () => {
+  const executeAndContinue = useCallback5(async () => {
     if (!isPaused || pendingTools.length === 0) {
       console.warn("[useAgnoToolExecution] Cannot execute: no pending tools");
       return;
@@ -271,7 +313,7 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       console.log("[useAgnoToolExecution] Executing", pendingTools.length, "tools");
       const updatedTools = await Promise.all(
         pendingTools.map(async (tool) => {
-          const handler = handlers[tool.tool_name];
+          const handler = mergedHandlers[tool.tool_name];
           if (!handler) {
             console.warn(`[useAgnoToolExecution] No handler for tool: ${tool.tool_name}`);
             return {
@@ -309,12 +351,12 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
       setIsExecuting(false);
       throw error;
     }
-  }, [client, handlers, isPaused, pendingTools]);
-  const executeTools = useCallback4(
+  }, [client, mergedHandlers, isPaused, pendingTools]);
+  const executeTools = useCallback5(
     async (tools) => {
       return Promise.all(
         tools.map(async (tool) => {
-          const handler = handlers[tool.tool_name];
+          const handler = mergedHandlers[tool.tool_name];
           if (!handler)
             return tool;
           try {
@@ -334,9 +376,9 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
         })
       );
     },
-    [handlers]
+    [mergedHandlers]
   );
-  const continueWithResults = useCallback4(
+  const continueWithResults = useCallback5(
     async (tools) => {
       if (!isPaused) {
         throw new Error("No paused run to continue");
@@ -376,9 +418,11 @@ function useAgnoToolExecution(handlers, autoExecute = true) {
 }
 export {
   AgnoProvider,
+  ToolHandlerProvider,
   useAgnoActions,
   useAgnoChat,
   useAgnoClient,
   useAgnoSession,
-  useAgnoToolExecution
+  useAgnoToolExecution,
+  useToolHandlers
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antipopp/agno-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React hooks for Agno client with frontend tool execution (HITL) support",
   "author": "antipopp",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@antipopp/agno-client": "0.1.0",
-    "@antipopp/agno-types": "0.1.0"
+    "@antipopp/agno-client": "0.2.0",
+    "@antipopp/agno-types": "0.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"