collabmd 0.1.48 → 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);
     },
@@ -1199,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
@@ -1347,7 +1409,7 @@ function applySceneFromJson(rawJson, {
     return;
   }
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
   recordSceneDiagnostic('remote-scene-received', {}, normalizedJson);
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
@@ -1423,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();
@@ -1499,7 +1561,7 @@ function applyLocalScene(scene, {
   const normalizedScene = normalizeScene(scene);
   const normalizedJson = JSON.stringify(normalizedScene);
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
     pendingRemoteSceneJson = normalizedJson;
@@ -1845,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;
@@ -1942,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;
@@ -1952,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 || '';
@@ -2053,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

@@ -8,7 +8,9 @@ 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) {

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

@@ -17,10 +17,11 @@ import { compilePreviewDocument } from '../application/preview-render-compiler.j
 import { isMarkdownFilePath, stripVaultFileExtension } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
 import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
-import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
+import { createExcalidrawExportOptions, parseSceneJson } from '../domain/excalidraw-scene.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
+import { parseApiResponse } from '../infrastructure/api-client-utils.js';
 
 const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
 const EXPORT_HOST_SOURCE = 'collabmd-export-host';
@@ -355,11 +356,7 @@ async function fetchJson(url, init = {}) {
     },
     ...init,
   });
-  const data = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new Error(data?.error || `Request failed: ${response.status}`);
-  }
-  return data;
+  return parseApiResponse(response, `Request failed: ${response.status}`);
 }
 
 async function fetchTextFile(filePath) {
@@ -820,17 +817,7 @@ async function renderPlantUmlToSvgMarkup(source) {
 async function renderExcalidrawToSvgMarkup(filePath) {
   const rawScene = await fetchTextFile(filePath);
   const scene = parseSceneJson(rawScene);
-  const initialData = sceneToInitialData(scene, { theme: 'light' });
-  const svgElement = await exportExcalidrawToSvg({
-    appState: {
-      ...initialData.appState,
-      exportBackground: true,
-      exportWithDarkMode: false,
-    },
-    elements: initialData.elements.filter((element) => !element.isDeleted),
-    exportPadding: 24,
-    files: initialData.files || null,
-  });
+  const svgElement = await exportExcalidrawToSvg(createExcalidrawExportOptions(scene));
   return normalizeExportSvgMarkup(svgElement.outerHTML, { padding: 24 });
 }
 

package/src/client/infrastructure/agent-connection-api-client.js

@@ -0,0 +1,23 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { parseApiResponse } from './api-client-utils.js';
+
+export const agentConnectionApiClient = {
+  listConnections() {
+    return fetch(resolveApiUrl('/agent/connections'))
+      .then((response) => parseApiResponse(response, 'Failed to load Agent Connections'));
+  },
+
+  createConnection(payload) {
+    return fetch(resolveApiUrl('/agent/connections'), {
+      body: JSON.stringify(payload),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    }).then((response) => parseApiResponse(response, 'Failed to create Agent Connection'));
+  },
+
+  revokeConnection(connectionId) {
+    return fetch(resolveApiUrl(`/agent/connections/${encodeURIComponent(connectionId)}`), {
+      method: 'DELETE',
+    }).then((response) => parseApiResponse(response, 'Failed to revoke Agent Connection'));
+  },
+};

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

@@ -1,6 +1,7 @@
 import '../styles/features/auth-gate.css';
 
 import { getHashParamsFromRaw } from '../domain/hash-routes.js';
+import { parseApiResponse } from './api-client-utils.js';
 import { getRuntimeConfig } from './runtime-config.js';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -66,12 +67,7 @@ async function fetchAuthStatus(config) {
     },
   });
 
-  const payload = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    throw new Error(payload.error || 'Failed to read auth status');
-  }
-
-  return payload;
+  return parseApiResponse(response, 'Failed to read auth status');
 }
 
 function syncOidcIdentityToLocalState(status) {
@@ -100,13 +96,7 @@ async function submitPassword(config, password) {
     },
     body: JSON.stringify({ password }),
   });
