collabmd 0.1.18

package/src/client/application/workspace-coordinator.js

@@ -0,0 +1,238 @@
+import { FileOpenLifecycle } from './file-open-lifecycle.js';
+import { WorkspaceChromeController } from './workspace-chrome-controller.js';
+
+export class WorkspaceCoordinator {
+  constructor({
+    attachEditorScroller,
+    beginDocumentLoad,
+    cleanupAfterSessionDestroy,
+    createEditorSession,
+    getDisplayName,
+    getFileList,
+    getLineWrappingEnabled,
+    getLocalUser,
+    getStoredUserName,
+    getTheme,
+    isExcalidrawFile,
+    isMermaidFile,
+    isPlantUmlFile,
+    isTabActive,
+    loadEditorSessionClass,
+    loadBacklinks,
+    onBeforeFileOpen,
+    onConnectionChange,
+    onContentChange,
+    onCommentsChange,
+    onFileAwarenessChange,
+    onFileOpenError,
+    onFileOpenReady,
+    onSelectionChange,
+    onSessionAssigned = null,
+    onRenderExcalidrawPreview,
+    onSyncWrapToggle,
+    onUpdateActiveFile,
+    onUpdateCurrentFile,
+    onUpdateLobbyCurrentFile,
+    onUpdateVisibleChrome,
+    onViewModeReset,
+    renderPresence,
+    scrollContainerForSession,
+    showEditorLoading,
+    stateStore,
+  }) {
+    this.attachEditorScroller = attachEditorScroller;
+    this.beginDocumentLoad = beginDocumentLoad;
+    this.cleanupAfterSessionDestroy = cleanupAfterSessionDestroy;
+    this.createEditorSession = createEditorSession;
+    this.getDisplayName = getDisplayName;
+    this.getFileList = getFileList;
+    this.getLineWrappingEnabled = getLineWrappingEnabled;
+    this.getLocalUser = getLocalUser;
+    this.getStoredUserName = getStoredUserName;
+    this.getTheme = getTheme;
+    this.isExcalidrawFile = isExcalidrawFile;
+    this.isMermaidFile = isMermaidFile;
+    this.isPlantUmlFile = isPlantUmlFile;
+    this.isTabActive = isTabActive;
+    this.loadEditorSessionClassPort = loadEditorSessionClass;
+    this.loadBacklinks = loadBacklinks;
+    this.onBeforeFileOpen = onBeforeFileOpen;
+    this.onConnectionChange = onConnectionChange;
+    this.onContentChange = onContentChange;
+    this.onCommentsChange = onCommentsChange;
+    this.onFileAwarenessChange = onFileAwarenessChange;
+    this.onFileOpenError = onFileOpenError;
+    this.onFileOpenReady = onFileOpenReady;
+    this.onSelectionChange = onSelectionChange;
+    this.onSessionAssigned = onSessionAssigned;
+    this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
+    this.onSyncWrapToggle = onSyncWrapToggle;
+    this.onUpdateActiveFile = onUpdateActiveFile;
+    this.onUpdateCurrentFile = onUpdateCurrentFile;
+    this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile;
+    this.onUpdateVisibleChrome = onUpdateVisibleChrome;
+    this.renderPresence = renderPresence;
+    this.stateStore = stateStore;
+    this.session = null;
+    this.lifecycle = new FileOpenLifecycle({
+      attachEditorScroller,
+      createEditorSession,
+      loadEditorSessionClass: () => this.loadEditorSessionClassPort(),
+      scrollContainerForSession,
+    });
+    this.chromeController = new WorkspaceChromeController({
+      beginDocumentLoad,
+      getDisplayName,
+      loadBacklinks,
+      onBeforeFileOpen,
+      onFileOpenError,
+      onFileOpenReady,
+      onRenderExcalidrawPreview,
+      onSyncWrapToggle,
+      onUpdateActiveFile,
+      onUpdateCurrentFile,
+      onUpdateLobbyCurrentFile,
+      onUpdateVisibleChrome,
+      onViewModeReset,
+      renderPresence,
+      showEditorLoading,
+      stateStore,
+    });
+  }
+
+  getSession() {
+    return this.session;
+  }
+
+  loadEditorSessionClass() {
+    return this.loadEditorSessionClassPort();
+  }
+
+  waitForNextPaint() {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+      });
+    });
+  }
+
+  cleanupSession() {
+    this.session?.destroy();
+    this.session = null;
+    this.lifecycle.clearSessionScroller();
+    this.cleanupAfterSessionDestroy();
+  }
+
+  async openFile(filePath) {
+    if (!this.isTabActive()) {
+      return;
+    }
+
+    const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isMermaid = this.isMermaidFile(filePath);
+    const isPlantUml = this.isPlantUmlFile(filePath);
+
+    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isExcalidraw)) {
+      this.onUpdateActiveFile(filePath);
+      this.onUpdateLobbyCurrentFile(filePath);
+      return;
+    }
+
+    const loadToken = this.stateStore.nextSessionLoadToken();
+
+    this.cleanupSession();
+    const chromeState = this.chromeController.prepareForFileOpen(filePath, {
+      resetConnectionState: !isExcalidraw,
+    });
+
+    if (isExcalidraw) {
+      this.onSessionAssigned?.(null);
+
+      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+        return;
+      }
+
+      this.chromeController.markFileOpenReady(null);
+      this.chromeController.finalizeFileOpen({
+        filePath,
+        isExcalidraw: true,
+        session: null,
+        supportsBacklinks: chromeState.supportsBacklinks,
+      });
+      return;
+    }
+
+    const session = await this.lifecycle.createSession({
+      filePath,
+      getFileList: this.getFileList,
+      lineWrappingEnabled: this.getLineWrappingEnabled(),
+      localUser: this.getLocalUser(),
+      onAwarenessChange: (users) => this.onFileAwarenessChange(users),
+      onConnectionChange: (state) => this.onConnectionChange(state),
+      onCommentsChange: (threads) => this.onCommentsChange?.(threads),
+      onContentChange: () => {
+        if (isExcalidraw) {
+          return;
+        }
+
+        this.onContentChange({
+          isMermaid,
+          isPlantUml,
+        });
+      },
+      preferredUserName: this.getStoredUserName(),
+      onSelectionChange: (anchor) => this.onSelectionChange?.(anchor),
+      theme: this.getTheme(),
+    });
+
+    this.session = session;
+    this.onSessionAssigned?.(session);
+
+    try {
+      await session.initialize(filePath);
+
+      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+        session.destroy();
+        return;
+      }
+
+      this.lifecycle.attachSessionScroller(session);
+      session.applyTheme(this.getTheme());
+      await session.waitForInitialSync();
+      session.ensureInitialContent?.();
+
+      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+        session.destroy();
+        return;
+      }
+
+      this.chromeController.markFileOpenReady(session);
+      session.requestMeasure();
+      await this.waitForNextPaint();
+
+      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+        session.destroy();
+        return;
+      }
+      this.chromeController.finalizeFileOpen({
+        filePath,
+        isExcalidraw,
+        session,
+        supportsBacklinks: chromeState.supportsBacklinks,
+      });
+    } catch (error) {
+      console.error('[app] Failed to initialize editor:', error);
+      session.destroy();
+      this.lifecycle.clearSessionScroller();
+      if (this.session === session) {
+        this.session = null;
+      }
+
+      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+        return;
+      }
+
+      this.chromeController.handleFileOpenError();
+    }
+  }
+}

