collabmd 0.1.47 → 0.1.49

package/src/client/excalidraw-editor.js

@@ -11,6 +11,7 @@ import {
 import { getElementBounds } from '@excalidraw/element';
 import '@excalidraw/excalidraw/index.css';
 
+import { createEditableContentRevision } from '../domain/editable-content-revision.js';
 import {
   buildRenderableCollaboratorsMap,
   findCollaboratorByPeerId,
@@ -45,6 +46,11 @@ import {
   summarizeExcalidrawScene,
 } from './domain/excalidraw-diagnostics.js';
 import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
+import {
+  createExcalidrawElementLink,
+  parseExcalidrawElementLink,
+} from './domain/excalidraw-element-link.js';
+import { resolveAppPath, resolveAppUrl } from './domain/runtime-paths.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import {
   EXCALIDRAW_ROOM_CONNECTION_STATE,
@@ -58,6 +64,8 @@ const diagnostics = createExcalidrawDiagnosticRing({
   enabled: params.get('excalidrawDebug') === '1',
 });
 const parentOrigin = window.location.origin;
+const appPath = resolveAppPath('/');
+const appUrl = resolveAppUrl('/');
 const syncTimeoutMs = Number.parseInt(params.get('syncTimeoutMs') || '', 10);
 
 let currentDocument = {
@@ -71,6 +79,12 @@ let localAwarenessUser = resolveLocalAwarenessUser({
   storedUserName: localStorage.getItem('collabmd-user-name'),
 });
 let appliedSceneJson = '';
+let appliedSceneRevisionPromise = createEditableContentRevision(appliedSceneJson);
+
+function setAppliedSceneJson(value) {
+  appliedSceneJson = value;
+  appliedSceneRevisionPromise = createEditableContentRevision(value);
+}
 
 let collabReady = false;
 let pendingRemoteSceneJson = '';
@@ -327,17 +341,34 @@ function getDiagramCommentMarkerPosition(thread, api = getMountedExcalidrawAPI()
   );
 }
 
-function focusDiagramCommentThread(thread) {
+function getDiagramElementTargets(elementId, elementType = 'element', api = getMountedExcalidrawAPI()) {
+  const normalizedElementId = String(elementId ?? '').trim();
+  const elements = api?.getSceneElementsIncludingDeleted?.()
+    ?.filter((element) => !element.isDeleted) || [];
+  if (!normalizedElementId) {
+    return [];
+  }
+
+  if (elementType === 'group') {
+    const groupElements = elements.filter((element) => element.groupIds?.includes(normalizedElementId));
+    if (groupElements.length > 0) {
+      return groupElements;
+    }
+  }
+
+  return elements.filter((element) => element.id === normalizedElementId);
+}
+
+function focusDiagramElement(elementId, elementType = 'element') {
   const api = getMountedExcalidrawAPI();
-  const element = api?.getSceneElementsIncludingDeleted?.()
-    ?.find((candidate) => candidate.id === thread?.elementId && !candidate.isDeleted);
-  if (!api || !element) {
+  const elements = getDiagramElementTargets(elementId, elementType, api);
+  if (!api || elements.length === 0) {
     return;
   }
 
   api.updateScene({
     appState: {
-      selectedElementIds: { [element.id]: true },
+      selectedElementIds: Object.fromEntries(elements.map((element) => [element.id, true])),
     },
     captureUpdate: CaptureUpdateAction.NEVER,
   });
@@ -352,11 +383,16 @@ function focusDiagramCommentThread(thread) {
       animation: false,
       fit: 'contain',
       offsets: { ui: true },
-      target: element,
+      target: elements,
     });
   } finally {
     releaseViewportBroadcastSuppressionAfterPaint();
   }
+
+}
+
+function focusDiagramCommentThread(thread) {
+  focusDiagramElement(thread?.elementId);
 }
 
 function applyDocumentMode(mode = currentDocument.mode) {
@@ -413,6 +449,23 @@ function createRoomClient(filePath) {
   };
 }
 
+function handleExcalidrawLinkOpen(element, event) {
+  if (window.parent === window) {
+    return;
+  }
+
+  const target = parseExcalidrawElementLink(element?.link, {
+    appPath,
+    origin: parentOrigin,
+  });
+  if (!target) {
+    return;
+  }
+
+  event?.preventDefault?.();
+  postToParent('open-element-link', { href: element.link });
+}
+
 function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled } = {}) {
   const props = {
     onMount: handleEditorMount,
@@ -431,11 +484,17 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
       collabReady = false;
     },
     aiEnabled: false,
+    generateLinkForSelection: (elementId, elementType) => createExcalidrawElementLink(
+      currentDocument.filePath,
+      elementId,
+      { appUrl, elementType },
+    ),
     isCollaborating: true,
     onChange: (elements, appState, files) => {
       scheduleSyncToRoom(elements, appState, files);
       roomClient?.syncLocalSelectionAwareness(appState);
     },
+    onLinkOpen: handleExcalidrawLinkOpen,
     onPointerUpdate: (payload) => {
       roomClient?.scheduleLocalPointerAwareness(payload);
     },
@@ -469,6 +528,32 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
 }
 
 const diagramCommentsContext = React.createContext(null);
