collabmd 0.1.44 → 0.1.46

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

@@ -2,6 +2,7 @@ import {
   isBaseFilePath,
   isDiagramFilePath,
   isMarkdownFilePath,
+  isStructurizrFilePath,
 } from '../../domain/file-kind.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
@@ -18,13 +19,16 @@ export class WorkspacePreviewController {
     isExcalidrawFile,
     isBaseFile,
     isImageFile,
+    isPdfFile,
     isMermaidFile,
     isPlantUmlFile,
     layoutController,
     outlineController,
     previewRenderer,
+    pdfPreview = null,
     schedulePreviewLayoutSync,
     scrollSyncController,
+    structurizrPreview = null,
     videoEmbed,
   }) {
     this.backlinksPanel = backlinksPanel;
@@ -46,13 +50,20 @@ export class WorkspacePreviewController {
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isBaseFile = isBaseFile ?? isBaseFilePath;
     this.isImageFile = isImageFile ?? (() => false);
+    this.isPdfFile = isPdfFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
     this.isPlantUmlFile = isPlantUmlFile ?? (() => false);
     this.layoutController = layoutController;
     this.outlineController = outlineController;
     this.previewRenderer = previewRenderer;
+    this.pdfPreview = pdfPreview ?? { cancel() {}, render() {} };
     this.schedulePreviewLayoutSyncCallback = schedulePreviewLayoutSync;
     this.scrollSyncController = scrollSyncController;
+    this.structurizrPreview = structurizrPreview ?? {
+      queueSync() {},
+      render: async () => false,
+      reset() {},
+    };
     this.videoEmbed = videoEmbed;
   }
 
@@ -81,12 +92,17 @@ export class WorkspacePreviewController {
   }
 
   resetPreviewMode() {
+    this.pdfPreview.cancel();
+    this.elements.previewContainer?.classList?.remove('is-pdf-file-preview');
     this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
     this.elements.previewContent?.classList.remove('is-base-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
+    this.elements.previewContent?.classList.remove('is-pdf-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
+    this.elements.previewContent?.classList.remove('is-structurizr-file-preview');
+    this.structurizrPreview.reset();
   }
 
   syncFileChrome(filePath, { drawioMode = null, preferPreviewForBase = false } = {}) {
@@ -94,9 +110,11 @@ export class WorkspacePreviewController {
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
+    const isPdf = this.isPdfFile(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
+    const isStructurizr = isStructurizrFilePath(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
     const usesHeaderBacklinks = isExcalidraw || (isDrawio && drawioMode !== 'text');
 
@@ -105,11 +123,17 @@ export class WorkspacePreviewController {
     this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
     this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
-    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isBase);
+    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isPdf || isBase);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
+    this.elements.previewContent?.classList.toggle('is-structurizr-file-preview', isStructurizr);
+
+    if (isStructurizr) {
+      this.outlineController.close();
+      this.backlinksPanel.clear();
+    }
 
-    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage || (isBase && preferPreviewForBase)) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage || isPdf || (isBase && preferPreviewForBase)) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -238,6 +262,39 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderPdfFilePreview(filePath) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    this.elements.previewContainer?.classList?.add('is-pdf-file-preview');
+    previewElement.classList.add('is-pdf-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    if (renderHost) {
+      this.pdfPreview.render({
+        displayName: this.getDisplayName(filePath),
+        filePath,
+        renderHost,
+      });
+      renderHost.style.minHeight = '';
+    }
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.backlinksPanel.clear();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   async renderBaseFilePreview(filePath, { source = null } = {}) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {
@@ -253,7 +310,6 @@ export class WorkspacePreviewController {
     this.previewRenderer.normalizePreviewChildren(renderHost);
 
     if (renderHost) {
-      renderHost.replaceChildren();
       renderHost.style.minHeight = '';
     }
 
@@ -273,6 +329,38 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  async renderStructurizrFilePreview(filePath, { source = null } = {}) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-structurizr-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+    if (renderHost) {
+      renderHost.style.minHeight = '';
+    }
+
+    await this.structurizrPreview.render({
+      filePath,
+      renderHost,
+      source: typeof source === 'string' ? source : (this.getSession()?.getText?.() ?? ''),
+    });
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.backlinksPanel.clear();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   renderTextFilePreview({ content = '' } = {}) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {
@@ -364,8 +452,6 @@ export class WorkspacePreviewController {
         return;
       }
 
-      this.previewRenderer.scheduleActiveMermaidRefit();
-      this.previewRenderer.scheduleActivePlantUmlRefit();
       this.videoEmbed?.syncLayout();
       this.drawioEmbed.syncLayout();
       this.excalidrawEmbed.syncLayout();

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

@@ -1,8 +1,10 @@
+import { PdfPreviewController } from '../application/pdf-preview-controller.js';
 import { PreviewRenderer } from '../application/preview-renderer.js';
 import { ensureQuickSwitcherInstance, toggleQuickSwitcherInstance } from '../application/quick-switcher-loader.js';
 import { WorkspaceRouteController } from '../application/workspace-route-controller.js';
 import { WikiLinkFileController } from '../application/wiki-link-file-controller.js';
 import { WorkspacePreviewController } from '../application/workspace-preview-controller.js';
+import { StructurizrPreviewController } from '../application/structurizr-preview-controller.js';
 import { WorkspaceCoordinator } from '../application/workspace-coordinator.js';
 import { bindAppShellElements } from '../application/app-shell-elements.js';
 import { chatFeature } from '../application/app-shell/chat-feature.js';
@@ -17,10 +19,9 @@ import { uiFeatureTabActivityMethods } from '../application/app-shell/ui-feature
 import { uiFeatureToolbarMethods } from '../application/app-shell/ui-feature-toolbar.js';
 import { workspaceFeature } from '../application/app-shell/workspace-feature.js';
 import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/lobby-presence.js';
-import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
+import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { AppVersionMonitor } from '../infrastructure/app-version-monitor.js';
-import { backlinksApiClient } from '../infrastructure/backlinks-api-client.js';
 import { gitApiClient } from '../infrastructure/git-api-client.js';
 import {
   getHashRoute,
@@ -32,7 +33,6 @@ import {
   navigateToGitFilePreview,
   navigateToGitHistory,
 } from '../infrastructure/runtime-config.js';
-import { plantUmlApiClient } from '../infrastructure/plantuml-api-client.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';
@@ -40,6 +40,12 @@ import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentOverviewController } from '../presentation/comment-overview-controller.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { FileExplorerController } from '../presentation/file-explorer-controller.js';
+import { FileHistoryViewController } from '../presentation/file-history-view-controller.js';
+import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
+import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
+import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
+import { GitDiffViewController } from '../presentation/git-diff-view-controller.js';
+import { GitPanelController } from '../presentation/git-panel-controller.js';
 import { LayoutController } from '../presentation/layout-controller.js';
 import { OutlineController } from '../presentation/outline-controller.js';
 import { ScrollSyncController } from '../presentation/scroll-sync-controller.js';
@@ -47,14 +53,12 @@ import { ThemeController } from '../presentation/theme-controller.js';
 import { ToastController } from '../presentation/toast-controller.js';
 import { VideoEmbedController } from '../presentation/video-embed-controller.js';
 import { ImageLightboxController } from '../presentation/image-lightbox-controller.js';
-import { lazyControllerFeature } from './lazy-controller-feature.js';
 
 const APP_SHELL_FEATURES = [
   chatFeature,
   commentsFeature,
   exportFeature,
   gitFeature,
-  lazyControllerFeature,
   presenceFeature,
   {
     ...uiFeatureShellMethods,
@@ -103,18 +107,19 @@ export class CollabMdAppShell {
       navigateToGitHistory,
     };
     this.preferences = new BrowserPreferencesPort({
-      chatNotificationsKey: 'collabmd-chat-notifications-enabled',
+      fileTreeShowExtensionsKey: 'collabmd-file-tree-show-extensions',
       lineWrappingKey: 'collabmd-editor-line-wrap',
+      recentFilesKey: 'collabmd-recent-files',
+      vimModeKey: 'collabmd-editor-vim-mode',
       sidebarVisibleKey: 'collabmd-sidebar-visible',
       userNameKey: 'collabmd-user-name',
     });
     this.notifications = new BrowserNotificationPort();
-    this.backlinksApiClient = backlinksApiClient;
     this.gitApiClient = gitApiClient;
-    this.plantUmlApiClient = plantUmlApiClient;
     this.vaultApiClient = vaultApiClient;
     this._session = null;
     this._hasPromptedForDisplayName = false;
+    this._basePreviewRenderTimer = null;
     this._backlinkRefreshTimer = null;
     this._pendingPreviewLayoutSync = false;
     this._previewHydrationPaused = false;
@@ -124,13 +129,10 @@ export class CollabMdAppShell {
     this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
     this.chatTimeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' });
-    this.chatNotificationsEnabled = this.preferences.getChatNotificationsEnabled();
-    this.chatNotificationPermission = this.notifications.getPermission();
     this.lobbyChatMessageMaxLength = LOBBY_CHAT_MESSAGE_MAX_LENGTH;
     this.quickSwitcher = null;
     this.quickSwitcherModulePromise = null;
     this.fileExplorerReadyPromise = Promise.resolve();
-    this._gitControllerPrewarmHandle = null;
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
     this.pendingWorkspaceRequestIds = new Set();
     this._fileOpenPerf = null;
@@ -147,13 +149,9 @@ export class CollabMdAppShell {
     });
     this.workspaceSync = new WorkspaceSyncClient({
       onTreeChange: (tree, metadata = {}) => {
-        const wasReady = this.fileExplorerReady;
         this.fileExplorer.setTree(tree, metadata);
         this.handleCommentOverviewWorkspaceTreeChange?.();
         this.fileExplorerReady = true;
-        if (!wasReady && this.isTabActive) {
-          void this.handleHashChange();
-        }
       },
       onWorkspaceEvent: (event) => {
         void this.handleIncomingWorkspaceEvent(event);
@@ -165,8 +163,14 @@ export class CollabMdAppShell {
     this.fileExplorer = new FileExplorerController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
-      onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+      }),
+      onShowFileExtensionsChange: (showFileExtensions) => {
+        this.preferences.setFileTreeShowExtensions(showFileExtensions);
+      },
       pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
+      showFileExtensions: this.preferences.getFileTreeShowExtensions(),
       toastController: this.toastController,
       vaultClient: this.vaultApiClient,
     });
@@ -179,7 +183,23 @@ export class CollabMdAppShell {
       toastController: this.toastController,
       vaultApiClient: this.vaultApiClient,
     });
-    this.gitPanel = this.createLazyGitPanelController();
+    this.gitPanel = new GitPanelController({
+      enabled: this.runtimeConfig.gitEnabled !== false,
+      gitApiClient: this.gitApiClient,
+      onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onPullBranch: () => this.pullGitBranch(),
+      onPushBranch: () => this.pushGitBranch(),
+      onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
+      onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
+      onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
+      onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
+      onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+      onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+      onViewAllDiff: () => this.handleGitDiffSelection(null, { closeSidebarOnMobile: true, scope: 'all' }),
+      searchInput: this.elements.gitSearchInput,
+      toastController: this.toastController,
+    });
     this.outlineController = new OutlineController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onNavigateToHeading: ({ sourceLine }) => {
@@ -192,7 +212,19 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
-    this.basesPreview = this.createLazyBasesPreviewController();
+    this.basesPreview = new BasesPreviewController({
+      getActiveFilePath: () => this.currentFilePath,
+      getSession: () => this.session,
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      previewElement: this.elements.previewContent,
+      replaceBaseSource: ({ path, source }) => {
+        if (path && path === this.currentFilePath) {
+          this.session?.replaceText?.(source);
+        }
+      },
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.imageLightbox = new ImageLightboxController({
       previewElement: this.elements.previewContent,
     });
@@ -211,12 +243,9 @@ export class CollabMdAppShell {
           renderVersion: stats?.renderVersion ?? 0,
         });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
-        this.videoEmbed.syncLayout();
         this.basesPreview.reconcileEmbeds(this.elements.previewContent);
         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);
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
@@ -235,15 +264,12 @@ export class CollabMdAppShell {
         this.refreshCommentUiLayout();
       },
       onRenderComplete: () => {
-        this.videoEmbed.syncLayout();
-        this.drawioEmbed.syncLayout();
-        this.excalidrawEmbed.syncLayout();
         this.applyPendingPreviewRouteAnchor({ allowExpired: true, behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
       },
       outlineController: this.outlineController,
-      plantUmlRenderClient: this.plantUmlApiClient,
+      plantUmlRenderClient: this.vaultApiClient,
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       toastController: this.toastController,
@@ -261,15 +287,43 @@ export class CollabMdAppShell {
       previewElement: this.elements.previewContent,
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
+    this.pdfPreview = new PdfPreviewController({
+      outlineController: this.outlineController,
+      previewContainer: this.elements.previewContainer,
+    });
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
-      loadBacklinks: (filePath, options = {}) => this.backlinksApiClient.readBacklinks(filePath, options),
-      onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      loadBacklinks: (filePath, options = {}) => this.vaultApiClient.readBacklinks(filePath, options),
+      onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+      }),
       panelElement: this.elements.backlinksPanel,
     });
-    this.excalidrawEmbed = this.createLazyExcalidrawEmbedController();
-    this.drawioEmbed = this.createLazyDrawioEmbedController();
+    this.excalidrawEmbed = new ExcalidrawEmbedController({
+      getLocalUser: () => this.lobby.getLocalUser(),
+      getTheme: () => this.themeController.getTheme(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
+      previewContainer: this.elements.previewContainer,
+      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' }),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
+      previewContainer: this.elements.previewContainer,
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.commentUi = new CommentUiController({
       commentSelectionButton: this.elements.commentSelectionButton,
       commentsDrawer: this.elements.commentsDrawer,
@@ -300,6 +354,10 @@ export class CollabMdAppShell {
       onToggleReaction: (threadId, messageId, emoji) => this.session?.toggleCommentReaction(threadId, messageId, emoji),
       onResolveThread: (threadId) => this.resolveCommentThread(threadId),
     });
+    this.structurizrPreview = new StructurizrPreviewController({
+      enabled: this.runtimeConfig.structurizrEnabled === true,
+      syncWorkspace: (payload) => this.vaultApiClient.syncStructurizrWorkspace(payload),
+    });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
       basesPreview: this.basesPreview,
@@ -312,10 +370,13 @@ export class CollabMdAppShell {
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
+      isPdfFile: (filePath) => this.isPdfFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       layoutController: this.layoutController,
+      structurizrPreview: this.structurizrPreview,
       outlineController: this.outlineController,
+      pdfPreview: this.pdfPreview,
       previewRenderer: this.previewRenderer,
       schedulePreviewLayoutSync: (options) => this.schedulePreviewLayoutSync(options),
       scrollSyncController: this.scrollSyncController,
@@ -329,8 +390,43 @@ export class CollabMdAppShell {
       vaultApiClient: this.vaultApiClient,
       wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
-    this.gitDiffView = this.createLazyGitDiffViewController();
-    this.fileHistoryView = this.createLazyFileHistoryViewController();
+    this.gitDiffView = new GitDiffViewController({
+      getTheme: () => this.themeController.getTheme(),
+      gitApiClient: this.gitApiClient,
+      onBackToHistory: ({ historyFilePath } = {}) => {
+        if (historyFilePath) {
+          this.navigation.navigateToGitFileHistory({ filePath: historyFilePath });
+          return;
+        }
+        this.navigation.navigateToGitHistory();
+      },
+      onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+      onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
+    this.fileHistoryView = new FileHistoryViewController({
+      diffRenderer: this.gitDiffView,
+      gitApiClient: this.gitApiClient,
+      onOpenCommitDiff: (hash, { historyFilePath, path }) => this.handleGitCommitSelection(hash, {
+        closeSidebarOnMobile: false,
+        historyFilePath,
+        path,
+      }),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenPreview: ({ hash, path, currentFilePath }) => this.handleGitFilePreviewSelection({
+        hash,
+        path,
+        currentFilePath,
+      }),
+      onOpenWorkspaceDiff: (filePath) => this.handleGitDiffSelection(filePath, {
+        closeSidebarOnMobile: false,
+        scope: 'all',
+      }),
+      toastController: this.toastController,
+    });
     this.tabActivityLock = new TabActivityLock({
       onActivated: ({ takeover }) => this.handleTabActivated({ takeover }),
       onBlocked: () => this.handleTabBlocked({ reason: 'active-elsewhere' }),
@@ -353,6 +449,7 @@ export class CollabMdAppShell {
         lineInfoElement: this.elements.lineInfo,
         lineWrappingEnabled: options.lineWrappingEnabled,
         localUser: options.localUser,
+        vimModeEnabled: options.vimModeEnabled,
         onImagePaste: options.onImagePaste,
         onAwarenessChange: options.onAwarenessChange,
         onCommentsChange: options.onCommentsChange,
@@ -364,6 +461,7 @@ export class CollabMdAppShell {
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
       getLineWrappingEnabled: () => this.getStoredLineWrapping(),
+      getVimModeEnabled: () => this.getStoredVimMode(),
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
@@ -371,8 +469,10 @@ export class CollabMdAppShell {
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
+      isPdfFile: (filePath) => this.isPdfFile(filePath),
       isMermaidFile: (filePath) => this.isMermaidFile(filePath),
       isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
+      isStructurizrWorkspaceFile: (filePath) => this.isStructurizrWorkspaceFile(filePath),
       isTabActive: () => this.isTabActive,
       loadBootstrapContent: async (filePath) => {
         const response = await this.vaultApiClient.readFile(filePath);
@@ -381,20 +481,30 @@ export class CollabMdAppShell {
       loadEditorSessionClass: () => this.loadEditorSessionClass(),
       loadBacklinks: (filePath) => this.backlinksPanel.load(filePath),
       onBeforeFileOpen: () => {
+        clearTimeout(this._basePreviewRenderTimer);
+        this._basePreviewRenderTimer = null;
         this.session = null;
         this.commentUi.attachSession(null);
         this.layoutController.reset();
-        this.resetPreviewMode();
+        this.workspacePreviewController.resetPreviewMode();
         this.elements.emptyState?.classList.add('hidden');
         this.elements.editorPage?.classList.remove('hidden');
         this.elements.diffPage?.classList.add('hidden');
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
+      onContentChange: ({ isBase, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
         this.handleCommentEditorContentChange();
         if (isBase) {
-          void this.renderBaseFilePreview(this.currentFilePath, {
+          this.scheduleBaseFilePreview(this.currentFilePath, {
+            source: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
+        if (isStructurizrWorkspace) {
+          this.structurizrPreview.queueSync({
+            filePath: this.currentFilePath,
             source: this.session?.getText?.() ?? '',
           });
           return;
@@ -414,6 +524,9 @@ export class CollabMdAppShell {
       },
       onFileOpenReady: () => {
         this.hideEditorLoading();
+        if (this.currentFilePath) {
+          this.preferences.recordRecentFile(this.currentFilePath);
+        }
       },
       onSelectionChange: (anchor) => this.handleCommentSelectionChange(anchor),
       onImagePaste: (file) => this.handleEditorImageInsert(file),
@@ -422,10 +535,12 @@ export class CollabMdAppShell {
         this.session = session;
         this.commentUi.attachSession(session);
       },
-      onRenderDrawioPreview: (filePath) => this.renderDrawioFilePreview(filePath),
+      onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
-      onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
-      onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
+      onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
+      onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
+      onRenderPdfPreview: (filePath) => this.workspacePreviewController.renderPdfFilePreview(filePath),
+      onRenderStructurizrPreview: (filePath, options) => this.workspacePreviewController.renderStructurizrFilePreview(filePath, options),
       onSyncWrapToggle: () => this.syncWrapToggle(),
       onUpdateActiveFile: (filePath) => this.fileExplorer.setActiveFile(filePath),
       onUpdateCurrentFile: (filePath) => {
@@ -433,7 +548,7 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath, {
+        this.workspacePreviewController.syncFileChrome(filePath, {
           drawioMode: this.currentDrawioMode,
           preferPreviewForBase: this.isBaseFile(filePath),
         });
@@ -443,7 +558,7 @@ export class CollabMdAppShell {
           this.elements.activeFileName.textContent = displayName;
         }
       },
-      onViewModeReset: () => this.resetPreviewMode(),
+      onViewModeReset: () => this.workspacePreviewController.resetPreviewMode(),
       renderPresence: () => this.renderPresence(),
       scrollContainerForSession: (session) => session.getScrollContainer(),
       shouldUseDrawioPreview: () => Boolean(this.runtimeConfig.drawioBaseUrl),
@@ -472,7 +587,7 @@ export class CollabMdAppShell {
       requestPreviewRouteAnchor: (anchorId, filePath) => this.requestPreviewRouteAnchor(anchorId, filePath),
       renderAvatars: () => this.renderAvatars(),
       renderPresence: () => this.renderPresence(),
-      resetPreviewMode: () => this.resetPreviewMode(),
+      resetPreviewMode: () => this.workspacePreviewController.resetPreviewMode(),
       scrollSyncController: this.scrollSyncController,
       setCurrentFilePath: (value) => {
         this.currentFilePath = value;
@@ -501,9 +616,6 @@ export class CollabMdAppShell {
       workspaceCoordinator: this.workspaceCoordinator,
     });
 
-    if (this.chatNotificationPermission !== 'granted') {
-      this.chatNotificationsEnabled = false;
-    }
   }
 
   get session() { return this._session; }

package/src/client/browser-utils.js

@@ -2,6 +2,50 @@ function getWindowRef() {
   return typeof window === 'undefined' ? globalThis : window;
 }
 
+export function pickFiles({ accept = '', multiple = false } = {}) {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    const windowRef = getWindowRef();
+    input.type = 'file';
+    input.accept = accept;
+    input.multiple = multiple;
+    input.style.position = 'fixed';
+    input.style.left = '-9999px';
+    document.body.appendChild(input);
+    let settled = false;
+    let focusTimer = null;
+
+    const cleanup = (files = []) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      if (focusTimer) {
+        windowRef.clearTimeout(focusTimer);
+      }
+      windowRef.removeEventListener('focus', handleWindowFocus);
+      input.remove();
+      resolve(Array.from(files ?? []));
+    };
+
+    const handleWindowFocus = () => {
+      focusTimer = windowRef.setTimeout(() => {
+        if (settled || input.files?.length) {
+          return;
+        }
+
+        cleanup();
+      }, 250);
+    };
+
+    input.addEventListener('change', () => cleanup(input.files), { once: true });
+    input.addEventListener('cancel', () => cleanup(), { once: true });
+    windowRef.addEventListener('focus', handleWindowFocus, { once: true });
+    input.click();
+  });
+}
+
 export function requestIdleRender(callback, timeout) {
   const windowRef = getWindowRef();
   if (typeof windowRef.requestIdleCallback === 'function') {