@mobileai/react-native 0.9.10 → 0.9.12

package/src/components/AIAgent.tsx

@@ -29,12 +29,17 @@ import { AudioInputService } from '../services/AudioInputService';
 import { AudioOutputService } from '../services/AudioOutputService';
 import { TelemetryService, bindTelemetryService } from '../services/telemetry';
 import { extractTouchLabel, checkRageClick } from '../services/telemetry/TouchAutoCapture';
+import { initDeviceId, getDeviceId } from '../services/telemetry/device';
 import type { AgentConfig, AgentMode, ExecutionResult, ToolDefinition, AgentStep, TokenUsage, KnowledgeBaseConfig, ChatBarTheme, AIMessage, AIProviderName, ScreenMap, ProactiveHelpConfig } from '../core/types';
 import { AgentErrorBoundary } from './AgentErrorBoundary';
 import { HighlightOverlay } from './HighlightOverlay';
 import { IdleDetector } from '../core/IdleDetector';
 import { ProactiveHint } from './ProactiveHint';
 import { createEscalateTool } from '../support/escalateTool';
+import { EscalationSocket } from '../support/EscalationSocket';
+import { EscalationEventSource } from '../support/EscalationEventSource';
+import { SupportChatModal } from '../support/SupportChatModal';
+import { ENDPOINTS } from '../config/endpoints';
 
 // ─── Context ───────────────────────────────────────────────────
 
@@ -190,6 +195,34 @@ interface AIAgentProps {
    * Proactive agent configuration (detects user hesitation)
    */
   proactiveHelp?: ProactiveHelpConfig;
+
+  // ── Support Configuration ────────────
+
+  /**
+   * Identity of the logged-in user.
+   * If provided, this enforces "one ticket per user" and shows the user profile
+   * in the Dashboard (name, email, plan, etc.).
+   */
+  userContext?: {
+    userId?: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    plan?: string;
+    custom?: Record<string, string | number | boolean>;
+  };
+
+  /**
+   * Device push token for offline support replies.
+   * Use '@react-native-firebase/messaging' or 'expo-notifications' to get this.
+   */
+  pushToken?: string;
+
+  /**
+   * The type of push token provided.
+   * "fcm" is recommended for universal bare/Expo support.
+   */
+  pushTokenType?: 'fcm' | 'expo' | 'apns';
 }
 
 
