From bc601efb95c5f14dafe5f29bc187c82fa3858147 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Wed, 5 Nov 2025 10:44:57 -0300
Subject: [PATCH 1/4] fix: attempted fix at iOS bug

---
 src/app/(mobile-ui)/support/page.tsx          | 48 ++++++----
 src/app/crisp-proxy/page.tsx                  | 87 ++++++++++---------
 src/components/Global/SupportDrawer/index.tsx | 58 +++++++------
 src/hooks/useCrispIframeReady.ts              | 76 ++++++++++++++++
 4 files changed, 185 insertions(+), 84 deletions(-)
 create mode 100644 src/hooks/useCrispIframeReady.ts

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index 2a0072c82..d98d54c90 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,37 +1,51 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
+import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
 import PeanutLoading from '@/components/Global/PeanutLoading'
+import { Button } from '@/components/0_Bruddle'
 
 const SupportPage = () => {
     const userData = useCrispUserData()
     const crispProxyUrl = useCrispProxyUrl(userData)
-    const [isLoading, setIsLoading] = useState(true)
 
-    useEffect(() => {
-        // Listen for ready message from proxy iframe
-        const handleMessage = (event: MessageEvent) => {
-            if (event.origin !== window.location.origin) return
-
-            if (event.data.type === 'CRISP_READY') {
-                setIsLoading(false)
-            }
-        }
-
-        window.addEventListener('message', handleMessage)
-        return () => window.removeEventListener('message', handleMessage)
-    }, [])
+    // Use shared hook with device-specific timeouts (3s desktop, 8s iOS)
+    const { isReady, hasError, retry } = useCrispIframeReady()
 
     return (
         <div className="relative h-full w-full md:max-w-[90%] md:pl-24">
-            {isLoading && (
+            {!isReady && (
                 <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
                     <PeanutLoading />
                 </div>
             )}
-            <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+            {hasError && (
+                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
+                    <div className="space-y-2">
+                        <p className="text-base font-semibold">Having trouble loading support chat</p>
+                        <p className="text-sm text-grey-1">
+                            Check your internet connection and try again. If the problem persists, you can email us at{' '}
+                            <a href="mailto:hello@peanut.to" className="text-purple-1 underline">
+                                hello@peanut.to
+                            </a>
+                        </p>
+                    </div>
+                    <Button onClick={retry} shadowSize="4" variant="purple" icon="retry" iconSize={16}>
+                        Try again
+                    </Button>
+                </div>
+            )}
+            <iframe
+                src={crispProxyUrl}
+                className="h-full w-full"
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    minHeight: '-webkit-fill-available',
+                }}
+                title="Support Chat"
+            />
         </div>
     )
 }
diff --git a/src/app/crisp-proxy/page.tsx b/src/app/crisp-proxy/page.tsx
index 2fb31cf38..9b65385a2 100644
--- a/src/app/crisp-proxy/page.tsx
+++ b/src/app/crisp-proxy/page.tsx
@@ -1,8 +1,7 @@
 'use client'
 
 import Script from 'next/script'
-import { useEffect, Suspense } from 'react'
-import { useSearchParams } from 'next/navigation'
+import { useEffect, useCallback, useState } from 'react'
 import { CRISP_WEBSITE_ID } from '@/constants/crisp'
 
 /**
@@ -14,22 +13,41 @@ import { CRISP_WEBSITE_ID } from '@/constants/crisp'
  *
  * User data flows via URL parameters and is set during Crisp initialization,
  * following Crisp's recommended pattern for iframe embedding with JS SDK control.
+ *
+ * iOS FIXES:
+ * - Removed Suspense boundary (causes Safari streaming deadlock)
+ * - Manual URLSearchParams instead of useSearchParams() hook (hydration issue)
  */
