From 2a8e1f1397245de57cf2892ef2d3c4f2f8308ea1 Mon Sep 17 00:00:00 2001
From: Tomasz Sapeta <tsapeta@expo.dev>
Date: Sat, 2 May 2026 22:50:15 +0200
Subject: [PATCH 1/2] [observe-tester] Rename app and add Sessions tab with
 crash report viewer (#45145)

---
 .../app/(tabs)/(metrics)/_layout.tsx          |   9 -
 .../app/(tabs)/debug/_layout.tsx              |   9 -
 .../components/Button.tsx                     |  85 -----
 apps/observe-tester/.gitignore                |  42 +++
 .../app.config.ts                             |   2 -
 .../app.json                                  |   4 +-
 .../app/(tabs)/(metrics)/_layout.tsx          |  16 +
 .../app/(tabs)/(metrics)/index.tsx            |  61 ++--
 .../app/(tabs)/(sessions)/_layout.tsx         |  17 +
 .../app/(tabs)/(sessions)/sessions/[id].tsx   | 132 +++++++
 .../app/(tabs)/(sessions)/sessions/index.tsx  | 323 ++++++++++++++++++
 .../app/(tabs)/_layout.tsx                    |   4 +
 .../app/(tabs)/debug/_layout.tsx              |  16 +
 .../app/(tabs)/debug/index.tsx                |  20 +-
 .../app/_layout.tsx                           |   3 +-
 .../app/redirect.tsx                          |   0
 .../assets/images/android-icon-dark.png       | Bin
 .../assets/images/android-icon-foreground.png | Bin
 .../assets/images/android-icon.png            | Bin
 .../assets/images/favicon.png                 | Bin
 .../assets/images/icon.png                    | Bin
 .../assets/images/splash-icon-dark.png        | Bin
 .../assets/images/splash-icon.png             | Bin
 .../assets/observe.icon/Assets/pulse.svg      |   0
 .../assets/observe.icon/icon.json             |   0
 apps/observe-tester/components/Button.tsx     |  82 +++++
 .../components/CallStackTreeView.tsx          | 189 ++++++++++
 apps/observe-tester/components/Chevron.tsx    |  51 +++
 .../components/CrashReportPanel.tsx           | 172 ++++++++++
 .../components/CrashReportsSection.tsx        |  60 ++++
 apps/observe-tester/components/Divider.tsx    |  15 +
 .../components/JSAnimation.tsx                |   0
 apps/observe-tester/components/JSONView.tsx   |  91 +++++
 .../components/MetricsPanel.tsx               | 189 ++++++++++
 .../components/SessionHeader.tsx              | 177 ++++++++++
 .../eas.json                                  |   0
 .../package.json                              |   4 +-
 .../router-metrics-integration/index.ts       |   0
 .../scripts/test-ios.sh                       |   0
 .../tsconfig.json                             |   0
 apps/observe-tester/utils/theme.ts            |   6 +
 pnpm-lock.yaml                                |   8 +-
 42 files changed, 1631 insertions(+), 156 deletions(-)
 delete mode 100644 apps/observability-tester/app/(tabs)/(metrics)/_layout.tsx
 delete mode 100644 apps/observability-tester/app/(tabs)/debug/_layout.tsx
 delete mode 100644 apps/observability-tester/components/Button.tsx
 create mode 100644 apps/observe-tester/.gitignore
 rename apps/{observability-tester => observe-tester}/app.config.ts (90%)
 rename apps/{observability-tester => observe-tester}/app.json (97%)
 create mode 100644 apps/observe-tester/app/(tabs)/(metrics)/_layout.tsx
 rename apps/{observability-tester => observe-tester}/app/(tabs)/(metrics)/index.tsx (69%)
 create mode 100644 apps/observe-tester/app/(tabs)/(sessions)/_layout.tsx
 create mode 100644 apps/observe-tester/app/(tabs)/(sessions)/sessions/[id].tsx
 create mode 100644 apps/observe-tester/app/(tabs)/(sessions)/sessions/index.tsx
 rename apps/{observability-tester => observe-tester}/app/(tabs)/_layout.tsx (73%)
 create mode 100644 apps/observe-tester/app/(tabs)/debug/_layout.tsx
 rename apps/{observability-tester => observe-tester}/app/(tabs)/debug/index.tsx (50%)
 rename apps/{observability-tester => observe-tester}/app/_layout.tsx (99%)
 rename apps/{observability-tester => observe-tester}/app/redirect.tsx (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/android-icon-dark.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/android-icon-foreground.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/android-icon.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/favicon.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/icon.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/splash-icon-dark.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/images/splash-icon.png (100%)
 rename apps/{observability-tester => observe-tester}/assets/observe.icon/Assets/pulse.svg (100%)
 rename apps/{observability-tester => observe-tester}/assets/observe.icon/icon.json (100%)
 create mode 100644 apps/observe-tester/components/Button.tsx
 create mode 100644 apps/observe-tester/components/CallStackTreeView.tsx
 create mode 100644 apps/observe-tester/components/Chevron.tsx
 create mode 100644 apps/observe-tester/components/CrashReportPanel.tsx
 create mode 100644 apps/observe-tester/components/CrashReportsSection.tsx
 create mode 100644 apps/observe-tester/components/Divider.tsx
 rename apps/{observability-tester => observe-tester}/components/JSAnimation.tsx (100%)
 create mode 100644 apps/observe-tester/components/JSONView.tsx
 create mode 100644 apps/observe-tester/components/MetricsPanel.tsx
 create mode 100644 apps/observe-tester/components/SessionHeader.tsx
 rename apps/{observability-tester => observe-tester}/eas.json (100%)
 rename apps/{observability-tester => observe-tester}/package.json (94%)
 rename apps/{observability-tester => observe-tester}/router-metrics-integration/index.ts (100%)
 rename apps/{observability-tester => observe-tester}/scripts/test-ios.sh (100%)
 rename apps/{observability-tester => observe-tester}/tsconfig.json (100%)
 create mode 100644 apps/observe-tester/utils/theme.ts

diff --git a/apps/observability-tester/app/(tabs)/(metrics)/_layout.tsx b/apps/observability-tester/app/(tabs)/(metrics)/_layout.tsx
deleted file mode 100644
index dd85d6fdc11773..00000000000000
--- a/apps/observability-tester/app/(tabs)/(metrics)/_layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Stack } from 'expo-router';
-
-export default function MetricsLayout() {
-  return (
-    <Stack>
-      <Stack.Screen name="index" options={{ title: 'Metrics' }} />
-    </Stack>
-  );
-}
diff --git a/apps/observability-tester/app/(tabs)/debug/_layout.tsx b/apps/observability-tester/app/(tabs)/debug/_layout.tsx
deleted file mode 100644
index 328223422f0709..00000000000000
--- a/apps/observability-tester/app/(tabs)/debug/_layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Stack } from 'expo-router';
-
-export default function MetricsLayout() {
-  return (
-    <Stack>
-      <Stack.Screen name="index" options={{ title: 'Debug' }} />
-    </Stack>
-  );
-}
diff --git a/apps/observability-tester/components/Button.tsx b/apps/observability-tester/components/Button.tsx
deleted file mode 100644
index 9173de78b1bd7f..00000000000000
--- a/apps/observability-tester/components/Button.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Pressable, PressableProps, StyleSheet, Text, useColorScheme } from 'react-native';
-
-type ButtonProps = {
-  title: string;
-  onPress?: () => void;
-  theme?: 'primary' | 'secondary' | 'tertiary';
-  disabled?: boolean;
-} & PressableProps;
-
-export function Button({ title, onPress, theme = 'primary', disabled, ...rest }: ButtonProps) {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === 'dark';
-
-  const buttonStyle = [
-    styles.button,
-    theme === 'primary' && styles.buttonPrimary,
-    theme === 'secondary' &&
-      (isDark ? { backgroundColor: '#1F1F1F', borderColor: '#404040' } : styles.buttonSecondary),
-    theme === 'tertiary' && styles.buttonTertiary,
-    disabled && styles.buttonDisabled,
-  ];
-
-  const textStyle = [
-    styles.text,
-    theme === 'primary' && styles.textPrimary,
-    theme === 'secondary' && (isDark ? { color: '#FFFFFF' } : styles.textSecondary),
-    theme === 'tertiary' && (isDark ? { color: '#E5E5E5' } : styles.textTertiary),
-  ];
-
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [buttonStyle, pressed ? styles.buttonFocused : null]}
-      disabled={disabled}
-      {...rest}>
-      <Text style={textStyle}>{title}</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 6,
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-  },
-  buttonFocused: {
-    opacity: 0.5,
-  },
-  buttonPrimary: {
-    backgroundColor: '#007AFF',
-    borderColor: '#007AFF',
-  },
-  buttonSecondary: {
-    backgroundColor: '#FFFFFF',
-    borderColor: '#D1D5DB',
-  },
-  buttonTertiary: {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent',
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  text: {
-    fontWeight: '600',
-    fontSize: 18,
-    letterSpacing: 0.5,
-  },
-  textPrimary: {
-    color: '#FFFFFF',
-  },
-  textSecondary: {
-    color: '#000000',
-  },
-  textTertiary: {
-    color: '#1F2937',
-  },
-});
diff --git a/apps/observe-tester/.gitignore b/apps/observe-tester/.gitignore
new file mode 100644
index 00000000000000..f25965cd078aa5
--- /dev/null
+++ b/apps/observe-tester/.gitignore
@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+#prebuild
+android/
+ios/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
diff --git a/apps/observability-tester/app.config.ts b/apps/observe-tester/app.config.ts
similarity index 90%
rename from apps/observability-tester/app.config.ts
rename to apps/observe-tester/app.config.ts
index a7312b34f82c6a..44ff6222c94b72 100644
--- a/apps/observability-tester/app.config.ts
+++ b/apps/observe-tester/app.config.ts
@@ -3,8 +3,6 @@ import 'tsx/cjs';
 
 const config = ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