@@ -239,6 +272,9 @@ export function AIAgent({
   analyticsProxyUrl,
   analyticsProxyHeaders,
   proactiveHelp,
+  userContext,
+  pushToken,
+  pushTokenType,
 }: AIAgentProps) {
   // Configure logger based on debug prop
   React.useEffect(() => {
@@ -252,13 +288,125 @@ export function AIAgent({
   const [isThinking, setIsThinking] = useState(false);
   const [statusText, setStatusText] = useState('');
   const [lastResult, setLastResult] = useState<ExecutionResult | null>(null);
+  const [lastUserMessage, setLastUserMessage] = useState<string | null>(null);
   const [messages, setMessages] = useState<AIMessage[]>([]);
+  const [chatScrollTrigger, setChatScrollTrigger] = useState(0);
+
+  // Increment scroll trigger when messages change to auto-scroll chat modal
+  useEffect(() => {
+    if (messages.length > 0) {
+      setChatScrollTrigger(prev => prev + 1);
+    }
+  }, [messages.length]);
+
+  // ── Support Modal State ──
+  const [tickets, setTickets] = useState<import('../support/types').SupportTicket[]>([]);
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
+  const [supportSocket, setSupportSocket] = useState<EscalationSocket | null>(null);
+  const [isLiveAgentTyping, setIsLiveAgentTyping] = useState(false);
+  const [autoExpandTrigger, setAutoExpandTrigger] = useState(0);
+  const [unreadCounts, setUnreadCounts] = useState<Record<string, number>>({});
+  // Ref mirrors selectedTicketId — lets socket callbacks access current value
+  // without stale closures (sockets are long-lived, closures capture old state).
+  const selectedTicketIdRef = useRef<string | null>(null);
+  useEffect(() => { selectedTicketIdRef.current = selectedTicketId; }, [selectedTicketId]);
+  // Cache of live sockets by ticketId — keeps sockets alive even when user
+  // navigates back to the ticket list, so new messages still trigger badge updates.
+  const pendingSocketsRef = useRef<Map<string, EscalationSocket>>(new Map());
+  // SSE connections per ticket — reliable fallback for ticket_closed events
+  // when the WebSocket is disconnected. EventSource auto-reconnects.
+  const sseRef = useRef<Map<string, EscalationEventSource>>(new Map());
+
+  const totalUnread = Object.values(unreadCounts).reduce((sum, count) => sum + count, 0);
+
+  // CRITICAL: clearSupport uses REFS and functional setters — never closure values.
+  // This function is captured by long-lived callbacks (escalation sockets, restored
+  // sockets) that may hold stale references. Using refs guarantees the current
+  // selectedTicketId and supportSocket are always read, not snapshot values.
+  const clearSupport = useCallback((ticketId?: string) => {
+    if (ticketId) {
+      // Remove specific ticket + its cached socket and SSE
+      const cached = pendingSocketsRef.current.get(ticketId);
+      if (cached) { cached.disconnect(); pendingSocketsRef.current.delete(ticketId); }
+      const sse = sseRef.current.get(ticketId);
+      if (sse) { sse.disconnect(); sseRef.current.delete(ticketId); }
+      setTickets(prev => prev.filter(t => t.id !== ticketId));
+      setUnreadCounts(prev => { const n = { ...prev }; delete n[ticketId]; return n; });
+
+      // If user was viewing this ticket, close the support modal + switch to ticket list
+      if (selectedTicketIdRef.current === ticketId) {
+        setSupportSocket(prev => { prev?.disconnect(); return null; });
+        setSelectedTicketId(null);
+        setIsLiveAgentTyping(false);
+        setMessages([]);
+      }
+
+      // If no tickets remain, switch back to text mode
+      setTickets(prev => {
+        if (prev.length === 0) {
+          setMode('text');
+        }
+        return prev;
+      });
+    } else {
+      // Clear all — disconnect every cached socket and SSE
+      pendingSocketsRef.current.forEach(s => s.disconnect());
+      pendingSocketsRef.current.clear();
+      sseRef.current.forEach(s => s.disconnect());
+      sseRef.current.clear();
+      setSupportSocket(prev => { prev?.disconnect(); return null; });
+      setSelectedTicketId(null);
+      setTickets([]);
+      setUnreadCounts({});
+      setIsLiveAgentTyping(false);
+      setMode('text');
+    }
+  }, []);
+
+  const openSSE = useCallback((ticketId: string) => {
+    if (sseRef.current.has(ticketId)) return;
+    if (!analyticsKey) return;
+
+    const sseUrl = `${ENDPOINTS.escalation}/api/v1/escalations/events?analyticsKey=${encodeURIComponent(analyticsKey)}&ticketId=${encodeURIComponent(ticketId)}`;
+    const sse = new EscalationEventSource({
+      url: sseUrl,
+      onTicketClosed: (tid) => {
+        logger.info('AIAgent', 'SSE: ticket_closed received for', tid);
+        setUnreadCounts(prev => {
+          const next = { ...prev };
+          delete next[tid];
+          return next;
+        });
+        clearSupport(tid);
+      },
+      onConnected: (tid) => {
+        logger.info('AIAgent', 'SSE: connected for ticket', tid);
+      },
+    });
+    sse.connect();
+    sseRef.current.set(ticketId, sse);
+    logger.info('AIAgent', 'SSE opened for ticket:', ticketId);
+  }, [analyticsKey, clearSupport]);
 
   const clearMessages = useCallback(() => {
     setMessages([]);
     setLastResult(null);
   }, []);
 
+  const getResolvedScreenName = useCallback(() => {
+    const routeName = (navRef as any)?.getCurrentRoute?.()?.name;
+    if (typeof routeName === 'string' && routeName.trim().length > 0) {
+      return routeName;
+    }
+
+    const telemetryScreen = telemetryRef.current?.screen;
+    if (typeof telemetryScreen === 'string' && telemetryScreen !== 'Unknown') {
+      return telemetryScreen;
+    }
+
+    return 'unknown';
+  }, [navRef]);
+
   // ─── Auto-create MobileAI escalation tool ─────────────────────
   // When analyticsKey is present and consumer hasn't provided their own
   // escalate_to_human tool, auto-wire the MobileAI platform provider.
@@ -270,26 +418,394 @@ export function AIAgent({
       config: { provider: 'mobileai' },
       analyticsKey,
       getContext: () => ({
-        currentScreen: (navRef as any)?.getCurrentRoute?.()?.name ?? 'unknown',
+        currentScreen: getResolvedScreenName(),
         originalQuery: '',
         stepsBeforeEscalation: 0,
       }),
       getHistory: () =>
         messages.map((m) => ({ role: m.role, content: m.content })),
-      onHumanReply: (reply: string) => {
-        setMessages((prev) => [
-          ...prev,
-          {
+      getScreenFlow: () => telemetryRef.current?.getScreenFlow() ?? [],
+      userContext,
+      pushToken,
+      pushTokenType,
+      onEscalationStarted: (tid, socket) => {
+        logger.info('AIAgent', '★★★ onEscalationStarted FIRED — ticketId:', tid);
+        // Cache the live socket so handleTicketSelect can reuse it without reconnecting
+        pendingSocketsRef.current.set(tid, socket);
+        // Open SSE for reliable ticket_closed delivery
+        openSSE(tid);
+
+        const currentScreen = getResolvedScreenName();
+        setTickets(prev => {
+          if (prev.find(t => t.id === tid)) {
+            logger.info('AIAgent', '★★★ Ticket already in list, skipping add');
+            return prev;
+          }
+          const newList = [{ id: tid, reason: 'Connecting to agent...', screen: currentScreen, status: 'open', history: [], createdAt: new Date().toISOString(), wsUrl: '' }, ...prev];
+          logger.info('AIAgent', '★★★ Tickets updated, new length:', newList.length);
+          return newList;
+        });
+
+        // Fetch real ticket data from backend to replace the placeholder
+        void (async () => {
+          try {
+            const res = await fetch(`${ENDPOINTS.escalation}/api/v1/escalations/${tid}?analyticsKey=${encodeURIComponent(analyticsKey!)}`);
+            if (res.ok) {
+              const data = await res.json();
+              setTickets(prev => prev.map(t => {
+                if (t.id !== tid) return t;
+                return {
+                  ...t,
+                  reason: data.reason || t.reason,
+                  screen: data.screen || t.screen,
+                  status: data.status || t.status,
+                  history: Array.isArray(data.history) ? data.history : t.history,
+                };
+              }));
+            }
+          } catch {
+            // Best-effort — placeholder is still usable
+          }
+        })();
+
+        // Switch to human mode so the ticket LIST is visible — do NOT auto-select
+        setMode('human');
+        setAutoExpandTrigger(prev => {
+          const next = prev + 1;
+          logger.info('AIAgent', '★★★ autoExpandTrigger:', prev, '→', next);
+          return next;
+        });
+        logger.info('AIAgent', '★★★ setMode("human") called from onEscalationStarted');
+      },
+      onHumanReply: (reply: string, ticketId?: string) => {
+        if (ticketId) {
+          // Always update the ticket's history (source of truth for ticket cards)
+          setTickets(prev => prev.map(t => {
+            if (t.id !== ticketId) return t;
+            return {
+              ...t,
+              history: [...(t.history || []), { role: 'live_agent', content: reply, timestamp: new Date().toISOString() }],
+            };
+          }));
+
+          // Route via ref: only push to messages[] if user is viewing THIS ticket
+          if (selectedTicketIdRef.current === ticketId) {
+            const humanMsg: AIMessage = {
+              id: `human-${Date.now()}`,
+              role: 'live_agent' as any,
+              content: reply,
+              timestamp: Date.now(),
+            };
+            setMessages((prev) => [...prev, humanMsg]);
+            setLastResult({ success: true, message: `👤 ${reply}`, steps: [] });
+          } else {
+            // Not viewing this ticket — increment unread badge
+            setUnreadCounts(prev => ({
+              ...prev,
+              [ticketId]: (prev[ticketId] || 0) + 1,
+            }));
+          }
+        }
+      },
+      onTypingChange: (isTyping: boolean) => {
+        setIsLiveAgentTyping(isTyping);
+      },
+      onTicketClosed: (ticketId?: string) => {
+        logger.info('AIAgent', 'Ticket closed by agent — removing from list');
+        if (ticketId) {
+          setUnreadCounts(prev => {
+            const next = { ...prev };
+            delete next[ticketId];
+            return next;
+          });
+        }
+        clearSupport(ticketId);
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey, customTools, getResolvedScreenName, navRef, openSSE, userContext, pushToken, pushTokenType, messages, clearSupport]);
+
+  // ─── Restore pending tickets on app start ──────────────────────
+  useEffect(() => {
+    if (!analyticsKey) return;
+
+    void (async () => {
+      try {
+        // Wait for the device ID to be initialised before reading it.
+        // getDeviceId() is synchronous but returns null on cold start until
+        // initDeviceId() resolves — awaiting here prevents an early bail-out
+        // that would leave the Human tab hidden after an app refresh.
+        await initDeviceId();
+        const deviceId = getDeviceId();
+
+        logger.info('AIAgent', '★ Restore check — analyticsKey:', !!analyticsKey, 'userId:', userContext?.userId, 'pushToken:', !!pushToken, 'deviceId:', deviceId);
+        if (!userContext?.userId && !pushToken && !deviceId) return;
+
+        const query = new URLSearchParams({ analyticsKey });
+        if (userContext?.userId) query.append('userId', userContext.userId);
+        if (pushToken) query.append('pushToken', pushToken);
+        if (deviceId) query.append('deviceId', deviceId);
+
+        const url = `${ENDPOINTS.escalation}/api/v1/escalations/mine?${query.toString()}`;
+        logger.info('AIAgent', '★ Restore — fetching:', url);
+        const res = await fetch(url);
+
+        logger.info('AIAgent', '★ Restore — response status:', res.status);
+        if (!res.ok) return;
+
+        const data = await res.json();
+        const fetchedTickets: import('../support/types').SupportTicket[] = data.tickets ?? [];
+        logger.info('AIAgent', '★ Restore — found', fetchedTickets.length, 'active tickets');
+
+        if (fetchedTickets.length === 0) return;
+
+        // Initialize unread counts from backend (set together with tickets for instant badge)
+        const initialUnreadCounts: Record<string, number> = {};
+        for (const ticket of fetchedTickets) {
+          if (ticket.unreadCount && ticket.unreadCount > 0) {
+            initialUnreadCounts[ticket.id] = ticket.unreadCount;
+          }
+        }
+        setTickets(fetchedTickets);
+        setUnreadCounts(initialUnreadCounts);
+
+        // Show the ticket list without auto-selecting — user taps in (Intercom-style).
+        // setMode switches the widget to human mode so the list is immediately visible.
+        setMode('human');
+        setAutoExpandTrigger(prev => prev + 1);
+
+        // Open SSE for every restored ticket — reliable ticket_closed delivery
+        for (const t of fetchedTickets) {
+          openSSE(t.id);
+        }
+
+        // If there is exactly one ticket, pre-wire its WebSocket so it is ready
+        // the moment the user taps the card (no extra connect delay).
+        if (fetchedTickets.length === 1) {
+          const ticket = fetchedTickets[0]!;
+
+          if (ticket.history?.length) {
+            const restored: AIMessage[] = ticket.history.map(
+              (entry: { role: string; content: string; timestamp?: string }, i: number) => ({
+                id: `restored-${ticket.id}-${i}`,
+                role: (entry.role === 'live_agent' ? 'assistant' : entry.role) as any,
+                content: entry.content,
+                timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now(),
+              })
+            );
+            setMessages(restored);
+          }
+
+          const socket = new EscalationSocket({
+            onReply: (reply: string) => {
+              const tid = ticket.id;
+              // Always update ticket history
+              setTickets(prev => prev.map(t => {
+                if (t.id !== tid) return t;
+                return {
+                  ...t,
+                  history: [...(t.history || []), { role: 'live_agent', content: reply, timestamp: new Date().toISOString() }],
+                };
+              }));
+
+              // Route via ref: only push to messages[] if user is viewing THIS ticket
+              if (selectedTicketIdRef.current === tid) {
+                const msg: AIMessage = {
+                  id: `human-${Date.now()}`,
+                  role: 'assistant',
+                  content: reply,
+                  timestamp: Date.now(),
+                };
+                setMessages((prev) => [...prev, msg]);
+                setLastResult({ success: true, message: `👤 ${reply}`, steps: [] });
+              } else {
+                setUnreadCounts(prev => ({
+                  ...prev,
+                  [tid]: (prev[tid] || 0) + 1,
+                }));
+              }
+            },
+            onTypingChange: setIsLiveAgentTyping,
+            onTicketClosed: () => clearSupport(ticket.id),
+            onError: (err) => logger.error('AIAgent', '★ Restored socket error:', err),
+          });
+          socket.connect(ticket.wsUrl);
+          // 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);
+        }
+      } catch (err) {
+        logger.error('AIAgent', '★ Failed to restore tickets:', err);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analyticsKey]);
+
+  // ─── Ticket selection handlers ────────────────────────────────
+  const handleTicketSelect = useCallback(async (ticketId: string) => {
+    const ticket = tickets.find(t => t.id === ticketId);
+    if (!ticket) return;
+
+    // Cache (not disconnect!) the previous ticket's socket so it keeps
+    // receiving messages in the background and can update unread counts.
+    if (supportSocket && selectedTicketId && selectedTicketId !== ticketId) {
+      pendingSocketsRef.current.set(selectedTicketId, supportSocket);
+      setSupportSocket(null);
+    }
+
+    setSelectedTicketId(ticketId);
+    setMode('human');
+
+    // Clear unread count when user opens a ticket
+    setUnreadCounts(prev => {
+      if (!prev[ticketId]) return prev;
+      const next = { ...prev };
+      delete next[ticketId];
+      return next;
+    });
+
+    // Mark ticket as read on backend (source of truth)
+    (async () => {
+      try {
+        await fetch(
+          `${ENDPOINTS.escalation}/api/v1/escalations/${ticketId}/read?analyticsKey=${analyticsKey}`,
+          { method: 'POST' }
+        );
+        logger.info('AIAgent', '★ Marked ticket as read:', ticketId);
+      } catch (err) {
+        logger.warn('AIAgent', '★ Failed to mark ticket as read:', err);
+      }
+    })();
+
+    // Trigger scroll to bottom when modal opens
+    setChatScrollTrigger(prev => prev + 1);
+
+    // 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.)
+    try {
+      const res = await fetch(
+        `${ENDPOINTS.escalation}/api/v1/escalations/${ticketId}?analyticsKey=${analyticsKey}`
+      );
+      if (res.ok) {
+        const data = await res.json();
+        const history: Array<{ role: string; content: string; timestamp?: string }> =
+          Array.isArray(data.history) ? data.history : [];
+        const restored: AIMessage[] = history.map((entry, i) => ({
+          id: `restored-${ticketId}-${i}`,
+          role: (entry.role === 'live_agent' ? 'assistant' : entry.role) as any,
+          content: entry.content,
+          timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now(),
+        }));
+        setMessages(restored);
+        // Update ticket in local list with fresh history
+        if (data.wsUrl) {
+          setTickets(prev => prev.map(t => t.id === ticketId ? { ...t, history, wsUrl: data.wsUrl } : t));
+        }
+      } else {
+        // Fallback to local ticket history
+        if (ticket.history?.length) {
+          const restored: AIMessage[] = ticket.history.map(
+            (entry: { role: string; content: string; timestamp?: string }, i: number) => ({
+              id: `restored-${ticketId}-${i}`,
+              role: (entry.role === 'live_agent' ? 'assistant' : entry.role) as any,
+              content: entry.content,
+              timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now(),
+            })
+          );
+          setMessages(restored);
+        } else {
+          setMessages([]);
+        }
+      }
+    } catch (err) {
+      logger.warn('AIAgent', '★ Failed to fetch ticket history, using local:', err);
+      if (ticket.history?.length) {
+        const restored: AIMessage[] = ticket.history.map(
+          (entry: { role: string; content: string; timestamp?: string }, i: number) => ({
+            id: `restored-${ticketId}-${i}`,
+            role: (entry.role === 'live_agent' ? 'assistant' : entry.role) as any,
+            content: entry.content,
+            timestamp: entry.timestamp ? new Date(entry.timestamp).getTime() : Date.now(),
+          })
+        );
+        setMessages(restored);
+      } else {
+        setMessages([]);
+      }
+    }
+
+    // Reuse the already-connected socket if escalation just happened,
+    // 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;
+    }
+
+    const socket = new EscalationSocket({
+      onReply: (reply: string) => {
+        // Always update ticket history
+        setTickets(prev => prev.map(t => {
+          if (t.id !== ticketId) return t;
+          return {
+            ...t,
+            history: [...(t.history || []), { role: 'live_agent', content: reply, timestamp: new Date().toISOString() }],
+          };
+        }));
+
+        // Route via ref: only push to messages[] if user is viewing THIS ticket
+        if (selectedTicketIdRef.current === ticketId) {
+          const msg: AIMessage = {
             id: `human-${Date.now()}`,
-            role: 'assistant' as const,
-            content: `👤 Human Agent: ${reply}`,
+            role: 'assistant',
+            content: reply,
             timestamp: Date.now(),
-          },
-        ]);
+          };
+          setMessages(prev => [...prev, msg]);
+          setLastResult({ success: true, message: `👤 ${reply}`, steps: [] });
+        } else {
+          setUnreadCounts(prev => ({
+            ...prev,
+            [ticketId]: (prev[ticketId] || 0) + 1,
+          }));
+        }
       },
+      onTypingChange: setIsLiveAgentTyping,
+      onTicketClosed: (closedTicketId?: string) => {
+        if (closedTicketId) {
+          setUnreadCounts(prev => {
+            const next = { ...prev };
+            delete next[closedTicketId];
+            return next;
+          });
+        }
+        clearSupport(ticketId);
+      },
+      onError: (err) => logger.error('AIAgent', '★ Socket error on select:', err),
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [analyticsKey, navRef, customTools]);
+    socket.connect(ticket.wsUrl);
+    setSupportSocket(socket);
+  }, [tickets, supportSocket, selectedTicketId, analyticsKey, clearSupport]);
+
+  const handleBackToTickets = useCallback(() => {
+    // Cache socket in pendingSocketsRef instead of disconnecting —
+    // keeps the WS alive so new messages update unreadCounts in real time.
+    const currentTicketId = selectedTicketIdRef.current;
+    // Use functional setter to read + cache the current socket without closure dependency
+    setSupportSocket(prev => {
+      if (prev && currentTicketId) {
+        pendingSocketsRef.current.set(currentTicketId, prev);
+        logger.info('AIAgent', '★ Socket cached for ticket:', currentTicketId, '— stays alive for badge updates');
+      }
+      return null;
+    });
+    setSelectedTicketId(null);
+    setMessages([]);
+    setIsLiveAgentTyping(false);
+  }, []); // No dependencies — uses refs/functional setters
 
   const mergedCustomTools = useMemo(() => {
     if (!autoEscalateTool) return customTools;
@@ -312,13 +828,13 @@ export function AIAgent({
   const screenPollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const lastAgentErrorRef = useRef<string | null>(null);
 
-  // Compute available modes from props
   const availableModes: AgentMode[] = useMemo(() => {
     const modes: AgentMode[] = ['text'];
     if (enableVoice) modes.push('voice');
-    logger.info('AIAgent', `Available modes: ${modes.join(', ')}`);
+    if (tickets.length > 0) modes.push('human');
+    logger.info('AIAgent', '★ availableModes recomputed:', modes, '| tickets:', tickets.length, '| ticketIds:', tickets.map(t => t.id));
     return modes;
-  }, [enableVoice]);
+  }, [enableVoice, tickets]);
 
   // Ref-based resolver for ask_user — stays alive across renders
   const askUserResolverRef = useRef<((answer: string) => void) | null>(null);
@@ -405,29 +921,32 @@ export function AIAgent({
       return;
     }
 
-    const telemetry = new TelemetryService({
-      analyticsKey,
-      analyticsProxyUrl,
-      analyticsProxyHeaders,
-      debug,
-    });
-    telemetryRef.current = telemetry;
-    bindTelemetryService(telemetry);
-    telemetry.start();
+    // Initialize persistent device ID before telemetry starts
+    initDeviceId().then(() => {
 
-    return () => {
-      telemetry.stop();
-      telemetryRef.current = null;
-      bindTelemetryService(null);
-    };
-  }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, debug]);
+      const telemetry = new TelemetryService({
+        analyticsKey,
+        analyticsProxyUrl,
+        analyticsProxyHeaders,
+        debug,
+      });
+      telemetryRef.current = telemetry;
+      bindTelemetryService(telemetry);
+      telemetry.start();
+
+      const initialRoute = navRef?.getCurrentRoute?.();
+      if (initialRoute?.name) {
+        telemetry.setScreen(initialRoute.name);
+      }
+    }); // initDeviceId
+  }, [analyticsKey, analyticsProxyUrl, analyticsProxyHeaders, bindTelemetryService, debug, navRef]);
 
   // ─── Security warnings ──────────────────────────────────────
 
   useEffect(() => {
     // @ts-ignore
     if (typeof __DEV__ !== 'undefined' && !__DEV__ && apiKey && !proxyUrl) {
-      console.warn(
+      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. ' +
@@ -501,10 +1020,10 @@ export function AIAgent({
 
   // ─── Voice/Live Service Initialization ──────────────────────
 
-  // Initialize voice services when mode changes to voice or live
+  // Initialize voice services when mode changes to voice
   useEffect(() => {
-    if (mode === 'text') {
-      logger.info('AIAgent', 'Text mode — skipping voice service init');
+    if (mode !== 'voice') {
+      logger.info('AIAgent', `Mode ${mode} — skipping voice service init`);
       return;
     }
 
@@ -801,8 +1320,45 @@ export function AIAgent({
     if (!message.trim() || isThinking) return;
 
     logger.info('AIAgent', `User message: "${message}"`);
+    setLastUserMessage(message.trim());
+
+    // Intercom-style transparent intercept:
+    // If we're connected to a human agent, all text input goes directly to them.
+    if (selectedTicketId && supportSocket) {
+      // Gate: do not allow sending if the ticket is closed/resolved.
+      const activeTicket = tickets.find(t => t.id === selectedTicketId);
+      const CLOSED_STATUSES = ['closed', 'resolved'];
+      if (activeTicket && CLOSED_STATUSES.includes(activeTicket.status)) {
+        setLastResult({
+          success: false,
+          message: 'This conversation is closed. Please start a new request.',
+          steps: [],
+        });
+        return;
+      }
 
-    // Append user message
+      if (supportSocket.sendText(message)) {
+        setMessages((prev) => [
+          ...prev,
+          { id: `user-${Date.now()}`, role: 'user', content: message.trim(), timestamp: Date.now() },
+        ]);
+        setIsThinking(true);
+        setStatusText('Sending to agent...');
+        setTimeout(() => {
+          setIsThinking(false);
+          setStatusText('');
+        }, 800);
+      } else {
+        setLastResult({
+          success: false,
+          message: 'Failed to send message to support agent. Connection lost.',
+          steps: [],
+        });
+      }
+      return;
+    }
+
+    // Append user message to AI thread
     setMessages((prev) => [
       ...prev,
       {
@@ -859,9 +1415,16 @@ export function AIAgent({
         });
       }
 
-      setLastResult(result);
+      logger.info('AIAgent', '★ handleSend — SETTING lastResult:', result.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');
+      if (!stepsHadEscalation) {
+        setLastResult(result);
+      }
 
-      // Append assistant message
       setMessages((prev) => [
         ...prev,
         {
@@ -990,8 +1553,9 @@ export function AIAgent({
                 onSend={handleSend}
                 isThinking={isThinking}
                 lastResult={lastResult}
+                lastUserMessage={lastUserMessage}
                 language={'en'}
-                onDismiss={() => setLastResult(null)}
+                onDismiss={() => { setLastResult(null); setLastUserMessage(null); }}
                 theme={accentColor || theme ? {
                   ...(accentColor ? { primaryColor: accentColor } : {}),
                   ...theme,
@@ -999,12 +1563,13 @@ export function AIAgent({
                 availableModes={availableModes}
                 mode={mode}
                 onModeChange={(newMode) => {
-                  logger.info('AIAgent', `Mode change: ${mode} → ${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) => {
@@ -1033,9 +1598,28 @@ export function AIAgent({
                     audioOutputRef.current?.unmute();
                   }
                 }}
+                tickets={tickets}
+                selectedTicketId={selectedTicketId}
+                onTicketSelect={handleTicketSelect}
+                onBackToTickets={handleBackToTickets}
+                autoExpandTrigger={autoExpandTrigger}
+                unreadCounts={unreadCounts}
+                totalUnread={totalUnread}
               />
             </ProactiveHint>
           )}
+
+          {/* Support chat modal — opens when user taps a ticket */}
+          <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}
+          />
         </View>
       </View>
     </AgentContext.Provider>