collabmd 0.1.49 → 0.1.52

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

@@ -1,4 +1,3 @@
-import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -14,6 +13,7 @@ import {
   defaultHighlightStyle,
   foldGutter,
   foldKeymap,
+  forceParsing,
   indentOnInput,
   syntaxHighlighting,
 } from '@codemirror/language';
@@ -60,8 +60,20 @@ import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantum
 import { structurizrLanguage, structurizrLanguageDescription } from '../domain/structurizr-language.js';
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
+const MARKDOWN_CODE_LANGUAGE_ALIASES = new Set([
+  'bash', 'c', 'c++', 'cpp', 'css', 'diff', 'html', 'java', 'javascript', 'js',
+  'json', 'jsx', 'markdown', 'md', 'python', 'py', 'rust', 'sh', 'shell', 'sql',
+  'ts', 'tsx', 'typescript', 'xml', 'yaml', 'yml',
+]);
+
+function isMarkdownCodeLanguage(language) {
+  const names = [language.name, ...(language.alias || [])]
+    .map((value) => String(value).toLowerCase());
+  return names.some((name) => MARKDOWN_CODE_LANGUAGE_ALIASES.has(name));
+}
+
 const markdownCodeLanguages = [
-  ...languages,
+  ...languages.filter(isMarkdownCodeLanguage),
   mermaidLanguageDescription,
   plantUmlLanguageDescription,
   structurizrLanguageDescription,
@@ -240,9 +252,6 @@ function createEditorTheme(theme) {
   const selectionBackground = theme === 'dark'
     ? 'oklch(from var(--color-primary) l c h / 0.4)'
     : 'oklch(from var(--color-primary) l c h / 0.26)';
-  const selectionBorder = theme === 'dark'
-    ? 'oklch(from var(--color-primary) l c h / 0.65)'
-    : 'oklch(from var(--color-primary) l c h / 0.5)';
   const caretColor = theme === 'dark'
     ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
     : 'color-mix(in oklab, var(--color-primary) 84%, black)';
@@ -292,6 +301,10 @@ function createEditorTheme(theme) {
       backgroundColor: activeLineBackground,
       boxShadow: `inset 3px 0 0 ${activeLineAccent}`,
     },
+    '&:has(.cm-selectionBackground) .cm-activeLine': {
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+    },
     '.cm-activeLineGutter': {
       backgroundColor: activeLineBackground,
       boxShadow: `inset 3px 0 0 ${activeLineAccent}`,
@@ -345,10 +358,6 @@ function createEditorTheme(theme) {
     '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
       backgroundColor: selectionBackground,
     },
-    '&.cm-focused .cm-selectionLayer .cm-selectionBackground': {
-      border: `1px solid ${selectionBorder}`,
-      borderRadius: '2px',
-    },
     '@keyframes collabmd-remote-update-flash': {
       '0%': {
         backgroundColor: theme === 'dark'
@@ -501,7 +510,7 @@ export class EditorViewAdapter {
       highlightActiveLine(),
       highlightSelectionMatches(),
       createSearchNavigationListener(),
-      this.vimModeCompartment.of(!readOnly && this.vimModeEnabled ? vim({ status: true }) : []),
+      this.vimModeCompartment.of([]),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
@@ -574,6 +583,9 @@ export class EditorViewAdapter {
       parent: this.editorContainer,
       state,
     });
+    // Parse beyond the viewport so diagram syntax does not recolor during scrolling.
+    // ponytail: cap startup work at 50ms; larger documents retain background parsing.
+    forceParsing(this.editorView, state.doc.length, 50);
 
     this.editorContainer.dataset.editorMode = editorMode;
     this.editorView.scrollDOM.addEventListener('scroll', this.handleScroll, { passive: true });
@@ -585,6 +597,10 @@ export class EditorViewAdapter {
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
 
+    if (this.vimModeEnabled && editorMode !== 'provisional') {
+      void this.applyVimExtension();
+    }
+
     if (preserveScrollTop > 0) {
       requestAnimationFrame(() => {
         if (this.editorView?.scrollDOM) {
@@ -676,6 +692,21 @@ export class EditorViewAdapter {
     return this.vimModeEnabled;
   }
 
+  async applyVimExtension() {
+    if (!this.vimModeEnabled || !this.editorView || this.editorView.state.readOnly) {
+      return;
+    }
+
+    const { vim } = await import('@replit/codemirror-vim');
+    if (!this.vimModeEnabled || !this.editorView || this.editorView.state.readOnly) {
+      return;
+    }
+
+    this.editorView.dispatch({
+      effects: this.vimModeCompartment.reconfigure(vim({ status: true })),
+    });
+  }
+
   setVimMode(enabled) {
     const nextEnabled = Boolean(enabled);
     if (nextEnabled === this.vimModeEnabled) {
@@ -687,12 +718,17 @@ export class EditorViewAdapter {
       return nextEnabled;
     }
 
-    this.editorView.dispatch({
-      effects: this.vimModeCompartment.reconfigure(
-        nextEnabled ? vim({ status: true }) : [],
-      ),
+    if (!nextEnabled) {
+      this.editorView.dispatch({
+        effects: this.vimModeCompartment.reconfigure([]),
+      });
+      this.editorView.focus();
+      return nextEnabled;
+    }
+
+    void this.applyVimExtension().then(() => {
+      this.editorView?.focus();
     });
-    this.editorView.focus();
     return nextEnabled;
   }
 

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

@@ -11,6 +11,7 @@ import {
   buildExcalidrawRoomScene,
   ensureExcalidrawRoomSchema,
   isExcalidrawRoomDocStructured,
+  readExcalidrawReplaceGeneration,
   readLegacyExcalidrawRoomScene,
   replaceExcalidrawRoomScene,
 } from '../../domain/excalidraw-room-codec.js';
@@ -22,6 +23,7 @@ import {
 import {
   buildCollaboratorsMap,
   mergeAwarenessUserPatch,
+  normalizeCollaboratorViewport,
 } from '../domain/excalidraw-collaboration.js';
 import {
   buildLiveCollaborationScene,
@@ -174,6 +176,7 @@ export class ExcalidrawRoomClient {
     this.handleProviderSync = null;
     this.handleProviderStatus = null;
     this.lastSceneJson = '';
+    this.lastReplaceGeneration = null;
     this.sceneSyncTimer = null;
     this.sceneSyncDueAt = 0;
     this.lastSceneSyncAt = 0;
@@ -217,6 +220,11 @@ export class ExcalidrawRoomClient {
         return;
       }
 
+      const prevReplaceGeneration = this.lastReplaceGeneration;
+      this.lastReplaceGeneration = readExcalidrawReplaceGeneration(this.ydoc);
+      const authoritative = prevReplaceGeneration !== null
+        && this.lastReplaceGeneration > prevReplaceGeneration;
+
       const remoteJson = this.getStructuredSceneJson();
       if (!remoteJson || remoteJson === this.lastSceneJson) {
         return;
@@ -224,7 +232,7 @@ export class ExcalidrawRoomClient {
 
       this.pendingEmptySceneCandidate = null;
       this.lastSceneJson = JSON.stringify(parseSceneJson(remoteJson));
-      this.onRemoteSceneJson(this.lastSceneJson);
+      this.onRemoteSceneJson(this.lastSceneJson, { authoritative });
     };
   }
 
@@ -363,23 +371,6 @@ export class ExcalidrawRoomClient {
     });
   }
 
-  getHistoryState() {
-    return {
-      canRedo: false,
-      canUndo: false,
-      head: null,
-      length: null,
-    };
-  }
-
-  canRedo() {
-    return this.getHistoryState().canRedo;
-  }
-
-  canUndo() {
-    return this.getHistoryState().canUndo;
-  }
-
   isApplyingSharedSnapshot() {
     return this.applyingSharedSnapshotDepth > 0;
   }
@@ -392,14 +383,6 @@ export class ExcalidrawRoomClient {
     this.applyingSharedSnapshotDepth = Math.max(0, this.applyingSharedSnapshotDepth - 1);
   }
 
-  subscribeHistoryState(listener) {
-    if (typeof listener === 'function') {
-      listener(this.getHistoryState());
-    }
-
-    return () => {};
-  }
-
   setLocalUser(nextUser = {}) {
     this.localUser = mergeAwarenessUserPatch({
       currentUser: this.localUser,
@@ -885,25 +868,6 @@ export class ExcalidrawRoomClient {
     this.pendingPointerPayload = null;
   }
 
-  normalizeViewportAwareness(viewport) {
-    if (!viewport || typeof viewport !== 'object') {
-      return null;
-    }
-
-    const scrollX = Number(viewport.scrollX);
-    const scrollY = Number(viewport.scrollY);
-    const zoom = Number(viewport.zoom);
-    if (!Number.isFinite(scrollX) || !Number.isFinite(scrollY) || !Number.isFinite(zoom) || zoom <= 0) {
-      return null;
-    }
-
-    return {
-      scrollX,
-      scrollY,
-      zoom,
-    };
-  }
-
   scheduleLocalPointerAwareness(payload) {
     if (!this.awareness || !payload?.pointer) {
       return;
@@ -941,7 +905,7 @@ export class ExcalidrawRoomClient {
       return;
     }
 
-    const normalizedViewport = this.normalizeViewportAwareness(viewport);
+    const normalizedViewport = normalizeCollaboratorViewport(viewport);
     if (!normalizedViewport) {
       return;
     }
@@ -1071,5 +1035,6 @@ export class ExcalidrawRoomClient {
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED);
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
+    this.lastReplaceGeneration = null;
   }
 }

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

@@ -28,6 +28,11 @@ export const gitApiClient = {
     return parseApiResponse(response, 'Failed to load git status');
   },
 
+  getPullBackupSummaryUrl(backupId) {
+    const params = createSearchParams({ id: backupId });
+    return resolveApiUrl(`/git/pull-backup-summary?${params.toString()}`);
+  },
+
   async readPullBackups() {
     const response = await fetch(resolveApiUrl('/git/pull-backups'));
     return parseApiResponse(response, 'Failed to load pull backups');

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

@@ -0,0 +1,60 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { parseApiResponse } from './api-client-utils.js';
+
+function request(path, { body = null, fallback = 'Request failed', method = 'GET' } = {}) {
+  return fetch(resolveApiUrl(path), {
+    ...(body === null ? {} : { body: JSON.stringify(body) }),
+    headers: { 'Content-Type': 'application/json' },
+    method,
+  }).then((response) => parseApiResponse(response, fallback));
+}
+
+export const hostedApiClient = {
+  acceptInvitation() {
+    return request('/hosted/invitations/accept', { fallback: 'Failed to accept invitation', method: 'POST' });
+  },
+
+  claimWorkspace({ teamName, token }) {
+    return request('/hosted/claim', { body: { teamName, token }, fallback: 'Failed to claim workspace', method: 'POST' });
+  },
+
+  completeSetup() {
+    return request('/hosted/setup/complete', { fallback: 'Failed to complete setup', method: 'POST' });
+  },
+
+  createInvitation({ email, role }) {
+    return request('/hosted/invitations', { body: { email, role }, fallback: 'Failed to create invitation', method: 'POST' });
+  },
+
+  getStatus() {
+    return request('/hosted/status', { fallback: 'Failed to load workspace status' });
+  },
+
+  listAuditEvents() {
+    return request('/hosted/audit', { fallback: 'Failed to load access history' });
+  },
+
+  listInvitations() {
+    return request('/hosted/invitations', { fallback: 'Failed to load invitations' });
+  },
+
+  listMemberships() {
+    return request('/hosted/memberships', { fallback: 'Failed to load collaborators' });
+  },
+
+  removeMembership(membershipId) {
+    return request(`/hosted/memberships/${encodeURIComponent(membershipId)}`, { fallback: 'Failed to remove collaborator', method: 'DELETE' });
+  },
+
+  revokeInvitation(invitationId) {
+    return request(`/hosted/invitations/${encodeURIComponent(invitationId)}`, { fallback: 'Failed to revoke invitation', method: 'DELETE' });
+  },
+
+  updateInvitationRole(invitationId, role) {
+    return request(`/hosted/invitations/${encodeURIComponent(invitationId)}`, { body: { role }, fallback: 'Failed to update invitation', method: 'PATCH' });
+  },
+
+  updateMembershipRole(membershipId, role) {
+    return request(`/hosted/memberships/${encodeURIComponent(membershipId)}`, { body: { role }, fallback: 'Failed to update role', method: 'PATCH' });
+  },
+};

package/src/client/infrastructure/lobby-presence.js

@@ -2,12 +2,12 @@ import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 
 import { createRandomUser } from '../domain/room.js';
+import { LOBBY_CHAT_MAX_MESSAGES, LOBBY_CHAT_MESSAGE_MAX_LENGTH } from '../domain/lobby-chat.js';
 import { resolveWsBaseUrl } from './runtime-config.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 
 const LOBBY_ROOM_NAME = '__lobby__';
-export const LOBBY_CHAT_MESSAGE_MAX_LENGTH = 280;
-export const LOBBY_CHAT_MAX_MESSAGES = 40;
+
 
 function normalizeChatMessage(value) {
   const normalized = String(value ?? '')

package/src/client/infrastructure/runtime-config.js

@@ -1,9 +1,11 @@
 import {
+  getActiveVaultId,
   getClientRuntimeConfig,
   resolveApiUrl,
   resolveAppPath,
   resolveAppUrl,
   resolveWsBaseUrl,
+  setActiveVaultId,
 } from '../domain/runtime-paths.js';
 import {
   createFileRouteHash,
@@ -16,7 +18,7 @@ export function getRuntimeConfig() {
   return getClientRuntimeConfig();
 }
 
-export { resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl };
+export { getActiveVaultId, resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl, setActiveVaultId };
 export { createFileRouteHash, isCollabMdHashRoute };
 
 function getHashParams() {

package/src/client/infrastructure/tab-activity-lock.js

@@ -38,13 +38,17 @@ export class TabActivityLock {
     this.channel = null;
     this.heartbeatTimer = null;
     this.isOwner = false;
+    this.listenerController = null;
     this.handleStorageEvent = this.handleStorageEvent.bind(this);
     this.handlePageHide = this.handlePageHide.bind(this);
   }
 
   initialize() {
-    window.addEventListener('storage', this.handleStorageEvent);
-    window.addEventListener('pagehide', this.handlePageHide);
+    this.listenerController?.abort();
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    window.addEventListener('storage', this.handleStorageEvent, { signal });
+    window.addEventListener('pagehide', this.handlePageHide, { signal });
 
     if ('BroadcastChannel' in globalThis) {
       this.channel = new BroadcastChannel(CHANNEL_NAME);
@@ -56,8 +60,8 @@ export class TabActivityLock {
 
   destroy() {
     this.release();
-    window.removeEventListener('storage', this.handleStorageEvent);
-    window.removeEventListener('pagehide', this.handlePageHide);
+    this.listenerController?.abort();
+    this.listenerController = null;
     this.channel?.close();
     this.channel = null;
   }

package/src/client/infrastructure/webmcp-tool-registry.js

@@ -1,3 +1,4 @@
+import { getVaultFileKind } from '../../domain/file-kind.js';
 import {
   listWebMcpToolDefinitions,
   toWebMcpToolName,
@@ -128,10 +129,15 @@ function createActiveContextResult(context = {}) {
   return {
     activeDiagramPath,
     activePath,
+    kind: getVaultFileKind(activePath),
+    localRevision: context.localRevision ?? null,
+    selection: context.selection ?? null,
     preferredDiagramPath: activeDiagramPath,
     workflow: activeDiagramPath
       ? `Current diagram is ${activeDiagramPath}. Inspect it, edit with the returned exact revision, request inline verification, then use the returned canvas paint acknowledgement.`
-      : 'No diagram is active. Use create_excalidraw with a new .excalidraw path and request inline verification. Inspect then revision-edit any existing path; do not retry stale edits without rereading.',
+      : activePath
+        ? 'Read the active document before editing. Selection offsets are UTF-16 and refer to localRevision; compare it with the fresh server revision and reconsider the selection if they differ. Batch unique exact replacements; reread on conflict. Request Markdown validation when changing references.'
+        : 'No diagram is active. Use create_excalidraw with a new .excalidraw path and request inline verification. Inspect then revision-edit any existing path; do not retry stale edits without rereading.',
   };
 }
 
@@ -158,10 +164,10 @@ function createActiveContextTool(getActiveContext) {
   return {
     annotations: {
       readOnlyHint: true,
-      untrustedContentHint: false,
+      untrustedContentHint: true,
     },
-    description: 'Return current CollabMD file and active-diagram context plus the safe create-or-edit workflow. Call before Excalidraw tools.',
-    execute: async () => createActiveContextResult(getActiveContext?.()),
+    description: 'Return the active file kind, bounded primary editor selection (up to 2000 characters), local snapshot revision, and diagram context. Call for edits referring to this document or selection. Local revision does not confirm server synchronization; read_document supplies the edit revision.',
+    execute: async () => createActiveContextResult(await getActiveContext?.()),
     inputSchema: {
       additionalProperties: false,
       properties: {},
@@ -213,7 +219,8 @@ export class WebMcpToolRegistry {
     try {
       const tools = listWebMcpToolDefinitions().map((definition) => ({
         annotations: {
-          readOnlyHint: definition.annotations.readOnlyHint,
+          consequentialHint: !definition.annotations.readOnlyHint,
+          readOnlyHint: Boolean(definition.annotations.readOnlyHint),
           untrustedContentHint: Boolean(definition.untrustedContentHint),
         },
         description: getWebMcpDescription(definition),
@@ -228,7 +235,21 @@ export class WebMcpToolRegistry {
             });
             throwIfAborted(signal);
           }
-          const serverResult = await this.callTool(definition.name, input, { signal });
+          let serverResult;
+          try {
+            serverResult = await this.callTool(definition.name, input, { signal });
+          } catch (error) {
+            throwIfAborted(signal);
+            const body = error?.body;
+            if (
+              typeof body?.code === 'string'
+              && body.code.startsWith('AGENT_')
+              && body.code !== 'AGENT_REQUEST_FAILED'
+            ) {
+              return { ...body, isError: true };
+            }
+            throw error;
+          }
           let result = await replaceSnapshotRendering(
             serverResult,
             this.renderExcalidrawScene,

package/src/client/presentation/bases-preview-controller.js

@@ -7,7 +7,8 @@ import { segmentedButtonClassNames, segmentedControlClassNames } from './compone
 import { downloadBlob, parseDownloadFileName } from '../browser-utils.js';
 
 function createShellKey() {
-  return `base-${Math.random().toString(36).slice(2, 10)}`;
+  const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `base-${id}`;
 }
 
 function replaceChildrenFromHtml(target, html) {

package/src/client/presentation/comment-markdown-renderer.js

@@ -1,5 +1,5 @@
 import markdownIt from 'markdown-it';
-import hljs from 'highlight.js';
+import { enableMarkdownMath } from '../domain/markdown-math.js';
 
 import { escapeHtml } from '../domain/vault-utils.js';
 
@@ -15,24 +15,14 @@ function renderPlainTextCommentHtml(text = '') {
 function createCommentMarkdownRenderer() {
   const markdown = markdownIt({
     breaks: true,
-    highlight(source, language) {
-      try {
-        if (language && hljs.getLanguage(language)) {
-          return hljs.highlight(source, {
-            ignoreIllegals: true,
-            language,
-          }).value;
-        }
-
-        return hljs.highlightAuto(source).value;
-      } catch {
-        return escapeHtml(source);
-      }
+    highlight(source) {
+      return escapeHtml(source);
     },
     html: false,
     linkify: true,
     typographer: true,
   });
+  enableMarkdownMath(markdown);
 
   const fallbackLinkOpen = markdown.renderer.rules.link_open;
   const fallbackTableOpen = markdown.renderer.rules.table_open;

package/src/client/presentation/comment-overview-controller.js

@@ -105,12 +105,11 @@ export class CommentOverviewController {
   }
 
   render() {
-    if (!this.panel) {
+    if (!this.panel || this.panel.classList.contains('hidden')) {
       return;
     }
 
     this.panel.replaceChildren();
-
     if (this.errorMessage) {
       const error = createOverviewState({
         copy: this.errorMessage,

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -4,7 +4,6 @@ import {
   normalizeCommentQuoteForComparison,
 } from '../../../domain/comment-threads.js';
 import { clamp } from '../../domain/vault-utils.js';
-import { renderCommentMarkdownToHtml } from '../comment-markdown-renderer.js';
 
 export { COMMENT_BODY_MAX_LENGTH, clamp };
 
@@ -112,7 +111,11 @@ export function getLatestGroupMessage(group) {
 export function createRenderedCommentBody(body, className = 'comment-markdown') {
   const container = document.createElement('div');
   container.className = className;
-  container.innerHTML = renderCommentMarkdownToHtml(body);
+  const markdownText = String(body ?? '');
+  container.textContent = markdownText;
+  void import('../comment-markdown-renderer.js').then(({ renderCommentMarkdownToHtml }) => {
+    container.innerHTML = renderCommentMarkdownToHtml(markdownText);
+  });
   return container;
 }
 

package/src/client/presentation/comment-ui-controller.js

@@ -63,6 +63,7 @@ export class CommentUiController {
     this.cardRoot = null;
     this.pendingCardFocusElement = null;
     this.reactionPicker = null;
+    this.listenerController = null;
     this.layoutFrame = 0;
     this.timeFormatter = new Intl.DateTimeFormat(undefined, {
       day: 'numeric',
@@ -200,26 +201,28 @@ export class CommentUiController {
       }
     };
 
-    this.commentSelectionButton?.addEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    this.commentSelectionButton?.addEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown, { signal });
     this.commentSelectionButton?.addEventListener('click', () => {
       this.openComposerForSelection('toolbar');
-    });
+    }, { signal });
     this.commentsToggleButton?.addEventListener('click', () => {
       this.setDrawerOpen(!this.drawerOpen);
-    });
-    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
-    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true });
-    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave);
-    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn);
-    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut);
-    this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown);
-    this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut);
-    window.addEventListener('resize', this.handleWindowResize);
-    document.addEventListener('pointerup', this.handleDocumentPointerUp);
-    document.addEventListener('pointercancel', this.handleDocumentPointerUp);
-    document.addEventListener('pointerdown', this.handleDocumentPointerDown);
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
-    document.addEventListener('selectionchange', this.handleDocumentSelectionChange);
+    }, { signal });
+    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true, signal });
+    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true, signal });
+    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave, { signal });
+    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn, { signal });
+    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut, { signal });
+    this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown, { signal });
+    this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut, { signal });
+    window.addEventListener('resize', this.handleWindowResize, { signal });
+    document.addEventListener('pointerup', this.handleDocumentPointerUp, { signal });
+    document.addEventListener('pointercancel', this.handleDocumentPointerUp, { signal });
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown, { signal });
+    document.addEventListener('keydown', this.handleDocumentKeyDown, { signal });
+    document.addEventListener('selectionchange', this.handleDocumentSelectionChange, { signal });
   }
 
   destroy() {
@@ -228,20 +231,8 @@ export class CommentUiController {
       this.layoutFrame = 0;
     }
     this.attachSession(null);
-    this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
-    this.previewElement?.removeEventListener('pointermove', this.handlePreviewPointerMove);
-    this.previewElement?.removeEventListener('pointerleave', this.handlePreviewPointerLeave);
-    this.previewElement?.removeEventListener('focusin', this.handlePreviewFocusIn);
-    this.previewElement?.removeEventListener('focusout', this.handlePreviewFocusOut);
-    this.commentSelectionButton?.removeEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
-    this.editorContainer?.removeEventListener('pointerdown', this.handleEditorPointerDown);
-    this.editorContainer?.removeEventListener('focusout', this.handleEditorFocusOut);
-    window.removeEventListener('resize', this.handleWindowResize);
-    document.removeEventListener('pointerup', this.handleDocumentPointerUp);
-    document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
-    document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    document.removeEventListener('selectionchange', this.handleDocumentSelectionChange);
+    this.listenerController?.abort();
+    this.listenerController = null;
     this.previewHoverRegions = [];
     this.previewSelection = null;
     this.cardRoot?.remove();