+const presentationContext = React.createContext(null);
+
+function PresentationToolbar() {
+  const context = React.useContext(presentationContext);
+  if (!context) {
+    return null;
+  }
+
+  const label = context.active ? 'Exit presentation' : 'Start presentation';
+  const icon = context.active ? '×' : '▶';
+  let title = context.active ? 'Exit presentation' : 'Present frames';
+  if (context.frameCount === 0) {
+    title = 'Add a frame to create slides';
+  }
+
+  return React.createElement('button', {
+    'aria-label': label,
+    'aria-pressed': context.active,
+    className: `diagram-comment-button excalidraw-presentation-toggle sidebar-trigger${context.active ? ' is-active' : ''}`,
+    'data-testid': 'excalidraw-presentation-toggle',
+    disabled: context.frameCount === 0,
+    onClick: context.toggle,
+    title,
+    type: 'button',
+  }, React.createElement('span', { 'aria-hidden': 'true' }, icon));
+}
 
 function DiagramCommentsToolbar() {
   const context = React.useContext(diagramCommentsContext);
@@ -518,7 +603,12 @@ function DiagramCommentsToolbar() {
 
 const DiagramCommentsExcalidraw = React.memo(function DiagramCommentsExcalidraw({ initialData = null, renderKey = 0, viewModeEnabled }) {
   const renderTopRightUI = React.useCallback(
-    () => React.createElement(DiagramCommentsToolbar),
+    () => React.createElement('div', {
+      className: 'excalidraw-editor-toolbar',
+    }, [
+      React.createElement(PresentationToolbar, { key: 'presentation' }),
+      React.createElement(DiagramCommentsToolbar, { key: 'comments' }),
+    ]),
     [],
   );
 
@@ -566,7 +656,13 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const [draft, setDraft] = React.useState('');
   const [replyDraft, setReplyDraft] = React.useState('');
+  const [presentationFrameId, setPresentationFrameId] = React.useState(null);
   const [, setViewportRevision] = React.useState(0);
+  const presentationFrames = (
+    getMountedExcalidrawAPI()?.getSceneElementsIncludingDeleted?.() || []
+  ).filter((element) => element?.type === 'frame' && !element.isDeleted);
+  const presentationIndex = presentationFrames.findIndex((frame) => frame.id === presentationFrameId);
+  const presentationMode = presentationFrameId !== null;
 
   React.useEffect(() => {
     const api = getMountedExcalidrawAPI();
@@ -588,6 +684,76 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
 
   useCloseDiagramCommentsOnCanvas(drawerOpen, setDrawerOpen);
 
+  const goToPresentationFrame = React.useCallback((index) => {
+    const targetIndex = Math.min(Math.max(index, 0), presentationFrames.length - 1);
+    const frame = presentationFrames[targetIndex];
+    const api = getMountedExcalidrawAPI();
+    if (!api || !frame) {
+      return;
+    }
+
+    setPresentationFrameId(frame.id);
+    api.setViewport({
+      animation: true,
+      fit: 'contain',
+      offsets: { ui: true },
+      target: frame,
+    });
+  }, [presentationFrames]);
+
+  const togglePresentation = React.useCallback(() => {
+    if (presentationMode) {
+      setPresentationFrameId(null);
+      return;
+    }
+
+    setDrawerOpen(false);
+    setComposerOpen(false);
+    setActiveThreadId(null);
+    goToPresentationFrame(0);
+  }, [goToPresentationFrame, presentationMode]);
+
+  React.useEffect(() => {
+    if (!presentationFrameId || presentationIndex >= 0) {
+      return;
+    }
+
+    if (presentationFrames.length > 0) {
+      goToPresentationFrame(0);
+    } else {
+      setPresentationFrameId(null);
+    }
+  }, [goToPresentationFrame, presentationFrameId, presentationFrames.length, presentationIndex]);
+
+  React.useEffect(() => {
+    if (!presentationMode) {
+      return undefined;
+    }
+
+    const handlePresentationKeyDown = (event) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setPresentationFrameId(null);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex + 1);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        goToPresentationFrame(presentationIndex - 1);
+      }
+    };
+
+    document.addEventListener('keydown', handlePresentationKeyDown, true);
+    return () => document.removeEventListener('keydown', handlePresentationKeyDown, true);
+  }, [goToPresentationFrame, presentationIndex, presentationMode]);
+
   React.useEffect(() => {
     if (activeThreadId && !threads.some((thread) => thread.id === activeThreadId)) {
       setActiveThreadId(null);
@@ -833,7 +999,8 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ]);
   };
 
-  const renderCommentsOverlay = visible && room
+  const commentsVisible = visible && !presentationMode;
+  const renderCommentsOverlay = commentsVisible && room
     ? React.createElement('div', {
       'aria-label': 'Diagram comments overlay',
       className: 'diagram-comments-overlay',
@@ -865,7 +1032,44 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
     ])
     : null;
 
-  return React.createElement(diagramCommentsContext.Provider, {
+  const renderPresentationNavigation = presentationMode
+    ? React.createElement('div', {
+      'aria-label': 'Presentation navigation',
+      className: 'excalidraw-presentation-navigation',
+      key: 'presentation-navigation',
+      role: 'toolbar',
+    }, [
+      React.createElement('button', {
+        'aria-label': 'Previous slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex <= 0,
+        key: 'previous',
+        onClick: () => goToPresentationFrame(presentationIndex - 1),
+        type: 'button',
+      }, '←'),
+      React.createElement('span', {
+        'aria-live': 'polite',
+        className: 'excalidraw-presentation-status',
+        key: 'status',
+      }, `${presentationFrames[presentationIndex]?.name || `Slide ${presentationIndex + 1}`} · ${presentationIndex + 1} / ${presentationFrames.length}`),
+      React.createElement('button', {
+        'aria-label': 'Next slide',
+        className: 'diagram-comment-button',
+        disabled: presentationIndex >= presentationFrames.length - 1,
+        key: 'next',
+        onClick: () => goToPresentationFrame(presentationIndex + 1),
+        type: 'button',
+      }, '→'),
+    ])
+    : null;
+
+  return React.createElement(presentationContext.Provider, {
+    value: {
+      active: presentationMode,
+      frameCount: presentationFrames.length,
+      toggle: togglePresentation,
+    },
+  }, React.createElement(diagramCommentsContext.Provider, {
     value: {
       canWrite,
       drawerOpen,
@@ -874,17 +1078,18 @@ function DiagramCommentsEditor({ apiId = '', canWrite = false, focusRequest = nu
       selectedElement,
       threads,
       toggleDrawer: () => setDrawerOpen((open) => !open),
-      visible,
+      visible: commentsVisible,
     },
   }, [
     React.createElement(DiagramCommentsExcalidraw, {
       initialData,
       key: 'excalidraw',
       renderKey: editorRenderKey,
-      viewModeEnabled: getDocumentViewState().viewModeEnabled,
+      viewModeEnabled: presentationMode || getDocumentViewState().viewModeEnabled,
     }),
     renderCommentsOverlay,
-  ]);
+    renderPresentationNavigation,
+  ]));
 }
 
 function renderExcalidrawApp({ initialData } = {}) {
@@ -1053,6 +1258,9 @@ if (isTestMode) {
         .map((element) => element.id)
         .sort() ?? []
     ),
+    getSelectedElementIds: () => (
+      Object.keys(getMountedExcalidrawAPI()?.getAppState?.()?.selectedElementIds || {}).sort()
+    ),
     getElementStatus: (elementId) => (
       getMountedExcalidrawAPI()?.getSceneElementsIncludingDeleted?.()
         ?.find((entry) => entry.id === elementId && !entry.isDeleted)?.status ?? null
@@ -1201,7 +1409,7 @@ function applySceneFromJson(rawJson, {
     return;
   }
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
   recordSceneDiagnostic('remote-scene-received', {}, normalizedJson);
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
@@ -1277,7 +1485,7 @@ function requestEditorRemount(scene) {
   const normalizedScene = normalizeScene(scene);
   const normalizedJson = JSON.stringify(normalizedScene);
   pendingRemoteSceneJson = normalizedJson;
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
   pendingCollaborators = activeCollaborators;
   initialViewportFitPending = true;
   clearPreviewViewportFitTimers();
@@ -1353,7 +1561,7 @@ function applyLocalScene(scene, {
   const normalizedScene = normalizeScene(scene);
   const normalizedJson = JSON.stringify(normalizedScene);
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
     pendingRemoteSceneJson = normalizedJson;
@@ -1699,6 +1907,36 @@ async function waitForPendingRoomWrites({
   }
 }
 
+function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+async function waitForAppliedSceneRevision(revision, {
+  afterRevision = '',
+  maxWaitMs = 4500,
+} = {}) {
+  const startedAt = performance.now();
+  while ((performance.now() - startedAt) < maxWaitMs) {
+    const appliedRevision = await appliedSceneRevisionPromise;
+    if (
+      !pendingRemoteSceneJson
+      && (appliedRevision === revision || (afterRevision && appliedRevision !== afterRevision))
+    ) {
+      await waitForAnimationFrame();
+      await waitForAnimationFrame();
+      const paintedRevision = await appliedSceneRevisionPromise;
+      if (
+        !pendingRemoteSceneJson
+        && (paintedRevision === revision || (afterRevision && paintedRevision !== afterRevision))
+      ) {
+        return paintedRevision;
+      }
+    }
+    await new Promise((resolve) => window.setTimeout(resolve, 16));
+  }
+  return '';
+}
+
 async function prepareRealtimeRoomDisconnect() {
   if (!roomClient) {
     return true;
@@ -1796,6 +2034,11 @@ window.addEventListener('message', (event) => {
     return;
   }
 
+  if (message.type === 'focus-element') {
+    focusDiagramElement(message.elementId, message.elementType);
+    return;
+  }
+
   if (message.type === 'follow-user') {
     applyHostFollowRequest(message.peerId || null);
     return;
@@ -1806,6 +2049,34 @@ window.addEventListener('message', (event) => {
     return;
   }
 
+  if (message.type === 'flush-agent-writes') {
+    void (async () => {
+      roomClient?.flushSceneSync();
+      await waitForPendingRoomWrites({ maxWaitMs: 1000 });
+      const serverFlush = await roomClient?.waitForServerFlush?.({ timeoutMs: 1000 });
+      postToParent('agent-writes-flushed', {
+        requestId: message.requestId || '',
+        revision: await appliedSceneRevisionPromise,
+        status: serverFlush?.status || 'unavailable',
+      });
+    })();
+    return;
+  }
+
+  if (message.type === 'wait-for-agent-revision') {
+    void (async () => {
+      const revision = String(message.revision || '');
+      const paintedRevision = revision && await waitForAppliedSceneRevision(revision, {
+        afterRevision: String(message.afterRevision || ''),
+      });
+      postToParent(paintedRevision ? 'agent-revision-painted' : 'agent-revision-not-painted', {
+        requestId: message.requestId || '',
+        revision: paintedRevision || revision,
+      });
+    })();
+    return;
+  }
+
   if (message.type === 'prepare-disconnect') {
     void (async () => {
       const requestId = message.requestId || '';
@@ -1907,7 +2178,7 @@ function initializeEditor(api) {
   const sceneJson = pendingRemoteSceneJson || roomClient?.getLastSceneJson?.() || '';
   const initialScene = parseSceneJson(sceneJson);
   pendingRemoteSceneJson = '';
-  appliedSceneJson = JSON.stringify(initialScene);
+  setAppliedSceneJson(JSON.stringify(initialScene));
   updateApiScene(initialScene);
 
   if (pendingCollaborators) {

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

@@ -3,43 +3,43 @@ import { resolveAppUrl } from '../infrastructure/runtime-config.js';
 const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
 const EXPORT_HOST_SOURCE = 'collabmd-export-host';
 const EXPORT_JOB_CLOSE_POLL_MS = 500;
-const EXPORT_JOB_TIMEOUT_MS = 60_000;
+const EXPORT_JOB_TIMEOUT_MS = 300_000;
 const pendingJobs = new Map();
 let exportBridgeErrorHandler = null;
 
 function createJobId() {
-  return `export-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  const id = globalThis.crypto?.randomUUID?.()
+    ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `export-${id}`;
 }
 
 function normalizeFormat(format) {
   return ['html', 'pdf'].includes(format) ? format : 'docx';
 }
 
-function buildExportUrl({ filePath, format, jobId }) {
-  const url = new URL(resolveAppUrl('/export-document.html'), window.location.origin);
-  url.searchParams.set('action', normalizeFormat(format));
-  url.searchParams.set('job', jobId);
-  if (filePath) {
-    url.searchParams.set('file', filePath);
-  }
-  return url.toString();
-}
-
 function createBootstrapPayload({
+  currentFilePath = '',
+  currentMarkdownText = '',
+  directoryPath = '',
   fileList = [],
   filePath,
   format,
   jobId,
   markdownText = '',
+  theme = 'light',
   title = '',
 }) {
   return {
     action: normalizeFormat(format),
+    currentFilePath: String(currentFilePath ?? ''),
+    currentMarkdownText: String(currentMarkdownText ?? ''),
+    directoryPath: String(directoryPath ?? ''),
     fileList: Array.isArray(fileList) ? fileList.slice() : [],
     filePath: String(filePath ?? ''),
     jobId,
     markdownText: String(markdownText ?? ''),
     source: EXPORT_HOST_SOURCE,
+    theme: theme === 'dark' ? 'dark' : 'light',
     title: String(title ?? ''),
     type: 'bootstrap',
   };
@@ -136,26 +136,9 @@ export function initializeExportBridge({
   window.__collabmdExportBridgeInitialized = true;
 }
 
-export async function exportDocument({
-  fileList = [],
-  filePath,
-  format,
-  markdownText = '',
-  title = '',
-} = {}) {
-  const normalizedFilePath = String(filePath ?? '').trim();
-  if (!normalizedFilePath) {
-    throw new Error('No markdown note is open');
-  }
-
+async function startExport(payload) {
   const jobId = createJobId();
-  const url = buildExportUrl({
-    filePath: normalizedFilePath,
-    format,
-    jobId,
-  });
-
-  const exportWindow = window.open(url, '_blank');
+  const exportWindow = globalThis.open('', jobId);
   if (!exportWindow) {
     throw new Error('Export popup was blocked');
   }
@@ -172,12 +155,9 @@ export async function exportDocument({
       });
     }, EXPORT_JOB_CLOSE_POLL_MS),
     payload: createBootstrapPayload({
-      fileList,
-      filePath: normalizedFilePath,
-      format,
+      ...payload,
       jobId,
-      markdownText,
-      title,
+      theme: document.documentElement.dataset.theme,
     }),
     timeoutId: window.setTimeout(() => {
       finishPendingJob(jobId, {
@@ -188,6 +168,49 @@ export async function exportDocument({
     window: exportWindow,
   });
 
+  exportWindow.location.replace(resolveAppUrl('/export-document.html'));
   exportWindow.focus?.();
   return jobId;
 }
+
+export async function exportDirectory({
+  currentFilePath = '',
+  currentMarkdownText = '',
+  directoryPath,
+  fileList = [],
+  format,
+} = {}) {
+  const normalizedDirectoryPath = String(directoryPath ?? '').replace(/\\/gu, '/').replace(/^\/+|\/+$/gu, '').trim();
+  if (!normalizedDirectoryPath) {
+    throw new Error('No folder was selected');
+  }
+
+  return startExport({
+    currentFilePath,
+    currentMarkdownText,
+    directoryPath: normalizedDirectoryPath,
+    fileList,
+    format,
+  });
+}
+
+export async function exportDocument({
+  fileList = [],
+  filePath,
+  format,
+  markdownText = '',
+  title = '',
+} = {}) {
+  const normalizedFilePath = String(filePath ?? '').trim();
+  if (!normalizedFilePath) {
+    throw new Error('No markdown note is open');
+  }
+
+  return startExport({
+    fileList,
+    filePath: normalizedFilePath,
+    format,
+    markdownText,
+    title,
+  });
+}

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

@@ -1,5 +1,6 @@
 import {
   postExportPageMessage,
+  prepareDirectoryExportSnapshot,
   prepareExportSnapshot,
   runExportAdapter,
   waitForBootstrapPayload,
@@ -7,6 +8,10 @@ import {
 } from './export-pipeline.js';
 import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
 
+function getExportJobId() {
+  return new URLSearchParams(window.location.search).get('job') || window.name || '';
+}
+
 function setStatus(message) {
   const status = document.getElementById('exportStatus');
   if (status) {
@@ -38,7 +43,8 @@ function renderSnapshot(snapshot) {
   }
 
   document.title = `${snapshot.title} — Export`;
-  mount.innerHTML = snapshot.html;
+  const parsed = new DOMParser().parseFromString(`<body>${snapshot.html}</body>`, 'text/html');
+  mount.replaceChildren(...parsed.body.childNodes);
   groupHeadingWithFollowingBlock(mount);
   renderWarnings(snapshot);
   return mount;
@@ -48,7 +54,11 @@ async function bootstrap() {
   try {
     setStatus('Loading export content…');
     const payload = await waitForBootstrapPayload();
-    const snapshot = await prepareExportSnapshot(payload);
+    document.documentElement.dataset.theme = payload.theme;
+    document.body.dataset.theme = payload.theme;
+    const snapshot = payload.directoryPath
+      ? await prepareDirectoryExportSnapshot(payload)
+      : await prepareExportSnapshot(payload);
     const mount = renderSnapshot(snapshot);
     snapshot.html = await waitForRenderedExportContent(mount);
     setStatus(payload.action === 'pdf'
@@ -58,12 +68,12 @@ async function bootstrap() {
     setStatus(payload.action === 'pdf'
       ? 'Print dialog opened.'
       : `${payload.action.toUpperCase()} download started.`);
-    postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
+    postExportPageMessage('complete', { jobId: getExportJobId() });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Export failed';
     setStatus(message);
     postExportPageMessage('error', {
-      jobId: new URL(window.location.href).searchParams.get('job') || '',
+      jobId: getExportJobId(),
       message,
     });
   }