@blario/react-native 0.1.5 → 0.1.7

package/src/agent-mode/ui/AgentDock.tsx

@@ -7,6 +7,7 @@ import { chooseDock, freeBand, messageCap, type PanelDock, STACK_GAP } from '../
 import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import { type ActiveSpotlight, AgentPanel, panelChrome } from './AgentPanel.tsx';
 import { StatusCard, type StatusCorners } from './StatusCard.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface DockActions {
   place: (id: number, band: Band) => void | Promise<void>;
@@ -88,7 +89,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
   const pending = useRef<Array<ReturnType<typeof setTimeout>>>([]);
 
   const later = (callback: () => void, milliseconds: number): void => {
-    pending.current.push(setTimeout(callback, milliseconds));
+    pending.current.push(setTimeout(contain('AgentDock.later', callback), milliseconds));
   };
 
   const rest = (): void => {
@@ -118,15 +119,15 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
     const duration = reduceMotion ? REDUCED_MS : CLOSE_MS;
     const easing = reduceMotion ? Easing.linear : CLOSE;
     if (dockRef.current === 'bottom') {
-      Animated.parallel([animate(panelOpacity, 0, duration, easing), animate(panelShift, reduceMotion ? 0 : ENTER_SHIFT, duration, easing)]).start(() => {
+      Animated.parallel([animate(panelOpacity, 0, duration, easing), animate(panelShift, reduceMotion ? 0 : ENTER_SHIFT, duration, easing)]).start(contain('AgentDock.close', () => {
         if (presentedId.current === null) {
           rest();
           setPresented(null);
         }
-      });
+      }));
       return;
     }
-    Animated.parallel([animate(stackOpacity, 0, duration, easing), animate(stackShift, reduceMotion ? 0 : -ENTER_SHIFT, duration, easing)]).start(() => {
+    Animated.parallel([animate(stackOpacity, 0, duration, easing), animate(stackShift, reduceMotion ? 0 : -ENTER_SHIFT, duration, easing)]).start(contain('AgentDock.closeTop', () => {
       if (presentedId.current !== null) {
         return;
       }
@@ -134,7 +135,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
       stackOpacity.setValue(0);
       setPresented(null);
       later(() => animate(stackOpacity, 1, STACK_RETURN_MS, Easing.out(Easing.ease)).start(), STACK_RETURN_PAUSE_MS);
-    });
+    }));
   };
 
   useEffect(() => {
@@ -193,7 +194,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
       Animated.parallel([animate(panelOpacity, 1, duration, easing), animate(panelShift, 0, duration, easing)]).start();
       return;
     }
-    animate(stackOpacity, 0, STACK_FADE_MS, Easing.out(Easing.ease)).start(() => {
+    animate(stackOpacity, 0, STACK_FADE_MS, Easing.out(Easing.ease)).start(contain('AgentDock.moveTop', () => {
       later(() => {
         if (presentedId.current !== presented.id) {
           return;
@@ -205,7 +206,7 @@ export function AgentDock({ spotlight, actions, card, strings, color, reduceMoti
         stackShift.setValue(reduceMotion ? 0 : -ENTER_SHIFT);
         Animated.parallel([animate(stackOpacity, 1, duration, easing), animate(stackShift, 0, duration, easing)]).start();
       }, STACK_SWAP_PAUSE_MS);
-    });
+    }));
   }, [presented]);
 
   useEffect(() => {

package/src/agent-mode/ui/AgentLayer.tsx

@@ -14,6 +14,7 @@ import { MessageBubbles } from './MessageBubbles.tsx';
 import { PendingOverlay } from './PendingOverlay.tsx';
 import { SpotlightLayer } from './SpotlightLayer.tsx';
 import { TouchShield } from './TouchShield.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentLayerProps {
   snapshot: AgentModeSnapshot;
@@ -64,7 +65,7 @@ function useBlockedTap(): { toast: boolean; pulse: number; block: () => void } {
     if (timer.current !== null) {
       clearTimeout(timer.current);
     }
-    timer.current = setTimeout(() => setToast(false), TOAST_MS);
+    timer.current = setTimeout(contain('AgentLayer.toast', () => setToast(false)), TOAST_MS);
   };
   return { toast, pulse, block };
 }

package/src/agent-mode/ui/AgentLayerHost.tsx

@@ -3,6 +3,7 @@ import { Modal, Platform, StyleSheet, View } from 'react-native';
 
 import { loadFullWindowOverlay } from './full-window-overlay.ts';
 import { chooseLayerHost } from './layer-host.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentLayerHostProps {
   visible: boolean;
@@ -20,7 +21,7 @@ export function AgentLayerHost({ visible, generation, onRequestClose, children }
   }
   if (HOST === 'modal') {
     return (
-      <Modal key={generation} visible transparent animationType="none" hardwareAccelerated onRequestClose={onRequestClose}>
+      <Modal key={generation} visible transparent animationType="none" hardwareAccelerated onRequestClose={contain('AgentLayerHost.close', onRequestClose)}>
         {children}
       </Modal>
     );

package/src/agent-mode/ui/AgentPanel.tsx

@@ -9,6 +9,7 @@ import type { PanelDock } from '../panel-geometry.ts';
 import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import { MarkdownText } from './MarkdownText.tsx';
 import { WarningIcon } from './WarningIcon.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export type ActiveSpotlight = Exclude<SpotlightSnapshot, { kind: 'none' }>;
 
@@ -104,7 +105,7 @@ export function AgentPanel({ spotlight, dock, strings, color, messageMaxHeight,
       {spotlight.kind === 'reading' ? (
         <View style={styles.progressRow}>
           <Progress durationMs={spotlight.durationMs} running={spotlight.shown} color={color} />
-          <Pressable accessibilityRole="button" onPress={onSkip} style={styles.skip}>
+          <Pressable accessibilityRole="button" onPress={contain('AgentPanel.skip', onSkip)} style={styles.skip}>
             <Text style={styles.skipText}>{strings.readingSkip}</Text>
           </Pressable>
         </View>
@@ -117,12 +118,12 @@ export function AgentPanel({ spotlight, dock, strings, color, messageMaxHeight,
             </View>
           ) : null}
           <View style={[styles.buttons, destructive ? styles.destructiveButtons : null]}>
-            <Pressable accessibilityRole="button" onPress={onStop} style={[styles.button, styles.stop]}>
+            <Pressable accessibilityRole="button" onPress={contain('AgentPanel.stop', onStop)} style={[styles.button, styles.stop]}>
               <Text style={[styles.buttonText, { color: INK }]}>{strings.confirmStop}</Text>
             </Pressable>
             <Pressable
               accessibilityRole="button"
-              onPress={onConfirm}
+              onPress={contain('AgentPanel.confirm', onConfirm)}
               style={[styles.button, destructive ? { backgroundColor: DESTRUCTIVE } : [styles.confirmButton, { backgroundColor: color }]]}
             >
               <Text style={[styles.buttonText, { color: destructive ? '#ffffff' : onColor(color) }]}>

package/src/agent-mode/ui/AgentTap.tsx

@@ -3,6 +3,7 @@ import { Animated, Easing, StyleSheet, View } from 'react-native';
 
 import { centerOf, type Point } from '../../host/rect.ts';
 import type { CursorSnapshot } from '../cursor.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface AgentTapProps {
   snapshot: CursorSnapshot;
@@ -90,7 +91,7 @@ function TapRing({ point, landed, ending, color, reduceMotion, onEnded }: TapRin
 
   useEffect(() => {
     if (ending) {
-      timing(opacity, 0, END_FADE_MS, EASE_OUT).start(() => ended.current());
+      timing(opacity, 0, END_FADE_MS, EASE_OUT).start(contain('AgentTap.ended', () => ended.current()));
     }
   }, [ending, opacity, ended]);
 
@@ -107,7 +108,7 @@ function TapRipple({ point, onDone }: { point: Point; onDone: () => void }): Rea
   const progress = useRef(new Animated.Value(0)).current;
   const done = useLatest(onDone);
   useEffect(() => {
-    timing(progress, 1, RIPPLE_MS, RIPPLE, PRESS_MS).start(() => done.current());
+    timing(progress, 1, RIPPLE_MS, RIPPLE, PRESS_MS).start(contain('AgentTap.ripple', () => done.current()));
   }, [progress, done]);
   return (
     <Animated.View

package/src/agent-mode/ui/SpotlightLayer.tsx

@@ -5,6 +5,7 @@ import type { SpotlightSnapshot } from '../spotlight-controller.ts';
 import type { ActiveSpotlight } from './AgentPanel.tsx';
 import { SPOTLIGHT_DIM, SpotlightOverlay } from './SpotlightOverlay.tsx';
 import { TargetPulse } from './TargetPulse.tsx';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface SpotlightLayerProps {
   spotlight: SpotlightSnapshot;
@@ -33,11 +34,11 @@ export function SpotlightLayer({ spotlight, color, reduceMotion, onBackdropPress
       Animated.timing(opacity, { toValue: 1, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start();
       return;
     }
-    Animated.timing(opacity, { toValue: 0, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start(({ finished }) => {
+    Animated.timing(opacity, { toValue: 0, duration, easing: Easing.out(Easing.ease), useNativeDriver: true }).start(contain('SpotlightLayer.fade', ({ finished }: { finished: boolean }) => {
       if (finished) {
         setGone(true);
       }
-    });
+    }));
   }, [visible, reduceMotion, opacity]);
 
   const current = last.current;
@@ -46,7 +47,7 @@ export function SpotlightLayer({ spotlight, color, reduceMotion, onBackdropPress
   }
   return (
     <Animated.View pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]}>
-      {current.kind === 'confirming' ? <Pressable style={StyleSheet.absoluteFill} onPress={onBackdropPress} /> : null}
+      {current.kind === 'confirming' ? <Pressable style={StyleSheet.absoluteFill} onPress={contain('SpotlightLayer.backdrop', onBackdropPress)} /> : null}
       {current.hole === null ? <View pointerEvents="none" style={styles.dim} /> : <SpotlightOverlay hole={current.hole} />}
       {current.kind === 'confirming' && current.target !== null ? (
         <TargetPulse target={current.target} radius={current.request.target?.radius ?? 0} color={color} reduceMotion={reduceMotion} />

package/src/agent-mode/ui/StatusCard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { onColor, withAlpha } from '../colors.ts';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface StatusCardProps {
   status: string;
@@ -54,7 +55,7 @@ function useStopPulse(pulse: number): { scale: Animated.Value; bordered: boolean
     ]);
     const animation = Animated.loop(beat, { iterations: PULSE_TIMES });
     animation.start();
-    const timer = setTimeout(() => setBordered(false), BORDER_MS);
+    const timer = setTimeout(contain('StatusCard.border', () => setBordered(false)), BORDER_MS);
     return () => {
       animation.stop();
       clearTimeout(timer);
@@ -83,7 +84,7 @@ export function StatusCard({ status, queued, stopLabel, color, stopHidden, corne
             accessibilityLabel={stopLabel}
             hitSlop={STOP_HIT_SLOP}
             style={[styles.stop, { backgroundColor: withAlpha(ink, 0.2) }, bordered ? { borderWidth: 2, borderColor: withAlpha(ink, 0.8) } : null]}
-            onPress={onStop}
+            onPress={contain('StatusCard.stop', onStop)}
           >
             <View style={[styles.stopIcon, { backgroundColor: ink }]} />
           </Pressable>

package/src/agent-mode/ui/TouchShield.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import { contain } from '../../telemetry/contain.ts';
 
 export interface TouchShieldProps {
   onBlockedTap: () => void;
@@ -10,7 +11,7 @@ export function TouchShield({ onBlockedTap }: TouchShieldProps): React.JSX.Eleme
     <View
       style={styles.shield}
       onStartShouldSetResponder={() => true}
-      onResponderRelease={onBlockedTap}
+      onResponderRelease={contain('TouchShield.tap', onBlockedTap)}
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
     />

package/src/backend/foreground.ts

@@ -1,10 +1,15 @@
-import { AppState } from 'react-native';
+import { AppState, type AppStateStatus } from 'react-native';
+
+import { contain } from '../telemetry/contain.ts';
 
 export function watchForeground(onActive: () => void): () => void {
-  const subscription = AppState.addEventListener('change', (state) => {
-    if (state === 'active') {
-      onActive();
-    }
-  });
+  const subscription = AppState.addEventListener(
+    'change',
+    contain('watchForeground', (state: AppStateStatus) => {
+      if (state === 'active') {
+        onActive();
+      }
+    }),
+  );
   return () => subscription.remove();
 }

package/src/backend/health.ts

@@ -1,6 +1,7 @@
 import { AppState, type AppStateStatus, type NativeEventSubscription } from 'react-native';
 
 import { SDK_VERSION } from '../version.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export interface ClientHealth {
   visibility: 'visible' | 'hidden';
@@ -27,13 +28,16 @@ export class ClientHealthProbe {
       return;
     }
     this.hiddenSince = AppState.currentState === 'active' ? null : Date.now();
-    this.subscription = AppState.addEventListener('change', (state) => this.onStateChange(state));
+    this.subscription = AppState.addEventListener('change', contain('ClientHealth.state', (state: AppStateStatus) => this.onStateChange(state)));
     this.expectedTickAt = Date.now() + PROBE_INTERVAL_MS;
-    this.timer = setInterval(() => {
-      const now = Date.now();
-      this.worstLagMs = Math.max(this.worstLagMs, now - this.expectedTickAt);
-      this.expectedTickAt = now + PROBE_INTERVAL_MS;
-    }, PROBE_INTERVAL_MS);
+    this.timer = setInterval(
+      contain('ClientHealth.probe', () => {
+        const now = Date.now();
+        this.worstLagMs = Math.max(this.worstLagMs, now - this.expectedTickAt);
+        this.expectedTickAt = now + PROBE_INTERVAL_MS;
+      }),
+      PROBE_INTERVAL_MS,
+    );
   }
 
   stop(): void {

package/src/backend/presence.ts

@@ -1,6 +1,7 @@
-import { AppState, type NativeEventSubscription } from 'react-native';
+import { AppState, type AppStateStatus, type NativeEventSubscription } from 'react-native';
 
 import type { ApiClient } from './api-client.ts';
+import { contain } from '../telemetry/contain.ts';
 
 const HEARTBEAT_INTERVAL_MS = 30_000;
 const IDLE_TIMEOUT_MS = 3 * 60_000;
@@ -29,12 +30,15 @@ export class PresenceManager {
     }
     this.started = true;
     this.lastInteraction = this.now();
-    this.subscription = AppState.addEventListener('change', (state) => {
-      if (state === 'active') {
-        this.lastInteraction = this.now();
-        this.fireNow();
-      }
-    });
+    this.subscription = AppState.addEventListener(
+      'change',
+      contain('Presence.state', (state: AppStateStatus) => {
+        if (state === 'active') {
+          this.lastInteraction = this.now();
+          this.fireNow();
+        }
+      }),
+    );
     this.fireNow();
   }
 
@@ -71,7 +75,7 @@ export class PresenceManager {
     if (this.timer !== null) {
       clearTimeout(this.timer);
     }
-    this.timer = setTimeout(() => this.fireNow(), HEARTBEAT_INTERVAL_MS);
+    this.timer = setTimeout(contain('Presence.beat', () => this.fireNow()), HEARTBEAT_INTERVAL_MS);
   }
 
   private async send(): Promise<void> {

package/src/backend/session-socket.ts

@@ -3,6 +3,7 @@ import { backoffDelay, isExhausted, SOCKET_BACKOFF } from './backoff.ts';
 import type { IdentityProof } from './identity.ts';
 import { ResponseCache } from './response-cache.ts';
 import { buildSocketUrl } from './socket-url.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export type SocketState = 'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'failed';
 
@@ -149,7 +150,7 @@ export class SessionSocket {
       return;
     }
     this.socket = socket;
-    socket.onopen = () => {
+    socket.onopen = contain('SessionSocket.open', () => {
       if (this.epoch !== epoch) {
         return;
       }
@@ -159,8 +160,8 @@ export class SessionSocket {
       this.options.onState('connected');
       socket.send(JSON.stringify({ type: 'joined' }));
       this.cache.drain().forEach((payload) => socket.send(payload));
-    };
-    socket.onmessage = (event) => {
+    });
+    socket.onmessage = contain('SessionSocket.message', (event: { data?: unknown }) => {
       if (this.epoch !== epoch || typeof event.data !== 'string') {
         return;
       }
@@ -170,13 +171,13 @@ export class SessionSocket {
         this.identityRefreshUsed = false;
       }
       this.options.onMessage(event.data, frame);
-    };
+    });
     socket.onerror = () => undefined;
-    socket.onclose = (event) => {
+    socket.onclose = contain('SessionSocket.close', (event: { code?: number }) => {
       if (this.epoch === epoch) {
         this.handleClose(epoch, event.code ?? STALE_CLOSE_CODE);
       }
-    };
+    });
   }
 
   private handleClose(epoch: number, code: number): void {
@@ -210,17 +211,20 @@ export class SessionSocket {
     if (isExhausted(SOCKET_BACKOFF, this.attempts)) {
       this.options.onState('failed');
       this.exhausted = true;
-      this.reconnectTimer = setTimeout(() => this.recover(), EXHAUSTED_RETRY_MS);
+      this.reconnectTimer = setTimeout(contain('SessionSocket.recover', () => this.recover()), EXHAUSTED_RETRY_MS);
       return;
     }
     const delay = backoffDelay(SOCKET_BACKOFF, this.attempts);
     this.options.onState('reconnecting');
-    this.reconnectTimer = setTimeout(() => {
-      this.attempts += 1;
-      if (this.sessionId !== null) {
-        this.connect(this.sessionId);
-      }
-    }, delay);
+    this.reconnectTimer = setTimeout(
+      contain('SessionSocket.reconnect', () => {
+        this.attempts += 1;
+        if (this.sessionId !== null) {
+          this.connect(this.sessionId);
+        }
+      }),
+      delay,
+    );
   }
 
   private recover(): void {
@@ -240,11 +244,14 @@ export class SessionSocket {
   private startLiveness(): void {
     this.stopLiveness();
     this.lastFrameAt = Date.now();
-    this.livenessTimer = setInterval(() => {
-      if (Date.now() - this.lastFrameAt >= STALE_AFTER_MS) {
-        this.dropStaleSocket();
-      }
-    }, LIVENESS_CHECK_MS);
+    this.livenessTimer = setInterval(
+      contain('SessionSocket.liveness', () => {
+        if (Date.now() - this.lastFrameAt >= STALE_AFTER_MS) {
+          this.dropStaleSocket();
+        }
+      }),
+      LIVENESS_CHECK_MS,
+    );
   }
 
   private stopLiveness(): void {

package/src/blar.ts

@@ -1,6 +1,7 @@
 import type { BackendTransport } from './backend/backend-transport.ts';
 import type { BlarIdentity } from './backend/identity.ts';
 import type { MessageMetadata } from './backend/message-metadata.ts';
+import { attempt } from './telemetry/contain.ts';
 
 export interface MessageMetadataOptions {
   includeTextDom: boolean;
@@ -49,19 +50,19 @@ class BlarClient {
   }
 
   open(): void {
-    this.chat?.open();
+    attempt('Blar.open', () => this.chat?.open());
   }
 
   close(): void {
-    this.chat?.close();
+    attempt('Blar.close', () => this.chat?.close());
   }
 
   getUnreadCount(): number {
-    return this.chat?.getUnread() ?? 0;
+    return attempt('Blar.getUnreadCount', () => this.chat?.getUnread()) ?? 0;
   }
 
   isChatOpen(): boolean {
-    return this.chat?.isOpen() ?? false;
+    return attempt('Blar.isChatOpen', () => this.chat?.isOpen()) ?? false;
   }
 
   async setUser(identity: BlarIdentity): Promise<void> {
@@ -81,15 +82,15 @@ class BlarClient {
   }
 
   isConnected(): boolean {
-    return this.transport?.isConnected() ?? false;
+    return attempt('Blar.isConnected', () => this.transport?.isConnected()) ?? false;
   }
 
   getTabId(): string | null {
-    return this.transport?.getTabId() ?? null;
+    return attempt('Blar.getTabId', () => this.transport?.getTabId()) ?? null;
   }
 
   getSessionState(): ReturnType<BackendTransport['getState']> | null {
-    return this.transport?.getState() ?? null;
+    return attempt('Blar.getSessionState', () => this.transport?.getState()) ?? null;
   }
 
   getMessageMetadata(options: MessageMetadataOptions = { includeTextDom: false }): Promise<MessageMetadata | null> {

package/src/chat/ChatSheet.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, BackHandler, Dimensions, Easing, KeyboardAvoidingView, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Animated, BackHandler, Dimensions, Easing, Keyboard, type KeyboardEvent, Platform, Pressable, StyleSheet, View } from 'react-native';
 
 import { useInsets } from '../ui/useInsets.ts';
 import type { UiStrings } from '../ui/strings.ts';
 import type { SheetMode } from './chat-state.ts';
+import { attempt, contain } from '../telemetry/contain.ts';
 
 export interface ChatSheetProps {
   mode: SheetMode;
@@ -16,12 +17,38 @@ export interface ChatSheetProps {
 const TOP_GAP = 12;
 const ANIMATION_MS = 240;
 
+// iOS lifts the sheet over the keyboard while the chat is open. Not KeyboardAvoidingView: it reacts to every keyboard in
+// the app even with the chat closed, and its LayoutAnimation applies to the host's whole next commit, which aborted a
+// debug build as soon as a keyboard opened while the host mounted views. On Android the window resizes by itself.
+function useKeyboardInset(active: boolean, homeIndicator: number): Animated.Value {
+  const inset = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!active || Platform.OS !== 'ios') {
+      inset.setValue(0);
+      return undefined;
+    }
+    const subscription = Keyboard.addListener('keyboardWillChangeFrame', contain('ChatSheet.keyboard', (event: KeyboardEvent) => {
+      const covered = Dimensions.get('window').height - event.endCoordinates.screenY;
+      Animated.timing(inset, {
+        // The keyboard covers the home-indicator inset, so the sheet's bottom padding sits under it, not above it.
+        toValue: Math.max(0, covered - homeIndicator),
+        duration: event.duration,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false,
+      }).start();
+    }));
+    return () => subscription.remove();
+  }, [active, homeIndicator, inset]);
+  return inset;
+}
+
 export function ChatSheet({ mode, mounted, strings, onClose, children }: ChatSheetProps): React.JSX.Element | null {
   const insets = useInsets();
   const windowHeight = Dimensions.get('window').height;
   const sheetHeight = windowHeight - insets.top - TOP_GAP;
   const progress = useRef(new Animated.Value(mode === 'open' ? 1 : 0)).current;
   const isOpen = mode === 'open';
+  const keyboardInset = useKeyboardInset(isOpen, insets.bottom);
 
   useEffect(() => {
     Animated.timing(progress, { toValue: isOpen ? 1 : 0, duration: ANIMATION_MS, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
@@ -32,7 +59,7 @@ export function ChatSheet({ mode, mounted, strings, onClose, children }: ChatShe
       return undefined;
     }
     const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
-      onClose();
+      attempt('ChatSheet.back', onClose);
       return true;
     });
     return () => subscription.remove();
@@ -46,15 +73,9 @@ export function ChatSheet({ mode, mounted, strings, onClose, children }: ChatShe
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents={isOpen ? 'auto' : 'none'}>
       <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
-        <Pressable accessibilityLabel={strings.chatClose} style={StyleSheet.absoluteFill} onPress={onClose} />
+        <Pressable accessibilityLabel={strings.chatClose} style={StyleSheet.absoluteFill} onPress={contain('ChatSheet.backdrop', onClose)} />
       </Animated.View>
-      <KeyboardAvoidingView
-        style={[styles.container, { paddingTop: insets.top + TOP_GAP }]}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        // The keyboard covers the home-indicator inset, so the sheet's bottom padding sits under it, not above it.
-        keyboardVerticalOffset={-insets.bottom}
-        pointerEvents="box-none"
-      >
+      <Animated.View style={[styles.container, { paddingTop: insets.top + TOP_GAP, paddingBottom: keyboardInset }]} pointerEvents="box-none">
         <Animated.View
           accessibilityElementsHidden={!isOpen}
           importantForAccessibility={isOpen ? 'yes' : 'no-hide-descendants'}
@@ -62,7 +83,7 @@ export function ChatSheet({ mode, mounted, strings, onClose, children }: ChatShe
         >
           {children}
         </Animated.View>
-      </KeyboardAvoidingView>
+      </Animated.View>
     </View>
   );
 }

package/src/chat/ChatView.tsx

@@ -10,6 +10,7 @@ import type { SessionRequest } from './chat-coordinator.ts';
 import { type ChatNavigation, leavesChat } from './navigation.ts';
 import { buildWidgetShell, type WidgetShellOptions } from './widget-shell.ts';
 import { loadWebView, type WebViewHandle } from './webview.ts';
+import { attempt, contain } from '../telemetry/contain.ts';
 
 export interface ChatViewProps {
   shell: WidgetShellOptions;
@@ -58,7 +59,7 @@ export function ChatView({ shell, unavailableText, getMetadata, getProof, onClos
   );
 
   const onMessage = useCallback(
-    (event: WebViewMessageEvent) => {
+    contain('ChatView.message', (event: WebViewMessageEvent) => {
       const message = parsePageMessage(event.nativeEvent.data);
       if (message === null) {
         return;
@@ -74,18 +75,19 @@ export function ChatView({ shell, unavailableText, getMetadata, getProof, onClos
       } else {
         log?.('webview ready');
       }
-    },
+    }),
     [handleCall, log, onClosed, onSessionChanged],
   );
 
   const onNavigation = useCallback(
-    (navigation: ChatNavigation) => {
-      if (!leavesChat(navigation, shell.apiBaseUrl)) {
-        return true;
-      }
-      Linking.openURL(navigation.url).catch(() => log?.('chat link could not be opened'));
-      return false;
-    },
+    (navigation: ChatNavigation) =>
+      attempt('ChatView.navigation', () => {
+        if (!leavesChat(navigation, shell.apiBaseUrl)) {
+          return true;
+        }
+        Linking.openURL(navigation.url).catch(() => log?.('chat link could not be opened'));
+        return false;
+      }) ?? false,
     [log, shell.apiBaseUrl],
   );
 
@@ -107,7 +109,7 @@ export function ChatView({ shell, unavailableText, getMetadata, getProof, onClos
       mixedContentMode="always"
       setSupportMultipleWindows={false}
       keyboardDisplayRequiresUserAction={false}
-      // The sheet's KeyboardAvoidingView already lifts the chat above the keyboard. WKWebView would also scroll its
+      // The sheet already lifts the chat above the keyboard. WKWebView would also scroll its
       // own page up to reveal the composer, pushing the widget out of the sheet; with scrolling off it resets that
       // offset (the message list is an overflow container and keeps scrolling). The form bar (^ v Done) is for
       // multi-field forms, not a one-field composer.

package/src/chat/Launcher.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useInsets } from '../ui/useInsets.ts';
+import { contain } from '../telemetry/contain.ts';
 
 export interface LauncherPlacement {
   side: 'left' | 'right';
@@ -26,7 +27,7 @@ export function Launcher({ unread, label, color, placement, onPress }: LauncherP
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={label}
-      onPress={onPress}
+      onPress={contain('Launcher.press', onPress)}
       style={[styles.button, horizontal, { bottom: insets.bottom + placement.offsetY, backgroundColor: color }]}
     >
       <View style={styles.bubble}>