@mobileai/react-native 0.9.26 → 0.9.28

package/lib/module/components/AIAgent.js

@@ -11,8 +11,10 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, InteractionManager, Platform } from 'react-native';
 import { AgentRuntime } from "../core/AgentRuntime.js";
+import { captureWireframe } from "../core/FiberTreeWalker.js";
+import { humanizeScreenName } from "../utils/humanizeScreenName.js";
 import { createProvider } from "../providers/ProviderFactory.js";
 import { AgentContext } from "../hooks/useAction.js";
 import { AgentChatBar } from "./AgentChatBar.js";
@@ -41,13 +43,12 @@ 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";
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // ─── Context ───────────────────────────────────────────────────
 
 // ─── AsyncStorage Helper (same pattern as TicketStore) ─────────
 
 /** Try to load AsyncStorage for tooltip persistence. Optional peer dep. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getTooltipStorage() {
   try {
     const origError = console.error;
@@ -81,6 +82,8 @@ export function AIAgent({
   voiceProxyHeaders,
   provider: providerName = 'gemini',
   model,
+  supportStyle = 'warm-concise',
+  verifier,
   navRef,
   maxSteps = 25,
   showChatBar = true,
@@ -205,6 +208,9 @@ export function AIAgent({
   // ── Onboarding Journey State ────────────────────────────────
   const [isOnboardingActive, setIsOnboardingActive] = useState(false);
   const [currentOnboardingIndex, setCurrentOnboardingIndex] = useState(0);
+  const [androidWindowMetrics, setAndroidWindowMetrics] = useState(null);
+  const androidWindowMetricsRef = useRef(null);
+  const floatingOverlayRef = useRef(null);
   useEffect(() => {
     if (!onboarding?.enabled) return;
     if (onboarding.firstLaunchOnly !== false) {
@@ -269,6 +275,49 @@ export function AIAgent({
       } catch {/* graceful */}
     })();
   }, []);
+  useEffect(() => {
+    if (!showChatBar) {
+      androidWindowMetricsRef.current = null;
+      setAndroidWindowMetrics(null);
+    }
+  }, [showChatBar]);
+  const handleAndroidWindowMetricsChange = useCallback(metrics => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+    if (!showChatBar) {
+      androidWindowMetricsRef.current = null;
+      setAndroidWindowMetrics(null);
+      return;
+    }
+    const previousMetrics = androidWindowMetricsRef.current;
+    if (previousMetrics && previousMetrics.x === metrics.x && previousMetrics.y === metrics.y && previousMetrics.width === metrics.width && previousMetrics.height === metrics.height) {
+      return;
+    }
+    androidWindowMetricsRef.current = metrics;
+    if (floatingOverlayRef.current && previousMetrics) {
+      floatingOverlayRef.current.setAndroidWindowMetrics(metrics);
+      return;
+    }
+    setAndroidWindowMetrics(metrics);
+  }, [showChatBar]);
+  const handleAndroidWindowDragEnd = useCallback(metrics => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+    if (!showChatBar) {
+      androidWindowMetricsRef.current = null;
+      setAndroidWindowMetrics(null);
+      return;
+    }
+    androidWindowMetricsRef.current = metrics;
+    setAndroidWindowMetrics(prev => {
+      if (prev && prev.x === metrics.x && prev.y === metrics.y && prev.width === metrics.width && prev.height === metrics.height) {
+        return prev;
+      }
+      return metrics;
+    });
+  }, [showChatBar]);
 
   // CRITICAL: clearSupport uses REFS and functional setters — never closure values.
   // This function is captured by long-lived callbacks (escalation sockets, restored
