fix test failures, new export/backup solutions

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.3.2",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 6767",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",

frontend/playwright.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: "html",
   use: {
-    baseURL: "http://localhost:5173",
+    baseURL: "http://localhost:6767",
     trace: "on-first-retry",
     screenshot: "only-on-failure",
   },
@@ -29,7 +29,7 @@ export default defineConfig({
     },
     {
       command: "npm run dev",
-      url: "http://localhost:5173",
+      url: "http://localhost:6767",
       reuseExistingServer: false,
       timeout: 120000,
     },

frontend/src/api/index.ts

@@ -17,6 +17,14 @@ export { api as default };
 // JWT Token Management
 const TOKEN_KEY = 'excalidash-access-token';
 const REFRESH_TOKEN_KEY = 'excalidash-refresh-token';
+const USER_KEY = 'excalidash-user';
+
+type RetriableRequestConfig = {
+  _retry?: boolean;
+  _csrfRetry?: boolean;
+  url?: string;
+  headers?: Record<string, string>;
+};
 
 const getAuthToken = (): string | null => {
   if (typeof window === 'undefined') return null;
@@ -28,9 +36,6 @@ let csrfToken: string | null = null;
 let csrfHeaderName: string = "x-csrf-token";
 let csrfTokenPromise: Promise<void> | null = null;
 
-/**
- * Fetch a fresh CSRF token from the server
- */
 export const fetchCsrfToken = async (): Promise<void> => {
   try {
     const response = await axios.get<{ token: string; header: string }>(
@@ -44,9 +49,6 @@ export const fetchCsrfToken = async (): Promise<void> => {
   }
 };
 
-/**
- * Ensure we have a valid CSRF token, fetching one if needed
- */
 const ensureCsrfToken = async (): Promise<void> => {
   if (csrfToken) return;
 
@@ -59,13 +61,55 @@ const ensureCsrfToken = async (): Promise<void> => {
   await csrfTokenPromise;
 };
 
-/**
- * Clear the cached CSRF token (useful for handling 403 errors)
- */
 export const clearCsrfToken = (): void => {
   csrfToken = null;
 };
 
+const clearStoredAuth = () => {
+  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(REFRESH_TOKEN_KEY);
+  localStorage.removeItem(USER_KEY);
+};
+
+const redirectToLogin = () => {
+  if (window.location.pathname !== '/login') {
+    window.location.href = '/login';
+  }
+};
+
+let refreshPromise: Promise<string> | null = null;
+
+const refreshAccessToken = async (): Promise<string> => {
+  if (!refreshPromise) {
+    refreshPromise = (async () => {
+      const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
+      if (!refreshToken) {
+        throw new Error("Missing refresh token");
+      }
+
+      const refreshResponse = await axios.post(`${API_URL}/auth/refresh`, {
+        refreshToken,
+      });
+
+      const nextAccessToken = String(refreshResponse.data.accessToken || "");
+      if (!nextAccessToken) {
+        throw new Error("Missing access token in refresh response");
+      }
+
+      localStorage.setItem(TOKEN_KEY, nextAccessToken);
+      if (refreshResponse.data.refreshToken) {
+        localStorage.setItem(REFRESH_TOKEN_KEY, refreshResponse.data.refreshToken);
+      }
+
+      return nextAccessToken;
+    })().finally(() => {
+      refreshPromise = null;
+    });
+  }
+
+  return refreshPromise;
+};
+
 // Add request interceptor to include JWT and CSRF tokens
 api.interceptors.request.use(
   async (config) => {
@@ -125,38 +169,28 @@ api.interceptors.response.use(
 
     // Handle 401 Unauthorized (invalid/expired JWT)
     if (error.response?.status === 401) {
-      const refreshToken = localStorage.getItem(REFRESH_TOKEN_KEY);
-      if (refreshToken && !error.config.url?.includes('/auth/')) {
+      const originalRequest = (error.config || {}) as RetriableRequestConfig;
+      const url = String(originalRequest.url || "");
+      const isAuthRoute = url.includes('/auth/');
+      const hasRefreshToken = Boolean(localStorage.getItem(REFRESH_TOKEN_KEY));
+
+      if (!isAuthRoute && hasRefreshToken && !originalRequest._retry) {
         try {
-          const refreshResponse = await axios.post(`${API_URL}/auth/refresh`, {
-            refreshToken,
-          });
-          localStorage.setItem(TOKEN_KEY, refreshResponse.data.accessToken);
-          
-          // Update refresh token if rotation returned a new one
-          if (refreshResponse.data.refreshToken) {
-            localStorage.setItem(REFRESH_TOKEN_KEY, refreshResponse.data.refreshToken);
-          }
-          
-          // Retry original request with new token
-          error.config.headers.Authorization = `Bearer ${refreshResponse.data.accessToken}`;
-          return api(error.config);
+          originalRequest._retry = true;
+          const nextAccessToken = await refreshAccessToken();
+          originalRequest.headers = originalRequest.headers || {};
+          originalRequest.headers.Authorization = `Bearer ${nextAccessToken}`;
+          return api(originalRequest as any);
         } catch {
-          // Refresh failed, clear tokens and redirect to login
-          localStorage.removeItem(TOKEN_KEY);
-          localStorage.removeItem(REFRESH_TOKEN_KEY);
-          localStorage.removeItem('excalidash-user');
-          window.location.href = '/login';
+          clearStoredAuth();
+          redirectToLogin();
           return Promise.reject(error);
         }
-      } else {
-        // No refresh token or auth endpoint, redirect to login
-        localStorage.removeItem(TOKEN_KEY);
-        localStorage.removeItem(REFRESH_TOKEN_KEY);
-        localStorage.removeItem('excalidash-user');
-        if (!error.config.url?.includes('/auth/')) {
-          window.location.href = '/login';
-        }
+      }
+
+      if (!isAuthRoute) {
+        clearStoredAuth();
+        redirectToLogin();
       }
     }
 
@@ -168,14 +202,15 @@ api.interceptors.response.use(
       clearCsrfToken();
 
       // Retry the request once with a fresh token
-      const originalRequest = error.config;
+      const originalRequest = (error.config || {}) as RetriableRequestConfig;
       if (!originalRequest._csrfRetry) {
         originalRequest._csrfRetry = true;
         await fetchCsrfToken();
         if (csrfToken) {
+          originalRequest.headers = originalRequest.headers || {};
           originalRequest.headers[csrfHeaderName] = csrfToken;
         }
-        return api(originalRequest);
+        return api(originalRequest as any);
       }
     }
     return Promise.reject(error);
@@ -225,22 +260,42 @@ export interface PaginatedDrawings<T> {
   offset?: number;
 }
 
+export type DrawingSortField = "name" | "createdAt" | "updatedAt";
+export type SortDirection = "asc" | "desc";
+
 export function getDrawings(
   search?: string,
   collectionId?: string | null,
-  options?: { limit?: number; offset?: number }
+  options?: {
+    limit?: number;
+    offset?: number;
+    sortField?: DrawingSortField;
+    sortDirection?: SortDirection;
+  }
 ): Promise<PaginatedDrawings<DrawingSummary>>;
 
 export function getDrawings(
   search: string | undefined,
   collectionId: string | null | undefined,
-  options: { includeData: true; limit?: number; offset?: number }
+  options: {
+    includeData: true;
+    limit?: number;
+    offset?: number;
+    sortField?: DrawingSortField;
+    sortDirection?: SortDirection;
+  }
 ): Promise<PaginatedDrawings<Drawing>>;
 
 export async function getDrawings(
   search?: string,
   collectionId?: string | null,
-  options?: { includeData?: boolean; limit?: number; offset?: number }
+  options?: {
+    includeData?: boolean;
+    limit?: number;
+    offset?: number;
+    sortField?: DrawingSortField;
+    sortDirection?: SortDirection;
+  }
 ) {
   const params: Record<string, string | number> = {};
   if (search) params.search = search;
@@ -248,6 +303,8 @@ export async function getDrawings(
     params.collectionId = collectionId === null ? "null" : collectionId;
   if (options?.limit !== undefined) params.limit = options.limit;
   if (options?.offset !== undefined) params.offset = options.offset;
+  if (options?.sortField) params.sortField = options.sortField;
+  if (options?.sortDirection) params.sortDirection = options.sortDirection;
 
   if (options?.includeData) {
     params.includeData = "true";

frontend/src/pages/Dashboard.tsx

@@ -1,45 +1,16 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import { Layout } from '../components/Layout';
 import { DrawingCard } from '../components/DrawingCard';
 import { Plus, Search, Loader2, Inbox, Trash2, Folder, ArrowRight, Copy, Upload, CheckSquare, Square, ArrowUp, ArrowDown, ChevronDown, FileText, Calendar, Clock } from 'lucide-react';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 import * as api from '../api';
 import type { DrawingSummary, Collection } from '../types';
+import type { DrawingSortField, SortDirection } from '../api';
 import { useDebounce } from '../hooks/useDebounce';
 import clsx from 'clsx';
 import { ConfirmModal } from '../components/ConfirmModal';
 import { useUpload } from '../context/UploadContext';
-
-type Point = { x: number; y: number };
-
-type SelectionBounds = {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-  width: number;
-  height: number;
-};
-
-const getSelectionBounds = (start: Point, current: Point): SelectionBounds => {
-  const left = Math.min(start.x, current.x);
-  const right = Math.max(start.x, current.x);
-  const top = Math.min(start.y, current.y);
-  const bottom = Math.max(start.y, current.y);
-  return {
-    left,
-    top,
-    right,
-    bottom,
-    width: right - left,
-    height: bottom - top,
-  };
-};
-
-const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return createPortal(children, document.body);
-};
+import { DragOverlayPortal, getSelectionBounds, type Point, type SelectionBounds } from './dashboard/shared';
 
 const PAGE_SIZE = 24;
 
@@ -91,8 +62,7 @@ export const Dashboard: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const loaderRef = useRef<HTMLDivElement>(null);
 
-  type SortField = 'name' | 'createdAt' | 'updatedAt';
-  type SortDirection = 'asc' | 'desc';
+  type SortField = DrawingSortField;
 
 
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,7 +82,12 @@ export const Dashboard: React.FC = () => {
     setIsLoading(true);
     try {
       const [drawingsRes, collectionsData] = await Promise.all([
-        api.getDrawings(debouncedSearch, selectedCollectionId, { limit: PAGE_SIZE, offset: 0 }),
+        api.getDrawings(debouncedSearch, selectedCollectionId, {
+          limit: PAGE_SIZE,
+          offset: 0,
+          sortField: sortConfig.field,
+          sortDirection: sortConfig.direction,
+        }),
         api.getCollections()
       ]);
       setDrawings(drawingsRes.drawings);
@@ -124,7 +99,7 @@ export const Dashboard: React.FC = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [debouncedSearch, selectedCollectionId]);
+  }, [debouncedSearch, selectedCollectionId, sortConfig.field, sortConfig.direction]);
 
   const fetchMore = useCallback(async () => {
     if (isFetchingMore || !hasMore || isLoading) return;
@@ -132,7 +107,9 @@ export const Dashboard: React.FC = () => {
     try {
       const drawingsRes = await api.getDrawings(debouncedSearch, selectedCollectionId, {
         limit: PAGE_SIZE,
-        offset: drawings.length
+        offset: drawings.length,
+        sortField: sortConfig.field,
+        sortDirection: sortConfig.direction,
       });
       setDrawings(prev => [...prev, ...drawingsRes.drawings]);
       setTotalCount(drawingsRes.totalCount);
@@ -141,7 +118,16 @@ export const Dashboard: React.FC = () => {
     } finally {
       setIsFetchingMore(false);
     }
-  }, [isFetchingMore, hasMore, isLoading, debouncedSearch, selectedCollectionId, drawings.length]);
+  }, [
+    isFetchingMore,
+    hasMore,
+    isLoading,
+    debouncedSearch,
+    selectedCollectionId,
+    drawings.length,
+    sortConfig.field,
+    sortConfig.direction,
+  ]);
 
   useEffect(() => {
     refreshData();
@@ -258,16 +244,7 @@ export const Dashboard: React.FC = () => {
     setDragCurrent({ x: e.clientX, y: e.clientY });
   };
 
-  const sortedDrawings = React.useMemo(() => {
-    return [...drawings].sort((a, b) => {
-      const { field, direction } = sortConfig;
-      const modifier = direction === 'asc' ? 1 : -1;
-      if (field === 'name') return a.name.localeCompare(b.name) * modifier;
-      if (field === 'createdAt') return (a.createdAt - b.createdAt) * modifier;
-      if (field === 'updatedAt') return (a.updatedAt - b.updatedAt) * modifier;
-      return 0;
-    });
-  }, [drawings, sortConfig]);
+  const sortedDrawings = drawings;
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

frontend/src/pages/Editor.tsx

@@ -14,101 +14,19 @@ import { reconcileElements } from '../utils/sync';
 import { exportFromEditor } from '../utils/exportUtils';
 import * as api from '../api';
 import { useTheme } from '../context/ThemeContext';
+import {
+  UIOptions,
+  getColorFromString,
+  getFilesDelta,
+  getInitialsFromName,
+  haveSameElements,
+} from './editor/shared';
+import type { ElementVersionInfo } from './editor/shared';
 
 interface Peer extends UserIdentity {
   isActive: boolean;
 }
 
-interface ElementVersionInfo {
-  version: number;
-  versionNonce: number;
-}
-
-const haveSameElements = (a: readonly any[] = [], b: readonly any[] = []) => {
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const left = a[i];
-    const right = b[i];
-    if (!left || !right) return false;
-    if (left.id !== right.id) return false;
-    if ((left.version ?? 0) !== (right.version ?? 0)) return false;
-    if ((left.versionNonce ?? 0) !== (right.versionNonce ?? 0)) return false;
-  }
-  return true;
-};
-
-const buildFileSignature = (file: any): string => {
-  const mimeType = typeof file?.mimeType === "string" ? file.mimeType : "";
-  const id = typeof file?.id === "string" ? file.id : "";
-  const dataURL = typeof file?.dataURL === "string" ? file.dataURL : "";
-  // Avoid keeping the whole dataURL for comparisons; use a cheap signature.
-  const prefix = dataURL.slice(0, 32);
-  const suffix = dataURL.slice(-32);
-  return `${id}|${mimeType}|${dataURL.length}|${prefix}|${suffix}`;
-};
-
-const getFilesDelta = (
-  previous: Record<string, any>,
-  next: Record<string, any>
-): Record<string, any> => {
-  const delta: Record<string, any> = {};
-  const prev = previous || {};
-  const nxt = next || {};
-
-  for (const fileId of Object.keys(nxt)) {
-    const nextFile = nxt[fileId];
-    const nextHasDataUrl = typeof nextFile?.dataURL === "string" && nextFile.dataURL.length > 0;
-    // Only sync files that actually have data; otherwise other tabs can't render yet.
-    if (!nextHasDataUrl) continue;
-
-    const prevFile = prev[fileId];
-    if (!prevFile) {
-      delta[fileId] = nextFile;
-      continue;
-    }
-
-    if (buildFileSignature(prevFile) !== buildFileSignature(nextFile)) {
-      delta[fileId] = nextFile;
-    }
-  }
-
-  return delta;
-};
-
-const UIOptions = {
-  canvasActions: {
-    saveToActiveFile: false,
-    loadScene: false,
-    export: { saveFileToDisk: false },
-    toggleTheme: true,
-  },
-};
-
-const getInitialsFromName = (name: string): string => {
-  const trimmed = name.trim();
-  if (!trimmed) return 'U';
-  const parts = trimmed.split(/\s+/).filter(Boolean);
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-  }
-  return trimmed.slice(0, 2).toUpperCase();
-};
-
-// Helper function to generate a color from a string (consistent hash)
-const getColorFromString = (str: string): string => {
-  const COLORS = [
-    "#ef4444", "#f97316", "#f59e0b", "#84cc16", "#22c55e", "#10b981",
-    "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6",
-    "#a855f7", "#d946ef", "#ec4899", "#f43f5e",
-  ];
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return COLORS[Math.abs(hash) % COLORS.length];
-};
-
 export const Editor: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();

frontend/src/pages/dashboard/shared.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { createPortal } from "react-dom";
+
+export type Point = { x: number; y: number };
+
+export type SelectionBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
+export const getSelectionBounds = (
+  start: Point,
+  current: Point
+): SelectionBounds => {
+  const left = Math.min(start.x, current.x);
+  const right = Math.max(start.x, current.x);
+  const top = Math.min(start.y, current.y);
+  const bottom = Math.max(start.y, current.y);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+};
+
+export const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => createPortal(children, document.body);

frontend/src/pages/editor/shared.ts

@@ -0,0 +1,86 @@
+export interface ElementVersionInfo {
+  version: number;
+  versionNonce: number;
+}
+
+export const haveSameElements = (a: readonly any[] = [], b: readonly any[] = []) => {
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const left = a[i];
+    const right = b[i];
+    if (!left || !right) return false;
+    if (left.id !== right.id) return false;
+    if ((left.version ?? 0) !== (right.version ?? 0)) return false;
+    if ((left.versionNonce ?? 0) !== (right.versionNonce ?? 0)) return false;
+  }
+  return true;
+};
+
+const buildFileSignature = (file: any): string => {
+  const mimeType = typeof file?.mimeType === "string" ? file.mimeType : "";
+  const id = typeof file?.id === "string" ? file.id : "";
+  const dataURL = typeof file?.dataURL === "string" ? file.dataURL : "";
+  const prefix = dataURL.slice(0, 32);
+  const suffix = dataURL.slice(-32);
+  return `${id}|${mimeType}|${dataURL.length}|${prefix}|${suffix}`;
+};
+
+export const getFilesDelta = (
+  previous: Record<string, any>,
+  next: Record<string, any>
+): Record<string, any> => {
+  const delta: Record<string, any> = {};
+  const prev = previous || {};
+  const nxt = next || {};
+
+  for (const fileId of Object.keys(nxt)) {
+    const nextFile = nxt[fileId];
+    const nextHasDataUrl = typeof nextFile?.dataURL === "string" && nextFile.dataURL.length > 0;
+    if (!nextHasDataUrl) continue;
+
+    const prevFile = prev[fileId];
+    if (!prevFile) {
+      delta[fileId] = nextFile;
+      continue;
+    }
+
+    if (buildFileSignature(prevFile) !== buildFileSignature(nextFile)) {
+      delta[fileId] = nextFile;
+    }
+  }
+
+  return delta;
+};
+
+export const UIOptions = {
+  canvasActions: {
+    saveToActiveFile: false,
+    loadScene: false,
+    export: { saveFileToDisk: false },
+    toggleTheme: true,
+  },
+};
+
+export const getInitialsFromName = (name: string): string => {
+  const trimmed = name.trim();
+  if (!trimmed) return 'U';
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+};
+
+export const getColorFromString = (str: string): string => {
+  const COLORS = [
+    "#ef4444", "#f97316", "#f59e0b", "#84cc16", "#22c55e", "#10b981",
+    "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6",
+    "#a855f7", "#d946ef", "#ec4899", "#f43f5e",
+  ];
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return COLORS[Math.abs(hash) % COLORS.length];
+};

frontend/src/utils/identity.ts

@@ -93,11 +93,25 @@ const hashString = (input: string): number => {
   return hash >>> 0;
 };
 
+const getCryptoObject = (): Crypto | undefined =>
+  typeof globalThis !== "undefined"
+    ? globalThis.crypto || (globalThis as any).msCrypto
+    : undefined;
+
+const getSecureRandomInt = (maxExclusive: number): number => {
+  if (maxExclusive <= 1) return 0;
+  const cryptoObj = getCryptoObject();
+  if (cryptoObj?.getRandomValues) {
+    const buffer = new Uint32Array(1);
+    cryptoObj.getRandomValues(buffer);
+    return buffer[0] % maxExclusive;
+  }
+  const seed = `${Date.now().toString(16)}:${performance.now().toString(16)}`;
+  return hashString(seed) % maxExclusive;
+};
+
 const generateClientId = (): string => {
-  const cryptoObj: Crypto | undefined =
-    typeof globalThis !== "undefined"
-      ? globalThis.crypto || (globalThis as any).msCrypto
-      : undefined;
+  const cryptoObj = getCryptoObject();
 
   if (cryptoObj?.randomUUID) {
     return cryptoObj.randomUUID();
@@ -115,7 +129,8 @@ const generateClientId = (): string => {
   }
 
   // Final fallback for very old browsers; uniqueness window-scoped only.
-  return `id-${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
+  const entropy = `${Date.now().toString(16)}-${performance.now().toString(16)}-${getSecureRandomInt(1_000_000_000).toString(16)}`;
+  return `id-${hashString(entropy).toString(16)}-${hashString(`${entropy}:2`).toString(16)}`;
 };
 
 export const getOrCreateBrowserFingerprint = (): string => {
@@ -146,9 +161,8 @@ export const getUserIdentity = (): UserIdentity => {
   }
 
   const deviceId = getOrCreateBrowserFingerprint();
-  const randomTransformer =
-    TRANSFORMERS[Math.floor(Math.random() * TRANSFORMERS.length)];
-  const randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
+  const randomTransformer = TRANSFORMERS[getSecureRandomInt(TRANSFORMERS.length)];
+  const randomColor = COLORS[getSecureRandomInt(COLORS.length)];
 
   const identity: UserIdentity = {
     id: deviceId,