chore: pre-release v0.2.1-dev

* feat/upload-bar: add a upload bar when user upload file, indicate the upload process

* feat/save-loading-status: add save status when click back button from editor

* fix: address PR review issues in upload and save features

- Replace deprecated substr() with substring() in UploadContext
- Fix broken error handling that checked stale task status
- Fix missing useEffect dependency in UploadStatus
- Fix CSS class conflict in progress bar styling
- Add error recovery for save state in Editor (reset on failure)
- Use .finally() instead of .then() to ensure refresh on upload failure
- Fix inconsistent indentation in UploadContext

* fix e2e tests

---------

Co-authored-by: Zimeng Xiong <zxzimeng@gmail.com>

README.md

@@ -1,6 +1,6 @@
 <img src="logoExcaliDash.png" alt="ExcaliDash Logo" width="80" height="88">
 
-# ExcaliDash
+# ExcaliDash v0.1.8
 
 ![License](https://img.shields.io/github/license/zimengxiong/ExcaliDash)
 ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

RELEASE.md

@@ -27,17 +27,3 @@ CSRF Protection (8a78b2b)
   - Updated docker-compose configurations with new environment variables
   - E2E test suite improvements and reliability fixes
   - Added Kubernetes deployment note in README
-
-### Kubernetes
-
-  A `CSRF_SECRET` environment variable is now required for CSRF protection. Generate a secure 32+ character random string:
-
-  ```bash
-  openssl rand -base64 32
-
-  Add it to your deployment:
-  - Docker Compose: Add CSRF_SECRET=<your-secret> to the backend service environment
-  - Kubernetes: Add to your ConfigMap/Secret and reference in the backend deployment
-
-  If not set, the backend will refuse to start.
-  ```

VERSION

@@ -1 +1 @@
-0.3.0
+0.2.1

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "0.3.0",
+  "version": "0.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {

backend/src/security.ts

@@ -532,6 +532,7 @@ export const validateImportedDrawing = (data: any): boolean => {
 // CSRF Protection
 // ============================================================================
 
+const CSRF_TOKEN_LENGTH = 32;
 const CSRF_TOKEN_HEADER = "x-csrf-token";
 const CSRF_TOKEN_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
 const CSRF_TOKEN_FUTURE_SKEW_MS = 5 * 60 * 1000; // 5 minutes clock skew tolerance

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.3.0",
+  "version": "0.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.3.0",
+      "version": "0.1.8",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -162,6 +162,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -516,6 +517,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -559,6 +561,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2609,8 +2612,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2775,6 +2777,7 @@
       "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2786,6 +2789,7 @@
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2856,6 +2860,7 @@
       "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.47.0",
         "@typescript-eslint/types": "8.47.0",
@@ -3219,6 +3224,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3269,7 +3275,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -3499,6 +3504,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -3830,6 +3836,7 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
       "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -4203,6 +4210,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -4422,9 +4430,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/diff": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.2.tgz",
-      "integrity": "sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -4442,8 +4450,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dompurify": {
       "version": "3.1.6",
@@ -4662,6 +4669,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5495,6 +5503,7 @@
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.11.0.tgz",
       "integrity": "sha512-zKfoBBD1uDw3rljwHkt0fWuja1B76R7CjznuBO+mSX6jpsO1EBeWNRKpeaQho9yPI/pvCv4recGfgOXGxwPZvQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.20.0"
       },
@@ -5842,7 +5851,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -6872,6 +6880,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -7037,7 +7046,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -7053,7 +7061,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7109,6 +7116,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7121,6 +7129,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7134,8 +7143,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.18.0",
@@ -7850,6 +7858,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7988,6 +7997,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8177,6 +8187,7 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -8270,6 +8281,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8596,6 +8608,7 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/context/UploadContext.tsx

@@ -48,7 +48,7 @@ export const UploadProvider: React.FC<{ children: ReactNode }> = ({ children })
 
   const uploadFiles = useCallback(async (files: File[], targetCollectionId: string | null) => {
     const newTasks: UploadTask[] = files.map(f => ({
-      id: crypto.randomUUID(),
+      id: Math.random().toString(36).substring(2, 11),
       fileName: f.name,
       status: 'pending',
       progress: 0
@@ -56,12 +56,12 @@ export const UploadProvider: React.FC<{ children: ReactNode }> = ({ children })
 
     setTasks(prev => [...newTasks, ...prev]);
 
-    // Map file index to task ID for progress callbacks (handles duplicate filenames)
-    const indexToTaskId = new Map<number, string>();
-    newTasks.forEach((t, index) => indexToTaskId.set(index, t.id));
+    // Map file names to task IDs for progress callbacks
+    const fileTaskMap = new Map<string, string>();
+    newTasks.forEach(t => fileTaskMap.set(t.fileName, t.id));
 
-    const handleProgress = (fileIndex: number, status: UploadStatus, progress: number, error?: string) => {
-      const taskId = indexToTaskId.get(fileIndex);
+    const handleProgress = (fileName: string, status: UploadStatus, progress: number, error?: string) => {
+      const taskId = fileTaskMap.get(fileName);
       if (taskId) {
         updateTask(taskId, { status, progress, error });
       }

frontend/src/utils/importUtils.ts

@@ -7,7 +7,7 @@ export const importDrawings = async (
   targetCollectionId: string | null,
   onSuccess?: () => void | Promise<void>,
   onProgress?: (
-    fileIndex: number,
+    fileName: string,
     status: UploadStatus,
     progress: number,
     error?: string
@@ -25,20 +25,12 @@ export const importDrawings = async (
   let failCount = 0;
   const errors: string[] = [];
 
-  // Build a map from drawingFile index to original file index for progress reporting
-  const originalIndexMap = new Map<number, number>();
-  drawingFiles.forEach((df, i) => {
-    const originalIndex = files.indexOf(df);
-    originalIndexMap.set(i, originalIndex);
-  });
-
   // We process files in parallel (Promise.all) but we could limit concurrency if needed.
   // For now, full parallel is fine as browser limits connection count anyway.
   await Promise.all(
-    drawingFiles.map(async (file, drawingIndex) => {
-      const fileIndex = originalIndexMap.get(drawingIndex) ?? drawingIndex;
+    drawingFiles.map(async (file) => {
       try {
-        if (onProgress) onProgress(fileIndex, 'processing', 0); // Parsing phase
+        if (onProgress) onProgress(file.name, 'processing', 0); // Parsing phase
 
         const text = await file.text();
         const data = JSON.parse(text);
@@ -69,7 +61,7 @@ export const importDrawings = async (
           preview: svg.outerHTML,
         };
 
-        if (onProgress) onProgress(fileIndex, 'uploading', 0);
+        if (onProgress) onProgress(file.name, 'uploading', 0);
 
         await api.post("/drawings", payload, {
           headers: {
@@ -81,12 +73,12 @@ export const importDrawings = async (
               const percentCompleted = Math.round(
                 (progressEvent.loaded * 100) / progressEvent.total
               );
-              onProgress(fileIndex, 'uploading', percentCompleted);
+              onProgress(file.name, 'uploading', percentCompleted);
             }
           },
         });
 
-        if (onProgress) onProgress(fileIndex, 'success', 100);
+        if (onProgress) onProgress(file.name, 'success', 100);
         successCount++;
 
       } catch (err: any) {
@@ -98,7 +90,7 @@ export const importDrawings = async (
           err?.message ||
           "Upload failed";
         errors.push(`${file.name}: ${errorMessage}`);
-        if (onProgress) onProgress(fileIndex, 'error', 0, errorMessage);
+        if (onProgress) onProgress(file.name, 'error', 0, errorMessage);
       }
     })
   );

frontend/vite.config.ts

@@ -15,16 +15,19 @@ try {
   console.warn("Unable to read VERSION file:", error);
 }
 
-const appVersion = process.env.VITE_APP_VERSION?.trim() || versionFromFile;
-const buildLabel = process.env.VITE_APP_BUILD_LABEL?.trim() || "local development build";
+if (
+  !process.env.VITE_APP_VERSION ||
+  process.env.VITE_APP_VERSION.trim().length === 0
+) {
+  process.env.VITE_APP_VERSION = versionFromFile;
+  if (!process.env.VITE_APP_BUILD_LABEL) {
+    process.env.VITE_APP_BUILD_LABEL = "local development build";
+  }
+}
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  define: {
-    'import.meta.env.VITE_APP_VERSION': JSON.stringify(appVersion),
-    'import.meta.env.VITE_APP_BUILD_LABEL': JSON.stringify(buildLabel),
-  },
   server: {
     proxy: {
       "/api": {