collabmd 0.1.39 → 0.1.41

package/src/client/infrastructure/editor-session.js

@@ -218,6 +218,10 @@ export class EditorSession {
     return this.viewAdapter.scrollToLine(lineNumber, viewportRatio);
   }
 
+  revealSearchMatch(match) {
+    return this.viewAdapter.revealSearchMatch(match);
+  }
+
   getUserCursor(clientId) {
     return this.collaborationClient.getUserCursor(
       clientId,

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

@@ -851,6 +851,36 @@ export class EditorViewAdapter {
     return true;
   }
 
+  revealSearchMatch({ column = 1, length = 0, line = 1 } = {}) {
+    const state = this.editorView?.state;
+    if (!state || !this.editorView) {
+      return false;
+    }
+
+    const targetLineNumber = Math.min(
+      Math.max(Math.round(Number(line) || 1), 1),
+      state.doc.lines,
+    );
+    const targetLine = state.doc.line(targetLineNumber);
+    const columnOffset = Math.min(
+      Math.max(Math.round(Number(column) || 1) - 1, 0),
+      targetLine.length,
+    );
+    const from = targetLine.from + columnOffset;
+    const to = Math.min(
+      from + Math.max(Math.round(Number(length) || 0), 0),
+      targetLine.to,
+    );
+
+    this.editorView.dispatch({
+      scrollIntoView: true,
+      selection: EditorSelection.range(from, Math.max(to, from)),
+    });
+    this.editorView.focus();
+    this.scrollToLine(targetLineNumber, 0.2);
+    return true;
+  }
+
   scrollToPosition(position, alignment = 'center') {
     const state = this.editorView?.state;
     const scroller = this.editorView?.scrollDOM;

package/src/client/infrastructure/runtime-config.js

@@ -76,8 +76,11 @@ export function getHashRoute() {
   if (params.has(HASH_ROUTE_KEYS.file)) {
     return {
       anchor: params.get('anchor') || null,
+      column: params.has('column') ? Number(params.get('column')) || null : null,
       drawioMode: params.get('drawio') || null,
       filePath: params.get(HASH_ROUTE_KEYS.file),
+      line: params.has('line') ? Number(params.get('line')) || null : null,
+      matchLength: params.has('matchLength') ? Number(params.get('matchLength')) || null : null,
       type: 'file',
     };
   }
@@ -85,8 +88,20 @@ export function getHashRoute() {
   return { type: 'empty' };
 }
 
-export function navigateToFile(filePath, { drawioMode = null, anchor = null } = {}) {
-  window.location.hash = createFileRouteHash(filePath, { drawioMode, anchor });
+export function navigateToFile(filePath, {
+  anchor = null,
+  column = null,
+  drawioMode = null,
+  line = null,
+  matchLength = null,
+} = {}) {
+  window.location.hash = createFileRouteHash(filePath, {
+    anchor,
+    column,
+    drawioMode,
+    line,
+    matchLength,
+  });
 }
 
 export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {

package/src/client/infrastructure/vault-api-client.js

@@ -82,11 +82,27 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to load file tree');
   }
 
+  async readCommentOverview() {
+    const response = await fetch(resolveApiUrl('/comments/overview'));
+    return parseApiResponse(response, 'Failed to load comment overview');
+  }
+
   async readFile(path) {
     const response = await fetch(resolveApiUrl(`/file?path=${encodeURIComponent(path)}`));
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async searchText({ limit = 50, query = '', signal = null } = {}) {
+    const searchParams = new URLSearchParams({
+      limit: String(limit),
+      q: String(query ?? ''),
+    });
+    const response = await fetch(resolveApiUrl(`/search?${searchParams.toString()}`), {
+      signal,
+    });
+    return parseApiResponse(response, 'Failed to search files');
+  }
+
   async queryBase({
     activeFilePath = '',
     path = '',

package/src/client/presentation/app-shell-template.js

@@ -52,21 +52,33 @@ export function appShellTemplate() {
             </button>
           </div>
         </div>
-        <div class="ui-nav-tabs hidden" id="sidebarTabs">
+        <div class="ui-nav-tabs" id="sidebarTabs">
           <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-              <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"></path>
-            </svg>
-            Files
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <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"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Files</span>
+          </button>
+          <button class="ui-nav-tab" id="commentsSidebarTab" type="button">
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Comments</span>
           </button>
           <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="18" cy="18" r="3"></circle>
-              <circle cx="6" cy="6" r="3"></circle>
-              <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
-              <path d="M6 9v12"></path>
-            </svg>
-            Git
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="18" cy="18" r="3"></circle>
+                <circle cx="6" cy="6" r="3"></circle>
+                <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+                <path d="M6 9v12"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Git</span>
           </button>
         </div>
         <div class="sidebar-search" id="fileSearch">
@@ -92,6 +104,7 @@ export function appShellTemplate() {
           >
         </div>
         <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
+        <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
         <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
       </aside>
 
@@ -618,6 +631,10 @@ export function appShellTemplate() {
 
     <div class="qs-overlay" id="quickSwitcher">
       <div class="qs-modal">
+        <div class="qs-mode-tabs" role="tablist" aria-label="Search mode">
+          <button class="qs-mode-tab active" type="button" role="tab" aria-selected="true" data-qs-mode="files">Files</button>
+          <button class="qs-mode-tab" type="button" role="tab" aria-selected="false" data-qs-mode="text">Text</button>
+        </div>
         <div class="qs-input-wrap">
           <svg class="qs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
             <circle cx="11" cy="11" r="8"></circle>

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

@@ -785,7 +785,7 @@ function syncFilterValueCombobox(entry, result, path, { fallbackToFullRender = t
 
   if (!input || !combobox || !rule || rule.type !== 'rule' || typeof input.insertAdjacentHTML !== 'function') {
     if (fallbackToFullRender) {
-      updateShellContent(entry, result);
+      updateShellPanel(entry, result);
     }
     return false;
   }
@@ -1080,7 +1080,14 @@ function markPlaceholderHydrated(placeholder) {
   placeholder.classList.remove('diagram-preview-shell');
 }
 
-function updateShellContent(entry, result) {
+function updateShellContent(entry, result, {
+  actions = true,
+  body = true,
+  meta = true,
+  panel = true,
+  summary = true,
+  tabs = true,
+} = {}) {
   const shell = findShellElement(entry);
   if (!shell?.querySelector) {
     entry.placeholder.innerHTML = renderShellHtml(result, entry);
@@ -1088,35 +1095,35 @@ function updateShellContent(entry, result) {
     return;
   }
 
-  const tabs = shell.querySelector('[data-base-tabs]');
-  if (tabs) {
-    tabs.innerHTML = renderViewTabs(result);
+  const tabsSlot = shell.querySelector('[data-base-tabs]');
+  if (tabs && tabsSlot) {
+    tabsSlot.innerHTML = renderViewTabs(result);
   }
 
-  const meta = shell.querySelector('[data-base-meta]');
-  if (meta) {
-    meta.textContent = `${String(result.totalRows ?? 0)} results`;
+  const metaSlot = shell.querySelector('[data-base-meta]');
+  if (meta && metaSlot) {
+    metaSlot.textContent = `${String(result.totalRows ?? 0)} results`;
   }
 
   const actionSlot = shell.querySelector('[data-base-action-slot]');
-  if (actionSlot) {
+  if (actions && actionSlot) {
     actionSlot.innerHTML = renderActionButtons(result, entry);
   }
 
   const panelSlot = shell.querySelector('[data-base-panel-slot]');
-  if (panelSlot) {
+  if (panel && panelSlot) {
     const panelState = capturePanelState(panelSlot);
     panelSlot.innerHTML = renderPanel(result, entry);
     restorePanelState(panelSlot, panelState);
   }
 
   const summarySlot = shell.querySelector('[data-base-summary-slot]');
-  if (summarySlot) {
+  if (summary && summarySlot) {
     summarySlot.innerHTML = renderSummaryBar(result.summaries);
   }
 
   const content = shell.querySelector('[data-base-content]');
-  if (content) {
+  if (body && content) {
     content.innerHTML = renderViewBody(result);
   }
 
@@ -1126,6 +1133,16 @@ function updateShellContent(entry, result) {
   }
 }
 
+function updateShellPanel(entry, result) {
+  updateShellContent(entry, result, {
+    actions: false,
+    body: false,
+    meta: false,
+    summary: false,
+    tabs: false,
+  });
+}
+
 function downloadBlob(blob, fileName = 'base.csv') {
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement('a');
@@ -1227,7 +1244,7 @@ export class BasesPreviewController {
         const panel = panelButton.dataset.basePanel || '';
         entry.ui.openPanel = entry.ui.openPanel === panel ? '' : panel;
         entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1289,7 +1306,7 @@ export class BasesPreviewController {
           entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
           entry.ui.builderFilter = null;
         }
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1363,7 +1380,7 @@ export class BasesPreviewController {
         }
 
         entry.ui.propertySearch = propertiesSearch.value || '';
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1740,7 +1757,7 @@ export class BasesPreviewController {
           }
         });
         if (!synced) {
-          updateShellContent(entry, entry.result);
+          updateShellPanel(entry, entry.result);
         }
       }
     } catch {

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

@@ -0,0 +1,238 @@
+import { stripVaultFileExtension } from '../../domain/file-kind.js';
+
+function asArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+function getPathLeaf(pathValue = '') {
+  return String(pathValue)
+    .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 formatLineLabel(anchor = {}) {
+  const startLine = Number(anchor.startLine || 0);
+  const endLine = Number(anchor.endLine || startLine);
+  if (!Number.isFinite(startLine) || startLine <= 0) {
+    return 'No source anchor';
+  }
+
+  return startLine === endLine ? `Line ${startLine}` : `Lines ${startLine}-${endLine}`;
+}
+
+export class CommentOverviewController {
+  constructor({
+    panelElement,
+    toastController = null,
+    vaultApiClient,
+    onOverviewChange = null,
+    onThreadSelect = null,
+  }) {
+    this.panel = panelElement;
+    this.toastController = toastController;
+    this.vaultApiClient = vaultApiClient;
+    this.onOverviewChange = onOverviewChange;
+    this.onThreadSelect = onThreadSelect;
+    this.overview = { files: [], generatedAt: 0, totalThreadCount: 0 };
+    this.loading = false;
+    this.errorMessage = '';
+    this.refreshPromise = null;
+    this.timeFormatter = new Intl.DateTimeFormat(undefined, {
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      month: 'short',
+    });
+  }
+
+  initialize() {
+    this.render();
+  }
+
+  getThreadCounts() {
+    return new Map(
+      asArray(this.overview.files).map((file) => [file.filePath, Number(file.threadCount || 0)]),
+    );
+  }
+
+  async refresh() {
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.loading = true;
+    this.render();
+    this.refreshPromise = (async () => {
+      try {
+        const payload = await this.vaultApiClient.readCommentOverview();
+        this.errorMessage = '';
+        this.setOverview(payload?.overview ?? payload ?? {});
+      } catch (error) {
+        console.error('[comments] Failed to load comment overview:', error.message);
+        this.errorMessage = 'Unable to load open comments.';
+        this.toastController?.show?.('Failed to load comments');
+      } finally {
+        this.loading = false;
+        this.refreshPromise = null;
+        this.render();
+      }
+    })();
+
+    return this.refreshPromise;
+  }
+
+  setOverview(overview = {}) {
+    this.errorMessage = '';
+    this.overview = {
+      files: asArray(overview.files),
+      generatedAt: Number(overview.generatedAt || 0),
+      totalThreadCount: Number(overview.totalThreadCount || 0),
+    };
+    this.onOverviewChange?.(this.overview, {
+      threadCounts: this.getThreadCounts(),
+    });
+    this.render();
+  }
+
+  render() {
+    if (!this.panel) {
+      return;
+    }
+
+    this.panel.replaceChildren();
+
+    if (this.errorMessage) {
+      const error = document.createElement('div');
+      error.className = 'comment-overview-empty';
+      error.textContent = this.errorMessage;
+      this.panel.appendChild(error);
+      return;
+    }
+
+    if (this.loading && asArray(this.overview.files).length === 0) {
+      const loading = document.createElement('div');
+      loading.className = 'comment-overview-empty';
+      loading.textContent = 'Loading open comments...';
+      this.panel.appendChild(loading);
+      return;
+    }
+
+    const files = asArray(this.overview.files);
+    if (files.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'comment-overview-empty';
+      empty.textContent = 'No open comments';
+      this.panel.appendChild(empty);
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    files.forEach((file) => {
+      fragment.appendChild(this.createFileGroup(file));
+    });
+    this.panel.appendChild(fragment);
+  }
+
+  createFileGroup(file) {
+    const section = document.createElement('section');
+    section.className = 'comment-overview-file';
+
+    const header = document.createElement('div');
+    header.className = 'comment-overview-file-header';
+
+    const titleWrap = document.createElement('div');
+    titleWrap.className = 'comment-overview-file-title-wrap';
+
+    const title = document.createElement('h3');
+    title.className = 'comment-overview-file-title';
+    title.textContent = stripVaultFileExtension(getPathLeaf(file.filePath));
+
+    const parent = document.createElement('span');
+    parent.className = 'comment-overview-file-path';
+    parent.textContent = getParentPath(file.filePath) || file.filePath;
+
+    const count = document.createElement('span');
+    count.className = 'comment-overview-file-count';
+    count.textContent = String(file.threadCount || asArray(file.threads).length);
+
+    titleWrap.append(title, parent);
+    header.append(titleWrap, count);
+    section.appendChild(header);
+
+    asArray(file.threads).forEach((thread) => {
+      section.appendChild(this.createThreadButton(file.filePath, thread));
+    });
+
+    return section;
+  }
+
+  createThreadButton(filePath, thread) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'comment-overview-thread';
+    button.addEventListener('click', () => {
+      this.onThreadSelect?.({
+        anchor: thread.anchor,
+        filePath,
+        threadId: thread.id,
+      });
+    });
+
+    const header = document.createElement('div');
+    header.className = 'comment-overview-thread-header';
+
+    const line = document.createElement('span');
+    line.className = 'comment-overview-thread-line';
+    line.textContent = formatLineLabel(thread.anchor);
+
+    const meta = document.createElement('span');
+    meta.className = 'comment-overview-thread-meta';
+    meta.textContent = this.formatTimestamp(thread.latestActivityAt);
+    header.append(line, meta);
+
+    const body = document.createElement('div');
+    body.className = 'comment-overview-thread-body';
+
+    const quote = document.createElement('span');
+    quote.className = 'comment-overview-thread-quote';
+    quote.textContent = thread.anchor?.quote || 'Source anchored comment';
+
+    const preview = document.createElement('p');
+    preview.className = 'comment-overview-thread-preview';
+    preview.textContent = thread.latestMessage?.bodyPreview || '';
+    body.append(preview, quote);
+
+    const footer = document.createElement('div');
+    footer.className = 'comment-overview-thread-footer';
+    const author = document.createElement('span');
+    author.className = 'comment-overview-thread-author';
+    author.textContent = thread.latestMessage?.userName || thread.createdByName || 'Anonymous';
+    const replies = document.createElement('span');
+    replies.className = 'comment-overview-thread-message-count';
+    const messageCount = Number(thread.messageCount || 0);
+    replies.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
+    footer.append(author, replies);
+
+    button.append(header, body, footer);
+    return button;
+  }
+
+  formatTimestamp(value) {
+    if (!Number.isFinite(value)) {
+      return '';
+    }
+
+    try {
+      return this.timeFormatter.format(new Date(value));
+    } catch {
+      return '';
+    }
+  }
+}

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

@@ -226,6 +226,28 @@ function closeDrawer() {
   this.setDrawerOpen(false);
 }
 
+/** @this {CommentUiStateContext} */
+function openThreadFromOverview(threadId) {
+  if (!threadId || !this.supported) {
+    return false;
+  }
+
+  const group = this.getThreadGroups().find((candidate) => (
+    candidate.threads.some((thread) => thread.id === threadId)
+  ));
+  if (!group) {
+    return false;
+  }
+
+  this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
+  this.openThreadGroup(group, {
+    anchor: group.anchor,
+    origin: 'editor',
+    sourceRect: this.session?.getCommentAnchorClientRect?.(group.anchor) ?? null,
+  });
+  return true;
+}
+
 /** @this {CommentUiStateContext} */
 function getThreadGroups() {
   const groups = new Map();
@@ -283,6 +305,7 @@ export const commentUiStateMethods = {
   closeDrawer,
   getThreadGroups,
   handleEditorContentChange,
+  openThreadFromOverview,
   scheduleSelectionReveal,
   setCurrentFile,
   setDrawerOpen,