collabmd 0.1.46 → 0.1.48

package/src/client/presentation/file-tree-state.js

@@ -13,17 +13,7 @@ function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
       type: node.type,
     });
 
-    if (
-      node.type === 'file'
-      || node.type === 'base'
-      || node.type === 'excalidraw'
-      || node.type === 'drawio'
-      || node.type === 'mermaid'
-      || node.type === 'plantuml'
-      || node.type === 'structurizr'
-      || node.type === 'pdf'
-      || node.type === 'image'
-    ) {
+    if (node.type !== 'directory') {
       files.push(node.path);
       fileEntries.push({
         mtimeMs: node.mtimeMs,
@@ -104,16 +94,17 @@ export class FileTreeState {
   }
 
   setSearchQuery(value) {
-    this.searchQuery = String(value ?? '').trim().toLowerCase();
+    this.searchQuery = String(value ?? '');
   }
 
   getSearchMatches() {
-    if (!this.searchQuery) {
+    const normalizedQuery = this.searchQuery.trim().toLowerCase();
+    if (!normalizedQuery) {
       return [];
     }
 
     return this.flatSearchEntries
-      .filter((entry) => entry.lowerPath.includes(this.searchQuery))
+      .filter((entry) => entry.type !== 'directory' && entry.lowerPath.includes(normalizedQuery))
       .map((entry) => ({
         name: entry.name,
         path: entry.path,

package/src/client/presentation/git-diff-view-controller.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { commitButtonLabel } from '../domain/git-labels.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { renderDrawioViewer } from './drawio-viewer.js';
@@ -456,6 +457,7 @@ export class GitDiffViewController {
     this.data = null;
     this.currentIndex = 0;
     this.activeFilePath = null;
+    this.workspaceFilePath = null;
     this.fileCache = new Map();
     this.fileErrors = new Map();
     this.loadingFiles = new Set();
@@ -507,12 +509,12 @@ export class GitDiffViewController {
         return;
       }
 
-      const currentFile = this.getCurrentFile();
-      if (!currentFile?.path) {
+      const filePath = this.getCurrentFile()?.path ?? this.workspaceFilePath;
+      if (!filePath) {
         return;
       }
 
-      this.onOpenFile?.(currentFile.path);
+      this.onOpenFile?.(filePath);
     });
     this.primaryActionButton?.addEventListener('click', () => {
       if (!this.isActive) {
@@ -611,6 +613,7 @@ export class GitDiffViewController {
     this.layoutMode = 'focused';
     this.currentIndex = 0;
     this.activeFilePath = null;
+    this.workspaceFilePath = null;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -624,7 +627,6 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = null;
     this.pendingAction = null;
-    this.repoStatus = null;
   }
 
   async openWorkspaceDiff({ filePath = null, scope = 'all' } = {}) {
@@ -636,6 +638,7 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = null;
     this.activeFilePath = filePath;
+    this.workspaceFilePath = filePath;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -688,6 +691,7 @@ export class GitDiffViewController {
     this.commitMeta = null;
     this.historyFilePath = String(historyFilePath ?? '').trim() || null;
     this.activeFilePath = path || null;
+    this.workspaceFilePath = null;
     this.fileCache.clear();
     this.fileErrors.clear();
     this.loadingFiles.clear();
@@ -792,6 +796,7 @@ export class GitDiffViewController {
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
     }
     this.data = null;
@@ -804,6 +809,7 @@ export class GitDiffViewController {
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
     }
     this.syncToolbar();
@@ -1240,10 +1246,14 @@ export class GitDiffViewController {
     const headerStats = fileKind === 'image'
       ? `<span class="diff-file-header-kind">${escapeHtml(getImageFormat(file.path))} image</span>`
       : `<span class="diff-file-header-stats"><span class="ui-stat-token ui-stat-token--add diff-stats-add">+${file.stats?.additions ?? 0}</span><span class="ui-stat-token ui-stat-token--del diff-stats-del">-${file.stats?.deletions ?? 0}</span></span>`;
+    const inclusionStatus = file.hasStagedChanges
+      ? '<span class="ui-pill-badge ui-pill-badge--muted" aria-label="Included in next commit">✓ Included</span>'
+      : '';
     return `
       <div class="diff-file-header">
         <span class="diff-file-path">${escapeHtml(file.path)}</span>
         <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
+        ${inclusionStatus}
         ${headerStats}
       </div>
     `;
@@ -1837,8 +1847,8 @@ export class GitDiffViewController {
         this.fileIndicator.textContent = `${totalFiles} file${totalFiles === 1 ? '' : 's'}`;
       } else {
         this.fileIndicator.textContent = totalFiles > 0
-          ? `${visibleIndex} / ${totalFiles} files`
-          : '0 / 0 files';
+          ? `${visibleIndex} of ${totalFiles}`
+          : '0 files';
       }
     }
 
@@ -1859,6 +1869,7 @@ export class GitDiffViewController {
       const deletions = allFilesAreImages
         ? 0
         : Math.max(0, rawDeletions - imageLineStats.deletions);
+      // pi-lens-ignore: ast-grep: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>
@@ -1874,8 +1885,10 @@ export class GitDiffViewController {
     });
 
     const hasCurrentFile = Boolean(this.getCurrentFile()?.path);
+    const hasEditorFile = hasCurrentFile || Boolean(this.workspaceFilePath);
     const actionState = this.getCurrentActionState();
     const primaryAction = this.getPrimaryAction();
+    const includedFileCount = Number(this.repoStatus?.summary?.staged || 0);
 
     this.backToHistoryButton?.classList.toggle('hidden', !isCommitSource);
     this.gitActionsGroup?.classList.toggle('hidden', isCommitSource);
@@ -1885,23 +1898,33 @@ export class GitDiffViewController {
     this.stats?.classList.remove('hidden');
 
     if (this.openEditorButton) {
-      this.openEditorButton.textContent = 'Open in Editor';
+      this.openEditorButton.textContent = 'Open in editor';
     }
-    this.openEditorButton?.toggleAttribute('disabled', !hasCurrentFile || isCommitSource);
+    this.openEditorButton?.toggleAttribute('disabled', !hasEditorFile || isCommitSource);
     if (this.primaryActionButton) {
+      const emphasizeInclude = primaryAction === 'stage' && !actionState.canUnstage;
+      this.primaryActionButton.classList.toggle('ui-button--primary', emphasizeInclude);
+      this.primaryActionButton.classList.toggle('ui-button--secondary', !emphasizeInclude);
+      this.primaryActionButton.classList.toggle('ui-button--surface', !emphasizeInclude);
       this.primaryActionButton.textContent = this.pendingAction === primaryAction
         ? 'Working...'
         : primaryAction === 'unstage'
-          ? 'Unstage'
-          : 'Stage';
+          ? 'Remove'
+          : 'Include in commit';
       this.primaryActionButton.toggleAttribute(
         'disabled',
         isCommitSource || !hasCurrentFile || !primaryAction || Boolean(this.pendingAction),
       );
     }
     if (this.commitButton) {
-      this.commitButton.textContent = this.pendingAction === 'commit' ? 'Working...' : 'Commit Staged';
+      this.commitButton.textContent = this.pendingAction === 'commit'
+        ? 'Working...'
+        : commitButtonLabel(includedFileCount);
     }
+    this.commitButton?.classList.toggle(
+      'hidden',
+      isCommitSource || !hasCurrentFile || !actionState.canUnstage,
+    );
     this.commitButton?.toggleAttribute(
       'disabled',
       isCommitSource || !actionState.canCommit || Boolean(this.pendingAction),
@@ -1934,8 +1957,10 @@ export class GitDiffViewController {
     this.drawioPreviewPayloads.clear();
 
     if (this.source === 'commit') {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = `${this.renderCommitHeader()}${this.renderCommitBody()}`;
     } else {
+      // pi-lens-ignore: ast-grep:no-inner-html-js
       this.content.innerHTML = this.renderFocusedFileBody();
     }
     this.syncToolbar();

package/src/client/presentation/git-panel-controller.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { commitButtonLabel } from '../domain/git-labels.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
@@ -659,12 +660,13 @@ export class GitPanelController {
     }
 
     const isCollapsed = this.collapsedSections.has(section.key);
+    const label = section.key === 'staged' ? 'Included in Next Commit' : section.label;
 
     return `
       <section class="git-section">
         <button class="git-section-header" type="button" data-git-section-toggle="${escapeHtml(section.key)}">
           ${chevronSvg(isCollapsed)}
-          ${escapeHtml(section.label)}
+          ${escapeHtml(label)}
           <span class="ui-pill-badge ui-pill-badge--count ui-pill-badge--muted git-section-count">${files.length}</span>
         </button>
         <div class="git-file-list${isCollapsed ? ' hidden' : ''}">
@@ -724,8 +726,8 @@ export class GitPanelController {
     const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'
-      ? { label: 'Unstage', value: 'unstage' }
-      : { label: 'Stage', value: 'stage' };
+      ? { label: 'Remove from commit', value: 'unstage' }
+      : { label: 'Include in commit', value: 'stage' };
     const actionKey = `${stageAction.value}:${file.scope}:${file.path}`;
     const isPending = this.pendingActionKey === actionKey;
     const resetActionKey = `reset:${file.scope}:${file.path}`;
@@ -874,12 +876,12 @@ export class GitPanelController {
       .filter(Boolean)
       .join('');
     const hasChanges = Boolean(this.status.summary?.changedFiles);
-    const hasStagedChanges = Number(this.status.summary?.staged || 0) > 0;
+    const includedFileCount = Number(this.status.summary?.staged || 0);
     const isCommitPending = this.pendingActionKey === 'commit-staged';
 
     return `
       ${pullBackupsMarkup}
-      ${sectionMarkup || '<div class="git-panel-empty">No local changes</div>'}
+      ${sectionMarkup || `<div class="git-panel-empty">${this.searchQuery && hasChanges ? 'No changes match your filter.' : 'No local changes'}</div>`}
       ${hasChanges ? `
         <div class="git-panel-footer">
           <div class="git-panel-footer-actions">
@@ -891,9 +893,9 @@ export class GitPanelController {
               class="${buttonClassNames({ variant: 'primary', action: true, wide: true, extra: 'git-footer-commit-btn' })}"
               type="button"
               data-git-commit-staged
-              ${!hasStagedChanges || isCommitPending ? 'disabled' : ''}
+              ${includedFileCount === 0 || isCommitPending ? 'disabled' : ''}
             >
-              ${isCommitPending ? 'Working...' : 'Commit Staged'}
+              ${isCommitPending ? 'Working...' : commitButtonLabel(includedFileCount)}
             </button>
           </div>
         </div>
@@ -906,6 +908,7 @@ export class GitPanelController {
       return;
     }
 
+    // pi-lens-ignore: ast-grep:no-inner-html-js
     this.panel.innerHTML = `
       <div class="git-panel-empty ui-empty-state ui-empty-state--compact">
         <p class="ui-empty-state-copy">${escapeHtml(message)}</p>
@@ -933,6 +936,7 @@ export class GitPanelController {
     const isPullPending = this.pendingActionKey === 'sync:pull';
     const isPushPending = this.pendingActionKey === 'sync:push';
 
+    // pi-lens-ignore: ast-grep:no-inner-html-js
     this.panel.innerHTML = `
       <div class="git-branch-bar">
         <div class="git-branch-meta">
@@ -947,7 +951,7 @@ export class GitPanelController {
             class="${buttonClassNames({ variant: 'secondary', size: 'compact', pill: true, surface: true, extra: 'ui-action-pill' })}"
             type="button"
             data-git-sync-action="pull"
-            title="${hasUpstream ? 'Pull remote changes (fast-forward only)' : 'No upstream branch configured'}"
+            title="${hasUpstream ? 'Pull remote changes' : 'No upstream branch configured'}"
             aria-label="Pull branch"
             ${!hasUpstream || isPullPending ? 'disabled' : ''}
           >

package/src/client/presentation/quick-switcher-controller.js

@@ -1,5 +1,4 @@
-import { stripVaultFileExtension } from '../../domain/file-kind.js';
-import { escapeHtml } from '../domain/vault-utils.js';
+import { createFileSearchEntry, findFileSearchMatch } from '../domain/file-search.js';
 import { getVaultFileIconSvg } from './file-icon-svg.js';
 import {
   DEFAULT_SEARCH_DEBOUNCE_MS,
@@ -17,108 +16,15 @@ function getRawFileName(filePath) {
   return String(filePath ?? '').split('/').pop() || String(filePath ?? '');
 }
 
-function createCorpusEntry(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
-  const fileName = displayName.split('/').pop() || displayName;
-  const rawFileName = getRawFileName(filePath);
-
-  return {
-    displayName,
-    fileName,
-    filePath,
-    lowerDisplayName: displayName.toLowerCase(),
-    lowerFileName: fileName.toLowerCase(),
-    lowerPath: String(filePath).toLowerCase(),
-    lowerRawFileName: rawFileName.toLowerCase(),
-  };
-}
-
 function getFileName(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
-  return displayName.split('/').pop() || displayName;
+  return createFileSearchEntry(filePath).fileName;
 }
 
 function getDirPath(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
+  const displayName = createFileSearchEntry(filePath).displayName;
   return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
 }
 
-function createRangeIndices(start, length) {
-  return Array.from({ length }, (_, index) => start + index);
-}
-
-function findFuzzyMatch(text, query) {
-  const indices = [];
-  let queryIndex = 0;
-  let score = 0;
-  let consecutiveBonus = 0;
-
-  for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
-    if (text[index] !== query[queryIndex]) {
-      consecutiveBonus = 0;
-      continue;
-    }
-
-    queryIndex += 1;
-    indices.push(index);
-    consecutiveBonus += 1;
-    score += consecutiveBonus;
-
-    if (
-      index === 0
-      || text[index - 1] === '/'
-      || text[index - 1] === '-'
-      || text[index - 1] === '_'
-      || text[index - 1] === ' '
-    ) {
-      score += 5;
-    }
-  }
-
-  return queryIndex === query.length && score > 0
-    ? { indices, score }
-    : null;
-}
-
-function findCorpusMatch(entry, query) {
-  const fileIndex = entry.lowerFileName.indexOf(query);
-  if (fileIndex >= 0) {
-    return {
-      indices: createRangeIndices(fileIndex + (entry.displayName.length - entry.fileName.length), query.length),
-      score: 100 + (1 / entry.fileName.length),
-    };
-  }
-
-  const pathIndex = entry.lowerDisplayName.indexOf(query);
-  if (pathIndex >= 0) {
-    return {
-      indices: createRangeIndices(pathIndex, query.length),
-      score: 50 + (1 / entry.displayName.length),
-    };
-  }
-
-  const rawFileIndex = entry.lowerRawFileName.indexOf(query);
-  if (rawFileIndex >= 0) {
-    return {
-      indices: createRangeIndices(
-        rawFileIndex + (entry.displayName.length - entry.fileName.length),
-        query.length,
-      ),
-      score: 40 + (1 / entry.lowerRawFileName.length),
-    };
-  }
-
-  const rawPathIndex = entry.lowerPath.indexOf(query);
-  if (rawPathIndex >= 0) {
-    return {
-      indices: createRangeIndices(rawPathIndex, query.length),
-      score: 25 + (1 / entry.lowerPath.length),
-    };
-  }
-
-  return findFuzzyMatch(entry.lowerDisplayName, query);
-}
-
 function splitMatchIndices(entry, indices = []) {
   const fileNameStart = entry.displayName.length - entry.fileName.length;
   return {
@@ -129,42 +35,25 @@ function splitMatchIndices(entry, indices = []) {
   };
 }
 
-function highlightText(text, indices = []) {
-  if (indices.length === 0) {
-    return escapeHtml(text);
-  }
-
+function appendHighlightedText(element, text, indices = []) {
   const matchedIndices = new Set(indices);
-  let result = '';
-  let runStart = null;
   let cursor = 0;
 
-  const appendRun = (runEnd) => {
-    result += escapeHtml(text.slice(cursor, runStart));
-    result += `<mark>${escapeHtml(text.slice(runStart, runEnd + 1))}</mark>`;
-    cursor = runEnd + 1;
-    runStart = null;
-  };
-
-  for (let index = 0; index < text.length; index += 1) {
-    if (!matchedIndices.has(index)) {
-      if (runStart !== null) {
-        appendRun(index - 1);
-      }
-      continue;
-    }
+  while (cursor < text.length) {
+    const matched = matchedIndices.has(cursor);
+    let end = cursor + 1;
+    while (end < text.length && matchedIndices.has(end) === matched) end += 1;
 
-    if (runStart === null) {
-      runStart = index;
+    const value = text.slice(cursor, end);
+    if (matched) {
+      const mark = document.createElement('mark');
+      mark.textContent = value;
+      element.append(mark);
+    } else {
+      element.append(value);
     }
+    cursor = end;
   }
-
-  if (runStart !== null) {
-    appendRun(text.length - 1);
-  }
-
-  result += escapeHtml(text.slice(cursor));
-  return result;
 }
 
 export class QuickSwitcherController {
@@ -193,6 +82,12 @@ export class QuickSwitcherController {
     this.hint = document.getElementById('quickSwitcherHint');
     this.scope = document.getElementById('quickSwitcherScope');
     this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
+    const searchConfig = this.getSearchConfig?.() ?? {};
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    if (textTab && searchConfig.available === false) {
+      textTab.disabled = true;
+      textTab.setAttribute('title', searchConfig.unavailableReason || 'Text search is unavailable');
+    }
 
     this.filteredFiles = [];
     this.fileMatches = new Map();
@@ -219,9 +114,32 @@ export class QuickSwitcherController {
       if (e.target === this.overlay) this.close();
     });
 
-    this.modeTabs.forEach((tab) => {
+    this.overlay?.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+      }
+    });
+
+    this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
         this.setMode(tab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        this.input?.focus?.();
+      });
+      tab.addEventListener('keydown', (event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+          return;
+        }
+
+        event.preventDefault();
+        const nextIndex = (index + (event.key === 'ArrowRight' ? 1 : -1) + this.modeTabs.length)
+          % this.modeTabs.length;
+        const nextTab = this.modeTabs[nextIndex];
+        if (nextTab.disabled) {
+          return;
+        }
+        this.setMode(nextTab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        nextTab.focus();
       });
     });
 
@@ -243,13 +161,9 @@ export class QuickSwitcherController {
           e.preventDefault();
           this.confirmSelection();
           break;
-        case 'Escape':
-          e.preventDefault();
-          this.close();
-          break;
         case 'Tab':
           e.preventDefault();
-          if (this.modeTabs.length > 1 && !e.shiftKey) {
+          if (this.modeTabs.filter((tab) => !tab.disabled).length > 1 && !e.shiftKey) {
             this.setMode(this.mode === 'files' ? 'text' : 'files', { preserveInput: true });
           } else {
             this.moveSelection(e.shiftKey ? -1 : 1);
@@ -269,6 +183,7 @@ export class QuickSwitcherController {
     this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
     this.overlay.setAttribute('aria-hidden', 'false');
+    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
@@ -325,6 +240,7 @@ export class QuickSwitcherController {
     this.isOpen = false;
     this.overlay.classList.remove('visible');
     this.overlay.setAttribute('aria-hidden', 'true');
+    this.input?.setAttribute('aria-expanded', 'false');
     this.input.value = '';
     this.resultsList.innerHTML = '';
     this.setActiveDescendant('');
@@ -344,7 +260,8 @@ export class QuickSwitcherController {
   }
 
   setMode(mode = 'files', { preserveInput = false } = {}) {
-    const normalizedMode = mode === 'text' ? 'text' : 'files';
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    const normalizedMode = mode === 'text' && !textTab?.disabled ? 'text' : 'files';
     this.mode = normalizedMode;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
@@ -357,6 +274,7 @@ export class QuickSwitcherController {
       const isActive = tab.dataset.qsMode === normalizedMode;
       tab.classList.toggle('active', isActive);
       tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
     });
 
     this.scope?.classList.toggle('hidden', normalizedMode !== 'text');
@@ -386,11 +304,12 @@ export class QuickSwitcherController {
   }
 
   filterFiles() {
-    const query = this.input?.value.trim().toLowerCase() ?? '';
+    this.resultsList?.setAttribute('aria-busy', 'false');
+    const query = this.input?.value.trim().toLowerCase().replace(/\s+/gu, ' ') ?? '';
     const allFiles = this.getFileList?.() ?? [];
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
-      this.fileCorpus = allFiles.map((filePath) => createCorpusEntry(filePath));
+      this.fileCorpus = allFiles.map((filePath) => createFileSearchEntry(filePath));
     }
 
     this.fileMatches.clear();
@@ -423,7 +342,7 @@ export class QuickSwitcherController {
       const ranked = [];
       let fileMatchCount = 0;
       this.fileCorpus.forEach((entry) => {
-        const match = findCorpusMatch(entry, query);
+        const match = findFileSearchMatch(entry, query);
         if (!match) {
           return;
         }
@@ -517,11 +436,20 @@ export class QuickSwitcherController {
       const corpusEntry = this.fileCorpus.find((entry) => entry.filePath === filePath);
       const matchIndices = corpusEntry ? splitMatchIndices(corpusEntry, match?.indices) : { dirPath: [], fileName: [] };
 
-      item.innerHTML = `
-        ${getVaultFileIconSvg(filePath, { className: 'qs-result-icon' })}
-        <span class="qs-result-name">${highlightText(fileName, matchIndices.fileName)}</span>
-        ${dirPath ? `<span class="qs-result-path">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
-      `;
+      const svg = getVaultFileIconSvg(filePath, { className: 'qs-result-icon' });
+      item.append(document.createRange().createContextualFragment(svg));
+      const name = document.createElement('span');
+      name.className = 'qs-result-name';
+      appendHighlightedText(name, fileName, matchIndices.fileName);
+      item.append(name);
+
+      if (dirPath) {
+        const path = document.createElement('span');
+        path.className = 'qs-result-path';
+        path.title = dirPath;
+        appendHighlightedText(path, dirPath, matchIndices.dirPath);
+        item.append(path);
+      }
 
       item.addEventListener('click', () => {
         this.selectedIndex = index;
@@ -606,11 +534,16 @@ export class QuickSwitcherController {
 
       const header = document.createElement('div');
       header.className = 'qs-text-group-header';
-      header.innerHTML = `
-        <span class="qs-text-file-name">${escapeHtml(getFileName(fileGroup.file))}</span>
-        <span class="qs-text-file-meta">${escapeHtml(getDirPath(fileGroup.file))}</span>
-        <span class="qs-text-count">${escapeHtml(formatMatchCount(fileGroup.matchCount, { truncated: fileGroup.truncated }))}</span>
-      `;
+      [
+        ['qs-text-file-name', getFileName(fileGroup.file)],
+        ['qs-text-file-meta', getDirPath(fileGroup.file)],
+        ['qs-text-count', formatMatchCount(fileGroup.matchCount, { truncated: fileGroup.truncated })],
+      ].forEach(([className, text]) => {
+        const span = document.createElement('span');
+        span.className = className;
+        span.textContent = text;
+        header.append(span);
+      });
       group.appendChild(header);
 
       (fileGroup.snippets ?? []).forEach((snippet) => {
@@ -625,10 +558,13 @@ export class QuickSwitcherController {
         item.setAttribute('role', 'option');
         item.setAttribute('aria-selected', itemIndex === this.selectedTextIndex ? 'true' : 'false');
         item.dataset.textIndex = String(itemIndex);
-        item.innerHTML = `
-          <span class="qs-text-line">L${escapeHtml(String(snippet.line ?? 1))}</span>
-          <span class="qs-text-snippet">${this.highlightSnippet(snippet)}</span>
-        `;
+        const line = document.createElement('span');
+        line.className = 'qs-text-line';
+        line.textContent = `L${snippet.line ?? 1}`;
+        const snippetText = document.createElement('span');
+        snippetText.className = 'qs-text-snippet';
+        this.appendHighlightedSnippet(snippetText, snippet);
+        item.append(line, snippetText);
         item.addEventListener('click', () => {
           this.selectedTextIndex = itemIndex;
           this.confirmSelection();
@@ -648,11 +584,14 @@ export class QuickSwitcherController {
     this.updateSelection();
   }
 
-  highlightSnippet(snippet = {}) {
+  appendHighlightedSnippet(element, snippet = {}) {
     const text = String(snippet.text ?? '');
     const start = Math.min(Math.max(Number(snippet.matchStart) || 0, 0), text.length);
     const end = Math.min(Math.max(Number(snippet.matchEnd) || start, start), text.length);
-    return `${escapeHtml(text.slice(0, start))}<mark>${escapeHtml(text.slice(start, end))}</mark>${escapeHtml(text.slice(end))}`;
+    element.append(text.slice(0, start));
+    const mark = document.createElement('mark');
+    mark.textContent = text.slice(start, end);
+    element.append(mark, text.slice(end));
   }
 
   moveSelection(delta) {