collabmd 0.1.43 → 0.1.45

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

@@ -4,17 +4,33 @@ import { WorkspaceRouteController } from '../application/workspace-route-control
 import { WikiLinkFileController } from '../application/wiki-link-file-controller.js';
 import { WorkspacePreviewController } from '../application/workspace-preview-controller.js';
 import { WorkspaceCoordinator } from '../application/workspace-coordinator.js';
-import { WorkspaceStateStore } from '../application/workspace-state-store.js';
 import { bindAppShellElements } from '../application/app-shell-elements.js';
+import { chatFeature } from '../application/app-shell/chat-feature.js';
+import { commentsFeature } from '../application/app-shell/comments-feature.js';
+import { exportFeature } from '../application/app-shell/export-feature.js';
+import { gitFeature } from '../application/app-shell/git-feature.js';
+import { presenceFeature } from '../application/app-shell/presence-feature.js';
+import { uiFeatureIdentityMethods } from '../application/app-shell/ui-feature-identity.js';
+import { uiFeatureShellMethods } from '../application/app-shell/ui-feature-shell.js';
+import { uiFeatureSidebarMethods } from '../application/app-shell/ui-feature-sidebar.js';
+import { uiFeatureTabActivityMethods } from '../application/app-shell/ui-feature-tab-activity.js';
+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 { BrowserNavigationPort } from '../infrastructure/browser-navigation-port.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 { getRuntimeConfig } from '../infrastructure/runtime-config.js';
-import { plantUmlApiClient } from '../infrastructure/plantuml-api-client.js';
+import {
+  getHashRoute,
+  getRuntimeConfig,
+  navigateToFile,
+  navigateToGitCommit,
+  navigateToGitDiff,
+  navigateToGitFileHistory,
+  navigateToGitFilePreview,
+  navigateToGitHistory,
+} 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';
@@ -22,6 +38,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';
@@ -29,37 +51,72 @@ 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 { renderAppShell } from '../presentation/app-shell-renderer.js';
-import { createAppShellFeatureSurface } from './app-shell-feature-surface.js';
 
