collabmd 0.1.46 → 0.1.48

package/src/client/infrastructure/editor-view-adapter.js

@@ -2,14 +2,11 @@ import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
-  history,
-  historyKeymap,
   indentLess,
   indentMore,
   indentWithTab,
-  redo,
-  undo,
 } from '@codemirror/commands';
+import { html } from '@codemirror/lang-html';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { yaml } from '@codemirror/lang-yaml';
 import {
@@ -44,15 +41,17 @@ import {
   lineNumbers,
   rectangularSelection,
 } from '@codemirror/view';
-import { yCollab } from 'y-codemirror.next';
+import { yCollab, yUndoManagerKeymap } from 'y-codemirror.next';
 
 import {
   isBaseFilePath,
+  isHtmlFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
   isStructurizrFilePath,
 } from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
+import { formatDocumentText } from '../domain/document-formatter.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { mermaidLanguage, mermaidLanguageDescription } from '../domain/mermaid-language.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
@@ -149,8 +148,6 @@ const EDITOR_COMMANDS = Object.freeze({
   indentLess,
   indentMore,
   openSearch: openSearchPanelPreservingViewport,
-  redo,
-  undo,
 });
 
 class RemoteUpdateCaretWidget extends WidgetType {
@@ -391,6 +388,10 @@ function createEditorTheme(theme) {
 }
 
 export function createLanguageExtension(filePath) {
+  if (isHtmlFilePath(filePath)) {
+    return html();
+  }
+
   if (isMermaidFilePath(filePath)) {
     return mermaidLanguage;
   }
@@ -441,6 +442,7 @@ export class EditorViewAdapter {
     this.onSelectionChanged = onSelectionChanged;
     this.onViewportChanged = onViewportChanged;
     this.editorView = null;
+    this.undoManager = null;
     this.themeCompartment = new Compartment();
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
@@ -477,11 +479,11 @@ export class EditorViewAdapter {
   }
 
   getBaseExtensions(filePath, { readOnly = false } = {}) {
+    const wikiLinkCompletionSource = wikiLinkCompletions(this.getFileList);
     const extensions = [
       lineNumbers(),
       highlightActiveLineGutter(),
       highlightSpecialChars(),
-      history(),
       foldGutter(),
       drawSelection(),
       EditorState.allowMultipleSelections.of(true),
@@ -489,9 +491,10 @@ export class EditorViewAdapter {
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
       bracketMatching({ renderMatch: renderBracketMatch }),
       closeBrackets(),
-      autocompletion({
-        override: [wikiLinkCompletions(this.getFileList)],
-      }),
+      autocompletion(),
+      EditorState.languageData.of(() => [{
+        autocomplete: wikiLinkCompletionSource,
+      }]),
       rectangularSelection(),
       crosshairCursor(),
       highlightActiveLine(),
@@ -501,7 +504,6 @@ export class EditorViewAdapter {
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
-        ...historyKeymap,
         ...searchKeymap.map((binding) => (
           binding.run === openSearchPanel
             ? { ...binding, run: openSearchPanelPreservingViewport }
@@ -593,10 +595,12 @@ export class EditorViewAdapter {
 
   initialize({ awareness, filePath, undoManager, ytext }) {
     const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    this.undoManager = undoManager;
     const state = EditorState.create({
       doc: ytext.toString(),
       extensions: [
         ...this.getBaseExtensions(filePath),
+        keymap.of(yUndoManagerKeymap),
         yCollab(ytext, awareness, { undoManager }),
       ],
     });
@@ -609,6 +613,7 @@ export class EditorViewAdapter {
 
   initializeProvisional({ content = '', filePath }) {
     const preserveScrollTop = this.editorView?.scrollDOM?.scrollTop ?? 0;
+    this.undoManager = null;
     const state = EditorState.create({
       doc: String(content ?? ''),
       extensions: this.getBaseExtensions(filePath, { readOnly: true }),
@@ -629,6 +634,7 @@ export class EditorViewAdapter {
       clearTimeout(this.remoteUpdateFlashTimer);
       this.remoteUpdateFlashTimer = 0;
     }
+    this.undoManager = null;
     this.teardownEditorView({ clearContainer: true });
   }
 
@@ -709,18 +715,58 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  async formatDocument(filePath) {
+    const view = this.editorView;
+    if (!view || view.state.readOnly) {
+      return 'unsupported';
+    }
+
+    const source = view.state.doc.toString();
+    const formatted = await formatDocumentText(filePath, source);
+    if (formatted == null) {
+      return 'unsupported';
+    }
+    if (this.editorView !== view || view.state.doc.toString() !== source) {
+      return 'changed';
+    }
+    if (formatted === source) {
+      return 'unchanged';
+    }
+
+    const selection = EditorSelection.create(view.state.selection.ranges.map(({ anchor, head }) => (
+      EditorSelection.range(Math.min(anchor, formatted.length), Math.min(head, formatted.length))
+    )));
+    view.dispatch({
+      changes: { from: 0, to: source.length, insert: formatted },
+      selection,
+      scrollIntoView: true,
+      userEvent: 'input.format',
+    });
+    view.focus();
+    return 'formatted';
+  }
+
   runEditorCommand(commandId) {
     if (!this.editorView) {
       return false;
     }
 
-    const command = EDITOR_COMMANDS[String(commandId ?? '')];
+    const normalizedCommandId = String(commandId ?? '');
+    if ((normalizedCommandId === 'undo' || normalizedCommandId === 'redo') && this.undoManager) {
+      const applied = this.undoManager[normalizedCommandId]() != null;
+      if (applied) {
+        this.editorView.focus();
+      }
+      return applied;
+    }
+
+    const command = EDITOR_COMMANDS[normalizedCommandId];
     if (typeof command !== 'function') {
       return false;
     }
 
     const applied = command(this.editorView);
-    if (applied && commandId !== 'openSearch') {
+    if (applied && normalizedCommandId !== 'openSearch') {
       this.editorView.focus();
     }
 

package/src/client/presentation/bases-preview-controller.js

@@ -10,6 +10,26 @@ function createShellKey() {
   return `base-${Math.random().toString(36).slice(2, 10)}`;
 }
 
+function replaceChildrenFromHtml(target, html) {
+  const markup = String(html ?? '');
+  if (typeof DOMParser === 'function' && typeof target?.replaceChildren === 'function') {
+    const parsed = new DOMParser().parseFromString(`<body>${markup}</body>`, 'text/html');
+    target.replaceChildren(...parsed.body.childNodes);
+    return;
+  }
+
+  // Node tests use lightweight DOM doubles without parsing APIs.
+  Reflect.set(target, 'innerHTML', markup);
+}
+
+function insertAfterFromHtml(target, html) {
+  if (typeof DOMParser !== 'function' || typeof target?.after !== 'function') {
+    return;
+  }
+  const parsed = new DOMParser().parseFromString(`<body>${String(html ?? '')}</body>`, 'text/html');
+  target.after(...parsed.body.childNodes);
+}
+
 function looksLikeHexColor(value = '') {
   return /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/iu.test(String(value ?? '').trim());
 }
@@ -617,7 +637,11 @@ function parseRawFilterText(text = '') {
   }
 
   if (normalized.startsWith('{') || normalized.startsWith('[')) {
-    return JSON.parse(normalized);
+    try {
+      return JSON.parse(normalized);
+    } catch (error) {
+      throw new Error('Invalid advanced filter JSON', { cause: error });
+    }
   }
 
   return normalized;
@@ -814,7 +838,7 @@ function syncFilterValueCombobox(entry, result, path, { fallbackToFullRender = t
   const suggestionList = combobox.querySelector('.bases-filter-suggestion-list');
   suggestionList?.remove?.();
   if (presentation.suggestionsEnabled) {
-    input.insertAdjacentHTML('afterend', renderFilterSuggestionList(presentation, rule.value ?? ''));
+    insertAfterFromHtml(input, renderFilterSuggestionList(presentation, rule.value ?? ''));
   }
 
   return true;
@@ -1091,14 +1115,14 @@ function updateShellContent(entry, result, {
 } = {}) {
   const shell = findShellElement(entry);
   if (!shell?.querySelector) {
-    entry.placeholder.innerHTML = renderShellHtml(result, entry);
+    replaceChildrenFromHtml(entry.placeholder, renderShellHtml(result, entry));
     markPlaceholderHydrated(entry.placeholder);
     return;
   }
 
   const tabsSlot = shell.querySelector('[data-base-tabs]');
   if (tabs && tabsSlot) {
-    tabsSlot.innerHTML = renderViewTabs(result);
+    replaceChildrenFromHtml(tabsSlot, renderViewTabs(result));
   }
 
   const metaSlot = shell.querySelector('[data-base-meta]');
@@ -1108,24 +1132,24 @@ function updateShellContent(entry, result, {
 
   const actionSlot = shell.querySelector('[data-base-action-slot]');
   if (actions && actionSlot) {
-    actionSlot.innerHTML = renderActionButtons(result, entry);
+    replaceChildrenFromHtml(actionSlot, renderActionButtons(result, entry));
   }
 
   const panelSlot = shell.querySelector('[data-base-panel-slot]');
   if (panel && panelSlot) {
     const panelState = capturePanelState(panelSlot);
-    panelSlot.innerHTML = renderPanel(result, entry);
+    replaceChildrenFromHtml(panelSlot, renderPanel(result, entry));
     restorePanelState(panelSlot, panelState);
   }
 
   const summarySlot = shell.querySelector('[data-base-summary-slot]');
   if (summary && summarySlot) {
-    summarySlot.innerHTML = renderSummaryBar(result.summaries);
+    replaceChildrenFromHtml(summarySlot, renderSummaryBar(result.summaries));
   }
 
   const content = shell.querySelector('[data-base-content]');
   if (body && content) {
-    content.innerHTML = renderViewBody(result);
+    replaceChildrenFromHtml(content, renderViewBody(result));
   }
 
   const input = shell.querySelector('.bases-search-input');
@@ -1663,7 +1687,7 @@ export class BasesPreviewController {
     entry.requestVersion = requestVersion;
     const hasShell = Boolean(findShellElement(entry));
     if (!hasShell) {
-      entry.placeholder.innerHTML = '<div class="preview-shell">Loading base…</div>';
+      replaceChildrenFromHtml(entry.placeholder, '<div class="preview-shell">Loading base…</div>');
     }
     try {
       const response = await this.vaultApiClient.queryBase({
@@ -1687,11 +1711,11 @@ export class BasesPreviewController {
         const shell = findShellElement(entry);
         const content = shell?.querySelector?.('[data-base-content]') ?? null;
         if (content) {
-          content.innerHTML = `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`;
+          replaceChildrenFromHtml(content, `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
           return;
         }
       }
-      entry.placeholder.innerHTML = `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`;
+      replaceChildrenFromHtml(entry.placeholder, `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
     }
   }
 

package/src/client/presentation/comment-ui/comment-ui-render.js

@@ -17,6 +17,7 @@ import {
  * @property {HTMLElement | null} commentsDrawerList
  * @property {HTMLElement | null} commentsDrawerEmpty
  * @property {HTMLElement | null} cardRoot
+ * @property {{ matches: boolean }} mobileBreakpointQuery
  * @property {HTMLElement | null} pendingCardFocusElement
  * @property {any} reactionPicker
  * @property {() => Array<any>} getThreadGroups
@@ -103,6 +104,9 @@ function renderDrawer() {
     });
     button.addEventListener('click', () => {
       this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
+      if (this.mobileBreakpointQuery?.matches) {
+        this.setDrawerOpen(false);
+      }
       this.openThreadGroup(group, {
         anchor: group.anchor,
         origin: 'editor',

package/src/client/presentation/comment-ui-controller.js

@@ -12,6 +12,7 @@ export class CommentUiController {
     commentsDrawerList,
     commentsToggleButton,
     editorContainer,
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onWillOpenDrawer,
     onCreateThread,
     onNavigateToLine,
@@ -27,6 +28,7 @@ export class CommentUiController {
     this.commentsDrawerList = commentsDrawerList;
     this.commentsToggleButton = commentsToggleButton;
     this.editorContainer = editorContainer;
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onWillOpenDrawer = onWillOpenDrawer;
     this.onCreateThread = onCreateThread;
     this.onNavigateToLine = onNavigateToLine;

package/src/client/presentation/excalidraw-embed-controller.js

@@ -27,6 +27,7 @@ export class ExcalidrawEmbedController {
     getTheme,
     getLocalUser,
     onOpenFile = null,
+    onStopFollowing = null,
     onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
@@ -35,6 +36,7 @@ export class ExcalidrawEmbedController {
     this.getTheme = getTheme;
     this.getLocalUser = getLocalUser;
     this.onOpenFile = onOpenFile;
+    this.onStopFollowing = onStopFollowing;
     this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
@@ -1227,6 +1229,11 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (msg.type === 'stop-following') {
+      this.onStopFollowing?.();
+      return;
+    }
+
     if (msg.type === 'error') {
       if (entry.isParked) {
         return;

package/src/client/presentation/file-action-controller.js

@@ -61,6 +61,7 @@ export class FileActionController {
     mobileBreakpointQuery = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
       ? window.matchMedia('(max-width: 768px)')
       : { matches: false },
+    onDirectoryExport,
     onFileDelete,
     onFileSelect,
     onShowFileExtensionsChange,
@@ -72,6 +73,7 @@ export class FileActionController {
     view,
     refresh,
   }) {
+    this.onDirectoryExport = onDirectoryExport;
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
     this.onShowFileExtensionsChange = onShowFileExtensionsChange;
@@ -226,15 +228,26 @@ export class FileActionController {
 
   getDirectoryContextMenuItems(directoryPath) {
     return [
-      ...this.createContextMenuItems(directoryPath),
+      {
+        label: 'New…',
+        onSelect: ({ anchor } = {}) => this.openCreateMenu({ anchor, parentDir: directoryPath }),
+      },
       {
         label: 'Rename / move',
         onSelect: () => this.handleRenameDirectory(directoryPath),
       },
       {
-        label: 'Download',
+        label: 'Download source ZIP',
         onSelect: () => this.handleDownloadDirectory(directoryPath),
       },
+      {
+        label: 'Export HTML',
+        onSelect: () => this.onDirectoryExport?.(directoryPath, 'html'),
+      },
+      {
+        label: 'Print / save PDF',
+        onSelect: () => this.onDirectoryExport?.(directoryPath, 'pdf'),
+      },
       {
         label: 'Delete',
         danger: true,

package/src/client/presentation/file-explorer-controller.js

@@ -8,6 +8,7 @@ export class FileExplorerController {
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onFileSelect,
     onFileDelete,
+    onDirectoryExport,
     pendingWorkspaceRequestIds = null,
     onShowFileExtensionsChange,
     showFileExtensions = false,
@@ -16,6 +17,7 @@ export class FileExplorerController {
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
+    this.onDirectoryExport = onDirectoryExport;
     this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
@@ -24,11 +26,6 @@ export class FileExplorerController {
     this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
-      onDirectorySelect: (pathValue) => {
-        this.state.expandDirectoryPath(pathValue);
-        this.state.setSearchQuery('');
-        this.renderTree({ reset: true });
-      },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
         if (!this.view.rerenderDirectoryBranch(pathValue, this.state.tree, {
@@ -61,6 +58,7 @@ export class FileExplorerController {
     });
     this.actionController = new FileActionController({
       mobileBreakpointQuery,
+      onDirectoryExport: this.onDirectoryExport,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
       onShowFileExtensionsChange: (enabled) => {

package/src/client/presentation/file-explorer-view.js

@@ -32,7 +32,6 @@ export class FileExplorerView {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onEntryDrop,
-    onDirectorySelect,
     onDirectoryToggle,
     onFileContextMenu,
     onFileSelect,
@@ -41,7 +40,6 @@ export class FileExplorerView {
     onValidateDrop,
   }) {
     this.onEntryDrop = onEntryDrop;
-    this.onDirectorySelect = onDirectorySelect;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
     this.onFileSelect = onFileSelect;
@@ -51,6 +49,7 @@ export class FileExplorerView {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
+    this.searchStatus = document.getElementById('fileSearchStatus');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
     this.renderedFileItems = new Map();
@@ -122,6 +121,18 @@ export class FileExplorerView {
     });
   }
 
+  updateSearchStatus(query, matchCount = null) {
+    if (!this.searchStatus) {
+      return;
+    }
+
+    const status = String(query ?? '').trim() && Number.isInteger(matchCount)
+      ? `${matchCount} match${matchCount === 1 ? '' : 'es'}`
+      : '';
+    this.searchStatus.textContent = status;
+    this.searchStatus.classList.toggle('hidden', !status);
+  }
+
   revealFile(filePath) {
     this.renderedFileItems.get(filePath)?.scrollIntoView({ block: 'nearest' });
   }
@@ -143,6 +154,10 @@ export class FileExplorerView {
       const threadCount = Number(this.threadCounts.get(filePath) ?? 0) || 0;
       let badge = button.querySelector('.file-tree-comment-count');
       button.classList.toggle('has-comments', threadCount > 0);
+      button.setAttribute(
+        'aria-label',
+        `${filePath}${threadCount > 0 ? `, ${threadCount} open comment thread${threadCount === 1 ? '' : 's'}` : ''}`,
+      );
 
       if (threadCount <= 0) {
         delete button.dataset.threadCount;
@@ -157,7 +172,7 @@ export class FileExplorerView {
         button.appendChild(badge);
       }
       badge.textContent = String(threadCount);
-      badge.setAttribute('aria-label', `${threadCount} open comment thread${threadCount === 1 ? '' : 's'}`);
+      badge.setAttribute('aria-hidden', 'true');
     });
   }
 
@@ -168,7 +183,7 @@ export class FileExplorerView {
 
     this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
     this.showFileExtensions = Boolean(showFileExtensions);
-    this.currentSearchQuery = String(searchQuery ?? '');
+    this.currentSearchQuery = String(searchQuery ?? '').trim();
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
     }
@@ -176,8 +191,9 @@ export class FileExplorerView {
     if (this.searchInput && this.searchInput.value !== searchQuery) {
       this.searchInput.value = searchQuery;
     }
+    this.updateSearchStatus(searchQuery, this.currentSearchQuery ? searchMatches.length : null);
 
-    if (searchQuery) {
+    if (this.currentSearchQuery) {
       this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
       return;
@@ -246,17 +262,13 @@ export class FileExplorerView {
 
     const fragment = document.createDocumentFragment();
     for (const match of matches) {
-      if (match.type === 'directory') {
-        fragment.appendChild(this.createSearchDirectoryItem(match));
-        continue;
-      }
-
       fragment.appendChild(this.createFileItem({
         activeFilePath,
         depth: 0,
         filePath: match.path,
         fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
         name: match.name || getVaultPathLeaf(match.path),
+        searchResult: true,
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -315,6 +327,8 @@ export class FileExplorerView {
 
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-dir';
+    button.title = node.path;
+    button.setAttribute('aria-label', node.path);
     button.style.setProperty('--depth', depth);
     button.dataset.depth = depth;
 
@@ -364,35 +378,6 @@ export class FileExplorerView {
     return wrapper;
   }
 
-  createSearchDirectoryItem(node) {
-    const button = document.createElement('button');
-    button.className = 'file-tree-item file-tree-dir';
-    button.style.setProperty('--depth', 0);
-    button.dataset.depth = 0;
-    button.dataset.path = node.path;
-    button.dataset.entryType = 'directory';
-    button.innerHTML = `
-      <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-      <span class="file-tree-name">${escapeHtml(node.name || getVaultPathLeaf(node.path))}</span>
-    `;
-
-    button.addEventListener('click', (event) => {
-      if (this.consumeSuppressedActivation(button, event)) {
-        return;
-      }
-      this.onDirectorySelect?.(node.path);
-    });
-    button.addEventListener('contextmenu', (event) => {
-      event.preventDefault();
-      this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
-    });
-    this.bindLongPress(button, () => {
-      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
-    });
-
-    return button;
-  }
-
   rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
     const wrapper = this.renderedDirectoryWrappers.get(parentPath);
     const parentNode = findNodeByPath(tree, parentPath);
@@ -453,10 +438,16 @@ export class FileExplorerView {
     });
   }
 
-  createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
+  createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name, searchResult = false }) {
     const button = document.createElement('button');
-    button.className = 'file-tree-item file-tree-file';
+    const parentPath = getVaultPathParent(filePath);
+    button.className = `file-tree-item file-tree-file${searchResult ? ' file-tree-search-result' : ''}`;
+    button.title = filePath;
     const threadCount = Number(this.threadCounts.get(filePath) ?? 0);
+    button.setAttribute(
+      'aria-label',
+      `${filePath}${threadCount > 0 ? `, ${threadCount} open comment thread${threadCount === 1 ? '' : 's'}` : ''}`,
+    );
     const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
     const isBase = fileType === 'base';
@@ -504,11 +495,17 @@ export class FileExplorerView {
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
-    const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
+    const displayName = this.showFileExtensions || searchResult ? String(name ?? '') : stripVaultFileExtension(name);
+    const nameMarkup = searchResult
+      ? `<span class="file-tree-search-copy">
+          <span class="file-tree-name">${escapeHtml(displayName)}</span>
+          ${parentPath ? `<span class="file-tree-search-path">${escapeHtml(parentPath)}</span>` : ''}
+        </span>`
+      : `<span class="file-tree-name">${escapeHtml(displayName)}</span>`;
     button.innerHTML = `
       ${getVaultFileIconSvg(filePath)}
-      <span class="file-tree-name">${escapeHtml(displayName)}</span>
-      ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-label="${threadCount} open comment thread${threadCount === 1 ? '' : 's'}">${threadCount}</span>` : ''}
+      ${nameMarkup}
+      ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-hidden="true">${threadCount}</span>` : ''}
     `;
     this.configureDragSource(button, { path: filePath, type: 'file' });
 
@@ -973,6 +970,7 @@ export class FileExplorerView {
       return;
     }
 
+    const contextAnchor = event.currentTarget instanceof Element ? event.currentTarget : event.target;
     const menu = document.createElement('div');
     menu.className = 'file-context-menu';
 
@@ -982,7 +980,7 @@ export class FileExplorerView {
       button.textContent = item.label;
       button.addEventListener('click', () => {
         this.removeContextMenu();
-        item.onSelect?.();
+        item.onSelect?.({ anchor: contextAnchor });
       });
       menu.appendChild(button);
     }

package/src/client/presentation/file-history-view-controller.js

@@ -526,6 +526,7 @@ export class FileHistoryViewController {
     }
 
     if (this.stats) {
+      // pi-lens-ignore: no-inner-html-js
       this.stats.innerHTML = `
         <span class="ui-stat-token ui-stat-token--add diff-stats-add">+${additions}</span>
         <span class="ui-stat-token ui-stat-token--del diff-stats-del">-${deletions}</span>
@@ -574,6 +575,7 @@ export class FileHistoryViewController {
     this.page?.classList.remove('hidden');
     if (this.content) {
       this.content.classList.add('diff-content--history');
+      // pi-lens-ignore: no-inner-html-js
       this.content.innerHTML = `<div class="git-panel-empty">${escapeHtml(message)}</div>`;
     }
     this.historyListElement = null;
@@ -714,7 +716,9 @@ export class FileHistoryViewController {
     if (selection.loading) {
       return `
         <section class="diff-file-block file-history-diff-block">
-          ${this.renderDiffFileHeader({ path: entry.pathAtCommit || this.currentFilePath || '' })}
+          <div class="diff-file-header">
+            <span class="diff-file-path">${escapeHtml(entry.pathAtCommit || this.currentFilePath || '')}</span>
+          </div>
           <div class="diff-empty-state">Loading diff...</div>
         </section>
       `;
@@ -770,6 +774,7 @@ export class FileHistoryViewController {
 
     this.content.classList.add('diff-content--history');
     const selection = this.getSelectedDetailState();
+    // pi-lens-ignore: no-inner-html-js
     this.content.innerHTML = `
       <section class="file-history-shell">
         <aside class="file-history-sidebar" aria-label="File history entries">