collabmd 0.1.47 → 0.1.49

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

@@ -10,11 +10,12 @@
  * @property {string | null} followedUserClientId
  * @property {string} followedCursorSignature
  * @property {{ status: string, unreachable: boolean }} connectionState
- * @property {{ displayNameDialog?: HTMLDialogElement | HTMLElement | null, tabLockOverlay?: HTMLElement | null, tabLockTitle?: HTMLElement | null, tabLockCopy?: HTMLElement | null }} elements
+ * @property {{ tabLockOverlay?: HTMLDialogElement | null, tabLockTitle?: HTMLElement | null, tabLockCopy?: HTMLElement | null }} elements
  * @property {{ connect(): void, disconnect(): void, provider?: unknown }} lobby
  * @property {{ connect(): void, disconnect(): void, provider?: unknown }} workspaceSync
  * @property {{ show(message: string): void }} toastController
  * @property {{ tryActivate(options?: { takeover?: boolean }): void }} tabActivityLock
+ * @property {{ refresh(): Promise<boolean> }} webMcpTools
  * @property {{ prepareFileDisconnect(filePath: string): Promise<void> }} excalidrawEmbed
  * @property {{ handleHashChange(): Promise<void> }} workspaceRouteController
  * @property {() => boolean} isExcalidrawFile
