fix(app): handle iOS backgrounding - resync session and reconnect SSE on resume

athal7 · athal7 · commit 141724259ecb · 2026-02-01T15:38:54.000-06:00
- Add visibilitychange listener in session.tsx to resync when tab becomes visible - Refactor global-sdk.tsx SSE consumption with auto-reconnect on clean disconnect - Use exponential backoff (1s-30s) and pause reconnects while hidden - Add visibility tracking utility to detect recent backgrounding - Gate error toasts in prompt-input.tsx when failure likely due to backgrounding - Check if message landed before removing optimistic UI on resume Fixes anomalyco#10721
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
@@ -58,6 +58,7 @@ import { createOpencodeClient, type Message, type Part } from "@opencode-ai/sdk/
 import { Binary } from "@opencode-ai/util/binary"
 import { showToast } from "@opencode-ai/ui/toast"
 import { base64Encode } from "@opencode-ai/util/encode"
+import { wasRecentlyBackgrounded } from "@/utils/visibility"
 
 const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
 const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
@@ -1258,10 +1259,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           command: text,
         })
         .catch((err) => {
-          showToast({
-            title: language.t("prompt.toast.shellSendFailed.title"),
-            description: errorMessage(err),
-          })
+          // Suppress toast if failure likely due to iOS backgrounding
+          if (!wasRecentlyBackgrounded()) {
+            showToast({
+              title: language.t("prompt.toast.shellSendFailed.title"),
+              description: errorMessage(err),
+            })
+          }
           restoreInput()
         })
       return
@@ -1290,10 +1294,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             })),
           })
           .catch((err) => {
-            showToast({
-              title: language.t("prompt.toast.commandSendFailed.title"),
-              description: errorMessage(err),
-            })
+            // Suppress toast if failure likely due to iOS backgrounding
+            if (!wasRecentlyBackgrounded()) {
+              showToast({
+                title: language.t("prompt.toast.commandSendFailed.title"),
+                description: errorMessage(err),
+              })
+            }
             restoreInput()
           })
         return
@@ -1591,11 +1598,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       })
     }
 
