@mobileai/react-native 0.9.27 → 0.9.29

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";
@@ -26,7 +28,7 @@ import { VoiceService } from "../services/VoiceService.js";
 import { AudioInputService } from "../services/AudioInputService.js";
 import { AudioOutputService } from "../services/AudioOutputService.js";
 import { TelemetryService, bindTelemetryService } from "../services/telemetry/index.js";
-import { extractTouchLabel, checkRageClick } from "../services/telemetry/TouchAutoCapture.js";
+import { extractTouchTargetMetadata, checkRageClick } from "../services/telemetry/TouchAutoCapture.js";
 import { initDeviceId, getDeviceId } from "../services/telemetry/device.js";
 import { AgentErrorBoundary } from "./AgentErrorBoundary.js";
 import { HighlightOverlay } from "./HighlightOverlay.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;
@@ -68,6 +69,29 @@ function getTooltipStorage() {
     return null;
   }
 }
+function sanitizeWireframeScreenshot(value) {
+  if (!value || typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const base64 = trimmed.startsWith('data:') ? trimmed.split(',')[1] ?? '' : trimmed;
+  return base64.length > 0 ? base64 : null;
+}
+async function captureHeatmapScreenshot(rootView) {
+  try {
+    if (!rootView) return null;
+    const viewShot = require('react-native-view-shot');
+    const captureRef = viewShot.captureRef || viewShot.default?.captureRef;
+    if (!captureRef || typeof captureRef !== 'function') return null;
+    const raw = await captureRef(rootView, {
+      format: 'jpg',
+      quality: 0.28,
+      result: 'base64'
+    });
+    return sanitizeWireframeScreenshot(raw);
+  } catch {
+    return null;
+  }
+}
 
 // ─── Props ─────────────────────────────────────────────────────
 
@@ -81,6 +105,8 @@ export function AIAgent({
   voiceProxyHeaders,
   provider: providerName = 'gemini',
   model,
+  supportStyle = 'warm-concise',
+  verifier,
   navRef,
   maxSteps = 25,
   showChatBar = true,
@@ -205,6 +231,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) {
@@ -234,7 +263,9 @@ export function AIAgent({
         try {
           const AS = getTooltipStorage();
           await AS?.setItem('@mobileai_onboarding_completed', 'true');
-        } catch {/* graceful */}
+        } catch {
+          /* graceful */
+        }
       })();
     } else {
       setCurrentOnboardingIndex(prev => prev + 1);
@@ -266,9 +297,54 @@ export function AIAgent({
       try {
         const AS = getTooltipStorage();
         await AS?.setItem('@mobileai_tooltip_seen', 'true');
-      } catch {/* graceful */}
+      } 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
@@ -385,17 +461,50 @@ export function AIAgent({
       });
     });
   }, []);
-  const getResolvedScreenName = useCallback(() => {
+  const getDeepestRouteName = useCallback(state => {
+    if (!state || !Array.isArray(state.routes) || state.index == null) {
+      return null;
+    }
+    const route = state.routes[state.index];
+    if (!route) return null;
+    const nested = route.state;
+    if (nested) {
+      const nestedName = getDeepestRouteName(nested);
+      if (nestedName) return nestedName;
+    }
+    return typeof route.name === 'string' ? route.name : null;
+  }, []);
+  const resolveScreenName = useCallback(() => {
+    if (pathname) {
+      const humanizedPath = humanizeScreenName(pathname === '/' ? 'index' : pathname);
+      if (humanizedPath) return humanizedPath;
+    }
+    const navState = navRef?.getRootState?.() ?? navRef?.getState?.();
+    const deepestFromState = getDeepestRouteName(navState);
+    if (deepestFromState) {
+      const humanized = humanizeScreenName(deepestFromState);
+      if (humanized) return humanized;
+    }
     const routeName = navRef?.getCurrentRoute?.()?.name;
     if (typeof routeName === 'string' && routeName.trim().length > 0) {
-      return routeName;
+      const humanized = humanizeScreenName(routeName);
+      if (humanized) return humanized;
     }
     const telemetryScreen = telemetryRef.current?.screen;
-    if (typeof telemetryScreen === 'string' && telemetryScreen !== 'Unknown') {
+    if (typeof telemetryScreen === 'string' && telemetryScreen !== 'Unknown' && telemetryScreen.trim().length > 0) {
       return telemetryScreen;
     }
     return 'unknown';
-  }, [navRef]);
+  }, [pathname, navRef, getDeepestRouteName]);
+  const syncTelemetryScreen = useCallback(() => {
+    const screen = resolveScreenName();
+    if (screen === 'unknown') {
+      return screen;
+    }
+    telemetryRef.current?.setScreen(screen);
+    return screen;
+  }, [resolveScreenName]);
+  const getResolvedScreenName = useCallback(() => resolveScreenName(), [resolveScreenName]);
   const resolvedKnowledgeBase = useMemo(() => {
     if (knowledgeBase) return knowledgeBase;
     if (!analyticsKey) return undefined;
@@ -505,6 +614,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 +813,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 +825,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 +1059,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 +1133,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,33 +1283,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 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 provider = useMemo(() => createProvider(providerName, apiKey, model, proxyUrl, effectiveProxyHeaders), [providerName, apiKey, model, proxyUrl, effectiveProxyHeaders]);
+  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]);
@@ -1193,12 +1315,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
@@ -1227,15 +1349,14 @@ export function AIAgent({
       bindTelemetryService(telemetry);
       telemetry.start();
       // NavigationContainer is a child of AIAgent, so navRef may not be
-      // ready yet when this effect runs. Poll briefly until it's available.
+      // ready yet when this effect runs. Poll briefly until it is.
       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);
+          const cleanName = syncTelemetryScreen();
+          if (cleanName !== 'unknown') {
             clearInterval(timer);
           } else if (attempts >= maxAttempts) {
             clearInterval(timer);
@@ -1244,22 +1365,45 @@ export function AIAgent({
       };
       resolveInitialScreen();
     }); // initDeviceId
-  }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, bindTelemetryService, debug, navRef]);
+  }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, bindTelemetryService, debug, navRef, syncTelemetryScreen]);
 
   // ─── Security warnings ──────────────────────────────────────
 
   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(() => {
+            Promise.all([captureWireframe(rootViewRef, {
+              screenName
+            }), captureHeatmapScreenshot(rootViewRef.current)]).then(([wireframe, screenshot]) => {
+              if (wireframe && telemetryRef.current) {
+                telemetryRef.current.trackWireframe({
+                  ...wireframe,
+                  screenshot: screenshot || undefined
+                });
+              }
+            }).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) {
@@ -1293,13 +1437,13 @@ export function AIAgent({
       }
     };
     const unsubscribe = navRef.addListener('state', () => {
-      const currentRoute = navRef.getCurrentRoute?.();
-      if (currentRoute?.name) {
-        checkScreenMilestone(currentRoute.name);
+      const cleanName = resolveScreenName();
+      if (cleanName) {
+        checkScreenMilestone(cleanName);
       }
     });
     return () => unsubscribe?.();
-  }, [navRef, customerSuccess, isOnboardingActive, onboarding, currentOnboardingIndex, advanceOnboarding]);
+  }, [navRef, resolveScreenName, customerSuccess, isOnboardingActive, onboarding, currentOnboardingIndex, advanceOnboarding]);
 
   // ─── MCP Bridge ──────────────────────────────────────────────
 