@@ -35,6 +36,7 @@ function handleTabActivated({ takeover = false } = {}) {
   const wasInactive = !this.isTabActive;
   this.isTabActive = true;
   this.hideTabLockOverlay();
+  void this.webMcpTools?.refresh();
 
   if (!this.lobby.provider) {
     this.lobby.connect();
@@ -65,9 +67,7 @@ async function handleTabBlocked({ reason } = {}) {
   );
 
   this.isTabActive = false;
-  if (this.elements.displayNameDialog?.open) {
-    this.elements.displayNameDialog.close();
-  }
+  void this.webMcpTools?.refresh();
   this.lobby.disconnect();
   this.workspaceSync.disconnect();
   this.globalUsers = [];
@@ -100,6 +100,11 @@ function showTabLockOverlay({ reason } = {}) {
   const copy = this.elements.tabLockCopy;
   if (!overlay) return;
 
+  document.dispatchEvent(new Event('collabmd:close-custom-modals'));
+  document.querySelectorAll('dialog[open]').forEach((dialog) => {
+    if (dialog !== overlay) dialog.close();
+  });
+
   if (title) {
     title.textContent = reason === 'taken-over'
       ? 'This tab is no longer active'
@@ -112,12 +117,20 @@ function showTabLockOverlay({ reason } = {}) {
       : 'To avoid duplicate presence and chat, only one tab can stay connected at a time. Use the other tab, or take over the session here.';
   }
 
-  overlay.classList.remove('hidden');
+  if (!overlay.open) {
+    this.tabLockPreviouslyFocusedElement = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+    overlay.showModal();
+  }
+  this.elements.tabLockTakeoverButton?.focus();
 }
 
 /** @this {UiTabActivityContext} */
 function hideTabLockOverlay() {
-  this.elements.tabLockOverlay?.classList.add('hidden');
+  if (this.elements.tabLockOverlay?.open) this.elements.tabLockOverlay.close();
+  this.tabLockPreviouslyFocusedElement?.focus?.();
+  this.tabLockPreviouslyFocusedElement = null;
 }
 
 export const uiFeatureTabActivityMethods = {

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

@@ -39,13 +39,17 @@ function renderBlockMenuMarkup(activeAction) {
         type="button"
         class="ui-button ui-button--ghost markdown-toolbar-block-trigger"
         data-markdown-block-menu-toggle
-        aria-haspopup="menu"
-        aria-expanded="false"
+        popovertarget="markdownBlockMenuPopover"
         title="Block formatting"
       >
         <span class="markdown-toolbar-block-trigger-label" data-markdown-block-trigger-label>${triggerLabel}</span>
         <span class="markdown-toolbar-block-trigger-icon" aria-hidden="true">${icons.chevronDown}</span>
       </button>
+      <div id="markdownBlockMenuPopover" class="markdown-toolbar-popover" popover="auto">
+        <div class="markdown-toolbar-menu" data-markdown-block-menu role="menu" aria-label="Block formatting">
+          ${renderBlockMenuItemsMarkup(activeAction)}
+        </div>
+      </div>
     </div>
   `;
 }
@@ -111,39 +115,12 @@ function renderMarkdownToolbar() {
 
   const activeAction = this.getActiveMarkdownBlockAction();
   root.innerHTML = renderMarkdownToolbarMarkup(activeAction);
-  this.renderMarkdownBlockMenuPopover();
   this.syncMarkdownToolbarBlockUi();
 }
 
 /** @this {UiToolbarContext} */
 function getMarkdownBlockMenuPopover() {
-  return this._markdownBlockMenuPopover ?? null;
-}
-
-/** @this {UiToolbarContext} */
-function renderMarkdownBlockMenuPopover() {
-  const mountTarget = this.elements?.editorContainer ?? document.body;
-  let popover = this.getMarkdownBlockMenuPopover();
-  if (!popover) {
-    popover = document.createElement('div');
-    popover.className = 'markdown-toolbar-popover hidden';
-    popover.innerHTML = '<div class="markdown-toolbar-menu" data-markdown-block-menu role="menu" aria-label="Block formatting"></div>';
-    popover.addEventListener('click', (event) => {
-      this.handleMarkdownToolbarClick?.(event);
-    });
-    popover.addEventListener('keydown', (event) => {
-      this.handleMarkdownToolbarKeydown?.(event);
-    });
-    mountTarget?.appendChild(popover);
-    this._markdownBlockMenuPopover = popover;
-  } else if (popover.parentElement !== mountTarget) {
-    mountTarget?.appendChild(popover);
-  }
-
-  const menu = popover.querySelector('[data-markdown-block-menu]');
-  if (menu) {
-    menu.innerHTML = renderBlockMenuItemsMarkup(this.getActiveMarkdownBlockAction());
-  }
+  return document.getElementById('markdownBlockMenuPopover');
 }
 
 /** @this {UiToolbarContext} */
@@ -166,13 +143,7 @@ function syncMarkdownToolbarBlockUi() {
     toggle.setAttribute('title', `${actionMeta.label}. Block formatting`);
   }
 
-  const popoverItems = Array.from(
-    this.getMarkdownBlockMenuPopover()?.querySelectorAll('[data-markdown-block-action]') ?? [],
-  );
-  const blockActionItems = [
-    ...root.querySelectorAll('[data-markdown-block-action]'),
-    ...popoverItems,
-  ];
+  const blockActionItems = root.querySelectorAll('[data-markdown-block-action]');
   blockActionItems.forEach((item) => {
     const itemAction = item.getAttribute('data-markdown-block-action');
     const isActive = itemAction === activeAction;
@@ -194,71 +165,23 @@ function setActiveMarkdownBlockAction(action) {
 
 /** @this {UiToolbarContext} */
 function isMarkdownBlockMenuOpen() {
-  return Boolean(this.elements?.markdownToolbar?.classList.contains('is-menu-open'));
-}
-
-/** @this {UiToolbarContext} */
-function positionMarkdownBlockMenu() {
-  const popover = this.getMarkdownBlockMenuPopover();
-  const toggle = this.elements?.markdownToolbar?.querySelector('[data-markdown-block-menu-toggle]');
-  const mountTarget = popover?.parentElement;
-  if (!popover || !toggle || !(mountTarget instanceof HTMLElement)) {
-    return;
-  }
-
-  const toggleRect = toggle.getBoundingClientRect();
-  const mountRect = mountTarget.getBoundingClientRect();
-  const menuRect = popover.getBoundingClientRect();
-  const menuWidth = menuRect.width || 176;
-  const menuHeight = menuRect.height || 240;
-  const horizontalPadding = 8;
-  const verticalGap = 6;
-  const preferredLeft = toggleRect.left - mountRect.left;
-  const maxLeft = Math.max(horizontalPadding, mountRect.width - menuWidth - horizontalPadding);
-  const preferredTop = (toggleRect.bottom - mountRect.top) + verticalGap;
-  const fitsBelow = preferredTop + menuHeight <= mountRect.height - horizontalPadding;
-
-  popover.style.left = `${Math.max(horizontalPadding, Math.min(preferredLeft, maxLeft))}px`;
-  popover.style.top = `${fitsBelow
-    ? preferredTop
-    : Math.max(horizontalPadding, (toggleRect.top - mountRect.top) - menuHeight - verticalGap)}px`;
+  return Boolean(this.getMarkdownBlockMenuPopover()?.matches(':popover-open'));
 }
 
 /** @this {UiToolbarContext} */
 function openMarkdownBlockMenu() {
-  const root = this.elements?.markdownToolbar;
-  if (!root) {
-    return;
-  }
-
-  this.renderMarkdownBlockMenuPopover();
-  root.classList.add('is-menu-open');
   const popover = this.getMarkdownBlockMenuPopover();
-  popover?.classList.remove('hidden');
-  root.querySelector('[data-markdown-block-menu-toggle]')?.setAttribute('aria-expanded', 'true');
-  this.positionMarkdownBlockMenu();
-}
-
-/** @this {UiToolbarContext} */
-function closeMarkdownBlockMenu() {
-  const root = this.elements?.markdownToolbar;
-  if (!root) {
-    return;
+  if (popover && !popover.matches(':popover-open')) {
+    popover.showPopover();
   }
-
-  root.classList.remove('is-menu-open');
-  this.getMarkdownBlockMenuPopover()?.classList.add('hidden');
-  root.querySelector('[data-markdown-block-menu-toggle]')?.setAttribute('aria-expanded', 'false');
 }
 
 /** @this {UiToolbarContext} */
-function toggleMarkdownBlockMenu() {
-  if (this.isMarkdownBlockMenuOpen()) {
-    this.closeMarkdownBlockMenu();
-    return;
+function closeMarkdownBlockMenu() {
+  const popover = this.getMarkdownBlockMenuPopover();
+  if (popover?.matches(':popover-open')) {
+    popover.hidePopover();
   }
-
-  this.openMarkdownBlockMenu();
 }
 
 /** @this {UiToolbarContext} */
@@ -276,12 +199,6 @@ function handleMarkdownToolbarClick(event) {
     return;
   }
 
-  const blockMenuToggle = target.closest('[data-markdown-block-menu-toggle]');
-  if (blockMenuToggle) {
-    event.preventDefault();
-    this.toggleMarkdownBlockMenu();
-    return;
-  }
 
   const blockActionButton = target.closest('[data-markdown-block-action]');
   if (blockActionButton) {
@@ -309,7 +226,7 @@ function handleMarkdownToolbarKeydown(event) {
     const toggle = event.target instanceof Element
       ? event.target.closest('[data-markdown-block-menu-toggle]')
       : null;
-    if (toggle && ['ArrowDown', 'Enter', ' '].includes(event.key)) {
+    if (toggle && event.key === 'ArrowDown') {
       event.preventDefault();
       this.openMarkdownBlockMenu();
       this.getMarkdownBlockMenuPopover()?.querySelector('[data-markdown-block-action]')?.focus();
@@ -317,18 +234,7 @@ function handleMarkdownToolbarKeydown(event) {
     return;
   }
 
-  if (event.key === 'Escape') {
-    event.preventDefault();
-    this.closeMarkdownBlockMenu();
-    this.elements?.markdownToolbar?.querySelector('[data-markdown-block-menu-toggle]')?.focus();
-    return;
-  }
-
   const menuItems = Array.from(this.getMarkdownBlockMenuPopover()?.querySelectorAll('[data-markdown-block-action]') ?? []);
-  if (menuItems.length === 0) {
-    return;
-  }
-
   const currentIndex = menuItems.findIndex((item) => item === event.target);
   if (currentIndex < 0) {
     return;
@@ -343,21 +249,6 @@ function handleMarkdownToolbarKeydown(event) {
   }
 }
 
-/** @this {UiToolbarContext} */
-function handleMarkdownToolbarDocumentPointerDown(event) {
-  if (!this.isMarkdownBlockMenuOpen()) {
-    return;
-  }
-
-  if (
-    this.elements?.markdownToolbar?.contains(event.target)
-    || this.getMarkdownBlockMenuPopover()?.contains(event.target)
-  ) {
-    return;
-  }
-
-  this.closeMarkdownBlockMenu();
-}
 
 /** @this {UiToolbarContext} */
 function applyMarkdownToolbarAction(action) {
@@ -470,16 +361,12 @@ export const uiFeatureToolbarMethods = {
   getMarkdownBlockMenuPopover,
   handleEditorImageInsert,
   handleMarkdownToolbarClick,
-  handleMarkdownToolbarDocumentPointerDown,
   handleMarkdownToolbarKeydown,
   handleToolbarImageInsert,
   isMarkdownBlockMenuOpen,
   openMarkdownBlockMenu,
-  positionMarkdownBlockMenu,
-  renderMarkdownBlockMenuPopover,
   renderMarkdownToolbar,
   runEditorCommand,
   setActiveMarkdownBlockAction,
   syncMarkdownToolbarBlockUi,
-  toggleMarkdownBlockMenu,
 };

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

@@ -1,5 +1,8 @@
 export function bindAppShellElements(doc = document) {
   return {
+    agentConnectionContent: doc.getElementById('agentConnectionContent'),
+    agentConnectionDialog: doc.getElementById('agentConnectionDialog'),
+    connectAgentButton: doc.getElementById('connectAgentBtn'),
     currentUserName: doc.getElementById('currentUserName'),
     chatContainer: doc.getElementById('chatContainer'),
     chatEmptyState: doc.getElementById('chatEmptyState'),
@@ -35,8 +38,10 @@ export function bindAppShellElements(doc = document) {
     displayNameInput: doc.getElementById('displayNameInput'),
     displayNameSubmit: doc.getElementById('displayNameSubmit'),
     displayNameTitle: doc.getElementById('displayNameTitle'),
+    fileActionDialog: doc.getElementById('fileActionDialog'),
     editNameButton: doc.getElementById('editNameBtn'),
     editorFindButton: doc.getElementById('editorFindBtn'),
+    editorFormatButton: doc.getElementById('editorFormatBtn'),
     editorContainer: doc.getElementById('editorContainer'),
     exportDocxButton: doc.getElementById('exportDocxBtn'),
     exportHtmlButton: doc.getElementById('exportHtmlBtn'),
@@ -55,12 +60,15 @@ export function bindAppShellElements(doc = document) {
     gitOperationStatus: doc.getElementById('gitOperationStatus'),
     lineInfo: doc.getElementById('lineInfo'),
     mobileViewToggle: doc.getElementById('mobileViewToggle'),
+    htmlPreviewMaximizeButton: doc.getElementById('htmlPreviewMaximize'),
     previewContent: doc.getElementById('previewContent'),
     previewContainer: doc.getElementById('previewContainer'),
+    reviewFileChangesButton: doc.getElementById('reviewFileChangesBtn'),
     presencePanel: doc.getElementById('presencePanel'),
     presencePanelList: doc.getElementById('presencePanelList'),
     presencePanelStatus: doc.getElementById('presencePanelStatus'),
     searchFilesButton: doc.getElementById('searchFilesBtn'),
+    skipToEditor: doc.getElementById('skipToEditor'),
     toolbarSearchButton: doc.getElementById('toolbarSearchBtn'),
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),

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

@@ -4,6 +4,7 @@ import hljs from 'highlight.js';
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
 import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
+import { classifyPublicVideoEmbed } from '../../domain/video-embed.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 import { renderFrontmatterBlock } from './markdown-frontmatter.js';
@@ -12,21 +13,6 @@ import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 hljs.registerAliases(['cql', 'mariadb', 'mssql', 'mysql', 'plsql', 'sqlite'], { languageName: 'sql' });
 hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
 
-const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
-  '.mp4': 'video/mp4',
-  '.ogg': 'video/ogg',
-  '.webm': 'video/webm',
-});
-
-const YOUTUBE_HOSTS = new Set([
-  'youtube.com',
-  'www.youtube.com',
-  'm.youtube.com',
-  'youtu.be',
-  'www.youtu.be',
-  'youtube-nocookie.com',
-  'www.youtube-nocookie.com',
-]);
 
 function renderToken(renderer, tokens, index, options, env, self) {
   return renderer?.(tokens, index, options, env, self) ?? self.renderToken(tokens, index, options);
@@ -192,78 +178,6 @@ function createBaseFileEmbedPlaceholder({ embedKey, label, target, viewName = ''
   return `<span class="bases-embed-placeholder diagram-preview-shell" data-base-key="${escapeHtml(embedKey)}" data-base-path="${escapeHtml(target)}" data-base-label="${escapeHtml(label)}"${viewAttribute}${sourceFileAttribute}><span class="diagram-preview-placeholder-card"><span class="diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads query results when preview renders</span></span></span></span>`;
 }
 
-function getDirectVideoMimeType(pathname = '') {
-  const match = pathname.toLowerCase().match(/\.(mp4|ogg|webm)$/i);
-  if (!match) {
-    return null;
-  }
-
-  return DIRECT_VIDEO_MIME_TYPES[`.${match[1].toLowerCase()}`] || null;
-}
-
-function normalizeYouTubeVideoId(candidate = '') {
-  const normalized = String(candidate || '').trim();
-  return /^[A-Za-z0-9_-]{11}$/.test(normalized) ? normalized : null;
-}
-
-function getCanonicalYouTubeEmbedUrl(url) {
-  const host = url.hostname.toLowerCase();
-  let videoId = null;
-
-  if (host === 'youtu.be' || host === 'www.youtu.be') {
-    videoId = normalizeYouTubeVideoId(url.pathname.split('/').filter(Boolean)[0] || '');
-  } else if (host.includes('youtube') || host.includes('youtube-nocookie')) {
-    if (url.pathname === '/watch') {
-      videoId = normalizeYouTubeVideoId(url.searchParams.get('v') || '');
-    } else if (url.pathname.startsWith('/embed/')) {
-      videoId = normalizeYouTubeVideoId(url.pathname.split('/').filter(Boolean)[1] || '');
-    }
-  }
-
-  if (!videoId) {
-    return null;
-  }
-
-  return `https://www.youtube-nocookie.com/embed/${videoId}`;
-}
-
-function classifyPublicVideoEmbed(source = '') {
-  let url;
-
-  try {
-    url = new URL(String(source || '').trim());
-  } catch {
-    return null;
-  }
-
-  if (url.protocol !== 'https:') {
-    return null;
-  }
-
-  const host = url.hostname.toLowerCase();
-  if (YOUTUBE_HOSTS.has(host)) {
-    const embedUrl = getCanonicalYouTubeEmbedUrl(url);
-    if (!embedUrl) {
-      return null;
-    }
-
-    return {
-      embedUrl,
-      type: 'youtube',
-    };
-  }
-
-  const mimeType = getDirectVideoMimeType(url.pathname);
-  if (!mimeType) {
-    return null;
-  }
-
-  return {
-    mimeType,
-    sourceUrl: url.toString(),
-    type: 'direct-video',
-  };
-}
 
 function createVideoEmbedPlaceholder({
   embedKey,

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

@@ -6,24 +6,8 @@ import {
 import { getRenderProfile } from './preview-render-profile.js';
 
 export class PreviewRenderScheduler {
-  constructor({
-    cancelAnimationFrameFn = (frameId) => cancelAnimationFrame(frameId),
-    cancelIdleRenderFn = cancelIdleRender,
-    clearTimeoutFn = (timeoutId) => clearTimeout(timeoutId),
-    getRenderProfileFn = getRenderProfile,
-    idleTimeoutMs = IDLE_RENDER_TIMEOUT_MS,
-    requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
-    requestIdleRenderFn = requestIdleRender,
-    setTimeoutFn = (callback, delay) => setTimeout(callback, delay),
-  } = {}) {
-    this.cancelAnimationFrameFn = cancelAnimationFrameFn;
-    this.cancelIdleRenderFn = cancelIdleRenderFn;
-    this.clearTimeoutFn = clearTimeoutFn;
+  constructor({ getRenderProfileFn = getRenderProfile } = {}) {
     this.getRenderProfileFn = getRenderProfileFn;
-    this.idleTimeoutMs = idleTimeoutMs;
-    this.requestAnimationFrameFn = requestAnimationFrameFn;
-    this.requestIdleRenderFn = requestIdleRenderFn;
-    this.setTimeoutFn = setTimeoutFn;
     this.frameId = null;
     this.idleId = null;
     this.timeoutId = null;
@@ -34,7 +18,7 @@ export class PreviewRenderScheduler {
     this.cancel();
 
     const scheduleFrame = () => {
-      this.frameId = this.requestAnimationFrameFn(() => {
+      this.frameId = requestAnimationFrame(() => {
         this.frameId = null;
         this.timeoutId = null;
         onRenderRequested?.(markdownText, renderVersion);
@@ -43,25 +27,25 @@ export class PreviewRenderScheduler {
 
     const scheduleRender = () => {
       if (renderProfile.deferUntilIdle) {
-        this.idleId = this.requestIdleRenderFn(() => {
+        this.idleId = requestIdleRender(() => {
           this.idleId = null;
           scheduleFrame();
-        }, this.idleTimeoutMs);
+        }, IDLE_RENDER_TIMEOUT_MS);
         return;
       }
 
       scheduleFrame();
     };
 
-    this.timeoutId = this.setTimeoutFn(scheduleRender, renderProfile.debounceMs);
+    this.timeoutId = setTimeout(scheduleRender, renderProfile.debounceMs);
   }
 
   cancel() {
-    this.clearTimeoutFn(this.timeoutId);
+    clearTimeout(this.timeoutId);
     if (this.frameId) {
-      this.cancelAnimationFrameFn(this.frameId);
+      cancelAnimationFrame(this.frameId);
     }
-    this.cancelIdleRenderFn(this.idleId);
+    cancelIdleRender(this.idleId);
     this.frameId = null;
     this.idleId = null;
     this.timeoutId = null;

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

@@ -3,7 +3,7 @@ import { PlantUmlPreviewHydrator } from './plantuml-preview-hydrator.js';
 import { DiagramChrome } from './diagram-chrome.js';
 import { IDLE_RENDER_TIMEOUT_MS } from './preview-diagram-utils.js';
 import { PreviewRenderExecutor } from './preview-render-executor.js';
-import { getRenderProfile, isLargeDocumentStats } from './preview-render-profile.js';
+import { isLargeDocumentStats } from './preview-render-profile.js';
 import { PreviewRenderScheduler } from './preview-render-scheduler.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
@@ -105,7 +105,7 @@ export class PreviewRenderer {
       loadFileSource,
       renderClient: plantUmlRenderClient,
     });
-    this.renderScheduler = new PreviewRenderScheduler({ getRenderProfileFn: getRenderProfile });
+    this.renderScheduler = new PreviewRenderScheduler();
     this.renderExecutor = new PreviewRenderExecutor({
       attachmentApiPath: resolveApiUrl('/attachment'),
       getFileList: () => this.getFileList?.() ?? [],

package/src/client/application/webmcp-diagram-renderer.js

@@ -0,0 +1,47 @@
+import { resolveRenderableDiagram } from '../../domain/diagram-source.js';
+import {
+  rasterizeSvgMarkupToPngBlob,
+  renderMermaidExportSvgMarkup,
+} from './diagram-preview-export.js';
+
+export async function renderWebMcpDiagram(input = {}, {
+  callTool,
+  getMermaid,
+  signal,
+} = {}) {
+  const requestedStartLine = Number.parseInt(input.startLine, 10);
+  const read = await callTool('read_document', {
+    lineCount: 500,
+    path: input.path,
+    startLine: Number.isInteger(requestedStartLine) ? requestedStartLine : 1,
+  }, { signal });
+  const diagram = resolveRenderableDiagram(read.content, input.path, {
+    contentStartLine: read.startLine,
+    startLine: input.startLine,
+  });
+  if (!diagram || diagram.kind !== 'mermaid') {
+    return callTool('render_diagram', input, { signal });
+  }
+  if (read.kind === 'mermaid' && read.truncated) {
+    throw new Error('Mermaid source exceeds the WebMCP read limit');
+  }
+
+  const svg = await renderMermaidExportSvgMarkup(await getMermaid(), diagram.source);
+  const format = input.format ?? 'png';
+  const mimeType = format === 'svg' ? 'image/svg+xml' : 'image/png';
+  const bytes = format === 'svg'
+    ? new TextEncoder().encode(svg)
+    : new Uint8Array(await (await rasterizeSvgMarkupToPngBlob(svg)).arrayBuffer());
+  return {
+    endLine: diagram.endLine,
+    format,
+    image: { data: bytes.toBase64(), encoding: 'base64', mimeType },
+    kind: diagram.kind,
+    mimeType,
+    path: read.path,
+    renderer: 'mermaid-browser',
+    revision: read.revision,
+    startLine: diagram.startLine,
+    warnings: [],
+  };
+}