feat: Implement live collaboration and Shareable link

* feat: Implement collaboration room functionality with cursor states and member management

- Added support for collaboration rooms in the relay server, including room creation, member joining, and cursor color assignment.
- Implemented room cleanup logic to notify remaining members when a room is emptied.
- Introduced a share server for storing and retrieving encrypted scene snapshots via HTTP API.
- Integrated scene encryption and sharing service using Web Crypto API for client-side encryption.
- Enhanced main application to support sharing scenes and managing collaboration room states.
- Updated styles for improved UI elements.

Author: SahanUday

.github/workflows/e2e-tests.yml

@@ -30,7 +30,7 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Install Jac and dependencies
-        run: pip install jaclang jac-client jac-scale pytest pytest-playwright pytest-timeout byllm
+        run: pip install jaclang jac-client jac-scale[data] pytest pytest-playwright pytest-timeout byllm
 
       - name: Install Playwright browsers
         run: python -m playwright install --with-deps chromium
@@ -41,6 +41,9 @@ jobs:
       - name: Install local MCP server into jac venv
         run: .jac/venv/bin/pip install ./mcp-server --force-reinstall --no-deps
 
+      - name: Install jac-scale data dependencies into jac venv
+        run: .jac/venv/bin/pip install "jac-scale[data]"
+
       - name: Run E2E tests
         run: pytest tests/e2e/ -v --timeout=300
 

Dockerfile