package/src/client/application/workspace-preview-controller.js

@@ -0,0 +1,237 @@
+import {
+  isDiagramFilePath,
+  isMarkdownFilePath,
+} from '../../domain/file-kind.js';
+
+export class WorkspacePreviewController {
+  constructor({
+    backlinksPanel,
+    elements,
+    excalidrawEmbed,
+    getDisplayName,
+    getSession,
+    isExcalidrawFile,
+    isMermaidFile,
+    isPlantUmlFile,
+    layoutController,
+    outlineController,
+    previewRenderer,
+    schedulePreviewLayoutSync,
+    scrollSyncController,
+    videoEmbed,
+  }) {
+    this.backlinksPanel = backlinksPanel;
+    this.elements = elements;
+    this.excalidrawEmbed = excalidrawEmbed;
+    this.getDisplayName = getDisplayName;
+    this.getSession = getSession;
+    this.isExcalidrawFile = isExcalidrawFile;
+    this.isMermaidFile = isMermaidFile;
+    this.isPlantUmlFile = isPlantUmlFile;
+    this.layoutController = layoutController;
+    this.outlineController = outlineController;
+    this.previewRenderer = previewRenderer;
+    this.schedulePreviewLayoutSyncCallback = schedulePreviewLayoutSync;
+    this.scrollSyncController = scrollSyncController;
+    this.videoEmbed = videoEmbed;
+  }
+
+  createDiagramPreviewDocument(language, source = '') {
+    const text = String(source ?? '');
+    const longestFence = Math.max(...(text.match(/`+/g)?.map((fence) => fence.length) ?? [0]));
+    const fence = '`'.repeat(Math.max(3, longestFence + 1));
+    return `${fence}${language}\n${text}\n${fence}`;
+  }
+
+  getPreviewSource(filePath) {
+    const source = this.getSession()?.getText() ?? '';
+    if (this.isMermaidFile(filePath)) {
+      return this.createDiagramPreviewDocument('mermaid', source);
+    }
+
+    if (this.isPlantUmlFile(filePath)) {
+      return this.createDiagramPreviewDocument('plantuml', source);
+    }
+
+    return source;
+  }
+
+  resetPreviewMode() {
+    this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
+    this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
+    this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
+  }
+
+  syncFileChrome(filePath) {
+    const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isMarkdown = isMarkdownFilePath(filePath);
+    const isMermaid = this.isMermaidFile(filePath);
+    const isPlantUml = this.isPlantUmlFile(filePath);
+    const isDiagramFile = isDiagramFilePath(filePath);
+
+    this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
+    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile);
+    this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
+    this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
+
+    if (isExcalidraw) {
+      this.layoutController.setView('preview', { persist: false });
+      this.outlineController.close();
+      this.backlinksPanel.clear();
+      return;
+    }
+
+    if (isMermaid || isPlantUml) {
+      this.outlineController.close();
+      this.backlinksPanel.clear();
+    }
+  }
+
+  renderExcalidrawFilePreview(filePath) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-excalidraw-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const placeholder = document.createElement('div');
+    placeholder.className = 'excalidraw-embed-placeholder';
+    placeholder.dataset.embedKey = `${filePath}#file-preview`;
+    placeholder.dataset.embedLabel = this.getDisplayName(filePath);
+    placeholder.dataset.embedTarget = filePath;
+    const loadingShell = document.createElement('div');
+    loadingShell.className = 'preview-shell';
+    loadingShell.textContent = 'Loading Excalidraw preview…';
+    placeholder.appendChild(loadingShell);
+    if (renderHost) {
+      renderHost.replaceChildren(placeholder);
+      renderHost.style.minHeight = '';
+    }
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.refresh();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.excalidrawEmbed.reconcileEmbeds(previewElement, { isLargeDocument: false });
+    this.excalidrawEmbed.hydrateVisibleEmbeds();
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
+  createResizeHandler(restoreSidebarState) {
+    let resizeTimer = null;
+    return () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        restoreSidebarState?.();
+        this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+      }, 100);
+    };
+  }
+
+  initializePreviewLayoutObserver(onSchedule = () => {}) {
+    if (typeof ResizeObserver !== 'function' || !this.elements.previewContent) {
+      return null;
+    }
+
+    const observer = new ResizeObserver(() => {
+      onSchedule();
+    });
+    observer.observe(this.elements.previewContent);
+    return observer;
+  }
+
+  schedulePreviewLayoutSync({
+    hydrationPaused,
+    previewLayoutSyncTimer,
+    setPendingPreviewLayoutSync,
+    setPreviewLayoutSyncTimer,
+    delayMs = 120,
+  }) {
+    if (hydrationPaused) {
+      setPendingPreviewLayoutSync(true);
+      return;
+    }
+
+    clearTimeout(previewLayoutSyncTimer);
+
+    const nextTimer = setTimeout(() => {
+      setPreviewLayoutSyncTimer(null);
+
+      const hasSession = Boolean(this.getSession());
+      const isExcalidrawPreview = this.elements.previewContent?.classList?.contains?.('is-excalidraw-file-preview') ?? false;
+      if ((!hasSession && !isExcalidrawPreview) || !this.elements.previewContent) {
+        return;
+      }
+
+      if (this.elements.previewContent.dataset.renderPhase === 'shell') {
+        return;
+      }
+
+      if (hydrationPaused) {
+        setPendingPreviewLayoutSync(true);
+        return;
+      }
+
+      this.previewRenderer.scheduleActiveMermaidRefit();
+      this.previewRenderer.scheduleActivePlantUmlRefit();
+      this.videoEmbed?.syncLayout();
+      this.excalidrawEmbed.syncLayout();
+      if (isExcalidrawPreview && !hasSession) {
+        return;
+      }
+
+      this.scrollSyncController.invalidatePreviewBlocks();
+      this.scrollSyncController.warmPreviewBlocks({
+        onReady: () => {
+          if (!this.getSession()) {
+            return;
+          }
+
+          this.scrollSyncController.realignAfterLayoutChange();
+          this.outlineController.scheduleActiveHeadingUpdate();
+        },
+      });
+    }, delayMs);
+
+    setPreviewLayoutSyncTimer(nextTimer);
+  }
+
+  handleEditorScrollActivityChange({
+    isActive,
+    pendingPreviewLayoutSync,
+    previewLayoutSyncTimer,
+    setHydrationPaused,
+    setPendingPreviewLayoutSync,
+    setPreviewLayoutSyncTimer,
+  }) {
+    const nextPaused = Boolean(isActive);
+    setHydrationPaused(nextPaused);
+    this.previewRenderer.setHydrationPaused(nextPaused);
+    this.excalidrawEmbed.setHydrationPaused(nextPaused);
+
+    if (nextPaused) {
+      clearTimeout(previewLayoutSyncTimer);
+      setPreviewLayoutSyncTimer(null);
+      setPendingPreviewLayoutSync(true);
+      return;
+    }
+
+    if (pendingPreviewLayoutSync) {
+      setPendingPreviewLayoutSync(false);
+      this.schedulePreviewLayoutSync({
+        delayMs: 0,
+        hydrationPaused: false,
+        previewLayoutSyncTimer: null,
+        setPendingPreviewLayoutSync,
+        setPreviewLayoutSyncTimer,
+      });
+    }
+  }
+}