-function CrispProxyContent() {
-    const searchParams = useSearchParams()
+export default function CrispProxyPage() {
+    const [searchParams, setSearchParams] = useState<URLSearchParams | null>(null)
 
+    // Parse URL params manually (iOS Safari issue with useSearchParams + Suspense)
     useEffect(() => {
         if (typeof window !== 'undefined') {
-            ;(window as any).CRISP_RUNTIME_CONFIG = {
-                lock_maximized: true,
-                lock_full_view: true,
-                cross_origin_cookies: true, // Essential for session persistence in iframes
-            }
+            setSearchParams(new URLSearchParams(window.location.search))
+        }
+    }, [])
+
+    // Memoize notify function to prevent recreation
+    const notifyParentReady = useCallback(() => {
+        if (typeof window !== 'undefined' && window.parent !== window) {
+            window.parent.postMessage({ type: 'CRISP_READY' }, window.location.origin)
         }
     }, [])
 
+    // Set runtime config before Crisp loads
     useEffect(() => {
         if (typeof window === 'undefined') return
+        ;(window as any).CRISP_RUNTIME_CONFIG = {
+            lock_maximized: true,
+            lock_full_view: true,
+            cross_origin_cookies: true, // Essential for session persistence in iframes
+        }
+    }, [])
+
+    // Initialize Crisp with user data
+    useEffect(() => {
+        if (typeof window === 'undefined' || !searchParams) return
 
         const email = searchParams.get('user_email')
         const nickname = searchParams.get('user_nickname')
@@ -37,17 +55,6 @@ function CrispProxyContent() {
         const sessionDataJson = searchParams.get('session_data')
         const prefilledMessage = searchParams.get('prefilled_message')
 
-        const notifyParentReady = () => {
-            if (window.parent !== window) {
-                window.parent.postMessage(
-                    {
-                        type: 'CRISP_READY',
-                    },
-                    window.location.origin
-                )
-            }
-        }
-
         const setAllData = () => {
             if (!window.$crisp) return false
 
@@ -103,19 +110,19 @@ function CrispProxyContent() {
             return true
         }
 
-        // Initialize data once Crisp loads
-        if (window.$crisp) {
-            setAllData()
-        } else {
-            const checkCrisp = setInterval(() => {
-                if (window.$crisp) {
-                    setAllData()
-                    clearInterval(checkCrisp)
-                }
-            }, 100)
+        // Poll for Crisp SDK availability
+        const checkCrisp = setInterval(() => {
+            if (window.$crisp && setAllData()) {
+                clearInterval(checkCrisp)
+            }
+        }, 100)
 
-            setTimeout(() => clearInterval(checkCrisp), 5000)
-        }
+        // Safety: Clear polling after 10 seconds
+        const timeoutId = setTimeout(() => {
+            clearInterval(checkCrisp)
+            // Notify parent even if Crisp failed to load to prevent infinite spinner
+            notifyParentReady()
+        }, 10000)
 
         // Listen for reset messages from parent window
         const handleMessage = (event: MessageEvent) => {
@@ -127,8 +134,12 @@ function CrispProxyContent() {
         }
 
         window.addEventListener('message', handleMessage)
-        return () => window.removeEventListener('message', handleMessage)
-    }, [searchParams])
+        return () => {
+            window.removeEventListener('message', handleMessage)
+            clearInterval(checkCrisp)
+            clearTimeout(timeoutId)
+        }
+    }, [searchParams, notifyParentReady])
 
     return (
         <div className="h-full w-full">
@@ -149,11 +160,3 @@ function CrispProxyContent() {
         </div>
     )
 }
-
-export default function CrispProxyPage() {
-    return (
-        <Suspense fallback={<div className="h-full w-full" />}>
-            <CrispProxyContent />
-        </Suspense>
-    )
-}
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 55471c926..3c3071fb8 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -1,51 +1,59 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
+import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
 import PeanutLoading from '../PeanutLoading'
+import { Button } from '@/components/0_Bruddle'
+import ErrorAlert from '../ErrorAlert'
 
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
     const userData = useCrispUserData()
-    const [isLoading, setIsLoading] = useState(true)
-
     const crispProxyUrl = useCrispProxyUrl(userData, prefilledMessage)
 
-    useEffect(() => {
-        // Listen for ready message from proxy iframe
-        const handleMessage = (event: MessageEvent) => {
-            if (event.origin !== window.location.origin) return
-
-            if (event.data.type === 'CRISP_READY') {
-                setIsLoading(false)
-            }
-        }
-
-        window.addEventListener('message', handleMessage)
-        return () => window.removeEventListener('message', handleMessage)
-    }, [])
-
-    // Reset loading state when drawer closes
-    useEffect(() => {
-        if (!isSupportModalOpen) {
-            setIsLoading(true)
-        }
-    }, [isSupportModalOpen])
+    // Use shared hook with device-specific timeouts (3s desktop, 8s iOS)
+    const { isReady, hasError, retry } = useCrispIframeReady(isSupportModalOpen)
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
             <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
                 <DrawerTitle className="sr-only">Support</DrawerTitle>
                 <div className="relative h-[80vh] w-full">
-                    {isLoading && (
+                    {!isReady && (
                         <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
                             <PeanutLoading />
                         </div>
                     )}
-                    <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+                    {hasError && (
+                        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
+                            <div className="space-y-2">
+                                <p className="text-base font-semibold">Having trouble loading support chat</p>
+                                <p className="text-sm text-grey-1">
+                                    Check your internet connection and try again. If the problem persists, you can email
+                                    us at{' '}
+                                    <a href="mailto:hello@peanut.to" className="text-purple-1 underline">
+                                        hello@peanut.to
+                                    </a>
+                                </p>
+                            </div>
+                            <Button onClick={retry} shadowSize="4" variant="purple" icon="retry" iconSize={16}>
+                                Try again
+                            </Button>
+                        </div>
+                    )}
+                    <iframe
+                        src={crispProxyUrl}
+                        className="h-full w-full"
+                        style={{
+                            height: '100%',
+                            width: '100%',
+                            minHeight: '-webkit-fill-available',
+                        }}
+                        title="Support Chat"
+                    />
                 </div>
             </DrawerContent>
         </Drawer>
diff --git a/src/hooks/useCrispIframeReady.ts b/src/hooks/useCrispIframeReady.ts
new file mode 100644
index 000000000..5828b78d5
--- /dev/null
+++ b/src/hooks/useCrispIframeReady.ts
@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useDeviceType, DeviceType } from './useGetDeviceType'
+
+export interface CrispIframeState {
+    isReady: boolean
+    hasError: boolean
+    retry: () => void
+}
+
+/**
+ * Hook to manage Crisp iframe ready state with device-specific timeouts
+ *
+ * iOS devices get longer timeout due to stricter security policies and
+ * slower script execution in iframe contexts.
+ *
+ * @param enabled - Whether to listen for ready messages (useful for conditional rendering)
+ * @returns Object with isReady, hasError, and retry function
+ */
+export function useCrispIframeReady(enabled: boolean = true): CrispIframeState {
+    const [isReady, setIsReady] = useState(false)
+    const [hasError, setHasError] = useState(false)
+    const [attemptCount, setAttemptCount] = useState(0)
+    const { deviceType } = useDeviceType()
+
+    const retry = useCallback(() => {
+        setIsReady(false)
+        setHasError(false)
+        setAttemptCount((prev) => prev + 1)
+    }, [])
+
+    useEffect(() => {
+        if (!enabled) return
+
+        let receivedMessage = false
+
+        const handleMessage = (event: MessageEvent) => {
+            // Security: Only accept messages from same origin
+            if (event.origin !== window.location.origin) return
+
+            if (event.data.type === 'CRISP_READY') {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.log('[Crisp] Iframe ready signal received')
+                }
+                receivedMessage = true
+                setIsReady(true)
+                setHasError(false)
+            }
+        }
+
+        // Device-specific timeouts:
+        // - iOS: 8s (stricter security, slower script execution in PWA)
+        // - Others: 3s (normal loading time)
+        const timeoutDuration = deviceType === DeviceType.IOS ? 8000 : 3000
+
+        const timeoutId = setTimeout(() => {
+            if (!receivedMessage) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.warn(
+                        `[Crisp] Timeout reached after ${timeoutDuration}ms without CRISP_READY (device: ${deviceType})`
+                    )
+                }
+                setHasError(true)
+                setIsReady(true) // Show iframe anyway for manual interaction
+            }
+        }, timeoutDuration)
+
+        window.addEventListener('message', handleMessage)
+
+        return () => {
+            window.removeEventListener('message', handleMessage)
+            clearTimeout(timeoutId)
+        }
+    }, [enabled, deviceType, attemptCount])
+
+    return { isReady, hasError, retry }
+}

From 798963ae0a5be5603332141c52d3759b3a4579a0 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Wed, 5 Nov 2025 10:45:55 -0300
Subject: [PATCH 2/4] .

---
 src/app/(mobile-ui)/support/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index d98d54c90..db5b663e3 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -27,7 +27,7 @@ const SupportPage = () => {
                         <p className="text-sm text-grey-1">
                             Check your internet connection and try again. If the problem persists, you can email us at{' '}
                             <a href="mailto:hello@peanut.to" className="text-purple-1 underline">
-                                hello@peanut.to
+                                support@peanut.me
                             </a>
                         </p>
                     </div>

From e72c7a6bf57db61ba0b30467c65859411cd041e1 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Wed, 5 Nov 2025 10:53:32 -0300
Subject: [PATCH 3/4] dry

---
 src/app/(mobile-ui)/support/page.tsx          | 39 +-------------
 src/components/Global/CrispIframe/index.tsx   | 54 +++++++++++++++++++
 src/components/Global/SupportDrawer/index.tsx | 41 +-------------
 3 files changed, 58 insertions(+), 76 deletions(-)
 create mode 100644 src/components/Global/CrispIframe/index.tsx

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index db5b663e3..8f429c20a 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -2,50 +2,15 @@
 
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
-import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
-import PeanutLoading from '@/components/Global/PeanutLoading'
-import { Button } from '@/components/0_Bruddle'
+import { CrispIframe } from '@/components/Global/CrispIframe'
 
 const SupportPage = () => {
     const userData = useCrispUserData()
     const crispProxyUrl = useCrispProxyUrl(userData)
 
-    // Use shared hook with device-specific timeouts (3s desktop, 8s iOS)
-    const { isReady, hasError, retry } = useCrispIframeReady()
-
     return (
         <div className="relative h-full w-full md:max-w-[90%] md:pl-24">
-            {!isReady && (
-                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
-                    <PeanutLoading />
-                </div>
-            )}
-            {hasError && (
-                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
-                    <div className="space-y-2">
-                        <p className="text-base font-semibold">Having trouble loading support chat</p>
-                        <p className="text-sm text-grey-1">
-                            Check your internet connection and try again. If the problem persists, you can email us at{' '}
-                            <a href="mailto:hello@peanut.to" className="text-purple-1 underline">
-                                support@peanut.me
-                            </a>
-                        </p>
-                    </div>
-                    <Button onClick={retry} shadowSize="4" variant="purple" icon="retry" iconSize={16}>
-                        Try again
-                    </Button>
-                </div>
-            )}
-            <iframe
-                src={crispProxyUrl}
-                className="h-full w-full"
-                style={{
-                    height: '100%',
-                    width: '100%',
-                    minHeight: '-webkit-fill-available',
-                }}
-                title="Support Chat"
-            />
+            <CrispIframe crispProxyUrl={crispProxyUrl} />
         </div>
     )
 }
diff --git a/src/components/Global/CrispIframe/index.tsx b/src/components/Global/CrispIframe/index.tsx
new file mode 100644
index 000000000..85257c3b8
--- /dev/null
+++ b/src/components/Global/CrispIframe/index.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
+import PeanutLoading from '../PeanutLoading'
+import { Button } from '@/components/0_Bruddle'
+
+interface CrispIframeProps {
+    crispProxyUrl: string
+    enabled?: boolean
+}
+
+/**
+ * Shared Crisp iframe component with loading and error states
+ * DRY component used by both SupportDrawer and SupportPage
+ */
+export const CrispIframe = ({ crispProxyUrl, enabled = true }: CrispIframeProps) => {
+    const { isReady, hasError, retry } = useCrispIframeReady(enabled)
+
+    return (
+        <>
+            {!isReady && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                    <PeanutLoading />
+                </div>
+            )}
+            {hasError && (
+                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
+                    <div className="space-y-2">
+                        <p className="text-base font-semibold">Having trouble loading support chat</p>
+                        <p className="text-sm text-grey-1">
+                            Check your internet connection and try again. If the problem persists, you can email us at{' '}
+                            <a href="mailto:support@peanut.me" className="text-purple-1 underline">
+                                support@peanut.me
+                            </a>
+                        </p>
+                    </div>
+                    <Button onClick={retry} shadowSize="4" variant="purple" icon="retry" iconSize={16}>
+                        Try again
+                    </Button>
+                </div>
+            )}
+            <iframe
+                src={crispProxyUrl}
+                className="h-full w-full"
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    minHeight: '-webkit-fill-available',
+                }}
+                title="Support Chat"
+            />
+        </>
+    )
+}
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 3c3071fb8..0ec131456 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -3,57 +3,20 @@
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
-import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
-import PeanutLoading from '../PeanutLoading'
-import { Button } from '@/components/0_Bruddle'
-import ErrorAlert from '../ErrorAlert'
+import { CrispIframe } from '../CrispIframe'
 
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
     const userData = useCrispUserData()
     const crispProxyUrl = useCrispProxyUrl(userData, prefilledMessage)
 
