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

athal7 · athal7 · commit 298a714572e4 · 2026-02-01T19:53:59.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
@@ -61,6 +61,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"]
@@ -1263,10 +1264,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
@@ -1295,10 +1299,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
@@ -1596,11 +1603,20 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       })
     }
 
-    void send().catch((err) => {
+    void send().catch(async (err) => {
       pending.delete(session?.id || "")
       if (sessionDirectory === projectDirectory && session?.id) {
         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 (session?.id && 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
@@ -70,6 +70,7 @@ import {
 } from "@/components/session"
 import { navMark, navParams } from "@/utils/perf"
 import { same } from "@/utils/same"
+import { wasHiddenFor } from "@/utils/visibility"
 
 type DiffStyle = "unified" | "split"
 
@@ -551,6 +552,17 @@ export default function Page() {
     sync.session.sync(params.id)
   })
 
+  // Resync session when tab becomes visible after being backgrounded (iOS fix)
+  onMount(() => {
+    const handler = () => {
+      if (document.visibilityState === "hidden") return
+      if (!wasHiddenFor(1000)) return
+      if (params.id) sync.session.sync(params.id)
+    }
+    document.addEventListener("visibilitychange", handler)
+    onCleanup(() => document.removeEventListener("visibilitychange", handler))
+  })
+
   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,84 @@
+import { describe, expect, test } from "bun:test"
+
+describe("visibility", () => {
+  test("wasRecentlyBackgrounded returns false when never hidden", async () => {
+    const { wasRecentlyBackgrounded } = await import("./visibility")
+    expect(wasRecentlyBackgrounded()).toBe(false)
+  })
+
+  test("wasRecentlyBackgrounded returns true after background/foreground cycle", async () => {
+    const { wasRecentlyBackgrounded } = await import("./visibility")
+
+    // Simulate hiding
+    Object.defineProperty(document, "visibilityState", {
+      value: "hidden",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    await new Promise((r) => setTimeout(r, 50))
+
+    // Simulate showing
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    expect(wasRecentlyBackgrounded(5000)).toBe(true)
+  })
+
+  test("wasRecentlyBackgrounded respects threshold", async () => {
+    const { wasRecentlyBackgrounded } = await import("./visibility")
+
+    // Simulate hide then show
+    Object.defineProperty(document, "visibilityState", {
+      value: "hidden",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    await new Promise((r) => setTimeout(r, 50))
+
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    // Wait past a short threshold
+    await new Promise((r) => setTimeout(r, 100))
+
+    expect(wasRecentlyBackgrounded(50)).toBe(false)
+    expect(wasRecentlyBackgrounded(5000)).toBe(true)
+  })
+
+  test("wasHiddenFor returns true when hidden long enough", async () => {
+    const { wasHiddenFor } = await import("./visibility")
+
+    // Simulate hide
+    Object.defineProperty(document, "visibilityState", {
+      value: "hidden",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    await new Promise((r) => setTimeout(r, 100))
+
+    // Simulate show
+    Object.defineProperty(document, "visibilityState", {
+      value: "visible",
+      writable: true,
+      configurable: true,
+    })
+    document.dispatchEvent(new Event("visibilitychange"))
+
+    expect(wasHiddenFor(50)).toBe(true)
+    expect(wasHiddenFor(500)).toBe(false)
+  })
+})
diff --git a/packages/app/src/utils/visibility.ts b/packages/app/src/utils/visibility.ts
@@ -0,0 +1,22 @@
+// Tracks page visibility state for detecting iOS backgrounding scenarios
+// Used to suppress error toasts that occur due to background network disconnects
+
+let lastHidden = 0
+let lastVisible = Date.now()
+
+if (typeof document !== "undefined") {
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") lastHidden = Date.now()
+    else lastVisible = Date.now()
+  })
+}
+
+/** Returns true if the page was recently backgrounded (within threshold ms) */
+export function wasRecentlyBackgrounded(threshold = 5000): boolean {
+  return lastHidden > 0 && Date.now() - lastVisible < threshold
+}
+
+/** Returns true if page was hidden for at least `duration` ms before becoming visible */
+export function wasHiddenFor(duration: number): boolean {
+  return lastHidden > 0 && lastVisible - lastHidden > duration
+}