package/src/client/application/workspace-route-controller.js

@@ -0,0 +1,170 @@
+export class WorkspaceRouteController {
+  constructor({
+    backlinksPanel,
+    clearInitialFileBootstrap,
+    closeSidebarOnMobile,
+    elements,
+    excalidrawEmbed,
+    fileExplorer,
+    getIsTabActive,
+    getSessionLoadToken,
+    gitDiffView,
+    gitPanel,
+    lobby,
+    navigation,
+    previewRenderer,
+    renderAvatars,
+    renderPresence,
+    resetPreviewMode,
+    scrollSyncController,
+    setSession,
+    setSessionLoadToken,
+    setSidebarTab,
+    setCurrentFilePath,
+    showGitDiff,
+    syncMainChrome,
+    videoEmbed,
+    workspaceCoordinator,
+    layoutController,
+  }) {
+    this.backlinksPanel = backlinksPanel;
+    this.clearInitialFileBootstrap = clearInitialFileBootstrap;
+    this.closeSidebarOnMobile = closeSidebarOnMobile;
+    this.elements = elements;
+    this.excalidrawEmbed = excalidrawEmbed;
+    this.fileExplorer = fileExplorer;
+    this.getIsTabActive = getIsTabActive;
+    this.getSessionLoadToken = getSessionLoadToken;
+    this.gitDiffView = gitDiffView;
+    this.gitPanel = gitPanel;
+    this.lobby = lobby;
+    this.navigation = navigation;
+    this.previewRenderer = previewRenderer;
+    this.renderAvatars = renderAvatars;
+    this.renderPresence = renderPresence;
+    this.resetPreviewMode = resetPreviewMode;
+    this.scrollSyncController = scrollSyncController;
+    this.setSession = setSession;
+    this.setSessionLoadToken = setSessionLoadToken;
+    this.setSidebarTab = setSidebarTab;
+    this.setCurrentFilePath = setCurrentFilePath;
+    this.showGitDiff = showGitDiff;
+    this.syncMainChrome = syncMainChrome;
+    this.videoEmbed = videoEmbed;
+    this.workspaceCoordinator = workspaceCoordinator;
+    this.layoutController = layoutController;
+  }
+
+  async handleHashChange() {
+    if (!this.getIsTabActive()) {
+      return;
+    }
+
+    const route = this.navigation.getHashRoute();
+    if (route.type === 'empty') {
+      this.gitPanel.setSelection();
+      this.showEmptyState();
+      this.syncMainChrome({ mode: 'empty', title: 'CollabMD' });
+      return;
+    }
+
+    if (route.type === 'git-diff') {
+      this.setSidebarTab('git');
+      await this.showGitDiff(route);
+      return;
+    }
+
+    this.setSidebarTab('files');
+    await this.openFile(route.filePath);
+  }
+
+  showEmptyState() {
+    this.gitDiffView.hide();
+    this.workspaceCoordinator.cleanupSession();
+    this.setSession(null);
+    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
+    this.clearInitialFileBootstrap();
+    this.resetPreviewMode();
+    this.elements.outlineToggle?.classList.remove('hidden');
+    this.elements.markdownToolbar?.classList.add('hidden');
+    this.setCurrentFilePath(null);
+    this.lobby.setCurrentFile(null);
+    this.fileExplorer.setActiveFile(null);
+
+    this.elements.emptyState?.classList.remove('hidden');
+    this.elements.editorPage?.classList.add('hidden');
+    this.elements.diffPage?.classList.add('hidden');
+    if (this.elements.previewContent) {
+      this.elements.previewContent.innerHTML = '';
+      this.elements.previewContent.dataset.renderPhase = 'ready';
+    }
+    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
+    this.resetPreviewSurface();
+
+    this.renderAvatars();
+    this.renderPresence();
+    this.backlinksPanel.clear();
+
+    if (this.elements.activeFileName) {
+      this.elements.activeFileName.textContent = 'CollabMD';
+    }
+  }
+
+  showDiffState() {
+    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
+    this.clearInitialFileBootstrap();
+    this.workspaceCoordinator.cleanupSession();
+    this.setSession(null);
+    this.resetPreviewMode();
+    this.layoutController.reset();
+    this.setCurrentFilePath(null);
+    this.lobby.setCurrentFile(null);
+    this.fileExplorer.setActiveFile(null);
+
+    this.elements.emptyState?.classList.add('hidden');
+    this.elements.editorPage?.classList.add('hidden');
+    this.elements.diffPage?.classList.remove('hidden');
+    if (this.elements.previewContent) {
+      this.elements.previewContent.innerHTML = '';
+      this.elements.previewContent.dataset.renderPhase = 'ready';
+    }
+    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
+    this.resetPreviewSurface();
+
+    this.elements.outlineToggle?.classList.add('hidden');
+    this.elements.markdownToolbar?.classList.add('hidden');
+
+    this.renderAvatars();
+    this.renderPresence();
+    this.backlinksPanel.clear();
+  }
+
+  async openFile(filePath) {
+    this.gitPanel.setSelection();
+    this.gitDiffView.hide();
+    this.syncMainChrome({ mode: 'editor' });
+    await this.workspaceCoordinator.openFile(filePath);
+    this.setSession(this.workspaceCoordinator.getSession());
+  }
+
+  cleanupSession() {
+    this.workspaceCoordinator.cleanupSession();
+    this.setSession(this.workspaceCoordinator.getSession());
+  }
+
+  handleFileSelection(filePath, { closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToFile(filePath);
+  }
+
+  resetPreviewSurface() {
+    this.previewRenderer.setHydrationPaused(false);
+    this.excalidrawEmbed.setHydrationPaused(false);
+    this.videoEmbed?.detachForCommit();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+  }
+}

package/src/client/application/workspace-state-store.js

@@ -0,0 +1,46 @@
+export class WorkspaceStateStore {
+  constructor(initialState = {}) {
+    this.state = {
+      activeSidebarTab: 'files',
+      chatInitialSyncComplete: false,
+      chatIsOpen: false,
+      chatMessageIds: new Set(),
+      chatMessages: [],
+      chatUnreadCount: 0,
+      connectionHelpShown: false,
+      connectionState: { status: 'disconnected', unreachable: false },
+      currentFilePath: null,
+      fileExplorerReady: false,
+      followedCursorSignature: '',
+      followedUserClientId: null,
+      gitRepoAvailable: false,
+      globalUsers: [],
+      isTabActive: false,
+      sessionLoadToken: 0,
+      ...initialState,
+    };
+  }
+
+  get(key) {
+    return this.state[key];
+  }
+
+  set(key, value) {
+    this.state[key] = value;
+    return value;
+  }
+
+  nextSessionLoadToken() {
+    const nextToken = Number(this.state.sessionLoadToken || 0) + 1;
+    this.state.sessionLoadToken = nextToken;
+    return nextToken;
+  }
+
+  replaceChatState({ initialSyncComplete, isOpen, messageIds, messages, unreadCount }) {
+    this.state.chatMessages = Array.isArray(messages) ? messages : [];
+    this.state.chatMessageIds = messageIds instanceof Set ? messageIds : new Set();
+    this.state.chatUnreadCount = Number.isFinite(unreadCount) ? unreadCount : 0;
+    this.state.chatIsOpen = Boolean(isOpen);
+    this.state.chatInitialSyncComplete = Boolean(initialSyncComplete);
+  }
+}