collabmd 0.1.48 → 0.1.51

package/src/client/presentation/excalidraw-embed-controller.js

@@ -1,6 +1,7 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
+import { parseExcalidrawElementLink } from '../domain/excalidraw-element-link.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
-import { resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
+import { resolveAppPath, resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -26,6 +27,7 @@ export class ExcalidrawEmbedController {
   constructor({
     getTheme,
     getLocalUser,
+    onOpenElement = null,
     onOpenFile = null,
     onStopFollowing = null,
     onToggleQuickSwitcher = null,
@@ -35,6 +37,7 @@ export class ExcalidrawEmbedController {
   }) {
     this.getTheme = getTheme;
     this.getLocalUser = getLocalUser;
+    this.onOpenElement = onOpenElement;
     this.onOpenFile = onOpenFile;
     this.onStopFollowing = onStopFollowing;
     this.onToggleQuickSwitcher = onToggleQuickSwitcher;
@@ -56,6 +59,8 @@ export class ExcalidrawEmbedController {
     this.followedPeerIdsByFilePath = new Map();
     this.pendingDisconnectRequests = new Map();
     this.disconnectRequestCounter = 0;
+    this.pendingAgentBridgeRequests = new Map();
+    this.agentBridgeRequestCounter = 0;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -96,6 +101,10 @@ export class ExcalidrawEmbedController {
       request.resolve(false);
     });
     this.pendingDisconnectRequests.clear();
+    this.pendingAgentBridgeRequests.forEach((request) => {
+      request.resolve({ status: 'destroyed' });
+    });
+    this.pendingAgentBridgeRequests.clear();
     this.followedPeerIdsByFilePath.clear();
     this.overlayRoot?.remove();
     this.overlayRoot = null;
@@ -251,6 +260,28 @@ export class ExcalidrawEmbedController {
     return true;
   }
 
+  openElement(filePath, elementId, elementType = 'element') {
+    if (!filePath || !elementId) {
+      return false;
+    }
+
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry) {
+      return false;
+    }
+
+    entry.pendingElementFocus = {
+      elementId: String(elementId),
+      elementType: elementType === 'group' ? 'group' : 'element',
+    };
+    if (entry.isReady) {
+      this._postPendingElement(entry);
+    } else if (!entry.wrapper) {
+      this._enqueueHydration(entry, { prioritize: true });
+    }
+    return true;
+  }
+
   prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
@@ -310,6 +341,73 @@ export class ExcalidrawEmbedController {
     });
   }
 
+  flushPendingAgentWrites(filePath, { signal = null, timeoutMs = 1500 } = {}) {
+    const entry = this._findEntryByFilePath(filePath);
+    if (
+      !entry?.isReady
+      || !entry.iframe?.contentWindow
+      || this._getEntryMode(entry) !== 'edit'
+    ) {
+      return Promise.resolve({ status: 'not-active' });
+    }
+    return this._requestAgentBridge(
+      entry,
+      'flush-agent-writes',
+      {},
+      { signal, timeoutMs },
+    );
+  }
+
+  waitForAgentPaint(filePath, revision, {
+    afterRevision = '',
+    signal = null,
+    timeoutMs = 5000,
+  } = {}) {
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry?.isReady || !entry.iframe?.contentWindow || !revision) {
+      return Promise.resolve({ status: 'not-active' });
+    }
+    return this._requestAgentBridge(
+      entry,
+      'wait-for-agent-revision',
+      { afterRevision, revision },
+      { signal, timeoutMs },
+    );
+  }
+
+  _requestAgentBridge(entry, type, payload, { signal, timeoutMs }) {
+    const requestId = `agent-bridge-${++this.agentBridgeRequestCounter}`;
+    return new Promise((resolve) => {
+      const finish = (value) => {
+        const request = this.pendingAgentBridgeRequests.get(requestId);
+        if (!request) return;
+        window.clearTimeout(request.timeoutId);
+        signal?.removeEventListener?.('abort', request.abort);
+        this.pendingAgentBridgeRequests.delete(requestId);
+        resolve(value);
+      };
+      const abort = () => finish({ status: 'cancelled' });
+      const timeoutId = window.setTimeout(() => finish({ status: 'timeout' }), timeoutMs);
+      this.pendingAgentBridgeRequests.set(requestId, {
+        abort,
+        entry,
+        resolve: finish,
+        timeoutId,
+      });
+      signal?.addEventListener?.('abort', abort, { once: true });
+      if (signal?.aborted) {
+        abort();
+        return;
+      }
+      this._postMessageToEntry(entry, {
+        ...payload,
+        requestId,
+        source: 'collabmd-host',
+        type,
+      });
+    });
+  }
+
   _ensurePlaceholderObserver() {
     if (!this.previewContainer) {
       return;
@@ -419,6 +517,9 @@ export class ExcalidrawEmbedController {
 
     if (!entry.wrapper) {
       const mount = this._createEmbedContainer(entry);
+      if (!mount) {
+        return;
+      }
       entry.header = mount.header;
       entry.wrapper = mount.wrapper;
       entry.iframe = mount.iframe;
@@ -491,6 +592,7 @@ export class ExcalidrawEmbedController {
       reusedEntry.key = nextEntry.key;
       reusedEntry.label = nextEntry.label;
       reusedEntry.placeholder = nextEntry.placeholder;
+      reusedEntry.pendingElementFocus = null;
       reusedEntry.queued = false;
       nextEntries.set(key, reusedEntry);
     });
@@ -644,7 +746,12 @@ export class ExcalidrawEmbedController {
   }
 
   _buildIframeUrl(entry) {
-    const iframeUrl = new URL(resolveAppUrl(EDITOR_IFRAME_PATH));
+    let iframeUrl;
+    try {
+      iframeUrl = new URL(resolveAppUrl(EDITOR_IFRAME_PATH));
+    } catch {
+      return null;
+    }
     const theme = this.getTheme?.() || 'dark';
 
     iframeUrl.searchParams.set('file', entry.filePath);
@@ -687,6 +794,11 @@ export class ExcalidrawEmbedController {
   }
 
   _createEmbedContainer(entry) {
+    const iframeUrl = this._buildIframeUrl(entry);
+    if (!iframeUrl) {
+      return null;
+    }
+
     const wrapper = document.createElement('div');
     wrapper.className = 'excalidraw-embed diagram-preview-shell';
     wrapper.dataset.embedKey = entry.key;
@@ -727,7 +839,7 @@ export class ExcalidrawEmbedController {
     iframe.className = 'excalidraw-embed-iframe';
     iframe.dataset.instanceId = String(++this.instanceCounter);
     entry.instanceId = iframe.dataset.instanceId;
-    iframe.src = this._buildIframeUrl(entry).toString();
+    iframe.src = iframeUrl.toString();
     // The controller already lazy-hydrates embeds near the viewport, so the
     // iframe should start loading immediately once it has been mounted.
     iframe.setAttribute('loading', 'eager');
@@ -1030,6 +1142,7 @@ export class ExcalidrawEmbedController {
     entry.bootMode = null;
     entry.loadedFilePath = null;
     entry.loadedMode = null;
+    entry.pendingElementFocus = null;
     entry.placeholder = null;
     if (entry.wrapper.parentElement !== warmCacheRoot) {
       warmCacheRoot.appendChild(entry.wrapper);
@@ -1053,7 +1166,11 @@ export class ExcalidrawEmbedController {
     entry.bootMode = this._getEntryMode(entry);
     entry.loadedFilePath = null;
     entry.loadedMode = null;
-    entry.iframe.src = this._buildIframeUrl(entry).toString();
+    const iframeUrl = this._buildIframeUrl(entry);
+    if (!iframeUrl) {
+      return;
+    }
+    entry.iframe.src = iframeUrl.toString();
     this._armEntryBootTimeout(entry);
   }
 
@@ -1218,6 +1335,7 @@ export class ExcalidrawEmbedController {
       });
       this._syncEntryFollowState(entry);
       this._postPendingCommentThread?.(entry);
+      this._postPendingElement?.(entry);
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1234,6 +1352,17 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (msg.type === 'open-element-link') {
+      const target = parseExcalidrawElementLink(msg.href, {
+        appPath: resolveAppPath('/'),
+        origin: window.location.origin,
+      });
+      if (target) {
+        this.onOpenElement?.(target);
+      }
+      return;
+    }
+
     if (msg.type === 'error') {
       if (entry.isParked) {
         return;
@@ -1252,6 +1381,23 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (
+      msg.type === 'agent-writes-flushed'
+      || msg.type === 'agent-revision-painted'
+      || msg.type === 'agent-revision-not-painted'
+    ) {
+      const request = this.pendingAgentBridgeRequests.get(msg.requestId);
+      if (request?.entry === entry) {
+        request.resolve({
+          ...(msg.revision ? { revision: msg.revision } : {}),
+          status: msg.status || (msg.type === 'agent-writes-flushed'
+            ? 'flushed'
+            : (msg.type === 'agent-revision-painted' ? 'painted' : 'not-painted')),
+        });
+      }
+      return;
+    }
+
     if (msg.type === 'disconnect-blocked') {
       entry.authorityState = msg.state || 'reconnecting-readonly';
       this.toastController?.show?.('Waiting for the diagram to reconnect before leaving');
@@ -1300,6 +1446,20 @@ export class ExcalidrawEmbedController {
     entry.pendingCommentThreadId = null;
   }
 
+  _postPendingElement(entry) {
+    if (!entry?.isReady || !entry.pendingElementFocus) {
+      return;
+    }
+
+    this._postMessageToEntry(entry, {
+      elementId: entry.pendingElementFocus.elementId,
+      elementType: entry.pendingElementFocus.elementType,
+      source: 'collabmd-host',
+      type: 'focus-element',
+    });
+    entry.pendingElementFocus = null;
+  }
+
   _requestPreviewViewportFit(entry) {
     if (this._isFilePreviewEntry(entry)) {
       return;

package/src/client/presentation/file-explorer-controller.js

@@ -14,6 +14,7 @@ export class FileExplorerController {
     showFileExtensions = false,
     toastController,
     vaultClient,
+    vaultSwitcher = null,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
@@ -21,6 +22,7 @@ export class FileExplorerController {
     this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
+    this.vaultSwitcher = vaultSwitcher;
     this.state = new FileTreeState();
     this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
@@ -78,6 +80,7 @@ export class FileExplorerController {
 
   initialize() {
     this.view.initialize();
+    this.view.renderVaultSwitcher(this.vaultSwitcher);
     this.actionController.initialize();
   }