@mobileai/react-native 0.9.18 → 0.9.19

package/lib/module/components/AIAgent.js

@@ -17,6 +17,8 @@ import { createProvider } from "../providers/ProviderFactory.js";
 import { AgentContext } from "../hooks/useAction.js";
 import { AgentChatBar } from "./AgentChatBar.js";
 import { AgentOverlay } from "./AgentOverlay.js";
+import { AIConsentDialog, useAIConsent } from "./AIConsentDialog.js";
+import { FloatingOverlayWrapper } from "./FloatingOverlayWrapper.js";
 import { logger } from "../utils/logger.js";
 import { buildVoiceSystemPrompt } from "../core/systemPrompt.js";
 import { MCPBridge } from "../core/MCPBridge.js";
@@ -31,10 +33,14 @@ import { HighlightOverlay } from "./HighlightOverlay.js";
 import { IdleDetector } from "../core/IdleDetector.js";
 import { ProactiveHint } from "./ProactiveHint.js";
 import { createEscalateTool } from "../support/escalateTool.js";
+import { createReportIssueTool } from "../support/reportIssueTool.js";
 import { EscalationSocket } from "../support/EscalationSocket.js";
 import { EscalationEventSource } from "../support/EscalationEventSource.js";
+import { ReportedIssueEventSource } from "../support/ReportedIssueEventSource.js";
 import { SupportChatModal } from "../support/SupportChatModal.js";
 import { ENDPOINTS } from "../config/endpoints.js";
+import * as ConversationService from "../services/ConversationService.js";
+import { createMobileAIKnowledgeRetriever } from "../services/MobileAIKnowledgeRetriever.js";
 
 // ─── Context ───────────────────────────────────────────────────
 
