@smoothglue/sync-whiteboard 1.0.2 → 1.0.3

package/dist/assets.js

@@ -15,7 +15,6 @@ if (!ASSET_STORAGE_URL) {
     process.exit(1);
 }
 logger_1.default.info({ assetStorageUrl: ASSET_STORAGE_URL }, `[ASSETS] Using Asset Storage URL`);
-// --- End Configuration ---
 /**
  * Stores an asset by proxying a PUT request to the configured asset storage backend.
  * @param id - The unique identifier for the asset (generated by the client).
@@ -25,7 +24,7 @@ logger_1.default.info({ assetStorageUrl: ASSET_STORAGE_URL }, `[ASSETS] Using As
  * @returns The asset ID upon successful storage.
  * @throws Throws an error if the request to the backend fails.
  */
-async function storeAsset(id, fileStream, contentType = "application/octet-stream", originalFilename, authHeader) {
+async function storeAsset(id, fileStream, contentType = "application/octet-stream", originalFilename, credentials) {
     const url = `${ASSET_STORAGE_URL}/${id}`;
     logger_1.default.debug({ assetId: id, filename: originalFilename, targetUrl: url }, `[ASSETS] Storing asset`);
     // Ensure we have a readable stream
@@ -46,8 +45,12 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
             "Content-Disposition": `attachment; filename="${sanitizedFilename}"`, // Use the sanitized filename in the Content-Disposition header to avoid errors
         };
         // forward auth headers if included from client
-        if (authHeader) {
-            headers.Authorization = authHeader;
+        // Prioritize Authorization header, but fall back to Cookie
+        if (credentials?.authorization) {
+            headers["Authorization"] = credentials.authorization;
+        }
+        if (credentials?.cookie) {
+            headers["Cookie"] = credentials.cookie;
         }
         // Make the PUT request to the asset storage backend
         const response = await fetch(url, {
@@ -104,12 +107,17 @@ async function storeAsset(id, fileStream, contentType = "application/octet-strea
  * @returns An object containing the asset's data as a Readable stream and its Content-Type.
  * @throws Throws an error if the request to the backend fails or the asset is not found.
  */
-async function loadAsset(id, authHeader) {
+async function loadAsset(id, credentials) {
     const url = `${ASSET_STORAGE_URL}/${id}`;
     logger_1.default.debug({ assetId: id, targetUrl: url }, `[ASSETS] Loading asset`);
     const headers = {};
-    if (authHeader) {
-        headers.Authorization = authHeader;
+    // Pass auth headers from client to backend call
+    // Prioritize Authorization header, but fall back to Cookie
+    if (credentials?.authorization) {
+        headers["Authorization"] = credentials.authorization;
+    }
+    else if (credentials?.cookie) {
+        headers["Cookie"] = credentials.cookie;
     }
     try {
         // Make the GET request to the actual asset storage backend

package/dist/rooms.js

@@ -4,6 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOrCreateRoom = getOrCreateRoom;
+/**
+ * @file Manages tldraw room instances, including creation, persistence, and lifecycle.
+ * This module handles loading snapshots from a backend, saving them periodically,
+ * and cleaning up inactive rooms from memory.
+ */
 const sync_core_1 = require("@tldraw/sync-core");
 const schema_1 = require("./schema");
 const logger_1 = __importDefault(require("./logger"));
@@ -27,16 +32,17 @@ let createRoomMutex = Promise.resolve(undefined);
  * @returns The snapshot data, or undefined if the backend returns 404.
  * @throws Throws an error for non-404 HTTP errors or network issues.
  */
-async function readSnapshotFromBackend(roomId, authHeader) {
+async function readSnapshotFromBackend(roomId, credentials) {
     const url = `${SNAPSHOT_STORAGE_URL}/${roomId}`;
     logger_1.default.debug({ roomId, url }, `[ROOMS] Loading snapshot for room ${roomId} from ${url}`);
-    // Start with the required 'Accept' header
-    const headers = {
-        Accept: "application/json",
-    };
-    // Conditionally add the Authorization header if it exists
-    if (authHeader) {
-        headers["Authorization"] = authHeader;
+    const headers = new Headers();
+    headers.append("Accept", "application/json");
+    // Prioritize Authorization header, but fall back to Cookie
+    if (credentials?.authorization) {
+        headers.append("Authorization", credentials.authorization);
+    }
+    else if (credentials?.cookie) {
+        headers.append("Cookie", credentials.cookie);
     }
     try {
         const response = await fetch(url, {
@@ -45,6 +51,13 @@ async function readSnapshotFromBackend(roomId, authHeader) {
         });
         if (response.ok) {
             const snapshot = await response.json();
+            // Validate the snapshot structure before returning
+            if (snapshot &&
+                typeof snapshot === "object" &&
+                !("documents" in snapshot)) {
+                logger_1.default.warn({ roomId, snapshotReceived: snapshot }, `[ROOMS] Invalid snapshot received from backend for room ${roomId}. Missing 'documents' property.`);
+                return undefined;
+            }
             logger_1.default.debug({ roomId, snapshotSize: JSON.stringify(snapshot).length }, `[ROOMS] Snapshot loaded successfully for room ${roomId}`);
             return snapshot;
         }
@@ -55,15 +68,13 @@ async function readSnapshotFromBackend(roomId, authHeader) {
         else {
             // Handle unexpected errors from the backend
             const errorBody = await response.text();
-            const err = new Error(// better logging context
-            `Backend failed to load snapshot for ${roomId}. Status: ${response.status}. Body: ${errorBody}. Headers: ${headers}`);
+            const err = new Error(`Backend failed to load snapshot for ${roomId}. Status: ${response.status}. Body: ${errorBody}.`);
             logger_1.default.error({
                 err,
                 roomId,
                 url,
                 responseStatus: response.status,
                 responseBody: errorBody,
-                responseHeader: headers,
             }, `[ROOMS] Error loading snapshot for room ${roomId}`);
             throw err;
         }
@@ -78,16 +89,17 @@ async function readSnapshotFromBackend(roomId, authHeader) {
  * @param roomId - The ID of the room.
  * @param room - The TLSocketRoom instance containing the state to save.
  */
-async function saveSnapshotToBackend(roomId, room, authHeader) {
+async function saveSnapshotToBackend(roomId, room, credentials) {
     const url = `${SNAPSHOT_STORAGE_URL}/${roomId}`;
     const snapshot = room.getCurrentSnapshot();
-    // Start with the required 'Accept' header
-    const headers = {
-        Accept: "application/json",
-    };
-    // Conditionally add the Authorization header if it exists
-    if (authHeader) {
-        headers["Authorization"] = authHeader;
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    // Prioritize Authorization header, but fall back to Cookie
+    if (credentials?.authorization) {
+        headers.append("Authorization", credentials.authorization);
+    }
+    else if (credentials?.cookie) {
+        headers.append("Cookie", credentials.cookie);
     }
     logger_1.default.debug({ roomId, url, snapshotSize: JSON.stringify(snapshot).length }, `[ROOMS] Saving snapshot for room ${roomId} to ${url}`);
     try {
@@ -103,10 +115,7 @@ async function saveSnapshotToBackend(roomId, room, authHeader) {
                 url,
                 responseStatus: response.status,
                 responseBody: errorBody,
-                responseHeaders: headers,
-            }, // No err: new Error() here, just context
-            `[ROOMS] Error saving snapshot for room ${roomId}: ${response.status} ${response.statusText}`);
-            // Log error but don't throw, to avoid breaking the save interval
+            }, `[ROOMS] Error saving snapshot for room ${roomId}: ${response.status} ${response.statusText}`);
         }
         else {
             logger_1.default.debug({ roomId }, `[ROOMS] Snapshot saved successfully for room ${roomId}`);
@@ -114,7 +123,6 @@ async function saveSnapshotToBackend(roomId, room, authHeader) {
     }
     catch (error) {
         logger_1.default.error({ err: error, roomId, url }, `[ROOMS] Network or fetch error saving snapshot for room ${roomId}`);
-        // Log error but don't throw
     }
 }
 /**
@@ -125,25 +133,21 @@ async function saveSnapshotToBackend(roomId, room, authHeader) {
  * @returns A promise resolving to the TLSocketRoom instance.
  * @throws Throws an error if backend interaction fails during creation.
  */
-async function getOrCreateRoom(roomId, authHeader) {
-    // Chain onto the mutex promise to ensure sequential access to the `rooms` map
+async function getOrCreateRoom(roomId, credentials) {
     createRoomMutex = createRoomMutex.then(async () => {
-        // Check if an active room instance already exists
         if (rooms.has(roomId)) {
             const existingRoomState = rooms.get(roomId);
             if (!existingRoomState.room.isClosed()) {
                 logger_1.default.debug({ roomId }, "[ROOMS] Active room instance found in memory.");
-                return; // Room exists and is active
+                return;
             }
             else {
                 logger_1.default.info({ roomId }, `[ROOMS] Found closed room ${roomId}, removing before creating new one.`);
-                rooms.delete(roomId); // Clean up closed room reference
+                rooms.delete(roomId);
             }
         }
         logger_1.default.info({ roomId }, `[ROOMS] Creating or recreating room: ${roomId}`);
-        // Fetch initial state from the backend API (can throw error)
-        const initialSnapshot = await readSnapshotFromBackend(roomId);
-        // Define child logger for the tldraw room instance
+        const initialSnapshot = await readSnapshotFromBackend(roomId, credentials);
         const tldrawInstanceLogger = logger_1.default.child({
             tldrawRoomId: roomId,
             component: "tldraw-sync-core",
@@ -173,86 +177,88 @@ async function getOrCreateRoom(roomId, authHeader) {
                 }
             },
         };
-        // Create the new room state object
         const newRoomState = {
             id: roomId,
             needsPersist: false,
             persistPromise: null,
-            authHeader: authHeader,
-            room: new sync_core_1.TLSocketRoom({
-                schema: schema_1.whiteboardSchema, // Our defined tldraw schema
-                initialSnapshot, // Initial state from backend (or undefined)
-                log: tldrawLogAdapter, // Logger for internal tldraw messages
-                /** Callback when a user session is removed (e.g., disconnects/times out) */
-                onSessionRemoved(roomInstance, args) {
-                    logger_1.default.debug({ roomId, remainingSessions: args.numSessionsRemaining }, `[ROOMS] Session removed from room ${roomId}. Remaining: ${args.numSessionsRemaining}`);
-                    // If last user leaves, trigger a final save and close the room
-                    if (args.numSessionsRemaining === 0) {
-                        logger_1.default.info({ roomId }, `[ROOMS] Last user left room ${roomId}. Triggering final save.`);
-                        // Ensure any pending periodic save completes first
-                        const savePromise = newRoomState.persistPromise ?? Promise.resolve();
-                        savePromise.finally(() => {
-                            logger_1.default.info({ roomId }, `[ROOMS] Performing final save for room ${roomId}...`);
-                            saveSnapshotToBackend(roomId, roomInstance).finally(() => {
-                                logger_1.default.info({ roomId }, `[ROOMS] Closing room ${roomId} after final save.`);
-                                roomInstance.close(); // Mark the tldraw room as closed
-                            });
-                        });
-                    }
-                },
-                /** Callback when data within the room changes */
-                onDataChange() {
-                    // Flag that the room needs to be saved on the next interval
-                    newRoomState.needsPersist = true;
-                },
-            }),
+            credentials,
+            room: null,
         };
-        // Store the new room state in our map
+        const roomInstance = new sync_core_1.TLSocketRoom({
+            schema: schema_1.whiteboardSchema,
+            initialSnapshot,
+            log: tldrawLogAdapter,
+            onSessionRemoved(roomInstance, args) {
+                logger_1.default.debug({ roomId, remainingSessions: args.numSessionsRemaining }, `[ROOMS] Session removed. Remaining: ${args.numSessionsRemaining}`);
+                if (args.numSessionsRemaining === 0) {
+                    logger_1.default.info({ roomId }, `[ROOMS] Last user left. Triggering final save.`);
+                    const savePromise = newRoomState.persistPromise ?? Promise.resolve();
+                    savePromise.finally(() => {
+                        logger_1.default.info({ roomId }, `[ROOMS] Performing final save...`);
+                        saveSnapshotToBackend(roomId, roomInstance, newRoomState.credentials).finally(() => {
+                            logger_1.default.info({ roomId }, `[ROOMS] Closing room after final save.`);
+                            roomInstance.close();
+                        });
+                    });
+                }
+            },
+            onDataChange() {
+                newRoomState.needsPersist = true;
+            },
+        });
+        newRoomState.room = roomInstance;
         rooms.set(roomId, newRoomState);
-        logger_1.default.info({ roomId }, `[ROOMS] Room ${roomId} created successfully.`);
+        logger_1.default.info({ roomId }, `[ROOMS] Room created successfully.`);
+        if (rooms.size > 0) {
+            startPersistenceInterval();
+        }
     });
-    // Wait for the mutex-protected operation (lookup/creation) to complete
     await createRoomMutex;
-    // Retrieve the room state (should always exist after the mutex)
     const roomState = rooms.get(roomId);
     if (!roomState || roomState.room.isClosed()) {
-        // Defensive check in case something went wrong
-        logger_1.default.error({ roomId }, `[ROOMS] Failed to get or create a valid room instance for ${roomId} after mutex.`);
+        logger_1.default.error({ roomId }, `[ROOMS] Failed to get or create a valid room instance after mutex.`);
         throw new Error(`Failed to retrieve valid room instance for ${roomId}`);
     }
-    // Return the tldraw room object
     return roomState.room;
 }
-// --- Periodic Persistence ---
-// Saves snapshots for rooms marked as `needsPersist` at regular intervals.
-setInterval(() => {
-    logger_1.default.debug("[ROOMS] Periodic persistence check initiated.");
-    let updatedRoomCount = 0;
-    for (const roomState of rooms.values()) {
-        // Clean up closed rooms from memory
-        if (roomState.room.isClosed()) {
-            logger_1.default.info({ roomId: roomState.id }, `[ROOMS] Removing closed room ${roomState.id} during periodic check.`);
-            rooms.delete(roomState.id);
-            continue;
+// --- Smart Periodic Persistence ---
+let persistenceInterval = null;
+function stopPersistenceInterval() {
+    if (persistenceInterval) {
+        logger_1.default.info("[ROOMS] No active rooms. Stopping periodic persistence.");
+        clearInterval(persistenceInterval);
+        persistenceInterval = null;
+    }
+}
+function startPersistenceInterval() {
+    if (persistenceInterval)
+        return;
+    logger_1.default.info("[ROOMS] First active room created. Starting periodic persistence.");
+    persistenceInterval = setInterval(() => {
+        logger_1.default.debug("[ROOMS] Periodic persistence check initiated.");
+        let updatedRoomCount = 0;
+        for (const roomState of rooms.values()) {
+            if (roomState.room.isClosed()) {
+                logger_1.default.info({ roomId: roomState.id }, `[ROOMS] Removing closed room during periodic check.`);
+                rooms.delete(roomState.id);
+                continue;
+            }
+            if (roomState.needsPersist && !roomState.persistPromise) {
+                roomState.needsPersist = false;
+                updatedRoomCount++;
+                roomState.persistPromise = saveSnapshotToBackend(roomState.id, roomState.room, roomState.credentials)
+                    .catch((error) => {
+                    logger_1.default.error({ err: error, roomId: roomState.id }, `[ROOMS] Periodic save failed.`);
+                })
+                    .finally(() => {
+                    roomState.persistPromise = null;
+                    logger_1.default.debug({ roomId: roomState.id }, "[ROOMS] Persistence promise cleared.");
+                });
+            }
         }
-        // If room has changes and isn't already saving, start a save operation
-        if (roomState.needsPersist && !roomState.persistPromise) {
-            roomState.needsPersist = false; // Reset flag
-            updatedRoomCount++;
-            // Track the save operation promise
-            roomState.persistPromise = saveSnapshotToBackend(roomState.id, roomState.room, roomState.authHeader)
-                .catch((error) => {
-                // Log errors from periodic save but don't stop the interval
-                logger_1.default.error({ err: error, roomId: roomState.id }, // Pass error object
-                `[ROOMS] Periodic save failed for room ${roomState.id}`);
-            })
-                .finally(() => {
-                // Clear the promise tracker when done
-                roomState.persistPromise = null;
-                logger_1.default.debug({ roomId: roomState.id }, "[ROOMS] Persistence promise cleared.");
-            });
+        logger_1.default.debug({ roomsChecked: rooms.size, roomsUpdatedThisInterval: updatedRoomCount }, "[ROOMS] Periodic persistence check completed.");
+        if (rooms.size === 0) {
+            stopPersistenceInterval();
         }
-    }
-    logger_1.default.debug({ roomsChecked: rooms.size, roomsUpdatedThisInterval: updatedRoomCount }, "[ROOMS] Periodic persistence check completed.");
-}, SAVE_INTERVAL_MS);
-// --- End Periodic Persistence ---
+    }, SAVE_INTERVAL_MS);
+}

package/dist/server.js

@@ -48,13 +48,17 @@ app.register(async (svc) => {
         const sessionId = req.query?.sessionId;
         // Client provides sessionId via query param, handled by TLSocketRoom
         // Capture the Authorization header from the incoming request
-        const authHeader = req.headers.authorization;
-        if (!authHeader) {
+        // Capture both potential auth headers
+        const credentials = {
+            authorization: req.headers.authorization,
+            cookie: req.headers.cookie,
+        };
+        if (!credentials) {
             req.log.warn({ roomId }, `[SERVER] Connection attempt without Authorization header.`);
         }
         try {
             // Get or create the room instance (loads/creates state)
-            const room = await (0, rooms_1.getOrCreateRoom)(roomId, authHeader);
+            const room = await (0, rooms_1.getOrCreateRoom)(roomId, credentials);
             req.log.debug(`[SERVER] Handling WebSocket connection for room ${roomId}`);
             room.handleSocketConnect({ sessionId, socket });
         }
@@ -73,7 +77,10 @@ app.register(async (svc) => {
     svc.put("/assets/:id", async (req, reply) => {
         const { id } = req.params;
         const contentType = req.headers["content-type"] || "application/octet-stream";
-        const authHeader = req.headers.authorization;
+        const credentials = {
+            authorization: req.headers.authorization,
+            cookie: req.headers.cookie,
+        };
         // Extract original filename from custom header
         const originalFilenameHeaderRaw = req.headers["x-original-filename"];
         const originalFilenameHeader = Array.isArray(originalFilenameHeaderRaw)
@@ -108,7 +115,7 @@ app.register(async (svc) => {
         }
         try {
             // Call the asset storage logic (which proxies to the backend)
-            await (0, assets_1.storeAsset)(id, req.raw, contentType, originalFilename, authHeader);
+            await (0, assets_1.storeAsset)(id, req.raw, contentType, originalFilename, credentials);
             req.log.debug({ assetId: id }, `[SERVER] Asset stored successfully.`);
             reply.code(200).send({ success: true });
         }
@@ -128,11 +135,14 @@ app.register(async (svc) => {
     app.get("/assets/:id", async (req, reply) => {
         const { id } = req.params;
         req.log.debug({ assetId: id }, `[SERVER] GET /assets/:id`);
-        // Capture the auth header if included from client
-        const authHeader = req.headers.authorization;
+        // Capture the credentials if included from client
+        const credentials = {
+            authorization: req.headers.authorization,
+            cookie: req.headers.cookie,
+        };
         try {
             // Call the asset loading logic (which proxies to the backend)
-            const { stream: dataStream, contentType } = await (0, assets_1.loadAsset)(id, authHeader);
+            const { stream: dataStream, contentType } = await (0, assets_1.loadAsset)(id, credentials);
             req.log.debug({ assetId: id, contentType: contentType }, `[SERVER] Asset loaded. Sending reply...`);
             // Set the correct Content-Type header and send the stream
             reply.header("Content-Type", contentType);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smoothglue/sync-whiteboard",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/server.js",
   "scripts": {
     "dev": "ts-node-dev --respawn --transpile-only src/server.ts",
@@ -19,10 +19,10 @@
     "README.md",
     "LICENSE"
   ],
-  "homepage": "https://gitlab.com/braingu/realtime-sync/-/blob/main/sync-whiteboard/README.md",
+  "homepage": "https://code.build.smoothglue.io/braingu/smoothglue/frontend/sync-whiteboard/blob/main/README.md",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/braingu/realtime-sync/-/tree/main/sync-whiteboard"
+    "url": "https://code.build.smoothglue.io/braingu/smoothglue/frontend/sync-whiteboard.git"
   },
   "devDependencies": {
     "@types/node": "^22.14.1",