collabmd 0.1.23 → 0.1.26

package/src/client/application/app-shell/workspace-feature.js

@@ -1,5 +1,6 @@
 import {
   getVaultFileKind,
+  isDrawioFilePath,
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
   isMermaidFilePath,
@@ -12,6 +13,10 @@ export const workspaceFeature = {
     return isExcalidrawFilePath(filePath);
   },
 
+  isDrawioFile(filePath) {
+    return isDrawioFilePath(filePath);
+  },
+
   isImageFile(filePath) {
     return isImageAttachmentFilePath(filePath);
   },
@@ -91,6 +96,10 @@ export const workspaceFeature = {
     this.workspacePreviewController.renderExcalidrawFilePreview(filePath);
   },
 
+  renderDrawioFilePreview(filePath) {
+    this.workspacePreviewController.renderDrawioFilePreview(filePath);
+  },
+
   renderImageFilePreview(filePath) {
     this.workspacePreviewController.renderImageFilePreview(filePath);
   },

package/src/client/application/app-shell-elements.js

@@ -76,6 +76,8 @@ export function bindAppShellElements(doc = document) {
     tabLockTitle: doc.getElementById('tabLockTitle'),
     toolbarCenter: doc.getElementById('toolbarCenter'),
     toolbarDiffBadge: doc.getElementById('toolbarDiffBadge'),
+    toolbarOverflowMenu: doc.getElementById('toolbarOverflowMenu'),
+    toolbarOverflowToggle: doc.getElementById('toolbarOverflowToggle'),
     sidebarTabs: doc.getElementById('sidebarTabs'),
   };
 }

package/src/client/application/preview-render-compiler.js