-export class CollabMdAppShell {
-  initialize(...args) { return this.features.initialize(...args); }
-  handleHashChange(...args) { return this.features.handleHashChange(...args); }
-  handleDocumentKeydown(...args) { return this.features.handleDocumentKeydown(...args); }
-  handleDocumentPointerDown(...args) { return this.features.handleDocumentPointerDown(...args); }
-  handleFileSelection(...args) { return this.features.handleFileSelection(...args); }
-  navigatePreviewHeading(...args) { return this.features.navigatePreviewHeading(...args); }
+const APP_SHELL_FEATURES = [
+  chatFeature,
+  commentsFeature,
+  exportFeature,
+  gitFeature,
+  presenceFeature,
+  {
+    ...uiFeatureShellMethods,
+    ...uiFeatureSidebarMethods,
+    ...uiFeatureIdentityMethods,
+    ...uiFeatureToolbarMethods,
+    ...uiFeatureTabActivityMethods,
+  },
+  workspaceFeature,
+];
 
+export class CollabMdAppShell {
   constructor() {
-    renderAppShell(document);
+    for (const feature of APP_SHELL_FEATURES) {
+      for (const [name, method] of Object.entries(feature)) {
+        if (!(name in this)) this[name] = method;
+      }
+    }
     this.elements = bindAppShellElements(document);
-    this.features = createAppShellFeatureSurface(this);
     this.runtimeConfig = getRuntimeConfig();
-    this.stateStore = new WorkspaceStateStore();
-    this.navigation = new BrowserNavigationPort();
+    this.activeSidebarTab = 'files';
+    this.chatInitialSyncComplete = false;
+    this.chatIsOpen = false;
+    this.chatMessageIds = new Set();
+    this.chatMessages = [];
+    this.chatUnreadCount = 0;
+    this.connectionHelpShown = false;
+    this.connectionState = { status: 'disconnected', unreachable: false };
+    this.currentDrawioMode = null;
+    this.currentFilePath = null;
+    this.fileExplorerReady = false;
+    this.followedCursorSignature = '';
+    this.followedUserClientId = null;
+    this.gitRepoAvailable = false;
+    this.globalUsers = [];
+    this.isTabActive = false;
+    this.presencePanelOpen = false;
+    this.sessionLoadToken = 0;
+    this.navigation = {
+      getHashRoute,
+      navigateToFile,
+      navigateToGitCommit,
+      navigateToGitDiff,
+      navigateToGitFileHistory,
+      navigateToGitFilePreview,
+      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',
       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;
@@ -69,39 +126,36 @@ 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;
     this.versionMonitor = new AppVersionMonitor({
       currentBuildId: this.runtimeConfig.build?.id,
-      onUpdateAvailable: (payload) => this.features.promptForVersionReload(payload),
+      onUpdateAvailable: (payload) => this.promptForVersionReload(payload),
       runtimeConfig: this.runtimeConfig,
     });
 
     this.lobby = new LobbyPresence({
-      preferredUserName: this.features.getStoredUserName(),
-      onChange: (users) => this.features.updateGlobalUsers(users),
-      onChatChange: (messages, meta) => this.features.updateChatMessages(messages, meta),
+      preferredUserName: this.getStoredUserName(),
+      onChange: (users) => this.updateGlobalUsers(users),
+      onChatChange: (messages, meta) => this.updateChatMessages(messages, meta),
     });
     this.workspaceSync = new WorkspaceSyncClient({
       onTreeChange: (tree, metadata = {}) => {
         const wasReady = this.fileExplorerReady;
         this.fileExplorer.setTree(tree, metadata);
-        this.features.handleCommentOverviewWorkspaceTreeChange?.();
+        this.handleCommentOverviewWorkspaceTreeChange?.();
         this.fileExplorerReady = true;
         if (!wasReady && this.isTabActive) {
-          void this.features.handleHashChange();
+          void this.workspaceRouteController.handleHashChange();
         }
       },
       onWorkspaceEvent: (event) => {
-        void this.features.handleIncomingWorkspaceEvent(event);
+        void this.handleIncomingWorkspaceEvent(event);
       },
     });
 
@@ -110,20 +164,43 @@ export class CollabMdAppShell {
     this.fileExplorer = new FileExplorerController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
-      onFileSelect: (filePath) => this.features.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,
     });
     this.commentsOverview = new CommentOverviewController({
       onOverviewChange: (_overview, { threadCounts }) => {
         this.fileExplorer.setThreadCounts(threadCounts);
       },
-      onThreadSelect: (payload) => this.features.openCommentOverviewThread(payload),
+      onThreadSelect: (payload) => this.openCommentOverviewThread(payload),
       panelElement: this.elements.commentOverviewPanel,
       toastController: this.toastController,
       vaultApiClient: this.vaultApiClient,
     });
-    this.gitPanel = this.features.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 }) => {
@@ -136,12 +213,24 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
-    this.basesPreview = this.features.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,
     });
     this.previewRenderer = new PreviewRenderer({
-      getContent: () => this.features.getPreviewSource(),
+      getContent: () => this.getPreviewSource(),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
       getWikiLinkAutoCreate: () => this.runtimeConfig.wikiLinkAutoCreate !== false,
       loadFileSource: async (filePath) => {
@@ -155,17 +244,14 @@ 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.features.syncPreviewHeadingLinkButtons();
-        this.features.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
-        this.features.schedulePreviewLayoutSync({ delayMs: 0 });
-        this.features.refreshCommentUiLayout();
+        this.syncPreviewHeadingLinkButtons();
+        this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
+        this.refreshCommentUiLayout();
       },
       onBeforeRenderCommit: () => {
         this.videoEmbed.detachForCommit();
@@ -174,33 +260,30 @@ export class CollabMdAppShell {
       },
       onPreviewLayoutChange: () => {
         this.scrollSyncController.invalidatePreviewBlocks();
-        this.features.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: false });
-        this.features.schedulePreviewLayoutSync({ delayMs: 0 });
-        this.features.refreshCommentUiLayout();
+        this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: false });
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
+        this.refreshCommentUiLayout();
       },
       onRenderComplete: () => {
-        this.videoEmbed.syncLayout();
-        this.drawioEmbed.syncLayout();
-        this.excalidrawEmbed.syncLayout();
-        this.features.applyPendingPreviewRouteAnchor({ allowExpired: true, behavior: 'auto', clearMissing: true });
-        this.features.schedulePreviewLayoutSync({ delayMs: 0 });
-        this.features.refreshCommentUiLayout();
+        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,
     });
-    this.themeController = new ThemeController({ onChange: (theme) => this.features.handleThemeChange(theme) });
+    this.themeController = new ThemeController({ onChange: (theme) => this.handleThemeChange(theme) });
     this.layoutController = new LayoutController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onMeasureEditor: () => this.session?.requestMeasure(),
