collabmd 0.1.43 → 0.1.44

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

@@ -1,10 +1,12 @@
 import {
   cancelIdleRender,
+  createDiagramErrorPlaceholderCard,
   IDLE_RENDER_TIMEOUT_MS,
   isNearViewport,
   requestIdleRender,
   shouldPreserveHydratedDiagram,
   syncAttribute,
+  normalizeDiagramError,
 } from './preview-diagram-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
@@ -49,8 +51,10 @@ export class DiagramPreviewHydrator {
     this.idleId = null;
     this.pendingShells = [];
     this.hydrationInProgress = false;
+    this.hydrationToken = 0;
+    this.hydrationRenderVersion = null;
     this.instanceCounter = 0;
-    this.preservedShells = new Map();
+    this.preservedShells = [];
     this.fileInflightRequests = new Map();
   }
 
@@ -72,10 +76,12 @@ export class DiagramPreviewHydrator {
 
   destroy() {
     this.cancelHydration();
-    this.preservedShells.clear();
+    this.clearPreservedShells();
   }
 
   cancelHydration() {
+    this.hydrationToken += 1;
+    this.hydrationRenderVersion = null;
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
@@ -93,7 +99,39 @@ export class DiagramPreviewHydrator {
   }
 
   clearPreservedShells() {
-    this.preservedShells.clear();
+    this.preservedShells.forEach(({ shell }) => {
+      this.renderer.diagramChrome?.destroyShell?.(shell);
+    });
+    this.preservedShells.length = 0;
+  }
+
+  getPreviewShells() {
+    const previewElement = this.renderer.previewElement;
+    if (!previewElement) {
+      return [];
+    }
+
+    const documentShells = previewElement.ownerDocument?.querySelectorAll?.(this.shellSelector);
+    if (documentShells) {
+      return Array.from(documentShells);
+    }
+
+    return Array.from(previewElement.querySelectorAll(this.shellSelector));
+  }
+
+  getPreservationIdentity(shell) {
+    const sourceLine = shell?.getAttribute?.(this.attributeNames.sourceLine);
+    // ponytail: source-line identity can miss blocks shifted by earlier edits.
+    // Upgrade to persistent block IDs if structural tracking becomes necessary.
+    return sourceLine ? `${this.shellClassName}:${sourceLine}` : null;
+  }
+
+  isShellRenderable(shell) {
+    return this.isShellHydrated(shell) || shell?.getAttribute?.('data-diagram-output') === 'true';
+  }
+
+  isShellError(shell) {
+    return shell?.getAttribute?.('data-diagram-state') === 'error';
   }
 
   hasPendingWork() {
@@ -101,17 +139,13 @@ export class DiagramPreviewHydrator {
   }
 
   preserveHydratedShellsForCommit() {
-    this.preservedShells.clear();
+    this.preservedShells.length = 0;
     const previewElement = this.renderer.previewElement;
     if (!previewElement) {
       return;
     }
 
-    Array.from(
-      previewElement.querySelectorAll(
-        `${this.shellSelector}[${this.attributeNames.hydrated}="true"][${this.attributeNames.key}]`,
-      ),
-    ).forEach((shell) => {
+    this.getPreviewShells().filter((shell) => this.isShellRenderable(shell)).forEach((shell) => {
       const key = shell.dataset[this.datasetKeys.key];
       const source = shell.querySelector(this.sourceSelector)?.textContent ?? '';
       const target = shell.dataset[this.datasetKeys.target] ?? '';
@@ -120,11 +154,13 @@ export class DiagramPreviewHydrator {
       }
 
       if (shell.isConnected) {
+        this.renderer.diagramChrome?.captureShellViewState?.(shell);
         shell.remove();
       }
 
-      this.preservedShells.set(key, {
+      this.preservedShells.push({
         key,
+        identity: this.getPreservationIdentity(shell),
         shell,
         source,
         target,
@@ -134,43 +170,67 @@ export class DiagramPreviewHydrator {
 
   reconcileHydratedShells() {
     const previewElement = this.renderer.previewElement;
-    if (!previewElement || this.preservedShells.size === 0) {
-      this.preservedShells.clear();
+    if (!previewElement || this.preservedShells.length === 0) {
+      this.clearPreservedShells();
       return;
     }
 
     let restoredMaximizedShell = false;
     Array.from(previewElement.querySelectorAll(`${this.shellSelector}[${this.attributeNames.key}]`)).forEach((nextShell) => {
       const key = nextShell.dataset[this.datasetKeys.key];
-      const preservedEntry = key ? this.preservedShells.get(key) : null;
-      if (!preservedEntry) {
+      let preservedIndex = key
+        ? this.preservedShells.findIndex((entry) => entry.key === key)
+        : -1;
+      if (preservedIndex === -1) {
+        const identity = this.getPreservationIdentity(nextShell);
+        // ponytail: diagram counts are small; index entries if reconciliation becomes measurable.
+        preservedIndex = identity
+          ? this.preservedShells.findIndex((entry) => entry.identity === identity)
+          : -1;
+      }
+      if (preservedIndex === -1) {
         return;
       }
+      const preservedEntry = this.preservedShells[preservedIndex];
 
       const nextSource = nextShell.querySelector(this.sourceSelector)?.textContent ?? '';
       const nextTarget = nextShell.dataset[this.datasetKeys.target] ?? '';
+      const canPreserveCurrentOutput = this.isShellRenderable(preservedEntry.shell)
+        && nextSource !== preservedEntry.source
+        && !nextTarget;
       if (!shouldPreserveHydratedDiagram({
         nextSource,
         nextTarget,
         preservedSource: preservedEntry.source,
         preservedTarget: preservedEntry.target,
-      })) {
+      }) && !canPreserveCurrentOutput) {
         return;
       }
 
-      this.syncPreservedShell(preservedEntry.shell, nextShell);
+      this.syncPreservedShell(preservedEntry.shell, nextShell, {
+        sourceChanged: canPreserveCurrentOutput,
+      });
       nextShell.replaceWith(preservedEntry.shell);
+      const viewState = this.renderer.diagramChrome?.getShellViewState?.(preservedEntry.shell);
+      const frame = preservedEntry.shell.querySelector('.diagram-preview-frame');
+      if (viewState && frame) {
+        frame.scrollLeft = viewState.scrollLeft ?? 0;
+        frame.scrollTop = viewState.scrollTop ?? 0;
+      }
       restoredMaximizedShell = restoredMaximizedShell || preservedEntry.shell.classList.contains('is-maximized');
-      this.preservedShells.delete(key);
+      this.preservedShells.splice(preservedIndex, 1);
     });
 
-    this.preservedShells.clear();
+    this.preservedShells.forEach(({ shell }) => {
+      this.renderer.diagramChrome?.destroyShell?.(shell);
+    });
+    this.preservedShells.length = 0;
     this.handleReconcile({ restoredMaximizedShell });
   }
 
   handleReconcile() {}
 
-  syncPreservedShell(preservedShell, nextShell) {
+  syncPreservedShell(preservedShell, nextShell, { sourceChanged = false } = {}) {
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceLine);
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceLineEnd);
     syncAttribute(preservedShell, nextShell, this.attributeNames.key);
@@ -179,7 +239,6 @@ export class DiagramPreviewHydrator {
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceHash);
 
     preservedShell.classList.add(this.shellClassName);
-    preservedShell.dataset[this.datasetKeys.hydrated] = 'true';
     this.removeDatasetValue(preservedShell, 'queued');
 
     const nextSourceNode = nextShell.querySelector(this.sourceSelector);
@@ -197,6 +256,125 @@ export class DiagramPreviewHydrator {
       }
       preservedSourceNode.hidden = true;
     }
+
+    if (sourceChanged) {
+      this.markShellPending(preservedShell);
+      return;
+    }
+
+    if (this.isShellError(preservedShell)) {
+      preservedShell.dataset[this.datasetKeys.hydrated] = 'true';
+      return;
+    }
+
+    this.markShellHydrated(preservedShell);
+  }
+
+  getShellErrorCard(shell) {
+    return shell?.querySelector?.(':scope > .diagram-preview-error-card') ?? null;
+  }
+
+  notifyShellLayoutChange() {
+    this.renderer.onPreviewLayoutChange?.({
+      renderVersion: this.renderer.activeRenderVersion,
+    });
+  }
+
+  clearShellErrorCard(shell) {
+    if (!shell) {
+      return;
+    }
+
+    this.getShellErrorCard(shell)?.remove?.();
+    this.notifyShellLayoutChange();
+  }
+
+  getShellLabel(shell) {
+    return shell?.dataset?.[this.datasetKeys.label] || `${this.filePathLabel} diagram`;
+  }
+
+  markShellRendered(shell) {
+    if (!shell) {
+      return;
+    }
+
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.removeAttribute('data-diagram-state');
+    shell.removeAttribute('aria-busy');
+    this.clearShellErrorCard(shell);
+  }
+
+  markShellPending(shell) {
+    if (!this.isShellRenderable(shell)) {
+      return false;
+    }
+
+    this.removeDatasetValue(shell, 'hydrated');
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.setAttribute('data-diagram-state', 'pending');
+    shell.setAttribute('aria-busy', 'true');
+    if (this.getShellErrorCard(shell)) {
+      this.clearShellErrorCard(shell);
+    }
+    return true;
+  }
+
+  markShellError(shell, error) {
+    if (!this.isShellRenderable(shell)) {
+      return false;
+    }
+
+    const message = normalizeDiagramError(error);
+    shell.dataset[this.datasetKeys.hydrated] = 'true';
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.setAttribute('data-diagram-state', 'error');
+    shell.removeAttribute('aria-busy');
+    this.getShellErrorCard(shell)?.remove?.();
+    const kind = this.shellClassName.replace(/-shell$/, '');
+    shell.append(createDiagramErrorPlaceholderCard({
+      key: shell.dataset[this.datasetKeys.key],
+      kind,
+      label: this.getShellLabel(shell),
+      message,
+      subtitle: 'Showing the last valid result.',
+    }));
+    this.notifyShellLayoutChange();
+    return true;
+  }
+
+  clearShellOutput(shell) {
+    this.removeDatasetValue(shell, 'hydrated');
+    shell?.removeAttribute?.('data-diagram-output');
+    shell?.removeAttribute?.('data-diagram-state');
+    shell?.removeAttribute?.('aria-busy');
+    this.clearShellErrorCard(shell);
+  }
+
+  markPending() {
+    this.cancelHydration();
+    this.getPreviewShells().filter((shell) => this.isShellRenderable(shell)).forEach((shell) => {
+      this.markShellPending(shell);
+    });
+  }
+
+  retryShell(shell) {
+    if (!shell?.isConnected) {
+      return;
+    }
+
+    this.removeDatasetValue(shell, 'hydrated');
+    this.markShellPending(shell);
+    this.enqueueShell(shell, { prioritize: true });
+  }
+
+  isHydrationCurrent(renderVersion, shell, hydrationToken = this.hydrationToken) {
+    return Boolean(
+      shell?.isConnected
+      && hydrationToken === this.hydrationToken
+      && (renderVersion == null
+        || (renderVersion === this.hydrationRenderVersion
+          && renderVersion === this.renderer.activeRenderVersion)),
+    );
   }
 
   setupHydration(renderVersion) {
@@ -211,6 +389,10 @@ export class DiagramPreviewHydrator {
       return 0;
     }
 
+    this.hydrationToken += 1;
+    const hydrationToken = this.hydrationToken;
+    this.hydrationRenderVersion = renderVersion;
+
     this.observer = this.intersectionObserverFactory((entries) => {
       entries.forEach((entry) => {
         if (!entry.isIntersecting) {
@@ -227,7 +409,7 @@ export class DiagramPreviewHydrator {
     shells.forEach((shell) => this.observer.observe(shell));
 
     this.requestAnimationFrameFn(() => {
-      if (renderVersion !== this.renderer.activeRenderVersion) {
+      if (!this.isHydrationCurrent(renderVersion, previewElement, hydrationToken)) {
         return;
       }
 
@@ -289,6 +471,9 @@ export class DiagramPreviewHydrator {
       return;
     }
 
+    const hydrationToken = this.hydrationToken;
+    const renderVersion = this.hydrationRenderVersion;
+
     const shells = [];
     while (this.pendingShells.length > 0 && shells.length < this.batchSize) {
       const nextShell = this.pendingShells.shift();
@@ -312,6 +497,9 @@ export class DiagramPreviewHydrator {
     try {
       batchContext = await this.prepareHydrationBatch(shells);
     } catch (error) {
+      if (hydrationToken !== this.hydrationToken) {
+        return;
+      }
       this.handlePrepareHydrationBatchError(shells, error);
       this.hydrationInProgress = false;
       this.renderer.updateHydrationPhase();
@@ -319,9 +507,15 @@ export class DiagramPreviewHydrator {
     }
 
     for (const shell of shells) {
-      await this.hydrateShell(shell, batchContext);
+      if (hydrationToken !== this.hydrationToken) {
+        return;
+      }
+      await this.hydrateShell(shell, batchContext, { hydrationToken, renderVersion });
     }
 
+    if (hydrationToken !== this.hydrationToken) {
+      return;
+    }
     this.hydrationInProgress = false;
 
     if (this.pendingShells.length > 0) {
@@ -342,6 +536,7 @@ export class DiagramPreviewHydrator {
   }
 
   markShellHydrated(shell) {
+    this.markShellRendered(shell);
     shell.dataset[this.datasetKeys.hydrated] = 'true';
     shell.dataset[this.datasetKeys.instanceId] = String(++this.instanceCounter);
   }

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

@@ -4,9 +4,10 @@ import {
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
-  createMermaidPlaceholderCard,
   createMermaidPlaceholderCardWithMessage,
+  createDiagramErrorPlaceholderCard,
   MERMAID_BATCH_SIZE,
+  normalizeDiagramError,
   normalizeMermaidSvg,
 } from './preview-diagram-utils.js';
 
@@ -40,12 +41,14 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
   destroy() {
     this.cancelHydration();
-    this.preservedShells.clear();
+    this.clearPreservedShells();
   }
 
-  cancelHydration() {
+  cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
-    this.diagramChrome?.cancelActiveShell?.('mermaid');
+    if (!preserveActiveShell) {
+      this.diagramChrome?.cancelActiveShell?.('mermaid');
+    }
   }
 
   applyTheme(theme) {
@@ -100,7 +103,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       return this.loader;
     }
 
-    this.loader = import('../mermaid-runtime.js')
+    this.loader = import('mermaid')
       .then((module) => {
         const mermaid = module?.default;
         if (!mermaid) {
@@ -147,11 +150,15 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     return renderHost;
   }
 
-  async hydrateShell(shell, mermaid) {
+  async hydrateShell(shell, mermaid, { hydrationToken, renderVersion } = {}) {
     if (!mermaid || !shell?.isConnected || this.isShellHydrated(shell)) {
       return;
     }
 
+    if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+      return;
+    }
+
     let sourceNode = shell.querySelector('.mermaid-source');
     if (!sourceNode) {
       sourceNode = document.createElement('span');
@@ -174,6 +181,11 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         throw new Error(shell.dataset.mermaidTarget ? 'Mermaid file is empty' : 'Mermaid source is empty');
       }
 
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      const renderedSource = source;
       source = this.prepareSource(source);
 
       shell.querySelector('.mermaid-placeholder-card')?.remove();
@@ -195,24 +207,41 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       try {
         renderHost.appendChild(diagram);
         await mermaid.run({ nodes: [diagram] });
-        if (!diagram.isConnected || diagram.parentElement !== renderHost || !shell.isConnected) {
+        if (
+          !this.isHydrationCurrent(renderVersion, shell, hydrationToken)
+          || !diagram.isConnected
+          || diagram.parentElement !== renderHost
+        ) {
           return;
         }
 
-        this.enhanceDiagram(shell, diagram);
+        this.enhanceDiagram(shell, diagram, renderedSource);
         this.markShellHydrated(shell);
       } finally {
         renderHost.remove();
       }
     } catch (error) {
       console.warn('[preview] Mermaid render failed:', error);
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      if (this.markShellError(shell, error)) {
+        return;
+      }
+
+      this.diagramChrome?.destroyShell?.(shell);
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
       shell.querySelector(':scope > .mermaid-frame')?.remove();
       shell.querySelector(':scope > .mermaid-render-node')?.remove();
       if (!shell.querySelector('.mermaid-placeholder-card')) {
-        sourceNode?.after(createMermaidPlaceholderCardWithMessage(shell.dataset.mermaidKey || 'mermaid', {
+        const key = shell.dataset.mermaidKey || 'mermaid';
+        const message = normalizeDiagramError(error);
+        sourceNode?.after(createDiagramErrorPlaceholderCard({
+          key,
+          kind: 'mermaid',
           label: shell.dataset.mermaidLabel || 'Mermaid diagram',
-          message: error instanceof Error ? error.message : 'Render failed',
+          message,
         }));
       }
     }
@@ -281,12 +310,12 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
     hydratedShells.forEach((shell) => {
       this.diagramChrome?.destroyShell?.(shell);
-      shell.removeAttribute('data-mermaid-hydrated');
+      this.clearShellOutput(shell);
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
       shell.querySelector(':scope > .mermaid-frame')?.remove();
       shell.querySelector(':scope > .mermaid-render-node')?.remove();
       if (!shell.querySelector('.mermaid-placeholder-card')) {
-        shell.querySelector('.mermaid-source')?.after(createMermaidPlaceholderCard(shell.dataset.mermaidKey || 'mermaid'));
+        shell.querySelector('.mermaid-source')?.after(createMermaidPlaceholderCardWithMessage(shell.dataset.mermaidKey || 'mermaid'));
       }
       this.enqueueShell(shell, { prioritize: true });
     });
@@ -295,14 +324,16 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   async renderExportSvgMarkup(shell) {
     const mermaid = await this.ensureMermaid();
     try {
-      const source = shell.querySelector('.mermaid-source')?.textContent ?? '';
+      const source = shell._diagramRenderedSource
+        ?? shell.querySelector('.mermaid-source')?.textContent
+        ?? '';
       return await renderMermaidExportSvgMarkup(mermaid, source);
     } finally {
       this.configureMermaid(mermaid);
     }
   }
 
-  enhanceDiagram(shell, renderedDiagram) {
+  enhanceDiagram(shell, renderedDiagram, renderedSource = '') {
     const svg = renderedDiagram.querySelector('svg');
     if (!svg) {
       renderedDiagram.remove();
@@ -326,6 +357,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       kind: 'mermaid',
       sourceSelector: '.mermaid-source',
     });
+    shell._diagramRenderedSource = renderedSource;
   }
 
   scheduleActiveRefit() {

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

@@ -4,9 +4,11 @@ import {
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
+  createDiagramErrorPlaceholderCard,
   createPlantUmlPlaceholderCard,
   getSvgSize,
   PLANTUML_BATCH_SIZE,
+  normalizeDiagramError,
   sanitizeSvgMarkup,
 } from './preview-diagram-utils.js';
 
@@ -39,12 +41,14 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
   destroy() {
     this.cancelHydration();
-    this.preservedShells.clear();
+    this.clearPreservedShells();
   }
 
-  cancelHydration() {
+  cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
-    this.diagramChrome?.cancelActiveShell?.('plantuml');
+    if (!preserveActiveShell) {
+      this.diagramChrome?.cancelActiveShell?.('plantuml');
+    }
   }
 
   scheduleActiveRefit() {
@@ -58,11 +62,15 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     this.diagramChrome?.syncActiveShell?.();
   }
 
-  async hydrateShell(shell) {
+  async hydrateShell(shell, _batchContext, { hydrationToken, renderVersion } = {}) {
     if (!shell?.isConnected || this.isShellHydrated(shell)) {
       return;
     }
 
+    if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+      return;
+    }
+
     let sourceNode = shell.querySelector('.plantuml-source');
     if (!sourceNode) {
       sourceNode = document.createElement('span');
@@ -87,9 +95,13 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         throw new Error(shell.dataset.plantumlTarget ? 'PlantUML file is empty' : 'PlantUML source is empty');
       }
 
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
       const svgMarkup = await this.fetchSvg(source);
 
-      if (!shell.isConnected) {
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
         return;
       }
 
@@ -97,13 +109,25 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       this.markShellHydrated(shell);
     } catch (error) {
       console.warn('[preview] PlantUML render failed:', error);
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      if (this.markShellError(shell, error)) {
+        return;
+      }
+
+      const key = shell.dataset.plantumlKey || 'plantuml';
+      const message = normalizeDiagramError(error);
       shell.querySelector(':scope > .plantuml-toolbar')?.remove();
       shell.querySelector(':scope > .plantuml-frame')?.remove();
       if (!shell.querySelector('.plantuml-placeholder-card')) {
-        sourceNode?.after(createPlantUmlPlaceholderCard(
-          shell.dataset.plantumlKey || 'plantuml',
-          error instanceof Error ? error.message : 'Render failed',
-        ));
+        sourceNode?.after(createDiagramErrorPlaceholderCard({
+          key,
+          kind: 'plantuml',
+          label: shell.dataset.plantumlLabel || 'PlantUML diagram',
+          message,
+        }));
       }
     }
   }
@@ -141,7 +165,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
     this.diagramChrome?.destroyShell?.(shell);
 
-    shell.removeAttribute('data-plantuml-hydrated');
+    this.clearShellOutput(shell);
     shell.removeAttribute('data-plantuml-instance-id');
     shell.removeAttribute('data-plantuml-queued');
     shell.classList.remove('is-maximized');