@@ -400,7 +449,7 @@ export function AIAgent({
     if (knowledgeBase) return knowledgeBase;
     if (!analyticsKey) return undefined;
     return createMobileAIKnowledgeRetriever({
-      publishableKey: analyticsKey,
+      analyticsKey: analyticsKey,
       baseUrl: analyticsProxyUrl ?? ENDPOINTS.escalation,
       headers: analyticsProxyHeaders
     });
@@ -505,6 +554,7 @@ export function AIAgent({
           if (!humanFrtFiredRef.current[ticketId]) {
             humanFrtFiredRef.current[ticketId] = true;
             telemetryRef.current?.track('human_first_response', {
+              canonical_type: 'human_first_response_sent',
               ticketId
             });
           }
@@ -703,7 +753,7 @@ export function AIAgent({
             },
             onTypingChange: setIsLiveAgentTyping,
             onTicketClosed: () => clearSupport(ticket.id),
-            onError: err => logger.error('AIAgent', '★ Restored socket error:', err)
+            onError: err => logger.warn('AIAgent', '★ Restored socket error:', err)
           });
           if (ticket.wsUrl) {
             socket.connect(ticket.wsUrl);
@@ -715,7 +765,7 @@ export function AIAgent({
           logger.info('AIAgent', '★ Single ticket restored and socket cached:', ticket.id);
         }
       } catch (err) {
-        logger.error('AIAgent', '★ Failed to restore tickets:', err);
+        logger.warn('AIAgent', '★ Failed to restore tickets:', err);
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -949,7 +999,7 @@ export function AIAgent({
         }
         clearSupport(ticketId);
       },
-      onError: err => logger.error('AIAgent', '★ Socket error on select:', err)
+      onError: err => logger.warn('AIAgent', '★ Socket error on select:', err)
     });
     if (freshWsUrl) {
       socket.connect(freshWsUrl);
@@ -1023,16 +1073,50 @@ export function AIAgent({
   const [pendingApprovalQuestion, setPendingApprovalQuestion] = useState(null);
   const overlayVisible = isThinking || !!pendingApprovalQuestion;
   const overlayStatusText = pendingApprovalQuestion ? 'Waiting for your approval...' : statusText;
+  const effectiveProxyHeaders = useMemo(() => {
+    if (!analyticsKey) return proxyHeaders;
+    const isAuthMissing = !proxyHeaders || !Object.keys(proxyHeaders).some(k => k.toLowerCase() === 'authorization');
+    if (isAuthMissing) {
+      return {
+        ...proxyHeaders,
+        Authorization: `Bearer ${analyticsKey}`
+      };
+    }
+    return proxyHeaders;
+  }, [proxyHeaders, analyticsKey]);
+  const effectiveVoiceProxyHeaders = useMemo(() => {
+    if (!analyticsKey) return voiceProxyHeaders;
+    const isAuthMissing = !voiceProxyHeaders || !Object.keys(voiceProxyHeaders).some(k => k.toLowerCase() === 'authorization');
+    if (isAuthMissing) {
+      return {
+        ...voiceProxyHeaders,
+        Authorization: `Bearer ${analyticsKey}`
+      };
+    }
+    return voiceProxyHeaders;
+  }, [voiceProxyHeaders, analyticsKey]);
+  const resolvedProxyUrl = useMemo(() => {
+    if (proxyUrl) return proxyUrl;
+    if (analyticsKey) return ENDPOINTS.hostedTextProxy;
+    return undefined;
+  }, [proxyUrl, analyticsKey]);
+  const resolvedVoiceProxyUrl = useMemo(() => {
+    if (voiceProxyUrl) return voiceProxyUrl;
+    if (analyticsKey) return ENDPOINTS.hostedVoiceProxy;
+    return resolvedProxyUrl;
+  }, [voiceProxyUrl, analyticsKey, resolvedProxyUrl]);
 
   // ─── Create Runtime ──────────────────────────────────────────
 
   const config = useMemo(() => ({
     apiKey,
-    proxyUrl,
+    proxyUrl: resolvedProxyUrl,
     proxyHeaders,
-    voiceProxyUrl,
+    voiceProxyUrl: resolvedVoiceProxyUrl,
     voiceProxyHeaders,
     model,
+    supportStyle,
+    verifier,
     language: 'en',
     maxSteps,
     interactiveBlacklist,
@@ -1139,11 +1223,11 @@ export function AIAgent({
         ...(event.data ?? {})
       });
     }
-  }), [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]);
+  }), [mode, apiKey, resolvedProxyUrl, proxyHeaders, resolvedVoiceProxyUrl, 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, verifier, supportStyle]);
   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 provider = useMemo(() => createProvider(providerName, apiKey, model, resolvedProxyUrl, effectiveProxyHeaders), [providerName, apiKey, model, resolvedProxyUrl, effectiveProxyHeaders]);
   const runtime = useMemo(() => new AgentRuntime(provider, config, rootViewRef.current, navRef),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [provider, config]);
@@ -1171,12 +1255,12 @@ export function AIAgent({
         debug,
         onEvent: event => {
           // Proactive behavior triggers
-          if (event.type === 'rage_tap' || event.type === 'error_screen' || event.type === 'repeated_navigation') {
+          if (event.type === 'rage_tap' || event.type === 'rage_click' || event.type === 'rage_click_detected' || 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) {
+          if (customerSuccess?.enabled && (event.type === 'user_interaction' || event.type === 'user_action') && event.data) {
             const action = String(event.data.label || event.data.action || '');
 
             // Check milestones
@@ -1213,7 +1297,10 @@ export function AIAgent({
           attempts++;
           const route = navRef?.getCurrentRoute?.();
           if (route?.name) {
-            telemetry.setScreen(route.name);
+            const cleanName = humanizeScreenName(route.name);
+            if (cleanName) {
+              telemetry.setScreen(cleanName);
+            }
             clearInterval(timer);
           } else if (attempts >= maxAttempts) {
             clearInterval(timer);
@@ -1228,16 +1315,36 @@ export function AIAgent({
 
   useEffect(() => {
     // @ts-ignore
-    if (typeof __DEV__ !== 'undefined' && !__DEV__ && apiKey && !proxyUrl) {
+    if (typeof __DEV__ !== 'undefined' && !__DEV__ && apiKey && !resolvedProxyUrl) {
       logger.warn('[MobileAI] ⚠️ SECURITY WARNING: You are using `apiKey` directly in a production build. ' + 'This exposes your LLM provider key in the app binary. ' + 'Use `apiProxyUrl` to route requests through your backend instead. ' + 'See docs for details.');
     }
-  }, [apiKey, proxyUrl]);
+  }, [apiKey, resolvedProxyUrl]);
 
   // Track screen changes via navRef
   useEffect(() => {
     if (!navRef?.addListener || !telemetryRef.current) return;
     const checkScreenMilestone = screenName => {
       telemetryRef.current?.setScreen(screenName);
+
+      // Auto-capture wireframe snapshot for privacy-safe heatmaps.
+      // Deferred: wait for all animations/interactions to finish, then
+      // wait one more frame for layout to settle. Zero perf impact.
+      if (rootViewRef.current) {
+        const handle = InteractionManager.runAfterInteractions(() => {
+          requestAnimationFrame(() => {
+            captureWireframe(rootViewRef, {
+              screenName
+            }).then(wireframe => {
+              if (wireframe && telemetryRef.current) {
+                telemetryRef.current.trackWireframe(wireframe);
+              }
+            }).catch(err => {
+              if (debug) logger.debug('AIAgent', 'Wireframe capture failed:', err);
+            });
+          });
+        });
+        void handle;
+      }
       if (customerSuccess?.enabled) {
         customerSuccess.successMilestones?.forEach(m => {
           if (m.screen && m.screen === screenName) {
@@ -1273,7 +1380,10 @@ export function AIAgent({
     const unsubscribe = navRef.addListener('state', () => {
       const currentRoute = navRef.getCurrentRoute?.();
       if (currentRoute?.name) {
-        checkScreenMilestone(currentRoute.name);
+        const cleanName = humanizeScreenName(currentRoute.name);
+        if (cleanName) {
+          checkScreenMilestone(cleanName);
+        }
       }
     });
     return () => unsubscribe?.();
@@ -1343,12 +1453,12 @@ export function AIAgent({
       logger.info('AIAgent', `Registering ${runtimeTools.length} tools with VoiceService: ${runtimeTools.map(t => t.name).join(', ')}`);
       // Use voice-adapted system prompt — same core rules as text mode
       // but without agent-loop directives that trigger autonomous actions
-      const voicePrompt = buildVoiceSystemPrompt('en', instructions?.system, !!knowledgeBase);
+      const voicePrompt = buildVoiceSystemPrompt('en', instructions?.system, !!knowledgeBase, supportStyle);
       logger.info('AIAgent', `📝 Voice system prompt (${voicePrompt.length} chars):\n${voicePrompt}`);
       voiceServiceRef.current = new VoiceService({
         apiKey,
-        proxyUrl: voiceProxyUrl || proxyUrl,
-        proxyHeaders: voiceProxyHeaders || proxyHeaders,
+        proxyUrl: resolvedVoiceProxyUrl,
+        proxyHeaders: effectiveVoiceProxyHeaders || effectiveProxyHeaders,
         systemPrompt: voicePrompt,
         tools: runtimeTools,
         language: 'en'
@@ -1587,7 +1697,7 @@ export function AIAgent({
       setIsVoiceConnected(false);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, apiKey, proxyUrl, proxyHeaders, voiceProxyUrl, voiceProxyHeaders, runtime, instructions]);
+  }, [mode, apiKey, resolvedVoiceProxyUrl, effectiveVoiceProxyHeaders, effectiveProxyHeaders, runtime, instructions, supportStyle, knowledgeBase]);
 
   // ─── Stop Voice Session (full cleanup) ─────────────────────
 
@@ -1732,12 +1842,15 @@ export function AIAgent({
     setIsThinking(true);
     setStatusText('Thinking...');
     setLastResult(null);
+    const requestStartedAt = Date.now();
     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', {
+      canonical_type: 'ai_question_asked',
       query: message.trim(),
       transcript: message.trim(),
+      request_topic: message.trim().slice(0, 120),
       mode
     });
     telemetryRef.current?.track('agent_trace', {
@@ -1756,8 +1869,11 @@ export function AIAgent({
         if (HIGH_RISK_ESCALATION_REGEX.test(message)) {
           logger.warn('AIAgent', 'High-risk support signal detected — auto-escalating to human');
           telemetryRef.current?.track('business_escalation', {
+            canonical_type: 'support_escalated',
             message,
-            trigger: 'high_risk'
+            trigger: 'high_risk',
+            escalation_reason: 'high_risk',
+            topic: message.trim().slice(0, 120)
           });
           const escalationResult = await escalateTool.execute({
             reason: `Customer needs human support: ${message.trim()}`
@@ -1858,7 +1974,9 @@ export function AIAgent({
       if (telemetryRef.current) {
         if (!agentFrtFiredRef.current) {
           agentFrtFiredRef.current = true;
-          telemetryRef.current.track('agent_first_response');
+          telemetryRef.current.track('agent_first_response', {
+            canonical_type: 'ai_first_response_sent'
+          });
         }
         for (const step of normalizedResult.steps ?? []) {
           telemetryRef.current.track('agent_step', {
@@ -1872,7 +1990,12 @@ export function AIAgent({
           });
         }
         telemetryRef.current.track('agent_complete', {
+          canonical_type: normalizedResult.success ? 'ai_answer_completed' : 'ai_answer_failed',
           success: normalizedResult.success,
+          resolved: normalizedResult.success,
+          resolution_type: normalizedResult.success ? 'ai_resolved' : 'needs_follow_up',
+          latency_ms: Date.now() - requestStartedAt,
+          request_topic: message.trim().slice(0, 120),
           steps: normalizedResult.steps?.length ?? 0,
           tokens: normalizedResult.tokenUsage?.totalTokens ?? 0,
           cost: normalizedResult.tokenUsage?.estimatedCostUSD ?? 0,
@@ -1967,7 +2090,12 @@ export function AIAgent({
 
       // Telemetry: track agent failure
       telemetryRef.current?.track('agent_complete', {
+        canonical_type: 'ai_answer_failed',
         success: false,
+        resolved: false,
+        resolution_type: 'execution_error',
+        latency_ms: Date.now() - requestStartedAt,
+        request_topic: message.trim().slice(0, 120),
         error: error.message,
         response: `Error: ${error.message}`,
         conversation: {
@@ -2004,8 +2132,7 @@ export function AIAgent({
 
   const handleCancel = useCallback(() => {
     runtime.cancel();
-    setIsThinking(false);
-    setStatusText('');
+    setStatusText('Stopping...');
   }, [runtime]);
 
   // ─── Conversation History Handlers ─────────────────────────────
@@ -2062,9 +2189,12 @@ export function AIAgent({
           if (telemetryRef.current && !telemetryRef.current.isAgentActing) {
             const label = extractTouchLabel(event);
             if (label && label !== 'Unknown Element' && label !== '[pressable]') {
-              telemetryRef.current.track('user_interaction', {
+              telemetryRef.current.track('user_action', {
+                canonical_type: 'button_tapped',
                 type: 'tap',
+                action: label,
                 label,
+                element_label: label,
                 actor: 'user',
                 x: Math.round(event.nativeEvent.pageX),
                 y: Math.round(event.nativeEvent.pageY)
@@ -2075,9 +2205,11 @@ export function AIAgent({
             } else {
               // Tapped an unlabelled/empty area
               telemetryRef.current.track('dead_click', {
+                canonical_type: 'dead_click_detected',
                 x: Math.round(event.nativeEvent.pageX),
                 y: Math.round(event.nativeEvent.pageY),
-                screen: telemetryRef.current.screen
+                screen: telemetryRef.current.screen,
+                screen_area: 'unknown'
               });
             }
           }
@@ -2093,128 +2225,255 @@ export function AIAgent({
           },
           children: children
         })
-      }), /*#__PURE__*/_jsx(FloatingOverlayWrapper, {
+      }), /*#__PURE__*/_jsx(HighlightOverlay, {}), showChatBar && /*#__PURE__*/_jsx(FloatingOverlayWrapper, {
+        ref: Platform.OS === 'android' ? floatingOverlayRef : undefined,
+        androidWindowMetrics: Platform.OS === 'android' ? androidWindowMetricsRef.current ?? androidWindowMetrics : null,
+        onAndroidWindowDragEnd: Platform.OS === 'android' ? handleAndroidWindowDragEnd : undefined,
         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,
+        children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(AgentChatBar, {
+          onSend: handleSend,
+          onCancel: handleCancel,
+          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;
+            pendingAppApprovalRef.current = false;
+            queuedApprovalAnswerRef.current = null;
+            setPendingApprovalQuestion(null);
+            const response = action === 'approve' ? '__APPROVAL_GRANTED__' : '__APPROVAL_REJECTED__';
+            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,
+          renderMode: "android-native-window",
+          windowMetrics: androidWindowMetricsRef.current ?? androidWindowMetrics,
+          onWindowMetricsChange: handleAndroidWindowMetricsChange
+        }) : /*#__PURE__*/_jsx(ProactiveHint, {
+          stage: proactiveStage,
+          badgeText: proactiveBadgeText,
+          onDismiss: () => idleDetectorRef.current?.dismiss(),
+          children: /*#__PURE__*/_jsx(AgentChatBar, {
             onSend: handleSend,
-            onClose: handleBackToTickets,
-            isAgentTyping: isLiveAgentTyping,
+            onCancel: handleCancel,
             isThinking: isThinking,
-            scrollToEndTrigger: chatScrollTrigger,
-            ticketStatus: tickets.find(t => t.id === selectedTicketId)?.status
-          }), /*#__PURE__*/_jsx(AIConsentDialog, {
+            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;
+              pendingAppApprovalRef.current = false;
+              queuedApprovalAnswerRef.current = null;
+              setPendingApprovalQuestion(null);
+              const response = action === 'approve' ? '__APPROVAL_GRANTED__' : '__APPROVAL_REJECTED__';
+              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,
+            renderMode: "default"
+          })
+        })
+      }), /*#__PURE__*/_jsx(AgentOverlay, {
+        visible: overlayVisible,
+        statusText: overlayStatusText,
+        onCancel: handleCancel
+      }), Platform.OS !== 'android' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SupportChatModal, {
+          visible: mode === 'human' && !!selectedTicketId,
+          messages: supportMessages,
+          onSend: handleSend,
+          onClose: handleBackToTickets,
+          isAgentTyping: isLiveAgentTyping,
+          isThinking: isThinking,
+          scrollToEndTrigger: chatScrollTrigger,
+          ticketStatus: tickets.find(t => t.id === selectedTicketId)?.status
+        }), /*#__PURE__*/_jsx(AIConsentDialog, {
+          visible: showConsentDialog,
+          provider: providerName,
+          config: consentConfig,
+          language: 'en',
+          onConsent: async () => {
+            await grantConsent();
+            setShowConsentDialog(false);
+            consentConfig.onConsent?.();
+            logger.info('AIAgent', '✅ AI consent granted by user');
+          },
+          onDecline: () => {
+            setShowConsentDialog(false);
+            consentConfig.onDecline?.();
+            logger.info('AIAgent', '❌ AI consent declined by user');
+          }
+        })]
+      }), Platform.OS === 'android' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SupportChatModal, {
+          visible: mode === 'human' && !!selectedTicketId,
+          messages: supportMessages,
+          onSend: handleSend,
+          onClose: handleBackToTickets,
+          isAgentTyping: isLiveAgentTyping,
+          isThinking: isThinking,
+          scrollToEndTrigger: chatScrollTrigger,
+          ticketStatus: tickets.find(t => t.id === selectedTicketId)?.status
+        }), /*#__PURE__*/_jsx(FloatingOverlayWrapper, {
+          fallbackStyle: styles.floatingLayer,
+          children: /*#__PURE__*/_jsx(AIConsentDialog, {
             visible: showConsentDialog,
             provider: providerName,
             config: consentConfig,
@@ -2230,8 +2489,8 @@ export function AIAgent({
               consentConfig.onDecline?.();
               logger.info('AIAgent', '❌ AI consent declined by user');
             }
-          })]
-        })
+          })
+        })]
       })]
     })
   });