collabmd 0.1.43 → 0.1.45

package/src/client/excalidraw-editor.js

@@ -22,6 +22,7 @@ import {
   applySceneUpdateWithFiles,
 } from './domain/excalidraw-api-scene-sync.js';
 import {
+  normalizeDocumentMode,
   normalizeScene,
   parseSceneJson,
   sceneToInitialData,
@@ -30,15 +31,22 @@ import {
   buildReconciledExcalidrawSceneUpdate,
 } from './domain/excalidraw-scene-reconcile.js';
 import {
-  normalizeDocumentMode,
-} from './domain/excalidraw-document-switch.js';
+  createExcalidrawDiagnosticRing,
+  summarizeExcalidrawScene,
+} from './domain/excalidraw-diagnostics.js';
 import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
-import { ExcalidrawRoomClient } from './infrastructure/excalidraw-room-client.js';
+import {
+  EXCALIDRAW_ROOM_CONNECTION_STATE,
+  ExcalidrawRoomClient,
+} from './infrastructure/excalidraw-room-client.js';
 import { vaultApiClient } from './infrastructure/vault-api-client.js';
 
 const params = new URLSearchParams(window.location.search);
 const isTestMode = params.get('test') === '1';
+const diagnostics = createExcalidrawDiagnosticRing({
+  enabled: params.get('excalidrawDebug') === '1',
+});
 const parentOrigin = window.location.origin;
 const syncTimeoutMs = Number.parseInt(params.get('syncTimeoutMs') || '', 10);
 