-      onViewRequest: (view) => this.features.handleLayoutViewRequest(view),
+      onViewRequest: (view) => this.handleLayoutViewRequest(view),
     });
     this.scrollSyncController = new ScrollSyncController({
       getEditorLineNumber: () => this.session?.getTopVisibleLineNumber(0.35) ?? 1,
-      onEditorScrollActivityChange: (isActive) => this.features.handleEditorScrollActivityChange(isActive),
+      onEditorScrollActivityChange: (isActive) => this.handleEditorScrollActivityChange(isActive),
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
@@ -208,12 +291,36 @@ export class CollabMdAppShell {
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
-      loadBacklinks: (filePath, options = {}) => this.backlinksApiClient.readBacklinks(filePath, options),
-      onFileSelect: (filePath) => this.features.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.features.createLazyExcalidrawEmbedController();
-    this.drawioEmbed = this.features.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,
@@ -224,14 +331,25 @@ export class CollabMdAppShell {
       onWillOpenDrawer: () => this.outlineController.close(),
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
-      onCreateThread: ({ anchor, body }) => this.features.createCommentThread({ anchor, body }),
+      onCreateThread: ({ anchor, body }) => this.createCommentThread({ anchor, body }),
       onNavigateToLine: (lineNumber) => {
+        const session = this.session;
         this.scrollSyncController.suspendSync(250);
-        this.session?.scrollToLine(lineNumber, 0.2);
+        const didScroll = session?.scrollToLine(lineNumber, 0.2);
+        if (didScroll) {
+          requestAnimationFrame(() => {
+            if (this.session !== session) {
+              return;
+            }
+
+            this.scrollSyncController.suspendSync(0);
+            this.scrollSyncController.syncPreviewToEditor();
+          });
+        }
       },
-      onReplyToThread: (threadId, body) => this.features.replyToCommentThread(threadId, body),
+      onReplyToThread: (threadId, body) => this.replyToCommentThread(threadId, body),
       onToggleReaction: (threadId, messageId, emoji) => this.session?.toggleCommentReaction(threadId, messageId, emoji),
-      onResolveThread: (threadId) => this.features.resolveCommentThread(threadId),
+      onResolveThread: (threadId) => this.resolveCommentThread(threadId),
     });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
@@ -239,18 +357,18 @@ export class CollabMdAppShell {
       drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
-      getDisplayName: (filePath) => this.features.getDisplayName(filePath),
+      getDisplayName: (filePath) => this.getDisplayName(filePath),
       getSession: () => this.session,
-      isBaseFile: (filePath) => this.features.isBaseFile(filePath),
-      isDrawioFile: (filePath) => this.features.isDrawioFile(filePath),
-      isExcalidrawFile: (filePath) => this.features.isExcalidrawFile(filePath),
-      isImageFile: (filePath) => this.features.isImageFile(filePath),
-      isMermaidFile: (filePath) => this.features.isMermaidFile(filePath),
-      isPlantUmlFile: (filePath) => this.features.isPlantUmlFile(filePath),
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
+      isDrawioFile: (filePath) => this.isDrawioFile(filePath),
+      isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
+      isImageFile: (filePath) => this.isImageFile(filePath),
+      isMermaidFile: (filePath) => this.isMermaidFile(filePath),
+      isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       layoutController: this.layoutController,
       outlineController: this.outlineController,
       previewRenderer: this.previewRenderer,
-      schedulePreviewLayoutSync: (options) => this.features.schedulePreviewLayoutSync(options),
+      schedulePreviewLayoutSync: (options) => this.schedulePreviewLayoutSync(options),
       scrollSyncController: this.scrollSyncController,
       videoEmbed: this.videoEmbed,
     });
@@ -262,12 +380,45 @@ export class CollabMdAppShell {
       vaultApiClient: this.vaultApiClient,
       wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
-    this.gitDiffView = this.features.createLazyGitDiffViewController();
-    this.fileHistoryView = this.features.createLazyFileHistoryViewController();
+    this.gitDiffView = new GitDiffViewController({
+      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,
+    });
+    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.features.handleTabActivated({ takeover }),
-      onBlocked: () => this.features.handleTabBlocked({ reason: 'active-elsewhere' }),
-      onStolen: () => this.features.handleTabBlocked({ reason: 'taken-over' }),
+      onActivated: ({ takeover }) => this.handleTabActivated({ takeover }),
+      onBlocked: () => this.handleTabBlocked({ reason: 'active-elsewhere' }),
+      onStolen: () => this.handleTabBlocked({ reason: 'taken-over' }),
     });
     this.workspaceCoordinator = new WorkspaceCoordinator({
       attachEditorScroller: (scroller) => this.scrollSyncController.attachEditorScroller(scroller),
@@ -294,18 +445,18 @@ export class CollabMdAppShell {
         onSelectionChange: options.onSelectionChange,
         preferredUserName: options.preferredUserName,
       }),
-      getDisplayName: (filePath) => this.features.getDisplayName(filePath),
+      getDisplayName: (filePath) => this.getDisplayName(filePath),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
-      getLineWrappingEnabled: () => this.features.getStoredLineWrapping(),
+      getLineWrappingEnabled: () => this.getStoredLineWrapping(),
       getLocalUser: () => this.lobby.getLocalUser(),
-      getStoredUserName: () => this.features.getStoredUserName(),
+      getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
-      isBaseFile: (filePath) => this.features.isBaseFile(filePath),
-      isDrawioFile: (filePath) => this.features.isDrawioFile(filePath),
-      isExcalidrawFile: (filePath) => this.features.isExcalidrawFile(filePath),
-      isImageFile: (filePath) => this.features.isImageFile(filePath),
-      isMermaidFile: (filePath) => this.features.isMermaidFile(filePath),
-      isPlantUmlFile: (filePath) => this.features.isPlantUmlFile(filePath),
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
+      isDrawioFile: (filePath) => this.isDrawioFile(filePath),
+      isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
+      isImageFile: (filePath) => this.isImageFile(filePath),
+      isMermaidFile: (filePath) => this.isMermaidFile(filePath),
+      isPlantUmlFile: (filePath) => this.isPlantUmlFile(filePath),
       isTabActive: () => this.isTabActive,
       loadBootstrapContent: async (filePath) => {
         const response = await this.vaultApiClient.readFile(filePath);
@@ -314,20 +465,22 @@ 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.features.resetPreviewMode();
+        this.workspacePreviewController.resetPreviewMode();
         this.elements.emptyState?.classList.add('hidden');
         this.elements.editorPage?.classList.remove('hidden');
         this.elements.diffPage?.classList.add('hidden');
-        this.features.clearInitialFileBootstrap();
+        this.clearInitialFileBootstrap();
       },
-      onConnectionChange: (state) => this.features.handleConnectionChange(state),
+      onConnectionChange: (state) => this.handleConnectionChange(state),
       onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
-        this.features.handleCommentEditorContentChange();
+        this.handleCommentEditorContentChange();
         if (isBase) {
-          void this.features.renderBaseFilePreview(this.currentFilePath, {
+          this.scheduleBaseFilePreview(this.currentFilePath, {
             source: this.session?.getText?.() ?? '',
           });
           return;
@@ -335,59 +488,62 @@ export class CollabMdAppShell {
 
         this.previewRenderer.queueRender();
         if (!isMermaid && !isPlantUml) {
-          this.features.scheduleBacklinkRefresh();
+          this.scheduleBacklinkRefresh();
         }
       },
-      onCommentsChange: (threads) => this.features.handleCommentThreadsChange(threads),
-      onFileAwarenessChange: (users) => this.features.updateFileAwareness(users),
+      onCommentsChange: (threads) => this.handleCommentThreadsChange(threads),
+      onFileAwarenessChange: (users) => this.updateFileAwareness(users),
       onFileOpenError: () => {
-        this.features.showEditorLoadError();
-        this.features.syncWrapToggle();
+        this.showEditorLoadError();
+        this.syncWrapToggle();
         this.toastController.show('Failed to initialize editor');
       },
       onFileOpenReady: () => {
-        this.features.hideEditorLoading();
+        this.hideEditorLoading();
+        if (this.currentFilePath) {
+          this.preferences.recordRecentFile(this.currentFilePath);
+        }
       },
-      onSelectionChange: (anchor) => this.features.handleCommentSelectionChange(anchor),
-      onImagePaste: (file) => this.features.handleEditorImageInsert(file),
+      onSelectionChange: (anchor) => this.handleCommentSelectionChange(anchor),
+      onImagePaste: (file) => this.handleEditorImageInsert(file),
       onFileOpenMetric: (name, payload) => this.recordFileOpenMetric(name, payload),
       onSessionAssigned: (session) => {
         this.session = session;
         this.commentUi.attachSession(session);
       },
-      onRenderDrawioPreview: (filePath) => this.features.renderDrawioFilePreview(filePath),
-      onRenderBasePreview: (filePath) => this.features.renderBaseFilePreview(filePath),
-      onRenderExcalidrawPreview: (filePath) => this.features.renderExcalidrawFilePreview(filePath),
-      onRenderImagePreview: (filePath) => this.features.renderImageFilePreview(filePath),
-      onSyncWrapToggle: () => this.features.syncWrapToggle(),
+      onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
+      onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
+      onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
+      onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
+      onSyncWrapToggle: () => this.syncWrapToggle(),
       onUpdateActiveFile: (filePath) => this.fileExplorer.setActiveFile(filePath),
       onUpdateCurrentFile: (filePath) => {
         this.currentFilePath = filePath;
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.features.syncFileChrome(filePath, {
+        this.workspacePreviewController.syncFileChrome(filePath, {
           drawioMode: this.currentDrawioMode,
-          preferPreviewForBase: this.features.isBaseFile(filePath),
+          preferPreviewForBase: this.isBaseFile(filePath),
         });
-        this.features.syncCommentChrome(filePath);
-        this.features.syncFileHistoryButton({ filePath, mode: 'editor' });
+        this.syncCommentChrome(filePath);
+        this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
           this.elements.activeFileName.textContent = displayName;
         }
       },
-      onViewModeReset: () => this.features.resetPreviewMode(),
-      renderPresence: () => this.features.renderPresence(),
+      onViewModeReset: () => this.workspacePreviewController.resetPreviewMode(),
+      renderPresence: () => this.renderPresence(),
       scrollContainerForSession: (session) => session.getScrollContainer(),
       shouldUseDrawioPreview: () => Boolean(this.runtimeConfig.drawioBaseUrl),
-      showEditorLoading: () => this.features.showEditorLoading(),
-      stateStore: this.stateStore,
+      showEditorLoading: () => this.showEditorLoading(),
+      stateStore: this,
     });
     this.workspaceRouteController = new WorkspaceRouteController({
       backlinksPanel: this.backlinksPanel,
-      clearInitialFileBootstrap: () => this.features.clearInitialFileBootstrap(),
-      clearStaticPreviewDocument: () => this.features.clearStaticPreviewDocument(),
-      closeSidebarOnMobile: () => this.features.closeSidebarOnMobile(),
+      clearInitialFileBootstrap: () => this.clearInitialFileBootstrap(),
+      clearStaticPreviewDocument: () => this.clearStaticPreviewDocument(),
+      closeSidebarOnMobile: () => this.closeSidebarOnMobile(),
       drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
@@ -402,17 +558,17 @@ export class CollabMdAppShell {
       lobby: this.lobby,
       navigation: this.navigation,
       previewRenderer: this.previewRenderer,
-      requestPreviewRouteAnchor: (anchorId, filePath) => this.features.requestPreviewRouteAnchor(anchorId, filePath),
-      renderAvatars: () => this.features.renderAvatars(),
-      renderPresence: () => this.features.renderPresence(),
-      resetPreviewMode: () => this.features.resetPreviewMode(),
+      requestPreviewRouteAnchor: (anchorId, filePath) => this.requestPreviewRouteAnchor(anchorId, filePath),
+      renderAvatars: () => this.renderAvatars(),
+      renderPresence: () => this.renderPresence(),
+      resetPreviewMode: () => this.workspacePreviewController.resetPreviewMode(),
       scrollSyncController: this.scrollSyncController,
       setCurrentFilePath: (value) => {
         this.currentFilePath = value;
         if (!value) {
           this.commentUi.setCurrentFile(null, { supported: false });
-          this.features.handleCommentThreadsChange([]);
-          this.features.handleCommentSelectionChange(null);
+          this.handleCommentThreadsChange([]);
+          this.handleCommentSelectionChange(null);
         }
       },
       setSession: (value) => {
@@ -422,61 +578,22 @@ export class CollabMdAppShell {
       setSessionLoadToken: (value) => {
         this.sessionLoadToken = value;
       },
-      setSidebarTab: (value) => this.features.setSidebarTab(value),
-      setSidebarVisibility: (showSidebar) => this.features.setSidebarVisibility(showSidebar),
-      showGitCommit: (route) => this.features.showGitCommit(route),
-      showGitDiff: (route) => this.features.showGitDiff(route),
-      showGitFileHistory: (route) => this.features.showGitFileHistory(route),
-      showGitFilePreview: (route) => this.features.showGitFilePreview(route),
-      showGitHistory: () => this.features.showGitHistory(),
-      syncMainChrome: (payload) => this.features.syncMainChrome(payload),
+      setSidebarTab: (value) => this.setSidebarTab(value),
+      setSidebarVisibility: (showSidebar) => this.setSidebarVisibility(showSidebar),
+      showGitCommit: (route) => this.showGitCommit(route),
+      showGitDiff: (route) => this.showGitDiff(route),
+      showGitFileHistory: (route) => this.showGitFileHistory(route),
+      showGitFilePreview: (route) => this.showGitFilePreview(route),
+      showGitHistory: () => this.showGitHistory(),
+      syncMainChrome: (payload) => this.syncMainChrome(payload),
       videoEmbed: this.videoEmbed,
       workspaceCoordinator: this.workspaceCoordinator,
     });
 
-    if (this.chatNotificationPermission !== 'granted') {
-      this.chatNotificationsEnabled = false;
-    }
   }
 
   get session() { return this._session; }
   set session(value) { this._session = value; }
-  get currentFilePath() { return this.stateStore.get('currentFilePath'); }
-  set currentFilePath(value) { this.stateStore.set('currentFilePath', value); }
-  get currentDrawioMode() { return this.stateStore.get('currentDrawioMode'); }
-  set currentDrawioMode(value) { this.stateStore.set('currentDrawioMode', value ?? null); }
-  get globalUsers() { return this.stateStore.get('globalUsers'); }
-  set globalUsers(value) { this.stateStore.set('globalUsers', value); }
-  get connectionState() { return this.stateStore.get('connectionState'); }
-  set connectionState(value) { this.stateStore.set('connectionState', value); }
-  get sessionLoadToken() { return this.stateStore.get('sessionLoadToken'); }
-  set sessionLoadToken(value) { this.stateStore.set('sessionLoadToken', value); }
-  get connectionHelpShown() { return this.stateStore.get('connectionHelpShown'); }
-  set connectionHelpShown(value) { this.stateStore.set('connectionHelpShown', value); }
-  get chatMessages() { return this.stateStore.get('chatMessages'); }
-  set chatMessages(value) { this.stateStore.set('chatMessages', value); }
-  get chatMessageIds() { return this.stateStore.get('chatMessageIds'); }
-  set chatMessageIds(value) { this.stateStore.set('chatMessageIds', value); }
-  get chatUnreadCount() { return this.stateStore.get('chatUnreadCount'); }
-  set chatUnreadCount(value) { this.stateStore.set('chatUnreadCount', value); }
-  get chatIsOpen() { return this.stateStore.get('chatIsOpen'); }
-  set chatIsOpen(value) { this.stateStore.set('chatIsOpen', value); }
-  get chatInitialSyncComplete() { return this.stateStore.get('chatInitialSyncComplete'); }
-  set chatInitialSyncComplete(value) { this.stateStore.set('chatInitialSyncComplete', value); }
-  get isTabActive() { return this.stateStore.get('isTabActive'); }
-  set isTabActive(value) { this.stateStore.set('isTabActive', value); }
-  get fileExplorerReady() { return this.stateStore.get('fileExplorerReady'); }
-  set fileExplorerReady(value) { this.stateStore.set('fileExplorerReady', value); }
-  get gitRepoAvailable() { return this.stateStore.get('gitRepoAvailable'); }
-  set gitRepoAvailable(value) { this.stateStore.set('gitRepoAvailable', value); }
-  get activeSidebarTab() { return this.stateStore.get('activeSidebarTab'); }
-  set activeSidebarTab(value) { this.stateStore.set('activeSidebarTab', value); }
-  get presencePanelOpen() { return this.stateStore.get('presencePanelOpen'); }
-  set presencePanelOpen(value) { this.stateStore.set('presencePanelOpen', value); }
-  get followedUserClientId() { return this.stateStore.get('followedUserClientId'); }
-  set followedUserClientId(value) { this.stateStore.set('followedUserClientId', value); }
-  get followedCursorSignature() { return this.stateStore.get('followedCursorSignature'); }
-  set followedCursorSignature(value) { this.stateStore.set('followedCursorSignature', value); }
 
   publishFileOpenPerf() {
     if (typeof window === 'undefined') {