diff --git a/apps/app/src/app/pages/session.tsx b/apps/app/src/app/pages/session.tsx
index 3915fd79..3657a9a3 100644
--- a/apps/app/src/app/pages/session.tsx
+++ b/apps/app/src/app/pages/session.tsx
@@ -115,6 +115,7 @@ import {
 import { ReactIsland } from "../../react/island";
 import { reactSessionEnabled } from "../../react/feature-flag";
 import { SessionSurface } from "../../react/session/session-surface.react";
+import { SessionSyncProvider } from "../../react/session/session-sync-provider.react";
 
 export type SessionViewProps = {
   selectedSessionId: string | null;
@@ -3200,6 +3201,18 @@ export default function SessionView(props: SessionViewProps) {
 
           <div class="flex-1 flex overflow-hidden">
             <div class="relative min-w-0 flex-1 overflow-hidden bg-dls-surface">
+              <Show when={showReactSessionSurface()}>
+                <ReactIsland
+                  class="contents"
+                  instanceKey={props.runtimeWorkspaceId!}
+                  component={SessionSyncProvider}
+                  props={{
+                    workspaceId: props.runtimeWorkspaceId!,
+                    opencodeBaseUrl: reactSessionOpencodeBaseUrl(),
+                    openworkToken: reactSessionToken(),
+                  }}
+                />
+              </Show>
               <div
                 class={`h-full overflow-y-auto px-4 sm:px-6 lg:px-10 ${showWorkspaceSetupEmptyState() ? "pt-20" : "pt-10"} bg-dls-surface`}
                 style={{ contain: "layout paint style" }}
diff --git a/apps/app/src/react/session/session-surface.react.tsx b/apps/app/src/react/session/session-surface.react.tsx
index d79530da..f0d0e776 100644
--- a/apps/app/src/react/session/session-surface.react.tsx
+++ b/apps/app/src/react/session/session-surface.react.tsx
@@ -10,7 +10,6 @@ import { SessionDebugPanel } from "./debug-panel.react";
 import { deriveSessionRenderModel } from "./transition-controller";
 import { SessionTranscript } from "./message-list.react";
 import {
-  ensureWorkspaceSessionSync,
   seedSessionState,
   statusKey as reactStatusKey,
   todoKey as reactTodoKey,
@@ -102,14 +101,6 @@ export function SessionSurface(props: SessionSurfaceProps) {
     gcTime: 1000 * 60 * 60,
   });
 
-  useEffect(() => {
-    return ensureWorkspaceSessionSync({
-      workspaceId: props.workspaceId,
-      baseUrl: props.opencodeBaseUrl,
-      openworkToken: props.openworkToken,
-    });
-  }, [props.workspaceId, props.opencodeBaseUrl, props.openworkToken]);
-
   useEffect(() => {
     if (!currentSnapshot) return;
     setRendered({ sessionId: props.sessionId, snapshot: currentSnapshot });
diff --git a/apps/app/src/react/session/session-sync-provider.react.tsx b/apps/app/src/react/session/session-sync-provider.react.tsx
new file mode 100644
index 00000000..00bc80e8
--- /dev/null
+++ b/apps/app/src/react/session/session-sync-provider.react.tsx
@@ -0,0 +1,22 @@
+/** @jsxImportSource react */
+import { useEffect } from "react";
+
+import { ensureWorkspaceSessionSync } from "./session-sync";
+
+type SessionSyncProviderProps = {
+  workspaceId: string;
+  opencodeBaseUrl: string;
+  openworkToken: string;
+};
+
+export function SessionSyncProvider(props: SessionSyncProviderProps) {
+  useEffect(() => {
+    return ensureWorkspaceSessionSync({
+      workspaceId: props.workspaceId,
+      baseUrl: props.opencodeBaseUrl,
+      openworkToken: props.openworkToken,
+    });
+  }, [props.workspaceId, props.opencodeBaseUrl, props.openworkToken]);
+
+  return null;
+}