-  const payload = await response.json().catch(() => ({}));
-
-  if (!response.ok) {
-    throw new Error(payload.error || 'Authentication failed');
-  }
-
-  return payload;
+  return parseApiResponse(response, 'Authentication failed');
 }
 
 function createOverlayShell() {

package/src/client/infrastructure/editor-session.js

@@ -290,6 +290,13 @@ export class EditorSession {
     return this.viewAdapter.insertText(text);
   }
 
+  applyTextReplacements(replacements) {
+    if (!this.collaborationClient.initialSyncComplete) {
+      throw new Error('The collaborative document is not synchronized');
+    }
+    return this.viewAdapter.applyTextReplacements(replacements);
+  }
+
   replaceText(text) {
     return this.viewAdapter.replaceText(text);
   }
@@ -306,6 +313,10 @@ export class EditorSession {
     return this.viewAdapter.flashRemoteRange(range);
   }
 
+  isInitialSyncComplete() {
+    return this.collaborationClient.initialSyncComplete;
+  }
+
   waitForInitialSync(timeoutMs = 1500) {
     return this.collaborationClient.waitForInitialSync(timeoutMs);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -50,6 +50,7 @@ import {
   isPlantUmlFilePath,
   isStructurizrFilePath,
 } from '../../domain/file-kind.js';
+import { resolveExactTextChanges } from '../../domain/exact-text-edits.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { formatDocumentText } from '../domain/document-formatter.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
@@ -1143,6 +1144,18 @@ export class EditorViewAdapter {
     return true;
   }
 
+  applyTextReplacements(replacements) {
+    if (!this.editorView) {
+      throw new Error('The editor is not available');
+    }
+
+    const { state } = this.editorView;
+    const changes = resolveExactTextChanges(state.doc.toString(), replacements);
+
+    this.editorView.dispatch({ changes, userEvent: 'input' });
+    return changes.length;
+  }
+
   replaceText(text) {
     if (!this.editorView) {
       return false;

package/src/client/infrastructure/excalidraw-room-client.js

@@ -1,5 +1,7 @@
 import { Doc } from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
+import * as decoding from 'lib0/decoding';
+import * as encoding from 'lib0/encoding';
 import {
   EXCALIDRAW_APP_STATE_KEY,
   EXCALIDRAW_ELEMENTS_KEY,
@@ -12,6 +14,10 @@ import {
   readLegacyExcalidrawRoomScene,
   replaceExcalidrawRoomScene,
 } from '../../domain/excalidraw-room-codec.js';
+import {
+  MSG_AGENT_FLUSH,
+  MSG_AGENT_FLUSH_ACK,
+} from '../../domain/collaboration-protocol.js';
 
 import {
   buildCollaboratorsMap,
@@ -33,6 +39,7 @@ import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 const DEFAULT_EMPTY_SCENE_GUARD_MS = 250;
 const DEFAULT_SAVE_THROTTLE_MS = 48;
 const DEFAULT_SYNC_TIMEOUT_MS = 4000;
+const DEFAULT_AGENT_FLUSH_TIMEOUT_MS = 1000;
 
 export const EXCALIDRAW_ROOM_CONNECTION_STATE = Object.freeze({
   AUTHORITATIVE: 'authoritative',
@@ -178,6 +185,8 @@ export class ExcalidrawRoomClient {
     this.lastViewportSignature = '';
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
+    this.agentFlushRequestCounter = 0;
+    this.pendingAgentFlushRequests = new Map();
     this.structuredObserversAttached = false;
     this.canWriteToRoom = false;
     this.waitingForAuthoritativeSync = false;
@@ -250,6 +259,74 @@ export class ExcalidrawRoomClient {
     return this.connectionState;
   }
 
+  installAgentFlushHandler() {
+    const messageHandlers = this.provider?.messageHandlers;
+    if (!messageHandlers || typeof messageHandlers !== 'object') {
+      return false;
+    }
+
+    messageHandlers[MSG_AGENT_FLUSH_ACK] = (_encoder, decoder) => {
+      let requestId;
+      try {
+        requestId = decoding.readVarString(decoder);
+      } catch {
+        return;
+      }
+
+      const request = this.pendingAgentFlushRequests.get(requestId);
+      if (!request) {
+        return;
+      }
+
+      request.resolve({ status: 'acknowledged' });
+    };
+    return true;
+  }
+
+  settleAgentFlushRequests(status) {
+    const requests = [...this.pendingAgentFlushRequests.values()];
+    requests.forEach((request) => request.resolve({ status }));
+  }
+
+  waitForServerFlush({ timeoutMs = DEFAULT_AGENT_FLUSH_TIMEOUT_MS } = {}) {
+    const ws = this.provider?.ws;
+    const openState = ws?.OPEN ?? globalThis.WebSocket?.OPEN ?? 1;
+    if (
+      !this.canWriteToRoom
+      || !ws
+      || ws.readyState !== openState
+      || !this.provider?.messageHandlers?.[MSG_AGENT_FLUSH_ACK]
+    ) {
+      return Promise.resolve({ status: 'unavailable' });
+    }
+
+    const requestId = `agent-flush-${this.ydoc?.clientID ?? 'client'}-${++this.agentFlushRequestCounter}`;
+    return new Promise((resolve) => {
+      const finish = (result) => {
+        const request = this.pendingAgentFlushRequests.get(requestId);
+        if (!request) {
+          return;
+        }
+        this.clearTimeoutFn(request.timeoutId);
+        this.pendingAgentFlushRequests.delete(requestId);
+        resolve(result);
+      };
+      this.pendingAgentFlushRequests.set(requestId, {
+        resolve: finish,
+        timeoutId: this.setTimeoutFn(() => finish({ status: 'timeout' }), timeoutMs),
+      });
+
+      try {
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, MSG_AGENT_FLUSH);
+        encoding.writeVarString(encoder, requestId);
+        ws.send(encoding.toUint8Array(encoder));
+      } catch {
+        finish({ status: 'unavailable' });
+      }
+    });
+  }
+
   hasPendingWrites() {
     return Boolean(this.pendingSceneSyncPayload);
   }
@@ -368,6 +445,7 @@ export class ExcalidrawRoomClient {
       disableBc: true,
       maxBackoffTime: 5000,
     });
+    this.installAgentFlushHandler();
     stopReconnectOnControlledClose(this.provider);
 
     this.awareness = this.provider.awareness;
@@ -636,7 +714,7 @@ export class ExcalidrawRoomClient {
   }
 
   scheduleSceneSync(elements, appState, files) {
-    if (!this.canWriteToRoom) {
+    if (!this.canWriteToRoom || this.isApplyingSharedSnapshot()) {
       return false;
     }
 
@@ -933,6 +1011,7 @@ export class ExcalidrawRoomClient {
 
   disconnect() {
     this.flushSceneSync();
+    this.settleAgentFlushRequests('disconnected');
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.DISCONNECTING);
     this.clearTimeoutFn(this.sceneSyncTimer);
     this.sceneSyncTimer = null;