collabmd 0.1.47 → 0.1.48

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

@@ -1,4 +1,4 @@
-import { supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
+import { getVaultFileKind, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 import { isPlainQuickSwitcherShortcut } from '../../domain/keyboard-shortcuts.js';
 import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-routes.js';
 
@@ -189,6 +189,13 @@ function bindToolbarEvents() {
     this.closeToolbarOverflowMenu?.();
   });
 
+  this.elements.reviewFileChangesButton?.addEventListener('click', () => {
+    this.handleGitDiffSelection(this.currentFilePath, {
+      closeSidebarOnMobile: true,
+      scope: 'all',
+    });
+  });
+
   this.elements.fileHistoryButton?.addEventListener('click', () => {
     const route = this.navigation.getHashRoute();
     if (route.type === 'git-file-preview') {
@@ -210,7 +217,7 @@ function bindToolbarEvents() {
 /** @this {UiShellContext} */
 function bindDialogEvents() {
   this.elements.displayNameCancel?.addEventListener('click', () => {
-    this.elements.displayNameDialog?.close();
+    this.handleDisplayNameCancel();
   });
 
   this.elements.gitCommitCancel?.addEventListener('click', () => {
@@ -230,7 +237,7 @@ function bindDialogEvents() {
       this.elements.gitCommitInput.value = '';
     }
     if (this.elements.gitCommitSubmit) {
-      this.elements.gitCommitSubmit.textContent = 'Commit staged changes';
+      this.elements.gitCommitSubmit.textContent = 'Commit included files';
     }
   });
 
@@ -255,6 +262,19 @@ function bindDialogEvents() {
   });
 }
 
+/** @this {UiShellContext} */
+function focusEditor(event) {
+  event?.preventDefault?.();
+  const container = this.elements.editorContainer;
+  if (!container) return;
+
+  const target = container.querySelector('.cm-content, iframe, [contenteditable="true"]') ?? container;
+  if (target === container && !container.hasAttribute('tabindex')) {
+    container.setAttribute('tabindex', '-1');
+  }
+  target.focus();
+}
+
 /** @this {UiShellContext} */
 function bindEvents() {
   const stopFollowing = () => this.stopFollowingUser?.();
@@ -263,6 +283,7 @@ function bindEvents() {
   this.elements.editorContainer?.addEventListener('wheel', stopFollowing, { passive: true });
   this.elements.previewContainer?.addEventListener('pointerdown', stopFollowing);
   this.elements.previewContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+  this.elements.skipToEditor?.addEventListener('click', (event) => this.focusEditor(event));
 
   this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
     this.fileExplorer.actionController.openRootCreateMenu({
@@ -329,6 +350,10 @@ function bindEvents() {
     this.runEditorCommand?.('openSearch');
   });
 
+  this.elements.editorFormatButton?.addEventListener('click', () => {
+    void this.formatCurrentDocument();
+  });
+
   this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
     event.preventDefault();
     this.closePresencePanel?.();
@@ -508,7 +533,7 @@ function getHeadingLinkLabel(heading) {
     return heading.textContent.trim();
   }
 
-  headingClone.querySelectorAll('.preview-heading-link-button').forEach((button) => button.remove());
+  headingClone.querySelectorAll('.preview-heading-fold-button, .preview-heading-link-button').forEach((button) => button.remove());
   return headingClone.textContent.replace(/\s+/g, ' ').trim();
 }
 
@@ -549,6 +574,7 @@ function createPreviewHeadingLinkUrl(anchorId) {
     return '';
   }
 
+  // pi-lens-ignore: unchecked-throwing-call-js
   const url = new URL(window.location.href);
   url.hash = createFileRouteHash(this.currentFilePath, {
     anchor: anchorId,
@@ -594,6 +620,7 @@ function syncPreviewCodeCopyButtons() {
     const pre = code.parentElement;
     const wrapper = document.createElement('div');
     wrapper.className = 'preview-code-block';
+    // pi-lens-ignore: no-inner-html-js
     wrapper.innerHTML = `
       <div class="preview-code-actions">
         <button type="button" class="ui-button ui-button--secondary ui-button--compact preview-code-copy-button" aria-label="Copy code" title="Copy code">
@@ -605,6 +632,90 @@ function syncPreviewCodeCopyButtons() {
   });
 }
 
+function applyPreviewHeadingFolds(previewContent) {
+  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('.preview-heading-fold-button') ?? [])
+    .map((button) => button.closest('h1, h2, h3, h4, h5, h6')?.parentElement)
+    .filter(Boolean));
+
+  parents.forEach((parent) => {
+    const collapsedLevels = [];
+    Array.from(parent.children).forEach((child) => {
+      const level = /^H([1-6])$/.exec(child.tagName)?.[1];
+      if (level) {
+        const headingLevel = Number(level);
+        while (collapsedLevels.at(-1) >= headingLevel) {
+          collapsedLevels.pop();
+        }
+        child.hidden = collapsedLevels.length > 0;
+        if (child.dataset.previewHeadingCollapsed === 'true') {
+          collapsedLevels.push(headingLevel);
+        }
+      } else {
+        child.hidden = collapsedLevels.length > 0;
+      }
+    });
+  });
+}
+
+/** @this {UiShellContext} */
+function unfoldPreviewHeading(target) {
+  if (!(target instanceof HTMLElement) || !/^H[1-6]$/.test(target.tagName)) {
+    return false;
+  }
+
+  const collapsedHeadings = [];
+  let ancestorLevel = Number(target.tagName[1]) + 1;
+  for (let heading = target; heading; heading = heading.previousElementSibling) {
+    const level = Number(/^H([1-6])$/.exec(heading.tagName)?.[1]);
+    if (!level || level >= ancestorLevel) {
+      continue;
+    }
+
+    ancestorLevel = level;
+    if (heading.dataset.previewHeadingCollapsed === 'true') {
+      collapsedHeadings.push(heading);
+    }
+  }
+
+  if (collapsedHeadings.length === 0) {
+    return false;
+  }
+
+  collapsedHeadings.forEach((heading) => delete heading.dataset.previewHeadingCollapsed);
+  this.syncPreviewHeadingFoldButtons();
+  this.scrollSyncController?.invalidatePreviewBlocks?.();
+  this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+  this.refreshCommentUiLayout?.();
+  return true;
+}
+
+/** @this {UiShellContext} */
+function syncPreviewHeadingFoldButtons() {
+  const headings = this.elements.previewContent?.querySelectorAll?.('h1, h2, h3, h4, h5, h6') ?? [];
+
+  Array.from(headings).forEach((heading) => {
+    if (!(heading instanceof HTMLElement)) {
+      return;
+    }
+
+    const headingLabel = getHeadingLinkLabel(heading);
+    let button = heading.querySelector(':scope > .preview-heading-fold-button');
+    if (!(button instanceof HTMLButtonElement)) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-icon-button preview-heading-fold-button';
+      heading.prepend(button);
+    }
+
+    const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
+    button.setAttribute('aria-expanded', String(!collapsed));
+    button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
+    button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+  });
+
+  applyPreviewHeadingFolds(this.elements.previewContent);
+}
+
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
   const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
@@ -620,6 +731,7 @@ function syncPreviewHeadingLinkButtons() {
       button = document.createElement('button');
       button.type = 'button';
       button.className = 'ui-icon-button preview-heading-link-button';
+      // pi-lens-ignore: no-inner-html-js
       button.innerHTML = PREVIEW_HEADING_LINK_ICON;
       heading.appendChild(button);
     }
@@ -693,6 +805,18 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  const foldButton = event.target.closest('button.preview-heading-fold-button');
+  const heading = foldButton?.closest('h1, h2, h3, h4, h5, h6');
+  if (foldButton instanceof HTMLButtonElement && heading instanceof HTMLElement) {
+    event.preventDefault();
+    heading.dataset.previewHeadingCollapsed = String(heading.dataset.previewHeadingCollapsed !== 'true');
+    this.syncPreviewHeadingFoldButtons();
+    this.scrollSyncController?.invalidatePreviewBlocks?.();
+    this.schedulePreviewLayoutSync?.({ delayMs: 0 });
+    this.refreshCommentUiLayout?.();
+    return;
+  }
+
   const codeCopyButton = event.target.closest('button.preview-code-copy-button');
   if (codeCopyButton instanceof HTMLButtonElement) {
     event.preventDefault();
@@ -846,6 +970,29 @@ function getStoredLineWrapping() {
   return this.preferences.getLineWrappingEnabled();
 }
 
+/** @this {UiShellContext} */
+async function formatCurrentDocument() {
+  const button = this.elements.editorFormatButton;
+  button?.setAttribute('disabled', '');
+
+  try {
+    const result = await this.session?.formatDocument?.(this.currentFilePath);
+    const messages = {
+      changed: 'Document changed while formatting. Try again.',
+      formatted: getVaultFileKind(this.currentFilePath) === 'plantuml'
+        ? 'PlantUML indentation applied'
+        : 'Document formatted',
+      unchanged: 'Document is already formatted',
+      unsupported: 'Formatting is unavailable for this file type',
+    };
+    this.toastController.show(messages[result] ?? messages.unsupported);
+  } catch (error) {
+    this.toastController.show(`Formatting failed: ${error?.message || 'Unknown error'}`, 5000);
+  } finally {
+    button?.removeAttribute('disabled');
+  }
+}
+
 /** @this {UiShellContext} */
 function toggleVimMode() {
   const currentState = this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
@@ -916,13 +1063,17 @@ function hideEditorLoading() {
 }
 
 /** @this {UiShellContext} */
-function showEditorLoadError() {
+function showEditorLoadError(message = 'Failed to load file') {
   if (!this.elements.editorContainer) return;
+  const loading = document.createElement('div');
+  const text = document.createElement('span');
+  loading.className = 'editor-loading';
+  loading.id = 'editorLoading';
+  text.className = 'loading-text';
+  text.textContent = message;
+  loading.appendChild(text);
   this.elements.editorContainer.classList.remove('is-loading-editor');
-  this.elements.editorContainer.innerHTML = `
-      <div class="editor-loading" id="editorLoading">
-        <span class="loading-text">Failed to load file</span>
-      </div>`;
+  this.elements.editorContainer.replaceChildren(loading);
 }
 
 /** @this {UiShellContext} */
@@ -938,6 +1089,8 @@ export const uiFeatureShellMethods = {
   copyPreviewCodeBlock,
   copyPreviewHeadingLink,
   createPreviewHeadingLinkUrl,
+  focusEditor,
+  formatCurrentDocument,
   getStoredLineWrapping,
   getStoredVimMode,
   handleConnectionChange,
@@ -958,6 +1111,7 @@ export const uiFeatureShellMethods = {
   showEditorLoadError,
   showEditorLoading,
   syncPreviewCodeCopyButtons,
+  syncPreviewHeadingFoldButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
@@ -965,5 +1119,6 @@ export const uiFeatureShellMethods = {
   syncWrapToggle,
   toggleToolbarOverflowMenu,
   toggleLineWrapping,
+  unfoldPreviewHeading,
   toggleVimMode,
 };

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

@@ -37,6 +37,7 @@ export function bindAppShellElements(doc = document) {
     displayNameTitle: doc.getElementById('displayNameTitle'),
     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 +56,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/workspace-coordinator.js

@@ -1,5 +1,6 @@
 import {
   isBaseFilePath,
+  isHtmlFilePath,
   isMarkdownFilePath,
   supportsBacklinksForFilePath,
 } from '../../domain/file-kind.js';
@@ -51,6 +52,7 @@ export class WorkspaceCoordinator {
     onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
+    onRenderHtmlPreview,
     onRenderImagePreview,
     onRenderPdfPreview,
     onRenderStructurizrPreview,
@@ -103,6 +105,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 +183,7 @@ export class WorkspaceCoordinator {
     isDrawio = false,
     filePath,
     isExcalidraw = false,
+    isHtml = false,
     isImage = false,
     isPdf = false,
     supportsBacklinks,
@@ -187,6 +191,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 +205,14 @@ export class WorkspaceCoordinator {
 
   async openFile(filePath, { drawioMode = null } = {}) {
     if (!this.isTabActive()) {
-      return;
+      return false;
+    }
+
+    if (!filePath || !this.getFileList().includes(filePath)) {
+      this.cleanupSession();
+      this.stateStore.sessionLoadToken += 1;
+      this.onFileOpenError({ code: 'not-found', filePath });
+      return false;
     }
 
     const normalizedDrawioMode = drawioMode ?? null;
@@ -210,6 +222,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 +234,7 @@ export class WorkspaceCoordinator {
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
-      return;
+      return true;
     }
 
     const loadToken = ++this.stateStore.sessionLoadToken;
@@ -252,7 +265,7 @@ export class WorkspaceCoordinator {
         session: null,
         supportsBacklinks: chromeState.supportsBacklinks,
       });
-      return;
+      return true;
     }
 
     const EditorSession = await this.loadEditorSessionClass();
@@ -272,6 +285,7 @@ export class WorkspaceCoordinator {
 
         this.onContentChange({
           isBase,
+          isHtml,
           isMermaid,
           isPlantUml,
           isStructurizrWorkspace,
@@ -313,6 +327,7 @@ export class WorkspaceCoordinator {
           filePath,
           isBase,
           isExcalidraw,
+          isHtml,
           session,
           supportsBacklinks: chromeState.supportsBacklinks,
         });
@@ -426,6 +441,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 +454,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

@@ -285,8 +285,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 });