From ed07e7de1870b17cd4460086c4350193f8652b40 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 5 Jul 2026 03:08:18 +0300
Subject: [PATCH] fix(mobile): hold the boot-matched splash while the browser
 connects

The mobile browser flashed the unreachable-server screen during the
ordinary initial connect; it now keeps the logo splash and only shows the
error once the 8s recovery window expires (shared with the native path).
All MobileApp splash logos are 120px to hand off seamlessly from the
static boot splash instead of visibly shrinking.
---
 packages/ui/src/apps/MobileApp.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/apps/MobileApp.tsx b/packages/ui/src/apps/MobileApp.tsx
index 24f82b31..9e2d2ecb 100644
--- a/packages/ui/src/apps/MobileApp.tsx
+++ b/packages/ui/src/apps/MobileApp.tsx
@@ -2345,7 +2345,11 @@ export function MobileApp({ apis }: MobileAppProps) {
   }, [clearError, error]);
 
   React.useEffect(() => {
-    if (!isNativeMobileApp || isConnected || !getRuntimeApiBaseUrl()) {
+    // Native: only while an instance is selected and reconnecting. Browser: the
+    // runtime is same-origin (no explicit base URL), so any not-connected spell
+    // counts — the splash holds until this fires, then the error screen shows.
+    const waitingOnConnection = !isConnected && (isNativeMobileApp ? Boolean(getRuntimeApiBaseUrl()) : true);
+    if (!waitingOnConnection) {
       setShowConnectionRecovery(false);
       return;
     }
@@ -2383,7 +2387,7 @@ export function MobileApp({ apis }: MobileAppProps) {
   if (!fontsReady) {
     return (
       <main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
-        <OpenChamberLogo width={96} height={96} isAnimated />
+        <OpenChamberLogo width={120} height={120} isAnimated />
       </main>
     );
   }
@@ -2395,7 +2399,7 @@ export function MobileApp({ apis }: MobileAppProps) {
       return (
         <main className="flex min-h-dvh items-center justify-center bg-background px-6 text-center text-foreground">
           <div className="flex max-w-sm flex-col items-center gap-4">
-            <OpenChamberLogo width={96} height={96} isAnimated={!showConnectionRecovery} />
+            <OpenChamberLogo width={120} height={120} isAnimated={!showConnectionRecovery} />
             {showConnectionRecovery ? (
               <>
                 <div className="space-y-2">
@@ -2424,7 +2428,7 @@ export function MobileApp({ apis }: MobileAppProps) {
     if (autoConnectPhase !== 'done') {
       return (
         <main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
-          <OpenChamberLogo width={96} height={96} isAnimated />
+          <OpenChamberLogo width={120} height={120} isAnimated />
         </main>
       );
     }
@@ -2432,6 +2436,16 @@ export function MobileApp({ apis }: MobileAppProps) {
   }
 
   if (!isConnected && !isReconnecting) {
+    // Browser: the initial connect takes a beat — hold the logo splash instead
+    // of flashing the unreachable-server error while it resolves. The error
+    // only shows once the recovery delay has expired (genuinely unreachable).
+    if (!showConnectionRecovery) {
+      return (
+        <main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
+          <OpenChamberLogo width={120} height={120} isAnimated />
+        </main>
+      );
+    }
     return (
       <main className="flex min-h-dvh items-center justify-center bg-background px-6 text-center text-foreground">
         <div className="max-w-sm space-y-3">