collabmd 0.1.21 → 0.1.25

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'),
@@ -74,6 +76,8 @@ export function bindAppShellElements(doc = document) {
     tabLockTitle: doc.getElementById('tabLockTitle'),
     toolbarCenter: doc.getElementById('toolbarCenter'),
     toolbarDiffBadge: doc.getElementById('toolbarDiffBadge'),
+    toolbarOverflowMenu: doc.getElementById('toolbarOverflowMenu'),
+    toolbarOverflowToggle: doc.getElementById('toolbarOverflowToggle'),
     sidebarTabs: doc.getElementById('sidebarTabs'),
   };
 }

package/src/client/application/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;

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

@@ -1,6 +1,14 @@
 import { FileOpenLifecycle } from './file-open-lifecycle.js';
 import { WorkspaceChromeController } from './workspace-chrome-controller.js';
 
+const BOOTSTRAP_RENDER_DELAY_MS = 150;
+
+function delay(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
 export class WorkspaceCoordinator {
   constructor({
     attachEditorScroller,
@@ -18,6 +26,7 @@ export class WorkspaceCoordinator {
     isMermaidFile,
     isPlantUmlFile,
     isTabActive,
+    loadBootstrapContent = null,
     loadEditorSessionClass,
     loadBacklinks,
     onBeforeFileOpen,
@@ -30,6 +39,7 @@ export class WorkspaceCoordinator {
     onImagePaste,
     onSelectionChange,
     onSessionAssigned = null,
+    onFileOpenMetric = null,
     onRenderExcalidrawPreview,
     onRenderImagePreview,
     onSyncWrapToggle,
@@ -58,6 +68,7 @@ export class WorkspaceCoordinator {
     this.isMermaidFile = isMermaidFile ?? (() => false);
     this.isPlantUmlFile = isPlantUmlFile ?? (() => false);
     this.isTabActive = isTabActive;
+    this.loadBootstrapContent = loadBootstrapContent;
     this.loadEditorSessionClassPort = loadEditorSessionClass;
     this.loadBacklinks = loadBacklinks;
     this.onBeforeFileOpen = onBeforeFileOpen;
@@ -70,6 +81,7 @@ export class WorkspaceCoordinator {
     this.onImagePaste = onImagePaste;
     this.onSelectionChange = onSelectionChange;
     this.onSessionAssigned = onSessionAssigned;
+    this.onFileOpenMetric = onFileOpenMetric;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
     this.onSyncWrapToggle = onSyncWrapToggle;
     this.onUpdateActiveFile = onUpdateActiveFile;
@@ -122,6 +134,14 @@ export class WorkspaceCoordinator {
     });
   }
 
+  reportFileOpenMetric(name, loadToken, data = {}) {
+    this.onFileOpenMetric?.(name, {
+      filePath: this.stateStore.get('currentFilePath'),
+      loadToken,
+      ...data,
+    });
+  }
+
   cleanupSession() {
     this.session?.destroy();
     this.session = null;
@@ -146,11 +166,13 @@ export class WorkspaceCoordinator {
     }
 
     const loadToken = this.stateStore.nextSessionLoadToken();
+    const openStartedAt = performance.now();
 
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
       resetConnectionState: !isExcalidraw && !isImage,
     });
+    this.reportFileOpenMetric('open_started', loadToken, { filePath });
 
     if (isExcalidraw || isImage) {
       this.onSessionAssigned?.(null);
@@ -198,37 +220,144 @@ export class WorkspaceCoordinator {
     this.onSessionAssigned?.(session);
 
     try {
-      await session.initialize(filePath);
+      let fileOpenReady = false;
+      let fileOpenFinalized = false;
+      let liveSyncComplete = false;
 
-      if (loadToken !== this.stateStore.get('sessionLoadToken')) {
-        session.destroy();
-        return;
-      }
+      const readySession = async (reason) => {
+        if (fileOpenReady || loadToken !== this.stateStore.get('sessionLoadToken')) {
+          return;
+        }
+
+        fileOpenReady = true;
+        this.lifecycle.attachSessionScroller(session);
+        session.applyTheme(this.getTheme());
+        this.chromeController.markFileOpenReady(session);
+        this.reportFileOpenMetric('editor_ready', loadToken, { reason });
+        session.requestMeasure();
+        await this.waitForNextPaint();
+
+        if (fileOpenFinalized || loadToken !== this.stateStore.get('sessionLoadToken')) {
+          return;
+        }
 
-      this.lifecycle.attachSessionScroller(session);
-      session.applyTheme(this.getTheme());
-      await session.waitForInitialSync();
-      session.ensureInitialContent?.();
+        fileOpenFinalized = true;
+        this.chromeController.finalizeFileOpen({
+          filePath,
+          isExcalidraw,
+          session,
+          supportsBacklinks: chromeState.supportsBacklinks,
+        });
+      };
+
+      const bootstrapPromise = this.loadBootstrapContent
+        ? (async () => {
+          this.reportFileOpenMetric('bootstrap_fetch_started', loadToken);
+          try {
+            const content = await this.loadBootstrapContent(filePath);
+            this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
+              found: content !== null,
+            });
+            return content;
+          } catch (error) {
+            this.reportFileOpenMetric('bootstrap_fetch_completed', loadToken, {
+              error: error.message,
+              found: false,
+            });
+            return null;
+          }
+        })()
+        : Promise.resolve(null);
+
+      const initializePromise = session.initialize(filePath);
+      const liveSyncPromise = (async () => {
+        await initializePromise;
+
+        if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+          return false;
+        }
+
+        await session.waitForInitialSync(null);
+        if (loadToken !== this.stateStore.get('sessionLoadToken')) {
+          return false;
+        }
+
+        liveSyncComplete = true;
+        session.activateCollaborativeView?.();
+        this.lifecycle.attachSessionScroller(session);
+        session.applyTheme(this.getTheme());
+        this.reportFileOpenMetric('initial_sync_complete', loadToken);
+        session.ensureInitialContent?.();
+        if (!fileOpenReady) {
+          await readySession('live-sync');
+        } else {
+          session.requestMeasure();
+        }
+        return true;
+      })();
+
+      const bootstrapVisibilityPromise = (async () => {
+        const bootstrapContent = await bootstrapPromise;
+        if (
+          bootstrapContent === null
+          || liveSyncComplete
+          || fileOpenReady
+          || loadToken !== this.stateStore.get('sessionLoadToken')
+        ) {
+          return false;
+        }
+
+        const elapsedMs = performance.now() - openStartedAt;
+        const remainingDelayMs = Math.max(0, BOOTSTRAP_RENDER_DELAY_MS - elapsedMs);
+        if (remainingDelayMs > 0) {
+          const winner = await Promise.race([
+            liveSyncPromise.then((didSync) => (didSync ? 'live-sync' : 'stale')),
+            delay(remainingDelayMs).then(() => 'timeout'),
+          ]);
+          if (winner === 'live-sync') {
+            return false;
+          }
+        }
+
+        if (
+          liveSyncComplete
+          || fileOpenReady
+          || loadToken !== this.stateStore.get('sessionLoadToken')
+        ) {
+          return false;
+        }
+
+        const didApplyBootstrap = session.showBootstrapContent({
+          content: bootstrapContent,
+          filePath,
+        });
+        if (!didApplyBootstrap && !session.hasBootstrapContent?.()) {
+          return false;
+        }
+
+        this.reportFileOpenMetric('bootstrap_shown', loadToken);
+        await readySession('bootstrap');
+        return true;
+      })();
+
+      await initializePromise;
 
       if (loadToken !== this.stateStore.get('sessionLoadToken')) {
         session.destroy();
         return;
       }
 
-      this.chromeController.markFileOpenReady(session);
-      session.requestMeasure();
-      await this.waitForNextPaint();
+      await Promise.all([liveSyncPromise, bootstrapVisibilityPromise]);
 
       if (loadToken !== this.stateStore.get('sessionLoadToken')) {
         session.destroy();
         return;
       }
-      this.chromeController.finalizeFileOpen({
-        filePath,
-        isExcalidraw,
-        session,
-        supportsBacklinks: chromeState.supportsBacklinks,
-      });
+
+      if (!fileOpenReady) {
+        session.ensureInitialContent?.();
+        await readySession('post-initialize');
+      }
     } catch (error) {
       console.error('[app] Failed to initialize editor:', error);
       session.destroy();

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

@@ -164,6 +164,40 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderTextFilePreview({ content = '' } = {}) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const shell = document.createElement('div');
+    shell.className = 'preview-shell';
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+    code.textContent = String(content ?? '');
+    pre.appendChild(code);
+    shell.appendChild(pre);
+
+    if (renderHost) {
+      renderHost.replaceChildren(shell);
+      renderHost.style.minHeight = '';
+    }
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.backlinksPanel.clear();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   createResizeHandler(restoreSidebarState) {
     let resizeTimer = null;
     return () => {

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

@@ -2,9 +2,11 @@ export class WorkspaceRouteController {
   constructor({
     backlinksPanel,
     clearInitialFileBootstrap,
+    clearStaticPreviewDocument = null,
     closeSidebarOnMobile,
     elements,
     excalidrawEmbed,
+    fileHistoryView = null,
     fileExplorer,
     getIsTabActive,
     getSessionLoadToken,
@@ -22,7 +24,11 @@ export class WorkspaceRouteController {
     setSessionLoadToken,
     setSidebarTab,
     setCurrentFilePath,
+    showGitCommit,
     showGitDiff,
+    showGitFileHistory,
+    showGitFilePreview,
+    showGitHistory,
     syncMainChrome,
     videoEmbed,
     workspaceCoordinator,
@@ -30,9 +36,11 @@ export class WorkspaceRouteController {
   }) {
     this.backlinksPanel = backlinksPanel;
     this.clearInitialFileBootstrap = clearInitialFileBootstrap;
+    this.clearStaticPreviewDocument = clearStaticPreviewDocument;
     this.closeSidebarOnMobile = closeSidebarOnMobile;
     this.elements = elements;
     this.excalidrawEmbed = excalidrawEmbed;
+    this.fileHistoryView = fileHistoryView;
     this.fileExplorer = fileExplorer;
     this.getIsTabActive = getIsTabActive;
     this.getSessionLoadToken = getSessionLoadToken;
@@ -50,7 +58,11 @@ export class WorkspaceRouteController {
     this.setSessionLoadToken = setSessionLoadToken;
     this.setSidebarTab = setSidebarTab;
     this.setCurrentFilePath = setCurrentFilePath;
+    this.showGitCommit = showGitCommit;
     this.showGitDiff = showGitDiff;
+    this.showGitFileHistory = showGitFileHistory;
+    this.showGitFilePreview = showGitFilePreview;
+    this.showGitHistory = showGitHistory;
     this.syncMainChrome = syncMainChrome;
     this.videoEmbed = videoEmbed;
     this.workspaceCoordinator = workspaceCoordinator;
@@ -76,13 +88,39 @@ export class WorkspaceRouteController {
       return;
     }
 
+    if (route.type === 'git-file-history') {
+      this.setSidebarTab('files');
+      await this.showGitFileHistory(route);
+      return;
+    }
+
+    if (route.type === 'git-file-preview') {
+      this.setSidebarTab('files');
+      await this.showGitFilePreview(route);
+      return;
+    }
+
+    if (route.type === 'git-history') {
+      this.setSidebarTab('git');
+      await this.showGitHistory();
+      return;
+    }
+
+    if (route.type === 'git-commit') {
+      this.setSidebarTab('git');
+      await this.showGitCommit(route);
+      return;
+    }
+
     this.setSidebarTab('files');
     await this.openFile(route.filePath);
   }
 
   showEmptyState() {
     this.gitDiffView.hide();
+    this.fileHistoryView?.hide?.();
     this.workspaceCoordinator.cleanupSession();
+    this.clearStaticPreviewDocument?.();
     this.setSession(null);
     this.setSessionLoadToken(this.getSessionLoadToken() + 1);
     this.clearInitialFileBootstrap();
@@ -113,8 +151,10 @@ export class WorkspaceRouteController {
   }
 
   showDiffState() {
+    this.fileHistoryView?.hide?.();
     this.setSessionLoadToken(this.getSessionLoadToken() + 1);
     this.clearInitialFileBootstrap();
+    this.clearStaticPreviewDocument?.();
     this.workspaceCoordinator.cleanupSession();
     this.setSession(null);
     this.resetPreviewMode();
@@ -141,10 +181,74 @@ export class WorkspaceRouteController {
     this.backlinksPanel.clear();
   }
 
+  showFileHistoryState(filePath) {
+    this.gitDiffView.hide();
+    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
+    this.clearInitialFileBootstrap();
+    this.clearStaticPreviewDocument?.();
+    this.workspaceCoordinator.cleanupSession();
+    this.setSession(null);
+    this.resetPreviewMode();
+    this.layoutController.reset();
+    this.setCurrentFilePath(filePath);
+    this.lobby.setCurrentFile(null);
+    this.fileExplorer.setActiveFile(filePath);
+
+    this.elements.emptyState?.classList.add('hidden');
+    this.elements.editorPage?.classList.add('hidden');
+    this.elements.diffPage?.classList.remove('hidden');
+    if (this.elements.previewContent) {
+      this.elements.previewContent.innerHTML = '';
+      this.elements.previewContent.dataset.renderPhase = 'ready';
+    }
+    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
+    this.resetPreviewSurface();
+
+    this.elements.outlineToggle?.classList.add('hidden');
+    this.elements.markdownToolbar?.classList.add('hidden');
+
+    this.renderAvatars();
+    this.renderPresence();
+    this.backlinksPanel.clear();
+  }
+
+  showPreviewOnlyState(filePath) {
+    this.gitDiffView.hide();
+    this.fileHistoryView?.hide?.();
+    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
+    this.clearInitialFileBootstrap();
+    this.clearStaticPreviewDocument?.();
+    this.workspaceCoordinator.cleanupSession();
+    this.setSession(null);
+    this.resetPreviewMode();
+    this.layoutController.reset();
+    this.setCurrentFilePath(filePath);
+    this.lobby.setCurrentFile(null);
+    this.fileExplorer.setActiveFile(filePath);
+
+    this.elements.emptyState?.classList.add('hidden');
+    this.elements.editorPage?.classList.remove('hidden');
+    this.elements.diffPage?.classList.add('hidden');
+    if (this.elements.previewContent) {
+      this.elements.previewContent.innerHTML = '';
+      this.elements.previewContent.dataset.renderPhase = 'ready';
+    }
+    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
+    this.resetPreviewSurface();
+
+    this.elements.markdownToolbar?.classList.add('hidden');
+
+    this.renderAvatars();
+    this.renderPresence();
+    this.backlinksPanel.clear();
+  }
+
   async openFile(filePath) {
     this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
+    this.fileHistoryView?.hide?.();
+    this.clearStaticPreviewDocument?.();
     this.syncMainChrome({ mode: 'editor' });
     await this.workspaceCoordinator.openFile(filePath);
     this.setSession(this.workspaceCoordinator.getSession());