@bugsession/react-native 0.1.0-beta.1 → 0.1.0-beta.3

package/README.md

@@ -4,7 +4,7 @@ Opt-in screen recording, microphone narration and bounded runtime telemetry for
 
 ## Compatibility
 
-The prepared beta targets React 19.3, React Native 0.88 and Expo SDK 58. Other versions have not been validated. iOS requires a native build on a physical iPhone, iOS 16.4+, and the optional `@bugsession/capture-native` package. Expo Go cannot record iOS video. Android currently needs a local recorder with an ADB-connected device; a VPS cannot capture Android screens. The recorder admits one session at a time.
+The SDK supports React 18.3.1–19.x and React Native 0.76–0.88. Expo SDK 54–58 are supported; SDK 52–53 are best effort. CI builds Android against SDK 52–58 and iOS simulators against SDK 52 and 54–58. Each Expo SDK selects its matching React and React Native versions; do not mix versions manually. iOS and Android require a native build and `@bugsession/capture-native`; Expo Go cannot capture screen video. Android uses MediaProjection and asks for screen-capture consent every session. The hosted recorder admits one session at a time.
 
 ## Install
 
@@ -12,10 +12,10 @@ After publication:
 
 ```sh
 npm install @bugsession/react-native@beta @bugsession/capture-native@beta
-npx expo install expo-file-system expo-modules-core
+npx expo install expo-audio expo-file-system
 ```
 
-For local evaluation, install the generated `.tgz` files instead. Add `ios.infoPlist.NSMicrophoneUsageDescription` to your Expo app config and rebuild the native app. Explain recording to the tester and start only after their explicit action.
+For local evaluation, install the generated `.tgz` files instead. Configure microphone permission through your audio library and rebuild the native app. Explain recording to the tester and start only after their explicit action.
 
 ## iOS example
 