@@ -1336,7 +1480,7 @@ 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 () => {
@@ -1365,11 +1509,11 @@ 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,
+        proxyUrl: resolvedVoiceProxyUrl,
         proxyHeaders: effectiveVoiceProxyHeaders || effectiveProxyHeaders,
         systemPrompt: voicePrompt,
         tools: runtimeTools,
@@ -1609,7 +1753,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) ─────────────────────
 
@@ -1754,12 +1898,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', {
@@ -1778,8 +1925,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()}`
@@ -1880,7 +2030,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', {
@@ -1894,7 +2046,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,
@@ -1989,7 +2146,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: {
@@ -2026,8 +2188,7 @@ export function AIAgent({
 
   const handleCancel = useCallback(() => {
     runtime.cancel();
-    setIsThinking(false);
-    setStatusText('');
+    setStatusText('Stopping...');
   }, [runtime]);
 
   // ─── Conversation History Handlers ─────────────────────────────
@@ -2082,24 +2243,46 @@ 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);
-            if (label && label !== 'Unknown Element' && label !== '[pressable]') {
-              telemetryRef.current.track('user_interaction', {
+            syncTelemetryScreen();
+            const target = extractTouchTargetMetadata(event);
+            const pageX = Math.round(event.nativeEvent.pageX);
+            const pageY = Math.round(event.nativeEvent.pageY);
+            if (target.label) {
+              telemetryRef.current.track('user_action', {
+                canonical_type: 'button_tapped',
                 type: 'tap',
-                label,
+                action: target.label,
+                label: target.label,
+                element_label: target.label,
+                element_kind: target.elementKind,
+                label_confidence: target.labelConfidence,
+                zone_id: target.zoneId,
+                ancestor_path: target.ancestorPath,
+                sibling_labels: target.siblingLabels,
+                component_name: target.componentName,
                 actor: 'user',
-                x: Math.round(event.nativeEvent.pageX),
-                y: Math.round(event.nativeEvent.pageY)
+                x: pageX,
+                y: pageY
               });
 
               // Track if user is rage-tapping this specific element
-              checkRageClick(label, telemetryRef.current);
+              checkRageClick({
+                ...target,
+                x: pageX,
+                y: pageY
+              }, telemetryRef.current);
             } else {
               // Tapped an unlabelled/empty area
               telemetryRef.current.track('dead_click', {
-                x: Math.round(event.nativeEvent.pageX),
-                y: Math.round(event.nativeEvent.pageY),
-                screen: telemetryRef.current.screen
+                canonical_type: 'dead_click_detected',
+                x: pageX,
+                y: pageY,
+                screen: telemetryRef.current.screen,
+                screen_area: 'unknown',
+                zone_id: target.zoneId,
+                ancestor_path: target.ancestorPath,
+                sibling_labels: target.siblingLabels,
+                component_name: target.componentName
               });
             }
           }
@@ -2115,128 +2298,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,
@@ -2252,8 +2562,8 @@ export function AIAgent({
               consentConfig.onDecline?.();
               logger.info('AIAgent', '❌ AI consent declined by user');
             }
-          })]
-        })
+          })
+        })]
       })]
     })
   });