-    // Use shared hook with device-specific timeouts (3s desktop, 8s iOS)
-    const { isReady, hasError, retry } = useCrispIframeReady(isSupportModalOpen)
-
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
             <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
                 <DrawerTitle className="sr-only">Support</DrawerTitle>
                 <div className="relative h-[80vh] w-full">
-                    {!isReady && (
-                        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
-                            <PeanutLoading />
-                        </div>
-                    )}
-                    {hasError && (
-                        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
-                            <div className="space-y-2">
-                                <p className="text-base font-semibold">Having trouble loading support chat</p>
-                                <p className="text-sm text-grey-1">
-                                    Check your internet connection and try again. If the problem persists, you can email
-                                    us at{' '}
-                                    <a href="mailto:hello@peanut.to" className="text-purple-1 underline">
-                                        hello@peanut.to
-                                    </a>
-                                </p>
-                            </div>
-                            <Button onClick={retry} shadowSize="4" variant="purple" icon="retry" iconSize={16}>
-                                Try again
-                            </Button>
-                        </div>
-                    )}
-                    <iframe
-                        src={crispProxyUrl}
-                        className="h-full w-full"
-                        style={{
-                            height: '100%',
-                            width: '100%',
-                            minHeight: '-webkit-fill-available',
-                        }}
-                        title="Support Chat"
-                    />
+                    <CrispIframe crispProxyUrl={crispProxyUrl} enabled={isSupportModalOpen} />
                 </div>
             </DrawerContent>
         </Drawer>

