collabmd 0.1.39 → 0.1.41

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

@@ -78,6 +78,7 @@ export class FileExplorerView {
     this.autoExpandTimer = 0;
     this.autoExpandTargetPath = '';
     this.rootDropZone = null;
+    this.threadCounts = new Map();
   }
 
   initialize() {
@@ -137,11 +138,12 @@ export class FileExplorerView {
     fileItem?.scrollIntoView({ block: 'nearest' });
   }
 
-  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, threadCounts = new Map(), tree }) {
     if (!this.treeContainer) {
       return;
     }
 
+    this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
     this.currentSearchQuery = String(searchQuery ?? '');
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
@@ -424,6 +426,7 @@ export class FileExplorerView {
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';
+    const threadCount = Number(this.threadCounts.get(filePath) ?? 0);
     const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
     const isBase = fileType === 'base';
@@ -452,14 +455,21 @@ export class FileExplorerView {
     if (filePath === activeFilePath) {
       button.classList.add('active');
     }
+    if (threadCount > 0) {
+      button.classList.add('has-comments');
+    }
 
     button.style.setProperty('--depth', depth);
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.dataset.entryType = 'file';
+    if (threadCount > 0) {
+      button.dataset.threadCount = String(threadCount);
+    }
     button.innerHTML = `
       ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</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' });
 

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

@@ -1,5 +1,11 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import {
+  DEFAULT_SEARCH_DEBOUNCE_MS,
+  QuickSwitcherTextSearchRunner,
+  flattenTextResults,
+  formatMatchCount,
+} from './quick-switcher-text-search.js';
 
 const MAX_VISIBLE_RESULTS = 12;
 
@@ -21,21 +27,49 @@ function createCorpusEntry(filePath) {
   };
 }
 
+function getFileName(filePath) {
+  return stripDisplayExtension(filePath).split('/').pop() || stripDisplayExtension(filePath);
+}
+
+function getDirPath(filePath) {
+  const displayName = stripDisplayExtension(filePath);
+  return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
+}
+
 export class QuickSwitcherController {
-  constructor({ getFileList, onFileSelect }) {
+  constructor({
+    getFileList,
+    getSearchConfig = () => ({}),
+    onFileSelect,
+    onTextMatchSelect = null,
+    searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+    searchText = null,
+  }) {
     this.getFileList = getFileList;
+    this.getSearchConfig = getSearchConfig;
     this.onFileSelect = onFileSelect;
+    this.onTextMatchSelect = onTextMatchSelect;
+    this.searchDebounceMs = searchDebounceMs;
+    this.searchText = searchText;
 
     this.overlay = document.getElementById('quickSwitcher');
     this.input = document.getElementById('quickSwitcherInput');
     this.resultsList = document.getElementById('quickSwitcherResults');
     this.hint = document.getElementById('quickSwitcherHint');
+    this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
 
     this.filteredFiles = [];
     this.fileCorpus = [];
     this.lastFileListRef = null;
     this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
     this.isOpen = false;
+    this.mode = 'files';
+    this.textResults = null;
+    this.textResultItems = [];
+    this.textSearchRunner = new QuickSwitcherTextSearchRunner({
+      debounceMs: this.searchDebounceMs,
+    });
 
     this.bindEvents();
   }
@@ -45,8 +79,14 @@ export class QuickSwitcherController {
       if (e.target === this.overlay) this.close();
     });
 
+    this.modeTabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        this.setMode(tab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+      });
+    });
+
     this.input?.addEventListener('input', () => {
-      this.filterFiles();
+      this.handleInput();
     });
 
     this.input?.addEventListener('keydown', (e) => {
@@ -69,7 +109,11 @@ export class QuickSwitcherController {
           break;
         case 'Tab':
           e.preventDefault();
-          this.moveSelection(e.shiftKey ? -1 : 1);
+          if (this.modeTabs.length > 1 && !e.shiftKey) {
+            this.setMode(this.mode === 'files' ? 'text' : 'files', { preserveInput: true });
+          } else {
+            this.moveSelection(e.shiftKey ? -1 : 1);
+          }
           break;
       }
     });
@@ -81,8 +125,9 @@ export class QuickSwitcherController {
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
-    this.filterFiles();
+    this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
     // Browsers ignore .focus() while the element is still visibility:hidden,
@@ -92,19 +137,16 @@ export class QuickSwitcherController {
 
   /** Focus the input once the overlay visibility transition finishes. */
   _focusAfterTransition() {
-    // Clean up any previous pending focus attempt
     this._cancelPendingFocus();
 
     const tryFocus = () => {
       this._focusCleanup = null;
       this.input?.focus();
-      // Verify focus actually landed — if not, try once more
       if (this.isOpen && this.input && document.activeElement !== this.input) {
         setTimeout(() => this.input?.focus(), 50);
       }
     };
 
-    // Primary: listen for transitionend on the overlay
     const onEnd = (e) => {
       if (e.propertyName === 'visibility' || e.propertyName === 'opacity') {
         this.overlay.removeEventListener('transitionend', onEnd);
@@ -114,8 +156,6 @@ export class QuickSwitcherController {
     };
     this.overlay.addEventListener('transitionend', onEnd);
 
-    // Fallback: if transitionend never fires (e.g. transition skipped),
-    // focus after a delay that exceeds the 120ms CSS transition.
     const fallbackTimer = setTimeout(() => {
       this.overlay.removeEventListener('transitionend', onEnd);
       tryFocus();
@@ -138,6 +178,7 @@ export class QuickSwitcherController {
     if (!this.overlay) return;
 
     this._cancelPendingFocus();
+    this.abortTextSearch();
     this.isOpen = false;
     this.overlay.classList.remove('visible');
     this.input.value = '';
@@ -152,6 +193,41 @@ export class QuickSwitcherController {
     }
   }
 
+  setMode(mode = 'files', { preserveInput = false } = {}) {
+    const normalizedMode = mode === 'text' ? 'text' : 'files';
+    this.mode = normalizedMode;
+    this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
+
+    if (!preserveInput && this.input) {
+      this.input.value = '';
+    }
+
+    this.modeTabs.forEach((tab) => {
+      const isActive = tab.dataset.qsMode === normalizedMode;
+      tab.classList.toggle('active', isActive);
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+    });
+
+    if (this.input) {
+      this.input.placeholder = normalizedMode === 'text'
+        ? 'Search text in files...'
+        : 'Search files...';
+    }
+
+    this.handleInput();
+  }
+
+  handleInput() {
+    if (this.mode === 'text') {
+      this.scheduleTextSearch();
+      return;
+    }
+
+    this.abortTextSearch();
+    this.filterFiles();
+  }
+
   filterFiles() {
     const query = this.input?.value.trim().toLowerCase() ?? '';
     const allFiles = this.getFileList?.() ?? [];
@@ -203,13 +279,9 @@ export class QuickSwitcherController {
     const name = entry.lowerDisplayName;
     const nameOnly = entry.lowerFileName;
 
-    // Exact substring match in filename gets highest score
     if (nameOnly.includes(query)) return 100 + (1 / nameOnly.length);
-
-    // Exact substring in full path
     if (name.includes(query)) return 50 + (1 / name.length);
 
-    // Fuzzy character-by-character match
     let queryIndex = 0;
     let score = 0;
     let consecutiveBonus = 0;
@@ -220,7 +292,6 @@ export class QuickSwitcherController {
         consecutiveBonus += 1;
         score += consecutiveBonus;
 
-        // Bonus for matching at word boundaries
         if (i === 0 || name[i - 1] === '/' || name[i - 1] === '-' || name[i - 1] === '_' || name[i - 1] === ' ') {
           score += 5;
         }
@@ -259,9 +330,8 @@ export class QuickSwitcherController {
       }
       item.dataset.index = String(index);
 
-      const displayName = stripDisplayExtension(filePath);
-      const fileName = displayName.split('/').pop();
-      const dirPath = displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
+      const fileName = getFileName(filePath);
+      const dirPath = getDirPath(filePath);
 
       item.innerHTML = `
         <svg class="qs-result-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
@@ -298,7 +368,6 @@ export class QuickSwitcherController {
       return `${escapeHtml(before)}<mark>${escapeHtml(match)}</mark>${escapeHtml(after)}`;
     }
 
-    // Fuzzy highlight
     let result = '';
     let queryIdx = 0;
     for (let i = 0; i < text.length; i++) {
@@ -312,7 +381,118 @@ export class QuickSwitcherController {
     return result;
   }
 
+  abortTextSearch({ invalidate = true } = {}) {
+    this.textSearchRunner.abort({ invalidate });
+  }
+
+  scheduleTextSearch() {
+    const query = this.input?.value.trim() ?? '';
+    const searchConfig = this.getSearchConfig?.() ?? {};
+
+    this.textResults = null;
+    this.textResultItems = [];
+    this.textSearchRunner.schedule({
+      isActive: () => this.isOpen && this.mode === 'text',
+      onResults: (result, searchedQuery) => {
+        this.textResults = result;
+        this.textResultItems = flattenTextResults(result);
+        this.selectedTextIndex = 0;
+        this.renderTextResults(searchedQuery);
+      },
+      onState: (message) => this.renderTextState(message),
+      query,
+      searchConfig,
+      searchText: this.searchText,
+    });
+  }
+
+  renderTextState(message) {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = '';
+    if (this.hint) {
+      this.hint.textContent = message;
+      this.hint.classList.remove('hidden');
+    }
+  }
+
+  renderTextResults(query = '') {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = '';
+
+    if (!this.textResults?.files?.length || this.textResultItems.length === 0) {
+      this.renderTextState(query ? 'No text matches found' : 'Type to search file text');
+      return;
+    }
+
+    if (this.hint) {
+      this.hint.classList.toggle('hidden', !this.textResults.truncated);
+      this.hint.textContent = this.textResults.truncated
+        ? 'Showing the first matches. Refine the query to narrow results.'
+        : '';
+    }
+
+    const fragment = document.createDocumentFragment();
+    let flatIndex = 0;
+
+    this.textResults.files.forEach((fileGroup) => {
+      const group = document.createElement('section');
+      group.className = 'qs-text-group';
+
+      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))}</span>
+      `;
+      group.appendChild(header);
+
+      (fileGroup.snippets ?? []).forEach((snippet) => {
+        const itemIndex = flatIndex;
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'qs-text-item';
+        if (itemIndex === this.selectedTextIndex) {
+          item.classList.add('selected');
+        }
+        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>
+        `;
+        item.addEventListener('click', () => {
+          this.selectedTextIndex = itemIndex;
+          this.confirmSelection();
+        });
+        item.addEventListener('mouseenter', () => {
+          this.selectedTextIndex = itemIndex;
+          this.updateSelection();
+        });
+        group.appendChild(item);
+        flatIndex += 1;
+      });
+
+      fragment.appendChild(group);
+    });
+
+    this.resultsList.appendChild(fragment);
+  }
+
+  highlightSnippet(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))}`;
+  }
+
   moveSelection(delta) {
+    if (this.mode === 'text') {
+      if (this.textResultItems.length === 0) return;
+      this.selectedTextIndex = (this.selectedTextIndex + delta + this.textResultItems.length) % this.textResultItems.length;
+      this.updateSelection();
+      return;
+    }
+
     if (this.filteredFiles.length === 0) return;
     this.selectedIndex = (this.selectedIndex + delta + this.filteredFiles.length) % this.filteredFiles.length;
     this.updateSelection();
@@ -321,17 +501,33 @@ export class QuickSwitcherController {
   updateSelection() {
     if (!this.resultsList) return;
 
+    if (this.mode === 'text') {
+      const items = this.resultsList.querySelectorAll('.qs-text-item');
+      items.forEach((item, i) => {
+        item.classList.toggle('selected', i === this.selectedTextIndex);
+      });
+      items[this.selectedTextIndex]?.scrollIntoView({ block: 'nearest' });
+      return;
+    }
+
     const items = this.resultsList.querySelectorAll('.qs-result-item');
     items.forEach((item, i) => {
       item.classList.toggle('selected', i === this.selectedIndex);
     });
 
-    // Scroll selected item into view
-    const selectedItem = items[this.selectedIndex];
-    selectedItem?.scrollIntoView({ block: 'nearest' });
+    items[this.selectedIndex]?.scrollIntoView({ block: 'nearest' });
   }
 
   confirmSelection() {
+    if (this.mode === 'text') {
+      const match = this.textResultItems[this.selectedTextIndex];
+      if (match) {
+        this.close();
+        this.onTextMatchSelect?.(match);
+      }
+      return;
+    }
+
     const filePath = this.filteredFiles[this.selectedIndex];
     if (filePath) {
       this.close();

package/src/client/presentation/quick-switcher-text-search.js

@@ -0,0 +1,125 @@
+export const DEFAULT_SEARCH_DEBOUNCE_MS = 220;
+const TEXT_RESULT_LIMIT = 50;
+
+export function formatMatchCount(count = 0) {
+  const normalized = Number(count) || 0;
+  return `${normalized} ${normalized === 1 ? 'match' : 'matches'}`;
+}
+
+export function flattenTextResults(payload = {}) {
+  const flattened = [];
+  (payload.files ?? []).forEach((fileGroup) => {
+    (fileGroup.snippets ?? []).forEach((snippet) => {
+      flattened.push({
+        column: snippet.column,
+        file: fileGroup.file,
+        kind: fileGroup.kind,
+        line: snippet.line,
+        matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
+        snippet,
+      });
+    });
+  });
+  return flattened;
+}
+
+export class QuickSwitcherTextSearchRunner {
+  constructor({
+    debounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+    resultLimit = TEXT_RESULT_LIMIT,
+  } = {}) {
+    this.debounceMs = debounceMs;
+    this.resultLimit = resultLimit;
+    this.controller = null;
+    this.timer = null;
+    this.token = 0;
+  }
+
+  abort({ invalidate = true } = {}) {
+    clearTimeout(this.timer);
+    this.timer = null;
+    if (invalidate) {
+      this.token += 1;
+    }
+    this.controller?.abort();
+    this.controller = null;
+  }
+
+  schedule({
+    isActive = () => true,
+    onResults,
+    onState,
+    query = '',
+    searchConfig = {},
+    searchText = null,
+  } = {}) {
+    const minQueryLength = Math.max(Number(searchConfig.minQueryLength) || 2, 1);
+
+    this.abort();
+
+    if (!searchConfig.available) {
+      onState?.('Global text search requires ripgrep on the server.');
+      return;
+    }
+
+    if (!searchText) {
+      onState?.('Global text search is unavailable.');
+      return;
+    }
+
+    if (query.length < minQueryLength) {
+      onState?.(`Type at least ${minQueryLength} characters to search file text.`);
+      return;
+    }
+
+    onState?.('Searching...');
+    this.timer = setTimeout(() => {
+      void this.run({
+        isActive,
+        onResults,
+        onState,
+        query,
+        searchText,
+      });
+    }, this.debounceMs);
+  }
+
+  async run({
+    isActive = () => true,
+    onResults,
+    onState,
+    query = '',
+    searchText,
+  } = {}) {
+    const token = this.token + 1;
+    this.token = token;
+    const controller = new AbortController();
+    this.controller = controller;
+    const isCurrent = () => (
+      isActive()
+      && token === this.token
+      && this.controller === controller
+    );
+
+    try {
+      const result = await searchText({
+        limit: this.resultLimit,
+        query,
+        signal: controller.signal,
+      });
+      if (isCurrent()) {
+        onResults?.(result, query);
+      }
+    } catch (error) {
+      if (error?.name === 'AbortError' || !isCurrent()) {
+        return;
+      }
+
+      onState?.(error?.body?.error || error?.message || 'Failed to search file text.');
+    } finally {
+      if (this.controller === controller) {
+        this.controller = null;
+      }
+    }
+  }
+}

package/src/client/styles/components/navigation.css

@@ -51,7 +51,8 @@
 
 .ui-nav-tabs {
   display: flex;
-  padding: 0 var(--space-2);
+  gap: 4px;
+  padding: 4px var(--space-2) 0;
   border-bottom: 1px solid var(--color-divider);
 }
 
@@ -59,22 +60,53 @@
   position: relative;
   flex: 1;
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: var(--space-2) var(--space-3);
+  min-width: 0;
+  height: 42px;
+  gap: 3px;
+  padding: 4px var(--space-1) 5px;
+  border: 1px solid transparent;
   border-bottom: 2px solid transparent;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   color: var(--color-text-muted);
-  transition: all var(--transition-interactive);
-  font-size: var(--text-xs);
-  font-weight: 500;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.ui-nav-tab-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-icon-md);
+  height: var(--control-icon-md);
+  flex-shrink: 0;
+}
+
+.ui-nav-tab-icon svg {
+  display: block;
+  width: var(--control-icon-md);
+  height: var(--control-icon-md);
+}
+
+.ui-nav-tab-label {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .ui-nav-tab.has-changes::after {
   content: '';
   position: absolute;
-  top: 8px;
-  right: 12px;
+  top: 5px;
+  right: 7px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -83,11 +115,14 @@
 }
 
 .ui-nav-tab:hover {
+  border-color: color-mix(in oklab, var(--color-border) 72%, transparent);
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
 
 .ui-nav-tab.active {
+  border-color: color-mix(in oklab, var(--color-primary) 32%, transparent);
   border-bottom-color: var(--color-primary);
+  background: var(--color-primary-highlight);
   color: var(--color-primary);
 }

package/src/client/styles/components/scrollbars.css

@@ -6,6 +6,7 @@
 .git-panel,
 .diff-scroll,
 .backlinks-body,
+.comment-overview-panel,
 .comments-drawer-list,
 .comments-drawer-item-quote,
 .comment-card-quote,
@@ -28,6 +29,7 @@
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
 .backlinks-body::-webkit-scrollbar,
+.comment-overview-panel::-webkit-scrollbar,
 .comments-drawer-list::-webkit-scrollbar,
 .comments-drawer-item-quote::-webkit-scrollbar,
 .comment-card-quote::-webkit-scrollbar,
@@ -50,6 +52,7 @@
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
 .backlinks-body::-webkit-scrollbar-track,
+.comment-overview-panel::-webkit-scrollbar-track,
 .comments-drawer-list::-webkit-scrollbar-track,
 .comments-drawer-item-quote::-webkit-scrollbar-track,
 .comment-card-quote::-webkit-scrollbar-track,
@@ -71,6 +74,7 @@
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
 .backlinks-body::-webkit-scrollbar-thumb,
+.comment-overview-panel::-webkit-scrollbar-thumb,
 .comments-drawer-list::-webkit-scrollbar-thumb,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb,
 .comment-card-quote::-webkit-scrollbar-thumb,
@@ -93,6 +97,7 @@
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,
 .backlinks-body::-webkit-scrollbar-thumb:hover,
+.comment-overview-panel::-webkit-scrollbar-thumb:hover,
 .comments-drawer-list::-webkit-scrollbar-thumb:hover,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
 .comment-card-quote::-webkit-scrollbar-thumb:hover,