@@ -114,13 +120,32 @@ export function AIAgent({
   pushToken,
   pushTokenType,
   interactionMode,
-  showDiscoveryTooltip: showDiscoveryTooltipProp = true
+  showDiscoveryTooltip: showDiscoveryTooltipProp = true,
+  discoveryTooltipMessage,
+  customerSuccess,
+  onboarding,
+  consent
 }) {
+  // Consent is ALWAYS required by default — only disabled if explicitly set to false.
+  // No consent prop at all → gate is active with default dialog config.
+  const consentRequired = consent?.required !== false;
+  const consentConfig = consent ?? {
+    required: true,
+    persist: false
+  };
+
+  // ─── AI Consent State (Apple Guideline 5.1.2(i)) ─────────────
+  const [hasConsented, grantConsent,, isConsentLoading] = useAIConsent(consentConfig.persist);
+  const [showConsentDialog, setShowConsentDialog] = useState(false);
+  const pendingConsentSendRef = useRef(null);
+  const pendingFollowUpAfterApprovalRef = useRef(null);
+  const consentGateActive = consentRequired && !hasConsented && !isConsentLoading;
   // Configure logger based on debug prop
   React.useEffect(() => {
     logger.setEnabled(debug);
     if (debug) {
       logger.info('AIAgent', '🔧 Debug logging enabled');
+      logger.info('AIAgent', `⚙️ Initial config: interactionMode=${interactionMode || 'copilot(default)'} enableVoice=${enableVoice} useScreenMap=${useScreenMap} analytics=${!!analyticsKey}`);
     }
   }, [debug]);
   const rootViewRef = useRef(null);
@@ -129,7 +154,22 @@ export function AIAgent({
   const [lastResult, setLastResult] = useState(null);
   const [lastUserMessage, setLastUserMessage] = useState(null);
   const [messages, setMessages] = useState([]);
+  const [supportMessages, setSupportMessages] = useState([]);
   const [chatScrollTrigger, setChatScrollTrigger] = useState(0);
+  // Mirror of messages for safe reading inside async callbacks (avoids setMessages abuse)
+  const messagesRef = useRef([]);
+
+  // ── Conversation History State ────────────────────────────────
+  const [conversations, setConversations] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const activeConversationIdRef = useRef(null);
+  const lastSavedMessageCountRef = useRef(0);
+  const appendDebounceRef = useRef(null);
+
+  // Keep messagesRef always in sync — used by async save callbacks
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
 
   // Increment scroll trigger when messages change to auto-scroll chat modal
   useEffect(() => {
@@ -145,6 +185,7 @@ export function AIAgent({
   const [isLiveAgentTyping, setIsLiveAgentTyping] = useState(false);
   const [autoExpandTrigger, setAutoExpandTrigger] = useState(0);
   const [unreadCounts, setUnreadCounts] = useState({});
+  const seenReportedIssueUpdatesRef = useRef(new Set());
   // Ref mirrors selectedTicketId — lets socket callbacks access current value
   // without stale closures (sockets are long-lived, closures capture old state).
   const selectedTicketIdRef = useRef(null);
@@ -157,6 +198,48 @@ export function AIAgent({
   // SSE connections per ticket — reliable fallback for ticket_closed events
   // when the WebSocket is disconnected. EventSource auto-reconnects.
   const sseRef = useRef(new Map());
+  const reportedIssuesSSERef = useRef(null);
+  const agentFrtFiredRef = useRef(false);
+  const humanFrtFiredRef = useRef({});
+
+  // ── Onboarding Journey State ────────────────────────────────
+  const [isOnboardingActive, setIsOnboardingActive] = useState(false);
+  const [currentOnboardingIndex, setCurrentOnboardingIndex] = useState(0);
+  useEffect(() => {
+    if (!onboarding?.enabled) return;
+    if (onboarding.firstLaunchOnly !== false) {
+      void (async () => {
+        try {
+          const AS = getTooltipStorage();
+          if (!AS) {
+            setIsOnboardingActive(true);
+            return;
+          }
+          const completed = await AS.getItem('@mobileai_onboarding_completed');
+          if (!completed) setIsOnboardingActive(true);
+        } catch {
+          setIsOnboardingActive(true);
+        }
+      })();
+    } else {
+      setIsOnboardingActive(true);
+    }
+  }, [onboarding?.enabled, onboarding?.firstLaunchOnly]);
+  const advanceOnboarding = useCallback(() => {
+    if (!onboarding?.steps) return;
+    if (currentOnboardingIndex >= onboarding.steps.length - 1) {
+      setIsOnboardingActive(false);
+      onboarding.onComplete?.();
+      void (async () => {
+        try {
+          const AS = getTooltipStorage();
+          await AS?.setItem('@mobileai_onboarding_completed', 'true');
+        } catch {/* graceful */}
+      })();
+    } else {
+      setCurrentOnboardingIndex(prev => prev + 1);
+    }
+  }, [onboarding, currentOnboardingIndex]);
   const totalUnread = Object.values(unreadCounts).reduce((sum, count) => sum + count, 0);
 
   // ── Discovery Tooltip (one-time) ──────────────────────────
@@ -277,6 +360,31 @@ export function AIAgent({
     setMessages([]);
     setLastResult(null);
   }, []);
+  const applyReportedIssueUpdates = useCallback((nextIssues, options) => {
+    const replayToChat = options?.replayToChat ?? true;
+    nextIssues.forEach(issue => {
+      const history = Array.isArray(issue.statusHistory) ? issue.statusHistory : [];
+      history.forEach(entry => {
+        if (!entry || typeof entry !== 'object') return;
+        const id = typeof entry.id === 'string' ? entry.id : null;
+        const message = typeof entry.message === 'string' ? entry.message : null;
+        if (!id || !message) return;
+        if (seenReportedIssueUpdatesRef.current.has(id)) return;
+        seenReportedIssueUpdatesRef.current.add(id);
+        if (!replayToChat) return;
+        const entryTimestamp = typeof entry.timestamp === 'string' ? new Date(entry.timestamp).getTime() : NaN;
+        setMessages(prev => {
+          if (prev.some(msg => msg.id === `reported-${id}`)) return prev;
+          return [...prev, {
+            id: `reported-${id}`,
+            role: 'assistant',
+            content: message,
+            timestamp: Number.isFinite(entryTimestamp) ? entryTimestamp : Date.now()
+          }];
+        });
+      });
+    });
+  }, []);
   const getResolvedScreenName = useCallback(() => {
     const routeName = navRef?.getCurrentRoute?.()?.name;
     if (typeof routeName === 'string' && routeName.trim().length > 0) {
@@ -288,6 +396,15 @@ export function AIAgent({
     }
     return 'unknown';
   }, [navRef]);
+  const resolvedKnowledgeBase = useMemo(() => {
+    if (knowledgeBase) return knowledgeBase;
+    if (!analyticsKey) return undefined;
+    return createMobileAIKnowledgeRetriever({
+      publishableKey: analyticsKey,
+      baseUrl: analyticsProxyUrl ?? ENDPOINTS.escalation,
+      headers: analyticsProxyHeaders
+    });
+  }, [analyticsKey, analyticsProxyHeaders, analyticsProxyUrl, knowledgeBase]);
 
   // ─── Auto-create MobileAI escalation tool ─────────────────────
   // When analyticsKey is present and consumer hasn't provided their own
@@ -310,6 +427,19 @@ export function AIAgent({
         role: m.role,
         content: m.content
       })),
+      getToolCalls: () => {
+        const toolCalls = [];
+        messages.forEach(m => {
+          if (m.result?.steps) {
+            m.result.steps.forEach(step => {
+              if (step.action && step.action.name !== 'done' && step.action.name !== 'agent_step' && step.action.name !== 'escalate_to_human') {
+                toolCalls.push(step.action);
+              }
+            });
+          }
+        });
+        return toolCalls;
+      },
       getScreenFlow: () => telemetryRef.current?.getScreenFlow() ?? [],
       userContext,
       pushToken,
@@ -372,6 +502,13 @@ export function AIAgent({
       },
       onHumanReply: (reply, ticketId) => {
         if (ticketId) {
+          if (!humanFrtFiredRef.current[ticketId]) {
+            humanFrtFiredRef.current[ticketId] = true;
+            telemetryRef.current?.track('human_first_response', {
+              ticketId
+            });
+          }
+
           // Always update the ticket's history (source of truth for ticket cards)
           setTickets(prev => prev.map(t => {
             if (t.id !== ticketId) return t;
@@ -393,7 +530,7 @@ export function AIAgent({
               content: reply,
               timestamp: Date.now()
             };
-            setMessages(prev => [...prev, humanMsg]);
+            setSupportMessages(prev => [...prev, humanMsg]);
             setLastResult({
               success: true,
               message: `👤 ${reply}`,
@@ -427,6 +564,43 @@ export function AIAgent({
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analyticsKey, customTools, getResolvedScreenName, navRef, openSSE, userContext, pushToken, pushTokenType, messages, clearSupport]);
+  const autoReportIssueTool = useMemo(() => {
+    if (!analyticsKey) return null;
+    if (customTools?.['report_issue']) return null;
+    return createReportIssueTool({
+      analyticsKey,
+      getCurrentScreen: getResolvedScreenName,
+      getHistory: () => messages.map(m => ({
+        role: m.role,
+        content: m.content
+      })),
+      getScreenFlow: () => telemetryRef.current?.getScreenFlow() ?? [],
+      userContext
+    });
+  }, [analyticsKey, customTools, getResolvedScreenName, messages, userContext]);
+
+  // ─── Load conversation history on mount ─────────────────────────
+  useEffect(() => {
+    if (!analyticsKey) return;
+    void (async () => {
+      try {
+        setIsLoadingHistory(true);
+        await initDeviceId();
+        const deviceId = getDeviceId();
+        const list = await ConversationService.fetchConversations({
+          analyticsKey,
+          userId: userContext?.userId,
+          deviceId: deviceId || undefined
+        });
+        setConversations(list);
+      } catch (err) {
+        logger.warn('AIAgent', 'Failed to load conversation history:', err);
+      } finally {
+        setIsLoadingHistory(false);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey, userContext?.userId]);
 
   // ─── Restore pending tickets on app start ──────────────────────
   useEffect(() => {
@@ -531,7 +705,11 @@ export function AIAgent({
             onTicketClosed: () => clearSupport(ticket.id),
             onError: err => logger.error('AIAgent', '★ Restored socket error:', err)
           });
-          socket.connect(ticket.wsUrl);
+          if (ticket.wsUrl) {
+            socket.connect(ticket.wsUrl);
+          } else {
+            logger.warn('AIAgent', '★ Restored ticket has no wsUrl — skipping socket connect:', ticket.id);
+          }
           // Cache in pendingSocketsRef so handleTicketSelect reuses it without reconnecting
           pendingSocketsRef.current.set(ticket.id, socket);
           logger.info('AIAgent', '★ Single ticket restored and socket cached:', ticket.id);
@@ -542,6 +720,61 @@ export function AIAgent({
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analyticsKey]);
+  useEffect(() => {
+    if (!analyticsKey) return;
+    let isCancelled = false;
+    const syncIssues = async () => {
+      try {
+        await initDeviceId();
+        const deviceId = getDeviceId();
+        if (!userContext?.userId && !deviceId) return;
+        const query = new URLSearchParams({
+          analyticsKey
+        });
+        if (userContext?.userId) query.append('userId', userContext.userId);
+        if (deviceId) query.append('deviceId', deviceId);
+        const res = await fetch(`${ENDPOINTS.escalation}/api/v1/reported-issues/mine?${query.toString()}`);
+        if (!res.ok || isCancelled) return;
+        const data = await res.json();
+        const nextIssues = Array.isArray(data.issues) ? data.issues : [];
+        applyReportedIssueUpdates(nextIssues, {
+          replayToChat: false
+        });
+      } catch (error) {
+        logger.warn('AIAgent', 'Failed to sync reported issues:', error);
+      }
+    };
+    void syncIssues();
+    void (async () => {
+      await initDeviceId();
+      const deviceId = getDeviceId();
+      if (!userContext?.userId && !deviceId) return;
+      const query = new URLSearchParams({
+        analyticsKey
+      });
+      if (userContext?.userId) query.append('userId', userContext.userId);
+      if (deviceId) query.append('deviceId', deviceId);
+      reportedIssuesSSERef.current?.disconnect();
+      const sse = new ReportedIssueEventSource({
+        url: `${ENDPOINTS.escalation}/api/v1/reported-issues/events?${query.toString()}`,
+        onIssueUpdate: issue => {
+          applyReportedIssueUpdates([issue], {
+            replayToChat: true
+          });
+        },
+        onError: error => {
+          logger.warn('AIAgent', 'Reported issue SSE error:', error.message);
+        }
+      });
+      sse.connect();
+      reportedIssuesSSERef.current = sse;
+    })();
+    return () => {
+      isCancelled = true;
+      reportedIssuesSSERef.current?.disconnect();
+      reportedIssuesSSERef.current = null;
+    };
+  }, [analyticsKey, applyReportedIssueUpdates, userContext?.userId]);
 
   // ─── Ticket selection handlers ────────────────────────────────
   const handleTicketSelect = useCallback(async ticketId => {
@@ -582,6 +815,11 @@ export function AIAgent({
     // Trigger scroll to bottom when modal opens
     setChatScrollTrigger(prev => prev + 1);
 
+    // Capture the fresh wsUrl returned by the server — it is the canonical value.
+    // The local `ticket` snapshot may have an empty wsUrl if it was a placeholder
+    // created before the WS URL was known (e.g. via onEscalationStarted).
+    let freshWsUrl = ticket.wsUrl;
+
     // Fetch latest history from server — this is the source of truth and catches
     // any messages that arrived while the socket was disconnected (modal closed,
     // app backgrounded, etc.)
@@ -589,6 +827,9 @@ export function AIAgent({
       const res = await fetch(`${ENDPOINTS.escalation}/api/v1/escalations/${ticketId}?analyticsKey=${analyticsKey}`);
       if (res.ok) {
         const data = await res.json();
+        if (data.wsUrl) {
+          freshWsUrl = data.wsUrl; // always prefer the live server value
+        }
         const history = Array.isArray(data.history) ? data.history : [];
         const restored = history.map((entry, i) => ({
           id: `restored-${ticketId}-${i}`,
@@ -596,8 +837,8 @@ export function AIAgent({
           content: entry.content,
           timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
         }));
-        setMessages(restored);
-        // Update ticket in local list with fresh history
+        setSupportMessages(restored);
+        // Update ticket in local list with fresh history + wsUrl
         if (data.wsUrl) {
           setTickets(prev => prev.map(t => t.id === ticketId ? {
             ...t,
@@ -614,9 +855,9 @@ export function AIAgent({
             content: entry.content,
             timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
           }));
-          setMessages(restored);
+          setSupportMessages(restored);
         } else {
-          setMessages([]);
+          setSupportMessages([]);
         }
       }
     } catch (err) {
@@ -628,9 +869,9 @@ export function AIAgent({
           content: entry.content,
           timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now()
         }));
-        setMessages(restored);
+        setSupportMessages(restored);
       } else {
-        setMessages([]);
+        setSupportMessages([]);
       }
     }
 
@@ -638,10 +879,26 @@ export function AIAgent({
     // otherwise create a fresh connection from the ticket's stored wsUrl.
     const cached = pendingSocketsRef.current.get(ticketId);
     if (cached) {
-      pendingSocketsRef.current.delete(ticketId);
-      setSupportSocket(cached);
-      logger.info('AIAgent', '★ Reusing cached escalation socket for ticket:', ticketId);
-      return;
+      // If the socket errored (not just cleanly disconnected), discard it and
+      // fall through to create a fresh one — reusing an errored socket causes
+      // sendText to silently return false → "Connection lost" on every message.
+      if (cached.hasErrored) {
+        logger.warn('AIAgent', '★ Cached socket errored — discarding and creating fresh socket for ticket:', ticketId);
+        cached.disconnect();
+        pendingSocketsRef.current.delete(ticketId);
+        // Fall through to fresh socket creation below
+      } else {
+        pendingSocketsRef.current.delete(ticketId);
+        // If the cached socket was created before wsUrl was available (e.g. during
+        // on-mount restore), it may never have connected. Reconnect it now.
+        if (!cached.isConnected && freshWsUrl) {
+          logger.info('AIAgent', '★ Cached socket not connected — reconnecting with wsUrl:', freshWsUrl);
+          cached.connect(freshWsUrl);
+        }
+        setSupportSocket(cached);
+        logger.info('AIAgent', '★ Reusing cached escalation socket for ticket:', ticketId);
+        return;
+      }
     }
     const socket = new EscalationSocket({
       onReply: reply => {
@@ -666,7 +923,7 @@ export function AIAgent({
             content: reply,
             timestamp: Date.now()
           };
-          setMessages(prev => [...prev, msg]);
+          setSupportMessages(prev => [...prev, msg]);
           setLastResult({
             success: true,
             message: `👤 ${reply}`,
@@ -694,7 +951,11 @@ export function AIAgent({
       },
       onError: err => logger.error('AIAgent', '★ Socket error on select:', err)
     });
-    socket.connect(ticket.wsUrl);
+    if (freshWsUrl) {
+      socket.connect(freshWsUrl);
+    } else {
+      logger.warn('AIAgent', '★ Ticket has no wsUrl — skipping socket connect for ticket:', ticketId);
+    }
     setSupportSocket(socket);
   }, [tickets, supportSocket, selectedTicketId, analyticsKey, clearSupport]);
   const handleBackToTickets = useCallback(() => {
@@ -709,18 +970,23 @@ export function AIAgent({
       }
       return null;
     });
+    logger.info('AIAgent', '★ Back to tickets');
     setSelectedTicketId(null);
-    setMessages([]);
+    setSupportMessages([]);
     setIsLiveAgentTyping(false);
   }, []); // No dependencies — uses refs/functional setters
 
   const mergedCustomTools = useMemo(() => {
-    if (!autoEscalateTool) return customTools;
     return {
-      escalate_to_human: autoEscalateTool,
+      ...(autoEscalateTool ? {
+        escalate_to_human: autoEscalateTool
+      } : {}),
+      ...(autoReportIssueTool ? {
+        report_issue: autoReportIssueTool
+      } : {}),
       ...customTools
     };
-  }, [autoEscalateTool, customTools]);
+  }, [autoEscalateTool, autoReportIssueTool, customTools]);
 
   // ─── Voice/Live Mode State ──────────────────────────────────
   const [mode, setMode] = useState('text');
@@ -746,6 +1012,17 @@ export function AIAgent({
 
   // Ref-based resolver for ask_user — stays alive across renders
   const askUserResolverRef = useRef(null);
+  const pendingAskUserKindRef = useRef(null);
+  // Tracks whether we're waiting for a BUTTON tap (not just any text answer).
+  // Set true when kind='approval' is issued; cleared ONLY on actual button tap.
+  // Forces kind='approval' on all subsequent ask_user calls until resolved.
+  const pendingAppApprovalRef = useRef(false);
+  // Stores a message typed by the user while the agent is still thinking (mid-approval flow).
+  // Auto-resolved into the next ask_user call to prevent the message being lost.
+  const queuedApprovalAnswerRef = useRef(null);
+  const [pendingApprovalQuestion, setPendingApprovalQuestion] = useState(null);
+  const overlayVisible = isThinking || !!pendingApprovalQuestion;
+  const overlayStatusText = pendingApprovalQuestion ? 'Waiting for your approval...' : statusText;
 
   // ─── Create Runtime ──────────────────────────────────────────
 
@@ -775,7 +1052,7 @@ export function AIAgent({
     pathname,
     onStatusUpdate: setStatusText,
     onTokenUsage,
-    knowledgeBase,
+    knowledgeBase: resolvedKnowledgeBase,
     knowledgeMaxTokens,
     enableUIControl,
     screenMap: useScreenMap ? screenMap : undefined,
@@ -783,13 +1060,65 @@ export function AIAgent({
     maxCostUSD,
     interactionMode,
     // Block the agent loop until user responds
-    onAskUser: mode === 'voice' ? undefined : question => {
+    onAskUser: mode === 'voice' ? undefined : request => {
       return new Promise(resolve => {
+        const normalized = typeof request === 'string' ? {
+          question: request,
+          kind: 'freeform'
+        } : request;
+        const question = normalized.question;
+        const kind = normalized.kind || 'freeform';
+        logger.info('AIAgent', `❓ onAskUser invoked in ${mode} mode: "${question}"`);
+        telemetryRef.current?.track('agent_trace', {
+          stage: 'ask_user_prompt_rendered',
+          question,
+          mode,
+          kind
+        });
         askUserResolverRef.current = resolve;
-        // Show question in chat bar, allow user input
+        logger.info('AIAgent', `📌 askUserResolverRef SET (resolver stored) | kind=${kind} | pendingAppApprovalRef=${pendingAppApprovalRef.current}`);
+        // If we're already waiting for a button tap, force approval kind regardless
+        // of what the model passed — the user must tap a button to proceed.
+        const forcedKind = pendingAppApprovalRef.current ? 'approval' : kind;
+        pendingAskUserKindRef.current = forcedKind;
+        if (forcedKind === 'approval') {
+          pendingAppApprovalRef.current = true;
+        }
+
+        // If the user typed a message while we were thinking (queued answer),
+        // resolve immediately with that message instead of blocking on a new prompt.
+        const queued = queuedApprovalAnswerRef.current;
+        if (queued !== null) {
+          queuedApprovalAnswerRef.current = null;
+          logger.info('AIAgent', `⚡ Auto-resolving ask_user with queued message: "${queued}"`);
+          // Show the AI question in chat, clear the approval buttons (no resolver for them),
+          // then immediately resolve the Promise with the queued message.
+          setMessages(prev => [...prev, {
+            id: `assistant-ask-${Date.now()}`,
+            role: 'assistant',
+            content: question,
+            timestamp: Date.now(),
+            promptKind: forcedKind === 'approval' ? 'approval' : undefined
+          }]);
+          askUserResolverRef.current = null;
+          pendingAskUserKindRef.current = null;
+          pendingAppApprovalRef.current = false; // CRITICAL FIX: Unlock the agent state
+          setPendingApprovalQuestion(null); // clear any stale buttons — buttons with no resolver = dead tap
+          resolve(queued);
+          return;
+        }
+        setPendingApprovalQuestion(forcedKind === 'approval' ? question : null);
+        // Add AI question to the message thread so it appears in chat
+        setMessages(prev => [...prev, {
+          id: `assistant-ask-${Date.now()}`,
+          role: 'assistant',
+          content: question,
+          timestamp: Date.now(),
+          promptKind: kind === 'approval' ? 'approval' : undefined
+        }]);
         setLastResult({
           success: true,
-          message: `❓ ${question}`,
+          message: question,
           steps: []
         });
         setIsThinking(false);
@@ -800,8 +1129,20 @@ export function AIAgent({
     // so that AI-driven taps are never tracked as user_interaction events.
     onToolExecute: active => {
       telemetryRef.current?.setAgentActing(active);
+    },
+    onTrace: event => {
+      telemetryRef.current?.track('agent_trace', {
+        traceId: event.traceId,
+        stage: event.stage,
+        stepIndex: event.stepIndex,
+        screenName: event.screenName,
+        ...(event.data ?? {})
+      });
     }
-  }), [mode, apiKey, proxyUrl, proxyHeaders, voiceProxyUrl, voiceProxyHeaders, model, maxSteps, interactiveBlacklist, interactiveWhitelist, onBeforeStep, onAfterStep, onBeforeTask, onAfterTask, transformScreenContent, customTools, instructions, stepDelay, mcpServerUrl, router, pathname, onTokenUsage, knowledgeBase, knowledgeMaxTokens, enableUIControl, screenMap, useScreenMap, maxTokenBudget, maxCostUSD]);
+  }), [mode, apiKey, proxyUrl, proxyHeaders, voiceProxyUrl, voiceProxyHeaders, model, maxSteps, interactiveBlacklist, interactiveWhitelist, onBeforeStep, onAfterStep, onBeforeTask, onAfterTask, transformScreenContent, customTools, instructions, stepDelay, mcpServerUrl, router, pathname, onTokenUsage, resolvedKnowledgeBase, knowledgeMaxTokens, enableUIControl, screenMap, useScreenMap, maxTokenBudget, maxCostUSD, interactionMode]);
+  useEffect(() => {
+    logger.info('AIAgent', `⚙️ Runtime config recomputed: mode=${mode} interactionMode=${interactionMode || 'copilot(default)'} onAskUser=${mode !== 'voice'} mergedTools=${Object.keys(mergedCustomTools).join(', ') || '(none)'}`);
+  }, [mode, interactionMode, mergedCustomTools]);
   const provider = useMemo(() => createProvider(providerName, apiKey, model, proxyUrl, proxyHeaders), [providerName, apiKey, model, proxyUrl, proxyHeaders]);
   const runtime = useMemo(() => new AgentRuntime(provider, config, rootViewRef.current, navRef),
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -827,15 +1168,59 @@ export function AIAgent({
         analyticsKey,
         analyticsProxyUrl,
         analyticsProxyHeaders,
-        debug
+        debug,
+        onEvent: event => {
+          // Proactive behavior triggers
+          if (event.type === 'rage_tap' || event.type === 'error_screen' || event.type === 'repeated_navigation') {
+            idleDetectorRef.current?.triggerBehavior(event.type, event.screen);
+          }
+
+          // Customer Success features
+          if (customerSuccess?.enabled && event.type === 'user_interaction' && event.data) {
+            const action = String(event.data.label || event.data.action || '');
+
+            // Check milestones
+            customerSuccess.successMilestones?.forEach(m => {
+              if (m.action && m.action === action) {
+                telemetry.track('health_signal', {
+                  type: 'success_milestone',
+                  milestone: m.name
+                });
+              }
+            });
+
+            // Check key feature adoption
+            customerSuccess.keyFeatures?.forEach(feature => {
+              if (action.includes(feature) || action === feature) {
+                telemetry.track('health_signal', {
+                  type: 'feature_adoption',
+                  feature
+                });
+              }
+            });
+          }
+        }
       });
       telemetryRef.current = telemetry;
       bindTelemetryService(telemetry);
       telemetry.start();
-      const initialRoute = navRef?.getCurrentRoute?.();
-      if (initialRoute?.name) {
-        telemetry.setScreen(initialRoute.name);
-      }
+      // NavigationContainer is a child of AIAgent, so navRef may not be
+      // ready yet when this effect runs. Poll briefly until it's available.
+      const resolveInitialScreen = () => {
+        let attempts = 0;
+        const maxAttempts = 15; // 15 × 200ms = 3s max wait
+        const timer = setInterval(() => {
+          attempts++;
+          const route = navRef?.getCurrentRoute?.();
+          if (route?.name) {
+            telemetry.setScreen(route.name);
+            clearInterval(timer);
+          } else if (attempts >= maxAttempts) {
+            clearInterval(timer);
+          }
+        }, 200);
+      };
+      resolveInitialScreen();
     }); // initDeviceId
   }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, bindTelemetryService, debug, navRef]);
 
@@ -851,14 +1236,48 @@ export function AIAgent({
   // Track screen changes via navRef
   useEffect(() => {
     if (!navRef?.addListener || !telemetryRef.current) return;
+    const checkScreenMilestone = screenName => {
+      telemetryRef.current?.setScreen(screenName);
+      if (customerSuccess?.enabled) {
+        customerSuccess.successMilestones?.forEach(m => {
+          if (m.screen && m.screen === screenName) {
+            telemetryRef.current?.track('health_signal', {
+              type: 'success_milestone',
+              milestone: m.name
+            });
+          }
+        });
+      }
+      if (isOnboardingActive && onboarding?.steps) {
+        const step = onboarding.steps[currentOnboardingIndex];
+        if (step && step.screen === screenName) {
+          telemetryRef.current?.track('onboarding_step', {
+            step_index: currentOnboardingIndex,
+            screen: screenName,
+            action: step.action || 'view'
+          });
+
+          // Pop the onboarding badge instantly
+          setTimeout(() => {
+            setProactiveBadgeText(step.message);
+            setProactiveStage('badge');
+            // Stop typical idle timers so it stays until dismissed or advanced
+            idleDetectorRef.current?.dismiss();
+
+            // Auto advance logic
+            advanceOnboarding();
+          }, 300);
+        }
+      }
+    };
     const unsubscribe = navRef.addListener('state', () => {
       const currentRoute = navRef.getCurrentRoute?.();
       if (currentRoute?.name) {
-        telemetryRef.current?.setScreen(currentRoute.name);
+        checkScreenMilestone(currentRoute.name);
       }
     });
     return () => unsubscribe?.();
-  }, [navRef]);
+  }, [navRef, customerSuccess, isOnboardingActive, onboarding, currentOnboardingIndex, advanceOnboarding]);
 
   // ─── MCP Bridge ──────────────────────────────────────────────
 
@@ -895,7 +1314,8 @@ export function AIAgent({
         setProactiveStage('badge');
       },
       onReset: () => setProactiveStage('hidden'),
-      generateSuggestion: () => proactiveHelp?.generateSuggestion?.(telemetryRef.current?.screen || 'Home') || proactiveHelp?.badgeText || "Need help with this screen?"
+      generateSuggestion: () => proactiveHelp?.generateSuggestion?.(telemetryRef.current?.screen || 'Home') || proactiveHelp?.badgeText || "Need help with this screen?",
+      behaviorTriggers: proactiveHelp?.behaviorTriggers
     });
     return () => {
       idleDetectorRef.current?.destroy();
@@ -940,7 +1360,7 @@ export function AIAgent({
     if (!audioOutputRef.current) {
       logger.info('AIAgent', 'Creating AudioOutputService...');
       audioOutputRef.current = new AudioOutputService({
-        onError: err => logger.error('AIAgent', `AudioOutput error: ${err}`)
+        onError: err => logger.warn('AIAgent', `AudioOutput error/disabled: ${err}`)
       });
       // IMPORTANT: Must await initialize() BEFORE starting mic.
       // initialize() calls setAudioSessionOptions which reconfigures the
@@ -960,7 +1380,7 @@ export function AIAgent({
           logger.info('AIAgent', `🎤 onAudioChunk: ${chunk.length} chars, voiceService=${!!voiceServiceRef.current}, connected=${voiceServiceRef.current?.isConnected}`);
           voiceServiceRef.current?.sendAudio(chunk);
         },
-        onError: err => logger.error('AIAgent', `AudioInput error: ${err}`),
+        onError: err => logger.warn('AIAgent', `AudioInput error/disabled: ${err}`),
         onPermissionDenied: () => logger.warn('AIAgent', 'Mic permission denied by user')
       });
     }
@@ -1060,6 +1480,11 @@ export function AIAgent({
         }
         toolLockRef.current = true;
         try {
+          // Trigger visual 'thinking' overlay down to ChatBar so user knows action is happening
+          setIsThinking(true);
+          const toolNameFriendly = toolCall.name.replace(/_/g, ' ');
+          setStatusText(`Executing ${toolNameFriendly}...`);
+
           // Execute the tool via AgentRuntime and send result back to Gemini
           const result = await runtime.executeTool(toolCall.name, toolCall.args);
           logger.info('AIAgent', `🔧 Tool result for ${toolCall.name}: ${result}`);
@@ -1079,6 +1504,9 @@ export function AIAgent({
           logger.info('AIAgent', `📡 Tool response sent for ${toolCall.name} [id=${toolCall.id}]`);
         } finally {
           toolLockRef.current = false;
+          setIsThinking(false);
+          setStatusText('');
+
           // Resume mic after tool response is sent
           if (voiceServiceRef.current?.isConnected) {
             audioInputRef.current?.start().then(ok => {
@@ -1185,6 +1613,21 @@ export function AIAgent({
 
   const handleSend = useCallback(async (message, options) => {
     if (!message.trim() || isThinking) return;
+
+    // ── Apple Guideline 5.1.2(i): Consent gate ──────────────────
+    // If consent is required but not yet granted, show the consent dialog
+    // instead of sending data to the AI provider.
+    // EXCEPTION: bypass consent when talking to a human agent —
+    // this is a person-to-person chat, not AI data processing.
+    const isHumanAgentChat = !!(selectedTicketId && supportSocket);
+    if (consentGateActive && !isHumanAgentChat) {
+      pendingConsentSendRef.current = {
+        message: message.trim(),
+        options
+      };
+      setShowConsentDialog(true);
+      return;
+    }
     logger.info('AIAgent', `User message: "${message}"`);
     setLastUserMessage(message.trim());
 
@@ -1203,7 +1646,7 @@ export function AIAgent({
         return;
       }
       if (supportSocket.sendText(message)) {
-        setMessages(prev => [...prev, {
+        setSupportMessages(prev => [...prev, {
           id: `user-${Date.now()}`,
           role: 'user',
           content: message.trim(),
@@ -1235,74 +1678,302 @@ export function AIAgent({
 
     // If there's a pending ask_user, resolve it instead of starting a new execution
     if (askUserResolverRef.current) {
+      if (pendingAskUserKindRef.current === 'approval') {
+        const resolver = askUserResolverRef.current;
+        askUserResolverRef.current = null;
+        pendingAskUserKindRef.current = null;
+        pendingAppApprovalRef.current = false; // CRITICAL FIX: Unlock the agent state
+        setPendingApprovalQuestion(null);
+
+        // Pass the user's conversational message directly back to the active prompt resolver.
+        // It will NOT be treated as a rejection! It will be passed back to the LLM.
+        telemetryRef.current?.track('agent_trace', {
+          stage: 'approval_interrupted_by_user_question',
+          message: message.trim()
+        });
+        setIsThinking(true);
+        setStatusText('Answering your question...');
+        setLastResult(null);
+        resolver(message.trim());
+        return;
+      }
       const resolver = askUserResolverRef.current;
       askUserResolverRef.current = null;
+      pendingAskUserKindRef.current = null;
+      pendingAppApprovalRef.current = false; // CRITICAL FIX: Unlock the agent state
+      setPendingApprovalQuestion(null);
       setIsThinking(true);
       setStatusText('Processing your answer...');
       setLastResult(null);
+      logger.info('AIAgent', `✅ Resolving pending ask_user with: "${message.trim()}"`);
+      telemetryRef.current?.track('agent_trace', {
+        stage: 'ask_user_answer_submitted',
+        answer: message.trim(),
+        mode
+      });
       resolver(message);
       return;
     }
 
+    // Guard: if we're mid-approval flow (waiting for button tap) but no resolver exists yet
+    // (agent is still thinking between ask_user calls), do NOT start a new task —
+    // that would spawn two concurrent agent loops and freeze the app.
+    // Instead, store the message as a queued answer that will auto-resolve on the next ask_user.
+    if (pendingAppApprovalRef.current) {
+      logger.warn('AIAgent', '⚠️ User typed during active approval flow — queuing message, not spawning new task');
+      queuedApprovalAnswerRef.current = message.trim();
+      return;
+    }
+
     // Normal execution — new task
+    // Reset approval gate refs so previous conversations don't bleed state
+    pendingAppApprovalRef.current = false;
+    queuedApprovalAnswerRef.current = null;
     setIsThinking(true);
     setStatusText('Thinking...');
     setLastResult(null);
+    logger.info('AIAgent', `📨 New user request received in ${mode} mode | interactionMode=${interactionMode || 'copilot(default)'} | text="${message.trim()}"`);
 
     // Telemetry: track agent request
     telemetryRef.current?.track('agent_request', {
-      query: message.trim()
+      query: message.trim(),
+      transcript: message.trim(),
+      mode
+    });
+    telemetryRef.current?.track('agent_trace', {
+      stage: 'request_received',
+      query: message.trim(),
+      mode,
+      interactionMode: interactionMode || 'copilot'
     });
     try {
+      // ─── Business-grade escalation policy ───
+      const FRUSTRATION_REGEX = /\b(angry|frustrated|useless|terrible|hate|worst|ridiculous|awful)\b/i;
+      const HIGH_RISK_ESCALATION_REGEX = /\b(human|agent|representative|supervisor|manager|refund|chargeback|charged|billing|payment|fraud|scam|lawsuit|attorney|lawyer|sue|legal|privacy|data breach|account locked|can't log in|cannot log in)\b/i;
+      const escalateTool = customTools?.['escalate_to_human'] || autoEscalateTool;
+      const priorFrustrationCount = messages.filter(m => m.role === 'user' && typeof m.content === 'string' && FRUSTRATION_REGEX.test(m.content)).length;
+      if (escalateTool && !selectedTicketId) {
+        if (HIGH_RISK_ESCALATION_REGEX.test(message)) {
+          logger.warn('AIAgent', 'High-risk support signal detected — auto-escalating to human');
+          telemetryRef.current?.track('business_escalation', {
+            message,
+            trigger: 'high_risk'
+          });
+          const escalationResult = await escalateTool.execute({
+            reason: `Customer needs human support: ${message.trim()}`
+          });
+          const customerMessage = typeof escalationResult === 'string' && escalationResult.trim().length > 0 ? escalationResult.replace(/^ESCALATED:\s*/i, '') : 'Your request has been sent to our support team. A human agent will reply here as soon as possible.';
+          const res = {
+            success: true,
+            message: customerMessage,
+            steps: [{
+              stepIndex: 0,
+              reflection: {
+                previousGoalEval: '',
+                memory: '',
+                plan: 'Escalate to human support for a high-risk or explicitly requested issue'
+              },
+              action: {
+                name: 'escalate_to_human',
+                input: {
+                  reason: 'business_escalation'
+                },
+                output: 'Escalated'
+              }
+            }]
+          };
+          setLastResult(res);
+          setMessages(prev => [...prev, {
+            id: `assistant-${Date.now()}`,
+            role: 'assistant',
+            content: res.message,
+            timestamp: Date.now(),
+            result: res
+          }]);
+          setIsThinking(false);
+          setStatusText('');
+          return;
+        }
+        if (FRUSTRATION_REGEX.test(message)) {
+          const frustrationMessage = priorFrustrationCount > 0 ? "I'm sorry this has been frustrating. I can keep helping here, or I can connect you with a human support agent if you'd prefer." : "I'm sorry this has been frustrating. Tell me what went wrong, and I'll do my best to fix it.";
+          const res = {
+            success: true,
+            message: frustrationMessage,
+            steps: [{
+              stepIndex: 0,
+              reflection: {
+                previousGoalEval: '',
+                memory: '',
+                plan: priorFrustrationCount > 0 ? 'Acknowledge repeated frustration and offer escalation without forcing a handoff' : 'Acknowledge first-time frustration and continue trying to resolve the issue'
+              },
+              action: {
+                name: 'done',
+                input: {},
+                output: frustrationMessage
+              }
+            }]
+          };
+          setLastResult(res);
+          setMessages(prev => [...prev, {
+            id: `assistant-${Date.now()}`,
+            role: 'assistant',
+            content: frustrationMessage,
+            timestamp: Date.now(),
+            result: res
+          }]);
+          setIsThinking(false);
+          setStatusText('');
+          return;
+        }
+      }
+
       // Ensure we have the latest Fiber tree ref
       runtime.updateRefs(rootViewRef.current, navRef);
       const result = await runtime.execute(message, messages);
+      let normalizedResult = result;
+      const reportStep = result.steps?.find(step => step.action.name === 'report_issue');
+      if (reportStep && typeof reportStep.action.output === 'string') {
+        const match = /^ISSUE_REPORTED:([^:]+):([^:]*):([\s\S]+)$/i.exec(reportStep.action.output);
+        if (match) {
+          const [, _issueId, historyId, customerMessage] = match;
+          const resolvedCustomerMessage = customerMessage || reportStep.action.output;
+          if (historyId) {
+            seenReportedIssueUpdatesRef.current.add(historyId);
+          }
+          normalizedResult = {
+            ...result,
+            message: resolvedCustomerMessage,
+            steps: result.steps.map(step => step === reportStep ? {
+              ...step,
+              action: {
+                ...step.action,
+                output: resolvedCustomerMessage
+              }
+            } : step)
+          };
+        }
+      }
 
       // Telemetry: track agent completion and per-step details
       if (telemetryRef.current) {
-        for (const step of result.steps ?? []) {
+        if (!agentFrtFiredRef.current) {
+          agentFrtFiredRef.current = true;
+          telemetryRef.current.track('agent_first_response');
+        }
+        for (const step of normalizedResult.steps ?? []) {
           telemetryRef.current.track('agent_step', {
+            stepIndex: step.stepIndex,
             tool: step.action.name,
             args: step.action.input,
-            result: typeof step.action.output === 'string' ? step.action.output.substring(0, 200) : String(step.action.output)
+            result: typeof step.action.output === 'string' ? step.action.output : String(step.action.output),
+            plan: step.reflection.plan,
+            memory: step.reflection.memory,
+            previousGoalEval: step.reflection.previousGoalEval
           });
         }
         telemetryRef.current.track('agent_complete', {
-          success: result.success,
-          steps: result.steps?.length ?? 0,
-          tokens: result.tokenUsage?.totalTokens ?? 0,
-          cost: result.tokenUsage?.estimatedCostUSD ?? 0
+          success: normalizedResult.success,
+          steps: normalizedResult.steps?.length ?? 0,
+          tokens: normalizedResult.tokenUsage?.totalTokens ?? 0,
+          cost: normalizedResult.tokenUsage?.estimatedCostUSD ?? 0,
+          response: normalizedResult.message,
+          conversation: {
+            user: message.trim(),
+            assistant: normalizedResult.message
+          }
         });
       }
-      logger.info('AIAgent', '★ handleSend — SETTING lastResult:', result.message.substring(0, 80), '| mode:', mode);
+      logger.info('AIAgent', '★ handleSend — SETTING lastResult:', normalizedResult.message.substring(0, 80), '| mode:', mode);
       logger.info('AIAgent', '★ handleSend — tickets:', tickets.length, 'selectedTicketId:', selectedTicketId);
 
       // Don't overwrite lastResult if escalation already switched us to human mode
       // (mode in this closure is stale — the actual mode may have changed during async execution)
-      const stepsHadEscalation = result.steps?.some(s => s.action.name === 'escalate_to_human');
+      const stepsHadEscalation = normalizedResult.steps?.some(s => s.action.name === 'escalate_to_human');
       if (!stepsHadEscalation) {
-        setLastResult(result);
+        setLastResult(normalizedResult);
       }
-      setMessages(prev => [...prev, {
+      const assistantMsg = {
         id: Date.now().toString() + Math.random(),
         role: 'assistant',
-        content: result.message,
+        content: normalizedResult.message,
         timestamp: Date.now(),
-        result
-      }]);
+        result: normalizedResult
+      };
+      setMessages(prev => [...prev, assistantMsg]);
+
+      // ── Persist to backend (debounced 600ms) ─────────────────────
+      if (analyticsKey) {
+        if (appendDebounceRef.current) clearTimeout(appendDebounceRef.current);
+        appendDebounceRef.current = setTimeout(async () => {
+          try {
+            await initDeviceId();
+            const deviceId = getDeviceId();
+            // Read current messages directly from ref — never use setMessages() to read state
+            const currentMsgs = messagesRef.current;
+            const newMsgs = currentMsgs.slice(lastSavedMessageCountRef.current);
+            if (newMsgs.length === 0) return;
+            if (!activeConversationIdRef.current) {
+              // First exchange — create a new conversation
+              const id = await ConversationService.startConversation({
+                analyticsKey: analyticsKey,
+                userId: userContext?.userId,
+                deviceId: deviceId || undefined,
+                messages: newMsgs
+              });
+              if (id) {
+                activeConversationIdRef.current = id;
+                lastSavedMessageCountRef.current = currentMsgs.length;
+                const newSummary = {
+                  id,
+                  title: newMsgs.find(m => m.role === 'user')?.content?.slice(0, 80) || 'New conversation',
+                  preview: assistantMsg.content.slice(0, 100),
+                  previewRole: 'assistant',
+                  messageCount: newMsgs.length,
+                  createdAt: Date.now(),
+                  updatedAt: Date.now()
+                };
+                setConversations(prev => [newSummary, ...prev]);
+                logger.info('AIAgent', `Conversation created: ${id}`);
+              }
+            } else {
+              // Subsequent turns — append only new messages
+              await ConversationService.appendMessages({
+                conversationId: activeConversationIdRef.current,
+                analyticsKey: analyticsKey,
+                messages: newMsgs
+              });
+              lastSavedMessageCountRef.current = currentMsgs.length;
+              setConversations(prev => prev.map(c => c.id === activeConversationIdRef.current ? {
+                ...c,
+                preview: assistantMsg.content.slice(0, 100),
+                updatedAt: Date.now(),
+                messageCount: c.messageCount + newMsgs.length
+              } : c));
+              logger.info('AIAgent', `Conversation appended: ${activeConversationIdRef.current}`);
+            }
+          } catch (err) {
+            logger.warn('AIAgent', 'Failed to persist conversation:', err);
+          }
+        }, 600);
+      }
       if (options?.onResult) {
-        options.onResult(result);
+        options.onResult(normalizedResult);
       } else {
-        onResult?.(result);
+        onResult?.(normalizedResult);
       }
-      logger.info('AIAgent', `Result: ${result.success ? '✅' : '❌'} ${result.message}`);
+      logger.info('AIAgent', `Result: ${normalizedResult.success ? '✅' : '❌'} ${normalizedResult.message}`);
     } catch (error) {
       logger.error('AIAgent', 'Execution failed:', error);
 
       // Telemetry: track agent failure
       telemetryRef.current?.track('agent_complete', {
         success: false,
-        error: error.message
+        error: error.message,
+        response: `Error: ${error.message}`,
+        conversation: {
+          user: message.trim(),
+          assistant: `Error: ${error.message}`
+        }
       });
       setLastResult({
         success: false,
@@ -1313,7 +1984,21 @@ export function AIAgent({
       setIsThinking(false);
       setStatusText('');
     }
-  }, [runtime, navRef, onResult, messages, isThinking]);
+  }, [runtime, navRef, onResult, messages, isThinking, consentGateActive]);
+  useEffect(() => {
+    if (consentGateActive) return;
+    const pending = pendingConsentSendRef.current;
+    if (!pending) return;
+    pendingConsentSendRef.current = null;
+    void handleSend(pending.message, pending.options);
+  }, [consentGateActive, handleSend]);
+  useEffect(() => {
+    if (isThinking) return;
+    const pending = pendingFollowUpAfterApprovalRef.current;
+    if (!pending) return;
+    pendingFollowUpAfterApprovalRef.current = null;
+    void handleSend(pending.message, pending.options);
+  }, [isThinking, handleSend]);
 
   // ─── Context value (for useAI bridge) ─────────────────────────
 
@@ -1322,6 +2007,33 @@ export function AIAgent({
     setIsThinking(false);
     setStatusText('');
   }, [runtime]);
+
+  // ─── Conversation History Handlers ─────────────────────────────
+
+  const handleConversationSelect = useCallback(async conversationId => {
+    if (!analyticsKey) return;
+    try {
+      const msgs = await ConversationService.fetchConversation({
+        conversationId,
+        analyticsKey
+      });
+      if (msgs) {
+        activeConversationIdRef.current = conversationId;
+        lastSavedMessageCountRef.current = msgs.length;
+        setMessages(msgs);
+        setLastResult(null);
+      }
+    } catch (err) {
+      logger.warn('AIAgent', 'Failed to load conversation:', err);
+    }
+  }, [analyticsKey]);
+  const handleNewConversation = useCallback(() => {
+    activeConversationIdRef.current = null;
+    lastSavedMessageCountRef.current = 0;
+    setMessages([]);
+    setLastResult(null);
+    setLastUserMessage(null);
+  }, []);
   const contextValue = useMemo(() => ({
     runtime,
     send: handleSend,
@@ -1348,7 +2060,7 @@ export function AIAgent({
           // Skip if the AI agent is currently executing a tool — those are
           // already tracked as `agent_step` events with full context.
           if (telemetryRef.current && !telemetryRef.current.isAgentActing) {
-            const label = extractTouchLabel(event.nativeEvent);
+            const label = extractTouchLabel(event);
             if (label && label !== 'Unknown Element' && label !== '[pressable]') {
               telemetryRef.current.track('user_interaction', {
                 type: 'tap',
@@ -1381,91 +2093,145 @@ export function AIAgent({
           },
           children: children
         })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.floatingLayer,
-        pointerEvents: "box-none",
-        children: [/*#__PURE__*/_jsx(HighlightOverlay, {}), /*#__PURE__*/_jsx(AgentOverlay, {
-          visible: isThinking,
-          statusText: statusText,
-          onCancel: handleCancel
-        }), showChatBar && /*#__PURE__*/_jsx(ProactiveHint, {
-          stage: proactiveStage,
-          badgeText: proactiveBadgeText,
-          onDismiss: () => idleDetectorRef.current?.dismiss(),
-          children: /*#__PURE__*/_jsx(AgentChatBar, {
+      }), /*#__PURE__*/_jsx(FloatingOverlayWrapper, {
+        fallbackStyle: styles.floatingLayer,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: StyleSheet.absoluteFill,
+          pointerEvents: "box-none",
+          children: [/*#__PURE__*/_jsx(HighlightOverlay, {}), showChatBar && /*#__PURE__*/_jsx(ProactiveHint, {
+            stage: proactiveStage,
+            badgeText: proactiveBadgeText,
+            onDismiss: () => idleDetectorRef.current?.dismiss(),
+            children: /*#__PURE__*/_jsx(AgentChatBar, {
+              onSend: handleSend,
+              isThinking: isThinking,
+              statusText: overlayStatusText,
+              lastResult: lastResult,
+              lastUserMessage: lastUserMessage,
+              chatMessages: messages,
+              pendingApprovalQuestion: pendingApprovalQuestion,
+              onPendingApprovalAction: action => {
+                const resolver = askUserResolverRef.current;
+                logger.info('AIAgent', `🔘 Approval button tapped: action=${action} | resolver=${resolver ? 'EXISTS' : 'NULL'} | pendingApprovalQuestion="${pendingApprovalQuestion}" | pendingAppApprovalRef=${pendingAppApprovalRef.current}`);
+                if (!resolver) {
+                  logger.error('AIAgent', '🚫 ABORT: resolver is null when button was tapped — this means ask_user Promise was already resolved without clearing the buttons. This is a state sync bug.');
+                  return;
+                }
+                askUserResolverRef.current = null;
+                pendingAskUserKindRef.current = null;
+                // Button was actually tapped — clear the approval gate and any queued message
+                pendingAppApprovalRef.current = false;
+                queuedApprovalAnswerRef.current = null;
+                setPendingApprovalQuestion(null);
+                const response = action === 'approve' ? '__APPROVAL_GRANTED__' : '__APPROVAL_REJECTED__';
+                // Restore the thinking overlay so the user can see the agent working
+                // after approval. onAskUser set isThinking=false when buttons appeared,
+                // but the agent is still running — restore the visual indicator.
+                if (action === 'approve') {
+                  setIsThinking(true);
+                  setStatusText('Working...');
+                }
+                telemetryRef.current?.track('agent_trace', {
+                  stage: 'approval_button_pressed',
+                  action
+                });
+                resolver(response);
+              },
+              language: 'en',
+              onDismiss: () => {
+                setLastResult(null);
+                setLastUserMessage(null);
+              },
+              theme: accentColor || theme ? {
+                ...(accentColor ? {
+                  primaryColor: accentColor
+                } : {}),
+                ...theme
+              } : undefined,
+              availableModes: availableModes,
+              mode: mode,
+              onModeChange: newMode => {
+                logger.info('AIAgent', '★ onModeChange:', mode, '→', newMode, '| tickets:', tickets.length, 'selectedTicketId:', selectedTicketId);
+                setMode(newMode);
+              },
+              isMicActive: isMicActive,
+              isSpeakerMuted: isSpeakerMuted,
+              isAISpeaking: isAISpeaking,
+              isAgentTyping: isLiveAgentTyping,
+              onStopSession: stopVoiceSession,
+              isVoiceConnected: isVoiceConnected,
+              onMicToggle: active => {
+                if (active && !isVoiceConnected) {
+                  logger.warn('AIAgent', 'Cannot toggle mic — VoiceService not connected yet');
+                  return;
+                }
+                logger.info('AIAgent', `Mic toggle: ${active ? 'ON' : 'OFF'}`);
+                setIsMicActive(active);
+                if (active) {
+                  logger.info('AIAgent', 'Starting AudioInput...');
+                  audioInputRef.current?.start().then(ok => {
+                    logger.info('AIAgent', `AudioInput start result: ${ok}`);
+                  });
+                } else {
+                  logger.info('AIAgent', 'Stopping AudioInput...');
+                  audioInputRef.current?.stop();
+                }
+              },
+              onSpeakerToggle: muted => {
+                logger.info('AIAgent', `Speaker toggle: ${muted ? 'MUTED' : 'UNMUTED'}`);
+                setIsSpeakerMuted(muted);
+                if (muted) {
+                  audioOutputRef.current?.mute();
+                } else {
+                  audioOutputRef.current?.unmute();
+                }
+              },
+              tickets: tickets,
+              selectedTicketId: selectedTicketId,
+              onTicketSelect: handleTicketSelect,
+              onBackToTickets: handleBackToTickets,
+              autoExpandTrigger: autoExpandTrigger,
+              unreadCounts: unreadCounts,
+              totalUnread: totalUnread,
+              showDiscoveryTooltip: tooltipVisible,
+              discoveryTooltipMessage: discoveryTooltipMessage,
+              onTooltipDismiss: handleTooltipDismiss,
+              conversations: conversations,
+              isLoadingHistory: isLoadingHistory,
+              onConversationSelect: handleConversationSelect,
+              onNewConversation: handleNewConversation
+            })
+          }), /*#__PURE__*/_jsx(AgentOverlay, {
+            visible: overlayVisible,
+            statusText: overlayStatusText,
+            onCancel: handleCancel
+          }), /*#__PURE__*/_jsx(SupportChatModal, {
+            visible: mode === 'human' && !!selectedTicketId,
+            messages: supportMessages,
             onSend: handleSend,
+            onClose: handleBackToTickets,
+            isAgentTyping: isLiveAgentTyping,
             isThinking: isThinking,
-            lastResult: lastResult,
-            lastUserMessage: lastUserMessage,
+            scrollToEndTrigger: chatScrollTrigger,
+            ticketStatus: tickets.find(t => t.id === selectedTicketId)?.status
+          }), /*#__PURE__*/_jsx(AIConsentDialog, {
+            visible: showConsentDialog,
+            provider: providerName,
+            config: consentConfig,
             language: 'en',
-            onDismiss: () => {
-              setLastResult(null);
-              setLastUserMessage(null);
-            },
-            theme: accentColor || theme ? {
-              ...(accentColor ? {
-                primaryColor: accentColor
-              } : {}),
-              ...theme
-            } : undefined,
-            availableModes: availableModes,
-            mode: mode,
-            onModeChange: newMode => {
-              logger.info('AIAgent', '★ onModeChange:', mode, '→', newMode, '| tickets:', tickets.length, 'selectedTicketId:', selectedTicketId);
-              setMode(newMode);
+            onConsent: async () => {
+              await grantConsent();
+              setShowConsentDialog(false);
+              consentConfig.onConsent?.();
+              logger.info('AIAgent', '✅ AI consent granted by user');
             },
-            isMicActive: isMicActive,
-            isSpeakerMuted: isSpeakerMuted,
-            isAISpeaking: isAISpeaking,
-            isAgentTyping: isLiveAgentTyping,
-            onStopSession: stopVoiceSession,
-            isVoiceConnected: isVoiceConnected,
-            onMicToggle: active => {
-              if (active && !isVoiceConnected) {
-                logger.warn('AIAgent', 'Cannot toggle mic — VoiceService not connected yet');
-                return;
-              }
-              logger.info('AIAgent', `Mic toggle: ${active ? 'ON' : 'OFF'}`);
-              setIsMicActive(active);
-              if (active) {
-                logger.info('AIAgent', 'Starting AudioInput...');
-                audioInputRef.current?.start().then(ok => {
-                  logger.info('AIAgent', `AudioInput start result: ${ok}`);
-                });
-              } else {
-                logger.info('AIAgent', 'Stopping AudioInput...');
-                audioInputRef.current?.stop();
-              }
-            },
-            onSpeakerToggle: muted => {
-              logger.info('AIAgent', `Speaker toggle: ${muted ? 'MUTED' : 'UNMUTED'}`);
-              setIsSpeakerMuted(muted);
-              if (muted) {
-                audioOutputRef.current?.mute();
-              } else {
-                audioOutputRef.current?.unmute();
-              }
-            },
-            tickets: tickets,
-            selectedTicketId: selectedTicketId,
-            onTicketSelect: handleTicketSelect,
-            onBackToTickets: handleBackToTickets,
-            autoExpandTrigger: autoExpandTrigger,
-            unreadCounts: unreadCounts,
-            totalUnread: totalUnread,
-            showDiscoveryTooltip: tooltipVisible,
-            onTooltipDismiss: handleTooltipDismiss
-          })
-        }), /*#__PURE__*/_jsx(SupportChatModal, {
-          visible: mode === 'human' && !!selectedTicketId,
-          messages: messages,
-          onSend: handleSend,
-          onClose: handleBackToTickets,
-          isAgentTyping: isLiveAgentTyping,
-          isThinking: isThinking,
-          scrollToEndTrigger: chatScrollTrigger,
-          ticketStatus: tickets.find(t => t.id === selectedTicketId)?.status
-        })]
+            onDecline: () => {
+              setShowConsentDialog(false);
+              consentConfig.onDecline?.();
+              logger.info('AIAgent', '❌ AI consent declined by user');
+            }
+          })]
+        })
       })]
     })
   });