Fix session reuse to reuse existing healthy session (#86)

* Fix session reuse

Reuse existing healthy session instead of recreating them, preventing
"Control process initialization timeout" when the same session ID is
requested concurrently.

* Add changeset

* Modify basic example to request new sandboxes

Author: ghostwriternr

.changeset/curly-eyes-tell.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/sandbox": patch
+---
+
+Fix session reuse to reuse existing healthy session

examples/basic/app/index.tsx

@@ -36,9 +36,26 @@ interface ListFilesResponse {
   timestamp: string;
 }
 
+// Generate or retrieve a stable sandbox ID for this browser tab
+function getClientSandboxId(): string {
+  const storageKey = 'sandbox-client-id';
+
+  // Try to get existing ID from sessionStorage (persists across page reloads)
+  let sandboxId = sessionStorage.getItem(storageKey);
+
+  if (!sandboxId) {
+    // Generate new ID for this tab
+    sandboxId = `client-${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+    sessionStorage.setItem(storageKey, sandboxId);
+  }
+
+  return sandboxId;
+}
+
 // Simple API client to replace direct HttpClient usage
 class SandboxApiClient {
   private baseUrl: string;
+  private sandboxId: string;
   private onCommandComplete?: (
     success: boolean,
     exitCode: number,
@@ -64,6 +81,7 @@ class SandboxApiClient {
     } = {}
   ) {
     this.baseUrl = options.baseUrl || window.location.origin;
+    this.sandboxId = getClientSandboxId();
     this.onCommandComplete = options.onCommandComplete;
     this.onCommandStart = options.onCommandStart;
     this.onError = options.onError;
@@ -73,6 +91,7 @@ class SandboxApiClient {
     const response = await fetch(`${this.baseUrl}${url}`, {
       headers: {
         "Content-Type": "application/json",
+        "X-Sandbox-Client-Id": this.sandboxId,
         ...options.headers,
       },
       ...options,

examples/basic/src/index.ts

@@ -41,12 +41,16 @@ type Env = {
 };
 
 // Helper to get sandbox instance with user-specific ID
-function getUserSandbox(env: Env) {
-  // For demo purposes, use a fixed sandbox ID. In production, you might extract from:
+function getUserSandbox(env: Env, request: Request) {
+  // Get client-provided sandbox ID from header (persists across page reloads, unique per tab)
+  const clientSandboxId = request.headers.get("X-Sandbox-Client-Id");
+
+  // Use client ID if provided, otherwise generate one
+  // In production, you would also use:
   // - Authentication headers
   // - URL parameters
   // - Session cookies
-  const sandboxId = "demo-user-sandbox";
+  const sandboxId = clientSandboxId || `sandbox-${Date.now()}-${generateSecureRandomString()}`;
   return getSandbox(env.Sandbox, sandboxId);
 }
 
@@ -66,7 +70,7 @@ export default {
     const pathname = url.pathname;
 
     try {
-      const sandbox = getUserSandbox(env) as unknown as Sandbox<unknown>;
+      const sandbox = getUserSandbox(env, request) as unknown as Sandbox<unknown>;
 
       // Notebook API endpoints
       if (pathname === "/api/notebook/session" && request.method === "POST") {

examples/basic/wrangler.jsonc

@@ -17,7 +17,8 @@
       "class_name": "Sandbox",
       "image": "./Dockerfile",
       "name": "sandbox",
-      "max_instances": 1
+      "max_instances": 5,
+      "instance_type": "standard-2"
     }
   ],
   "durable_objects": {

examples/code-interpreter/package.json

@@ -12,12 +12,7 @@
   },
   "author": "",
   "license": "MIT",
-  "devDependencies": {
-    "typescript": "^5.5.2",
-    "wrangler": "^4.27.0"
-  },
   "dependencies": {
-    "@cloudflare/sandbox": "^0.3.3",
     "openai": "^5.12.0"
   }
 }