collabmd 0.1.43 → 0.1.45

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

@@ -9,26 +9,13 @@ import {
   createMermaidStarter,
   createPlantUmlStarter,
   ensureVaultExtension,
+  getVaultPathLeaf,
+  getVaultPathParent,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
-import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { CreateMenuPresenter } from './create-menu-presenter.js';
 
-function getPathLeaf(path) {
-  return String(path ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue) {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
   if (pathValue === oldPrefix) {
     return newPrefix;
@@ -70,7 +57,9 @@ export class FileActionController {
       : { matches: false },
     onFileDelete,
     onFileSelect,
+    onShowFileExtensionsChange,
     pendingWorkspaceRequestIds = null,
+    showFileExtensions = false,
     state,
     toastController,
     vaultClient,
@@ -79,13 +68,16 @@ export class FileActionController {
   }) {
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.pendingWorkspaceRequestIds = pendingWorkspaceRequestIds;
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.state = state;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.view = view;
     this.refresh = refresh;
     this.createButton = document.getElementById('sidebarCreateBtn');
+    this.fileExplorerOptionsButton = document.getElementById('fileExplorerOptionsBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
     this.actionTitle = document.getElementById('fileActionTitle');
@@ -100,6 +92,9 @@ export class FileActionController {
     this.createMenu = new CreateMenuPresenter({
       mobileBreakpointQuery,
     });
+    this.fileExplorerOptionsMenu = new CreateMenuPresenter({
+      mobileBreakpointQuery,
+    });
     this.pendingAction = null;
     this.actionBusy = false;
   }
@@ -108,6 +103,9 @@ export class FileActionController {
     this.createButton?.addEventListener('click', () => {
       this.openRootCreateMenu({ anchor: this.createButton });
     });
+    this.fileExplorerOptionsButton?.addEventListener('click', () => {
+      this.openFileExplorerOptionsMenu({ anchor: this.fileExplorerOptionsButton });
+    });
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
       event.preventDefault();
@@ -264,16 +262,12 @@ export class FileActionController {
     this.showToast(error?.message ? `${message}: ${error.message}` : message);
   }
 
-  ensureExtension(pathValue, extension) {
-    return ensureVaultExtension(pathValue, extension);
-  }
-
   createPendingWorkspaceRequestId() {
     if (!this.pendingWorkspaceRequestIds) {
       return null;
     }
 
-    const requestId = createWorkspaceRequestId();
+    const requestId = crypto.randomUUID();
     this.pendingWorkspaceRequestIds.add(requestId);
     return requestId;
   }
@@ -330,6 +324,7 @@ export class FileActionController {
 
     this.pendingAction = { requiresInput, emptyMessage, onSubmit };
     this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.view?.removeContextMenu?.();
 
     this.actionTitle.textContent = title;
@@ -538,7 +533,7 @@ export class FileActionController {
     const finalPath = requestedExtension
       ? normalizedPath
       : `${normalizedPath}${extension}`;
-    if (!getPathLeaf(finalPath)) {
+    if (!getVaultPathLeaf(finalPath)) {
       this.showToast('File path is required');
       return false;
     }
@@ -642,8 +637,8 @@ export class FileActionController {
   planMoveEntryByDrop({ destinationDirectory = '', sourcePath = '', sourceType = 'file' } = {}) {
     const normalizedSourcePath = normalizeVaultPathInput(sourcePath);
     const normalizedDestinationDirectory = normalizeVaultPathInput(destinationDirectory);
-    const currentParentPath = getParentPath(normalizedSourcePath);
-    const entryName = getPathLeaf(normalizedSourcePath);
+    const currentParentPath = getVaultPathParent(normalizedSourcePath);
+    const entryName = getVaultPathLeaf(normalizedSourcePath);
 
     if (!normalizedSourcePath || !entryName) {
       return { ok: false, reason: 'Invalid item to move' };
@@ -733,6 +728,7 @@ export class FileActionController {
 
   openCreateMenu({ anchor = this.createButton, parentDir = '' } = {}) {
     this.view?.removeContextMenu?.();
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.createMenu.toggle({
       anchor,
       items: this.getCreateActions({ parentDir }),
@@ -740,6 +736,25 @@ export class FileActionController {
     });
   }
 
+  openFileExplorerOptionsMenu({ anchor = this.fileExplorerOptionsButton } = {}) {
+    this.view?.removeContextMenu?.();
+    this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.toggle({
+      anchor,
+      items: [{
+        icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"></path><circle cx="12" cy="12" r="2.5"></circle></svg>',
+        id: 'show-file-extensions',
+        label: 'Show file extensions',
+        meta: this.showFileExtensions ? 'On' : 'Off',
+        onSelect: () => {
+          this.showFileExtensions = !this.showFileExtensions;
+          this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        },
+      }],
+      title: 'File explorer options',
+    });
+  }
+
   handleNewFile({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -761,7 +776,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.md');
         return this.createVaultFile(filePath, createMarkdownStarter(filePath), {
           errorMessage: 'Failed to create file',
           openAfterCreate: true,
@@ -839,7 +854,7 @@ export class FileActionController {
           return false;
         }
 
-        const filePath = this.ensureExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.excalidraw');
         return this.createVaultFile(filePath, createEmptyExcalidrawScene(), {
           errorMessage: 'Failed to create drawing',
           openAfterCreate: true,

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

@@ -1,5 +1,4 @@
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
-import { vaultApiClient } from '../domain/vault-api-client.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
@@ -10,14 +9,18 @@ export class FileExplorerController {
     onFileSelect,
     onFileDelete,
     pendingWorkspaceRequestIds = null,
+    onShowFileExtensionsChange,
+    showFileExtensions = false,
     toastController,
-    vaultClient = vaultApiClient,
+    vaultClient,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.state = new FileTreeState();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
@@ -28,7 +31,12 @@ export class FileExplorerController {
       },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
-        this.renderTree();
+        if (!this.view.rerenderDirectoryBranch(pathValue, this.state.tree, {
+          activeFilePath: this.state.activeFilePath,
+          expandedDirs: this.state.expandedDirs,
+        })) {
+          this.renderTree();
+        }
       },
       onEntryDrop: (payload) => this.actionController.moveEntryByDrop(payload),
       onFileContextMenu: (event, payload) => {
@@ -55,7 +63,13 @@ export class FileExplorerController {
       mobileBreakpointQuery,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
+      onShowFileExtensionsChange: (enabled) => {
+        this.showFileExtensions = Boolean(enabled);
+        this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        this.renderTree();
+      },
       pendingWorkspaceRequestIds,
+      showFileExtensions: this.showFileExtensions,
       refresh: () => this.refresh(),
       state: this.state,
       toastController: this.toastController,
@@ -87,15 +101,25 @@ export class FileExplorerController {
   }
 
   setActiveFile(filePath) {
+    const expandedDirectoryCount = this.state.expandedDirs.size;
     this.state.setActiveFile(filePath);
-    this.renderTree();
+    if (this.state.searchQuery) {
+      this.view.setActiveFile(filePath);
+      return;
+    }
+    if (
+      this.state.expandedDirs.size !== expandedDirectoryCount
+      || !this.view.setActiveFile(filePath)
+    ) {
+      this.renderTree();
+    }
   }
 
   setThreadCounts(threadCounts = new Map()) {
     this.threadCounts = threadCounts instanceof Map
       ? new Map(threadCounts)
       : new Map(Object.entries(threadCounts ?? {}));
-    this.renderTree();
+    this.view.setThreadCounts(this.threadCounts);
   }
 
   revealFile(filePath, { clearSearch = false } = {}) {
@@ -112,6 +136,10 @@ export class FileExplorerController {
     return this.state.flatFiles;
   }
 
+  get fileEntries() {
+    return this.state.flatFileEntries;
+  }
+
   get flatDocumentFiles() {
     return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
   }
@@ -127,6 +155,7 @@ export class FileExplorerController {
       reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
+      showFileExtensions: this.showFileExtensions,
       threadCounts: this.threadCounts,
       tree: this.state.tree,
     });

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

@@ -3,22 +3,9 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
-function getPathLeaf(path) {
-  return String(path ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue) {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function findNodeByPath(nodes = [], pathValue = '') {
   for (const node of nodes) {
     if (node.path === pathValue) {
@@ -65,6 +52,7 @@ export class FileExplorerView {
     this.searchInput = document.getElementById('fileSearchInput');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
+    this.renderedFileItems = new Map();
     this.lastRenderMode = 'tree';
     this.longPressTimer = 0;
     this.longPressContext = null;
@@ -79,6 +67,7 @@ export class FileExplorerView {
     this.autoExpandTargetPath = '';
     this.rootDropZone = null;
     this.threadCounts = new Map();
+    this.showFileExtensions = false;
   }
 
   initialize() {
@@ -133,17 +122,51 @@ export class FileExplorerView {
   }
 
   revealFile(filePath) {
-    const fileItem = Array.from(this.treeContainer?.querySelectorAll('.file-tree-file') ?? [])
-      .find((element) => element.dataset.path === filePath);
-    fileItem?.scrollIntoView({ block: 'nearest' });
+    this.renderedFileItems.get(filePath)?.scrollIntoView({ block: 'nearest' });
   }
 
-  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, threadCounts = new Map(), tree }) {
+  setActiveFile(filePath) {
+    this.treeContainer?.querySelector('.file-tree-file.active')?.classList.remove('active');
+    if (!filePath) {
+      return true;
+    }
+
+    const fileItem = this.renderedFileItems.get(filePath);
+    fileItem?.classList.add('active');
+    return Boolean(fileItem);
+  }
+
+  setThreadCounts(threadCounts) {
+    this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.renderedFileItems.forEach((button, filePath) => {
+      const threadCount = Number(this.threadCounts.get(filePath) ?? 0) || 0;
+      let badge = button.querySelector('.file-tree-comment-count');
+      button.classList.toggle('has-comments', threadCount > 0);
+
+      if (threadCount <= 0) {
+        delete button.dataset.threadCount;
+        badge?.remove();
+        return;
+      }
+
+      button.dataset.threadCount = String(threadCount);
+      if (!badge) {
+        badge = document.createElement('span');
+        badge.className = 'file-tree-comment-count';
+        button.appendChild(badge);
+      }
+      badge.textContent = String(threadCount);
+      badge.setAttribute('aria-label', `${threadCount} open comment thread${threadCount === 1 ? '' : 's'}`);
+    });
+  }
+
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, showFileExtensions = false, threadCounts = new Map(), tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.currentSearchQuery = String(searchQuery ?? '');
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
@@ -174,7 +197,7 @@ export class FileExplorerView {
     }
 
     const affectedParentPaths = Array.from(new Set(
-      changedPaths.map((pathValue) => getParentPath(pathValue)),
+      changedPaths.map((pathValue) => getVaultPathParent(pathValue)),
     ))
       .sort((left, right) => left.split('/').length - right.split('/').length)
       .filter((pathValue, index, values) => (
@@ -232,7 +255,7 @@ export class FileExplorerView {
         depth: 0,
         filePath: match.path,
         fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
-        name: match.name || getPathLeaf(match.path),
+        name: match.name || getVaultPathLeaf(match.path),
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -261,6 +284,7 @@ export class FileExplorerView {
   resetTreeIndexes() {
     this.renderedDirectoryWrappers.clear();
     this.renderedChildContainers.clear();
+    this.renderedFileItems.clear();
   }
 
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
@@ -348,7 +372,7 @@ export class FileExplorerView {
     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 || getPathLeaf(node.path))}</span>
+      <span class="file-tree-name">${escapeHtml(node.name || getVaultPathLeaf(node.path))}</span>
     `;
 
     button.addEventListener('click', (event) => {
@@ -421,6 +445,11 @@ export class FileExplorerView {
         this.renderedChildContainers.delete(pathValue);
       }
     });
+    Array.from(this.renderedFileItems.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedFileItems.delete(pathValue);
+      }
+    });
   }
 
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
@@ -466,9 +495,10 @@ export class FileExplorerView {
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
+    const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
     button.innerHTML = `
       ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
-      <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
+      <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>` : ''}
     `;
     this.configureDragSource(button, { path: filePath, type: 'file' });
@@ -487,6 +517,7 @@ export class FileExplorerView {
       this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
     });
 
+    this.renderedFileItems.set(filePath, button);
     return button;
   }
 

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

@@ -1,21 +1,12 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
 const HISTORY_PAGE_SIZE = 30;
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
 function renderHistoryTitle(filePath = '') {
-  const fileName = getPathLeaf(filePath);
-  const dirPath = getPathDir(filePath);
+  const fileName = getVaultPathLeaf(filePath);
+  const dirPath = getVaultPathParent(filePath);
   if (!dirPath) {
     return `<span class="file-history-path">${escapeHtml(fileName)}</span>`;
   }

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

@@ -1,6 +1,6 @@
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = [], searchEntries = []) {
+function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
   for (const node of nodes) {
     if (!node?.path || !node?.type) {
       continue;
@@ -23,15 +23,19 @@ function flattenTree(nodes, files = [], searchEntries = []) {
       || node.type === 'image'
     ) {
       files.push(node.path);
+      fileEntries.push({
+        mtimeMs: node.mtimeMs,
+        path: node.path,
+      });
       continue;
     }
 
     if (node.type === 'directory' && Array.isArray(node.children)) {
-      flattenTree(node.children, files, searchEntries);
+      flattenTree(node.children, files, searchEntries, fileEntries);
     }
   }
 
-  return { files, searchEntries };
+  return { fileEntries, files, searchEntries };
 }
 
 function findNodeByPath(nodes, pathValue) {
@@ -82,6 +86,7 @@ export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatFileEntries = [];
     this.flatSearchEntries = [];
     this.activeFilePath = null;
     this.expandedDirs = new Set();
@@ -90,8 +95,9 @@ export class FileTreeState {
 
   setTree(tree) {
     this.tree = Array.isArray(tree) ? tree : [];
-    const flattened = flattenTree(this.tree, [], []);
+    const flattened = flattenTree(this.tree, [], [], []);
     this.flatFiles = flattened.files;
+    this.flatFileEntries = flattened.fileEntries;
     this.flatSearchEntries = flattened.searchEntries;
   }
 

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

@@ -1,16 +1,7 @@
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
 function createSectionId(pathValue) {
   return `diff-section-${encodeURIComponent(String(pathValue ?? '')).replace(/%/g, '_')}`;
 }
@@ -687,7 +678,7 @@ export class GitDiffViewController {
     const files = this.data?.files ?? [];
     const items = files.map((file, index) => {
       const isActive = this.activeFilePath === file.path;
-      const dirPath = getPathDir(file.path);
+      const dirPath = getVaultPathParent(file.path);
       return `
         <button
           class="ui-record-surface diff-index-item${isActive ? ' active' : ''}"
@@ -696,7 +687,7 @@ export class GitDiffViewController {
           aria-current="${isActive ? 'true' : 'false'}"
         >
           <span class="ui-record-header diff-index-item-top">
-            <span class="ui-record-title diff-index-item-name">${escapeHtml(getPathLeaf(file.path))}</span>
+            <span class="ui-record-title diff-index-item-name">${escapeHtml(getVaultPathLeaf(file.path))}</span>
             <span class="ui-status-badge ${badgeClass(file.status)}">${escapeHtml(file.status)}</span>
           </span>
           ${dirPath ? `<span class="ui-record-subtitle diff-index-item-path">${escapeHtml(dirPath)}</span>` : ''}
@@ -748,8 +739,8 @@ export class GitDiffViewController {
           <span class="diff-commit-section-main">
             ${chevronSvg(isCollapsed)}
             <span class="diff-commit-section-copy">
-              <span class="diff-commit-section-name">${escapeHtml(getPathLeaf(file.path))}</span>
-              ${getPathDir(file.path) ? `<span class="diff-commit-section-path">${escapeHtml(getPathDir(file.path))}</span>` : ''}
+              <span class="diff-commit-section-name">${escapeHtml(getVaultPathLeaf(file.path))}</span>
+              ${getVaultPathParent(file.path) ? `<span class="diff-commit-section-path">${escapeHtml(getVaultPathParent(file.path))}</span>` : ''}
             </span>
           </span>
           <span class="diff-commit-section-meta">
@@ -1237,10 +1228,10 @@ export class GitDiffViewController {
       }
 
       if (path) {
-        return getPathLeaf(path);
+        return getVaultPathLeaf(path);
       }
       if (this.activeFilePath) {
-        return getPathLeaf(this.activeFilePath);
+        return getVaultPathLeaf(this.activeFilePath);
       }
       if (this.commitMeta?.shortHash) {
         return `Commit ${this.commitMeta.shortHash}`;
@@ -1252,7 +1243,7 @@ export class GitDiffViewController {
     }
 
     if (filePath) {
-      return getPathLeaf(filePath);
+      return getVaultPathLeaf(filePath);
     }
 
     if (scope === 'staged') {

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

@@ -1,20 +1,11 @@
 import { escapeHtml } from '../domain/vault-utils.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';
 
 const HISTORY_PAGE_SIZE = 30;
 const REFRESH_INTERVAL_MS = 10_000;
 
-function getPathDir(pathValue) {
-  const parts = String(pathValue ?? '').split('/');
-  parts.pop();
-  return parts.join('/');
-}
-
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '').split('/').pop() || '';
-}
-
 function fileIconSvg() {
   return '<svg class="git-file-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
 }
@@ -728,8 +719,8 @@ export class GitPanelController {
     const isActive = this.selection.source === 'workspace'
       && this.selection.path === file.path
       && this.selection.scope === file.scope;
-    const dirPath = getPathDir(file.path);
-    const displayName = getPathLeaf(file.path);
+    const dirPath = getVaultPathParent(file.path);
+    const displayName = getVaultPathLeaf(file.path);
     const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'