fix(app): preserve mobile sidebar scroll position when reopening (#6058)

* fix(app): preserve mobile sidebar scroll position when reopening

Keep hidden native overlays laid out so Android touch cancellation cannot spring retained scroll offsets through a zero scroll range. Hide and gate touch input on the UI thread to preserve panel motion during JS stalls.

* docs(app): quote sidebar replay workspace examples

* test(website): read plugin HTML without waiting for remote images

* test(website): exercise built worker in browser checks

The ordered plugin spec reproduces a no-response navigation timeout against a cold development server. Build and preview the published worker for E2E checks; preserve the original content and metadata assertions.

docs/mobile-panels.md

@@ -32,8 +32,10 @@ The UI worklet owns transient motion:
 
 React publishes the active panel only when the canonical target and the UI-thread position agree at
 the final anchor. Retained content never observes gesture previews, progress, or an unsettled target.
-The gesture hosts stay mounted; worklets reveal their retained overlays through native styles while
-React owns pointer events and accessibility. Native panel hosts and their dependent draggable lists
+The gesture hosts stay mounted. Native worklets own overlay opacity and pointer events while
+React owns settled panel activity and accessibility. Keep hidden native overlays laid out: collapsing
+their scroll ranges makes Android spring retained offsets back to zero during touch cancellation or
+release. Native panel hosts and their dependent draggable lists
 also retain identity across appearance hydration and settings changes. Do not wrap those hosts in
 appearance keys; see [Unistyles appearance boundaries](unistyles.md#runtime-theme-patching-for-user-preferences).
 

docs/mobile-testing.md

@@ -65,6 +65,26 @@ Metro, and device through the `PASEO_COMPOSER_KEYBOARD_*` variables in
 the headless input helper cannot verify the
 [visible composer constraints](floating-panels.md#gotcha-3--keyboard-layout-and-portal-anchors).
 
+The Android sidebar scroll-retention flow requires a connected host with enough
+workspaces to overflow the compact sidebar. Pass `TOP_WORKSPACE` and
+`SCROLLED_WORKSPACE` as the `serverId:workspaceId` suffixes of their sidebar row
+IDs. Choose one row near the top and one initially below the viewport. Replace
+the quoted example values below with those IDs. Start in a workspace with the
+sidebar closed and keep the list stable during the run. The same flow checks
+reopening by swipe and button:
+
+```bash
+agent-device replay packages/app/e2e/mobile/agent-device/native-sidebar-scroll-retention.android.yaml \
+  --maestro --platform android --serial emulator-5556 --metro-port 8099 \
+  --env TOP_WORKSPACE='server-id:top-workspace-id' \
+  --env SCROLLED_WORKSPACE='server-id:scrolled-workspace-id'
+```
+
+Pass this checkout's Metro port so the debug app uses the intended bundle.
+For iOS, compare the scrolled row's screen bounds and screenshots across reopening.
+Agent Device's iOS visibility lookup includes offscreen scroll descendants, so
+its `assertNotVisible` cannot establish the starting scroll position for this flow.
+
 On a Play-image emulator, disable Gmail and Calendar first. Their welcome
 screens launch on their own, take input focus, and the run fails with
 `IME did not become visible` while the app still looks focused:

packages/app/e2e/mobile/agent-device/native-sidebar-scroll-retention.android.yaml

@@ -0,0 +1,4 @@
+appId: sh.paseo.debug
+---
+- launchApp
+- runFlow: ../../../maestro/sidebar-scroll-retention.yaml

packages/app/maestro/sidebar-scroll-retention.yaml

@@ -0,0 +1,53 @@
+appId: sh.paseo.debug
+---
+# Start in a workspace with the sidebar closed. Both workspace IDs come from
+# the connected host: TOP_WORKSPACE is near the top; SCROLLED_WORKSPACE starts
+# below the viewport. The list must remain unchanged throughout the flow.
+- tapOn:
+    id: menu-button
+- scrollUntilVisible:
+    element:
+      id: sidebar-workspace-row-${TOP_WORKSPACE}
+    direction: UP
+    timeout: 60000
+- assertNotVisible:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- scrollUntilVisible:
+    element:
+      id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+    direction: DOWN
+    timeout: 60000
+- waitForAnimationToEnd
+- assertVisible:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- assertNotVisible:
+    id: sidebar-workspace-row-${TOP_WORKSPACE}
+- tapOn:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- waitForAnimationToEnd
+- assertNotVisible:
+    id: sidebar-project-workspace-list-scroll
+- swipe:
+    start: "5%,50%"
+    end: "90%,50%"
+    duration: 300
+- waitForAnimationToEnd
+- assertVisible:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- assertNotVisible:
+    id: sidebar-workspace-row-${TOP_WORKSPACE}
+
+# Selecting the current workspace removes workspace switching as a cause.
+# Reopening by button removes horizontal movement as a cause.
+- tapOn:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- waitForAnimationToEnd
+- tapOn:
+    id: menu-button
+- waitForAnimationToEnd
+- assertVisible:
+    id: sidebar-workspace-row-${SCROLLED_WORKSPACE}
+- assertNotVisible:
+    id: sidebar-workspace-row-${TOP_WORKSPACE}
+- tapOn:
+    id: sidebar-close

packages/app/src/mobile-panels/presentation.tsx

@@ -42,7 +42,15 @@ export function MobilePanelOverlay({
 
   const overlayAnimatedStyle = useAnimatedStyle(() => {
     const isVisible = isLeft ? position.value < 0 : position.value > 0;
-    return { display: isVisible ? ("flex" as const) : ("none" as const) };
+    if (isWeb) {
+      return { display: isVisible ? ("flex" as const) : ("none" as const) };
+    }
+    // Preserve native scroll ranges while hidden. Collapsing layout makes Android
+    // spring retained scroll offsets back to zero on touch cancellation or release.
+    return {
+      opacity: isVisible ? 1 : 0,
+      pointerEvents: isVisible ? ("box-none" as const) : ("none" as const),
+    };
   }, [isLeft]);
 
   const positionedPanelStyle = isLeft ? styles.leftPanel : styles.rightPanel;
@@ -79,10 +87,7 @@ export function MobilePanelOverlay({
         pointerEvents={overlayPointerEvents}
         style={styles.overlay}
       >
-        <Animated.View
-          pointerEvents={overlayPointerEvents}
-          style={[styles.overlay, overlayAnimatedStyle]}
-        >
+        <Animated.View style={[styles.overlay, overlayAnimatedStyle]}>
           <Pressable
             accessible={false}
             accessibilityElementsHidden

packages/website/playwright.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   webServer: process.env.WEBSITE_TEST_URL
     ? undefined
     : {
-        command: "npm run dev -- --host 127.0.0.1 --port 8187 --strictPort",
+        command: "npm run build && npm run preview -- --host 127.0.0.1 --port 8187 --strictPort",
         url: baseURL,
         reuseExistingServer: !process.env.CI,
       },