Apply PR #23407: feat: desktop WSL onboarding + happy experience

Author: opencode-agent[bot]

packages/app/src/app.tsx

@@ -43,6 +43,7 @@ import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
 import { SettingsProvider, useSettings } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
+import { WslServersProvider } from "@/context/wsl-servers"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
@@ -71,7 +72,7 @@ declare global {
     __OPENCODE__?: {
       updaterEnabled?: boolean
       deepLinks?: string[]
-      wsl?: boolean
+      activeServer?: string
     }
     api?: {
       setTitlebar?: (theme: { mode: "light" | "dark" }) => Promise<void>
@@ -171,11 +172,13 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) {
               }}
             >
               <QueryProvider>
-                <DialogProvider>
-                  <MarkedProvider>
-                    <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
-                  </MarkedProvider>
-                </DialogProvider>
+                <WslServersProvider>
+                  <DialogProvider>
+                    <MarkedProvider>
+                      <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    </MarkedProvider>
+                  </DialogProvider>
+                </WslServersProvider>
               </QueryProvider>
             </ErrorBoundary>
           </UiI18nBridge>
@@ -298,11 +301,11 @@ function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key:
   )
 }
 
-function ServerKey(props: ParentProps) {
+function ServerKey(props: { children: (key: ServerConnection.Key) => JSX.Element }) {
   const server = useServer()
   return (
     <Show when={server.key} keyed>
-      {props.children}
+      {(key) => props.children(key)}
     </Show>
   )
 }
@@ -319,22 +322,24 @@ export function AppInterface(props: {
       <ServersProvider>
         <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
           <ServerKey>
-            <QueryProvider>
-              <ServerSDKProvider>
-                <ServerSyncProvider>
-                  <Dynamic
-                    component={props.router ?? Router}
-                    root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                  >
-                    <Route path="/" component={HomeRoute} />
-                    <Route path="/:dir" component={DirectoryLayout}>
-                      <Route path="/" component={() => <Navigate href="session" />} />
-                      <Route path="/session/:id?" component={SessionRoute} />
-                    </Route>
-                  </Dynamic>
-                </ServerSyncProvider>
-              </ServerSDKProvider>
-            </QueryProvider>
+            {() => (
+              <QueryProvider>
+                <ServerSDKProvider>
+                  <ServerSyncProvider>
+                    <Dynamic
+                      component={props.router ?? Router}
+                      root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+                    >
+                      <Route path="/" component={HomeRoute} />
+                      <Route path="/:dir" component={DirectoryLayout}>
+                        <Route path="/" component={() => <Navigate href="session" />} />
+                        <Route path="/session/:id?" component={SessionRoute} />
+                      </Route>
+                    </Dynamic>
+                  </ServerSyncProvider>
+                </ServerSDKProvider>
+              </QueryProvider>
+            )}
           </ServerKey>
         </ConnectionGate>
       </ServersProvider>