collabmd 0.1.51 → 0.1.54

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

@@ -7,10 +7,27 @@ import {
   createMermaidPlaceholderCardWithMessage,
   createDiagramErrorPlaceholderCard,
   MERMAID_BATCH_SIZE,
+  MERMAID_RENDER_CACHE_LIMIT,
   normalizeDiagramError,
   normalizeMermaidSvg,
+  resolveSvgDimensions,
 } from './preview-diagram-utils.js';
 
+function parseCachedSvgMarkup(svgMarkup) {
+  try {
+    const template = document.createElement('template');
+    template.innerHTML = String(svgMarkup);
+    const svg = template.content?.querySelector?.('svg');
+    if (svg?.nodeName?.toLowerCase() === 'svg') {
+      return svg;
+    }
+  } catch {
+    // Fall through to a fresh render below.
+  }
+
+  return null;
+}
+
 export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   constructor(renderer, { loadFileSource = null } = {}) {
     super(renderer, {
@@ -35,6 +52,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     this.diagramChrome = renderer.diagramChrome;
     this.loader = null;
     this.runtime = null;
+    this.renderCache = new Map();
   }
 
   cancelHydration({ preserveActiveShell = false } = {}) {
@@ -45,6 +63,10 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   }
 
   applyTheme(theme) {
+    if (theme === this.currentTheme) {
+      return;
+    }
+
     this.currentTheme = theme;
     const mermaid = this.runtime;
     if (!mermaid) {
@@ -181,6 +203,16 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       const renderedSource = source;
       source = this.prepareSource(source);
 
+      const renderCacheKey = this.getRenderCacheKey(source);
+      if (this.tryMountCachedDiagram(shell, {
+        hydrationToken,
+        renderCacheKey,
+        renderedSource,
+        renderVersion,
+      })) {
+        return;
+      }
+
       shell.querySelector('.mermaid-placeholder-card')?.remove();
 
       const diagram = document.createElement('div');
@@ -208,7 +240,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
           return;
         }
 
-        this.enhanceDiagram(shell, diagram, renderedSource);
+        this.enhanceDiagram(shell, diagram, renderedSource, renderCacheKey);
         this.markShellHydrated(shell);
       } finally {
         renderHost.remove();
@@ -326,21 +358,30 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     }
   }
 
-  enhanceDiagram(shell, renderedDiagram, renderedSource = '') {
+  enhanceDiagram(shell, renderedDiagram, renderedSource = '', renderCacheKey = null) {
     const svg = renderedDiagram.querySelector('svg');
     if (!svg) {
       renderedDiagram.remove();
       return;
     }
     const { width: baseWidth, height: baseHeight } = normalizeMermaidSvg(svg);
+    if (renderCacheKey) {
+      // The markup is already normalized (viewBox/size set), so a cache hit
+      // can mount without another mermaid run or layout measurement.
+      this.storeRenderCache(renderCacheKey, svg.outerHTML);
+    }
 
+    renderedDiagram.remove();
+    this.mountDiagramSvg(shell, svg, { baseWidth, baseHeight, renderedSource });
+  }
+
+  mountDiagramSvg(shell, svg, { baseWidth, baseHeight, renderedSource = '' } = {}) {
     const exportFileNames = () => createDiagramExportFileNames({
       currentFilePath: this.renderer.getSourceFilePath?.() ?? '',
       diagramKind: 'mermaid',
       sourceLine: shell.getAttribute('data-source-line') || '',
       targetPath: shell.dataset.mermaidTarget || '',
     });
-    renderedDiagram.remove();
     this.diagramChrome.mount(shell, {
       baseHeight,
       baseWidth,
@@ -353,4 +394,49 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     shell._diagramRenderedSource = renderedSource;
   }
 
+  tryMountCachedDiagram(shell, {
+    hydrationToken,
+    renderCacheKey,
+    renderedSource = '',
+    renderVersion,
+  } = {}) {
+    const cachedSvgMarkup = this.renderCache.get(renderCacheKey) ?? null;
+    if (!cachedSvgMarkup) {
+      return false;
+    }
+
+    shell.querySelector('.mermaid-placeholder-card')?.remove();
+    const svg = parseCachedSvgMarkup(cachedSvgMarkup);
+    if (
+      this.isHydrationCurrent(renderVersion, shell, hydrationToken)
+      && svg
+    ) {
+      const { width, height } = resolveSvgDimensions(svg);
+      this.mountDiagramSvg(shell, svg, { baseWidth: width, baseHeight: height, renderedSource });
+      this.markShellHydrated(shell);
+      return true;
+    }
+
+    this.renderCache.delete(renderCacheKey);
+    return false;
+  }
+
+  getRenderCacheKey(preparedSource) {
+    return `${this.currentTheme}\n${preparedSource}`;
+  }
+
+  storeRenderCache(key, markup) {
+    if (!key || !markup) {
+      return;
+    }
+
+    if (this.renderCache.has(key)) {
+      this.renderCache.delete(key);
+    }
+    while (this.renderCache.size >= MERMAID_RENDER_CACHE_LIMIT) {
+      this.renderCache.delete(this.renderCache.keys().next().value);
+    }
+    this.renderCache.set(key, markup);
+  }
+
 }

package/src/client/application/preview-diagram-utils.js

@@ -1,5 +1,6 @@
 export const IDLE_RENDER_TIMEOUT_MS = 500;
 export const MERMAID_BATCH_SIZE = 2;
+export const MERMAID_RENDER_CACHE_LIMIT = 30;
 export const PLANTUML_BATCH_SIZE = 2;
 
 export {

package/src/client/application/preview-render-compiler.js

@@ -1,4 +1,5 @@
 import markdownIt from 'markdown-it';
+import { enableMarkdownMath } from '../domain/markdown-math.js';
 
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
@@ -389,6 +390,7 @@ function createMarkdownRenderer(fileList = [], {
     linkify: true,
     typographer: true,
   });
+  enableMarkdownMath(markdown);
 
   markdown.core.ruler.push('collabmd-source-lines', (state) => {
     state.tokens.forEach((token) => {

package/src/client/application/preview-render-executor.js

@@ -85,7 +85,10 @@ export class PreviewRenderExecutor {
 
     if (worker) {
       if (this.workerJob) {
-        this.reset('Superseded preview render');
+        // Reject the superseded job but keep the worker alive: the stale
+        // result is ignored by renderVersion in handleWorkerMessage, and
+        // respawning the worker per keystroke costs a module re-parse.
+        this.cancelWorkerJob('Superseded preview render');
       }
 
       const activeWorker = this.ensureWorker();

package/src/client/application/preview-render-profile.js

@@ -4,6 +4,7 @@ export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
 export const LARGE_DOCUMENT_DRAWIO_THRESHOLD = 8;
 export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
 export const DIAGRAM_RENDER_DEBOUNCE_MS = 300;
+export const DEFAULT_RENDER_DEBOUNCE_MS = 250;
 
 function countMatches(source, pattern) {
   return source.match(pattern)?.length ?? 0;
@@ -38,30 +39,25 @@ export function isLargeDocumentStats(stats) {
 }
 
 export function getRenderProfile(markdownText = '') {
-  const source = String(markdownText);
-  const hasMermaid = /(^|\n)```mermaid\b/i.test(source)
-    || /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasDrawioEmbed = /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasExcalidrawEmbed = /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/i.test(source);
-  const hasPlantUml = /(^|\n)```(?:plantuml|puml)\b/i.test(source)
-    || /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/i.test(source);
-  const isLargeByLength = source.length >= LARGE_DOCUMENT_CHAR_THRESHOLD;
+  // Reuse the single complexity scan instead of re-running the same regexes:
+  // this previously cost ~10 full-source scans per keystroke.
+  const stats = analyzeMarkdownComplexity(markdownText);
 
-  if (isLargeByLength) {
+  if (stats.chars >= LARGE_DOCUMENT_CHAR_THRESHOLD) {
     return {
       debounceMs: 500,
       deferUntilIdle: true,
     };
   }
 
-  if (hasMermaid || hasPlantUml) {
+  if (stats.mermaidBlocks > 0 || stats.plantumlBlocks > 0) {
     return {
       debounceMs: DIAGRAM_RENDER_DEBOUNCE_MS,
       deferUntilIdle: false,
     };
   }
 
-  if (hasDrawioEmbed || hasExcalidrawEmbed) {
+  if (stats.drawioEmbeds > 0 || stats.excalidrawEmbeds > 0) {
     return {
       debounceMs: 0,
       deferUntilIdle: false,
@@ -69,7 +65,7 @@ export function getRenderProfile(markdownText = '') {
   }
 
   return {
-    debounceMs: 100,
+    debounceMs: DEFAULT_RENDER_DEBOUNCE_MS,
     deferUntilIdle: false,
   };
 }

package/src/client/application/preview-renderer.js

@@ -313,6 +313,7 @@ export class PreviewRenderer {
 
 
   commitBaseRender({ html, stats }, renderVersion) {
+    const scrollTop = this.previewContainer?.scrollTop ?? 0;
     this.activeRenderVersion = renderVersion;
     this.readyRenderVersion = 0;
     this.currentStats = stats;
@@ -334,6 +335,8 @@ export class PreviewRenderer {
     this.applyFrontmatterState();
     this.mermaidHydrator.reconcileHydratedShells();
     this.plantUmlHydrator.reconcileHydratedShells();
+    // Detaching diagrams can temporarily shrink the document and clamp scrolling.
+    if (this.previewContainer) this.previewContainer.scrollTop = scrollTop;
     this.setPhase('base');
 
     this.outlineController.refresh();

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

@@ -221,12 +221,21 @@ export class CollabMdAppShell {
             signal: options?.signal,
           })
         : callAgentTool(name, input, options),
-      getActiveContext: () => ({
-        activeDiagramPath: this.isExcalidrawFile(this.currentFilePath)
-          ? this.currentFilePath
-          : null,
-        activePath: this.currentFilePath,
-      }),
+      getActiveContext: async () => {
+        const activePath = this.currentFilePath;
+        const session = this.session;
+        const context = session?.activeFilePath === activePath
+          ? await session.getAgentContext()
+          : null;
+        if (activePath !== this.currentFilePath || session !== this.session) {
+          throw new Error('Active document changed; request active context again');
+        }
+        return {
+          ...context,
+          activeDiagramPath: this.isExcalidrawFile(activePath) ? activePath : null,
+          activePath,
+        };
+      },
       getIsTabActive: () => this.isTabActive,
       onDidMutate: () => {
         this.toastController.show('Agent-assisted Vault change applied. Review it before committing.');
@@ -273,7 +282,9 @@ export class CollabMdAppShell {
             return;
           }
           setActiveVaultId(vaultId);
-          window.location.reload();
+          const url = new URL(window.location.href);
+          url.searchParams.set('vault', vaultId);
+          window.location.assign(url.toString());
         },
       },
     });
@@ -290,7 +301,7 @@ export class CollabMdAppShell {
       enabled: this.runtimeConfig.gitEnabled !== false,
       gitApiClient: this.gitApiClient,
       onCommitStaged: () => this.openGitCommitDialog(),
-      onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenPullBackup: (backupId) => backupId && window.open(gitApiClient.getPullBackupSummaryUrl(backupId), '_blank', 'noopener,noreferrer'),
       onPullBranch: () => this.pullGitBranch(),
       onPushBranch: () => this.pushGitBranch(),
       onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),

package/src/client/browser-utils.js

@@ -83,7 +83,7 @@ export function isNearViewport(element, root, marginPx) {
 }
 
 export function downloadBlob(blob, fileName, {
-  removeDelayMs = 30_000,
+  removeDelayMs = 1000,
   revokeDelayMs = removeDelayMs,
 } = {}) {
   const windowRef = getWindowRef();
@@ -119,3 +119,24 @@ export function parseDownloadFileName(contentDisposition = '', fallbackName = 'd
   const asciiMatch = String(contentDisposition).match(/filename="([^"]+)"/iu);
   return asciiMatch?.[1] || fallbackName;
 }
+
+export async function copyTextToClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  // HTTP LAN workspaces do not expose the Clipboard API.
+  const previousFocus = document.activeElement;
+  const input = document.createElement('textarea');
+  input.value = text;
+  input.className = 'clipboard-fallback';
+  document.body.appendChild(input);
+  input.select();
+  try {
+    if (!document.execCommand('copy')) throw new Error('Copy failed');
+  } finally {
+    input.remove();
+    previousFocus?.focus();
+  }
+}

package/src/client/domain/excalidraw-scene.js

@@ -84,17 +84,6 @@ export function createExcalidrawExportOptions(scene, {
   };
 }
 
-export function buildStoredScene(elements, appState, files) {
-  return normalizeScene({
-    elements: elements.filter((element) => !element.isDeleted),
-    appState: {
-      gridSize: appState.gridSize ?? null,
-      viewBackgroundColor: appState.viewBackgroundColor ?? '#ffffff',
-    },
-    files: files || {},
-  });
-}
-
 export function buildLiveCollaborationScene(elements, appState, files) {
   return normalizeScene({
     elements: Array.isArray(elements) ? elements : [],

package/src/client/domain/file-search.js

@@ -4,7 +4,7 @@ function createRangeIndices(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
 
-function findFuzzyMatch(text, query) {
+export function findFuzzyMatch(text, query) {
   const indices = [];
   let queryIndex = 0;
   let score = 0;
@@ -40,6 +40,7 @@ export function createFileSearchEntry(filePath) {
   const rawFileName = String(filePath ?? '').split('/').pop() || String(filePath ?? '');
 
   return {
+    dirPath: displayName.includes('/') ? displayName.slice(0, displayName.lastIndexOf('/')) : '',
     displayName,
     fileName,
     filePath,

package/src/client/domain/highlight-runtime.js

@@ -38,10 +38,37 @@ hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
 
 export { hljs };
 
+// Unchanged fences re-highlight on every preview compile while typing, so
+// memoize results. Huge one-off sources bypass the cache to bound memory.
+const HIGHLIGHT_CACHE_LIMIT = 200;
+const HIGHLIGHT_CACHE_MAX_SOURCE_CHARS = 20000;
+const highlightCache = new Map();
+
+export function getHighlightCacheSize() {
+  return highlightCache.size;
+}
+
 export function highlightFence(source, language, { ignoreIllegals = false } = {}) {
-  if (language && hljs.getLanguage(language)) {
-    return hljs.highlight(source, { ignoreIllegals, language }).value;
+  const text = String(source);
+  const cacheable = text.length <= HIGHLIGHT_CACHE_MAX_SOURCE_CHARS;
+  const cacheKey = cacheable ? `${language ?? ''}\n${ignoreIllegals ? 1 : 0}\n${text}` : null;
+  if (cacheKey) {
+    const cached = highlightCache.get(cacheKey);
+    if (cached !== undefined) {
+      return cached;
+    }
+  }
+
+  const result = language && hljs.getLanguage(language)
+    ? hljs.highlight(text, { ignoreIllegals, language }).value
+    : hljs.highlightAuto(text, AUTO_HIGHLIGHT_LANGUAGES).value;
+
+  if (cacheKey) {
+    if (highlightCache.size >= HIGHLIGHT_CACHE_LIMIT) {
+      highlightCache.delete(highlightCache.keys().next().value);
+    }
+    highlightCache.set(cacheKey, result);
   }
 
-  return hljs.highlightAuto(source, AUTO_HIGHLIGHT_LANGUAGES).value;
+  return result;
 }

package/src/client/domain/markdown-math.js

@@ -0,0 +1,14 @@
+import katex from 'katex';
+import katexPluginModule from '@vscode/markdown-it-katex';
+
+const katexPlugin = katexPluginModule?.default ?? katexPluginModule;
+
+const RENDERED_MATH_PATTERN = /class="katex(?:-block|-error)?"/u;
+
+export function enableMarkdownMath(markdown) {
+  markdown.use(katexPlugin, { katex, strict: false, throwOnError: false, trust: false });
+}
+
+export function hasRenderedMath(html = '') {
+  return RENDERED_MATH_PATTERN.test(String(html ?? ''));
+}

package/src/client/domain/runtime-paths.js

@@ -76,6 +76,10 @@ export function getActiveVaultId(config = getClientRuntimeConfig()) {
   if (vaults.length === 0) {
     return null;
   }
+  const requested = new URLSearchParams(globalThis.window?.location?.search ?? '').get('vault');
+  if (requested && vaults.includes(requested)) {
+    return requested;
+  }
   try {
     const stored = globalThis.window?.localStorage?.getItem(ACTIVE_VAULT_STORAGE_KEY);
     if (stored && vaults.includes(stored)) {

package/src/client/export/export-host.js

@@ -26,7 +26,6 @@ function createBootstrapPayload({
   format,
   jobId,
   markdownText = '',
-  theme = 'light',
   title = '',
 }) {
   return {
@@ -39,7 +38,8 @@ function createBootstrapPayload({
     jobId,
     markdownText: String(markdownText ?? ''),
     source: EXPORT_HOST_SOURCE,
-    theme: theme === 'dark' ? 'dark' : 'light',
+    // Exports always render light so HTML, DOCX, and PDF output stays consistent.
+    theme: 'light',
     title: String(title ?? ''),
     type: 'bootstrap',
   };
@@ -154,11 +154,7 @@ async function startExport(payload) {
         notifyError: true,
       });
     }, EXPORT_JOB_CLOSE_POLL_MS),
-    payload: createBootstrapPayload({
-      ...payload,
-      jobId,
-      theme: document.documentElement.dataset.theme,
-    }),
+    payload: createBootstrapPayload({ ...payload, jobId }),
     timeoutId: window.setTimeout(() => {
       finishPendingJob(jobId, {
         message: 'Export timed out before it completed',