@microsoft/power-apps-native-host 0.2.25 → 0.3.3

package/lib/module/provider/PowerAppsProvider.js

@@ -27,25 +27,29 @@
  *   </PowerAppsProvider>
  */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { AppState, Platform, ScrollView, StyleSheet, Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { createTamagui, TamaguiProvider } from '@tamagui/core';
 import { PortalProvider } from '@tamagui/portal';
 import { defaultConfig as tamaguiDefaultConfig } from '@tamagui/config/v5';
 import { ToastProvider, ToastViewport } from '@tamagui/toast';
-import { QueryClient, QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
+import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import NetInfo from '@react-native-community/netinfo';
 import { AuthProvider, useAuth } from '../auth/AuthContext';
 import { PowerAppsHostProvider } from './PowerAppsHostProvider';
-import { fetchInstanceUrl } from "../platform/PowerPlatformEnvironmentApi.js";
+import { powerPlatformScope } from "../platform/PowerPlatformEnvironmentApi.js";
 import { ThemeProvider } from "../theme/ThemeProvider.js";
 import { ErrorBoundary } from "../ErrorBoundary.js";
 import { isDevPlayer } from "../utils/isDevPlayer.js";
+import * as Application from 'expo-application';
 import Constants from 'expo-constants';
-import { configureAppLogger, getAppLogger, Logger, OneDsTelemetryProvider, resolveDeviceId, resolveTelemetryLocation, regionToClusterCategory, suppressKnownWarnings } from '@microsoft/power-apps-native-common';
+import { ApplicationInsightsTelemetryProvider, configureAppLogger, configureCustomerTelemetryLogger, getAppLogger, Logger, OneDsTelemetryProvider, resolveDeviceId, resolveTelemetryLocation, regionToClusterCategory, suppressKnownWarnings } from '@microsoft/power-apps-native-common';
 suppressKnownWarnings();
-import { useOfflineIntegration } from '../offline/useOfflineIntegration';
+import { createHostQueryClient } from "../offline/createOfflineHostActivationCallbacks.js";
+import { useOfflineIntegrationWithStartupGate } from '../offline/useOfflineIntegrationWithStartupGate';
+import { SessionDetailsGesture } from "./SessionDetailsGesture.js";
+import { configureOfflineSdkTelemetry } from '../telemetry/OfflineSdkTelemetry';
 
 // ---- React-Query wiring (runs once at module load) ----
 
@@ -56,7 +60,6 @@ onlineManager.setEventListener(setOnline => {
   if (Platform.OS === 'web' && typeof window !== 'undefined') {
     const updateOnlineState = () => setOnline(window.navigator.onLine);
     window.addEventListener('online', updateOnlineState);
-    window.addEventListener('offline', updateOnlineState);
     updateOnlineState();
     return () => {
       window.removeEventListener('online', updateOnlineState);
@@ -81,86 +84,14 @@ focusManager.setEventListener(handleFocus => {
 // The bare @tamagui/config/v5 preset is only a last-resort fallback for tests
 // and storybook — it will not resolve custom $surface* tokens.
 const defaultTamaguiConfig = createTamagui(tamaguiDefaultConfig);
-
-// Whether the offline SDK will actually orchestrate for this app. Mirrors the
-// resolution that @microsoft/power-apps-native-offline's useOfflineIntegration
-// performs (offlineProfile prop → expo manifest `extra.__offlineProfile`;
-// enabled defaults true unless the profile's `appConfig.enabled` is explicitly
-// false), but computed synchronously here because the QueryClient's networkMode
-// must be fixed BEFORE the first query runs. The SDK's own `isEnabled` is only
-// known deep inside the tree (below QueryClientProvider), which is too late to
-// configure the client without a race. Kept deliberately narrow: it only
-// decides networkMode below.
-function isOfflineEnabled(offlineProfile) {
-  if (Platform.OS === 'web') return false;
-  // Only honour the prop when it carries a profileId — this mirrors the SDK's
-  // useOfflineIntegration, which ignores a profileId-less prop and falls through
-  // to the manifest. Without this guard a truthy-but-invalid prop (no profileId)
-  // short-circuits to `false` here while the SDK still resolves enabled from the
-  // manifest, leaving networkMode on 'online' (blank offline lists).
-  const propProfile = offlineProfile;
-  let profile = propProfile && propProfile.profileId ? propProfile : undefined;
-  if (!profile) {
-    const fromManifest = Constants.expoConfig?.extra?.__offlineProfile;
-    if (fromManifest && typeof fromManifest === 'object' && fromManifest.profileId) {
-      profile = fromManifest;
-    }
-  }
-  if (profile) {
-    // Honour an explicit `appConfig.enabled: false`. This mirrors the SDK's
-    // useOfflineIntegration, whose validateConfig classifies `enabled === false`
-    // as "explicitly-disabled" and stays inert. A host shell's placeholder
-    // profile (e.g. Power Apps Dev Player's offline-profile.json, enabled:false)
-    // must NOT flip networkMode to 'always' for the loaded app — otherwise every
-    // scanned app gets paused queries / blank lists. Any other resolved profile
-    // (enabled true, or omitted → SDK defaults to true) enables offline.
-    const appConfig = profile.appConfig;
-    if (appConfig && appConfig.enabled === false) {
-      return false;
-    }
-    return true;
-  }
-  return false;
-}
-
-// Builds the app's QueryClient. networkMode is gated on whether offline is
-// actually enabled:
-//   • Offline enabled → 'always': the host is offline-first, so reads/writes are
-//     served by the offline SDK from local SQLite regardless of connectivity.
-//     onlineManager is wired to NetInfo (above) for refetchOnReconnect, but that
-//     same wiring makes the default 'online' mode PAUSE every query/mutation while
-//     offline (queryFn never runs → blank lists with WiFi off). 'always' makes
-//     React Query ignore connectivity for both the initial attempt AND retries, so
-//     local-SQLite reads/writes never get paused. ('offlineFirst' would still pause
-//     *retries* offline — wrong for a purely-local SDK where a transient first
-//     attempt error, e.g. SDK-not-ready at cold boot, would leave the query stuck
-//     'paused' until reconnect.)
-//   • Offline disabled → undefined: React Query keeps its default 'online' mode,
-//     i.e. the exact pre-offline behaviour for online-only apps.
-function createQueryClient(offlineEnabled) {
-  const networkMode = offlineEnabled ? 'always' : undefined;
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60_000,
-        retry: 2,
-        networkMode
-      },
-      mutations: {
-        retry: 0,
-        networkMode
-      }
-    }
-  });
-}
 function hasConfiguredValue(value) {
   return typeof value === 'string' && value.trim().length > 0;
 }
 function hasEntries(value) {
   return Boolean(value && typeof value === 'object' && Object.keys(value).length > 0);
 }
-function requiresPowerPlatformAuth(powerConfig, offlineEnabled) {
-  return Boolean(hasConfiguredValue(powerConfig.appId) || hasConfiguredValue(powerConfig.environmentId) || hasEntries(powerConfig.connectionReferences) || hasEntries(powerConfig.databaseReferences) || offlineEnabled);
+function requiresPowerPlatformAuth(powerConfig) {
+  return Boolean(hasConfiguredValue(powerConfig.appId) || hasConfiguredValue(powerConfig.environmentId) || hasEntries(powerConfig.connectionReferences) || hasEntries(powerConfig.databaseReferences));
 }
 function MissingClientIdErrorScreen() {
   return /*#__PURE__*/_jsxs(ScrollView, {
@@ -177,11 +108,58 @@ function MissingClientIdErrorScreen() {
     })]
   });
 }
+function MissingAppIdErrorScreen() {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.errorContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.errorTitle,
+      children: "App ID is missing"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "This mobile app does not include an app ID. Push the mobile app to the Power Platform environment, rebuild it, and try again."
+    })]
+  });
+}
+function MissingEnvironmentIdErrorScreen() {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.errorContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.errorTitle,
+      children: "Environment ID is missing"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "This mobile app does not include an environment ID. Push the mobile app to the Power Platform environment, rebuild it, and try again."
+    })]
+  });
+}
 
 // ---- Types ----
 
 /** Shape of power.config.json consumed by the provider. */
 
