collabmd 0.1.44 → 0.1.45

package/src/client/infrastructure/browser-notification-port.js

@@ -1,36 +1,49 @@
 export class BrowserNotificationPort {
-  constructor({
-    NotificationImpl = globalThis.Notification,
-    focusWindow = () => globalThis.window?.focus?.(),
-  } = {}) {
-    this.NotificationImpl = NotificationImpl;
-    this.focusWindow = focusWindow;
+  getApi() {
+    return typeof globalThis.Notification === 'function'
+      ? globalThis.Notification
+      : null;
   }
 
   getPermission() {
-    return typeof this.NotificationImpl === 'function'
-      ? this.NotificationImpl.permission
-      : 'unsupported';
+    return this.getApi()?.permission ?? 'unsupported';
   }
 
   async requestPermission() {
-    return typeof this.NotificationImpl === 'function'
-      ? this.NotificationImpl.requestPermission()
-      : 'unsupported';
+    const api = this.getApi();
+    if (!api || typeof api.requestPermission !== 'function') {
+      return 'unsupported';
+    }
+
+    if (api.permission !== 'default') {
+      return api.permission;
+    }
+
+    try {
+      return await api.requestPermission();
+    } catch {
+      return api.permission ?? 'default';
+    }
   }
 
-  createNotification({ body, onClick, tag, title }) {
-    if (typeof this.NotificationImpl !== 'function') {
+  show({ body, onClick, tag, title } = {}) {
+    const api = this.getApi();
+    if (!api || api.permission !== 'granted' || !body) {
       return null;
     }
 
-    const notification = new this.NotificationImpl(title, { body, tag });
-    if (typeof onClick === 'function') {
-      notification.addEventListener('click', () => {
-        this.focusWindow();
-        onClick();
+    try {
+      const notification = new api(title, {
+        body,
+        renotify: true,
+        tag,
       });
+      if (onClick) {
+        notification.onclick = onClick;
+      }
+      return notification;
+    } catch {
+      return null;
     }
-    return notification;
   }
 }

package/src/client/infrastructure/browser-preferences-port.js

@@ -15,16 +15,20 @@ function writeStorage(storage, key, value) {
   }
 }
 
+const MAX_RECENT_FILES = 20;
+
 export class BrowserPreferencesPort {
   constructor({
-    chatNotificationsKey,
+    fileTreeShowExtensionsKey,
     lineWrappingKey,
+    recentFilesKey = 'collabmd-recent-files',
     sidebarVisibleKey,
     userNameKey,
     storage = globalThis.localStorage,
   }) {
-    this.chatNotificationsKey = chatNotificationsKey;
+    this.fileTreeShowExtensionsKey = fileTreeShowExtensionsKey;
     this.lineWrappingKey = lineWrappingKey;
+    this.recentFilesKey = recentFilesKey;
     this.sidebarVisibleKey = sidebarVisibleKey;
     this.storage = storage;
     this.userNameKey = userNameKey;
@@ -38,6 +42,14 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.userNameKey, name);
   }
 
+  getFileTreeShowExtensions() {
+    return readStorage(this.storage, this.fileTreeShowExtensionsKey, null) === 'true';
+  }
+
+  setFileTreeShowExtensions(showFileExtensions) {
+    writeStorage(this.storage, this.fileTreeShowExtensionsKey, showFileExtensions ? 'true' : 'false');
+  }
+
   getLineWrappingEnabled() {
     return readStorage(this.storage, this.lineWrappingKey, null) !== 'false';
   }
@@ -46,6 +58,28 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.lineWrappingKey, String(enabled));
   }
 
+  getRecentFiles() {
+    const stored = readStorage(this.storage, this.recentFilesKey, '[]');
+    try {
+      const recentFiles = JSON.parse(stored);
+      return Array.isArray(recentFiles)
+        ? [...new Set(recentFiles.filter((filePath) => typeof filePath === 'string' && filePath))]
+        : [];
+    } catch {
+      return [];
+    }
+  }
+
+  recordRecentFile(filePath) {
+    if (!filePath) return;
+
+    const recentFiles = [
+      filePath,
+      ...this.getRecentFiles().filter((recentFilePath) => recentFilePath !== filePath),
+    ];
+    writeStorage(this.storage, this.recentFilesKey, JSON.stringify(recentFiles.slice(0, MAX_RECENT_FILES)));
+  }
+
   getSidebarVisible() {
     return readStorage(this.storage, this.sidebarVisibleKey, null);
   }
@@ -54,11 +88,4 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.sidebarVisibleKey, showSidebar ? 'true' : 'false');
   }
 
-  getChatNotificationsEnabled() {
-    return readStorage(this.storage, this.chatNotificationsKey, null) === 'true';
-  }
-
-  setChatNotificationsEnabled(enabled) {
-    writeStorage(this.storage, this.chatNotificationsKey, String(enabled));
-  }
 }

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