-    void send().catch((err) => {
+    void send().catch(async (err) => {
       pending.delete(session.id)
       if (sessionDirectory === projectDirectory) {
         sync.set("session_status", session.id, { type: "idle" })
       }
+      // If we just resumed from background, the request may have actually succeeded
+      // Resync to check before showing error and removing optimistic message
+      if (wasRecentlyBackgrounded()) {
+        await sync.session.sync(session.id).catch(() => {})
+        // Check if message actually landed
+        const messages = sync.data.message[session.id] ?? []
+        const found = messages.find((m) => m.id === messageID)
+        if (found) return // Message was delivered, don't show error
+      }
       showToast({
         title: language.t("prompt.toast.promptSendFailed.title"),
         description: errorMessage(err),
diff --git a/packages/app/src/context/global-sdk.tsx b/packages/app/src/context/global-sdk.tsx
@@ -67,28 +67,83 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       timer = setTimeout(flush, Math.max(0, 16 - elapsed))
     }
 
-    void (async () => {
-      const events = await eventSdk.global.event()
-      let yielded = Date.now()
-      for await (const event of events.stream) {
-        const directory = event.directory ?? "global"
-        const payload = event.payload
-        const k = key(directory, payload)
-        if (k) {
-          const i = coalesced.get(k)
-          if (i !== undefined) {
-            queue[i] = undefined
+    // SSE reconnection with exponential backoff (fixes iOS backgrounding)
+    const connectSSE = async () => {
+      const BASE_DELAY = 1000
+      const MAX_DELAY = 30000
+      let attempt = 0
+
+      while (!abort.signal.aborted) {
+        try {
+          const events = await eventSdk.global.event()
+          attempt = 0 // Reset on successful connection
+
+          let yielded = Date.now()
+          for await (const event of events.stream) {
+            const directory = event.directory ?? "global"
+            const payload = event.payload
+            const k = key(directory, payload)
+            if (k) {
+              const i = coalesced.get(k)
+              if (i !== undefined) {
+                queue[i] = undefined
+              }
+              coalesced.set(k, queue.length)
+            }
+            queue.push({ directory, payload })
+            schedule()
+
+            if (Date.now() - yielded < 8) continue
+            yielded = Date.now()
+            await new Promise<void>((resolve) => setTimeout(resolve, 0))
           }
-          coalesced.set(k, queue.length)
+
+          // Stream ended cleanly (e.g., iOS backgrounding) - reconnect
+          if (abort.signal.aborted) break
+        } catch {
+          // Connection error - will retry with backoff
+          if (abort.signal.aborted) break
         }
-        queue.push({ directory, payload })
-        schedule()
 
-        if (Date.now() - yielded < 8) continue
-        yielded = Date.now()
-        await new Promise<void>((resolve) => setTimeout(resolve, 0))
+        // Exponential backoff before reconnecting
+        attempt++
+        const delay = Math.min(BASE_DELAY * 2 ** (attempt - 1), MAX_DELAY)
+
+        // Wait for delay, but also listen for abort
+        await new Promise<void>((resolve) => {
+          const timeout = setTimeout(resolve, delay)
+          const cleanup = () => {
+            clearTimeout(timeout)
+            resolve()
+          }
+          abort.signal.addEventListener("abort", cleanup, { once: true })
+        })
+
+        // If hidden, wait until visible before reconnecting (saves resources)
+        if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+          await new Promise<void>((resolve) => {
+            const handler = () => {
+              if (document.visibilityState === "visible") {
+                document.removeEventListener("visibilitychange", handler)
+                resolve()
+              }
+            }
+            document.addEventListener("visibilitychange", handler)
+            // Also resolve if aborted
+            abort.signal.addEventListener(
+              "abort",
+              () => {
+                document.removeEventListener("visibilitychange", handler)
+                resolve()
+              },
+              { once: true },
+            )
+          })
+        }
       }
-    })()
+    }
+
+    void connectSSE()
       .finally(flush)
       .catch(() => undefined)
 
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
@@ -551,6 +551,25 @@ export default function Page() {
     sync.session.sync(params.id)
   })
 
+  // Resync session when tab becomes visible after being backgrounded (iOS fix)
+  onMount(() => {
+    let lastHidden = 0
+    const handleVisibility = () => {
+      if (document.visibilityState === "hidden") {
+        lastHidden = Date.now()
+        return
+      }
+      // Only resync if we were hidden for more than 1 second
+      const wasHiddenLongEnough = lastHidden > 0 && Date.now() - lastHidden > 1000
+      if (!wasHiddenLongEnough) return
+      const sessionID = params.id
+      if (!sessionID) return
+      sync.session.sync(sessionID)
+    }
+    document.addEventListener("visibilitychange", handleVisibility)
+    onCleanup(() => document.removeEventListener("visibilitychange", handleVisibility))
+  })
+
   createEffect(() => {
     if (!view().terminal.opened()) {
       setUi("autoCreated", false)
diff --git a/packages/app/src/utils/visibility.test.ts b/packages/app/src/utils/visibility.test.ts
@@ -0,0 +1,192 @@
+import { describe, expect, test, beforeEach, afterEach } from "bun:test"
+
+// Test the visibility tracking logic by simulating visibilitychange events
+// The module registers a listener on document.visibilitychange
+
+describe("visibility module", () => {
+  describe("initial state", () => {
+    test("wasRecentlyBackgrounded returns false when never hidden", async () => {
+      const { wasRecentlyBackgrounded } = await import("./visibility")
+      expect(wasRecentlyBackgrounded()).toBe(false)
+    })
+
+    test("getLastHiddenAt returns 0 when never hidden", async () => {
+      const { getLastHiddenAt } = await import("./visibility")
+      expect(getLastHiddenAt()).toBe(0)
+    })
+
+    test("isHidden returns false when document is visible", async () => {
+      const { isHidden } = await import("./visibility")
+      // In test environment, document.visibilityState is "visible" by default
+      expect(isHidden()).toBe(false)
+    })
+  })
+
+  describe("visibilitychange event handling", () => {
+    test("responds to visibilitychange events", async () => {
+      const { getLastHiddenAt, wasRecentlyBackgrounded } = await import("./visibility")
+
+      // Simulate hiding the page
+      Object.defineProperty(document, "visibilityState", {
+        value: "hidden",
+        writable: true,
+        configurable: true,
+      })
+      document.dispatchEvent(new Event("visibilitychange"))
+
+      const hiddenAt = getLastHiddenAt()
+      expect(hiddenAt).toBeGreaterThan(0)
+
+      // Small delay then simulate showing
+      await new Promise((r) => setTimeout(r, 50))
+
+      Object.defineProperty(document, "visibilityState", {
+        value: "visible",
+        writable: true,
+        configurable: true,
+      })
+      document.dispatchEvent(new Event("visibilitychange"))
+
+      // Should now be "recently backgrounded" since we just came back
+      expect(wasRecentlyBackgrounded(5000)).toBe(true)
+      expect(wasRecentlyBackgrounded(10)).toBe(true) // Very short threshold
+    })
+
+    test("wasRecentlyBackgrounded respects threshold", async () => {
+      const { wasRecentlyBackgrounded } = await import("./visibility")
+
+      // Simulate hide
+      Object.defineProperty(document, "visibilityState", {
+        value: "hidden",
+        writable: true,
+        configurable: true,
+      })
+      document.dispatchEvent(new Event("visibilitychange"))
+
+      // Wait longer than a small threshold
+      await new Promise((r) => setTimeout(r, 100))
+
+      // Simulate show
+      Object.defineProperty(document, "visibilityState", {
+        value: "visible",
+        writable: true,
+        configurable: true,
+      })
+      document.dispatchEvent(new Event("visibilitychange"))
+
+      // With 5000ms threshold, should still be true (we're within 5s of becoming visible)
+      expect(wasRecentlyBackgrounded(5000)).toBe(true)
+
+      // Wait past the threshold
+      await new Promise((r) => setTimeout(r, 150))
+
+      // With 100ms threshold, should now be false (more than 100ms since visible)
+      expect(wasRecentlyBackgrounded(100)).toBe(false)
+    })
+  })
+
+  describe("isHidden reflects document state", () => {
+    test("returns true when document is hidden", async () => {
+      const { isHidden } = await import("./visibility")
+
+      Object.defineProperty(document, "visibilityState", {
+        value: "hidden",
+        writable: true,
+        configurable: true,
+      })
+
+      expect(isHidden()).toBe(true)
+    })
+
+    test("returns false when document is visible", async () => {
+      const { isHidden } = await import("./visibility")
+
+      Object.defineProperty(document, "visibilityState", {
+        value: "visible",
+        writable: true,
+        configurable: true,
+      })
+
+      expect(isHidden()).toBe(false)
+    })
+  })
+})
+
+describe("iOS backgrounding simulation", () => {
+  test("simulates iOS Safari background/foreground cycle", async () => {
+    const { wasRecentlyBackgrounded, getLastHiddenAt, isHidden } = await import("./visibility")
+
+    // Initial state - app is visible
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+
+    // User switches to another app (iOS backgrounds Safari)
+    Object.defineProperty(document, "visibilityState", {
+      value: "hidden",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    expect(isHidden()).toBe(true)
+    const hiddenTimestamp = getLastHiddenAt()
+    expect(hiddenTimestamp).toBeGreaterThan(0)
+
+    // Simulate iOS memory pressure / time passing (30 seconds)
+    // In real iOS, the network connections would be terminated here
+    await new Promise((r) => setTimeout(r, 50)) // Shortened for test speed
+
+    // User returns to Safari
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    expect(isHidden()).toBe(false)
+    expect(wasRecentlyBackgrounded(5000)).toBe(true)
+
+    // The hidden timestamp should be unchanged
+    expect(getLastHiddenAt()).toBe(hiddenTimestamp)
+  })
+
+  test("error suppression logic - recently backgrounded", async () => {
+    const { wasRecentlyBackgrounded } = await import("./visibility")
+
+    // Simulate background then foreground
+    Object.defineProperty(document, "visibilityState", {
+      value: "hidden",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    await new Promise((r) => setTimeout(r, 20))
+
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    // Simulate error occurring right after resume
+    // This is when iOS backgrounding typically causes network errors
+    const shouldSuppressError = wasRecentlyBackgrounded(5000)
+    expect(shouldSuppressError).toBe(true)
+  })
+})
+
+describe("exports", () => {
+  test("all exports are functions", async () => {
+    const visibility = await import("./visibility")
+
+    expect(typeof visibility.wasRecentlyBackgrounded).toBe("function")
+    expect(typeof visibility.getLastHiddenAt).toBe("function")
+    expect(typeof visibility.isHidden).toBe("function")
+  })
+})
diff --git a/packages/app/src/utils/visibility.ts b/packages/app/src/utils/visibility.ts