From c5d3deaeb912402b08d59c7562486b826963be3d Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Wed, 5 Nov 2025 11:12:52 -0300
Subject: [PATCH 4/4] debug logs

---
 src/app/(mobile-ui)/support-test/page.tsx   | 34 +++++++++++++
 src/app/(mobile-ui)/support/page.tsx        | 19 +++++++-
 src/components/Global/CrispIframe/index.tsx | 54 ++++++++++++++++++++-
 3 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(mobile-ui)/support-test/page.tsx

diff --git a/src/app/(mobile-ui)/support-test/page.tsx b/src/app/(mobile-ui)/support-test/page.tsx
new file mode 100644
index 000000000..9abfb8d65
--- /dev/null
+++ b/src/app/(mobile-ui)/support-test/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+/**
+ * MINIMAL TEST PAGE for iOS debugging
+ * This bypasses all custom hooks to test if basic rendering works
+ */
+export default function SupportTestPage() {
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '100vh',
+                background: '#f0f0f0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                padding: '20px',
+            }}
+        >
+            <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>iOS Test Page</h1>
+            <p style={{ marginBottom: '10px' }}>If you see this, page rendering works!</p>
+            <p style={{ fontSize: '12px', color: '#666' }}>
+                User agent: {typeof navigator !== 'undefined' ? navigator.userAgent : 'Loading...'}
+            </p>
+            <div style={{ marginTop: '20px' }}>
+                <a href="/support" style={{ color: 'blue', textDecoration: 'underline' }}>
+                    Try /support page
+                </a>
+            </div>
+        </div>
+    )
+}
+
diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index 8f429c20a..6e55209e6 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect } from 'react'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
 import { CrispIframe } from '@/components/Global/CrispIframe'