@@ -20,7 +20,14 @@ import {
   syntaxHighlighting,
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { highlightSelectionMatches, openSearchPanel, searchKeymap } from '@codemirror/search';
+import {
+  findNext,
+  getSearchQuery,
+  highlightSelectionMatches,
+  openSearchPanel,
+  searchKeymap,
+  searchPanelOpen,
+} from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
@@ -54,10 +61,82 @@ const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
 const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
 const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
 const TASK_LIST_MARKER_PATTERN = /^(\s*(?:>\s*)*(?:[-+*]|\d+[.)])\s+\[)( |x|X)(\])(\s.*)?$/;
+
+function openSearchPanelPreservingViewport(view) {
+  const scrollTop = view.scrollDOM.scrollTop;
+  const selection = view.state.selection;
+  const applied = openSearchPanel(view);
+
+  if (applied) {
+    requestAnimationFrame(() => {
+      if (view.dom.isConnected && view.state.selection.eq(selection)) {
+        view.scrollDOM.scrollTop = scrollTop;
+      }
+    });
+  }
+
+  return applied;
+}
+
+function getSearchQueryKey(query) {
+  return JSON.stringify([query.search, query.caseSensitive, query.regexp, query.wholeWord]);
+}
+
+function createSearchNavigationListener() {
+  let lastQueryKey = '';
+  let panelWasOpen = false;
+  let pendingFrame = 0;
+
+  return EditorView.updateListener.of((update) => {
+    const panelOpen = searchPanelOpen(update.state);
+    const query = getSearchQuery(update.state);
+    const queryKey = getSearchQueryKey(query);
+    const shouldReveal = panelOpen
+      && query.valid
+      && (!panelWasOpen || queryKey !== lastQueryKey);
+
+    panelWasOpen = panelOpen;
+    lastQueryKey = queryKey;
+
+    if (!shouldReveal) {
+      return;
+    }
+
+    if (pendingFrame) {
+      cancelAnimationFrame(pendingFrame);
+    }
+
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = 0;
+      if (!update.view.dom.isConnected) {
+        return;
+      }
+
+      const currentQuery = getSearchQuery(update.view.state);
+      if (
+        !searchPanelOpen(update.view.state)
+        || !currentQuery.valid
+        || getSearchQueryKey(currentQuery) !== queryKey
+      ) {
+        return;
+      }
+
+      const searchInput = update.view.dom.querySelector('.cm-search input[name="search"]');
+      const inputSelection = searchInput === update.view.root.activeElement && searchInput
+        ? { end: searchInput.selectionEnd, start: searchInput.selectionStart }
+        : null;
+      findNext(update.view);
+      if (inputSelection && searchInput?.setSelectionRange) {
+        searchInput.setSelectionRange(inputSelection.start, inputSelection.end);
+      }
+    });
+  });
+}
+
 const EDITOR_COMMANDS = Object.freeze({
   indentLess,
   indentMore,
-  openSearch: openSearchPanel,
+  openSearch: openSearchPanelPreservingViewport,
   redo,
   undo,
 });
@@ -398,11 +477,16 @@ export class EditorViewAdapter {
       crosshairCursor(),
       highlightActiveLine(),
       highlightSelectionMatches(),
+      createSearchNavigationListener(),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
         ...historyKeymap,
-        ...searchKeymap,
+        ...searchKeymap.map((binding) => (
+          binding.run === openSearchPanel
+            ? { ...binding, run: openSearchPanelPreservingViewport }
+            : binding
+        )),
         ...foldKeymap,
         indentWithTab,
       ]),

package/src/client/infrastructure/lobby-presence.js