@@ -20,7 +20,7 @@ RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
     && rm -rf /var/lib/apt/lists/*
 
 # Install Jac packages from PyPI
-RUN pip install --no-cache-dir jaclang jac-client jac-scale byllm
+RUN pip install --no-cache-dir jaclang jac-client jac-scale[all] byllm
 
 # Install Bun (required for jac client-side dependencies)
 RUN curl -fsSL https://bun.sh/install | bash && \

components/Canvas.cl.jac

@@ -14,6 +14,7 @@ import from "..constants.tools" { TOOL_SHORTCUTS }
 import from .canvas.CanvasRenderer { CanvasRenderer }
 import from .canvas.TextInput { TextInput }
 import from .canvas.ContextMenu { ContextMenu }
+import from .canvas.collaborator_cursors { CollaboratorCursors }
 import from .layout.ShortcutHelp { ShortcutHelp }
 import from .layout.ConfirmDialog { ConfirmDialog }
 
@@ -29,14 +30,31 @@ def:pub Canvas(props: dict) -> JsxElement {
     currentLineStyle = props.currentLineStyle or "solid";
     currentCurveStyle = props.currentCurveStyle or "curved";
     currentFillColor = props.currentFillColor or "transparent";
+    roomState = props.roomState or {};
+    onSessionEnded = props.onSessionEnded;
+    endSessionRef = props.endSessionRef;
+    updateUsernameRef = props.updateUsernameRef;
+    onParticipantsChange = props.onParticipantsChange;
 
     canvasHook = useCanvas();
     drawingState = useDrawingState();
     elementsHook = useElements();
     selectionHook = useSelection();
     viewportHook = useViewport();
     textInputHook = useTextInput();
-    useWebSocket(elementsHook, viewportHook, canvasHook.canvasRef, canvasHook);
+    wsHook = useWebSocket(elementsHook, viewportHook, canvasHook.canvasRef, canvasHook, roomState, onSessionEnded);
+    wsHookRef = useRef(wsHook);
+    wsHookRef.current = wsHook;
+    # Expose sendEndSession to parent via ref
+    if endSessionRef and wsHook.sendEndSessionRef {
+        endSessionRef.current = wsHook.sendEndSessionRef.current;
+    }
+    if updateUsernameRef and wsHook.sendUpdateUsernameRef {
+        updateUsernameRef.current = wsHook.sendUpdateUsernameRef.current;
+    }
+    hasBroadcastMountedRef = useRef(False);
+    lastCursorBroadcastRef = useRef(0);
+    lastDrawBroadcastRef = useRef(0);
 
     canvasRef = canvasHook.canvasRef;
     containerRef = canvasHook.containerRef;
@@ -74,6 +92,28 @@ def:pub Canvas(props: dict) -> JsxElement {
         editingShapeId = textInputHook.textInput.editingShapeId;
     }
 
+    can with [elementsHook.elements] entry {
+        if not hasBroadcastMountedRef.current {
+            hasBroadcastMountedRef.current = True;
+        } elif wsHookRef.current and wsHookRef.current.isApplyingRemoteRef and wsHookRef.current.isApplyingRemoteRef.current {
+            wsHookRef.current.isApplyingRemoteRef.current = False;
+        } elif wsHookRef.current and wsHookRef.current.sendRoomBroadcastRef and wsHookRef.current.sendRoomBroadcastRef.current {
+            wsHookRef.current.sendRoomBroadcastRef.current(elementsHook.elements);
+        }
+    }
+
+    can with [wsHook.participants, wsHook.hostSessionId] entry {
+        if onParticipantsChange {
+            # Merge hostSessionId as __hostSid meta key so parent can read it
+            merged = Object.assign({}, wsHook.participants);
+            if wsHook.hostSessionId {
+                merged["__hostSid"] = wsHook.hostSessionId;
+            }
+            onParticipantsChange(merged);
+        }
+        return lambda -> None {};
+    }
+
     can with [elementsHook.elements, canvasHook.canvasSize, viewportHook.zoom, viewportHook.panOffset, selectionHook.selectedElement, selectionHook.selectedElements, selectionHook.isBoxSelecting, selectionHook.boxStart, selectionHook.boxEnd, drawingState.isDrawing, textInputHook.textInput] entry {
         canvas = canvasRef.current;
         if canvas {
@@ -409,6 +449,15 @@ def:pub Canvas(props: dict) -> JsxElement {
                 });
             };
         }
+        if props.elementsForShareRef {
+            props.elementsForShareRef.current = elementsHook.elements;
+        }
+        if props.setElementsRef {
+            props.setElementsRef.current = lambda elements: any -> None {
+                elementsHook.setElements(elements);
+                selectionHook.clearSelection();
+            };
+        }
     }
 
     def handleCanvasClick(e: dict) -> None {
@@ -1159,6 +1208,17 @@ def:pub Canvas(props: dict) -> JsxElement {
     def handleMouseMove(e: dict) -> None {
         pos = getMousePosition(e, canvasRef.current, viewportHook.panOffset, viewportHook.zoom);
 
+        # Throttled cursor broadcast (50ms) — only when in a room
+        cur_now = Date.now();
+        if cur_now - lastCursorBroadcastRef.current > 50 {
+            lastCursorBroadcastRef.current = cur_now;
+            cur_ws_hook = wsHookRef.current;
+            if cur_ws_hook and cur_ws_hook.sendCursorBroadcastRef and cur_ws_hook.sendCursorBroadcastRef.current {
+                cur_stored_name = localStorage.getItem("jasketch_username") or "Anonymous";
+                cur_ws_hook.sendCursorBroadcastRef.current(pos.x, pos.y, cur_stored_name);
+            }
+        }
+
         if viewportHook.isPanning {
             viewportHook.handlePan(e.movementX, e.movementY);
             return;
@@ -1642,6 +1702,38 @@ def:pub Canvas(props: dict) -> JsxElement {
             drawPreview(previewCtx, currentTool, drawingState.startPoint, previewEnd, currentColor, currentStrokeWidth);
             previewCtx.restore();
         }
+
+        # Throttled live drawing broadcast (80ms) — sends in-progress element as __draft__
+        if drawingState.isDrawing {
+            draw_now = Date.now();
+            if draw_now - lastDrawBroadcastRef.current > 80 {
+                lastDrawBroadcastRef.current = draw_now;
+                preview_ws_hook = wsHookRef.current;
+                if preview_ws_hook and preview_ws_hook.sendRoomPreviewRef and preview_ws_hook.sendRoomPreviewRef.current {
+                    live_draft_el = None;
+                    if currentTool == "freehand" and drawingState.currentPath and drawingState.currentPath.length > 0 {
+                        live_draft_el = {"type": "freehand", "id": "__draft__", "points": drawingState.currentPath, "color": currentColor, "strokeWidth": currentStrokeWidth, "lineStyle": "solid", "opacity": currentOpacity};
+                    } elif currentTool == "rectangle" and drawingState.startPoint {
+                        ldraft_rw = pos.x - drawingState.startPoint.x;
+                        ldraft_rh = pos.y - drawingState.startPoint.y;
+                        live_draft_el = {"type": "rectangle", "id": "__draft__", "x": drawingState.startPoint.x, "y": drawingState.startPoint.y, "width": ldraft_rw, "height": ldraft_rh, "color": currentColor, "strokeWidth": currentStrokeWidth, "fillColor": currentFillColor, "lineStyle": currentLineStyle, "opacity": currentOpacity};
+                    } elif currentTool == "circle" and drawingState.startPoint {
+                        ldraft_cw = pos.x - drawingState.startPoint.x;
+                        ldraft_ch = pos.y - drawingState.startPoint.y;
+                        live_draft_el = {"type": "circle", "id": "__draft__", "x": drawingState.startPoint.x, "y": drawingState.startPoint.y, "width": ldraft_cw, "height": ldraft_ch, "color": currentColor, "strokeWidth": currentStrokeWidth, "fillColor": currentFillColor, "lineStyle": currentLineStyle, "opacity": currentOpacity};
+                    } elif currentTool == "diamond" and drawingState.startPoint {
+                        ldraft_dw = pos.x - drawingState.startPoint.x;
+                        ldraft_dh = pos.y - drawingState.startPoint.y;
+                        live_draft_el = {"type": "diamond", "id": "__draft__", "x": drawingState.startPoint.x, "y": drawingState.startPoint.y, "width": ldraft_dw, "height": ldraft_dh, "color": currentColor, "strokeWidth": currentStrokeWidth, "fillColor": currentFillColor, "lineStyle": currentLineStyle, "opacity": currentOpacity};
+                    } elif (currentTool == "line" or currentTool == "arrow") and drawingState.startPoint {
+                        live_draft_el = {"type": currentTool, "id": "__draft__", "x1": drawingState.startPoint.x, "y1": drawingState.startPoint.y, "x2": pos.x, "y2": pos.y, "color": currentColor, "strokeWidth": currentStrokeWidth, "lineStyle": currentLineStyle, "curveStyle": currentCurveStyle, "opacity": currentOpacity};
+                    }
+                    if live_draft_el {
+                        preview_ws_hook.sendRoomPreviewRef.current(elementsHook.elements.concat([live_draft_el]));
+                    }
+                }
+            }
+        }
     }
 
     def handleMouseUp(e: dict) -> None {
@@ -1857,6 +1949,13 @@ def:pub Canvas(props: dict) -> JsxElement {
                 onMouseLeave={handleMouseLeave}
             />
 
+            <CollaboratorCursors
+                cursor_states={wsHook.cursorStates or {}}
+                zoom={viewportHook.zoom}
+                pan_x={viewportHook.panOffset.x}
+                pan_y={viewportHook.panOffset.y}
+            />
+
             <TextInput
                 textInput={textInputHook.textInput}
                 textInputRef={textInputRef}

components/canvas/collaborator_cursors.cl.jac

@@ -0,0 +1,39 @@
+"""CollaboratorCursors — Render other collaborators' cursors and usernames on the canvas."""
+
+def:pub CollaboratorCursors(cursor_states: dict, zoom: float, pan_x: float, pan_y: float) -> any {
+    if not cursor_states {
+        return None;
+    }
+
+    cursor_sids: list = Object.keys(cursor_states);
+    if not cursor_sids or cursor_sids.length == 0 {
+        return None;
+    }
+
+    return <div className="absolute inset-0 pointer-events-none overflow-hidden z-30">
+        {[<div
+            key={csid}
+            className="absolute flex flex-col items-start"
+            style={{
+                "left": (cursor_states[csid].x * zoom + pan_x) + "px",
+                "top": (cursor_states[csid].y * zoom + pan_y) + "px",
+                "transform": "translate(-4px, -4px)"
+            }}
+        >
+            <svg width="14" height="14" viewBox="0 0 14 14">
+                <path
+                    d="M0 0 L0 14 L4 10 L7 13 L9 12 L6 9 L10 9 Z"
+                    fill={cursor_states[csid].color or "#666"}
+                    stroke="white"
+                    strokeWidth="0.8"
+                />
+            </svg>
+            <div
+                className="text-xs font-medium px-1.5 py-0.5 rounded-sm whitespace-nowrap mt-0.5"
+                style={{"backgroundColor": cursor_states[csid].color or "#666", "color": "white", "fontSize": "11px"}}
+            >
+                {cursor_states[csid].username or "Anonymous"}
+            </div>
+        </div> for csid in Object.keys(cursor_states)]}
+    </div>;
+}

components/canvas/join_name_overlay.cl.jac

@@ -0,0 +1,46 @@
+"""JoinNameOverlay — name prompt shown when opening a collaboration link."""
+
+def:pub JoinNameOverlay(on_join: any) -> any {
+    has name_value: str = localStorage.getItem("jasketch_username") or "";
+
+    def handle_join() -> None {
+        name = name_value.strip() or "Anonymous";
+        localStorage.setItem("jasketch_username", name);
+        on_join(name);
+    }
+
+    return <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="bg-white rounded-lg shadow-lg w-full max-w-sm mx-4">
+            <div className="border-b px-6 py-4">
+                <h2 className="text-lg font-semibold">{"Join Collaboration Session"}</h2>
+            </div>
+            <div className="p-6 space-y-4">
+                <p className="text-sm text-gray-600">
+                    {"You've been invited to collaborate. Set your display name before joining."}
+                </p>
+                <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                        {"Display Name"}
+                    </label>
+                    <input
+                        type="text"
+                        value={name_value}
+                        onChange={lambda e: any -> None { name_value = e.target.value; }}
+                        onKeyDown={lambda e: any -> None {
+                            if e.key == "Enter" { handle_join(); }
+                        }}
+                        className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Enter your name (optional)"
+                        autoFocus={True}
+                    />
+                </div>
+                <button
+                    onClick={lambda -> None { handle_join(); }}
+                    className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 rounded-md transition"
+                >
+                    {"Join"}
+                </button>
+            </div>
+        </div>
+    </div>;
+}