@@ -25,8 +25,8 @@ import { IOSCapture } from '@bugsession/capture-native';
 import * as FileSystem from 'expo-file-system/legacy';
 
 BugSession.configure({
-  recorderUrl: 'https://beta.bugsession.dev', // available after DNS + deployment
-  recorderToken: betaRecorderToken,
+  recorderUrl: 'https://beta.bugsession.dev',
+  recorderToken: projectIngestionKey, // Generate in dashboard → project → Connect your SDK.
   device: { platform: 'ios', model: 'tester-device' },
   application: { version: '1.0.0', gitCommit: appSourceCommit },
   capture: {
@@ -56,8 +56,18 @@ Configure once while idle. Wire an automatic stop timer into your recording UI,
 
 React Navigation integration: call the function returned by `BugSession.navigationListener(navigationRef)` from both `NavigationContainer.onReady` and `onStateChange`. Expo Router apps can call `trackNavigation` when the committed pathname changes. Use `BugSession.Touchable` to instrument a Pressable, or `trackAction` directly. Send caught errors through `BugSession.captureError(error)`.
 
-`<BugSession.Trigger />` renders a floating logo button that starts and stops sessions. Its default position is `bottom-right`; configure `position` as `bottom-left`, `top-right`, or `top-left`, and adjust `offset` in points. Render it as an overlay above the app navigator. Pass `onError` to surface permission, recorder, and upload failures. Supply `children` to replace the default mark.
+`<BugSession.Trigger />` renders a floating logo button that starts and stops sessions. It is draggable by default, stays within screen bounds, and remembers its moved position across screen changes and trigger remounts while the app remains open. Render it once above the app navigator so it stays visible during navigation. Configure its initial corner with `position` (`bottom-right` by default; also `bottom-left`, `top-right`, or `top-left`) and adjust `offset` in points. Set `draggable={false}` to lock it. Pass `onError` to surface permission, recorder, and upload failures. Supply `children` to replace the default mark.
 
-Android requires an `audio` adapter implementing `prepare`, `start`, `stop` (returns a local URI), and `upload`; prepare must request microphone permission. `expo-audio` can provide this adapter. Point Android at the local recorder, not the hosted URL.
+Android uses `AndroidCapture` from `@bugsession/capture-native` plus an `audio` adapter implementing `prepare`, `start`, `stop` (returns a local URI), and `upload`. `prepare` must request microphone permission. `expo-audio` can provide this adapter. Android shows a system screen-capture prompt each session and a persistent capture notification; keep the app foregrounded through upload.
 
-Fetch instrumentation omits request/response bodies, headers, URL credentials and query strings. Free-text redaction is best effort. Video, audio, screen labels, URL paths and arbitrary logs can contain private information. Record only test data and stop before entering credentials. Native crashes and process termination can lose in-memory telemetry. A maximum of 5,000 events is retained. The shared beta token is extractable from an app build: use it only in invited builds, rotate it, and isolate each tester group into its own recorder and storage.
+Fetch instrumentation omits request/response bodies, headers, URL credentials and query strings. Free-text redaction is best effort. Video, audio, screen labels, URL paths and arbitrary logs can contain private information. Record only test data and stop before entering credentials. Native crashes and process termination can lose in-memory telemetry. A maximum of 5,000 events is retained. Project SDK keys are extractable from an app build, so share them only with invited testers. Each key scopes uploads to one project; it cannot read recordings. Revoke unused keys. Keep recorder operator and Clerk secrets server-side.
+
+## Project-scoped beta uploads
+
+Generate an SDK key from your dashboard project. Copy it into `recorderToken`; the backend derives project scope from the key. No SDK `projectId` option is needed. A project ID alone never authorizes uploads. Never distribute recorder operator or Clerk secret keys.
+
+Keys allow recording creation, media/telemetry submission and processing status only for their project. They cannot list or download recordings. Revoking a key rejects subsequent requests, including an unfinished upload sequence; an already accepted upload or processing job can finish. Replace the app configuration before revoking a key still used by testers.
+
+Hosted beta accepts native iOS ReplayKit and Android MediaProjection uploads. Limits are 3 active keys per project, 20 accepted recording starts per project per recorder hour, 600 requests per project per minute, 128 MiB per video, 32 MiB per audio upload, and 4 MiB telemetry bodies. The recorder still runs one recording or processing job at a time. Rate counters reset on restart. Mobile keys are extractable; treat them as limited ingestion capabilities, not account credentials.
+
+After stopping, open the same project in the dashboard and refresh its recordings list to see status. Status polling using an SDK key returns a warning count, not raw processing warnings; inspect the dashboard/operator tools for processing details.

package/dist/capture.d.ts

@@ -6,8 +6,11 @@ export type NativeRecording = {
     droppedAudioBuffers: number;
 };
 export type NativeCaptureAdapter = {
+    prepare?(): Promise<void>;
     clock(): Promise<number>;
-    start(): Promise<void>;
+    start(): Promise<void | {
+        firstVideoNativeMs: number;
+    }>;
     stop(): Promise<NativeRecording>;
     cancel(): Promise<void>;
     upload(url: string, uri: string, headers?: Record<string, string>): Promise<void>;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export type BugSessionOptions = {
 export type BugSessionTriggerProps = {
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     offset?: number;
+    draggable?: boolean;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     children?: React.ReactNode;
@@ -47,5 +48,5 @@ export declare const BugSession: {
         name: string;
         screen?: string;
     }): React.JSX.Element;
-    Trigger({ position, offset, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
+    Trigger({ position, offset, draggable, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
 };

package/dist/index.js

@@ -22,6 +22,14 @@ let state = 'idle';
 let restore = null;
 let currentScreen = 'Home';
 let rawFetch;
+let triggerPosition = null;
+const triggerSize = 58;
+function clampTriggerPosition(point, width, height) {
+    return {
+        left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
+        top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+    };
+}
 function authHeaders() {
     return options.recorderToken ? { Authorization: `Bearer ${options.recorderToken}` } : {};
 }
@@ -99,27 +107,33 @@ exports.BugSession = {
         rawFetch = globalThis.fetch.bind(globalThis);
         let createdId = null;
         let audioStarted = false;
+        const isIOS = react_native_1.Platform.OS === 'ios';
+        const useNativeCapture = isIOS || (react_native_1.Platform.OS === 'android' && !!options.capture);
         try {
-            const isIOS = react_native_1.Platform.OS === 'ios';
+            if (react_native_1.Platform.OS === 'android' && options.capture?.prepare)
+                await options.capture.prepare();
             if (!isIOS)
                 await options.audio.prepare();
             const clock = new core_1.SessionClock();
-            const nativeClock = isIOS ? await calibrate(clock, () => options.capture.clock()) : null;
+            const nativeClock = useNativeCapture ? await calibrate(clock, () => options.capture.clock()) : null;
             const best = await calibrate(clock, async () => (await request('/clock')).monoMs);
             collector = new core_1.Collector(clock);
-            const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend: isIOS ? 'replaykit' : 'adb', startedAt: new Date(Date.now() - clock.now()).toISOString() });
+            const captureBackend = isIOS ? 'replaykit' : useNativeCapture ? 'mediaprojection' : 'adb';
+            const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
             createdId = result.id;
-            let audioStartMs = clock.now();
-            if (isIOS)
-                await options.capture.start();
-            else {
+            const nativeStart = useNativeCapture ? await options.capture.start() : undefined;
+            const audioStartMs = clock.now();
+            if (!isIOS) {
                 options.audio.start();
                 audioStarted = true;
             }
+            const nativeVideoStartMs = nativeStart && 'firstVideoNativeMs' in nativeStart
+                ? nativeStart.firstVideoNativeMs + nativeClock.offset
+                : undefined;
             session = {
                 id: result.id, audioStartMs,
-                videoStartMs: isIOS ? 0 : Math.max(0, result.videoHostStartMs + best.offset),
-                uncertaintyMs: best.rtt / 2, captureBackend: isIOS ? 'replaykit' : 'adb',
+                videoStartMs: isIOS ? 0 : Math.max(0, nativeVideoStartMs ?? result.videoHostStartMs + best.offset),
+                uncertaintyMs: best.rtt / 2, captureBackend,
                 ...(nativeClock ? { nativeOffsetMs: nativeClock.offset, nativeUncertaintyMs: nativeClock.rtt / 2 } : {}),
             };
             restore = install(collector);
@@ -128,7 +142,7 @@ exports.BugSession = {
             return session.id;
         }
         catch (error) {
-            if (react_native_1.Platform.OS === 'ios')
+            if (useNativeCapture)
                 await options.capture?.cancel().catch(() => { });
             if (audioStarted)
                 await options.audio.stop().catch(() => null);
@@ -156,6 +170,20 @@ exports.BugSession = {
                 media = { ...active, ...(0, capture_1.alignNativeRecording)(recording, active.nativeOffsetMs, active.nativeUncertaintyMs) };
                 await options.capture.upload(`${options.recorderUrl}/sessions/${active.id}/video`, recording.uri, authHeaders());
             }
+            else if (active.captureBackend === 'mediaprojection') {
+                const recording = await options.capture.stop();
+                const uri = await options.audio.stop();
+                const audioEndMs = c.clock.now();
+                if (!uri)
+                    throw new Error('Microphone recording has no file');
+                await options.capture.upload(`${options.recorderUrl}/sessions/${active.id}/video`, recording.uri, authHeaders());
+                await options.audio.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
+                media = {
+                    ...active, audioEndMs, alignment: 'mediaprojection-host-clock',
+                    videoAlignmentUncertaintyMs: Math.max(250, active.nativeUncertaintyMs ?? 0),
+                    microphoneAvailable: true, droppedVideoFrames: recording.droppedVideoFrames,
+                };
+            }
             else {
                 const uri = await options.audio.stop();
                 const audioEndMs = c.clock.now();
@@ -170,7 +198,7 @@ exports.BugSession = {
             });
         }
         catch (error) {
-            if (active.captureBackend === 'replaykit')
+            if (active.captureBackend !== 'adb')
                 await options.capture.cancel().catch(() => { });
             // Release the device recorder, but preserve partial files for recovery.
             await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events: c.events, media: active, durationMs: c.clock.now() }).catch(() => { });
@@ -199,11 +227,53 @@ exports.BugSession = {
     Touchable({ name, screen, onPress, ...props }) {
         return (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, onPress: e => { exports.BugSession.trackAction({ name, screen }); onPress?.(e); } });
     },
-    Trigger({ position = 'bottom-right', offset = 24, style, accessibilityLabel, children, onError }) {
+    Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }) {
+        const { width, height } = (0, react_native_1.useWindowDimensions)();
+        const [point, setPoint] = react_1.default.useState(() => triggerPosition
+            ? clampTriggerPosition(triggerPosition, width, height)
+            : clampTriggerPosition({
+                left: position.includes('right') ? width - triggerSize - offset : offset,
+                top: position.includes('bottom') ? height - triggerSize - offset : offset,
+            }, width, height));
+        const pointRef = react_1.default.useRef(point);
+        pointRef.current = point;
+        const drag = react_1.default.useRef(null);
+        if (!drag.current)
+            drag.current = new react_native_1.Animated.ValueXY();
+        const dragStart = react_1.default.useRef(point);
+        react_1.default.useEffect(() => {
+            const next = clampTriggerPosition(pointRef.current, width, height);
+            pointRef.current = next;
+            setPoint(next);
+            if (triggerPosition)
+                triggerPosition = next;
+            drag.current?.setValue({ x: 0, y: 0 });
+        }, [width, height]);
+        const responder = react_1.default.useMemo(() => react_native_1.PanResponder.create({
+            onStartShouldSetPanResponder: () => false,
+            onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
+            onPanResponderGrant: () => { dragStart.current = pointRef.current; },
+            onPanResponderMove: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
+            },
+            onPanResponderRelease: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                triggerPosition = next;
+                pointRef.current = next;
+                setPoint(next);
+                drag.current?.setValue({ x: 0, y: 0 });
+            },
+            onPanResponderTerminate: (_, gesture) => {
+                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+                triggerPosition = next;
+                pointRef.current = next;
+                setPoint(next);
+                drag.current?.setValue({ x: 0, y: 0 });
+            },
+        }), [draggable, width, height]);
         const [busy, setBusy] = react_1.default.useState(false);
         const recording = state === 'recording';
-        const edge = position.includes('right') ? { right: offset } : { left: offset };
-        const vertical = position.includes('bottom') ? { bottom: offset } : { top: offset };
         const toggle = async () => {
             if (busy)
                 return;
@@ -221,11 +291,12 @@ exports.BugSession = {
                 setBusy(false);
             }
         };
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: [styles.triggerLayer, edge, vertical], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) });
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: styles.triggerLayer, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...(draggable ? responder.panHandlers : {}), style: [styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityHint: draggable ? 'Drag to move the BugSession button' : undefined, accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) }) });
     },
 };
 const styles = react_native_1.StyleSheet.create({
-    triggerLayer: { position: 'absolute', zIndex: 9999 },
+    triggerLayer: { ...react_native_1.StyleSheet.absoluteFill, zIndex: 9999 },
+    triggerPosition: { position: 'absolute' },
     trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
     triggerRecording: { backgroundColor: '#B9382F' },
     triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bugsession/react-native",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "react": ">=19.3.0 <20",
-    "react-native": ">=0.88.0 <0.89"
+    "react": ">=18.3.1 <20",
+    "react-native": ">=0.76.0 <0.89"
   },
   "description": "Opt-in React Native runtime evidence SDK",
   "license": "UNLICENSED",

package/src/capture.ts

@@ -6,8 +6,9 @@ export type NativeRecording = {
   droppedAudioBuffers: number;
 };
 export type NativeCaptureAdapter = {
+  prepare?(): Promise<void>;
   clock(): Promise<number>;
-  start(): Promise<void>;
+  start(): Promise<void | { firstVideoNativeMs: number }>;
   stop(): Promise<NativeRecording>;
   cancel(): Promise<void>;
   upload(url: string, uri: string, headers?: Record<string, string>): Promise<void>;

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StyleSheet, Text, View, type PressableProps, type StyleProp, type ViewStyle, Platform } from 'react-native';
+import { Animated, PanResponder, Pressable, StyleSheet, Text, View, useWindowDimensions, type PressableProps, type StyleProp, type ViewStyle, Platform } from 'react-native';
 import { Collector, instrumentFetch, safeText, safeUrl, SessionClock } from './core';
 import { alignNativeRecording, type NativeCaptureAdapter } from './capture';
 export type { NativeCaptureAdapter } from './capture';
@@ -15,6 +15,7 @@ export type BugSessionOptions = { recorderUrl: string; recorderToken?: string; a
 export type BugSessionTriggerProps = {
   position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
   offset?: number;
+  draggable?: boolean;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   children?: React.ReactNode;
@@ -24,11 +25,19 @@ type ErrorUtilsType = { getGlobalHandler(): (e: Error, fatal?: boolean) => void;
 const globals = globalThis as typeof globalThis & { ErrorUtils?: ErrorUtilsType };
 let options: BugSessionOptions;
 let collector: Collector | null = null;
-let session: { id: string; videoStartMs: number; audioStartMs: number; uncertaintyMs: number; captureBackend: 'adb' | 'replaykit'; nativeOffsetMs?: number; nativeUncertaintyMs?: number } | null = null;
+let session: { id: string; videoStartMs: number; audioStartMs: number; uncertaintyMs: number; captureBackend: 'adb' | 'replaykit' | 'mediaprojection'; nativeOffsetMs?: number; nativeUncertaintyMs?: number } | null = null;
 let state: 'idle' | 'starting' | 'recording' | 'stopping' = 'idle';
 let restore: (() => void) | null = null;
 let currentScreen = 'Home';
 let rawFetch: typeof fetch;
+let triggerPosition: { left: number; top: number } | null = null;
+const triggerSize = 58;
+function clampTriggerPosition(point: { left: number; top: number }, width: number, height: number) {
+  return {
+    left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
+    top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+  };
+}
 function authHeaders(): Record<string, string> {
   return options.recorderToken ? { Authorization: `Bearer ${options.recorderToken}` } : {};
 }
@@ -93,22 +102,28 @@ export const BugSession = {
     rawFetch = globalThis.fetch.bind(globalThis);
     let createdId: string | null = null;
     let audioStarted = false;
+    const isIOS = Platform.OS === 'ios';
+    const useNativeCapture = isIOS || (Platform.OS === 'android' && !!options.capture);
     try {
-      const isIOS = Platform.OS === 'ios';
+      if (Platform.OS === 'android' && options.capture?.prepare) await options.capture.prepare();
       if (!isIOS) await options.audio!.prepare();
       const clock = new SessionClock();
-      const nativeClock = isIOS ? await calibrate(clock, () => options.capture!.clock()) : null;
+      const nativeClock = useNativeCapture ? await calibrate(clock, () => options.capture!.clock()) : null;
       const best = await calibrate(clock, async () => (await request('/clock')).monoMs);
       collector = new Collector(clock);
-      const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend: isIOS ? 'replaykit' : 'adb', startedAt: new Date(Date.now() - clock.now()).toISOString() });
+      const captureBackend = isIOS ? 'replaykit' : useNativeCapture ? 'mediaprojection' : 'adb';
+      const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
       createdId = result.id;
-      let audioStartMs = clock.now();
-      if (isIOS) await options.capture!.start();
-      else { options.audio!.start(); audioStarted = true; }
+      const nativeStart = useNativeCapture ? await options.capture!.start() : undefined;
+      const audioStartMs = clock.now();
+      if (!isIOS) { options.audio!.start(); audioStarted = true; }
+      const nativeVideoStartMs = nativeStart && 'firstVideoNativeMs' in nativeStart
+        ? nativeStart.firstVideoNativeMs + nativeClock!.offset
+        : undefined;
       session = {
         id: result.id, audioStartMs,
-        videoStartMs: isIOS ? 0 : Math.max(0, result.videoHostStartMs + best.offset),
-        uncertaintyMs: best.rtt / 2, captureBackend: isIOS ? 'replaykit' : 'adb',
+        videoStartMs: isIOS ? 0 : Math.max(0, nativeVideoStartMs ?? result.videoHostStartMs + best.offset),
+        uncertaintyMs: best.rtt / 2, captureBackend,
         ...(nativeClock ? { nativeOffsetMs: nativeClock.offset, nativeUncertaintyMs: nativeClock.rtt / 2 } : {}),
       };
       restore = install(collector);
@@ -116,7 +131,7 @@ export const BugSession = {
       collector.add('navigation', { from: null, to: currentScreen });
       return session.id;
     } catch (error) {
-      if (Platform.OS === 'ios') await options.capture?.cancel().catch(() => {});
+      if (useNativeCapture) await options.capture?.cancel().catch(() => {});
       if (audioStarted) await options.audio!.stop().catch(() => null);
       if (createdId) await request(`/sessions/${createdId}/abort`, {}).catch(() => {});
       collector = null; session = null; state = 'idle'; throw error;
@@ -135,6 +150,18 @@ export const BugSession = {
         const recording = await options.capture!.stop();
         media = { ...active, ...alignNativeRecording(recording, active.nativeOffsetMs!, active.nativeUncertaintyMs!) };
         await options.capture!.upload(`${options.recorderUrl}/sessions/${active.id}/video`, recording.uri, authHeaders());
+      } else if (active.captureBackend === 'mediaprojection') {
+        const recording = await options.capture!.stop();
+        const uri = await options.audio!.stop();
+        const audioEndMs = c.clock.now();
+        if (!uri) throw new Error('Microphone recording has no file');
+        await options.capture!.upload(`${options.recorderUrl}/sessions/${active.id}/video`, recording.uri, authHeaders());
+        await options.audio!.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
+        media = {
+          ...active, audioEndMs, alignment: 'mediaprojection-host-clock',
+          videoAlignmentUncertaintyMs: Math.max(250, active.nativeUncertaintyMs ?? 0),
+          microphoneAvailable: true, droppedVideoFrames: recording.droppedVideoFrames,
+        };
       } else {
         const uri = await options.audio!.stop();
         const audioEndMs = c.clock.now();
@@ -147,7 +174,7 @@ export const BugSession = {
         media,
       });
     } catch (error) {
-      if (active.captureBackend === 'replaykit') await options.capture!.cancel().catch(() => {});
+      if (active.captureBackend !== 'adb') await options.capture!.cancel().catch(() => {});
       // Release the device recorder, but preserve partial files for recovery.
       await request(`/sessions/${active.id}/abort`, { reason: safeText(error), events: c.events, media: active, durationMs: c.clock.now() }).catch(() => {});
       throw error;
@@ -168,11 +195,51 @@ export const BugSession = {
   Touchable({ name, screen, onPress, ...props }: PressableProps & { name: string; screen?: string }) {
     return <Pressable {...props} onPress={e => { BugSession.trackAction({ name, screen }); onPress?.(e); }} />;
   },
-  Trigger({ position = 'bottom-right', offset = 24, style, accessibilityLabel, children, onError }: BugSessionTriggerProps) {
+  Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }: BugSessionTriggerProps) {
+    const { width, height } = useWindowDimensions();
+    const [point, setPoint] = React.useState(() => triggerPosition
+      ? clampTriggerPosition(triggerPosition, width, height)
+      : clampTriggerPosition({
+        left: position.includes('right') ? width - triggerSize - offset : offset,
+        top: position.includes('bottom') ? height - triggerSize - offset : offset,
+      }, width, height));
+    const pointRef = React.useRef(point);
+    pointRef.current = point;
+    const drag = React.useRef<Animated.ValueXY | null>(null);
+    if (!drag.current) drag.current = new Animated.ValueXY();
+    const dragStart = React.useRef(point);
+    React.useEffect(() => {
+      const next = clampTriggerPosition(pointRef.current, width, height);
+      pointRef.current = next;
+      setPoint(next);
+      if (triggerPosition) triggerPosition = next;
+      drag.current?.setValue({ x: 0, y: 0 });
+    }, [width, height]);
+    const responder = React.useMemo(() => PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
+      onPanResponderGrant: () => { dragStart.current = pointRef.current; },
+      onPanResponderMove: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
+      },
+      onPanResponderRelease: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        triggerPosition = next;
+        pointRef.current = next;
+        setPoint(next);
+        drag.current?.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderTerminate: (_, gesture) => {
+        const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
+        triggerPosition = next;
+        pointRef.current = next;
+        setPoint(next);
+        drag.current?.setValue({ x: 0, y: 0 });
+      },
+    }), [draggable, width, height]);
     const [busy, setBusy] = React.useState(false);
     const recording = state === 'recording';
-    const edge = position.includes('right') ? { right: offset } : { left: offset };
-    const vertical = position.includes('bottom') ? { bottom: offset } : { top: offset };
     const toggle = async () => {
       if (busy) return;
       setBusy(true);
@@ -182,23 +249,27 @@ export const BugSession = {
       } catch (error) { onError?.(error); }
       finally { setBusy(false); }
     };
-    return <View pointerEvents="box-none" style={[styles.triggerLayer, edge, vertical]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording')}
-        accessibilityState={{ busy, selected: recording }}
-        disabled={busy}
-        onPress={() => { void toggle(); }}
-        style={[styles.trigger, recording && styles.triggerRecording, style]}
-      >
-        {children ?? <><Text style={styles.triggerMark}>b</Text><View style={[styles.triggerDot, recording && styles.triggerDotRecording]} /></>}
-      </Pressable>
+    return <View pointerEvents="box-none" style={styles.triggerLayer}>
+      <Animated.View {...(draggable ? responder.panHandlers : {})} style={[styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }]}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording')}
+          accessibilityHint={draggable ? 'Drag to move the BugSession button' : undefined}
+          accessibilityState={{ busy, selected: recording }}
+          disabled={busy}
+          onPress={() => { void toggle(); }}
+          style={[styles.trigger, recording && styles.triggerRecording, style]}
+        >
+          {children ?? <><Text style={styles.triggerMark}>b</Text><View style={[styles.triggerDot, recording && styles.triggerDotRecording]} /></>}
+        </Pressable>
+      </Animated.View>
     </View>;
   },
 };
 
 const styles = StyleSheet.create({
-  triggerLayer: { position: 'absolute', zIndex: 9999 },
+  triggerLayer: { ...StyleSheet.absoluteFill, zIndex: 9999 },
+  triggerPosition: { position: 'absolute' },
   trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
   triggerRecording: { backgroundColor: '#B9382F' },
   triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },