collabmd 0.1.48 → 0.1.49

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-view.js

@@ -58,7 +58,10 @@ export class FileExplorerView {
     this.longPressContext = null;
     this.suppressedActivationTarget = null;
     this.contextMenuCloseHandler = null;
+    this.contextMenuCloseTimer = null;
+    this.contextMenuAnchor = null;
     this.actionSheetCloseHandler = null;
+    this.blockingModalHandler = () => this.removeContextMenu();
     this.dragSource = null;
     this.currentSearchQuery = '';
     this.activeDropTarget = null;
@@ -336,6 +339,8 @@ export class FileExplorerView {
     button.setAttribute('aria-expanded', String(isExpanded));
     button.dataset.path = node.path;
     button.dataset.entryType = 'directory';
+    // Dynamic labels are escaped and icons are application-owned markup.
+    // pi-lens-ignore: no-inner-html-js
     button.innerHTML = `
       <svg class="file-tree-chevron${isExpanded ? ' expanded' : ''}" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
       <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
@@ -502,6 +507,8 @@ export class FileExplorerView {
           ${parentPath ? `<span class="file-tree-search-path">${escapeHtml(parentPath)}</span>` : ''}
         </span>`
       : `<span class="file-tree-name">${escapeHtml(displayName)}</span>`;
+    // Dynamic labels are escaped and icons are application-owned markup.
+    // pi-lens-ignore: no-inner-html-js
     button.innerHTML = `
       ${getVaultFileIconSvg(filePath)}
       ${nameMarkup}
@@ -965,18 +972,23 @@ export class FileExplorerView {
       return;
     }
 
+    const contextAnchor = event.currentTarget instanceof Element ? event.currentTarget : event.target;
+    this.contextMenuAnchor = contextAnchor instanceof HTMLElement ? contextAnchor : null;
     if (this.isMobileViewport()) {
       this.showActionSheet(items);
       return;
     }
 
-    const contextAnchor = event.currentTarget instanceof Element ? event.currentTarget : event.target;
     const menu = document.createElement('div');
     menu.className = 'file-context-menu';
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', 'File actions');
 
     for (const item of items) {
       const button = document.createElement('button');
+      button.type = 'button';
       button.className = `file-context-item${item.danger ? ' file-context-danger' : ''}`;
+      button.setAttribute('role', 'menuitem');
       button.textContent = item.label;
       button.addEventListener('click', () => {
         this.removeContextMenu();
@@ -999,17 +1011,47 @@ export class FileExplorerView {
       }
     };
     this.contextMenuCloseHandler = close;
-    setTimeout(() => document.addEventListener('click', close), 0);
+    const handleKeydown = (keyEvent) => {
+      const buttons = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+      const index = Math.max(0, buttons.indexOf(document.activeElement));
+      if (keyEvent.key === 'Escape') {
+        keyEvent.preventDefault();
+        this.removeContextMenu();
+        return;
+      }
+      if (keyEvent.key === 'Tab') {
+        this.removeContextMenu({ restoreFocus: false });
+        return;
+      }
+      const nextIndex = keyEvent.key === 'Home'
+        ? 0
+        : keyEvent.key === 'End'
+          ? buttons.length - 1
+          : keyEvent.key === 'ArrowDown'
+            ? (index + 1) % buttons.length
+            : keyEvent.key === 'ArrowUp'
+              ? (index - 1 + buttons.length) % buttons.length
+              : -1;
+      if (nextIndex >= 0) {
+        keyEvent.preventDefault();
+        buttons[nextIndex]?.focus();
+      }
+    };
+    menu.addEventListener('keydown', handleKeydown);
+    document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.contextMenuCloseTimer = setTimeout(() => {
+      this.contextMenuCloseTimer = null;
+      if (menu.isConnected && this.contextMenuCloseHandler === close) {
+        document.addEventListener('click', close);
+      }
+    }, 0);
+    menu.querySelector('[role="menuitem"]')?.focus();
   }
 
   showActionSheet(items) {
-    const backdrop = document.createElement('button');
-    backdrop.type = 'button';
-    backdrop.className = 'file-action-sheet-backdrop';
-    backdrop.setAttribute('aria-label', 'Close file actions');
-
-    const sheet = document.createElement('div');
+    const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet';
+    sheet.setAttribute('aria-label', 'File actions');
 
     items.forEach((item) => {
       const button = document.createElement('button');
@@ -1038,26 +1080,42 @@ export class FileExplorerView {
     });
     sheet.appendChild(cancelButton);
 
-    backdrop.addEventListener('click', () => {
+    sheet.addEventListener('cancel', (event) => {
+      event.preventDefault();
       this.removeContextMenu();
     });
+    sheet.addEventListener('click', (event) => {
+      const bounds = sheet.getBoundingClientRect();
+      if (event.clientX < bounds.left || event.clientX > bounds.right
+        || event.clientY < bounds.top || event.clientY > bounds.bottom) this.removeContextMenu();
+    });
 
-    document.body.append(backdrop, sheet);
+    document.body.append(sheet);
+    document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.actionSheetCloseHandler = () => {
-      backdrop.remove();
+      if (sheet.open) sheet.close();
       sheet.remove();
       this.actionSheetCloseHandler = null;
     };
+    sheet.showModal();
+    sheet.querySelector('button:not(:disabled)')?.focus();
   }
 
-  removeContextMenu() {
+  removeContextMenu({ restoreFocus = true } = {}) {
     this.cancelLongPress();
     this.clearDragFeedback();
     document.querySelectorAll('.file-context-menu').forEach((menu) => menu.remove());
+    if (this.contextMenuCloseTimer !== null) {
+      clearTimeout(this.contextMenuCloseTimer);
+      this.contextMenuCloseTimer = null;
+    }
     if (this.contextMenuCloseHandler) {
       document.removeEventListener('click', this.contextMenuCloseHandler);
       this.contextMenuCloseHandler = null;
     }
+    document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.actionSheetCloseHandler?.();
+    if (restoreFocus) this.contextMenuAnchor?.focus?.();
+    this.contextMenuAnchor = null;
   }
 }

package/src/client/presentation/file-history-view-controller.js

@@ -544,12 +544,14 @@ export class FileHistoryViewController {
     this.actionsDivider?.classList.add('hidden');
     this.editorActionsGroup?.classList.remove('hidden');
     this.modeButtons.forEach((button) => {
+      const active = button.getAttribute('data-diff-mode') === this.diffMode;
       button.classList.toggle('hidden', !hasSelection);
-      button.classList.toggle('active', button.getAttribute('data-diff-mode') === this.diffMode);
+      button.classList.toggle('active', active);
+      button.setAttribute?.('aria-pressed', String(active));
     });
     this.openEditorButton?.toggleAttribute('disabled', !this.currentFilePath);
     if (this.openEditorButton) {
-      this.openEditorButton.textContent = 'Open File';
+      this.openEditorButton.textContent = 'Open file';
     }
     this.primaryActionButton?.toggleAttribute('disabled', true);
     this.commitButton?.toggleAttribute('disabled', true);
@@ -562,13 +564,13 @@ export class FileHistoryViewController {
     this.page?.classList.remove('hidden');
     if (this.content) {
       this.content.classList.add('diff-content--history');
-      this.content.innerHTML = '<div class="git-panel-empty">Loading file history...</div>';
+      this.content.innerHTML = '<div class="git-panel-empty" role="status" aria-live="polite">Loading file history…</div>';
     }
     this.historyListElement = null;
     this.syncToolbar();
   }
 
-  renderEmpty(message) {
+  renderEmpty(message, { alert = false } = {}) {
     if (!this.isActive) {
       return;
     }
@@ -576,7 +578,7 @@ export class FileHistoryViewController {
     if (this.content) {
       this.content.classList.add('diff-content--history');
       // pi-lens-ignore: no-inner-html-js
-      this.content.innerHTML = `<div class="git-panel-empty">${escapeHtml(message)}</div>`;
+      this.content.innerHTML = `<div class="git-panel-empty"${alert ? ' role="alert"' : ''}>${escapeHtml(message)}</div>`;
     }
     this.historyListElement = null;
     this.syncToolbar();
@@ -691,7 +693,7 @@ export class FileHistoryViewController {
             type="button"
             data-file-history-open-selected-diff
           >
-            Open Standalone Diff
+            Open standalone diff
           </button>
           ${entry.type === 'commit' ? `
             <button
@@ -699,7 +701,7 @@ export class FileHistoryViewController {
               type="button"
               data-file-history-open-selected-preview
             >
-              Preview File
+              Preview file
             </button>
           ` : ''}
         </div>
@@ -719,7 +721,7 @@ export class FileHistoryViewController {
           <div class="diff-file-header">
             <span class="diff-file-path">${escapeHtml(entry.pathAtCommit || this.currentFilePath || '')}</span>
           </div>
-          <div class="diff-empty-state">Loading diff...</div>
+          <div class="diff-empty-state" role="status" aria-live="polite">Loading diff…</div>
         </section>
       `;
     }
@@ -728,7 +730,7 @@ export class FileHistoryViewController {
       return `
         <section class="diff-file-block file-history-diff-block">
           ${this.renderDiffFileHeader({ path: entry.pathAtCommit || this.currentFilePath || '' })}
-          <div class="diff-empty-state">${escapeHtml(selection.error)}</div>
+          <div class="diff-empty-state" role="alert">${escapeHtml(selection.error)}</div>
         </section>
       `;
     }
@@ -764,7 +766,7 @@ export class FileHistoryViewController {
 
     const hasRows = Boolean(this.localChanges) || (this.history.commits?.length ?? 0) > 0;
     if (!hasRows) {
-      this.renderEmpty(this.history.error || 'No history found for this file.');
+      this.renderEmpty(this.history.error || 'No history found for this file.', { alert: Boolean(this.history.error) });
       return;
     }
 
@@ -794,7 +796,7 @@ export class FileHistoryViewController {
                 data-file-history-load-more
                 ${this.history.loadingMore ? 'disabled' : ''}
               >
-                ${this.history.loadingMore ? 'Loading...' : 'Load More'}
+                ${this.history.loadingMore ? 'Loading…' : 'Load more'}
               </button>
             </div>
           ` : ''}