collabmd 0.1.47 → 0.1.49

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

@@ -1,5 +1,6 @@
 import {
   isBaseFilePath,
+  isHtmlFilePath,
   isMarkdownFilePath,
   supportsBacklinksForFilePath,
 } from '../../domain/file-kind.js';
@@ -20,6 +21,7 @@ export class WorkspaceCoordinator {
     createEditorSession,
     getDisplayName,
     getFileList,
+    getVaultFileList = getFileList,
     getLineWrappingEnabled,
     getVimModeEnabled,
     getLocalUser,
@@ -51,6 +53,7 @@ export class WorkspaceCoordinator {
     onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
+    onRenderHtmlPreview,
     onRenderImagePreview,
     onRenderPdfPreview,
     onRenderStructurizrPreview,
@@ -72,6 +75,7 @@ export class WorkspaceCoordinator {
     this.createEditorSession = createEditorSession;
     this.getDisplayName = getDisplayName;
     this.getFileList = getFileList;
+    this.getVaultFileList = getVaultFileList;
     this.getLineWrappingEnabled = getLineWrappingEnabled;
     this.getVimModeEnabled = getVimModeEnabled ?? (() => false);
     this.getLocalUser = getLocalUser;
@@ -103,6 +107,7 @@ export class WorkspaceCoordinator {
     this.onRenderBasePreview = onRenderBasePreview;
     this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
+    this.onRenderHtmlPreview = onRenderHtmlPreview;
     this.onRenderImagePreview = onRenderImagePreview;
     this.onRenderPdfPreview = onRenderPdfPreview;
     this.onRenderStructurizrPreview = onRenderStructurizrPreview;
@@ -180,6 +185,7 @@ export class WorkspaceCoordinator {
     isDrawio = false,
     filePath,
     isExcalidraw = false,
+    isHtml = false,
     isImage = false,
     isPdf = false,
     supportsBacklinks,
@@ -187,6 +193,7 @@ export class WorkspaceCoordinator {
     if (isExcalidraw) this.onRenderExcalidrawPreview(filePath);
     if (isBase || isBaseFilePath(filePath)) this.onRenderBasePreview(filePath);
     if (isDrawio) this.onRenderDrawioPreview(filePath);
+    if (isHtml) this.onRenderHtmlPreview({ content: this.session?.getText?.() ?? '' });
     if (isImage) this.onRenderImagePreview(filePath);
     if (isPdf) this.onRenderPdfPreview(filePath);
     if (this.isStructurizrWorkspaceFile(filePath)) {
@@ -200,7 +207,14 @@ export class WorkspaceCoordinator {
 
   async openFile(filePath, { drawioMode = null } = {}) {
     if (!this.isTabActive()) {
-      return;
+      return false;
+    }
+
+    if (!filePath || !this.getVaultFileList().includes(filePath)) {
+      this.cleanupSession();
+      this.stateStore.sessionLoadToken += 1;
+      this.onFileOpenError({ code: 'not-found', filePath });
+      return false;
     }
 
     const normalizedDrawioMode = drawioMode ?? null;
@@ -210,6 +224,7 @@ export class WorkspaceCoordinator {
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
+    const isHtml = isHtmlFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isStructurizrWorkspace = this.isStructurizrWorkspaceFile(filePath);
@@ -221,7 +236,7 @@ export class WorkspaceCoordinator {
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
-      return;
+      return true;
     }
 
     const loadToken = ++this.stateStore.sessionLoadToken;
@@ -252,7 +267,7 @@ export class WorkspaceCoordinator {
         session: null,
         supportsBacklinks: chromeState.supportsBacklinks,
       });
-      return;
+      return true;
     }
 
     const EditorSession = await this.loadEditorSessionClass();
@@ -272,6 +287,7 @@ export class WorkspaceCoordinator {
 
         this.onContentChange({
           isBase,
+          isHtml,
           isMermaid,
           isPlantUml,
           isStructurizrWorkspace,
@@ -313,6 +329,7 @@ export class WorkspaceCoordinator {
           filePath,
           isBase,
           isExcalidraw,
+          isHtml,
           session,
           supportsBacklinks: chromeState.supportsBacklinks,
         });
@@ -426,6 +443,7 @@ export class WorkspaceCoordinator {
         session.ensureInitialContent?.();
         await readySession('post-initialize');
       }
+      return true;
     } catch (error) {
       console.error('[app] Failed to initialize editor:', error);
       session.destroy();
@@ -438,7 +456,8 @@ export class WorkspaceCoordinator {
         return;
       }
 
-      this.onFileOpenError();
+      this.onFileOpenError({ code: 'load-failed', filePath });
+      return false;
     }
   }
 }

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

@@ -1,11 +1,40 @@
 import {
   isBaseFilePath,
   isDiagramFilePath,
+  isHtmlFilePath,
   isMarkdownFilePath,
   isStructurizrFilePath,
 } from '../../domain/file-kind.js';
+import { canFormatDocument } from '../domain/document-formatter.js';
+import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
+const HTML_PREVIEW_CSP = "default-src 'none'; base-uri about:; form-action 'none'; object-src 'none'; frame-src 'none'; worker-src 'none'; connect-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:";
+
+function createHtmlPreviewDocument(content, allowScripts = false) {
+  const scriptSource = allowScripts ? "'unsafe-inline'" : "'none'";
+  return `<meta http-equiv="Content-Security-Policy" content="${HTML_PREVIEW_CSP}; script-src ${scriptSource};"><base href="about:srcdoc">${String(content ?? '')}`;
+}
+
+function hasHtmlScripts(content) {
+  const preview = new DOMParser().parseFromString(content, 'text/html');
+  if (preview.scripts.length > 0) return true;
+  return [...preview.querySelectorAll('*')].some((element) => [...element.attributes].some(({ name, value }) => (
+    (name.startsWith('on') && name in element)
+    || ((name === 'href' || name === 'xlink:href') && /^\s*javascript:/iu.test(value))
+  )));
+}
+
+function syncFormatDocumentButton(button, filePath, isPlantUml) {
+  if (!button) return;
+  const actionLabel = isPlantUml ? 'Indent PlantUML document' : 'Format document';
+  button.classList.toggle('hidden', !canFormatDocument(filePath));
+  button.setAttribute('aria-label', actionLabel);
+  button.setAttribute('title', actionLabel);
+  const label = button.querySelector('.ui-action-label');
+  if (label) label.textContent = isPlantUml ? 'Indent' : 'Format';
+}
+
 export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
@@ -43,6 +72,14 @@ export class WorkspacePreviewController {
       updateTheme() {},
     };
     this.elements = elements;
+    this.htmlPreviewShell = null;
+    if (this.elements.htmlPreviewMaximizeButton) {
+      this.elements.htmlPreviewMaximizeButton.addEventListener('click', () => {
+        const isMaximized = this.htmlPreviewShell?.classList.contains('is-maximized');
+        this.setHtmlPreviewMaximized(!isMaximized);
+      });
+      setDiagramActionButtonIcon(this.elements.htmlPreviewMaximizeButton, 'maximize');
+    }
     this.excalidrawEmbed = excalidrawEmbed;
     this.getDisplayName = getDisplayName;
     this.getSession = getSession;
@@ -91,13 +128,29 @@ export class WorkspacePreviewController {
     return source;
   }
 
+  setHtmlPreviewMaximized(maximized) {
+    const isMaximized = Boolean(maximized && this.htmlPreviewShell);
+    this.htmlPreviewShell?.classList.toggle('is-maximized', isMaximized);
+    globalThis.document?.body?.classList.toggle('html-preview-maximized-open', isMaximized);
+
+    const button = this.elements.htmlPreviewMaximizeButton;
+    if (button) {
+      setDiagramActionButtonIcon(button, isMaximized ? 'restore' : 'maximize');
+      button.title = isMaximized ? 'Restore HTML preview' : 'Maximize HTML preview';
+      button.setAttribute('aria-label', button.title);
+    }
+  }
+
   resetPreviewMode() {
+    this.setHtmlPreviewMaximized(false);
+    this.htmlPreviewShell = null;
     this.pdfPreview.cancel();
     this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
     this.elements.previewContent?.classList.remove('is-base-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-pdf-file-preview');
+    this.elements.previewContent?.classList.remove('is-html-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
     this.elements.previewContent?.classList.remove('is-structurizr-file-preview');
@@ -110,6 +163,7 @@ export class WorkspacePreviewController {
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
+    const isHtml = isHtmlFilePath(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
@@ -120,9 +174,11 @@ export class WorkspacePreviewController {
     this.backlinksPanel.setDisplayMode?.(usesHeaderBacklinks ? 'header' : 'dock');
 
     this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
+    syncFormatDocumentButton(this.elements.editorFormatButton, filePath, isPlantUml);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
     this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
-    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isPdf || isBase);
+    this.elements.htmlPreviewMaximizeButton?.classList.toggle('hidden', !isHtml);
+    this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isPdf || isHtml || isBase);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
     this.elements.previewContent?.classList.toggle('is-structurizr-file-preview', isStructurizr);
@@ -132,7 +188,7 @@ export class WorkspacePreviewController {
       this.backlinksPanel.clear();
     }
 
-    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage || isPdf || (isBase && preferPreviewForBase)) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isHtml || isImage || isPdf || (isBase && preferPreviewForBase)) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -292,6 +348,68 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  renderHtmlFilePreview({ content = '' } = {}) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    const wasMaximized = this.htmlPreviewShell?.classList.contains('is-maximized') ?? false;
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-html-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    const source = String(content ?? '');
+    const iframe = document.createElement('iframe');
+    iframe.className = 'html-file-preview-frame';
+    iframe.title = 'HTML preview';
+    iframe.referrerPolicy = 'no-referrer';
+    iframe.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'");
+    iframe.setAttribute('sandbox', '');
+    // ponytail: full iframe replacement resets script consent whenever the content changes.
+    iframe.srcdoc = createHtmlPreviewDocument(source);
+
+    const shell = document.createElement('div');
+    shell.className = 'html-file-preview-shell';
+
+    if (hasHtmlScripts(source)) {
+      const scriptGate = document.createElement('div');
+      scriptGate.className = 'html-file-preview-script-gate';
+      scriptGate.textContent = 'Scripts are disabled by default. Run them only if you trust this HTML file.';
+
+      const runScriptsButton = document.createElement('button');
+      runScriptsButton.type = 'button';
+      runScriptsButton.className = 'ui-button ui-button--secondary ui-button--compact';
+      runScriptsButton.textContent = 'Run scripts';
+      runScriptsButton.addEventListener('click', () => {
+        iframe.setAttribute('sandbox', 'allow-scripts');
+        iframe.srcdoc = createHtmlPreviewDocument(source, true);
+        scriptGate.remove();
+      });
+      scriptGate.append(runScriptsButton);
+      shell.append(scriptGate);
+    }
+    shell.append(iframe);
+    this.htmlPreviewShell = shell;
+    this.setHtmlPreviewMaximized(wasMaximized);
+
+    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.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   async renderBaseFilePreview(filePath, { source = null } = {}) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {

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

@@ -143,6 +143,13 @@ export class WorkspaceRouteController {
       return;
     }
     this.revealEditorMatch(route);
+    if (route.elementId) {
+      this.excalidrawEmbed?.openElement(
+        route.filePath,
+        route.elementId,
+        route.elementType,
+      );
+    }
     this.requestPreviewRouteAnchor?.(route.anchor ?? null, route.filePath);
   }
 
@@ -285,8 +292,11 @@ export class WorkspaceRouteController {
     this.fileHistoryView?.hide?.();
     this.clearStaticPreviewDocument?.();
     this.syncMainChrome({ mode: 'editor' });
-    await this.workspaceCoordinator.openFile(filePath, options);
+    const didOpen = await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
+    if (didOpen === false) {
+      return false;
+    }
 
     if (shouldRevealInTree) {
       this.revealFileInTree(filePath, { clearSearch: true });

package/src/client/assets/vendor/jetbrains-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

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

@@ -1,5 +1,6 @@
 import { PdfPreviewController } from '../application/pdf-preview-controller.js';
 import { PreviewRenderer } from '../application/preview-renderer.js';
+import { renderWebMcpDiagram } from '../application/webmcp-diagram-renderer.js';
 import { ensureQuickSwitcherInstance, toggleQuickSwitcherInstance } from '../application/quick-switcher-loader.js';
 import { WorkspaceRouteController } from '../application/workspace-route-controller.js';
 import { WikiLinkFileController } from '../application/wiki-link-file-controller.js';
@@ -18,6 +19,7 @@ import { uiFeatureSidebarMethods } from '../application/app-shell/ui-feature-sid
 import { uiFeatureTabActivityMethods } from '../application/app-shell/ui-feature-tab-activity.js';
 import { uiFeatureToolbarMethods } from '../application/app-shell/ui-feature-toolbar.js';
 import { workspaceFeature } from '../application/app-shell/workspace-feature.js';
+import { agentConnectionApiClient } from '../infrastructure/agent-connection-api-client.js';
 import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/lobby-presence.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
 import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
@@ -35,7 +37,9 @@ import {
 } from '../infrastructure/runtime-config.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
+import { WebMcpToolRegistry } from '../infrastructure/webmcp-tool-registry.js';
 import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
+import { AgentConnectionController } from '../presentation/agent-connection-controller.js';
 import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentOverviewController } from '../presentation/comment-overview-controller.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
@@ -166,8 +170,69 @@ export class CollabMdAppShell {
 
     this.toastController = new ToastController(this.elements.toastContainer);
     this.chatToastController = new ToastController(this.elements.chatToastContainer);
+    this.agentConnectionController = new AgentConnectionController({
+      apiClient: agentConnectionApiClient,
+      closeToolbarMenu: () => this.closeToolbarOverflowMenu(),
+      content: this.elements.agentConnectionContent,
+      dialog: this.elements.agentConnectionDialog,
+      runtimeConfig: this.runtimeConfig,
+      toastController: this.toastController,
+      trigger: this.elements.connectAgentButton,
+    });
+    const callAgentTool = (...args) => this.vaultApiClient.callAgentTool(...args);
+    this.webMcpTools = new WebMcpToolRegistry({
+      acknowledgeToolCall: ({ input, name, preparation, result, signal }) => {
+        if (
+          name !== 'edit_excalidraw'
+          || input.path !== this.currentFilePath
+        ) {
+          return null;
+        }
+        return this.excalidrawEmbed?.waitForAgentPaint(input.path, result.revision, {
+          afterRevision: preparation?.revision,
+          signal,
+        });
+      },
+      callTool: (name, input, options) => name === 'render_diagram'
+        ? renderWebMcpDiagram(input, {
+            callTool: callAgentTool,
+            getMermaid: () => this.previewRenderer.mermaidHydrator.ensureMermaid(),
+            signal: options?.signal,
+          })
+        : callAgentTool(name, input, options),
+      getActiveContext: () => ({
+        activeDiagramPath: this.isExcalidrawFile(this.currentFilePath)
+          ? this.currentFilePath
+          : null,
+        activePath: this.currentFilePath,
+      }),
+      getIsTabActive: () => this.isTabActive,
+      onDidMutate: () => {
+        this.toastController.show('Agent-assisted Vault change applied. Review it before committing.');
+      },
+      prepareToolCall: async ({ input, name, signal }) => {
+        if (
+          ![
+            'edit_excalidraw',
+            'inspect_excalidraw',
+            'read_document',
+            'render_excalidraw',
+            'verify_excalidraw',
+          ].includes(name)
+          || input.path !== this.currentFilePath
+        ) {
+          return null;
+        }
+        const preparation = await this.excalidrawEmbed?.flushPendingAgentWrites(input.path, { signal });
+        if (['timeout', 'unavailable'].includes(preparation?.status)) {
+          throw new Error('The active Excalidraw editor did not confirm its latest collaboration update');
+        }
+        return preparation;
+      },
+    });
     this.fileExplorer = new FileExplorerController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
+      onDirectoryExport: (directoryPath, format) => this.handleDirectoryExportRequest(directoryPath, format),
       onFileDelete: () => this.navigation.navigateToFile(null),
       onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
@@ -200,7 +265,9 @@ export class CollabMdAppShell {
       onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
       onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
       onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
+      onStageAll: () => this.stageAllGitFiles(),
       onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+      onUnstageAll: () => this.unstageAllGitFiles(),
       onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
       onViewAllDiff: () => this.handleGitDiffSelection(null, { closeSidebarOnMobile: true, scope: 'all' }),
       searchInput: this.elements.gitSearchInput,
@@ -208,7 +275,11 @@ export class CollabMdAppShell {
     });
     this.outlineController = new OutlineController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
-      onNavigateToHeading: ({ sourceLine }) => {
+      onNavigateToHeading: ({ headingId, sourceLine }) => {
+        const heading = document.getElementById(headingId);
+        if (this.elements.previewContent?.contains(heading)) {
+          this.unfoldPreviewHeading(heading);
+        }
         if (!Number.isFinite(sourceLine)) return;
         this.scrollSyncController.suspendSync(250);
         this.session?.scrollToLine(sourceLine, 0);
@@ -254,6 +325,7 @@ export class CollabMdAppShell {
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
         this.syncPreviewCodeCopyButtons();
+        this.syncPreviewHeadingFoldButtons();
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
@@ -301,6 +373,7 @@ export class CollabMdAppShell {
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
       loadBacklinks: (filePath, options = {}) => this.vaultApiClient.readBacklinks(filePath, options),
+      onBeforeToggle: () => this.scrollSyncController.suspendSync(250),
       onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
       }),
@@ -309,6 +382,11 @@ export class CollabMdAppShell {
     this.excalidrawEmbed = new ExcalidrawEmbedController({
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
+      onOpenElement: ({ elementId, elementType, filePath } = {}) => {
+        if (filePath && elementId) {
+          this.navigation.navigateToFile(filePath, { elementId, elementType });
+        }
+      },
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
       onStopFollowing: () => this.stopFollowingUser(),
       onToggleQuickSwitcher: () => {
@@ -467,6 +545,7 @@ export class CollabMdAppShell {
       }),
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getFileList: () => this.fileExplorer.flatDocumentFiles,
+      getVaultFileList: () => this.fileExplorer.flatFiles,
       getLineWrappingEnabled: () => this.getStoredLineWrapping(),
       getVimModeEnabled: () => this.getStoredVimMode(),
       getLocalUser: () => this.lobby.getLocalUser(),
@@ -500,8 +579,16 @@ export class CollabMdAppShell {
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isBase, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
+      onContentChange: ({ isBase, isHtml, isMermaid, isPlantUml, isStructurizrWorkspace }) => {
+        void this.webMcpTools.refresh();
         this.handleCommentEditorContentChange();
+        if (isHtml) {
+          this.workspacePreviewController.renderHtmlFilePreview({
+            content: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
         if (isBase) {
           this.scheduleBaseFilePreview(this.currentFilePath, {
             source: this.session?.getText?.() ?? '',
@@ -524,10 +611,11 @@ export class CollabMdAppShell {
       },
       onCommentsChange: (threads) => this.handleCommentThreadsChange(threads),
       onFileAwarenessChange: (users) => this.updateFileAwareness(users),
-      onFileOpenError: () => {
-        this.showEditorLoadError();
+      onFileOpenError: ({ code } = {}) => {
+        const notFound = code === 'not-found';
+        this.showEditorLoadError(notFound ? 'File not found' : 'Failed to load file');
         this.syncWrapToggle();
-        this.toastController.show('Failed to initialize editor');
+        this.toastController.show(notFound ? 'File not found' : 'Failed to initialize editor');
       },
       onFileOpenReady: () => {
         this.hideEditorLoading();
@@ -545,6 +633,7 @@ export class CollabMdAppShell {
       onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
+      onRenderHtmlPreview: (options) => this.workspacePreviewController.renderHtmlFilePreview(options),
       onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
       onRenderPdfPreview: (filePath) => this.workspacePreviewController.renderPdfFilePreview(filePath),
       onRenderStructurizrPreview: (filePath, options) => this.workspacePreviewController.renderStructurizrFilePreview(filePath, options),
@@ -561,6 +650,7 @@ export class CollabMdAppShell {
         });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
+        this.syncReviewFileChangesButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
           this.elements.activeFileName.textContent = displayName;
         }
@@ -626,7 +716,10 @@ export class CollabMdAppShell {
   }
 
   get session() { return this._session; }
-  set session(value) { this._session = value; }
+  set session(value) {
+    this._session = value;
+    void this.webMcpTools?.refresh();
+  }
 
   publishFileOpenPerf() {
     if (typeof window === 'undefined') {