+function readAppInsightsConfig(value) {
+  if (!value || typeof value !== 'object') return undefined;
+  const config = value;
+  const minSeverity = config.minSeverity;
+  return {
+    enabled: config.enabled === true,
+    connectionString: typeof config.connectionString === 'string' ? config.connectionString : '',
+    appId: typeof config.appId === 'string' ? config.appId : '',
+    ...(typeof config.appVersion === 'string' ? {
+      appVersion: config.appVersion
+    } : {}),
+    ...(typeof config.environment === 'string' ? {
+      environment: config.environment
+    } : {}),
+    ...(minSeverity === 'verbose' || minSeverity === 'info' || minSeverity === 'warning' || minSeverity === 'error' ? {
+      minSeverity
+    } : {}),
+    ...(typeof config.includeUserId === 'boolean' ? {
+      includeUserId: config.includeUserId
+    } : {})
+  };
+}
+
 // ---- Inner component ----
 // Separate from PowerAppsProvider only because useAuth() must be called inside
 // AuthProvider. All auth-dependent wiring lives here.
@@ -192,53 +170,49 @@ function InnerProviders({
   schemaMap,
   renderOAuthWebView,
   onDisambiguationNeeded,
+  onConnectionConsent,
+  onResourceConsent,
+  onConnectionConsentDeclined,
   offlineProfile,
+  onOfflineEnabledChange,
   children
 }) {
   const {
     acquireToken,
     isSignedIn,
-    hasRealAccount
+    hasRealAccount,
+    isAuthReady,
+    signOut
   } = useAuth();
-  const connectionReferences = useMemo(() => powerConfig.connectionReferences ?? {}, [powerConfig.connectionReferences]);
-
-  // ---- Offline (all logic lives in the SDK) ----
-  // Adapter over the host's fetchInstanceUrl: the offline SDK's contract passes a
-  // 4th `signal?: AbortSignal` arg (which fetchInstanceUrl treats as bearerToken)
-  // and expects a `string | null` return, so drop the extra arg and normalise
-  // `undefined` -> `null`.
-  const resolveInstanceUrlForOffline = useCallback(async (environmentId, region, acqToken, _signal) => {
-    const url = await fetchInstanceUrl(environmentId, region, acqToken);
-    return url ?? null;
-  }, []);
-
-  // Gate offline engagement on a REAL account (`hasRealAccount`), not the
-  // `isSignedIn` flag — `isSignedIn` is inflated by noAuthMode (login-bypassed /
-  // demo sessions report signed-in but have no account, so `acquireToken` always
-  // returns null). Passing the inflated flag makes the SDK orchestrator engage
-  // and then spin in a perpetual "waiting-for-auth" 3s retry loop (each retry
-  // re-renders the provider subtree). With no obtainable token offline cannot
-  // sync anyway, so we only engage once a usable token exists.
-  const offline = useOfflineIntegration({
+  const connectionReferences = useMemo(() => isDevPlayer ? powerConfig.connectionReferences ?? {} : {}, [powerConfig.connectionReferences, isDevPlayer]);
+  const runtimeSchemaMap = useMemo(() => isDevPlayer ? schemaMap : {}, [schemaMap, isDevPlayer]);
+  const offline = useOfflineIntegrationWithStartupGate({
     powerConfig,
     offlineProfile,
     acquireToken,
-    isSignedIn: hasRealAccount,
-    fetchInstanceUrl: resolveInstanceUrlForOffline
+    hasRealAccount,
+    isAuthReady
   });
+  useEffect(() => {
+    onOfflineEnabledChange(offline.isEnabled);
+  }, [offline.isEnabled, onOfflineEnabledChange]);
   return /*#__PURE__*/_jsxs(PowerAppsHostProvider, {
     acquireToken: acquireToken,
     isSignedIn: isSignedIn,
+    onSignOut: signOut,
     appId: powerConfig.appId ?? undefined,
     environmentId: powerConfig.environmentId ?? '',
     region: powerConfig.region ?? 'prod',
     connectionReferences: connectionReferences,
-    schemaMap: schemaMap,
-    databaseReferences: powerConfig.databaseReferences,
+    schemaMap: runtimeSchemaMap,
+    databaseReferences: isDevPlayer ? powerConfig.databaseReferences : undefined,
     isvClientId: msalConfig.clientId,
     renderOAuthWebView: renderOAuthWebView,
     onDisambiguationNeeded: onDisambiguationNeeded,
-    children: [children, offline.StatusOverlay && /*#__PURE__*/_jsx(offline.StatusOverlay, {})]
+    onConnectionConsent: onConnectionConsent,
+    onResourceConsent: onResourceConsent,
+    onConnectionConsentDeclined: onConnectionConsentDeclined,
+    children: [offline.shouldMountChildren && children, offline.StatusOverlay && /*#__PURE__*/_jsx(offline.StatusOverlay, {})]
   });
 }
 
@@ -253,6 +227,7 @@ function InnerProviders({
  * root layout.
  */
 export function PowerAppsProvider({
+  appConfig,
   msalConfig,
   intuneConfig,
   powerConfig,
@@ -265,8 +240,14 @@ export function PowerAppsProvider({
   followSystemTheme = true,
   renderOAuthWebView,
   onDisambiguationNeeded,
+  onConnectionConsent,
+  onResourceConsent,
+  onConnectionConsentDeclined,
   appName,
   logger: loggerProp,
+  showSessionDetailsOnLongPress,
+  showSessionDetailsOnSwipe,
+  appInsightsConfig,
   offlineProfile,
   children
 }) {
@@ -274,14 +255,19 @@ export function PowerAppsProvider({
   // is stable (loggerProp is an object reference; re-running on every render
   // would reconfigure and leak the previous provider).
   const loggerPropRef = useRef(loggerProp);
-
-  // Gate the offline-first networkMode on whether offline is actually enabled
-  // for this app. Keyed on the resolved boolean (not the prop object refs) so the
-  // QueryClient identity stays stable across renders even if the caller passes
-  // fresh offlineProfile literals.
-  const offlineEnabled = useMemo(() => isOfflineEnabled(offlineProfile), [offlineProfile]);
-  const missingClientIdInDevPlayer = Platform.OS !== 'web' && isDevPlayer && !hasConfiguredValue(msalConfig.clientId) && requiresPowerPlatformAuth(powerConfig, offlineEnabled);
-  const queryClient = useMemo(() => createQueryClient(offlineEnabled), [offlineEnabled]);
+  const appInsightsConfigRef = useRef(appInsightsConfig ?? readAppInsightsConfig(appConfig?.expo?.extra?.appInsightsConfig ?? Constants.expoConfig?.extra?.appInsightsConfig));
+  const [offlineTelemetryEnabled, setOfflineTelemetryEnabled] = useState();
+  const missingClientIdInDevPlayer = Platform.OS !== 'web' && isDevPlayer && !hasConfiguredValue(msalConfig.clientId) && requiresPowerPlatformAuth(powerConfig);
+  const missingAppId = Platform.OS !== 'web' && !isDevPlayer && !hasConfiguredValue(powerConfig.appId);
+  const missingEnvironmentId = !isDevPlayer && !hasConfiguredValue(powerConfig.environmentId);
+  const appId = typeof powerConfig.appId === 'string' ? powerConfig.appId.trim() : '';
+  const configuredBundleId = Platform.OS === 'ios' ? Constants.expoConfig?.ios?.bundleIdentifier : Platform.OS === 'android' ? Constants.expoConfig?.android?.package : undefined;
+  const bundleId = Platform.OS === 'ios' || Platform.OS === 'android' ? Application.applicationId ?? configuredBundleId : undefined;
+  const appInstanceId = Constants.expoConfig?.extra?.telemetry?.appInstanceId;
+  const skillCorrelationId = typeof appInstanceId === 'string' ? appInstanceId.trim() : '';
+  const sessionDetailsGestureEnabled = showSessionDetailsOnLongPress ?? showSessionDetailsOnSwipe ?? true;
+  const requiredAuthScopes = useMemo(() => [powerPlatformScope(powerConfig.region ?? 'prod')], [powerConfig.region]);
+  const queryClient = useMemo(() => createHostQueryClient(), []);
 
   // Configure the app logger exactly once per mount inside useEffect so that
   // side effects (provider construction, async resolveDeviceId) never run
@@ -289,6 +275,9 @@ export function PowerAppsProvider({
   // silent no-op Logger, so any telemetry emitted before the first commit is
   // silently dropped rather than crashing.
   useEffect(() => {
+    // Customer telemetry is a no-op until a valid Application Insights
+    // provider is configured below.
+    configureCustomerTelemetryLogger(new Logger());
     const lp = loggerPropRef.current;
     if (lp === null) {
       // Explicit opt-out — replace with a silent no-op Logger.
@@ -304,26 +293,63 @@ export function PowerAppsProvider({
         clientType: appName ?? 'PowerAppsNative',
         appVersion: Constants.expoConfig?.version,
         minSeverity: __DEV__ ? 'verbose' : 'info',
-        telemetryLocation: resolveTelemetryLocation(powerConfig.geoRegion)
+        telemetryLocation: resolveTelemetryLocation(powerConfig.geoRegion),
+        commonProperties: {
+          ...(appId ? {
+            appId
+          } : {}),
+          ...(bundleId ? {
+            bundleId
+          } : {}),
+          ...(skillCorrelationId ? {
+            skillCorrelationId
+          } : {})
+        }
+      };
+      const configureDefaultLogger = (deviceId = 'react-native') => {
+        const oneDsProvider = new OneDsTelemetryProvider({
+          ...providerConfig,
+          deviceId
+        });
+        const providers = [oneDsProvider];
+        let appInsightsEnabled = false;
+        const configuredAppInsights = appInsightsConfigRef.current;
+        if (configuredAppInsights?.enabled) {
+          try {
+            const customerProvider = new ApplicationInsightsTelemetryProvider({
+              ...configuredAppInsights,
+              appVersion: configuredAppInsights.appVersion ?? Constants.expoConfig?.version,
+              deviceId,
+              sessionId: oneDsProvider.sessionId
+            });
+            providers.push(customerProvider);
+            configureCustomerTelemetryLogger(new Logger({
+              providers: [customerProvider]
+            }));
+            appInsightsEnabled = true;
+          } catch (error) {
+            console.error('[PowerAppsProvider] Application Insights configuration is invalid.', error);
+          }
+        }
+        const logger = new Logger({
+          providers
+        });
+        configureAppLogger(logger);
+        if (appInsightsEnabled) {
+          logger.trackActivityEvent('PowerAppsNative.ApplicationStarted', {
+            app_id: configuredAppInsights?.appId
+          });
+        }
       };
       // Resolve the stable device ID first so every event — including the
       // very first — carries the real GUID rather than the 'react-native'
       // fallback. Events emitted while this resolves are silently dropped
       // by the no-op Logger that is active until configureAppLogger is called.
       resolveDeviceId().then(deviceId => {
-        const provider = new OneDsTelemetryProvider({
-          ...providerConfig,
-          deviceId
-        });
-        configureAppLogger(new Logger({
-          providers: [provider]
-        }));
+        configureDefaultLogger(deviceId);
       }).catch(_err => {
         // SecureStore unavailable — fall back to a provider without a stable ID.
-        const provider = new OneDsTelemetryProvider(providerConfig);
-        configureAppLogger(new Logger({
-          providers: [provider]
-        }));
+        configureDefaultLogger();
       });
     }
 
@@ -336,6 +362,11 @@ export function PowerAppsProvider({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // intentionally empty — logger is configured once per mount
+
+  useEffect(() => {
+    if (offlineTelemetryEnabled === undefined) return undefined;
+    return configureOfflineSdkTelemetry(offlineTelemetryEnabled);
+  }, [offlineTelemetryEnabled]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
       style: {
@@ -353,19 +384,32 @@ export function PowerAppsProvider({
             children: /*#__PURE__*/_jsxs(ToastProvider, {
               swipeDirection: "horizontal",
               duration: 3000,
-              children: [/*#__PURE__*/_jsx(QueryClientProvider, {
-                client: queryClient,
-                children: missingClientIdInDevPlayer ? /*#__PURE__*/_jsx(MissingClientIdErrorScreen, {}) : /*#__PURE__*/_jsx(AuthProvider, {
-                  msalConfig: msalConfig,
-                  intuneConfig: intuneConfig,
-                  children: /*#__PURE__*/_jsx(InnerProviders, {
+              children: [/*#__PURE__*/_jsx(SessionDetailsGesture, {
+                enabled: sessionDetailsGestureEnabled,
+                appName: appName ?? Constants.expoConfig?.name ?? 'Power Apps',
+                appId: appId || undefined,
+                environmentId: powerConfig.environmentId,
+                region: powerConfig.region ?? 'prod',
+                appVersion: Constants.expoConfig?.version,
+                children: /*#__PURE__*/_jsx(QueryClientProvider, {
+                  client: queryClient,
+                  children: missingAppId ? /*#__PURE__*/_jsx(MissingAppIdErrorScreen, {}) : missingEnvironmentId ? /*#__PURE__*/_jsx(MissingEnvironmentIdErrorScreen, {}) : missingClientIdInDevPlayer ? /*#__PURE__*/_jsx(MissingClientIdErrorScreen, {}) : /*#__PURE__*/_jsx(AuthProvider, {
                     msalConfig: msalConfig,
-                    powerConfig: powerConfig,
-                    schemaMap: schemaMap,
-                    renderOAuthWebView: renderOAuthWebView,
-                    onDisambiguationNeeded: onDisambiguationNeeded,
-                    offlineProfile: offlineProfile,
-                    children: children
+                    intuneConfig: intuneConfig,
+                    requiredScopes: requiredAuthScopes,
+                    children: /*#__PURE__*/_jsx(InnerProviders, {
+                      msalConfig: msalConfig,
+                      powerConfig: powerConfig,
+                      schemaMap: schemaMap,
+                      renderOAuthWebView: renderOAuthWebView,
+                      onDisambiguationNeeded: onDisambiguationNeeded,
+                      onConnectionConsent: onConnectionConsent,
+                      onResourceConsent: onResourceConsent,
+                      onConnectionConsentDeclined: onConnectionConsentDeclined,
+                      offlineProfile: offlineProfile,
+                      onOfflineEnabledChange: setOfflineTelemetryEnabled,
+                      children: children
+                    })
                   })
                 })
               }), /*#__PURE__*/_jsx(ToastViewport, {

package/lib/module/provider/SessionDetailsGesture.js

@@ -0,0 +1,203 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { getAppLogger } from "../telemetry/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function SessionDetailsGesture({
+  enabled,
+  appName,
+  appId,
+  environmentId,
+  region,
+  appVersion,
+  children
+}) {
+  const [visible, setVisible] = useState(false);
+  const [sessionId, setSessionId] = useState();
+  const [copied, setCopied] = useState(false);
+  const showSessionDetails = useCallback(() => {
+    setSessionId(getAppLogger().sessionId);
+    setCopied(false);
+    setVisible(true);
+  }, []);
+  const gesture = useMemo(() => Gesture.LongPress().enabled(enabled && Platform.OS !== 'web').numberOfPointers(3).runOnJS(true).onStart(showSessionDetails), [enabled, showSessionDetails]);
+  const close = useCallback(() => setVisible(false), []);
+  const copySessionId = useCallback(async () => {
+    if (!sessionId) return;
+    await Clipboard.setStringAsync(sessionId);
+    setCopied(true);
+  }, [sessionId]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(GestureDetector, {
+      gesture: gesture,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.content,
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      animationType: "fade",
+      onRequestClose: close,
+      transparent: true,
+      visible: visible,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close session details",
+        onPress: close,
+        style: styles.backdrop,
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          accessible: false,
+          onPress: event => event.stopPropagation(),
+          style: styles.panel,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Session details"
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "Telemetry session ID",
+            value: sessionId ?? 'Not available',
+            selectable: true,
+            singleLine: true
+          }), /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            disabled: !sessionId,
+            onPress: () => {
+              void copySessionId();
+            },
+            style: ({
+              pressed
+            }) => [styles.copyButton, !sessionId && styles.disabledButton, pressed && styles.pressedButton],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.copyButtonText,
+              children: copied ? 'Copied' : 'Copy session ID'
+            })
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "App",
+            value: appName
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "App ID",
+            value: appId ?? 'Not available',
+            selectable: true
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "Environment ID",
+            value: environmentId ?? 'Not available',
+            selectable: true
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "Region",
+            value: region
+          }), /*#__PURE__*/_jsx(SessionDetail, {
+            label: "App version",
+            value: appVersion ?? 'Not available'
+          }), /*#__PURE__*/_jsx(Pressable, {
+            accessibilityRole: "button",
+            onPress: close,
+            style: styles.closeButton,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.closeButtonText,
+              children: "Close"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+function SessionDetail({
+  label,
+  value,
+  selectable = false,
+  singleLine = false
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.row,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      adjustsFontSizeToFit: singleLine,
+      minimumFontScale: 0.85,
+      numberOfLines: singleLine ? 1 : undefined,
+      selectable: selectable,
+      style: styles.value,
+      children: value
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  content: {
+    flex: 1
+  },
+  backdrop: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.48)',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 24
+  },
+  panel: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    maxWidth: 520,
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    width: '100%'
+  },
+  title: {
+    color: '#242424',
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: 20
+  },
+  row: {
+    marginBottom: 14
+  },
+  label: {
+    color: '#616161',
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 3
+  },
+  value: {
+    color: '#242424',
+    fontSize: 15,
+    lineHeight: 21
+  },
+  copyButton: {
+    alignSelf: 'flex-start',
+    borderColor: '#0F6CBD',
+    borderRadius: 4,
+    borderWidth: 1,
+    marginBottom: 14,
+    marginTop: -4,
+    paddingHorizontal: 12,
+    paddingVertical: 7
+  },
+  copyButtonText: {
+    color: '#0F6CBD',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  disabledButton: {
+    opacity: 0.45
+  },
+  pressedButton: {
+    opacity: 0.7
+  },
+  closeButton: {
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    backgroundColor: '#0F6CBD',
+    borderRadius: 4,
+    marginTop: 8,
+    minWidth: 88,
+    paddingHorizontal: 18,
+    paddingVertical: 10
+  },
+  closeButtonText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600'
+  }
+});