@@ -79,6 +79,10 @@ function createExcalidrawPlaceholder({ embedKey, label, target }) {
   return `<span class="excalidraw-embed-placeholder diagram-preview-shell" data-embed-key="${escapeHtml(embedKey)}" data-embed-target="${escapeHtml(target)}" data-embed-label="${escapeHtml(label)}"><span class="excalidraw-embed-placeholder-card diagram-preview-placeholder-card"><span class="excalidraw-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="excalidraw-embed-placeholder-btn diagram-preview-placeholder-btn" data-embed-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
 }
 
+function createDrawioPlaceholder({ embedKey, label, target }) {
+  return `<span class="drawio-embed-placeholder diagram-preview-shell" data-drawio-key="${escapeHtml(embedKey)}" data-drawio-target="${escapeHtml(target)}" data-drawio-label="${escapeHtml(label)}" data-drawio-mode="view"><span class="drawio-embed-placeholder-card diagram-preview-placeholder-card"><span class="drawio-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="drawio-embed-placeholder-btn diagram-preview-placeholder-btn" data-drawio-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
+}
+
 function getDirectVideoMimeType(pathname = '') {
   const match = pathname.toLowerCase().match(/\.(mp4|ogg|webm)$/i);
   if (!match) {
@@ -220,12 +224,13 @@ function resolveLocalAttachmentUrl(source = '', {
 }
 
 function renderInlineWikiText(content, {
+  drawioEmbedCounts,
   excalidrawEmbedCounts,
   fileList,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
 }) {
-  const regex = /!\[\[([^\]|]+\.(?:excalidraw|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
+  const regex = /!\[\[([^\]|]+\.(?:excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
   let html = '';
   let match;
@@ -247,6 +252,14 @@ function renderInlineWikiText(content, {
           label: normalizePreviewTypography(label.replace(/\.excalidraw$/i, '')),
           target,
         });
+      } else if (/\.drawio$/i.test(target)) {
+        const occurrenceIndex = drawioEmbedCounts.get(target) ?? 0;
+        drawioEmbedCounts.set(target, occurrenceIndex + 1);
+        html += createDrawioPlaceholder({
+          embedKey: `${target}#${occurrenceIndex}`,
+          label: normalizePreviewTypography(label.replace(/\.drawio$/i, '')),
+          target,
+        });
       } else if (/\.(?:mmd|mermaid)$/i.test(target)) {
         const occurrenceIndex = mermaidEmbedCounts.get(target) ?? 0;
         mermaidEmbedCounts.set(target, occurrenceIndex + 1);
@@ -325,6 +338,7 @@ function createMarkdownRenderer(fileList = [], {
     });
   });
 
+  const drawioEmbedCounts = new Map();
   const excalidrawEmbedCounts = new Map();
   const mermaidCounts = new Map();
   const mermaidEmbedCounts = new Map();
@@ -398,6 +412,7 @@ function createMarkdownRenderer(fileList = [], {
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
       return `<input type="checkbox" checked disabled> ${renderInlineWikiText(content.slice(4), {
+        drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
@@ -407,6 +422,7 @@ function createMarkdownRenderer(fileList = [], {
 
     if (content.startsWith('[ ] ')) {
       return `<input type="checkbox" disabled> ${renderInlineWikiText(content.slice(4), {
+        drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
@@ -415,6 +431,7 @@ function createMarkdownRenderer(fileList = [], {
     }
 
     return renderInlineWikiText(content, {
+      drawioEmbedCounts,
       excalidrawEmbedCounts,
       fileList,
       mermaidEmbedCounts,

package/src/client/application/preview-render-profile.js

@@ -1,6 +1,7 @@
 export const LARGE_DOCUMENT_CHAR_THRESHOLD = 150000;
 export const LARGE_DOCUMENT_MERMAID_THRESHOLD = 20;
 export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
+export const LARGE_DOCUMENT_DRAWIO_THRESHOLD = 8;
 export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
 
 function countMatches(source, pattern) {
@@ -15,6 +16,7 @@ export function analyzeMarkdownComplexity(markdownText = '') {
 
   return {
     chars: source.length,
+    drawioEmbeds: countMatches(source, /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/gi),
     excalidrawEmbeds: countMatches(source, /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/gi),
     mermaidBlocks: countMatches(source, /(^|\n)```mermaid\b/gi) + mermaidEmbeds,
     plantumlBlocks: plantUmlFences + plantUmlEmbeds,
@@ -27,6 +29,7 @@ export function isLargeDocumentStats(stats) {
     && (
       stats.chars >= LARGE_DOCUMENT_CHAR_THRESHOLD
       || stats.mermaidBlocks >= LARGE_DOCUMENT_MERMAID_THRESHOLD
+      || stats.drawioEmbeds >= LARGE_DOCUMENT_DRAWIO_THRESHOLD
       || stats.excalidrawEmbeds >= LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD
       || stats.plantumlBlocks >= LARGE_DOCUMENT_PLANTUML_THRESHOLD
     )
@@ -37,6 +40,7 @@ export function getRenderProfile(markdownText = '') {
   const source = String(markdownText);
   const hasMermaid = /(^|\n)```mermaid\b/i.test(source)
     || /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/i.test(source);
+  const hasDrawioEmbed = /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/i.test(source);
   const hasExcalidrawEmbed = /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/i.test(source);
   const hasPlantUml = /(^|\n)```(?:plantuml|puml)\b/i.test(source)
     || /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/i.test(source);
@@ -49,7 +53,7 @@ export function getRenderProfile(markdownText = '') {
     };
   }
 
-  if (hasMermaid || hasExcalidrawEmbed || hasPlantUml) {
+  if (hasMermaid || hasDrawioEmbed || hasExcalidrawEmbed || hasPlantUml) {
     return {
       debounceMs: 0,
       deferUntilIdle: false,

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

@@ -9,6 +9,7 @@ export class WorkspaceChromeController {
     getDisplayName,
     loadBacklinks,
     onBeforeFileOpen,
+    onRenderDrawioPreview,
     onFileOpenError,
     onFileOpenReady,
     onRenderExcalidrawPreview,
@@ -27,6 +28,7 @@ export class WorkspaceChromeController {
     this.getDisplayName = getDisplayName;
     this.loadBacklinks = loadBacklinks;
     this.onBeforeFileOpen = onBeforeFileOpen;
+    this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onFileOpenError = onFileOpenError;
     this.onFileOpenReady = onFileOpenReady;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
@@ -71,6 +73,7 @@ export class WorkspaceChromeController {
   }
 
   finalizeFileOpen({
+    isDrawio = false,
     filePath,
     isExcalidraw = false,
     isImage = false,
@@ -80,6 +83,9 @@ export class WorkspaceChromeController {
     if (isExcalidraw) {
       this.onRenderExcalidrawPreview(filePath);
     }
+    if (isDrawio) {
+      this.onRenderDrawioPreview(filePath);
+    }
     if (isImage) {
       this.onRenderImagePreview(filePath);
     }

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

@@ -21,6 +21,7 @@ export class WorkspaceCoordinator {
     getLocalUser,
     getStoredUserName,
     getTheme,
+    isDrawioFile,
     isExcalidrawFile,
     isImageFile,
     isMermaidFile,
@@ -41,6 +42,7 @@ export class WorkspaceCoordinator {
     onSessionAssigned = null,
     onFileOpenMetric = null,
     onRenderExcalidrawPreview,
+    onRenderDrawioPreview,
     onRenderImagePreview,
     onSyncWrapToggle,
     onUpdateActiveFile,
@@ -50,6 +52,7 @@ export class WorkspaceCoordinator {
     onViewModeReset,
     renderPresence,
     scrollContainerForSession,
+    shouldUseDrawioPreview = null,
     showEditorLoading,
     stateStore,
   }) {
@@ -63,6 +66,7 @@ export class WorkspaceCoordinator {
     this.getLocalUser = getLocalUser;
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
+    this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
@@ -89,6 +93,7 @@ export class WorkspaceCoordinator {
     this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile;
     this.onUpdateVisibleChrome = onUpdateVisibleChrome;
     this.renderPresence = renderPresence;
+    this.shouldUseDrawioPreview = shouldUseDrawioPreview ?? (() => true);
     this.stateStore = stateStore;
     this.session = null;
     this.lifecycle = new FileOpenLifecycle({
@@ -102,6 +107,7 @@ export class WorkspaceCoordinator {
       getDisplayName,
       loadBacklinks,
       onBeforeFileOpen,
+      onRenderDrawioPreview,
       onFileOpenError,
       onFileOpenReady,
       onRenderExcalidrawPreview,
@@ -149,17 +155,18 @@ export class WorkspaceCoordinator {
     this.cleanupAfterSessionDestroy();
   }
 
-  async openFile(filePath) {
+  async openFile(filePath, { drawioMode = null } = {}) {
     if (!this.isTabActive()) {
       return;
     }
 
+    const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
 
-    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isExcalidraw || isImage)) {
+    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isDrawio || isExcalidraw || isImage)) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
       return;
@@ -170,11 +177,11 @@ export class WorkspaceCoordinator {
 
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
-      resetConnectionState: !isExcalidraw && !isImage,
+      resetConnectionState: !isDrawio && !isExcalidraw && !isImage,
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });
 
-    if (isExcalidraw || isImage) {
+    if (isDrawio || isExcalidraw || isImage) {
       this.onSessionAssigned?.(null);
 
       if (loadToken !== this.stateStore.get('sessionLoadToken')) {
@@ -184,6 +191,7 @@ export class WorkspaceCoordinator {
       this.chromeController.markFileOpenReady(null);
       this.chromeController.finalizeFileOpen({
         filePath,
+        isDrawio,
         isExcalidraw,
         isImage,
         session: null,

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

@@ -7,10 +7,12 @@ import { resolveApiUrl } from '../domain/runtime-paths.js';
 export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
+    drawioEmbed,
     elements,
     excalidrawEmbed,
     getDisplayName,
     getSession,
+    isDrawioFile,
     isExcalidrawFile,
     isImageFile,
     isMermaidFile,
@@ -23,10 +25,20 @@ export class WorkspacePreviewController {
     videoEmbed,
   }) {
     this.backlinksPanel = backlinksPanel;
+    this.drawioEmbed = drawioEmbed ?? {
+      detachForCommit() {},
+      hydrateVisibleEmbeds() {},
+      reconcileEmbeds() {},
+      setHydrationPaused() {},
+      syncLayout() {},
+      updateLocalUser() {},
+      updateTheme() {},
+    };
     this.elements = elements;
     this.excalidrawEmbed = excalidrawEmbed;
     this.getDisplayName = getDisplayName;
     this.getSession = getSession;
+    this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
@@ -60,6 +72,7 @@ export class WorkspacePreviewController {
   }
 
   resetPreviewMode() {
+    this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
@@ -67,6 +80,7 @@ export class WorkspacePreviewController {
   }
 
   syncFileChrome(filePath) {
+    const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
@@ -79,7 +93,7 @@ export class WorkspacePreviewController {
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
 
-    if (isExcalidraw || isImage) {
+    if (isDrawio || isExcalidraw || isImage) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -99,6 +113,7 @@ export class WorkspacePreviewController {
     }
 
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     previewElement.classList.add('is-excalidraw-file-preview');
@@ -124,11 +139,53 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.drawioEmbed.reconcileEmbeds(previewElement);
     this.excalidrawEmbed.reconcileEmbeds(previewElement, { isLargeDocument: false });
+    this.drawioEmbed.hydrateVisibleEmbeds();
     this.excalidrawEmbed.hydrateVisibleEmbeds();
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderDrawioFilePreview(filePath) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-drawio-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const placeholder = document.createElement('div');
+    placeholder.className = 'drawio-embed-placeholder';
+    placeholder.dataset.drawioKey = `${filePath}#file-preview`;
+    placeholder.dataset.drawioLabel = this.getDisplayName(filePath);
+    placeholder.dataset.drawioMode = 'edit';
+    placeholder.dataset.drawioTarget = filePath;
+    const loadingShell = document.createElement('div');
+    loadingShell.className = 'preview-shell';
+    loadingShell.textContent = 'Loading draw.io 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.drawioEmbed.reconcileEmbeds(previewElement);
+    this.drawioEmbed.hydrateVisibleEmbeds();
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   renderImageFilePreview(filePath) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {
@@ -136,6 +193,7 @@ export class WorkspacePreviewController {
     }
 
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     previewElement.classList.add('is-image-file-preview');
@@ -171,6 +229,7 @@ export class WorkspacePreviewController {
     }
 
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     const renderHost = this.previewRenderer.ensureRenderHost();
@@ -239,8 +298,9 @@ export class WorkspacePreviewController {
       setPreviewLayoutSyncTimer(null);
 
       const hasSession = Boolean(this.getSession());
+      const isDrawioPreview = this.elements.previewContent?.classList?.contains?.('is-drawio-file-preview') ?? false;
       const isExcalidrawPreview = this.elements.previewContent?.classList?.contains?.('is-excalidraw-file-preview') ?? false;
-      if ((!hasSession && !isExcalidrawPreview) || !this.elements.previewContent) {
+      if ((!hasSession && !isDrawioPreview && !isExcalidrawPreview) || !this.elements.previewContent) {
         return;
       }
 
@@ -256,8 +316,9 @@ export class WorkspacePreviewController {
       this.previewRenderer.scheduleActiveMermaidRefit();
       this.previewRenderer.scheduleActivePlantUmlRefit();
       this.videoEmbed?.syncLayout();
+      this.drawioEmbed.syncLayout();
       this.excalidrawEmbed.syncLayout();
-      if (isExcalidrawPreview && !hasSession) {
+      if ((isDrawioPreview || isExcalidrawPreview) && !hasSession) {
         return;
       }
 
@@ -288,6 +349,7 @@ export class WorkspacePreviewController {
     const nextPaused = Boolean(isActive);
     setHydrationPaused(nextPaused);
     this.previewRenderer.setHydrationPaused(nextPaused);
+    this.drawioEmbed.setHydrationPaused(nextPaused);
     this.excalidrawEmbed.setHydrationPaused(nextPaused);
 
     if (nextPaused) {

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

@@ -4,6 +4,7 @@ export class WorkspaceRouteController {
     clearInitialFileBootstrap,
     clearStaticPreviewDocument = null,
     closeSidebarOnMobile,
+    drawioEmbed,
     elements,
     excalidrawEmbed,
     fileHistoryView = null,
@@ -38,6 +39,7 @@ export class WorkspaceRouteController {
     this.clearInitialFileBootstrap = clearInitialFileBootstrap;
     this.clearStaticPreviewDocument = clearStaticPreviewDocument;
     this.closeSidebarOnMobile = closeSidebarOnMobile;
+    this.drawioEmbed = drawioEmbed ?? { setHydrationPaused() {} };
     this.elements = elements;
     this.excalidrawEmbed = excalidrawEmbed;
     this.fileHistoryView = fileHistoryView;
@@ -113,7 +115,7 @@ export class WorkspaceRouteController {
     }
 
     this.setSidebarTab('files');
-    await this.openFile(route.filePath);
+    await this.openFile(route.filePath, { drawioMode: route.drawioMode || null });
   }
 
   showEmptyState() {
@@ -243,14 +245,14 @@ export class WorkspaceRouteController {
     this.backlinksPanel.clear();
   }
 
-  async openFile(filePath) {
+  async openFile(filePath, options = {}) {
     this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
     this.fileHistoryView?.hide?.();
     this.clearStaticPreviewDocument?.();
     this.syncMainChrome({ mode: 'editor' });
-    await this.workspaceCoordinator.openFile(filePath);
+    await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
   }
 
@@ -270,6 +272,7 @@ export class WorkspaceRouteController {
   resetPreviewSurface() {
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);
+    this.drawioEmbed.setHydrationPaused(false);
     this.excalidrawEmbed.setHydrationPaused(false);
     this.videoEmbed?.detachForCommit();
     this.scrollSyncController.setLargeDocumentMode(false);

package/src/client/bootstrap/collabmd-app-shell.js

@@ -15,12 +15,14 @@ import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/
 import { BrowserNavigationPort } from '../infrastructure/browser-navigation-port.js';
 import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
+import { AppVersionMonitor } from '../infrastructure/app-version-monitor.js';
 import { getRuntimeConfig } from '../infrastructure/runtime-config.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
 import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
 import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
+import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
 import { FileExplorerController } from '../presentation/file-explorer-controller.js';
 import { FileHistoryViewController } from '../presentation/file-history-view-controller.js';
@@ -104,6 +106,7 @@ export class CollabMdAppShell {
     this._previewHydrationPaused = false;
     this._previewLayoutResizeObserver = null;
     this._previewLayoutSyncTimer = null;
+    this._reloadPromptShown = false;
     this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
     this.chatTimeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' });
@@ -116,6 +119,11 @@ export class CollabMdAppShell {
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
     this.pendingWorkspaceRequestIds = new Set();
     this._fileOpenPerf = null;
+    this.versionMonitor = new AppVersionMonitor({
+      currentBuildId: this.runtimeConfig.build?.id,
+      onUpdateAvailable: (payload) => this.promptForVersionReload(payload),
+      runtimeConfig: this.runtimeConfig,
+    });
 
     this.lobby = new LobbyPresence({
       preferredUserName: this.getStoredUserName(),
@@ -139,8 +147,10 @@ export class CollabMdAppShell {
     this.toastController = new ToastController(this.elements.toastContainer);
     this.chatToastController = new ToastController(this.elements.chatToastContainer);
     this.fileExplorer = new FileExplorerController({
+      mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
       toastController: this.toastController,
     });
     this.gitPanel = new GitPanelController({
@@ -185,6 +195,8 @@ export class CollabMdAppShell {
         });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
         this.videoEmbed.syncLayout();
+        this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
+        this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.excalidrawEmbed.syncLayout();
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
@@ -193,10 +205,12 @@ export class CollabMdAppShell {
       },
       onBeforeRenderCommit: () => {
         this.videoEmbed.detachForCommit();
+        this.drawioEmbed.detachForCommit();
         this.excalidrawEmbed.detachForCommit();
       },
       onRenderComplete: () => {
         this.videoEmbed.syncLayout();
+        this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.syncLayout();
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
@@ -230,6 +244,15 @@ export class CollabMdAppShell {
       previewElement: this.elements.previewContent,
       toastController: this.toastController,
     });
+    this.drawioEmbed = new DrawioEmbedController({
+      getLocalUser: () => this.lobby.getLocalUser(),
+      getTheme: () => this.themeController.getTheme(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenTextFile: (filePath) => filePath && this.navigation.navigateToFile(filePath, { drawioMode: 'text' }),
+      previewContainer: this.elements.previewContainer,
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+    });
     this.commentUi = new CommentUiController({
       commentSelectionButton: this.elements.commentSelectionButton,
       commentsDrawer: this.elements.commentsDrawer,
@@ -251,10 +274,12 @@ export class CollabMdAppShell {
     });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
+      drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getSession: () => this.session,
+      isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
@@ -339,6 +364,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
+      isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
@@ -385,6 +411,7 @@ export class CollabMdAppShell {
         this.session = session;
         this.commentUi.attachSession(session);
       },
+      onRenderDrawioPreview: (filePath) => this.renderDrawioFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
       onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
       onSyncWrapToggle: () => this.syncWrapToggle(),
@@ -404,6 +431,7 @@ export class CollabMdAppShell {
       onViewModeReset: () => this.resetPreviewMode(),
       renderPresence: () => this.renderPresence(),
       scrollContainerForSession: (session) => session.getScrollContainer(),
+      shouldUseDrawioPreview: () => Boolean(this.runtimeConfig.drawioBaseUrl),
       showEditorLoading: () => this.showEditorLoading(),
       stateStore: this.stateStore,
     });
@@ -412,6 +440,7 @@ export class CollabMdAppShell {
       clearInitialFileBootstrap: () => this.clearInitialFileBootstrap(),
       clearStaticPreviewDocument: () => this.clearStaticPreviewDocument(),
       closeSidebarOnMobile: () => this.closeSidebarOnMobile(),
+      drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
       fileHistoryView: this.fileHistoryView,