fix(app): better error screen when connecting to sidecar

packages/desktop/src/index.tsx

@@ -370,18 +370,51 @@ function ServerGate(props: { children: (data: Accessor<ServerReadyData>) => JSX.
     }),
   )
 
+  const errorMessage = () => {
+    const error = serverData.error
+    if (!error) return "Unknown error"
+    if (typeof error === "string") return error
+    if (error instanceof Error) return error.message
+    return String(error)
+  }
+
+  const restartApp = async () => {
+    await invoke("kill_sidecar").catch(() => undefined)
+    await relaunch().catch(() => undefined)
+  }
+
   return (
     // Not using suspense as not all components are compatible with it (undefined refs)
     <Show
-      when={serverData.state !== "pending" && serverData()}
+      when={serverData.state === "errored"}
       fallback={
-        <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base">
-          <Splash class="w-16 h-20 opacity-50 animate-pulse" />
-          <div data-tauri-decorum-tb class="flex flex-row absolute top-0 right-0 z-10 h-10" />
-        </div>
+        <Show
+          when={serverData.state !== "pending" && serverData()}
+          fallback={
+            <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base">
+              <Splash class="w-16 h-20 opacity-50 animate-pulse" />
+              <div data-tauri-decorum-tb class="flex flex-row absolute top-0 right-0 z-10 h-10" />
+            </div>
+          }
+        >
+          {(data) => props.children(data)}
+        </Show>
       }
     >
-      {(data) => props.children(data)}
+      <div class="h-screen w-screen flex flex-col items-center justify-center bg-background-base gap-4 px-6">
+        <div class="text-16-semibold">OpenCode failed to start</div>
+        <div class="text-12-regular opacity-70 text-center max-w-xl">
+          The local OpenCode server could not be started. Restart the app, or check your network settings (VPN/proxy)
+          and try again.
+        </div>
+        <div class="w-full max-w-3xl rounded border border-border bg-background-base overflow-auto max-h-64">
+          <pre class="p-3 whitespace-pre-wrap break-words text-11-regular">{errorMessage()}</pre>
+        </div>
+        <button class="px-3 py-2 rounded bg-primary text-primary-foreground" onClick={() => void restartApp()}>
+          Restart App
+        </button>
+        <div data-tauri-decorum-tb class="flex flex-row absolute top-0 right-0 z-10 h-10" />
+      </div>
     </Show>
   )
 }