-  name: 'Observe',
-  slug: 'observability',
   extra: {
     ...config.extra,
     eas: {
diff --git a/apps/observability-tester/app.json b/apps/observe-tester/app.json
similarity index 97%
rename from apps/observability-tester/app.json
rename to apps/observe-tester/app.json
index 3c1600af836677..e1b5a7c77e13e9 100644
--- a/apps/observability-tester/app.json
+++ b/apps/observe-tester/app.json
@@ -1,11 +1,11 @@
 {
   "expo": {
-    "name": "observability",
+    "name": "Observe",
     "slug": "observability",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "observability",
+    "scheme": "observe",
     "userInterfaceStyle": "automatic",
     "ios": {
       "supportsTablet": true,
diff --git a/apps/observe-tester/app/(tabs)/(metrics)/_layout.tsx b/apps/observe-tester/app/(tabs)/(metrics)/_layout.tsx
new file mode 100644
index 00000000000000..e1fa42eec19b3d
--- /dev/null
+++ b/apps/observe-tester/app/(tabs)/(metrics)/_layout.tsx
@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+import { useTheme } from '@/utils/theme';
+
+export default function MetricsLayout() {
+  const theme = useTheme();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.background.screen },
+        headerTintColor: theme.text.default,
+      }}>
+      <Stack.Screen name="index" options={{ title: 'Metrics' }} />
+    </Stack>
+  );
+}
diff --git a/apps/observability-tester/app/(tabs)/(metrics)/index.tsx b/apps/observe-tester/app/(tabs)/(metrics)/index.tsx
similarity index 69%
rename from apps/observability-tester/app/(tabs)/(metrics)/index.tsx
rename to apps/observe-tester/app/(tabs)/(metrics)/index.tsx
index 50046da1cfcb6b..4c50d8f4cf9b91 100644
--- a/apps/observability-tester/app/(tabs)/(metrics)/index.tsx
+++ b/apps/observe-tester/app/(tabs)/(metrics)/index.tsx
@@ -1,17 +1,17 @@
-import { Code } from '@expo/html-elements';
-import { useCallback, useEffect, useState } from 'react';
-import { Platform, ScrollView, StyleSheet, Text, View, useColorScheme } from 'react-native';
-
-import { useRouterMetricsHelpers } from '@/router-metrics-integration';
 import AppMetrics, { type Metric } from 'expo-app-metrics';
 import ExpoObserve from 'expo-observe';
-import { Button } from '../../../components/Button';
-
 import { checkForUpdateAsync, fetchUpdateAsync, reloadAsync, useUpdates } from 'expo-updates';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { Divider } from '@/components/Divider';
+import { JSONView } from '@/components/JSONView';
+import { useRouterMetricsHelpers } from '@/router-metrics-integration';
+import { useTheme } from '@/utils/theme';
 
 export default function Index() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === 'dark';
+  const theme = useTheme();
   const [metrics, setMetrics] = useState<Metric[]>([]);
   const [showEntries, setShowEntries] = useState(false);
   const { isUpdateAvailable, isUpdatePending, availableUpdate, currentlyRunning } = useUpdates();
@@ -61,7 +61,7 @@ export default function Index() {
 
   return (
     <ScrollView
-      style={[styles.container, { backgroundColor: isDark ? '#000000' : '#FFFFFF' }]}
+      style={[styles.container, { backgroundColor: theme.background.screen }]}
       contentContainerStyle={styles.contentContainer}>
       <Button title="Mark as interactive" onPress={handleMarkInteractive} theme="secondary" />
       <Button title="Dispatch events" onPress={handleDispatchEvents} theme="secondary" />
@@ -82,15 +82,18 @@ export default function Index() {
           theme="secondary"
         />
       ) : null}
-      <Text>{`Currently running ${currentlyRunning.updateId}`}</Text>
-      <Text>{`${currentlyRunning.isEmbeddedLaunch ? 'Embedded bundle' : 'OTA bundle'}`}</Text>
-      <View style={[styles.divider, { backgroundColor: isDark ? '#333333' : '#E5E5E5' }]} />
+      <Text style={{ color: theme.text.default }}>
+        {`Currently running ${currentlyRunning.updateId}`}
+      </Text>
+      <Text style={{ color: theme.text.default }}>
+        {`${currentlyRunning.isEmbeddedLaunch ? 'Embedded bundle' : 'OTA bundle'}`}
+      </Text>
+
+      <Divider />
 
       <View style={styles.header}>
         {metrics.length === 0 ? (
-          <Text style={[styles.countText, { color: isDark ? '#FFFFFF' : '#000000' }]}>
-            No stored entries
-          </Text>
+          <Text style={[styles.countText, { color: theme.text.default }]}>No stored entries</Text>
         ) : (
           <Button
             title={
@@ -101,28 +104,11 @@ export default function Index() {
         )}
       </View>
 
-      {showEntries && metrics.length ? <JSONView value={metrics} isDark={isDark} /> : null}
+      {showEntries && metrics.length ? <JSONView value={metrics} /> : null}
     </ScrollView>
   );
 }
 
-function JSONView({ value, isDark }: { value: any; isDark: boolean }) {
-  return (
-    <Code style={[styles.code, { color: isDark ? '#E5E5E5' : '#000000' }]}>
-      {JSON.stringify(value, deterministicJSONReplacer, 2)}
-    </Code>
-  );
-}
-
-// A replacer function for JSON.stringify that guarantees the same keys order
-function deterministicJSONReplacer(_: any, value: any) {
-  return typeof value !== 'object' || value === null || Array.isArray(value)
-    ? value
-    : Object.fromEntries(
-        Object.entries(value).sort(([keyA], [keyB]) => (keyA < keyB ? -1 : keyA > keyB ? 1 : 0))
-      );
-}
-
 const styles = StyleSheet.create({
   container: {
     padding: 20,
@@ -136,14 +122,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     textAlign: 'center',
   },
-  code: {
-    fontSize: 12,
-  },
   contentContainer: {
     paddingBottom: Platform.select({ ios: 30, android: 150 }),
   },
-  divider: {
-    height: 1,
-    marginVertical: 20,
-  },
 });
diff --git a/apps/observe-tester/app/(tabs)/(sessions)/_layout.tsx b/apps/observe-tester/app/(tabs)/(sessions)/_layout.tsx
new file mode 100644
index 00000000000000..feba87885a0a5b
--- /dev/null
+++ b/apps/observe-tester/app/(tabs)/(sessions)/_layout.tsx
@@ -0,0 +1,17 @@
+import { Stack } from 'expo-router';
+
+import { useTheme } from '@/utils/theme';
+
+export default function SessionsLayout() {
+  const theme = useTheme();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.background.screen },
+        headerTintColor: theme.text.default,
+      }}>
+      <Stack.Screen name="sessions/index" options={{ title: 'Sessions' }} />
+      <Stack.Screen name="sessions/[id]" options={{ title: 'Session' }} />
+    </Stack>
+  );
+}
diff --git a/apps/observe-tester/app/(tabs)/(sessions)/sessions/[id].tsx b/apps/observe-tester/app/(tabs)/(sessions)/sessions/[id].tsx
new file mode 100644
index 00000000000000..e638c3da6f74dc
--- /dev/null
+++ b/apps/observe-tester/app/(tabs)/(sessions)/sessions/[id].tsx
@@ -0,0 +1,132 @@
+import AppMetrics, { type Session } from 'expo-app-metrics';
+import { Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text } from 'react-native';
+
+import { CallStackTreeView } from '@/components/CallStackTreeView';
+import { Chevron } from '@/components/Chevron';
+import { CrashReportPanel } from '@/components/CrashReportPanel';
+import { Divider } from '@/components/Divider';
+import { JSONView } from '@/components/JSONView';
+import { MetricsPanel } from '@/components/MetricsPanel';
+import { SessionHeader } from '@/components/SessionHeader';
+import { useTheme } from '@/utils/theme';
+
+export default function SessionDetail() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const theme = useTheme();
+  const [session, setSession] = useState<Session | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [showRawJson, setShowRawJson] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (Platform.OS !== 'ios') {
+        setLoaded(true);
+        return;
+      }
+      AppMetrics.getAllSessions().then((sessions) => {
+        setSession(sessions.find((s) => s.id === id) ?? null);
+        setLoaded(true);
+      });
+    }, [id])
+  );
+
+  return (
+    <ScrollView
+      style={[styles.container, { backgroundColor: theme.background.screen }]}
+      contentContainerStyle={styles.contentContainer}>
+      <Stack.Screen options={{ title: id?.slice(0, 8) ?? 'Session' }} />
+      {!loaded ? null : session ? (
+        <>
+          <SessionHeader session={session} />
+          <Divider style={styles.divider} />
+          {session.type === 'main' && session.crashReport ? (
+            <>
+              <Text style={[styles.sectionTitle, { color: theme.text.default }]}>Crash report</Text>
+              <CrashReportPanel report={session.crashReport} />
+              {session.crashReport.callStackTree ? (
+                <>
+                  <Divider style={styles.divider} />
+                  <Text style={[styles.sectionTitle, { color: theme.text.default }]}>
+                    Call stacks
+                  </Text>
+                  <CallStackTreeView tree={session.crashReport.callStackTree} />
+                </>
+              ) : null}
+              <Divider style={styles.divider} />
+            </>
+          ) : null}
+          <Text style={[styles.sectionTitle, { color: theme.text.default }]}>Metrics</Text>
+          <MetricsPanel metrics={session.metrics} />
+          <Divider style={styles.divider} />
+          <Pressable
+            onPress={() => setShowRawJson((v) => !v)}
+            style={({ pressed }) => [
+              styles.rawJsonHeader,
+              showRawJson && styles.rawJsonHeaderExpanded,
+              pressed && { opacity: 0.6 },
+            ]}>
+            <Text style={[styles.sectionTitle, styles.rawJsonTitle, { color: theme.text.default }]}>
+              Raw JSON
+            </Text>
+            <Chevron expanded={showRawJson} />
+          </Pressable>
+          {showRawJson ? <JSONView value={stripCallStackTree(session)} /> : null}
+        </>
+      ) : (
+        <Text style={[styles.notFound, { color: theme.text.default }]}>Session not found</Text>
+      )}
+    </ScrollView>
+  );
+}
+
+// The call stack tree balloons the raw JSON to the point where it can fail to render. It's
+// already shown visually in the "Call stacks" section above, so we omit it from the raw JSON
+// and replace it with a marker noting that.
+function stripCallStackTree(session: Session): Session {
+  if (session.type !== 'main' || !session.crashReport?.callStackTree) {
+    return session;
+  }
+  return {
+    ...session,
+    crashReport: {
+      ...session.crashReport,
+      callStackTree: '<omitted, see Call stacks section>' as never,
+    },
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  contentContainer: {
+    paddingBottom: Platform.select({ ios: 30, android: 150 }),
+  },
+  notFound: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+  divider: {
+    marginVertical: 16,
+  },
+  rawJsonHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  rawJsonTitle: {
+    marginBottom: 0,
+  },
+  rawJsonHeaderExpanded: {
+    marginBottom: 12,
+  },
+});
diff --git a/apps/observe-tester/app/(tabs)/(sessions)/sessions/index.tsx b/apps/observe-tester/app/(tabs)/(sessions)/sessions/index.tsx
new file mode 100644
index 00000000000000..b78b508e5368c9
--- /dev/null
+++ b/apps/observe-tester/app/(tabs)/(sessions)/sessions/index.tsx
@@ -0,0 +1,323 @@
+import AppMetrics, { type Session } from 'expo-app-metrics';
+import { router, Stack, useFocusEffect } from 'expo-router';
+import { useCallback, useState } from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  RefreshControl,
+  SectionList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+export default function SessionsList() {
+  const theme = useTheme();
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const currentMainStart = sessions.find((s) => s.type === 'main')?.startDate;
+  const isActive = (s: Session) =>
+    !s.endDate && currentMainStart != null && s.startDate >= currentMainStart;
+
+  const refresh = useCallback(async () => {
+    const result = await AppMetrics.getAllSessions();
+    const sorted = [...result].sort((a, b) => (a.startDate < b.startDate ? 1 : -1));
+    setSessions(sorted);
+    setLoaded(true);
+  }, []);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await refresh();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [refresh]);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (Platform.OS === 'ios') {
+        refresh();
+      } else {
+        setLoaded(true);
+      }
+    }, [refresh])
+  );
+
+  if (typeof AppMetrics.getAllSessions !== 'function') {
+    return (
+      <View style={[styles.container, styles.center, { backgroundColor: theme.background.screen }]}>
+        <Text style={[styles.emptyText, { color: theme.text.default }]}>
+          Sessions are not implemented on this platform yet
+        </Text>
+      </View>
+    );
+  }
+
+  const sections = groupByDay(sessions);
+
+  const title = sessions.length > 0 ? `Sessions (${sessions.length})` : 'Sessions';
+
+  return (
+    <>
+      <Stack.Screen options={{ title }} />
+      <SectionList
+        style={[styles.container, { backgroundColor: theme.background.screen }]}
+        contentContainerStyle={styles.contentContainer}
+        sections={sections}
+        keyExtractor={(session) => session.id}
+        stickySectionHeadersEnabled={false}
+        refreshControl={
+          Platform.OS === 'ios' ? (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={theme.text.secondary}
+            />
+          ) : undefined
+        }
+        ListEmptyComponent={
+          loaded ? (
+            <View style={styles.emptyContainer}>
+              <Text style={[styles.emptyText, { color: theme.text.default }]}>No sessions yet</Text>
+              <Text style={[styles.emptyHint, { color: theme.text.secondary }]}>
+                Sessions are recorded as you use the app. Crashes from past launches show up here
+                once MetricKit delivers them.
+              </Text>
+            </View>
+          ) : (
+            <View style={styles.emptyContainer}>
+              <ActivityIndicator color={theme.text.secondary} />
+            </View>
+          )
+        }
+        renderSectionHeader={({ section }) => (
+          <Text
+            style={[
+              styles.sectionHeader,
+              section !== sections[0] && styles.sectionHeaderSpaced,
+              { color: theme.text.default },
+            ]}>
+            {section.title}
+          </Text>
+        )}
+        renderItem={({ item }) => <SessionRow session={item} isActive={isActive(item)} />}
+      />
+    </>
+  );
+}
+
+function groupByDay(sessions: Session[]): { title: string; data: Session[] }[] {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  const sectionsByKey = new Map<string, { title: string; data: Session[] }>();
+  for (const session of sessions) {
+    const date = new Date(session.startDate);
+    const day = new Date(date);
+    day.setHours(0, 0, 0, 0);
+
+    let title: string;
+    if (day.getTime() === today.getTime()) {
+      title = 'Today';
+    } else if (day.getTime() === yesterday.getTime()) {
+      title = 'Yesterday';
+    } else {
+      title = sectionDateFormatter.format(date);
+    }
+
+    const key = day.toISOString();
+    const existing = sectionsByKey.get(key);
+    if (existing) {
+      existing.data.push(session);
+    } else {
+      sectionsByKey.set(key, { title, data: [session] });
+    }
+  }
+  return Array.from(sectionsByKey.values());
+}
+
+function SessionRow({ session, isActive }: { session: Session; isActive: boolean }) {
+  const theme = useTheme();
+  const startDate = new Date(session.startDate);
+  const endDate = session.endDate ? new Date(session.endDate) : null;
+  const duration = endDate ? formatDuration(endDate.getTime() - startDate.getTime()) : null;
+  const shortId = session.id.slice(0, 8);
+
+  return (
+    <Pressable
+      onPress={() => router.push(`/sessions/${session.id}`)}
+      style={({ pressed }) => [
+        styles.row,
+        {
+          backgroundColor: theme.background.element,
+          borderColor: theme.border.default,
+        },
+        isActive && {
+          borderLeftWidth: 3,
+          borderLeftColor: theme.icon.success,
+        },
+        pressed && styles.rowPressed,
+      ]}>
+      <View style={styles.rowHeader}>
+        <Text
+          style={[styles.rowTitle, { color: theme.text.default }]}
+          numberOfLines={1}
+          ellipsizeMode="tail">
+          {formatDate(startDate)}
+        </Text>
+        <View style={styles.badges}>
+          {session.type === 'main' && session.crashReport ? (
+            <View style={[styles.badge, { backgroundColor: theme.background.danger }]}>
+              <Text style={[styles.badgeText, { color: theme.text.danger }]}>Crashed</Text>
+            </View>
+          ) : null}
+          <View style={[styles.badge, { backgroundColor: theme.background.info }]}>
+            <Text style={[styles.badgeText, { color: theme.text.info }]}>
+              {capitalize(session.type)}
+            </Text>
+          </View>
+        </View>
+      </View>
+      <Text
+        style={[styles.rowMeta, { color: theme.text.secondary }]}
+        numberOfLines={1}
+        ellipsizeMode="tail">
+        {shortId}
+        {duration ? ` · ${duration}` : isActive ? ' · active' : ''} · {session.metrics.length}{' '}
+        metric{session.metrics.length === 1 ? '' : 's'}
+      </Text>
+    </Pressable>
+  );
+}
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+const sectionDateFormatter = new Intl.DateTimeFormat('en-GB', {
+  weekday: 'short',
+  day: '2-digit',
+  month: 'short',
+  year: 'numeric',
+});
+
+function formatDate(date: Date) {
+  return dateFormatter.format(date);
+}
+
+function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+// Renders a duration with the two largest non-zero units (e.g. "2h 5m", "45s", "3d").
+function formatDuration(ms: number) {
+  const totalSeconds = Math.round(ms / 1000);
+  const units = [
+    { value: Math.floor(totalSeconds / 86400), suffix: 'd' },
+    { value: Math.floor((totalSeconds % 86400) / 3600), suffix: 'h' },
+    { value: Math.floor((totalSeconds % 3600) / 60), suffix: 'm' },
+    { value: totalSeconds % 60, suffix: 's' },
+  ];
+  const firstNonZero = units.findIndex((u) => u.value > 0);
+  if (firstNonZero === -1) {
+    return '0s';
+  }
+  const parts = units
+    .slice(firstNonZero, firstNonZero + 2)
+    .filter((u) => u.value > 0)
+    .map((u) => `${u.value}${u.suffix}`);
+  return parts.join(' ');
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  contentContainer: {
+    padding: 20,
+    paddingTop: 8,
+    paddingBottom: Platform.select({ ios: 30, android: 150 }),
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 40,
+    gap: 8,
+  },
+  emptyText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  emptyHint: {
+    fontSize: 13,
+    textAlign: 'center',
+    marginHorizontal: 12,
+  },
+  sectionHeader: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  sectionHeaderSpaced: {
+    marginTop: 16,
+  },
+  row: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    marginBottom: 8,
+    gap: 6,
+  },
+  rowPressed: {
+    opacity: 0.6,
+  },
+  rowHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  rowTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    lineHeight: 20,
+    flexShrink: 1,
+  },
+  rowMeta: {
+    fontSize: 13,
+  },
+  badges: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 5,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 16,
+  },
+});
diff --git a/apps/observability-tester/app/(tabs)/_layout.tsx b/apps/observe-tester/app/(tabs)/_layout.tsx
similarity index 73%
rename from apps/observability-tester/app/(tabs)/_layout.tsx
rename to apps/observe-tester/app/(tabs)/_layout.tsx
index a930806f19fe03..a7c80d5fa15581 100644
--- a/apps/observability-tester/app/(tabs)/_layout.tsx
+++ b/apps/observe-tester/app/(tabs)/_layout.tsx
@@ -7,6 +7,10 @@ export default function TabsLayout() {
         <NativeTabs.Trigger.Label>Metrics</NativeTabs.Trigger.Label>
         <NativeTabs.Trigger.Icon sf="gauge.with.needle" md="sync" />
       </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="(sessions)">
+        <NativeTabs.Trigger.Label>Sessions</NativeTabs.Trigger.Label>
+        <NativeTabs.Trigger.Icon sf="clock" md="schedule" />
+      </NativeTabs.Trigger>
       <NativeTabs.Trigger name="debug">
         <NativeTabs.Trigger.Icon sf="wrench.and.screwdriver" md="info" />
         <NativeTabs.Trigger.Label>Debug</NativeTabs.Trigger.Label>
diff --git a/apps/observe-tester/app/(tabs)/debug/_layout.tsx b/apps/observe-tester/app/(tabs)/debug/_layout.tsx
new file mode 100644
index 00000000000000..7e59192c48a8c5
--- /dev/null
+++ b/apps/observe-tester/app/(tabs)/debug/_layout.tsx
@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+import { useTheme } from '@/utils/theme';
+
+export default function DebugLayout() {
+  const theme = useTheme();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.background.screen },
+        headerTintColor: theme.text.default,
+      }}>
+      <Stack.Screen name="index" options={{ title: 'Debug' }} />
+    </Stack>
+  );
+}
diff --git a/apps/observability-tester/app/(tabs)/debug/index.tsx b/apps/observe-tester/app/(tabs)/debug/index.tsx
similarity index 50%
rename from apps/observability-tester/app/(tabs)/debug/index.tsx
rename to apps/observe-tester/app/(tabs)/debug/index.tsx
index a78536bd2bb8ee..65d7df0ba2bf4b 100644
--- a/apps/observability-tester/app/(tabs)/debug/index.tsx
+++ b/apps/observe-tester/app/(tabs)/debug/index.tsx
@@ -1,11 +1,16 @@
+import AppMetrics from 'expo-app-metrics';
 import { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 
+import { Button } from '@/components/Button';
+import { CrashReportsSection } from '@/components/CrashReportsSection';
+import { Divider } from '@/components/Divider';
+import { JSAnimation } from '@/components/JSAnimation';
 import { useRouterMetricsHelpers } from '@/router-metrics-integration';
-import { Button } from '../../../components/Button';
-import { JSAnimation } from '../../../components/JSAnimation';
+import { useTheme } from '@/utils/theme';
 
 export default function Debug() {
+  const theme = useTheme();
   const [showAnimation, setShowAnimation] = useState(false);
 
   const { markPageInteractive } = useRouterMetricsHelpers();
@@ -17,13 +22,18 @@ export default function Debug() {
   }, [markPageInteractive]);
 
   return (
-    <View style={styles.container}>
+    <ScrollView
+      style={{ backgroundColor: theme.background.screen }}
+      contentContainerStyle={styles.container}>
+      <CrashReportsSection />
+      {typeof AppMetrics.triggerCrash === 'function' ? <Divider /> : null}
       <Button
         title={showAnimation ? 'Hide JS Animation' : 'Show JS Animation'}
         onPress={() => setShowAnimation(!showAnimation)}
+        theme="secondary"
       />
       {showAnimation && <JSAnimation />}
-    </View>
+    </ScrollView>
   );
 }
 