@@ -55,10 +63,8 @@ let localAwarenessUser = resolveLocalAwarenessUser({
 let appliedSceneJson = '';
 
 let collabReady = false;
-let suppressOnChange = false;
 let pendingRemoteSceneJson = '';
 let pendingCollaborators = null;
-let pendingSuppressionReleases = 0;
 let activeCollaborators = new Map();
 let followedSocketId = null;
 let pendingHostFollowPeerId = null;
@@ -76,16 +82,44 @@ let roomClientGeneration = 0;
 let reactRoot = null;
 let editorRenderKey = 0;
 let skipRoomDisconnectOnUnmount = false;
+let roomConnectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING;
+let parkRequestedWhileBlocked = false;
+const pendingDisconnectRequestIds = new Set();
 const reportedFileConflictSignatures = new Set();
 
+if (diagnostics.enabled) {
+  window.__COLLABMD_EXCALIDRAW_DEBUG__ = diagnostics;
+}
+
 function getDocumentViewState(mode = currentDocument.mode) {
   const normalizedMode = normalizeDocumentMode(mode);
+  const authorityReadOnly = roomConnectionState !== EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE;
   return {
-    viewModeEnabled: normalizedMode === 'preview',
+    viewModeEnabled: normalizedMode === 'preview' || authorityReadOnly,
     zenModeEnabled: normalizedMode === 'preview',
   };
 }
 
+function getAuthorityBannerText() {
+  if (normalizeDocumentMode(currentDocument.mode) === 'preview') {
+    return '';
+  }
+
+  if (roomConnectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.FALLBACK_READONLY) {
+    return 'Showing the saved diagram. Editing will resume after live sync completes.';
+  }
+
+  if (roomConnectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY) {
+    return 'Connection lost. Editing is paused while the diagram reconnects.';
+  }
+
+  if (roomConnectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING) {
+    return 'Connecting to the live diagram…';
+  }
+
+  return '';
+}
+
 function applyDocumentMode(mode = currentDocument.mode) {
   document.body.dataset.documentMode = normalizeDocumentMode(mode);
 }
@@ -106,6 +140,13 @@ function createRoomClient(filePath) {
 
       queueCollaboratorsRender(collaborators);
     },
+    onConnectionStateChange: (event) => {
+      if (generation !== roomClientGeneration) {
+        return;
+      }
+
+      handleRoomConnectionStateChange(event);
+    },
     onRemoteSceneJson: (sceneJson) => {
       if (generation !== roomClientGeneration) {
         return;
@@ -148,6 +189,10 @@ function buildExcalidrawProps({ initialData } = {}) {
     onPointerUpdate: (payload) => {
       roomClient?.scheduleLocalPointerAwareness(payload);
     },
+    historyOptions: {
+      traversal: 'single-entry',
+    },
+    onHistoryAction: handleHistoryAction,
     theme: currentTheme,
     ...getDocumentViewState(),
     UIOptions: {
@@ -175,15 +220,92 @@ function renderExcalidrawApp({ initialData } = {}) {
   reactRoot.render(
     React.createElement(
       'div',
-      { style: { height: '100vh', width: '100%' } },
+      { className: 'excalidraw-editor-shell' },
       React.createElement(Excalidraw, {
         key: `editor-${editorRenderKey}`,
         ...buildExcalidrawProps({ initialData }),
       }),
+      getAuthorityBannerText()
+        ? React.createElement('div', {
+          className: 'excalidraw-authority-banner',
+          role: 'status',
+        }, getAuthorityBannerText())
+        : null,
     ),
   );
 }
 
+function recordSceneDiagnostic(event, details = {}, sceneJson = '') {
+  if (!diagnostics.enabled) {
+    return;
+  }
+
+  let sceneSummary = {};
+  if (sceneJson) {
+    try {
+      sceneSummary = summarizeExcalidrawScene(parseSceneJson(sceneJson));
+    } catch {
+      sceneSummary = {};
+    }
+  }
+
+  diagnostics.record(event, {
+    ...sceneSummary,
+    connectionState: roomConnectionState,
+    generation: roomClientGeneration,
+    hasPendingWrites: roomClient?.hasPendingWrites?.() || false,
+    ...details,
+  });
+}
+
+function handleHistoryAction({ action = '', outcome = '' } = {}) {
+  recordSceneDiagnostic('history-action', { action, outcome });
+  if (outcome !== 'no-visible-change' || !excalidrawAPI) {
+    return;
+  }
+
+  const label = action === 'redo' ? 'Redo' : 'Undo';
+  excalidrawAPI.setToast?.({
+    message: `${label} skipped: a collaborator changed that item`,
+  });
+}
+
+function handleRoomConnectionStateChange({
+  canWrite = false,
+  hasPendingWrites = false,
+  previousState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED,
+  state,
+} = {}) {
+  roomConnectionState = state || EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
+  recordSceneDiagnostic('authority-state', {
+    canWrite,
+    hasPendingWrites,
+    previousState,
+    state: roomConnectionState,
+  }, roomClient?.getLastSceneJson?.() || '');
+  postToParent('excalidraw-authority-state', {
+    canWrite,
+    hasPendingWrites,
+    previousState,
+    state: roomConnectionState,
+  });
+
+  if (reactRoot) {
+    renderExcalidrawApp();
+  }
+
+  if (
+    roomConnectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE
+    && previousState === EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY
+  ) {
+    excalidrawAPI?.setToast?.({ message: 'Live diagram reconnected' });
+  }
+
+  if (roomConnectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE) {
+    void resolvePendingDisconnectRequests();
+  }
+}
+
 function applySurfaceTheme(theme = currentTheme) {
   document.body.dataset.theme = theme === 'light' ? 'light' : 'dark';
 }
@@ -225,6 +347,7 @@ function applyLocalUserPatch(nextUser = {}) {
 
 if (isTestMode) {
   window.__COLLABMD_EXCALIDRAW_TEST__ = {
+    disconnectTransport: () => roomClient?.provider?.disconnect?.(),
     getElementBounds: (elementId) => {
       const element = excalidrawAPI?.getSceneElementsIncludingDeleted?.()?.find((entry) => entry.id === elementId && !entry.isDeleted);
       if (!element) {
@@ -256,6 +379,13 @@ if (isTestMode) {
     getFileIds: () => (
       Object.keys(excalidrawAPI?.getFiles?.() || {}).sort()
     ),
+    getFileVersion: (fileId) => excalidrawAPI?.getFiles?.()?.[fileId]?.version ?? null,
+    getEditorId: () => excalidrawAPI?.id || null,
+    getForkCapabilities: () => ({
+      replaceFiles: typeof excalidrawAPI?.replaceFiles === 'function',
+    }),
+    getAuthorityState: () => roomConnectionState,
+    getDiagnosticTrace: () => diagnostics.exportTrace(),
     getHistoryState: () => getNativeHistoryState(),
     getLocalUserName: () => localAwarenessUser?.name || '',
     getLocalPeerId: () => localAwarenessUser?.peerId || '',
@@ -278,6 +408,7 @@ if (isTestMode) {
     ),
     isReady: () => collabReady && Boolean(excalidrawAPI) && Boolean(getNativeHistoryButton('undo')) && Boolean(getNativeHistoryButton('redo')),
     redoShared: () => triggerNativeHistory('redo'),
+    reconnectTransport: () => roomClient?.provider?.connect?.(),
     setScene: (scene) => {
       applyLocalScene(normalizeScene(scene), {
         captureUpdate: CaptureUpdateAction.IMMEDIATELY,
@@ -371,6 +502,7 @@ function applySceneFromJson(rawJson, {
   }
 
   appliedSceneJson = normalizedJson;
+  recordSceneDiagnostic('remote-scene-received', {}, normalizedJson);
 
   if (!excalidrawAPI || !collabReady) {
     pendingRemoteSceneJson = normalizedJson;
@@ -385,21 +517,6 @@ function applySceneFromJson(rawJson, {
   updateApiScene(scene);
 }
 
-function releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot = false } = {}) {
-  pendingSuppressionReleases += 1;
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      pendingSuppressionReleases = Math.max(0, pendingSuppressionReleases - 1);
-      if (trackedSharedSnapshot) {
-        roomClient?.endApplyingSharedSnapshot();
-      }
-      if (pendingSuppressionReleases === 0) {
-        suppressOnChange = false;
-      }
-    });
-  });
-}
-
 function releaseViewportBroadcastSuppressionAfterPaint() {
   pendingViewportSuppressionReleases += 1;
   requestAnimationFrame(() => {
@@ -439,8 +556,12 @@ function logFileConflictOnce(conflictingFileIds = []) {
 
   reportedFileConflictSignatures.add(signature);
   console.warn(
-    `[excalidraw:${currentDocument.filePath}] Remounting editor after receiving conflicting binary file payload(s) for existing file ids: ${conflictingFileIds.join(', ')}`,
+    `[excalidraw:${currentDocument.filePath}] The installed Excalidraw API cannot replace conflicting binary file payload(s) without a remount: ${conflictingFileIds.join(', ')}`,
   );
+  recordSceneDiagnostic('binary-file-conflict', {
+    fileCount: conflictingFileIds.length,
+    reason: 'replace-files-api-unavailable',
+  });
 }
 
 function requestEditorRemount(scene) {
@@ -471,9 +592,8 @@ function applySceneToMountedApi(scene, {
   const nextSceneUpdate = buildApiSceneUpdate(scene, {
     appStateOverrides,
   });
-  let applyResult = null;
+  let applyResult;
 
-  suppressOnChange = true;
   if (trackedSharedSnapshot) {
     roomClient?.beginApplyingSharedSnapshot();
   }
@@ -489,13 +609,8 @@ function applySceneToMountedApi(scene, {
       },
     });
   } finally {
-    if (applyResult?.requiresRemount) {
-      if (trackedSharedSnapshot) {
-        roomClient?.endApplyingSharedSnapshot();
-      }
-      suppressOnChange = false;
-    } else {
-      releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot });
+    if (trackedSharedSnapshot) {
+      roomClient?.endApplyingSharedSnapshot();
     }
   }
 
@@ -735,9 +850,7 @@ function clearEditorApiStateBindings() {
 
 function resetRealtimeRoomState() {
   collabReady = false;
-  suppressOnChange = false;
   pendingRemoteSceneJson = '';
-  pendingSuppressionReleases = 0;
   pendingCollaborators = null;
   activeCollaborators = new Map();
   followedSocketId = null;
@@ -755,8 +868,12 @@ function resetRealtimeRoomState() {
 
 function disconnectRealtimeRoom({ preserveEditorBindings = false } = {}) {
   const activeRoomClient = roomClient;
+  const previousState = roomConnectionState;
   roomClient = null;
   roomClientGeneration += 1;
+  roomConnectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
+  pendingDisconnectRequestIds.clear();
+  parkRequestedWhileBlocked = false;
 
   resetRealtimeRoomState();
   if (!preserveEditorBindings) {
@@ -764,6 +881,16 @@ function disconnectRealtimeRoom({ preserveEditorBindings = false } = {}) {
   }
 
   activeRoomClient?.disconnect();
+  recordSceneDiagnostic('room-disconnected', {
+    previousState,
+    state: roomConnectionState,
+  });
+  postToParent('excalidraw-authority-state', {
+    canWrite: false,
+    hasPendingWrites: false,
+    previousState,
+    state: roomConnectionState,
+  });
 }
 
 let didDisconnectRealtimeRoom = false;
@@ -794,8 +921,39 @@ async function waitForPendingRoomWrites({
 }
 
 async function prepareRealtimeRoomDisconnect() {
-  roomClient?.flushSceneSync();
+  if (!roomClient) {
+    return true;
+  }
+
+  if (roomClient.getConnectionState() !== EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE) {
+    return false;
+  }
+
+  roomClient.flushSceneSync();
   await waitForPendingRoomWrites();
+  return roomClient?.getConnectionState() === EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE;
+}
+
+async function resolvePendingDisconnectRequests() {
+  if (pendingDisconnectRequestIds.size === 0 && !parkRequestedWhileBlocked) {
+    return;
+  }
+
+  const canDisconnect = await prepareRealtimeRoomDisconnect();
+  if (!canDisconnect) {
+    return;
+  }
+
+  const requestIds = [...pendingDisconnectRequestIds];
+  pendingDisconnectRequestIds.clear();
+  requestIds.forEach((requestId) => {
+    postToParent('disconnect-ready', { requestId });
+  });
+
+  if (parkRequestedWhileBlocked) {
+    parkRequestedWhileBlocked = false;
+    disconnectRealtimeRoom({ preserveEditorBindings: true });
+  }
 }
 
 async function connectDocumentClient(filePath) {
@@ -812,6 +970,14 @@ async function connectDocumentClient(filePath) {
 }
 
 window.addEventListener('pagehide', disconnectRealtimeRoomOnce);
+window.addEventListener('beforeunload', (event) => {
+  if (roomConnectionState !== EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY) {
+    return;
+  }
+
+  event.preventDefault();
+  event.returnValue = '';
+});
 
 window.addEventListener('message', (event) => {
   if (event.origin !== parentOrigin) {
@@ -827,12 +993,10 @@ window.addEventListener('message', (event) => {
     currentTheme = message.theme || 'dark';
     applySurfaceTheme(currentTheme);
     if (excalidrawAPI) {
-      suppressOnChange = true;
       excalidrawAPI.updateScene({
         appState: { theme: currentTheme },
         captureUpdate: CaptureUpdateAction.NEVER,
       });
-      releaseOnChangeSuppressionAfterPaint();
     }
     renderExcalidrawApp();
     return;
@@ -855,29 +1019,71 @@ window.addEventListener('message', (event) => {
 
   if (message.type === 'prepare-disconnect') {
     void (async () => {
-      await prepareRealtimeRoomDisconnect();
-      postToParent('disconnect-ready', {
-        requestId: message.requestId || '',
+      const requestId = message.requestId || '';
+      if (await prepareRealtimeRoomDisconnect()) {
+        postToParent('disconnect-ready', { requestId });
+        return;
+      }
+
+      pendingDisconnectRequestIds.add(requestId);
+      postToParent('disconnect-blocked', {
+        requestId,
+        state: roomConnectionState,
       });
     })();
     return;
   }
 
+  if (message.type === 'cancel-disconnect') {
+    pendingDisconnectRequestIds.delete(message.requestId || '');
+    return;
+  }
+
+  if (message.type === 'discard-and-disconnect') {
+    const requestId = message.requestId || '';
+    pendingDisconnectRequestIds.delete(requestId);
+    recordSceneDiagnostic('disconnect-discarded', {
+      reason: 'user-confirmed',
+      state: roomConnectionState,
+    });
+    disconnectRealtimeRoom({ preserveEditorBindings: true });
+    postToParent('disconnect-ready', {
+      discarded: true,
+      requestId,
+    });
+    return;
+  }
+
   if (message.type === 'park-room') {
     void (async () => {
-      await prepareRealtimeRoomDisconnect();
-      disconnectRealtimeRoom({ preserveEditorBindings: true });
+      if (await prepareRealtimeRoomDisconnect()) {
+        disconnectRealtimeRoom({ preserveEditorBindings: true });
+        return;
+      }
+
+      parkRequestedWhileBlocked = true;
+      postToParent('park-blocked', { state: roomConnectionState });
     })();
   }
 });
 
 function scheduleSyncToRoom(elements, appState, files) {
-  if (!collabReady || !roomClient || suppressOnChange) {
+  if (!collabReady || !roomClient) {
     return;
   }
 
   const liveElements = getLiveSceneElementsForSync(elements);
-  roomClient.scheduleSceneSync(liveElements, appState, files);
+  const scheduled = roomClient.scheduleSceneSync(liveElements, appState, files);
+  if (diagnostics.enabled) {
+    recordSceneDiagnostic(scheduled ? 'local-scene-scheduled' : 'local-scene-rejected', {
+      canWrite: roomClient.canWriteToRoom,
+      hasPendingWrites: roomClient.hasPendingWrites(),
+    }, JSON.stringify({
+      appState,
+      elements: liveElements,
+      files,
+    }));
+  }
 }
 
 function initializeEditor(api) {

package/src/client/export/export-pipeline.js

@@ -1,9 +1,15 @@
 import { exportToSvg as exportExcalidrawToSvg } from '@excalidraw/excalidraw';
 
-import { sanitizeSvgMarkup } from '../application/preview-diagram-utils.js';
+import {
+  encodeSvgDataUrl,
+  loadImage,
+  resolveSvgDimensions,
+  sanitizeSvgMarkup,
+} from '../application/preview-diagram-utils.js';
 import { compilePreviewDocument } from '../application/preview-render-compiler.js';
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
+import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
 
 const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
@@ -59,10 +65,6 @@ function createDocumentTitle(filePath, title = '') {
   return stripVaultFileExtension(leaf) || 'document';
 }
 
-function encodeSvgDataUrl(svgMarkup) {
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
-}
-
 function encodeSvgBase64DataUrl(svgMarkup) {
   const bytes = new TextEncoder().encode(String(svgMarkup ?? ''));
   const chunkSize = 0x8000;
@@ -86,35 +88,6 @@ function blobToDataUrl(blob) {
   });
 }
 
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.decoding = 'async';
-    image.addEventListener('load', () => resolve(image), { once: true });
-    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
-    image.src = src;
-  });
-}
-
-function resolveSvgDimensions(svgElement) {
-  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
-  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
-  const viewBox = svgElement.getAttribute('viewBox') || '';
-  const viewBoxParts = viewBox.split(/\s+/).map((value) => Number.parseFloat(value));
-
-  const width = Number.isFinite(widthAttr) && widthAttr > 0
-    ? widthAttr
-    : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200);
-  const height = Number.isFinite(heightAttr) && heightAttr > 0
-    ? heightAttr
-    : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800);
-
-  return {
-    height,
-    width,
-  };
-}
-
 function trimSvgCanvas(svgMarkup, { padding = 16 } = {}) {
   const probe = document.createElement('div');
   probe.style.position = 'fixed';
@@ -677,7 +650,7 @@ async function ensureMermaidRuntime() {
     return mermaidLoaderPromise;
   }
 
-  mermaidLoaderPromise = import('../mermaid-runtime.js').then((module) => {
+  mermaidLoaderPromise = import('mermaid').then((module) => {
     const runtime = module?.default;
     if (!runtime) {
       throw new Error('Mermaid runtime failed to initialize');
@@ -1433,14 +1406,10 @@ export async function docxAdapter(snapshot) {
   }
 
   const blob = await response.blob();
-  const downloadUrl = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = downloadUrl;
-  anchor.download = `${createDocumentTitle(snapshot.filePath, snapshot.title)}.docx`;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(downloadUrl), 1000);
+  downloadBlob(blob, `${createDocumentTitle(snapshot.filePath, snapshot.title)}.docx`, {
+    removeDelayMs: 0,
+    revokeDelayMs: 1000,
+  });
 }
 
 export async function printPdfAdapter() {

package/src/client/infrastructure/api-client-utils.js

@@ -0,0 +1,23 @@
+export function createRequestHeaders(requestId, headers = {}) {
+  const nextHeaders = { ...headers };
+  if (requestId) {
+    nextHeaders['X-CollabMD-Request-Id'] = String(requestId);
+  }
+
+  return nextHeaders;
+}
+
+export async function parseApiResponse(response, fallbackError) {
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok || data.ok === false) {
+    const error = new Error(data.error || fallbackError);
+    error.status = response.status;
+    error.body = data;
+    if (typeof data?.code === 'string') {
+      error.code = data.code;
+    }
+    throw error;
+  }
+
+  return data;
+}

package/src/client/infrastructure/app-version-monitor.js

@@ -111,4 +111,3 @@ export class AppVersionMonitor {
   }
 }
 
-export { extractBuildId };

package/src/client/infrastructure/auth-client.js

@@ -1,5 +1,6 @@
 import '../styles/features/auth-gate.css';
 
+import { getHashParamsFromRaw } from '../domain/hash-routes.js';
 import { getRuntimeConfig } from './runtime-config.js';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -24,19 +25,12 @@ function getClientAuthConfig() {
   };
 }
 
-function getHashParams() {
-  const rawHash = window.location.hash.startsWith('#')
-    ? window.location.hash.slice(1)
-    : window.location.hash;
-  return new URLSearchParams(rawHash);
-}
-
 function getPasswordFromHash() {
-  return getHashParams().get('auth_password') || '';
+  return getHashParamsFromRaw(window.location.hash).get('auth_password') || '';
 }
 
 function removePasswordFromHash() {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   if (!params.has('auth_password')) {
     return;
   }
@@ -48,7 +42,7 @@ function removePasswordFromHash() {
 }
 
 function consumeHashParam(name) {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   const value = params.get(name) || '';
   if (!value) {
     return '';