Ensure collaboration is working as expected

Author: goanpeca

CLAUDE.md

@@ -25,6 +25,12 @@ npm run type-check           # TypeScript checking
 npm run check                # Run all checks (format, lint, type)
 npm run check:fix            # Auto-fix and check all
 npm test                     # Run tests
+
+# Development Examples (packages/react)
+cd packages/react
+npm run start                 # Start with remote server config
+npm run start-local          # Start with local server (both webpack + jupyter)
+npm run start-local:webpack  # Start only webpack with local config
 ```
 
 ## Requirements
@@ -39,9 +45,12 @@ npm test                     # Run tests
 - `.prettierrc.json` - Formatter config
 - `.prettierignore` - Excludes MDX files
 - `patches/` - Third-party fixes (auto-applied)
-- `packages/react/webpack.config.js` - Build config
+- `packages/react/webpack.config.js` - Build config (change ENTRY to switch examples)
+- `packages/react/public/index.html` - Remote server config
+- `packages/react/public/index-local.html` - Local server config
+- `dev/config/jupyter_server_config.py` - Jupyter server settings
 
-## Recent Fixes (2024)
+## Recent Fixes (2024-2025)
 
 - MDX comments: `{/_` → `{/** **/}` in 13 files
 - Node requirement: 18 → 20+
@@ -51,16 +60,58 @@ npm test                     # Run tests
 - React 18 deprecations fixed
 - Storybook CI: Added wait-on and --url for test reliability
 - Terminal component: Fixed BoxPanel initialization issue
+- **Collaboration fix**: Updated WebSocket room path from `api/collaboration/document` to `api/collaboration/room` for jupyter-collaboration v4.x compatibility
 
 ## Common Issues
 
 1. **Storybook errors**: Check MDX syntax, run `npx patch-package`
 2. **Node version**: Use Node 20+ (`nvm use`)
 3. **Lint errors**: Run `npm run lint:fix`
 4. **Build fails**: Run `npm run type-check`
+5. **Collaboration not working**:
+   - Ensure `jupyter-collaboration` is installed (`pip install jupyter-collaboration`)
+   - Enable in config: `c.LabApp.collaborative = True` in `dev/config/jupyter_server_config.py`
+   - Restart Jupyter server after config changes
+   - Check WebSocket connections are not blocked
+
+## Testing Collaboration
+
+1. **Install dependencies**:
+
+   ```bash
+   pip install jupyter-collaboration jupyterlab
+   ```
+
+2. **Enable collaboration** in `dev/config/jupyter_server_config.py`:
+
+   ```python
+   c.LabApp.collaborative = True
+   ```
+
+3. **Start servers**:
+
+   ```bash
+   npm run jupyter:server              # Terminal 1
+   cd packages/react && npm run start-local:webpack  # Terminal 2
+   ```
+
+4. **Test**: Open http://localhost:3208/ in two browser windows
+
+## Example Selection
+
+To change the example being served, edit `packages/react/webpack.config.js`:
+
+```javascript
+const ENTRY = './src/examples/NotebookCollaborative'; // Change this line
+```
+
+Then restart webpack.
 
 ## AI Assistant Notes
 
 - Always use npm, not yarn
 - Prefer editing over creating files
 - Run lint/type checks before committing
+- Comment out old code instead of deleting when making changes
+
+- Use the playwright MCP server when you need to actually see how the frendered pages look

dev/config/jupyter_server_config.py

@@ -106,4 +106,4 @@
 # JupyterLab
 #################
 
-c.LabApp.collaborative = False
+c.LabApp.collaborative = True

dev/notebooks/collaboration.ipynb

@@ -0,0 +1,54 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Collaboration Example\n",
+    "This notebook is for testing real-time collaboration."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print('Hello from collaboration notebook!')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Test collaboration by editing this cell\n",
+    "x = 10a\n",
+    "y = 20asd\n",
+    "print(f'x + y = {x + y}') asass"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.13.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

packages/react/package.json

@@ -54,7 +54,7 @@
     "start-noconfig": "cross-env NO_CONFIG=true webpack serve",
     "start-local": "run-p -c 'start-local:*'",
     "start-local:webpack": "cross-env LOCAL_JUPYTER_SERVER=true webpack serve",
-    "start-local:jupyter-server": "cd ./../.. && make start-jupyter-server",
+    "start-local:jupyter-server": "cd ./../.. && npm run jupyter:server",
     "stylelint": "npm stylelint:check --fix",
     "stylelint:check": "stylelint --cache \"style/**/*.css\"",
     "test": "jest --coverage",

packages/react/public/index-local.html

@@ -28,7 +28,7 @@
         "appUrl": "/lab",
         "themesUrl": "/lab/api/themes",
         "disableRTC": false,
-        "terminalsAvailable": "false",
+        "terminalsAvailable": "true",
         "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
         "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
       }

packages/react/src/components/notebook/Notebook.tsx

@@ -301,6 +301,7 @@ export const Notebook = (props: INotebookProps) => {
         if (collaborative == 'jupyter') {
           const token =
             jupyterReactStore.getState().jupyterConfig?.jupyterServerToken;
+
           const session = await requestJupyterCollaborationSession(
             'json',
             'notebook',

packages/react/src/jupyter/collaboration/JupyterCollaboration.ts

@@ -7,7 +7,7 @@
 import { URLExt } from '@jupyterlab/coreutils';
 import { Contents, ServerConnection } from '@jupyterlab/services';
 
-export const COLLABORATION_ROOM_URL_PATH = 'api/collaboration/document';
+export const COLLABORATION_ROOM_URL_PATH = 'api/collaboration/room';
 
 export const COLLABORATION_SESSION_URL_PATH = 'api/collaboration/session';
 

packages/react/webpack.config.js

@@ -49,12 +49,12 @@ const ENTRY =
   // './src/examples/NotebookCellSidebar';
   // './src/examples/NotebookCellToolbar';
   // './src/examples/NotebookColormode';
-  // './src/examples/NotebookCollaborative';
-  // './src/examples/NotebookExtension';
-  // './src/examples/NotebookKernel';
-  // './src/examples/NotebookKernelChange';
-  // './src/examples/NotebookLess';
-  './src/examples/NotebookLite';
+  './src/examples/NotebookCollaborative';
+// './src/examples/NotebookExtension';
+// './src/examples/NotebookKernel';
+// './src/examples/NotebookKernelChange';
+// './src/examples/NotebookLess';
+// './src/examples/NotebookLite';
 // './src/examples/NotebookLiteContext';
 // './src/examples/NotebookLocalServer';
 // './src/examples/NotebookMutationsKernel';