collabmd 0.1.20 → 0.1.23

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

@@ -1,14 +1,16 @@
+import { createWorkspaceChange } from '../../../domain/workspace-change.js';
 import { resolveApiUrl } from '../../domain/runtime-paths.js';
 
 function normalizeWorkspaceChange(workspaceChange = {}) {
-  return {
-    changedPaths: Array.isArray(workspaceChange.changedPaths) ? workspaceChange.changedPaths.filter(Boolean) : [],
-    deletedPaths: Array.isArray(workspaceChange.deletedPaths) ? workspaceChange.deletedPaths.filter(Boolean) : [],
-    refreshExplorer: workspaceChange.refreshExplorer !== false,
-    renamedPaths: Array.isArray(workspaceChange.renamedPaths)
-      ? workspaceChange.renamedPaths.filter((entry) => entry?.oldPath && entry?.newPath)
-      : [],
-  };
+  return createWorkspaceChange(workspaceChange);
+}
+
+function createWorkspaceRequestId() {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `workspace-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
 }
 
 export const gitFeature = {
@@ -51,6 +53,46 @@ export const gitFeature = {
     this.navigation.navigateToGitDiff({ filePath, scope });
   },
 
+  handleGitCommitSelection(hash, { closeSidebarOnMobile = false, historyFilePath = null, path = null } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToGitCommit({ hash, historyFilePath, path });
+  },
+
+  handleGitHistorySelection({ closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToGitHistory();
+  },
+
+  handleGitFileHistorySelection(filePath = this.currentFilePath, { closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    if (!filePath) {
+      return;
+    }
+
+    this.navigation.navigateToGitFileHistory({ filePath });
+  },
+
+  handleGitFilePreviewSelection({ hash, path, currentFilePath = null, closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    if (!hash || !path) {
+      return;
+    }
+
+    this.navigation.navigateToGitFilePreview({ hash, path, currentFilePath });
+  },
+
   handleGitRepoChange(isGitRepo, status = null) {
     this.gitRepoAvailable = Boolean(isGitRepo);
     this.elements.sidebarTabs?.classList.toggle('hidden', !this.gitRepoAvailable);
@@ -62,47 +104,225 @@ export const gitFeature = {
     this.gitDiffView.setRepoStatus(this.gitRepoAvailable ? status : null);
 
     if (!this.gitRepoAvailable && this.activeSidebarTab === 'git') {
+      this.syncFileHistoryButton({ mode: this.navigation.getHashRoute().type === 'git-file-preview' ? 'history-preview' : 'editor' });
       this.setSidebarTab('files');
       return;
     }
 
-    if (this.gitRepoAvailable && this.navigation.getHashRoute().type === 'git-diff' && this.activeSidebarTab !== 'git') {
+    const routeType = this.navigation.getHashRoute().type;
+    if (
+      this.gitRepoAvailable
+      && (routeType === 'git-diff' || routeType === 'git-commit' || routeType === 'git-history')
+      && this.activeSidebarTab !== 'git'
+    ) {
       this.setSidebarTab('git');
     }
+
+    this.syncFileHistoryButton({
+      filePath: this.currentFilePath,
+      mode: routeType === 'git-file-preview'
+        ? 'history-preview'
+        : routeType === 'file'
+          ? 'editor'
+          : 'empty',
+    });
   },
 
-  syncMainChrome({ mode, title = null } = {}) {
-    const isDiffMode = mode === 'diff';
-    this.elements.toolbarCenter?.classList.toggle('hidden', isDiffMode);
-    this.elements.mobileViewToggle?.classList.toggle('hidden', isDiffMode);
-    this.elements.userCount?.classList.toggle('hidden', isDiffMode);
-    this.elements.toolbarDiffBadge?.classList.toggle('hidden', !isDiffMode);
+  syncFileHistoryButton({ filePath = this.currentFilePath, mode = 'editor' } = {}) {
+    const button = this.elements.fileHistoryButton;
+    const label = this.elements.fileHistoryButtonLabel;
+    if (!button || !label) {
+      return;
+    }
+
+    const supported = this.gitRepoAvailable && this.supportsFileHistory?.(filePath);
+    if (!supported) {
+      button.classList.add('hidden');
+      return;
+    }
+
+    button.classList.remove('hidden');
+    if (mode === 'history-preview') {
+      label.textContent = 'Back to History';
+      button.setAttribute('aria-label', 'Back to file history');
+      button.title = 'Back to file history';
+      return;
+    }
+
+    if (mode !== 'editor') {
+      button.classList.add('hidden');
+      return;
+    }
+
+    label.textContent = 'History';
+    button.setAttribute('aria-label', 'Open file history');
+    button.title = 'View file history';
+  },
+
+  syncMainChrome({ badgeLabel = '', mode, title = null } = {}) {
+    const isSpecialMode = mode === 'diff' || mode === 'history' || mode === 'history-preview';
+    this.elements.toolbarCenter?.classList.toggle('hidden', isSpecialMode);
+    this.elements.mobileViewToggle?.classList.toggle('hidden', isSpecialMode);
+    this.elements.userCount?.classList.toggle('hidden', isSpecialMode);
+    this.elements.toolbarDiffBadge?.classList.toggle('hidden', !badgeLabel);
+    if (this.elements.toolbarDiffBadge) {
+      this.elements.toolbarDiffBadge.textContent = badgeLabel;
+    }
 
     if (title && this.elements.activeFileName) {
       this.elements.activeFileName.textContent = title;
     }
+
+    this.syncFileHistoryButton({ filePath: this.currentFilePath, mode });
   },
 
   async showGitDiff({ filePath = null, scope = 'all' } = {}) {
-    this.gitPanel.setSelection(filePath ? { path: filePath, scope } : {});
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setSelection(filePath ? { path: filePath, scope, source: 'workspace' } : {});
+    this.gitPanel.setMode('changes');
     this.showDiffState();
     this.syncMainChrome({
+      badgeLabel: 'Diff',
       mode: 'diff',
       title: this.gitDiffView.getToolbarTitle({ filePath, scope }),
     });
-    await this.gitDiffView.open({ filePath, scope });
+    this.syncFileHistoryButton({ filePath, mode: 'diff' });
+    await this.gitDiffView.openWorkspaceDiff({ filePath, scope });
+  },
+
+  async showGitCommit({ hash, path = null, historyFilePath = null } = {}) {
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setMode('history');
+    this.gitPanel.setSelection(hash ? { commitHash: hash, path, source: 'commit' } : { source: 'commit' });
+    this.showDiffState();
+    this.syncMainChrome({
+      badgeLabel: 'Diff',
+      mode: 'diff',
+      title: this.gitDiffView.getToolbarTitle({ commitHash: hash, path, source: 'commit' }),
+    });
+    this.syncFileHistoryButton({ filePath: path, mode: 'diff' });
+    await this.gitDiffView.openCommitDiff({ hash, historyFilePath, path });
+  },
+
+  async showGitHistory() {
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setMode('history');
+    this.gitPanel.setSelection({ source: 'commit' });
+    this.workspaceRouteController?.showEmptyState?.();
+    this.syncMainChrome({
+      mode: 'empty',
+      title: 'Git History',
+    });
+    this.syncFileHistoryButton({ mode: 'empty' });
+  },
+
+  async showGitFileHistory({ filePath = null } = {}) {
+    if (!filePath) {
+      this.workspaceRouteController?.showEmptyState?.();
+      return;
+    }
+
+    this.clearStaticPreviewDocument?.();
+    this.commentUi?.attachSession?.(null);
+    this.commentUi?.setCurrentFile?.(filePath, {
+      fileKind: this.getCommentFileKind(filePath),
+      supported: false,
+    });
+    this.handleCommentThreadsChange?.([]);
+    this.handleCommentSelectionChange?.(null);
+    this.workspaceRouteController?.showFileHistoryState?.(filePath);
+    this.syncMainChrome({
+      badgeLabel: 'History',
+      mode: 'history',
+      title: this.getDisplayName(filePath),
+    });
+    this.syncFileHistoryButton({ filePath, mode: 'history' });
+    await this.fileHistoryView.openFileHistory({ filePath });
+  },
+
+  async showGitFilePreview({ hash, filePath = null, currentFilePath = null } = {}) {
+    const resolvedCurrentFilePath = String(currentFilePath ?? '').trim() || filePath;
+    if (!hash || !filePath || !resolvedCurrentFilePath) {
+      this.workspaceRouteController?.showEmptyState?.();
+      return;
+    }
+
+    this.commentUi?.attachSession?.(null);
+    this.commentUi?.setCurrentFile?.(resolvedCurrentFilePath, {
+      fileKind: this.getCommentFileKind(resolvedCurrentFilePath),
+      supported: false,
+    });
+    this.handleCommentThreadsChange?.([]);
+    this.handleCommentSelectionChange?.(null);
+    this.workspaceRouteController?.showPreviewOnlyState?.(resolvedCurrentFilePath);
+    this.layoutController.setView('preview', { persist: false });
+    this.syncMainChrome({
+      badgeLabel: 'History Preview',
+      mode: 'history-preview',
+      title: this.getDisplayName(resolvedCurrentFilePath),
+    });
+    this.syncFileHistoryButton({ filePath: resolvedCurrentFilePath, mode: 'history-preview' });
+
+    try {
+      const query = new URLSearchParams();
+      query.set('hash', hash);
+      query.set('path', filePath);
+      const response = await fetch(resolveApiUrl(`/git/file-snapshot?${query.toString()}`));
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to load historical file preview');
+      }
+
+      this.setStaticPreviewDocument?.({
+        ...data,
+        currentFilePath: resolvedCurrentFilePath,
+      });
+      this.resetPreviewMode();
+      this.elements.markdownToolbar?.classList.add('hidden');
+      this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
+
+      if (data.fileKind === 'markdown' || data.fileKind === 'mermaid' || data.fileKind === 'plantuml') {
+        if (data.fileKind === 'mermaid') {
+          this.elements.previewContent?.classList.add('is-mermaid-file-preview');
+        } else if (data.fileKind === 'plantuml') {
+          this.elements.previewContent?.classList.add('is-plantuml-file-preview');
+        }
+        this.previewRenderer.beginDocumentLoad();
+        this.previewRenderer.queueRender();
+        return;
+      }
+
+      this.elements.outlineToggle?.classList.add('hidden');
+      this.renderTextFilePreview({
+        content: data.content,
+        filePath: resolvedCurrentFilePath,
+      });
+    } catch (error) {
+      console.error('[git-preview] Failed to load file snapshot:', error);
+      this.clearStaticPreviewDocument?.();
+      this.toastController.show('Failed to load historical file preview');
+      this.renderTextFilePreview({
+        content: 'Failed to load historical file preview.',
+        filePath: resolvedCurrentFilePath,
+      });
+      this.elements.outlineToggle?.classList.add('hidden');
+    }
   },
 
   async postGitAction(endpoint, payload) {
+    const requestId = createWorkspaceRequestId();
+    this.pendingWorkspaceRequestIds?.add(requestId);
     const response = await fetch(endpoint, {
       body: JSON.stringify(payload),
       headers: {
         'Content-Type': 'application/json',
+        'X-CollabMD-Request-Id': requestId,
       },
       method: 'POST',
     });
     const data = await response.json();
     if (!response.ok) {
+      this.pendingWorkspaceRequestIds?.delete(requestId);
       const error = new Error(data.error || 'Git action failed');
       if (typeof data?.code === 'string') {
         error.code = data.code;
@@ -121,6 +341,30 @@ export const gitFeature = {
     await this.gitPanel.refresh({ force: true });
 
     const route = this.navigation.getHashRoute();
+    if (route.type === 'git-history') {
+      await this.showGitHistory();
+      return;
+    }
+
+    if (route.type === 'git-file-history') {
+      await this.showGitFileHistory({ filePath: route.filePath });
+      return;
+    }
+
+    if (route.type === 'git-file-preview') {
+      await this.showGitFilePreview({
+        hash: route.hash,
+        filePath: route.filePath,
+        currentFilePath: route.currentFilePath,
+      });
+      return;
+    }
+
+    if (route.type === 'git-commit') {
+      await this.showGitCommit({ hash: route.hash, path: route.path, historyFilePath: route.historyFilePath });
+      return;
+    }
+
     if (route.type !== 'git-diff') {
       return;
     }
@@ -145,11 +389,6 @@ export const gitFeature = {
     const workspaceChange = normalizeWorkspaceChange(result.workspaceChange);
     await this.refreshWorkspaceAfterGitAction({ filePath, preferredScope });
     this.handleWorkspaceChangeForCurrentFile(workspaceChange, { action, local: true, showToast: showLocalFileToast });
-    this.lobby.sendWorkspaceEvent({
-      action,
-      sourceRef: result.sourceRef ?? null,
-      workspaceChange,
-    });
     return workspaceChange;
   },
 
@@ -165,21 +404,27 @@ export const gitFeature = {
       return false;
     }
 
-    this.navigation.navigateToFile(null);
     if (!showToast) {
+      if (renameEntry) {
+        this.navigation.navigateToFile(renameEntry.newPath);
+      } else {
+        this.navigation.navigateToFile(null);
+      }
       return true;
     }
 
     const displayName = this.getDisplayName(currentFilePath);
     if (renameEntry) {
+      this.navigation.navigateToFile(renameEntry.newPath);
       this.toastController.show(
         local
-          ? `${displayName} was reset away from this branch path`
-          : `${displayName} moved after a ${action} operation`,
+          ? `${displayName} moved to ${this.getDisplayName(renameEntry.newPath)}`
+          : `${displayName} moved on disk`,
       );
       return true;
     }
 
+    this.navigation.navigateToFile(null);
     this.toastController.show(
       local
         ? `${displayName} was removed by ${action}`
@@ -193,13 +438,45 @@ export const gitFeature = {
       return;
     }
 
+    if (event.requestId && this.pendingWorkspaceRequestIds?.has(event.requestId)) {
+      this.pendingWorkspaceRequestIds.delete(event.requestId);
+      return;
+    }
+
     const workspaceChange = normalizeWorkspaceChange(event.workspaceChange);
-    await this.refreshWorkspaceAfterGitAction();
+    if (event.origin === 'git') {
+      await this.refreshGitAfterAction();
+    }
     this.handleWorkspaceChangeForCurrentFile(workspaceChange, {
-      action: event.action || 'git',
+      action: event.action || event.origin || 'workspace',
       local: false,
       showToast: true,
     });
+
+    if (
+      event.origin === 'filesystem'
+      && this.currentFilePath
+      && workspaceChange.changedPaths.includes(this.currentFilePath)
+    ) {
+      const canUseInlineCue = workspaceChange.changedPaths.length === 1;
+      const highlightRange = canUseInlineCue && Array.isArray(event.highlightRanges)
+        ? event.highlightRanges.find((entry) => entry.path === this.currentFilePath)
+        : null;
+      const didFlash = highlightRange
+        ? this.session?.flashExternalUpdate?.(highlightRange)
+        : false;
+      if (!didFlash) {
+        this.toastController.show(`${this.getDisplayName(this.currentFilePath)} updated from disk`);
+      }
+    }
+
+    if (
+      this.currentFilePath
+      && Array.isArray(event.reloadRequiredPaths)
+      && event.reloadRequiredPaths.includes(this.currentFilePath)
+    ) {
+      this.toastController.show(`${this.getDisplayName(this.currentFilePath)} needs a manual reload`);
+    }
   },
 
   async stageGitFile(filePath, { scope = 'working-tree' } = {}) {

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

@@ -15,10 +15,13 @@ export const uiFeature = {
     this.fileExplorer.initialize();
     this.gitPanel.initialize();
     this.gitDiffView.initialize();
+    this.fileHistoryView.initialize();
     this.initializePreviewLayoutObserver();
+    this.syncIdentityManagementUi();
     this.syncCurrentUserName();
     this.syncWrapToggle();
     this.syncChatNotificationButton();
+    this.syncFileHistoryButton({ mode: 'empty' });
     this.renderChat();
     void this.gitPanel.refresh({ force: true });
     this.elements.chatInput?.setAttribute('maxlength', String(this.lobbyChatMessageMaxLength));
@@ -39,6 +42,11 @@ export const uiFeature = {
     });
   },
 
+  isIdentityManagedByAuth() {
+    return this.runtimeConfig?.auth?.strategy === 'oidc'
+      && this.runtimeConfig?.auth?.provider === 'google';
+  },
+
   bindEvents() {
     this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
       this.fileExplorer.actionController.handleNewFile();
@@ -65,6 +73,16 @@ export const uiFeature = {
       void this.copyCurrentLink();
     });
 
+    this.elements.fileHistoryButton?.addEventListener('click', () => {
+      const route = this.navigation.getHashRoute();
+      if (route.type === 'git-file-preview') {
+        this.handleGitFileHistorySelection(route.currentFilePath ?? route.filePath, { closeSidebarOnMobile: true });
+        return;
+      }
+
+      this.handleGitFileHistorySelection(this.currentFilePath, { closeSidebarOnMobile: true });
+    });
+
     this.elements.editNameButton?.addEventListener('click', () => {
       this.openDisplayNameDialog();
     });
@@ -389,6 +407,11 @@ export const uiFeature = {
 
   handleConnectionChange(state) {
     this.connectionState = state;
+    if (state?.firstConnection) {
+      this.recordFileOpenMetric?.('ws_connected', {
+        status: state.status,
+      });
+    }
     this.renderPresence();
 
     if (state.unreachable && !this.connectionHelpShown) {
@@ -398,6 +421,10 @@ export const uiFeature = {
   },
 
   openDisplayNameDialog({ mode = 'edit' } = {}) {
+    if (this.isIdentityManagedByAuth()) {
+      return;
+    }
+
     if (!this.isTabActive) {
       return;
     }
@@ -439,7 +466,12 @@ export const uiFeature = {
   },
 
   promptForDisplayNameIfNeeded() {
-    if (!this.isTabActive || this._hasPromptedForDisplayName || this.getStoredUserName()) {
+    if (
+      !this.isTabActive
+      || this._hasPromptedForDisplayName
+      || this.getStoredUserName()
+      || this.isIdentityManagedByAuth()
+    ) {
       return;
     }
 
@@ -450,6 +482,10 @@ export const uiFeature = {
   },
 
   handleDisplayNameSubmit() {
+    if (this.isIdentityManagedByAuth()) {
+      return;
+    }
+
     const input = this.elements.displayNameInput;
     const dialog = this.elements.displayNameDialog;
     if (!input || !dialog) return;
@@ -501,10 +537,21 @@ export const uiFeature = {
     const name = this.getCurrentUserName();
     el.textContent = name || 'Set name';
     el.classList.toggle('has-name', Boolean(name));
-    this.elements.editNameButton?.setAttribute(
-      'aria-label',
-      `${name || 'Set name'}. Change display name`,
-    );
+    if (!this.isIdentityManagedByAuth()) {
+      this.elements.editNameButton?.setAttribute(
+        'aria-label',
+        `${name || 'Set name'}. Change display name`,
+      );
+    }
+  },
+
+  syncIdentityManagementUi() {
+    const isManaged = this.isIdentityManagedByAuth();
+    this.elements.editNameButton?.classList.toggle('hidden', isManaged);
+    this.elements.editNameButton?.toggleAttribute('disabled', isManaged);
+    if (isManaged && this.elements.displayNameDialog?.open) {
+      this.elements.displayNameDialog.close();
+    }
   },
 
   toggleLineWrapping() {
@@ -534,6 +581,9 @@ export const uiFeature = {
     if (!this.lobby.provider) {
       this.lobby.connect();
     }
+    if (!this.workspaceSync.provider) {
+      this.workspaceSync.connect();
+    }
 
     if (wasInactive) {
       if (this.fileExplorerReady) {
@@ -547,13 +597,20 @@ export const uiFeature = {
     }
   },
 
-  handleTabBlocked({ reason } = {}) {
+  async handleTabBlocked({ reason } = {}) {
     const wasActive = this.isTabActive;
+    const blockedFilePath = this.currentFilePath;
+    const shouldPrepareExcalidrawDisconnect = Boolean(
+      blockedFilePath
+      && this.isExcalidrawFile?.(blockedFilePath),
+    );
+
     this.isTabActive = false;
     if (this.elements.displayNameDialog?.open) {
       this.elements.displayNameDialog.close();
     }
     this.lobby.disconnect();
+    this.workspaceSync.disconnect();
     this.globalUsers = [];
     this.chatMessages = [];
     this.chatMessageIds.clear();
@@ -562,9 +619,14 @@ export const uiFeature = {
     this.followedUserClientId = null;
     this.followedCursorSignature = '';
     this.connectionState = { status: 'disconnected', unreachable: false };
+    this.showTabLockOverlay({ reason });
+
+    if (shouldPrepareExcalidrawDisconnect) {
+      await this.excalidrawEmbed.prepareFileDisconnect(blockedFilePath);
+    }
+
     this.showEmptyState();
     this.renderChat();
-    this.showTabLockOverlay({ reason });
 
     if (wasActive && reason === 'taken-over') {
       this.toastController.show('Another tab took over this session');

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

@@ -1,4 +1,5 @@
 import {
+  getVaultFileKind,
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
   isMermaidFilePath,
@@ -28,9 +29,50 @@ export const workspaceFeature = {
   },
 
   getPreviewSource() {
+    const previewDocument = this.getStaticPreviewDocument?.();
+    const previewFilePath = previewDocument?.currentFilePath ?? previewDocument?.filePath ?? null;
+    if (previewDocument && previewFilePath && previewFilePath === this.currentFilePath) {
+      if (this.isMermaidFile(this.currentFilePath)) {
+        return this.createDiagramPreviewDocument('mermaid', previewDocument.content);
+      }
+
+      if (this.isPlantUmlFile(this.currentFilePath)) {
+        return this.createDiagramPreviewDocument('plantuml', previewDocument.content);
+      }
+
+      return String(previewDocument.content ?? '');
+    }
+
     return this.workspacePreviewController.getPreviewSource(this.currentFilePath);
   },
 
+  getStaticPreviewDocument() {
+    return this._staticPreviewDocument ?? null;
+  },
+
+  setStaticPreviewDocument(document) {
+    const normalizedFilePath = document?.filePath ?? document?.path ?? null;
+    const normalizedCurrentFilePath = document?.currentFilePath ?? normalizedFilePath;
+    this._staticPreviewDocument = document
+      ? {
+        content: String(document.content ?? ''),
+        currentFilePath: normalizedCurrentFilePath,
+        fileKind: document.fileKind ?? getVaultFileKind(normalizedFilePath),
+        filePath: normalizedFilePath,
+        hash: document.hash ?? null,
+      }
+      : null;
+  },
+
+  clearStaticPreviewDocument() {
+    this._staticPreviewDocument = null;
+  },
+
+  supportsFileHistory(filePath) {
+    const kind = getVaultFileKind(filePath);
+    return kind !== null && kind !== 'image';
+  },
+
   getDisplayName(filePath) {
     return stripVaultFileExtension(String(filePath ?? '')
       .split('/')
@@ -53,6 +95,10 @@ export const workspaceFeature = {
     this.workspacePreviewController.renderImageFilePreview(filePath);
   },
 
+  renderTextFilePreview(payload) {
+    this.workspacePreviewController.renderTextFilePreview(payload);
+  },
+
   createResizeHandler() {
     return this.workspacePreviewController.createResizeHandler(() => this.restoreSidebarState());
   },

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

@@ -38,6 +38,8 @@ export function bindAppShellElements(doc = document) {
     editorPage: doc.getElementById('editor-page'),
     diffPage: doc.getElementById('diff-page'),
     fileSearch: doc.getElementById('fileSearch'),
+    fileHistoryButton: doc.getElementById('fileHistoryBtn'),
+    fileHistoryButtonLabel: doc.getElementById('fileHistoryBtnLabel'),
     filesSidebarTab: doc.getElementById('filesSidebarTab'),
     gitSearch: doc.getElementById('gitSearch'),
     gitSearchInput: doc.getElementById('gitSearchInput'),

package/src/client/application/mermaid-preview-hydrator.js

@@ -561,7 +561,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   createZoomButton(label, ariaLabel) {
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'mermaid-zoom-btn diagram-preview-action-btn';
+    button.className = 'mermaid-zoom-btn ui-preview-action';
     button.setAttribute('aria-label', ariaLabel);
     button.title = ariaLabel;
     button.textContent = label;

package/src/client/application/plantuml-preview-hydrator.js

@@ -554,7 +554,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
   createToolButton(label, ariaLabel) {
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'plantuml-tool-btn diagram-preview-action-btn';
+    button.className = 'plantuml-tool-btn ui-preview-action';
     button.setAttribute('aria-label', ariaLabel);
     button.title = ariaLabel;
     button.textContent = label;