collabmd 0.1.46 → 0.1.47

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

@@ -9,6 +9,9 @@ import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
+hljs.registerAliases(['cql', 'mariadb', 'mssql', 'mysql', 'plsql', 'sqlite'], { languageName: 'sql' });
+hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
+
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
   '.mp4': 'video/mp4',
   '.ogg': 'video/ogg',

package/src/client/application/quick-switcher-loader.js

@@ -27,7 +27,7 @@ export async function ensureQuickSwitcherInstance(host) {
       getSearchConfig: () => host.runtimeConfig.search ?? {},
       onFileSelect: (filePath) => host.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
-        revealInTree: true,
+        revealInTree: !host.isMobileViewport(),
       }),
       onTextMatchSelect: (match) => {
         if (!match?.file) {

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

@@ -93,7 +93,6 @@ export class WorkspacePreviewController {
 
   resetPreviewMode() {
     this.pdfPreview.cancel();
-    this.elements.previewContainer?.classList?.remove('is-pdf-file-preview');
     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');
@@ -272,14 +271,12 @@ export class WorkspacePreviewController {
     this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
-    this.elements.previewContainer?.classList?.add('is-pdf-file-preview');
     previewElement.classList.add('is-pdf-file-preview');
     const renderHost = this.previewRenderer.ensureRenderHost();
     this.previewRenderer.normalizePreviewChildren(renderHost);
 
     if (renderHost) {
       this.pdfPreview.render({
-        displayName: this.getDisplayName(filePath),
         filePath,
         renderHost,
       });

package/src/client/assets/vendor/highlight/github-dark.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub Dark
-  Description: Dark theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-dark
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
+/* Highlight.js tokens mapped to CodeMirror's oneDarkHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword{color:#c678dd}.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable{color:#e06c75}.hljs-title.function_,.hljs-title.function_.invoke__{color:#61afef}.hljs-name,.hljs-selector-tag,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-type{color:#e5c07b}.hljs-atom,.hljs-built_in,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#d19a66}.hljs-number{color:#e5c07b}.hljs-meta .hljs-string,.hljs-string{color:#98c379}.hljs-link,.hljs-operator,.hljs-regexp{color:#56b6c2}.hljs-code,.hljs-comment,.hljs-formula,.hljs-meta,.hljs-quote{color:#7d8799}.hljs-subst{color:#abb2bf}.hljs-section{color:#e06c75;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#98c379}.hljs-deletion{color:#e06c75}

package/src/client/assets/vendor/highlight/github.min.css

@@ -1,10 +1,2 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+/* Highlight.js tokens mapped to CodeMirror's defaultHighlightStyle. */
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#404740;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-selector-tag{color:#708}.hljs-atom,.hljs-bullet,.hljs-literal,.hljs-symbol,.hljs-variable.language_{color:#219}.hljs-number{color:#164}.hljs-meta .hljs-string,.hljs-regexp{color:#e40}.hljs-string{color:#a11}.hljs-title.function_,.hljs-title.function_.invoke__{color:#00f}.hljs-title.class_,.hljs-title.class_.inherited__{color:#167}.hljs-built_in,.hljs-name,.hljs-type{color:#085}.hljs-attr,.hljs-attribute,.hljs-property{color:#00c}.hljs-code,.hljs-comment,.hljs-formula,.hljs-quote{color:#940}.hljs-meta,.hljs-operator,.hljs-subst,.hljs-variable{color:#404740}.hljs-section{color:#00f;font-weight:700}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-addition{color:#164}.hljs-deletion{color:#a11}

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

@@ -99,7 +99,13 @@ export class CollabMdAppShell {
     this.sessionLoadToken = 0;
     this.navigation = {
       getHashRoute,
-      navigateToFile,
+      navigateToFile: (filePath, options = {}) => {
+        const { preserveFollow = false, ...routeOptions } = options;
+        if (!preserveFollow && filePath !== this.currentFilePath) {
+          this.stopFollowingUser();
+        }
+        navigateToFile(filePath, routeOptions);
+      },
       navigateToGitCommit,
       navigateToGitDiff,
       navigateToGitFileHistory,
@@ -247,6 +253,7 @@ export class CollabMdAppShell {
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
+        this.syncPreviewCodeCopyButtons();
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
@@ -288,8 +295,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.pdfPreview = new PdfPreviewController({
-      outlineController: this.outlineController,
-      previewContainer: this.elements.previewContainer,
+      getTheme: () => this.themeController.getTheme(),
     });
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
@@ -304,6 +310,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onStopFollowing: () => this.stopFollowingUser(),
       onToggleQuickSwitcher: () => {
         void this.toggleQuickSwitcher();
       },

package/src/client/excalidraw-editor.js

@@ -441,6 +441,7 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
     },
     onPointerDown: () => {
       initialViewportFitPending = false;
+      stopFollowingFromLocalInteraction();
     },
     renderTopRightUI,
     historyOptions: {
@@ -1379,7 +1380,17 @@ function postToParent(type, payload = {}) {
   window.parent.postMessage({ source: 'excalidraw-editor', type, ...payload }, parentOrigin);
 }
 
+function stopFollowingFromLocalInteraction() {
+  if (!pendingHostFollowPeerId && !followedSocketId) {
+    return;
+  }
+
+  applyHostFollowRequest(null);
+  postToParent('stop-following');
+}
+
 function handleQuickSwitcherKeyDown(event) {
+  stopFollowingFromLocalInteraction();
   if (!isPlainQuickSwitcherShortcut(event)) {
     return;
   }

package/src/client/export/export-host.js

@@ -12,7 +12,7 @@ function createJobId() {
 }
 
 function normalizeFormat(format) {
-  return format === 'pdf' ? 'pdf' : 'docx';
+  return ['html', 'pdf'].includes(format) ? format : 'docx';
 }
 
 function buildExportUrl({ filePath, format, jobId }) {

package/src/client/export/export-page.js

@@ -51,9 +51,13 @@ async function bootstrap() {
     const snapshot = await prepareExportSnapshot(payload);
     const mount = renderSnapshot(snapshot);
     snapshot.html = await waitForRenderedExportContent(mount);
-    setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
+    setStatus(payload.action === 'pdf'
+      ? 'Opening print dialog…'
+      : `Preparing ${payload.action.toUpperCase()} download…`);
     await runExportAdapter(snapshot, payload.action);
-    setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');
+    setStatus(payload.action === 'pdf'
+      ? 'Print dialog opened.'
+      : `${payload.action.toUpperCase()} download started.`);
     postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Export failed';

package/src/client/export/export-pipeline.js

@@ -1,5 +1,12 @@
 import { exportToSvg as exportExcalidrawToSvg } from '@excalidraw/excalidraw';
 
+import baseStyles from '../styles/base.css?inline';
+import tokenStyles from '../styles/foundation/tokens.css?inline';
+import themeStyles from '../styles/foundation/themes.css?inline';
+import previewStyles from '../styles/features/preview-markdown.css?inline';
+import highlightOverrideStyles from '../styles/overrides/highlightjs.css?inline';
+import exportStyles from '../styles/export-document.css?inline';
+import highlightStyles from '../assets/vendor/highlight/github.min.css?inline';
 import {
   encodeSvgDataUrl,
   loadImage,
@@ -9,6 +16,7 @@ import {
 import { compilePreviewDocument } from '../application/preview-render-compiler.js';
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
+import { escapeHtml } from '../domain/vault-utils.js';
 import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
 
@@ -46,6 +54,20 @@ const DOCX_IMAGE_TYPE_LABELS = new Map([
   ['image/gif', 'GIF'],
   ['image/webp', 'WebP'],
 ]);
+const HTML_EXPORT_STYLES = [
+  baseStyles,
+  tokenStyles,
+  themeStyles,
+  previewStyles,
+  highlightOverrideStyles,
+  exportStyles,
+  highlightStyles,
+  `html, body {
+    height: auto;
+    min-height: 100%;
+    overflow: visible;
+  }`,
+].join('\n');
 
 let mermaidLoaderPromise = null;
 let assetCounter = 0;
@@ -1387,6 +1409,37 @@ export function buildDocxHtmlDocument(snapshot) {
 </html>`;
 }
 
+export function buildHtmlDocument(snapshot) {
+  const template = document.createElement('template');
+  template.innerHTML = snapshot.html;
+  Array.from(template.content.querySelectorAll('[data-export-docx-src]')).forEach((element) => {
+    element.removeAttribute('data-export-docx-src');
+  });
+
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(snapshot.title)}</title>
+  <style>${HTML_EXPORT_STYLES.replace(/<\/style/giu, '<\\/style')}</style>
+</head>
+<body data-theme="light">
+  <main class="export-page-shell">
+    <article class="preview-content export-content">${template.innerHTML}</article>
+  </main>
+</body>
+</html>`;
+}
+
+export function htmlAdapter(snapshot) {
+  downloadBlob(
+    new Blob([buildHtmlDocument(snapshot)], { type: 'text/html;charset=utf-8' }),
+    `${createDocumentTitle(snapshot.filePath, snapshot.title)}.html`,
+    { removeDelayMs: 0, revokeDelayMs: 1000 },
+  );
+}
+
 export async function docxAdapter(snapshot) {
   const response = await fetch(resolveApiUrl('/export/docx'), {
     body: JSON.stringify({
@@ -1461,6 +1514,11 @@ export async function runExportAdapter(snapshot, format) {
     return;
   }
 
+  if (format === 'html') {
+    await htmlAdapter(snapshot);
+    return;
+  }
+
   await docxAdapter(snapshot);
 }
 
@@ -1478,7 +1536,8 @@ export function postExportPageMessage(type, payload = {}) {
 
 export async function waitForBootstrapPayload() {
   const requestUrl = new URL(window.location.href);
-  const action = requestUrl.searchParams.get('action') === 'pdf' ? 'pdf' : 'docx';
+  const requestedAction = requestUrl.searchParams.get('action');
+  const action = ['html', 'pdf'].includes(requestedAction) ? requestedAction : 'docx';
   const filePath = requestUrl.searchParams.get('file') || '';
   const jobId = requestUrl.searchParams.get('job') || '';
 

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-explorer-controller.js

@@ -24,11 +24,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, {

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' });
 

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

@@ -104,16 +104,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-panel-controller.js

@@ -879,7 +879,7 @@ export class GitPanelController {
 
     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">
@@ -947,7 +947,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' : ''}
           >