@@ -8,8 +9,24 @@ const SupportPage = () => {
     const userData = useCrispUserData()
     const crispProxyUrl = useCrispProxyUrl(userData)
 
+    // Debug logging for iOS
+    useEffect(() => {
+        console.log('[SupportPage] Mounted', {
+            crispProxyUrl,
+            userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : 'SSR',
+            windowHeight: typeof window !== 'undefined' ? window.innerHeight : 'SSR',
+        })
+    }, [crispProxyUrl])
+
     return (
-        <div className="relative h-full w-full md:max-w-[90%] md:pl-24">
+        <div
+            className="relative w-full md:max-w-[90%] md:pl-24"
+            style={{
+                height: '100%',
+                minHeight: '100vh',
+                background: 'var(--background)',
+            }}
+        >
             <CrispIframe crispProxyUrl={crispProxyUrl} />
         </div>
     )
diff --git a/src/components/Global/CrispIframe/index.tsx b/src/components/Global/CrispIframe/index.tsx
index 85257c3b8..368d2b777 100644
--- a/src/components/Global/CrispIframe/index.tsx
+++ b/src/components/Global/CrispIframe/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { useCrispIframeReady } from '@/hooks/useCrispIframeReady'
 import PeanutLoading from '../PeanutLoading'
 import { Button } from '@/components/0_Bruddle'
@@ -14,7 +15,58 @@ interface CrispIframeProps {
  * DRY component used by both SupportDrawer and SupportPage
  */
 export const CrispIframe = ({ crispProxyUrl, enabled = true }: CrispIframeProps) => {
-    const { isReady, hasError, retry } = useCrispIframeReady(enabled)
+    const [componentError, setComponentError] = useState<string | null>(null)
+
+    // Defensive: Catch any hook errors
+    let hookState
+    try {
+        hookState = useCrispIframeReady(enabled)
+    } catch (error) {
+        console.error('[CrispIframe] Hook error:', error)
+        hookState = { isReady: true, hasError: true, retry: () => window.location.reload() }
+    }
+
+    const { isReady, hasError, retry } = hookState
+
+    // Debug logging for iOS
+    useEffect(() => {
+        console.log('[CrispIframe] Component mounted', {
+            enabled,
+            crispProxyUrl,
+            userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : 'SSR',
+        })
+    }, [enabled, crispProxyUrl])
+
+    useEffect(() => {
+        console.log('[CrispIframe] State:', { isReady, hasError })
+    }, [isReady, hasError])
+
+    // Catch render errors
+    if (componentError) {
+        return (
+            <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-4 bg-background p-6 text-center">
+                <div className="space-y-2">
+                    <p className="text-base font-semibold">Something went wrong</p>
+                    <p className="text-sm text-grey-1">
+                        Please email us at{' '}
+                        <a href="mailto:support@peanut.me" className="text-purple-1 underline">
+                            support@peanut.me
+                        </a>
+                    </p>
+                    {componentError && <p className="text-xs text-error">{componentError}</p>}
+                </div>
+                <Button
+                    onClick={() => window.location.reload()}
+                    shadowSize="4"
+                    variant="purple"
+                    icon="retry"
+                    iconSize={16}
+                >
+                    Reload page
+                </Button>
+            </div>
+        )
+    }
 
     return (
         <>