@@ -111,6 +111,7 @@ export class LobbyPresence {
 
     this.provider.on('status', ({ status }) => {
       this._connected = status === 'connected';
+      this._emitChange();
     });
 
     this.provider.on('sync', (isSynced) => {

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

@@ -42,6 +42,31 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async readBacklinks(filePath, { signal } = {}) {
+    const response = await fetch(
+      resolveApiUrl(`/backlinks?file=${encodeURIComponent(filePath)}`),
+      { signal },
+    );
+    const data = await parseApiResponse(response, 'Failed to load backlinks');
+    return Array.isArray(data.backlinks) ? data.backlinks : [];
+  }
+
+  async renderSvg(source) {
+    const response = await fetch(resolveApiUrl('/plantuml/render'), {
+      body: JSON.stringify({ source }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    const data = await parseApiResponse(response, 'Failed to render PlantUML');
+    if (!data.ok || typeof data.svg !== 'string') {
+      throw new Error(data.error || 'Failed to render PlantUML');
+    }
+
+    return data.svg;
+  }
+
   async searchText({ limit = 50, query = '', signal = null } = {}) {
     const searchParams = new URLSearchParams({
       limit: String(limit),

package/src/client/infrastructure/workspace-sync-client.js

@@ -43,11 +43,18 @@ function createNode(entry) {
     };
   }
 
-  return {
+  const node = {
     name: entry.name,
     path: entry.path,
     type: entry.type,
   };
+
+  const mtimeMs = Number(entry.mtimeMs);
+  if (Number.isFinite(mtimeMs)) {
+    node.mtimeMs = mtimeMs;
+  }
+
+  return node;
 }
 
 function sortNodes(nodes = []) {
@@ -184,6 +191,11 @@ class WorkspaceTreeModel {
       node.name = nextNode.name;
       node.path = nextNode.path;
       node.type = nextNode.type;
+      if (nextNode.mtimeMs === undefined) {
+        delete node.mtimeMs;
+      } else {
+        node.mtimeMs = nextNode.mtimeMs;
+      }
       if (node.type === 'directory' && !Array.isArray(node.children)) {
         node.children = [];
       }

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

@@ -1,20 +1,14 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
+import {
+  createCommentOverviewThread,
+  formatAnchorLabel,
+} from './comment-ui/comment-ui-shared.js';
 
 function asArray(value) {
   return Array.isArray(value) ? value : [];
 }
 
-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}`;
-}
-
 function createOverviewState({ copy, title, tone = '' }) {
   const state = document.createElement('div');
   state.className = 'comment-overview-empty ui-empty-state ui-empty-state--compact';
@@ -80,7 +74,7 @@ export class CommentOverviewController {
       try {
         const payload = await this.vaultApiClient.readCommentOverview();
         this.errorMessage = '';
-        this.setOverview(payload?.overview ?? payload ?? {});
+        this.setOverview(payload?.overview ?? payload ?? {}, { render: false });
       } catch (error) {
         console.error('[comments] Failed to load comment overview:', error.message);
         this.errorMessage = 'Unable to load open comments.';
@@ -95,7 +89,7 @@ export class CommentOverviewController {
     return this.refreshPromise;
   }
 
-  setOverview(overview = {}) {
+  setOverview(overview = {}, { render = true } = {}) {
     this.errorMessage = '';
     this.overview = {
       files: asArray(overview.files),
@@ -105,7 +99,9 @@ export class CommentOverviewController {
     this.onOverviewChange?.(this.overview, {
       threadCounts: this.getThreadCounts(),
     });
-    this.render();
+    if (render) {
+      this.render();
+    }
   }
 
   render() {
@@ -187,9 +183,15 @@ export class CommentOverviewController {
   }
 
   createThreadButton(filePath, thread) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'comment-overview-thread';
+    const messageCount = Number(thread.messageCount || 0);
+    const button = createCommentOverviewThread({
+      authorName: thread.latestMessage?.userName || thread.createdByName || 'Anonymous',
+      lineLabel: formatAnchorLabel(thread.anchor),
+      messageCount,
+      previewBody: thread.latestMessage?.bodyPreview || '',
+      quote: thread.anchor?.quote || 'Source anchored comment',
+      timestamp: this.formatTimestamp(thread.latestActivityAt),
+    });
     button.addEventListener('click', () => {
       this.onThreadSelect?.({
         anchor: thread.anchor,
@@ -197,43 +199,6 @@ export class CommentOverviewController {
         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;
   }
 

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

@@ -360,17 +360,6 @@ function createThreadElement(thread) {
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-thread-card-actions';
 
-  const jump = document.createElement('button');
-  jump.type = 'button';
-  jump.className = buttonClassNames({
-    variant: 'ghost',
-    size: 'compact',
-    pill: true,
-    extra: ['ui-action-pill', 'comment-thread-card-action'],
-  });
-  jump.textContent = 'Jump';
-  jump.addEventListener('click', () => this.onNavigateToLine?.(thread.anchor?.startLine ?? 1));
-
   const reply = document.createElement('button');
   reply.type = 'button';
   reply.className = buttonClassNames({
@@ -409,7 +398,7 @@ function createThreadElement(thread) {
     await this.onResolveThread?.(thread.id);
   });
 
-  actions.append(jump, reply, resolve);
+  actions.append(reply, resolve);
 
   thread.messages.forEach((message, index) => {
     article.appendChild(this.createMessageElement(thread, message, {