fix(app): fix sidebar crash when switching iOS theme

Unistyles' StyleSheet.create((theme) => ...) wraps styled components in
<UnistylesComponent> and patches native view properties via C++. When
these dynamic styles are applied to Reanimated's Animated.View, a theme
change causes both systems to fight over the same native node, crashing
with "Unable to find node on an unmounted component."

Fix: use plain React Native StyleSheet for static positioning on
Animated.View, and pass theme-dependent values (backgroundColor) as
inline styles from useUnistyles() instead of Unistyles dynamic sheets.

Also:
- Add gestureAnimatingRef to prevent double withTiming during gesture opens
- Remove all debug instrumentation added during investigation
- Add Maestro flow and bash script for automated theme-toggle verification
- Add docs/MOBILE_TESTING.md covering Maestro patterns, self-verification
  loops, the Unistyles+Reanimated pitfall, and simulator commands

packages/app/maestro/.gitignore

@@ -0,0 +1,2 @@
+# Maestro takeScreenshot artifacts
+*.png

packages/app/maestro/sidebar-theme-repro.yaml

@@ -0,0 +1,31 @@
+appId: sh.paseo
+---
+# Ensure sidebar is closed: if sidebar-sessions is visible, close it via swipe left
+- runFlow:
+    when:
+      visible:
+        id: "sidebar-sessions"
+    commands:
+      - swipe:
+          direction: LEFT
+          duration: 300
+
+# Small pause for close animation
+- takeScreenshot: 00-sidebar-closed
+
+# Open sidebar via swipe right gesture (the actual path that triggers the bug)
+- swipe:
+    start: "5%,50%"
+    end: "80%,50%"
+    duration: 300
+
+# Verify sidebar opened
+- assertVisible:
+    id: "sidebar-sessions"
+- takeScreenshot: 01-sidebar-opened
+
+# Close sidebar via swipe left
+- swipe:
+    direction: LEFT
+    duration: 300
+- takeScreenshot: 02-sidebar-closed-again

packages/app/maestro/test-sidebar-theme.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+# Verification loop for sidebar theme bug.
+#
+# Maestro can't toggle iOS appearance, so this script bridges the gap:
+# toggle appearance via xcrun simctl, then run Maestro to verify the sidebar
+# still works. Runs N iterations to catch intermittent failures.
+#
+# Usage:
+#   bash packages/app/maestro/test-sidebar-theme.sh [iterations] [wait_seconds]
+#   bash packages/app/maestro/test-sidebar-theme.sh 6 1
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/../../.." && pwd)"
+FLOW="$REPO_ROOT/packages/app/maestro/sidebar-theme-repro.yaml"
+OUT_DIR="/tmp/sidebar-theme-test-$(date +%s)"
+ITERATIONS="${1:-3}"
+WAIT_SECS="${2:-1}"
+mkdir -p "$OUT_DIR"
+
+echo "=== Sidebar Theme Bug Verification ==="
+echo "Output dir: $OUT_DIR"
+echo "Iterations: $ITERATIONS, wait after toggle: ${WAIT_SECS}s"
+
+FAILURES=0
+
+for i in $(seq 1 "$ITERATIONS"); do
+  echo ""
+  echo "========== Iteration $i / $ITERATIONS =========="
+
+  CURRENT=$(xcrun simctl ui booted appearance 2>&1 | tr -d '[:space:]')
+  echo "Current appearance: $CURRENT"
+
+  if [ "$CURRENT" = "dark" ]; then
+    xcrun simctl ui booted appearance light
+    echo "Switched to light mode"
+  else
+    xcrun simctl ui booted appearance dark
+    echo "Switched to dark mode"
+  fi
+
+  echo "Waiting ${WAIT_SECS}s..."
+  sleep "$WAIT_SECS"
+
+  ITER_DIR="$OUT_DIR/iter-$i"
+  mkdir -p "$ITER_DIR"
+
+  # Run maestro from the output dir so takeScreenshot artifacts land there
+  if (cd "$ITER_DIR" && maestro test "$FLOW") 2>&1 | tee "$ITER_DIR/test.log"; then
+    echo "  -> PASS (iteration $i)"
+  else
+    echo "  -> FAIL (iteration $i) — bug reproduced!"
+    FAILURES=$((FAILURES + 1))
+    xcrun simctl io booted screenshot "$ITER_DIR/failure-state.png" 2>/dev/null || true
+  fi
+done
+
+# Restore to dark mode
+xcrun simctl ui booted appearance dark
+
+echo ""
+echo "=== Summary: $FAILURES failures out of $ITERATIONS iterations ==="
+echo "Output: $OUT_DIR"

