Re-upgrade codesandbox sdk (#1916)

Author: Kitenite

apps/web/client/package.json

@@ -35,7 +35,7 @@
         "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.1.7",
-        "@codesandbox/sdk": "^0.11.1",
+        "@codesandbox/sdk": "^1.1.2",
         "@onlook/constants": "*",
         "@onlook/db": "*",
         "@onlook/fonts": "*",

apps/web/client/src/app/project/[id]/_components/main.tsx

@@ -44,7 +44,11 @@ export const Main = observer(({ projectId }: { projectId: string }) => {
         projectManager.project = project;
 
         if (project.sandbox?.id) {
-            editorEngine.sandbox.session.start(project.sandbox.id);
+            if (userManager.user?.id) {
+                editorEngine.sandbox.session.start(project.sandbox.id, userManager.user?.id);
+            } else {
+                console.error('No user id');
+            }
         } else {
             console.error('No sandbox id');
         }
@@ -68,7 +72,7 @@ export const Main = observer(({ projectId }: { projectId: string }) => {
         return () => {
             editorEngine.sandbox.clear();
         };
-    }, [result]);
+    }, [result, userManager.user?.id]);
 
     useEffect(() => {
         const creationData = createManager.pendingCreationData;
@@ -133,16 +137,6 @@ export const Main = observer(({ projectId }: { projectId: string }) => {
         };
     }, []);
 
-    useEffect(() => {
-        if (
-            tabState === 'reactivated' &&
-            editorEngine.sandbox.session.session &&
-            !editorEngine.sandbox.session.connected()
-        ) {
-            editorEngine.sandbox.session.reconnect();
-        }
-    }, [tabState]);
-
     if (isLoading) {
         return (
             <div className="h-screen w-screen flex items-center justify-center gap-2">

apps/web/client/src/components/store/editor/sandbox/file-watcher.ts

@@ -1,16 +1,16 @@
-import type { SandboxSession, WatchEvent, Watcher } from '@codesandbox/sdk';
+import type { WatchEvent, Watcher, WebSocketSession } from '@codesandbox/sdk';
 import { FileEventBus } from './file-event-bus';
 
 interface FileWatcherOptions {
-    session: SandboxSession;
+    session: WebSocketSession;
     onFileChange: (event: WatchEvent) => Promise<void>;
     excludePatterns?: string[];
     fileEventBus: FileEventBus;
 }
 
 export class FileWatcher {
     private watcher: Watcher | null = null;
-    private readonly session: SandboxSession;
+    private readonly session: WebSocketSession;
     private readonly onFileChange: (event: WatchEvent) => Promise<void>;
     private readonly excludePatterns: string[];
     private readonly eventBus: FileEventBus;
@@ -24,12 +24,12 @@ export class FileWatcher {
 
     async start(): Promise<void> {
         try {
-            this.watcher = await this.session.fs.watch('./', {
+            const watcher = await this.session.fs.watch('./', {
                 recursive: true,
                 excludes: this.excludePatterns,
             });
-
-            this.watcher.onEvent(async (event) => {
+            this.watcher = watcher
+            watcher.onEvent(async (event) => {
                 // Publish the event to all subscribers
                 this.eventBus.publish({
                     type: event.type,

apps/web/client/src/components/store/editor/sandbox/session.ts

@@ -1,50 +1,33 @@
 import { api } from '@/trpc/client';
-import type { SandboxSession } from '@codesandbox/sdk';
+import type { WebSocketSession } from '@codesandbox/sdk';
 import { connectToSandbox } from '@codesandbox/sdk/browser';
 import { makeAutoObservable } from 'mobx';
 
 export class SessionManager {
-    session: SandboxSession | null = null;
+    session: WebSocketSession | null = null;
     isConnecting = false;
 
     constructor() {
         makeAutoObservable(this);
     }
 
-    async start(sandboxId: string) {
+    async start(sandboxId: string, userId: string) {
         this.isConnecting = true;
-        const startData = await api.sandbox.start.mutate({ sandboxId });
-        this.session = await connectToSandbox(startData);
+        this.session = await connectToSandbox({
+            session: await api.sandbox.start.mutate({ sandboxId, userId }),
+            getSession: async (id) => {
+                return await api.sandbox.start.mutate({ sandboxId, userId });
+            },
+        });
         this.isConnecting = false;
     }
 
     async hibernate(sandboxId: string) {
         await api.sandbox.hibernate.mutate({ sandboxId });
     }
 
-    async connected() {
-        if (!this.session) return false;
-        try {
-            await this.session.shells.run('echo "ping"');
-            return true;
-        } catch (error) {
-            console.error('Failed to connect to sandbox', error);
-            return false;
-        }
-    }
-
     async reconnect() {
-        if (!this.session) {
-            console.error('No session found');
-            return;
-        }
-        const sandboxId = this.session.id;
-        this.session.disconnect();
-        this.session = null;
-        this.isConnecting = true;
-        const startData = await api.sandbox.reconnect.mutate({ sandboxId });
-        this.session = await connectToSandbox(startData);
-        this.isConnecting = false;
+        await this.session?.reconnect();
     }
 
     async disconnect() {

apps/web/client/src/server/api/routers/sandbox.ts

@@ -1,4 +1,5 @@
 import { CodeSandbox } from '@codesandbox/sdk';
+import { shortenUuid } from '@onlook/utility/src/id';
 import { z } from 'zod';
 import { createTRPCRouter, protectedProcedure } from '../trpc';
 
@@ -7,30 +8,30 @@ const sdk = new CodeSandbox(process.env.CSB_API_KEY!);
 export const sandboxRouter = createTRPCRouter({
     start: protectedProcedure.input(z.object({
         sandboxId: z.string(),
+        userId: z.string(),
     })).mutation(async ({ input }) => {
-        const startData = await sdk.sandbox.start(input.sandboxId);
-        return startData;
-    }),
-    // Same as start - Separate endpoint for different state management
-    reconnect: protectedProcedure.input(z.object({
-        sandboxId: z.string(),
-    })).mutation(async ({ input }) => {
-        const startData = await sdk.sandbox.start(input.sandboxId);
-        return startData;
+        const startData = await sdk.sandboxes.resume(input.sandboxId);
+        const session = await startData.createBrowserSession({
+            id: shortenUuid(input.userId, 20)
+        });
+        return session;
     }),
     hibernate: protectedProcedure.input(z.object({
         sandboxId: z.string(),
     })).mutation(async ({ input }) => {
-        await sdk.sandbox.hibernate(input.sandboxId);
+        await sdk.sandboxes.hibernate(input.sandboxId);
     }),
     list: protectedProcedure.query(async () => {
-        const listResponse = await sdk.sandbox.list();
+        const listResponse = await sdk.sandboxes.list();
         return listResponse;
     }),
     fork: protectedProcedure.input(z.object({
         sandboxId: z.string(),
     })).mutation(async ({ input }) => {
-        const sandbox = await sdk.sandbox.create({ template: input.sandboxId });
+        const sandbox = await sdk.sandboxes.create({
+            source: 'template',
+            id: input.sandboxId,
+        });
         return {
             sandboxId: sandbox.id,
             previewUrl: `https://${sandbox.id}-8084.csb.app`,
@@ -39,6 +40,6 @@ export const sandboxRouter = createTRPCRouter({
     delete: protectedProcedure.input(z.object({
         sandboxId: z.string(),
     })).mutation(async ({ input }) => {
-        await sdk.sandbox.shutdown(input.sandboxId);
+        await sdk.sandboxes.shutdown(input.sandboxId);
     }),
 });