fix(app): reduce unnecessary re-renders in sidebar and workspace screens

- Gate WorkspaceScreen on useIsFocused to prevent background rendering
- Stabilize SidebarAnimationProvider context with useCallback/useMemo
- Wrap LeftSidebar in memo and memoize gesture/styles
- Extract inline style objects in AppContainer to stable references

packages/app/src/app/_layout.tsx

@@ -252,6 +252,9 @@ function QueryProvider({ children }: { children: ReactNode }) {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }
 
+const rowStyle = { flex: 1, flexDirection: "row" } as const;
+const flexStyle = { flex: 1 } as const;
+
 interface AppContainerProps {
   children: ReactNode;
   selectedAgentId?: string;
@@ -377,11 +380,16 @@ function AppContainer({
     ]
   );
 
+  const containerStyle = useMemo(
+    () => ({ flex: 1 as const, backgroundColor: theme.colors.surface0 }),
+    [theme.colors.surface0]
+  );
+
   const content = (
-    <View style={{ flex: 1, backgroundColor: theme.colors.surface0 }}>
+    <View style={containerStyle}>
-      <View style={{ flex: 1, flexDirection: "row" }}>
+      <View style={rowStyle}>
         {!isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
-        <View style={{ flex: 1 }}>
+        <View style={flexStyle}>
           {children}
         </View>
       </View>

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, useEffect, useRef, useSyncExternalStore } from 'react'
+import { memo, useCallback, useMemo, useState, useEffect, useRef, useSyncExternalStore } from 'react'
 import { View, Pressable, Text, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Animated, {
@@ -39,7 +39,7 @@ interface LeftSidebarProps {
   selectedAgentId?: string
 }
 
-export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarProps) {
+export const LeftSidebar = memo(function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarProps) {
   const { theme } = useUnistyles()
   const insets = useSafeAreaInsets()
   const isMobile = UnistylesRuntime.breakpoint === 'xs' || UnistylesRuntime.breakpoint === 'sm'
@@ -207,7 +207,9 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
   )
 
   // Close gesture (swipe left to close when sidebar is open)
-  const closeGesture = Gesture.Pan()
+  const closeGesture = useMemo(
+    () =>
+      Gesture.Pan()
         .withRef(closeGestureRef)
         .enabled(isOpen)
         // Use manual activation so child views keep touch streams unless we detect
@@ -276,7 +278,32 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
         })
         .onFinalize(() => {
           isGesturing.value = false
-    })
+        }),
+    [
+      isOpen,
+      closeGestureRef,
+      closeTouchStartX,
+      closeTouchStartY,
+      isGesturing,
+      isMobile,
+      windowWidth,
+      translateX,
+      backdropOpacity,
+      animateToClose,
+      animateToOpen,
+      handleClose,
+    ]
+  )
+
+  const mobileSidebarInsetStyle = useMemo(
+    () => ({ width: windowWidth, paddingTop: insets.top, paddingBottom: insets.bottom }),
+    [windowWidth, insets.top, insets.bottom]
+  )
+
+  const hostStatusDotStyle = useMemo(
+    () => [styles.hostStatusDot, { backgroundColor: activeHostStatusColor }],
+    [activeHostStatusColor]
+  )
 
   const sidebarAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
@@ -303,7 +330,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
           <Animated.View
             style={[
               styles.mobileSidebar,
-              { width: windowWidth, paddingTop: insets.top, paddingBottom: insets.bottom },
+              mobileSidebarInsetStyle,
               sidebarAnimatedStyle,
             ]}
             pointerEvents="auto"
@@ -502,7 +529,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
             onPress={() => setIsHostPickerOpen(true)}
             disabled={hostOptions.length === 0}
           >
-            <View style={[styles.hostStatusDot, { backgroundColor: activeHostStatusColor }]} />
+            <View style={hostStatusDotStyle} />
             <Text style={styles.hostTriggerText} numberOfLines={1}>
               {activeHostLabel}
             </Text>
@@ -568,7 +595,7 @@ export function LeftSidebar({ selectedAgentId: _selectedAgentId }: LeftSidebarPr
       </View>
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create((theme) => ({
   backdrop: {

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

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, type ReactNode } from "react";
 import { useWindowDimensions } from "react-native";
 import {
   useSharedValue,
@@ -78,7 +78,7 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
     }
   }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing]);
 
-  const animateToOpen = () => {
+  const animateToOpen = useCallback(() => {
     "worklet";
     translateX.value = withTiming(0, {
       duration: ANIMATION_DURATION,
@@ -88,9 +88,9 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       duration: ANIMATION_DURATION,
       easing: ANIMATION_EASING,
     });
-  };
+  }, [translateX, backdropOpacity]);
 
-  const animateToClose = () => {
+  const animateToClose = useCallback(() => {
     "worklet";
     translateX.value = withTiming(-windowWidth, {
       duration: ANIMATION_DURATION,
@@ -100,11 +100,10 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       duration: ANIMATION_DURATION,
       easing: ANIMATION_EASING,
     });
-  };
+  }, [translateX, backdropOpacity, windowWidth]);
 
-  return (
+  const value = useMemo<SidebarAnimationContextValue>(
-    <SidebarAnimationContext.Provider
+    () => ({
-      value={{
       translateX,
       backdropOpacity,
       windowWidth,
@@ -112,8 +111,12 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToClose,
       isGesturing,
       closeGestureRef,
-      }}
+    }),
-    >
+    [translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing, closeGestureRef]
+  );
+
+  return (
+    <SidebarAnimationContext.Provider value={value}>
       {children}
     </SidebarAnimationContext.Provider>
   );

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -519,6 +519,12 @@ export function WorkspaceScreen({
   workspaceId,
   openIntent,
 }: WorkspaceScreenProps) {
+  const isFocused = useIsFocused();
+
+  if (!isFocused) {
+    return <View style={{ flex: 1 }} />;
+  }
+
   return (
     <ExplorerSidebarAnimationProvider>
       <WorkspaceScreenContent
@@ -539,7 +545,6 @@ function WorkspaceScreenContent({
   const isDarkMode = useColorScheme() === "dark";
   const mainBackgroundColor = isDarkMode ? theme.colors.surface1 : theme.colors.surface0;
   const toast = useToast();
-  const isScreenFocused = useIsFocused();
   const isMobile =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
 
@@ -1773,7 +1778,7 @@ function WorkspaceScreenContent({
     ] as const,
     enabled: Boolean(normalizedServerId && normalizedWorkspaceId),
     priority: 100,
-    isActive: () => isScreenFocused,
+    isActive: () => true,
     handle: handleWorkspaceTabAction,
   });
 
@@ -1794,7 +1799,7 @@ function WorkspaceScreenContent({
     ] as const,
     enabled: Boolean(normalizedServerId && normalizedWorkspaceId),
     priority: 100,
-    isActive: () => isScreenFocused,
+    isActive: () => true,
     handle: handleWorkspacePaneAction,
   });