collabmd 0.1.43 → 0.1.44

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

@@ -4,16 +4,34 @@ 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 { 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 {
+  getHashRoute,
+  getRuntimeConfig,
+  navigateToFile,
+  navigateToGitCommit,
+  navigateToGitDiff,
+  navigateToGitFileHistory,
+  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';
@@ -29,24 +47,61 @@ 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';
+import { lazyControllerFeature } from './lazy-controller-feature.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,
+  lazyControllerFeature,
+  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',
       lineWrappingKey: 'collabmd-editor-line-wrap',
@@ -81,27 +136,27 @@ export class CollabMdAppShell {
     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.handleHashChange();
         }
       },
       onWorkspaceEvent: (event) => {
-        void this.features.handleIncomingWorkspaceEvent(event);
+        void this.handleIncomingWorkspaceEvent(event);
       },
     });
 
@@ -110,20 +165,21 @@ 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.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
       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 = this.createLazyGitPanelController();
     this.outlineController = new OutlineController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onNavigateToHeading: ({ sourceLine }) => {
@@ -136,12 +192,12 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
-    this.basesPreview = this.features.createLazyBasesPreviewController();
+    this.basesPreview = this.createLazyBasesPreviewController();
     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) => {
@@ -162,10 +218,10 @@ export class CollabMdAppShell {
         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,17 +230,17 @@ 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,
@@ -192,15 +248,15 @@ export class CollabMdAppShell {
       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),
@@ -209,11 +265,11 @@ export class CollabMdAppShell {
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
       loadBacklinks: (filePath, options = {}) => this.backlinksApiClient.readBacklinks(filePath, options),
-      onFileSelect: (filePath) => this.features.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       panelElement: this.elements.backlinksPanel,
     });
-    this.excalidrawEmbed = this.features.createLazyExcalidrawEmbedController();
-    this.drawioEmbed = this.features.createLazyDrawioEmbedController();
+    this.excalidrawEmbed = this.createLazyExcalidrawEmbedController();
+    this.drawioEmbed = this.createLazyDrawioEmbedController();
     this.commentUi = new CommentUiController({
       commentSelectionButton: this.elements.commentSelectionButton,
       commentsDrawer: this.elements.commentsDrawer,
@@ -224,14 +280,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 +306,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 +329,12 @@ export class CollabMdAppShell {
       vaultApiClient: this.vaultApiClient,
       wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
-    this.gitDiffView = this.features.createLazyGitDiffViewController();
-    this.fileHistoryView = this.features.createLazyFileHistoryViewController();
+    this.gitDiffView = this.createLazyGitDiffViewController();
+    this.fileHistoryView = this.createLazyFileHistoryViewController();
     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 +361,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);
@@ -317,17 +384,17 @@ export class CollabMdAppShell {
         this.session = null;
         this.commentUi.attachSession(null);
         this.layoutController.reset();
-        this.features.resetPreviewMode();
+        this.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, {
+          void this.renderBaseFilePreview(this.currentFilePath, {
             source: this.session?.getText?.() ?? '',
           });
           return;
@@ -335,59 +402,59 @@ 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();
       },
-      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.renderDrawioFilePreview(filePath),
+      onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
+      onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
+      onRenderImagePreview: (filePath) => this.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.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.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 +469,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.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,14 +489,14 @@ 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,
     });
@@ -441,42 +508,6 @@ export class CollabMdAppShell {
 
   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') {

package/src/client/bootstrap/lazy-controller-feature.js

@@ -1,6 +1,4 @@
-function getPathLeaf(filePath = '') {
-  return String(filePath ?? '').split('/').filter(Boolean).pop() || String(filePath ?? '') || 'File';
-}
+import { getVaultPathLeaf } from '../domain/vault-paths.js';
 
 function createLazyControllerProxy({
   createController,
@@ -162,6 +160,7 @@ export const lazyControllerFeature = {
         previewContainer: this.elements.previewContainer,
         previewElement: this.elements.previewContent,
         toastController: this.toastController,
+        vaultApiClient: this.vaultApiClient,
       }),
       fallback: {
         destroy: () => { },
@@ -349,10 +348,10 @@ export const lazyControllerFeature = {
       fallback: {
         getToolbarTitle: ({ commitHash = null, filePath = null, path = null, scope = 'all', source = 'workspace' } = {}) => {
           if (source === 'commit') {
-            if (path) return getPathLeaf(path);
+            if (path) return getVaultPathLeaf(path) || String(path ?? '') || 'File';
             return commitHash ? `Commit ${String(commitHash).slice(0, 7)}` : 'Commit Diff';
           }
-          if (filePath) return getPathLeaf(filePath);
+          if (filePath) return getVaultPathLeaf(filePath) || String(filePath ?? '') || 'File';
           if (scope === 'staged') return 'Staged Changes';
           if (scope === 'working-tree') return 'Working Tree Changes';
           return 'All Changes';