packages/app/src/app/_layout.tsx

@@ -420,14 +420,28 @@ function MobileGestureWrapper({
   const mobileView = usePanelStore((state) => state.mobileView);
   const openAgentList = usePanelStore((state) => state.openAgentList);
   const horizontalScroll = useHorizontalScrollOptional();
-  const { translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing } =
-    useSidebarAnimation();
+  const {
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    animateToOpen,
+    animateToClose,
+    isGesturing,
+    gestureAnimatingRef,
+    openGestureRef,
+  } = useSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const openGestureEnabled = chromeEnabled && mobileView === "agent";
 
+  const handleGestureOpen = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    openAgentList();
+  }, [openAgentList, gestureAnimatingRef]);
+
   const openGesture = useMemo(
     () =>
       Gesture.Pan()
+        .withRef(openGestureRef)
         .enabled(openGestureEnabled)
         .manualActivation(true)
         .failOffsetY([-10, 10])
@@ -470,7 +484,7 @@ function MobileGestureWrapper({
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
           if (shouldOpen) {
             animateToOpen();
-            runOnJS(openAgentList)();
+            runOnJS(handleGestureOpen)();
           } else {
             animateToClose();
           }
@@ -485,8 +499,9 @@ function MobileGestureWrapper({
       backdropOpacity,
       animateToOpen,
       animateToClose,
-      openAgentList,
+      handleGestureOpen,
       isGesturing,
+      openGestureRef,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
     ],

packages/app/src/components/explorer-sidebar.tsx

@@ -1,5 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, Text, Pressable, Platform, useWindowDimensions } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  Platform,
+  useWindowDimensions,
+  StyleSheet as RNStyleSheet,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useIsFocused } from "@react-navigation/native";
 import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from "react-native-reanimated";
@@ -81,6 +88,7 @@ export function ExplorerSidebar({
     animateToOpen,
     animateToClose,
     isGesturing,
+    gestureAnimatingRef,
     closeGestureRef,
   } = useExplorerSidebarAnimation();
 
@@ -101,6 +109,11 @@ export function ExplorerSidebar({
     [closeToAgent, desktopFileExplorerOpen, isOpen, mobileView],
   );
 
+  const handleCloseFromGesture = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    closeToAgent();
+  }, [closeToAgent, gestureAnimatingRef]);
+
   const enableSidebarCloseGesture = isMobile && isOpen;
 
   const handleTabPress = useCallback(
@@ -175,7 +188,7 @@ export function ExplorerSidebar({
           });
           if (shouldClose) {
             animateToClose();
-            runOnJS(handleClose)("swipe-close-gesture");
+            runOnJS(handleCloseFromGesture)();
           } else {
             animateToOpen();
           }
@@ -190,7 +203,7 @@ export function ExplorerSidebar({
       backdropOpacity,
       animateToOpen,
       animateToClose,
-      handleClose,
+      handleCloseFromGesture,
       isGesturing,
       closeGestureRef,
       closeTouchStartX,
@@ -251,18 +264,13 @@ export function ExplorerSidebar({
     return (
       <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
         {/* Backdrop */}
-        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-          <Pressable
-            style={styles.backdropPressable}
-            onPress={() => handleClose("backdrop-press")}
-          />
-        </Animated.View>
+        <Animated.View style={[explorerStaticStyles.backdrop, backdropAnimatedStyle]} />
 
         <GestureDetector gesture={closeGesture} touchAction="pan-y">
           <Animated.View
             style={[
-              styles.mobileSidebar,
-              { width: windowWidth, paddingTop: insets.top },
+              explorerStaticStyles.mobileSidebar,
+              { width: windowWidth, paddingTop: insets.top, backgroundColor: theme.colors.surfaceSidebar },
               sidebarAnimatedStyle,
               mobileKeyboardInsetStyle,
             ]}
@@ -291,25 +299,27 @@ export function ExplorerSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }]}>
-      {/* Resize handle - absolutely positioned over left border */}
-      <GestureDetector gesture={resizeGesture}>
-        <View
-          style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
-        />
-      </GestureDetector>
+    <Animated.View style={[explorerStaticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }]}>
+      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
+        {/* Resize handle - absolutely positioned over left border */}
+        <GestureDetector gesture={resizeGesture}>
+          <View
+            style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
+          />
+        </GestureDetector>
 
-      <SidebarContent
-        activeTab={explorerTab}
-        onTabPress={handleTabPress}
-        onClose={() => handleClose("desktop-close-button")}
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceRoot}
-        isGit={isGit}
-        isMobile={false}
-        onOpenFile={onOpenFile}
-      />
+        <SidebarContent
+          activeTab={explorerTab}
+          onTabPress={handleTabPress}
+          onClose={() => handleClose("desktop-close-button")}
+          serverId={serverId}
+          workspaceId={workspaceId}
+          workspaceRoot={workspaceRoot}
+          isGit={isGit}
+          isMobile={false}
+          onOpenFile={onOpenFile}
+        />
+      </View>
     </Animated.View>
   );
 }
@@ -400,24 +410,28 @@ function SidebarContent({
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+// Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
+// avoid the "Unable to find node on an unmounted component" crash when Unistyles
+// tries to patch the native node that Reanimated also manages.
+const explorerStaticStyles = RNStyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...RNStyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
-  backdropPressable: {
-    flex: 1,
-  },
   mobileSidebar: {
-    position: "absolute",
+    position: "absolute" as const,
     top: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surfaceSidebar,
-    overflow: "hidden",
+    overflow: "hidden" as const,
   },
   desktopSidebar: {
-    position: "relative",
+    position: "relative" as const,
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  desktopSidebarBorder: {
     borderLeftWidth: 1,
     borderLeftColor: theme.colors.border,
     backgroundColor: theme.colors.surfaceSidebar,

packages/app/src/components/left-sidebar.tsx

@@ -10,7 +10,14 @@ import {
   type RefObject,
   type SetStateAction,
 } from "react";
-import { View, Pressable, Text, Platform, useWindowDimensions } from "react-native";
+import {
+  View,
+  Pressable,
+  Text,
+  Platform,
+  useWindowDimensions,
+  StyleSheet as RNStyleSheet,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   useAnimatedStyle,
@@ -370,14 +377,16 @@ function MobileSidebar({
     animateToOpen,
     animateToClose,
     isGesturing,
+    gestureAnimatingRef,
     closeGestureRef,
   } = useSidebarAnimation();
   const closeTouchStartX = useSharedValue(0);
   const closeTouchStartY = useSharedValue(0);
 
-  const handleClose = useCallback(() => {
+  const handleCloseFromGesture = useCallback(() => {
+    gestureAnimatingRef.current = true;
     closeToAgent();
-  }, [closeToAgent]);
+  }, [closeToAgent, gestureAnimatingRef]);
 
   const handleViewMore = useCallback(() => {
     if (!activeServerId) {
@@ -452,7 +461,7 @@ function MobileSidebar({
           const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
           if (shouldClose) {
             animateToClose();
-            runOnJS(handleClose)();
+            runOnJS(handleCloseFromGesture)();
           } else {
             animateToOpen();
           }
@@ -471,7 +480,7 @@ function MobileSidebar({
       backdropOpacity,
       animateToClose,
       animateToOpen,
-      handleClose,
+      handleCloseFromGesture,
     ],
   );
 
@@ -498,13 +507,11 @@ function MobileSidebar({
 
   return (
     <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
-      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-        <Pressable style={styles.backdropPressable} onPress={handleClose} />
-      </Animated.View>
+      <Animated.View style={[staticStyles.backdrop, backdropAnimatedStyle]} />
 
       <GestureDetector gesture={closeGesture} touchAction="pan-y">
         <Animated.View
-          style={[styles.mobileSidebar, mobileSidebarInsetStyle, sidebarAnimatedStyle]}
+          style={[staticStyles.mobileSidebar, mobileSidebarInsetStyle, sidebarAnimatedStyle, { backgroundColor: theme.colors.surfaceSidebar }]}
           pointerEvents="auto"
         >
           <View style={styles.sidebarContent} pointerEvents="auto">
@@ -526,7 +533,7 @@ function MobileSidebar({
                 projects={projects}
                 isRefreshing={isManualRefresh && isRevalidating}
                 onRefresh={handleRefresh}
-                onWorkspacePress={closeToAgent}
+                onWorkspacePress={() => closeToAgent()}
                 onAddProject={handleOpenProject}
                 parentGestureRef={closeGestureRef}
               />
@@ -688,7 +695,8 @@ function DesktopSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
+    <Animated.View style={[staticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
+      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
       <View style={styles.sidebarDragArea}>
         <TitlebarDragRegion />
         {padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
@@ -796,32 +804,37 @@ function DesktopSidebar({
           style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
         />
       </GestureDetector>
+      </View>
     </Animated.View>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+// Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
+// avoid the "Unable to find node on an unmounted component" crash when Unistyles
+// tries to patch the native node that Reanimated also manages.
+const staticStyles = RNStyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...RNStyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
-  backdropPressable: {
-    flex: 1,
-  },
   mobileSidebar: {
-    position: "absolute",
+    position: "absolute" as const,
     top: 0,
     left: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surfaceSidebar,
-    overflow: "hidden",
+    overflow: "hidden" as const,
   },
+  desktopSidebar: {
+    position: "relative" as const,
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
   sidebarContent: {
     flex: 1,
     minHeight: 0,
   },
-  desktopSidebar: {
-    position: "relative",
+  desktopSidebarBorder: {
     borderRightWidth: 1,
     borderRightColor: theme.colors.border,
     backgroundColor: theme.colors.surfaceSidebar,

packages/app/src/contexts/explorer-sidebar-animation-context.tsx

@@ -18,6 +18,8 @@ interface ExplorerSidebarAnimationContextValue {
   animateToOpen: () => void;
   animateToClose: () => void;
   isGesturing: SharedValue<boolean>;
+  gestureAnimatingRef: React.MutableRefObject<boolean>;
+  openGestureRef: React.MutableRefObject<GestureType | undefined>;
   closeGestureRef: React.MutableRefObject<GestureType | undefined>;
 }
 
@@ -39,6 +41,8 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
   const translateX = useSharedValue(initialTargets.translateX);
   const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
+  const gestureAnimatingRef = useRef(false);
+  const openGestureRef = useRef<GestureType | undefined>(undefined);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
@@ -61,6 +65,11 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
       return;
     }
 
+    if (gestureAnimatingRef.current) {
+      gestureAnimatingRef.current = false;
+      return;
+    }
+
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
@@ -123,6 +132,8 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
         animateToOpen,
         animateToClose,
         isGesturing,
+        gestureAnimatingRef,
+        openGestureRef,
         closeGestureRef,
       }}
     >

packages/app/src/contexts/sidebar-animation-context.tsx

@@ -27,6 +27,8 @@ interface SidebarAnimationContextValue {
   animateToOpen: () => void;
   animateToClose: () => void;
   isGesturing: SharedValue<boolean>;
+  gestureAnimatingRef: React.MutableRefObject<boolean>;
+  openGestureRef: React.MutableRefObject<GestureType | undefined>;
   closeGestureRef: React.MutableRefObject<GestureType | undefined>;
 }
 
@@ -46,6 +48,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
   const translateX = useSharedValue(initialTargets.translateX);
   const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
+  const gestureAnimatingRef = useRef(false);
+  const openGestureRef = useRef<GestureType | undefined>(undefined);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
@@ -68,6 +72,14 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       return;
     }
 
+    // Gesture onEnd already started the animation on the UI thread — skip to avoid
+    // a second competing withTiming that can desync translateX and backdropOpacity
+    // after a provider remount (e.g. theme change).
+    if (gestureAnimatingRef.current) {
+      gestureAnimatingRef.current = false;
+      return;
+    }
+
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
@@ -123,6 +135,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      gestureAnimatingRef,
+      openGestureRef,
       closeGestureRef,
     }),
     [
@@ -132,6 +146,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      gestureAnimatingRef,
+      openGestureRef,
       closeGestureRef,
     ],
   );

packages/app/src/hooks/use-explorer-open-gesture.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
@@ -9,14 +9,28 @@ interface UseExplorerOpenGestureParams {
 }
 
 export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestureParams) {
-  const { translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing } =
-    useExplorerSidebarAnimation();
+  const {
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    animateToOpen,
+    animateToClose,
+    isGesturing,
+    gestureAnimatingRef,
+    openGestureRef,
+  } = useExplorerSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const touchStartY = useSharedValue(0);
 
+  const handleGestureOpen = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    onOpen();
+  }, [onOpen, gestureAnimatingRef]);
+
   return useMemo(
     () =>
       Gesture.Pan()
+        .withRef(openGestureRef)
         .enabled(enabled)
         .manualActivation(true)
         .onTouchesDown((event) => {
@@ -78,7 +92,7 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
           const shouldOpen = shouldOpenByPosition || shouldOpenByVelocity;
           if (shouldOpen) {
             animateToOpen();
-            runOnJS(onOpen)();
+            runOnJS(handleGestureOpen)();
           } else {
             animateToClose();
           }
@@ -94,7 +108,8 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
       animateToOpen,
       animateToClose,
       isGesturing,
-      onOpen,
+      openGestureRef,
+      handleGestureOpen,
       touchStartX,
       touchStartY,
     ],