diff --git a/apps/observability-tester/app/_layout.tsx b/apps/observe-tester/app/_layout.tsx
similarity index 99%
rename from apps/observability-tester/app/_layout.tsx
rename to apps/observe-tester/app/_layout.tsx
index 0d1485b0ed0a15..a1e0e041bc4c9f 100644
--- a/apps/observability-tester/app/_layout.tsx
+++ b/apps/observe-tester/app/_layout.tsx
@@ -1,9 +1,10 @@
-import { startLoggingRouterMetrics } from '@/router-metrics-integration';
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import ExpoObserve, { AppMetricsRoot } from 'expo-observe';
 import { Stack } from 'expo-router';
 import { useColorScheme } from 'react-native';
 
+import { startLoggingRouterMetrics } from '@/router-metrics-integration';
+
 // Toggle to enable per screen router metrics logging
 const IS_ROUTER_INTEGRATION_ENABLED = false;
 
diff --git a/apps/observability-tester/app/redirect.tsx b/apps/observe-tester/app/redirect.tsx
similarity index 100%
rename from apps/observability-tester/app/redirect.tsx
rename to apps/observe-tester/app/redirect.tsx
diff --git a/apps/observability-tester/assets/images/android-icon-dark.png b/apps/observe-tester/assets/images/android-icon-dark.png
similarity index 100%
rename from apps/observability-tester/assets/images/android-icon-dark.png
rename to apps/observe-tester/assets/images/android-icon-dark.png
diff --git a/apps/observability-tester/assets/images/android-icon-foreground.png b/apps/observe-tester/assets/images/android-icon-foreground.png
similarity index 100%
rename from apps/observability-tester/assets/images/android-icon-foreground.png
rename to apps/observe-tester/assets/images/android-icon-foreground.png
diff --git a/apps/observability-tester/assets/images/android-icon.png b/apps/observe-tester/assets/images/android-icon.png
similarity index 100%
rename from apps/observability-tester/assets/images/android-icon.png
rename to apps/observe-tester/assets/images/android-icon.png
diff --git a/apps/observability-tester/assets/images/favicon.png b/apps/observe-tester/assets/images/favicon.png
similarity index 100%
rename from apps/observability-tester/assets/images/favicon.png
rename to apps/observe-tester/assets/images/favicon.png
diff --git a/apps/observability-tester/assets/images/icon.png b/apps/observe-tester/assets/images/icon.png
similarity index 100%
rename from apps/observability-tester/assets/images/icon.png
rename to apps/observe-tester/assets/images/icon.png
diff --git a/apps/observability-tester/assets/images/splash-icon-dark.png b/apps/observe-tester/assets/images/splash-icon-dark.png
similarity index 100%
rename from apps/observability-tester/assets/images/splash-icon-dark.png
rename to apps/observe-tester/assets/images/splash-icon-dark.png
diff --git a/apps/observability-tester/assets/images/splash-icon.png b/apps/observe-tester/assets/images/splash-icon.png
similarity index 100%
rename from apps/observability-tester/assets/images/splash-icon.png
rename to apps/observe-tester/assets/images/splash-icon.png
diff --git a/apps/observability-tester/assets/observe.icon/Assets/pulse.svg b/apps/observe-tester/assets/observe.icon/Assets/pulse.svg
similarity index 100%
rename from apps/observability-tester/assets/observe.icon/Assets/pulse.svg
rename to apps/observe-tester/assets/observe.icon/Assets/pulse.svg
diff --git a/apps/observability-tester/assets/observe.icon/icon.json b/apps/observe-tester/assets/observe.icon/icon.json
similarity index 100%
rename from apps/observability-tester/assets/observe.icon/icon.json
rename to apps/observe-tester/assets/observe.icon/icon.json
diff --git a/apps/observe-tester/components/Button.tsx b/apps/observe-tester/components/Button.tsx
new file mode 100644
index 00000000000000..486203d959e6cd
--- /dev/null
+++ b/apps/observe-tester/components/Button.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Pressable, PressableProps, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+type ButtonTheme = 'primary' | 'secondary' | 'tertiary';
+
+type ButtonProps = {
+  title: string;
+  description?: string;
+  onPress?: () => void;
+  theme?: ButtonTheme;
+  disabled?: boolean;
+} & PressableProps;
+
+export function Button({
+  title,
+  description,
+  onPress,
+  theme = 'primary',
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const styleguide = useTheme();
+  const tokens = styleguide.button[theme];
+  const disabledTokens = tokens.disabled;
+
+  const backgroundColor = disabled ? disabledTokens.background : tokens.background;
+  const borderColor = disabled ? disabledTokens.border : tokens.border;
+  const textColor = disabled ? disabledTokens.text : tokens.text;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        { backgroundColor, borderColor },
+        pressed ? styles.buttonFocused : null,
+      ]}
+      disabled={disabled}
+      {...rest}>
+      <View style={styles.labelContainer}>
+        <Text style={[styles.text, { color: textColor }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: styleguide.text.tertiary }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 6,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+  },
+  buttonFocused: {
+    opacity: 0.5,
+  },
+  labelContainer: {
+    alignItems: 'center',
+  },
+  text: {
+    fontWeight: '600',
+    fontSize: 18,
+    letterSpacing: 0.5,
+  },
+  description: {
+    fontSize: 13,
+    fontWeight: '500',
+    marginTop: 2,
+    letterSpacing: 0.3,
+  },
+});
diff --git a/apps/observe-tester/components/CallStackTreeView.tsx b/apps/observe-tester/components/CallStackTreeView.tsx
new file mode 100644
index 00000000000000..ff1cf95b75f09b
--- /dev/null
+++ b/apps/observe-tester/components/CallStackTreeView.tsx
@@ -0,0 +1,189 @@
+import type { CallStackFrame, CallStackTree } from 'expo-app-metrics';
+import { useEffect, useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Chevron } from '@/components/Chevron';
+import { useTheme } from '@/utils/theme';
+
+export function CallStackTreeView({ tree }: { tree: CallStackTree }) {
+  const theme = useTheme();
+  const stacks = tree.callStacks ?? [];
+
+  if (stacks.length === 0) {
+    return (
+      <Text style={[styles.empty, { color: theme.text.secondary }]}>No call stacks captured</Text>
+    );
+  }
+
+  const sortedStacks = stacks
+    .map((stack, originalIndex) => ({ stack, originalIndex }))
+    .filter(({ stack }) => (stack.callStackRootFrames?.length ?? 0) > 0)
+    .sort(
+      (a, b) =>
+        Number(b.stack.threadAttributed ?? false) - Number(a.stack.threadAttributed ?? false)
+    );
+
+  return (
+    <View>
+      {sortedStacks.map(({ stack, originalIndex }) => (
+        <ThreadView key={originalIndex} stack={stack} originalIndex={originalIndex} />
+      ))}
+    </View>
+  );
+}
+
+function ThreadView({
+  stack,
+  originalIndex,
+}: {
+  stack: NonNullable<CallStackTree['callStacks']>[number];
+  originalIndex: number;
+}) {
+  const theme = useTheme();
+  const isAttributed = !!stack.threadAttributed;
+  const [expanded, setExpanded] = useState(isAttributed);
+  const [framesMounted, setFramesMounted] = useState(isAttributed);
+  const frames = flattenFrames(stack.callStackRootFrames ?? []);
+
+  useEffect(() => {
+    if (expanded && !framesMounted) {
+      const handle = requestAnimationFrame(() => setFramesMounted(true));
+      return () => cancelAnimationFrame(handle);
+    }
+  }, [expanded, framesMounted]);
+
+  return (
+    <View
+      style={[
+        styles.thread,
+        {
+          backgroundColor: theme.background.element,
+          borderColor: theme.border.default,
+        },
+      ]}>
+      <Pressable
+        onPress={() => setExpanded((v) => !v)}
+        style={({ pressed }) => [
+          styles.threadHeader,
+          expanded && styles.threadHeaderExpanded,
+          pressed && { opacity: 0.6 },
+        ]}>
+        <Text style={[styles.threadTitle, { color: theme.text.default }]} numberOfLines={1}>
+          Thread {originalIndex + 1}
+          {isAttributed ? (
+            <Text style={[styles.attributed, { color: theme.text.tertiary }]}>
+              {' · '}
+              <Text style={{ color: theme.text.danger }}>attributed</Text>
+            </Text>
+          ) : null}
+          {!expanded ? (
+            <Text style={[styles.frameCount, { color: theme.text.tertiary }]}>
+              {' '}
+              · {frames.length} frame{frames.length === 1 ? '' : 's'}
+            </Text>
+          ) : null}
+        </Text>
+        <Chevron expanded={expanded} />
+      </Pressable>
+      {framesMounted ? (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={!expanded && styles.hidden}>
+          <View>
+            {frames.map((frame, frameIndex) => (
+              <FrameRow key={frameIndex} frame={frame} />
+            ))}
+          </View>
+        </ScrollView>
+      ) : null}
+    </View>
+  );
+}
+
+function flattenFrames(rootFrames: CallStackFrame[]): CallStackFrame[] {
+  const result: CallStackFrame[] = [];
+  const stack: CallStackFrame[] = [...rootFrames];
+  while (stack.length > 0) {
+    const next = stack.pop()!;
+    result.push(next);
+    const subFrames = next.subFrames ?? [];
+    for (let i = subFrames.length - 1; i >= 0; i--) {
+      stack.push(subFrames[i]);
+    }
+  }
+  return result;
+}
+
+function FrameRow({ frame }: { frame: CallStackFrame }) {
+  const theme = useTheme();
+  return (
+    <Text style={[styles.frame, { color: theme.text.default }]}>
+      <Text style={{ color: theme.text.tertiary }}>{formatAddress(frame.address)} </Text>
+      <Text style={{ color: theme.text.default }}>{frame.binaryName ?? '(unknown)'}</Text>
+      {frame.symbol ? (
+        <Text style={{ color: theme.text.default }}> {frame.symbol}</Text>
+      ) : (
+        <Text style={{ color: theme.text.secondary }}>
+          {formatOffset(frame.offsetIntoBinaryTextSegment)}
+        </Text>
+      )}
+    </Text>
+  );
+}
+
+function formatAddress(address: number | null | undefined) {
+  if (address == null) return '0x0000000000000000';
+  return '0x' + address.toString(16).padStart(16, '0');
+}
+
+function formatOffset(offset: number | null | undefined) {
+  if (offset == null) return '';
+  return ' +0x' + offset.toString(16);
+}
+
+const styles = StyleSheet.create({
+  thread: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    marginBottom: 12,
+  },
+  threadHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    paddingHorizontal: 8,
+  },
+  threadHeaderExpanded: {
+    marginBottom: 8,
+  },
+  threadTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    flexShrink: 1,
+  },
+  attributed: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  frameCount: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  frame: {
+    fontFamily: 'Menlo',
+    fontSize: 11,
+    paddingVertical: 2,
+  },
+  empty: {
+    fontSize: 13,
+    textAlign: 'center',
+    marginVertical: 12,
+  },
+  hidden: {
+    display: 'none',
+  },
+});
diff --git a/apps/observe-tester/components/Chevron.tsx b/apps/observe-tester/components/Chevron.tsx
new file mode 100644
index 00000000000000..72664ac52307cd
--- /dev/null
+++ b/apps/observe-tester/components/Chevron.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+type ChevronProps = {
+  expanded: boolean;
+  size?: number;
+  color?: string;
+  animated?: boolean;
+  style?: StyleProp<TextStyle>;
+};
+
+export function Chevron({ expanded, size = 18, color, animated = true, style }: ChevronProps) {
+  const theme = useTheme();
+  const rotation = useRef(new Animated.Value(expanded ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (!animated) {
+      rotation.setValue(expanded ? 1 : 0);
+      return;
+    }
+    Animated.timing(rotation, {
+      toValue: expanded ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+  }, [expanded, animated, rotation]);
+
+  const rotate = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+
+  return (
+    <Animated.Text
+      style={[
+        styles.chevron,
+        { fontSize: size, color: color ?? theme.text.tertiary, transform: [{ rotate }] },
+        style,
+      ]}>
+      ❯
+    </Animated.Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  chevron: {
+    fontWeight: '600',
+  },
+});
diff --git a/apps/observe-tester/components/CrashReportPanel.tsx b/apps/observe-tester/components/CrashReportPanel.tsx
new file mode 100644
index 00000000000000..50612549b7bee8
--- /dev/null
+++ b/apps/observe-tester/components/CrashReportPanel.tsx
@@ -0,0 +1,172 @@
+import type { CrashReport } from 'expo-app-metrics';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+export function CrashReportPanel({ report }: { report: CrashReport }) {
+  const theme = useTheme();
+  const exceptionLabel = formatExceptionLabel(report.exceptionType, report.signal);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.background.danger,
+          borderColor: theme.border.danger,
+        },
+      ]}>
+      {exceptionLabel ? (
+        <Text style={[styles.headline, { color: theme.text.danger }]}>{exceptionLabel}</Text>
+      ) : null}
+      {report.terminationReason ? (
+        <Field label="Termination reason" value={report.terminationReason} mono />
+      ) : null}
+      {report.virtualMemoryRegionInfo ? (
+        <Field label="VM region" value={report.virtualMemoryRegionInfo} mono />
+      ) : null}
+      {report.exceptionReason ? (
+        <View style={styles.exceptionReason}>
+          <Text style={[styles.exceptionMessage, { color: theme.text.default }]}>
+            {report.exceptionReason.composedMessage}
+          </Text>
+          <Text style={[styles.exceptionMeta, { color: theme.text.secondary }]}>
+            {report.exceptionReason.className} · {report.exceptionReason.exceptionType}
+          </Text>
+        </View>
+      ) : null}
+      <View style={styles.timing}>
+        <Text style={[styles.timingText, { color: theme.text.secondary }]}>
+          Window: {formatDate(report.timestampBegin)} → {formatDate(report.timestampEnd)}
+        </Text>
+        <Text style={[styles.timingText, { color: theme.text.secondary }]}>
+          Ingested: {formatDate(report.ingestedAt)}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function Field({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  const theme = useTheme();
+  return (
+    <View style={styles.field}>
+      <Text style={[styles.fieldLabel, { color: theme.text.tertiary }]}>{label}</Text>
+      <Text
+        style={[styles.fieldValue, mono && styles.fieldValueMono, { color: theme.text.default }]}>
+        {value}
+      </Text>
+    </View>
+  );
+}
+
+function formatExceptionLabel(type: number | null | undefined, signal: number | null | undefined) {
+  const parts: string[] = [];
+  if (type != null) parts.push(exceptionName(type));
+  if (signal != null) parts.push(signalName(signal));
+  return parts.join(' · ');
+}
+
+function exceptionName(type: number) {
+  switch (type) {
+    case 1:
+      return 'EXC_BAD_ACCESS';
+    case 2:
+      return 'EXC_BAD_INSTRUCTION';
+    case 3:
+      return 'EXC_ARITHMETIC';
+    case 4:
+      return 'EXC_EMULATION';
+    case 5:
+      return 'EXC_SOFTWARE';
+    case 6:
+      return 'EXC_BREAKPOINT';
+    case 10:
+      return 'EXC_CRASH';
+    case 11:
+      return 'EXC_RESOURCE';
+    case 12:
+      return 'EXC_GUARD';
+    default:
+      return `EXC_${type}`;
+  }
+}
+
+function signalName(signal: number) {
+  switch (signal) {
+    case 4:
+      return 'SIGILL';
+    case 5:
+      return 'SIGTRAP';
+    case 6:
+      return 'SIGABRT';
+    case 8:
+      return 'SIGFPE';
+    case 9:
+      return 'SIGKILL';
+    case 10:
+      return 'SIGBUS';
+    case 11:
+      return 'SIGSEGV';
+    default:
+      return `SIG${signal}`;
+  }
+}
+
+const dateFormatter = new Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function formatDate(iso: string) {
+  return dateFormatter.format(new Date(iso));
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    gap: 10,
+  },
+  headline: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  field: {
+    gap: 2,
+  },
+  fieldLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  fieldValue: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  fieldValueMono: {
+    fontFamily: 'Menlo',
+    fontSize: 12,
+  },
+  exceptionReason: {
+    gap: 4,
+  },
+  exceptionMessage: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  exceptionMeta: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  timing: {
+    gap: 2,
+  },
+  timingText: {
+    fontSize: 11,
+  },
+});
diff --git a/apps/observe-tester/components/CrashReportsSection.tsx b/apps/observe-tester/components/CrashReportsSection.tsx
new file mode 100644
index 00000000000000..94739e20037ad3
--- /dev/null
+++ b/apps/observe-tester/components/CrashReportsSection.tsx
@@ -0,0 +1,60 @@
+import AppMetrics, { type CrashKind } from 'expo-app-metrics';
+import { StyleSheet, Text } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { useTheme } from '@/utils/theme';
+
+const CRASH_TRIGGERS: { kind: CrashKind; title: string; description: string }[] = [
+  { kind: 'badAccess', title: 'Bad access', description: 'EXC_BAD_ACCESS / SIGSEGV' },
+  { kind: 'fatalError', title: 'Fatal error', description: 'EXC_CRASH / SIGABRT' },
+  { kind: 'divideByZero', title: 'Divide by zero', description: 'EXC_ARITHMETIC / SIGFPE' },
+  { kind: 'forceUnwrapNil', title: 'Force-unwrap nil', description: 'EXC_BAD_INSTRUCTION' },
+  { kind: 'arrayOutOfBounds', title: 'Array out of bounds', description: 'EXC_BAD_INSTRUCTION' },
+  { kind: 'objcException', title: 'NSException', description: 'Uncaught Objective-C exception' },
+  { kind: 'stackOverflow', title: 'Stack overflow', description: 'Unbounded recursion' },
+];
+
+export function CrashReportsSection() {
+  const theme = useTheme();
+
+  if (typeof AppMetrics.triggerCrash !== 'function') {
+    return null;
+  }
+
+  return (
+    <>
+      <Text style={[styles.sectionTitle, { color: theme.text.default }]}>Crash reports</Text>
+      <Text style={[styles.sectionHint, { color: theme.text.secondary }]}>
+        Trigger real crashes to produce MetricKit diagnostics, or simulate a crash report attached
+        to the current session.
+      </Text>
+      <Button
+        title="Simulate crash report"
+        description="Adds a fake crash report to the current session"
+        onPress={() => AppMetrics.simulateCrashReport()}
+        theme="secondary"
+      />
+      {CRASH_TRIGGERS.map(({ kind, title, description }) => (
+        <Button
+          key={kind}
+          title={title}
+          description={description}
+          onPress={() => AppMetrics.triggerCrash(kind)}
+          theme="secondary"
+        />
+      ))}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 4,
+  },
+  sectionHint: {
+    fontSize: 13,
+    marginBottom: 16,
+  },
+});
diff --git a/apps/observe-tester/components/Divider.tsx b/apps/observe-tester/components/Divider.tsx
new file mode 100644
index 00000000000000..3a67a30e5040da
--- /dev/null
+++ b/apps/observe-tester/components/Divider.tsx
@@ -0,0 +1,15 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+export function Divider({ style }: { style?: StyleProp<ViewStyle> }) {
+  const theme = useTheme();
+  return <View style={[styles.divider, { backgroundColor: theme.border.secondary }, style]} />;
+}
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    marginVertical: 20,
+  },
+});
diff --git a/apps/observability-tester/components/JSAnimation.tsx b/apps/observe-tester/components/JSAnimation.tsx
similarity index 100%
rename from apps/observability-tester/components/JSAnimation.tsx
rename to apps/observe-tester/components/JSAnimation.tsx
diff --git a/apps/observe-tester/components/JSONView.tsx b/apps/observe-tester/components/JSONView.tsx
new file mode 100644
index 00000000000000..af944561e1e730
--- /dev/null
+++ b/apps/observe-tester/components/JSONView.tsx
@@ -0,0 +1,91 @@
+import { Code } from '@expo/html-elements';
+import * as Clipboard from 'expo-clipboard';
+import { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+type JSONViewProps = {
+  value: unknown;
+  bordered?: boolean;
+  textColor?: string;
+};
+
+export function JSONView({ value, bordered = true, textColor }: JSONViewProps) {
+  const theme = useTheme();
+  const [copied, setCopied] = useState(false);
+  const json = JSON.stringify(value, deterministicJSONReplacer, 2);
+
+  return (
+    <View
+      style={[
+        bordered && styles.container,
+        bordered && {
+          backgroundColor: theme.background.element,
+          borderColor: theme.border.default,
+          borderWidth: 1,
+        },
+      ]}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View>
+          <Code style={[styles.code, { color: textColor ?? theme.text.default }]} selectable>
+            {json}
+          </Code>
+        </View>
+      </ScrollView>
+      <Pressable
+        onPress={async () => {
+          await Clipboard.setStringAsync(json);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }}
+        style={({ pressed }) => [
+          styles.copyButton,
+          {
+            backgroundColor: theme.background.element,
+            borderColor: theme.border.default,
+          },
+          pressed && styles.copyButtonPressed,
+        ]}>
+        <Text style={[styles.copyButtonText, { color: theme.text.secondary }]}>
+          {copied ? 'Copied' : 'Copy'}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// JSON.stringify replacer that yields a stable key order across runs.
+function deterministicJSONReplacer(_: string, value: any) {
+  return typeof value !== 'object' || value === null || Array.isArray(value)
+    ? value
+    : Object.fromEntries(
+        Object.entries(value).sort(([keyA], [keyB]) => (keyA < keyB ? -1 : keyA > keyB ? 1 : 0))
+      );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    padding: 12,
+  },
+  copyButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 5,
+    borderWidth: 1,
+  },
+  copyButtonPressed: {
+    opacity: 0.5,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  code: {
+    fontSize: 12,
+  },
+});
diff --git a/apps/observe-tester/components/MetricsPanel.tsx b/apps/observe-tester/components/MetricsPanel.tsx
new file mode 100644
index 00000000000000..ae405fc5623601
--- /dev/null
+++ b/apps/observe-tester/components/MetricsPanel.tsx
@@ -0,0 +1,189 @@
+import type { Metric } from 'expo-app-metrics';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { JSONView } from '@/components/JSONView';
+import { useTheme } from '@/utils/theme';
+
+export function MetricsPanel({ metrics }: { metrics: Metric[] }) {
+  const theme = useTheme();
+  if (metrics.length === 0) {
+    return <Text style={[styles.empty, { color: theme.text.secondary }]}>No metrics recorded</Text>;
+  }
+
+  const groups = groupByCategory(metrics);
+
+  return (
+    <View style={styles.container}>
+      {groups.map(({ category, items }) => (
+        <View
+          key={category}
+          style={[
+            styles.group,
+            { backgroundColor: theme.background.element, borderColor: theme.border.default },
+          ]}>
+          <View style={styles.groupHeader}>
+            <Text style={[styles.groupTitle, { color: theme.text.default }]}>
+              {capitalize(category)}
+            </Text>
+            <Text style={[styles.groupCount, { color: theme.text.tertiary }]}>{items.length}</Text>
+          </View>
+          {items.map((metric, index) => {
+            const hasParams = metric.params != null && Object.keys(metric.params).length > 0;
+            return (
+              <View
+                key={`${metric.timestamp}-${metric.name}`}
+                style={[
+                  styles.metricItem,
+                  index > 0 && { borderTopColor: theme.border.default, borderTopWidth: 1 },
+                ]}>
+                <View style={styles.metricRow}>
+                  <Text
+                    style={[styles.metricName, { color: theme.text.default }]}
+                    numberOfLines={1}
+                    ellipsizeMode="tail">
+                    {metric.name}
+                  </Text>
+                  <Text style={[styles.metricValue, { color: theme.text.secondary }]}>
+                    {formatValue(metric.value)}
+                  </Text>
+                </View>
+                {metric.routeName ? (
+                  <View style={styles.metricRoute}>
+                    <Text style={[styles.metricMetaLabel, { color: theme.text.default }]}>
+                      Route
+                    </Text>
+                    <Text
+                      style={[styles.metricRouteName, { color: theme.text.secondary }]}
+                      numberOfLines={1}
+                      ellipsizeMode="tail">
+                      {metric.routeName}
+                    </Text>
+                  </View>
+                ) : null}
+                {hasParams ? (
+                  <View style={styles.metricParams}>
+                    <Text style={[styles.metricMetaLabel, { color: theme.text.default }]}>
+                      Params
+                    </Text>
+                    <JSONView
+                      value={metric.params}
+                      bordered={false}
+                      textColor={theme.text.secondary}
+                    />
+                  </View>
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Categories rendered in this order; anything else falls in alphabetically afterward.
+const CATEGORY_ORDER = ['appStartup', 'frameRate', 'memory', 'updates', 'session'];
+
+function groupByCategory(metrics: Metric[]) {
+  const map = new Map<string, Metric[]>();
+  for (const metric of metrics) {
+    const list = map.get(metric.category);
+    if (list) {
+      list.push(metric);
+    } else {
+      map.set(metric.category, [metric]);
+    }
+  }
+  return Array.from(map.entries())
+    .map(([category, items]) => ({ category, items }))
+    .sort(
+      (a, b) =>
+        categoryRank(a.category) - categoryRank(b.category) || a.category.localeCompare(b.category)
+    );
+}
+
+function categoryRank(category: string) {
+  const index = CATEGORY_ORDER.indexOf(category);
+  return index === -1 ? CATEGORY_ORDER.length : index;
+}
+
+function formatValue(value: number) {
+  if (Number.isInteger(value)) {
+    return value.toString();
+  }
+  return value.toFixed(3);
+}
+
+function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 12,
+  },
+  group: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  groupHeader: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    marginBottom: 6,
+  },
+  groupTitle: {
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  groupCount: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  metricItem: {
+    paddingVertical: 6,
+  },
+  metricRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  metricParams: {
+    marginTop: 6,
+    marginLeft: 12,
+  },
+  metricMetaLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 2,
+  },
+  metricName: {
+    fontSize: 16,
+    fontWeight: '500',
+    letterSpacing: 0.5,
+    flexShrink: 1,
+  },
+  metricRoute: {
+    marginTop: 6,
+    marginLeft: 12,
+  },
+  metricRouteName: {
+    fontFamily: 'Menlo',
+    fontSize: 11,
+    lineHeight: 15,
+  },
+  metricValue: {
+    fontFamily: 'Menlo',
+    fontSize: 12,
+  },
+  empty: {
+    fontSize: 13,
+    textAlign: 'center',
+    marginVertical: 12,
+  },
+});
diff --git a/apps/observe-tester/components/SessionHeader.tsx b/apps/observe-tester/components/SessionHeader.tsx
new file mode 100644
index 00000000000000..5b805f475b3c01
--- /dev/null
+++ b/apps/observe-tester/components/SessionHeader.tsx
@@ -0,0 +1,177 @@
+import type { Session } from 'expo-app-metrics';
+import * as Clipboard from 'expo-clipboard';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '@/utils/theme';
+
+export function SessionHeader({ session }: { session: Session }) {
+  const theme = useTheme();
+  const startDate = new Date(session.startDate);
+  const endDate = session.endDate ? new Date(session.endDate) : null;
+  const duration = endDate
+    ? formatDuration(endDate.getTime() - startDate.getTime())
+    : 'still running';
+  const crashed = session.type === 'main' && !!session.crashReport;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.badges}>
+        <Badge
+          label={capitalize(session.type)}
+          background={theme.background.info}
+          color={theme.text.info}
+        />
+        {crashed ? (
+          <Badge label="Crashed" background={theme.background.danger} color={theme.text.danger} />
+        ) : !session.endDate ? (
+          <Badge label="Active" background={theme.background.success} color={theme.text.success} />
+        ) : null}
+      </View>
+
+      <Field label="Started" value={formatDateTime(startDate)} />
+      <Field label="Ended" value={endDate ? formatDateTime(endDate) : '—'} />
+      <Field label="Duration" value={duration} />
+      <Field label="Metrics" value={String(session.metrics.length)} />
+      <Field
+        label="Session ID"
+        value={session.id}
+        monospace
+        onPress={() => Clipboard.setStringAsync(session.id)}
+      />
+    </View>
+  );
+}
+
+function Field({
+  label,
+  value,
+  monospace,
+  onPress,
+}: {
+  label: string;
+  value: string;
+  monospace?: boolean;
+  onPress?: () => void;
+}) {
+  const theme = useTheme();
+  const valueStyle = [
+    styles.fieldValue,
+    monospace && styles.fieldValueMono,
+    { color: theme.text.default },
+  ];
+  return (
+    <View style={styles.field}>
+      <Text style={[styles.fieldLabel, { color: theme.text.tertiary }]}>{label}</Text>
+      {onPress ? (
+        <Pressable
+          onPress={onPress}
+          style={({ pressed }) => [styles.fieldValueWrap, pressed && styles.fieldValuePressed]}>
+          <Text style={valueStyle} numberOfLines={1}>
+            {value}
+          </Text>
+        </Pressable>
+      ) : (
+        <Text style={valueStyle}>{value}</Text>
+      )}
+    </View>
+  );
+}
+
+function Badge({ label, background, color }: { label: string; background: string; color: string }) {
+  return (
+    <View style={[styles.badge, { backgroundColor: background }]}>
+      <Text style={[styles.badgeText, { color }]}>{label}</Text>
+    </View>
+  );
+}
+
+const dateTimeFormatter = new Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+});
+
+function formatDateTime(date: Date) {
+  return dateTimeFormatter.format(date);
+}
+
+function formatDuration(ms: number) {
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remSeconds = seconds % 60;
+  if (minutes < 60) {
+    if (remSeconds === 0) {
+      return `${minutes}m`;
+    }
+    return `${minutes}m ${remSeconds}s`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  if (hours < 24) {
+    if (remMinutes === 0) {
+      return `${hours}h`;
+    }
+    return `${hours}h ${remMinutes}m`;
+  }
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  if (remHours === 0) {
+    return `${days}d`;
+  }
+  return `${days}d ${remHours}h`;
+}
+
+function capitalize(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  badges: {
+    flexDirection: 'row',
+    gap: 6,
+    marginBottom: 4,
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 5,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 16,
+  },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: 12,
+  },
+  fieldLabel: {
+    fontSize: 13,
+    fontWeight: '500',
+    width: 84,
+  },
+  fieldValueWrap: {
+    flex: 1,
+  },
+  fieldValuePressed: {
+    opacity: 0.5,
+  },
+  fieldValue: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  fieldValueMono: {
+    fontFamily: 'Menlo',
+    fontSize: 12,
+  },
+});
diff --git a/apps/observability-tester/eas.json b/apps/observe-tester/eas.json
similarity index 100%
rename from apps/observability-tester/eas.json
rename to apps/observe-tester/eas.json
diff --git a/apps/observability-tester/package.json b/apps/observe-tester/package.json
similarity index 94%
rename from apps/observability-tester/package.json
rename to apps/observe-tester/package.json
index 162d58112bda51..fcb16547aa2b0a 100644
--- a/apps/observability-tester/package.json
+++ b/apps/observe-tester/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "observability",
+  "name": "observe-tester",
   "main": "expo-router/entry",
   "version": "1.0.0",
   "private": true,
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@expo/html-elements": "^0.13.7",
+    "@expo/styleguide-base": "^1.0.1",
     "@expo/vector-icons": "^15.0.2",
     "@react-navigation/bottom-tabs": "^7.15.5",
     "@react-navigation/native": "^7.1.33",
@@ -22,6 +23,7 @@
     "expo": "workspace:*",
     "expo-app-metrics": "workspace:*",
     "expo-build-properties": "workspace:*",
+    "expo-clipboard": "workspace:*",
     "expo-constants": "workspace:*",
     "expo-dev-client": "workspace:*",
     "expo-eas-client": "workspace:*",
diff --git a/apps/observability-tester/router-metrics-integration/index.ts b/apps/observe-tester/router-metrics-integration/index.ts
similarity index 100%
rename from apps/observability-tester/router-metrics-integration/index.ts
rename to apps/observe-tester/router-metrics-integration/index.ts
diff --git a/apps/observability-tester/scripts/test-ios.sh b/apps/observe-tester/scripts/test-ios.sh
similarity index 100%
rename from apps/observability-tester/scripts/test-ios.sh
rename to apps/observe-tester/scripts/test-ios.sh
diff --git a/apps/observability-tester/tsconfig.json b/apps/observe-tester/tsconfig.json
similarity index 100%
rename from apps/observability-tester/tsconfig.json
rename to apps/observe-tester/tsconfig.json
diff --git a/apps/observe-tester/utils/theme.ts b/apps/observe-tester/utils/theme.ts
new file mode 100644
index 00000000000000..5314dab7fdb17e
--- /dev/null
+++ b/apps/observe-tester/utils/theme.ts
@@ -0,0 +1,6 @@
+import { darkTheme, lightTheme } from '@expo/styleguide-base';
+import { useColorScheme } from 'react-native';
+
+export function useTheme() {
+  return useColorScheme() === 'dark' ? darkTheme : lightTheme;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5afd278d6c7d2f..50dd3b5ff2d95c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1314,11 +1314,14 @@ importers:
         specifier: ~19.2.0
         version: 19.2.14
 
-  apps/observability-tester:
+  apps/observe-tester:
     dependencies:
       '@expo/html-elements':
         specifier: ^0.13.7
         version: 0.13.8(react-native-web@0.21.2(encoding@0.1.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-native@0.85.2(@babel/core@7.29.0)(@react-native/jest-preset@0.85.2(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.2(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3)
+      '@expo/styleguide-base':
+        specifier: ^1.0.1
+        version: 1.0.1(react@19.2.3)
       '@expo/vector-icons':
         specifier: ^15.0.2
         version: 15.1.1(expo-font@packages+expo-font)(react-native@0.85.2(@babel/core@7.29.0)(@react-native/jest-preset@0.85.2(@babel/core@7.29.0)(react@19.2.3))(@react-native/metro-config@0.85.2(@babel/core@7.29.0))(@types/react@19.2.14)(react@19.2.3))(react@19.2.3)
@@ -1340,6 +1343,9 @@ importers:
       expo-build-properties:
         specifier: workspace:*
         version: link:../../packages/expo-build-properties
+      expo-clipboard:
+        specifier: workspace:*
+        version: link:../../packages/expo-clipboard
       expo-constants:
         specifier: workspace:*
         version: link:../../packages/expo-constants

From 9999e24657faffc6536bc3ec95efe9ecfc055fae Mon Sep 17 00:00:00 2001
From: Tomasz Sapeta <tsapeta@expo.dev>
Date: Sat, 2 May 2026 22:52:10 +0200
Subject: [PATCH 2/2] [observe-tester] Fix simulator detection in test:ios
 script (#45303)

---
 apps/observe-tester/scripts/test-ios.sh | 45 +++++++++++++++++++++----
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/apps/observe-tester/scripts/test-ios.sh b/apps/observe-tester/scripts/test-ios.sh
index 793c71decd79f9..97482713b2c3fd 100755
--- a/apps/observe-tester/scripts/test-ios.sh
+++ b/apps/observe-tester/scripts/test-ios.sh
@@ -1,24 +1,55 @@
 #!/usr/bin/env bash
 # Run the iOS unit-test schemes for ExpoAppMetrics and ExpoObserve against
-# whichever iOS simulator is currently booted. Boot a simulator first
-# (e.g. via `xcrun simctl boot <name>` or by opening Simulator.app) and
-# then run `pnpm test:ios` from this app's directory.
+# the currently booted iOS simulator. If none is booted, the newest
+# available iPhone simulator is booted automatically.
 
 set -euo pipefail
 
 cd "$(dirname "$0")/.."
 
-UDID=$(xcrun simctl list devices available -j | \
-  jq -r '.devices | to_entries | map(select(.key|test("iOS"))) | .[-1].value | map(select(.isAvailable)) | .[0].udid')
+UDID=$(xcrun simctl list devices booted -j | \
+  jq -r '[.devices | to_entries[] | select(.key|test("iOS")) | .value[]] | .[0].udid // empty')
+
+if [[ -z "$UDID" ]]; then
+  PICK=$(xcrun simctl list devices available -j | jq -r '
+    [ .devices | to_entries[]
+      | select(.key | test("SimRuntime\\.iOS-"))
+      | .key as $rt
+      | (($rt | capture("iOS-(?<maj>[0-9]+)(-(?<min>[0-9]+))?")) as $v
+         | (($v.maj|tonumber) * 1000 + (($v.min // "0")|tonumber))) as $ver
+      | .value[]
+      | select(.isAvailable)
+      | {udid, name, ver: $ver, iphone: (.name | test("^iPhone"))}
+    ]
+    | sort_by([-.ver, (if .iphone then 0 else 1 end), .name])
+    | .[0] | "\(.udid)\t\(.name)" // empty')
+
+  if [[ -z "$PICK" ]]; then
+    echo "error: no iOS simulator is booted and none is available to boot." >&2
+    echo "Install an iOS simulator runtime via Xcode (Settings > Components), then rerun \`pnpm test:ios\`." >&2
+    exit 1
+  fi
+
+  UDID=${PICK%%$'\t'*}
+  NAME=${PICK#*$'\t'}
+  echo "No simulator booted; booting $NAME ($UDID)..."
+  xcrun simctl boot "$UDID"
+fi
 
 echo "Running iOS unit tests against simulator: $UDID"
 
+if command -v xcbeautify >/dev/null 2>&1; then
+  FORMATTER=(xcbeautify)
+else
+  FORMATTER=(cat)
+fi
+
 xcodebuild test \
   -workspace ios/Observe.xcworkspace \
   -scheme ExpoAppMetrics-Unit-Tests \
-  -destination "id=$UDID"
+  -destination "id=$UDID" | "${FORMATTER[@]}"
 
 xcodebuild test \
   -workspace ios/Observe.xcworkspace \
   -scheme ExpoObserve-Unit-Tests \
-  -destination "id=$UDID"
+  -destination "id=$UDID" | "${FORMATTER[@]}"