collabmd 0.1.20 → 0.1.21

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

@@ -12,6 +12,29 @@ function getPathLeaf(path) {
     .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) {
+      return node;
+    }
+
+    if (node.type === 'directory' && Array.isArray(node.children)) {
+      const nested = findNodeByPath(node.children, pathValue);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
 export class FileExplorerView {
   constructor({
     onDirectoryToggle,
@@ -27,6 +50,9 @@ export class FileExplorerView {
     this.onTreeContextMenu = onTreeContextMenu;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
+    this.renderedDirectoryWrappers = new Map();
+    this.renderedChildContainers = new Map();
+    this.lastRenderMode = 'tree';
   }
 
   initialize() {
@@ -44,30 +70,62 @@ export class FileExplorerView {
     });
   }
 
-  render({ activeFilePath, expandedDirs, searchMatches, searchQuery, tree }) {
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     if (searchQuery) {
+      this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
       return;
     }
 
-    this.treeContainer.innerHTML = '';
+    if (
+      reset
+      || this.lastRenderMode !== 'tree'
+      || !Array.isArray(changedPaths)
+      || changedPaths.length === 0
+    ) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
+      return;
+    }
 
-    if (tree.length === 0) {
-      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+    const affectedParentPaths = Array.from(new Set(
+      changedPaths.map((pathValue) => getParentPath(pathValue)),
+    ))
+      .sort((left, right) => left.split('/').length - right.split('/').length)
+      .filter((pathValue, index, values) => (
+        !values.slice(0, index).some((ancestorPath) => ancestorPath && pathValue.startsWith(`${ancestorPath}/`))
+      ));
+    if (affectedParentPaths.includes('')) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
       return;
     }
 
-    const fragment = document.createDocumentFragment();
-    this.renderNodes(tree, fragment, {
-      activeFilePath,
-      depth: 0,
-      expandedDirs,
-    });
-    this.treeContainer.appendChild(fragment);
+    for (const parentPath of affectedParentPaths) {
+      if (!this.rerenderDirectoryBranch(parentPath, tree, {
+        activeFilePath,
+        expandedDirs,
+      })) {
+        this.renderFullTree(tree, {
+          activeFilePath,
+          expandedDirs,
+        });
+        this.lastRenderMode = 'tree';
+        return;
+      }
+    }
+
+    this.lastRenderMode = 'tree';
   }
 
   renderSearchResults(matches, activeFilePath) {
@@ -75,6 +133,7 @@ export class FileExplorerView {
       return;
     }
 
+    this.resetTreeIndexes();
     this.treeContainer.innerHTML = '';
 
     if (matches.length === 0) {
@@ -95,6 +154,29 @@ export class FileExplorerView {
     this.treeContainer.appendChild(fragment);
   }
 
+  renderFullTree(tree, { activeFilePath, expandedDirs }) {
+    this.resetTreeIndexes();
+    this.treeContainer.innerHTML = '';
+
+    if (tree.length === 0) {
+      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    this.renderNodes(tree, fragment, {
+      activeFilePath,
+      depth: 0,
+      expandedDirs,
+    });
+    this.treeContainer.appendChild(fragment);
+  }
+
+  resetTreeIndexes() {
+    this.renderedDirectoryWrappers.clear();
+    this.renderedChildContainers.clear();
+  }
+
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
     for (const node of nodes) {
       if (node.type === 'directory') {
@@ -142,21 +224,80 @@ export class FileExplorerView {
     });
 
     wrapper.appendChild(button);
+    this.renderedDirectoryWrappers.set(node.path, wrapper);
 
     if (isExpanded && Array.isArray(node.children)) {
       const childContainer = document.createElement('div');
       childContainer.className = 'file-tree-children';
+      this.renderedChildContainers.set(node.path, childContainer);
       this.renderNodes(node.children, childContainer, {
         activeFilePath,
         depth: depth + 1,
         expandedDirs,
       });
       wrapper.appendChild(childContainer);
+    } else {
+      this.renderedChildContainers.delete(node.path);
     }
 
     return wrapper;
   }
 
+  rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
+    const wrapper = this.renderedDirectoryWrappers.get(parentPath);
+    const parentNode = findNodeByPath(tree, parentPath);
+    if (!wrapper || parentNode?.type !== 'directory') {
+      return false;
+    }
+
+    const button = wrapper.querySelector('.file-tree-dir');
+    const isExpanded = expandedDirs.has(parentPath);
+    button?.setAttribute('aria-expanded', String(isExpanded));
+    button?.querySelector('.file-tree-chevron')?.classList.toggle('expanded', isExpanded);
+
+    const depth = Number(button?.dataset.depth ?? 0);
+    let childContainer = this.renderedChildContainers.get(parentPath) ?? wrapper.querySelector('.file-tree-children');
+
+    this.clearRenderedDescendants(parentPath);
+
+    if (!isExpanded) {
+      childContainer?.remove();
+      this.renderedChildContainers.delete(parentPath);
+      return true;
+    }
+
+    if (!childContainer) {
+      childContainer = document.createElement('div');
+      childContainer.className = 'file-tree-children';
+      wrapper.appendChild(childContainer);
+    } else {
+      childContainer.innerHTML = '';
+    }
+    this.renderedChildContainers.set(parentPath, childContainer);
+
+    this.renderNodes(parentNode.children ?? [], childContainer, {
+      activeFilePath,
+      depth: depth + 1,
+      expandedDirs,
+    });
+
+    return true;
+  }
+
+  clearRenderedDescendants(parentPath) {
+    const prefix = `${parentPath}/`;
+    Array.from(this.renderedDirectoryWrappers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedDirectoryWrappers.delete(pathValue);
+      }
+    });
+    Array.from(this.renderedChildContainers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedChildContainers.delete(pathValue);
+      }
+    });
+  }
+
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';

package/src/client/styles/style.css

@@ -2269,6 +2269,8 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   --preview-floating-comments-width: min(300px, 34vw);
   --preview-floating-outline-width: 220px;
   --preview-content-max-width: 720px;
+  --preview-comment-rail-width: 0px;
+  --preview-comment-rail-inset: 10px;
   display: flex;
   flex: 1;
   overflow: hidden;
@@ -2287,7 +2289,7 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
 }
 
 .preview-content {
-  padding: var(--space-6) var(--space-6) var(--space-12);
+  padding: var(--space-6) calc(var(--space-6) + var(--preview-comment-rail-width)) var(--space-12) var(--space-6);
   max-width: 720px;
   margin: 0 auto;
   min-width: 0;
@@ -2303,6 +2305,10 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
 }
 
 @media (min-width: 769px) {
+  .preview-body {
+    --preview-comment-rail-width: 52px;
+  }
+
   .preview-content {
     padding-bottom: calc(var(--space-12) + 96px);
   }
@@ -3190,7 +3196,7 @@ body.plantuml-maximized-open::before {
   font-size: 10px;
   font-weight: 700;
   pointer-events: auto;
-  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
+  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
 }
 
 .comment-editor-badge.is-active,
@@ -3200,6 +3206,26 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-inverse);
 }
 
+.comment-preview-badge {
+  right: var(--preview-comment-rail-inset);
+}
+
+.comment-editor-badge.is-passive,
+.comment-preview-badge.is-passive {
+  opacity: 0.48;
+  background: color-mix(in srgb, var(--color-surface) 76%, var(--color-comment) 24%);
+  border-color: oklch(from var(--color-comment) l c h / 0.16);
+  box-shadow: none;
+}
+
+.comment-editor-badge.is-hovered,
+.comment-preview-badge.is-hovered {
+  opacity: 1;
+  background: color-mix(in srgb, var(--color-surface) 56%, var(--color-comment) 44%);
+  border-color: oklch(from var(--color-comment) l c h / 0.28);
+  color: var(--color-text-inverse);
+}
+
 .comment-marker-icon {
   display: inline-flex;
   width: 12px;
@@ -3246,6 +3272,24 @@ body.plantuml-maximized-open::before {
   border-radius: 6px;
   background: var(--color-comment-soft);
   border: 1px solid oklch(from var(--color-comment) l c h / 0.16);
+  opacity: 0.56;
+  transition: opacity 140ms ease, background-color 140ms ease, border-color 140ms ease;
+}
+
+.comment-preview-highlight.is-passive {
+  opacity: 0.32;
+}
+
+.comment-preview-highlight.is-hovered {
+  opacity: 0.72;
+  background: color-mix(in srgb, var(--color-comment-soft) 74%, var(--color-comment) 26%);
+  border-color: oklch(from var(--color-comment) l c h / 0.24);
+}
+
+.comment-preview-highlight.is-active {
+  opacity: 0.9;
+  background: color-mix(in srgb, var(--color-comment-soft) 62%, var(--color-comment) 38%);
+  border-color: oklch(from var(--color-comment) l c h / 0.3);
 }
 
 .comment-card-root {

package/src/domain/wiki-link-resolver.js

@@ -66,10 +66,21 @@ export function resolveWikiTargetPath(target, files) {
   }
 
   const rawTarget = String(target ?? '').trim();
+  let fallbackSuffixMatch = null;
 
-  return files.find((filePath) => (
-    filePath === normalizedTarget
-      || filePath.endsWith(`/${normalizedTarget}`)
-      || filePath.replace(/\.md$/i, '') === rawTarget
-  )) ?? null;
+  for (const filePath of files) {
+    if (filePath === normalizedTarget) {
+      return filePath;
+    }
+
+    if (filePath.replace(/\.md$/i, '') === rawTarget) {
+      return filePath;
+    }
+
+    if (!fallbackSuffixMatch && filePath.endsWith(`/${normalizedTarget}`)) {
+      fallbackSuffixMatch = filePath;
+    }
+  }
+
+  return fallbackSuffixMatch;
 }

package/src/domain/workspace-change.js

@@ -0,0 +1,68 @@
+function uniquePaths(values = []) {
+  return Array.from(new Set((values ?? []).filter(Boolean)));
+}
+
+function uniqueRenames(values = []) {
+  return Array.from(new Map(
+    (values ?? [])
+      .filter((entry) => entry?.oldPath && entry?.newPath && entry.oldPath !== entry.newPath)
+      .map((entry) => [`${entry.oldPath}:${entry.newPath}`, {
+        newPath: entry.newPath,
+        oldPath: entry.oldPath,
+      }]),
+  ).values());
+}
+
+function normalizeHighlightRanges(values = []) {
+  return (values ?? [])
+    .filter((entry) => entry?.path && Number.isFinite(entry?.from) && Number.isFinite(entry?.to))
+    .map((entry) => ({
+      from: Math.max(0, Math.round(entry.from)),
+      path: entry.path,
+      to: Math.max(0, Math.round(entry.to)),
+    }));
+}
+
+export function createWorkspaceChange({
+  changedPaths = [],
+  deletedPaths = [],
+  refreshExplorer = true,
+  renamedPaths = [],
+} = {}) {
+  return {
+    changedPaths: uniquePaths(changedPaths),
+    deletedPaths: uniquePaths(deletedPaths),
+    refreshExplorer: refreshExplorer !== false,
+    renamedPaths: uniqueRenames(renamedPaths),
+  };
+}
+
+export function createEmptyWorkspaceChange() {
+  return createWorkspaceChange();
+}
+
+export function hasWorkspaceMutation(workspaceChange = {}) {
+  return Boolean(
+    (workspaceChange.changedPaths?.length ?? 0) > 0
+    || (workspaceChange.deletedPaths?.length ?? 0) > 0
+    || (workspaceChange.renamedPaths?.length ?? 0) > 0,
+  );
+}
+
+export function normalizeWorkspaceEvent(event) {
+  if (!event || typeof event !== 'object' || typeof event.id !== 'string') {
+    return null;
+  }
+
+  return {
+    action: typeof event.action === 'string' ? event.action : 'workspace',
+    createdAt: Number.isFinite(event.createdAt) ? event.createdAt : Date.now(),
+    highlightRanges: normalizeHighlightRanges(event.highlightRanges),
+    id: event.id,
+    origin: typeof event.origin === 'string' ? event.origin : 'api',
+    reloadRequiredPaths: uniquePaths(event.reloadRequiredPaths),
+    requestId: typeof event.requestId === 'string' ? event.requestId : null,
+    sourceRef: typeof event.sourceRef === 'string' ? event.sourceRef : null,
+    workspaceChange: createWorkspaceChange(event.workspaceChange),
+  };
+}

package/src/domain/workspace-room.js

@@ -0,0 +1,3 @@
+export const WORKSPACE_ROOM_NAME = '__workspace__';
+export const WORKSPACE_EVENT_MAX_MESSAGES = 40;
+

package/src/server/create-app-server.js

@@ -11,6 +11,9 @@ import { RoomRegistry } from './domain/collaboration/room-registry.js';
 import { createRequestHandler } from './infrastructure/http/create-request-handler.js';
 import { VaultFileStore } from './infrastructure/persistence/vault-file-store.js';
 import { attachCollaborationGateway } from './infrastructure/websocket/attach-collaboration-gateway.js';
+import { WORKSPACE_ROOM_NAME } from '../domain/workspace-room.js';
+import { FileSystemSyncService } from './infrastructure/workspace/file-system-sync-service.js';
+import { WorkspaceMutationCoordinator } from './infrastructure/workspace/workspace-mutation-coordinator.js';
 
 function getDisplayHost(host) {
   return host === '127.0.0.1' ? 'localhost' : host;
@@ -45,18 +48,39 @@ export function createAppServer(config = loadConfig()) {
     enabled: config.gitEnabled,
     vaultDir: config.vaultDir,
   });
+  let workspaceMutationCoordinator = null;
   const roomRegistry = new RoomRegistry({
-    createRoom: ({ name, onEmpty }) => new CollaborationRoom({
-      documentStore: new CollaborationDocumentStore({
-        backlinkIndex: name === '__lobby__' ? null : backlinkIndex,
+    createRoom: ({ name, onEmpty }) => {
+      const room = new CollaborationRoom({
+        documentStore: new CollaborationDocumentStore({
+          backlinkIndex: name === '__lobby__' || name === WORKSPACE_ROOM_NAME ? null : backlinkIndex,
+          name,
+          vaultFileStore: name === '__lobby__' || name === WORKSPACE_ROOM_NAME ? null : vaultFileStore,
+        }),
+        idleGraceMs: config.wsRoomIdleGraceMs,
+        maxBufferedAmountBytes: config.wsMaxBufferedAmountBytes,
         name,
-        vaultFileStore: name === '__lobby__' ? null : vaultFileStore,
-      }),
-      idleGraceMs: config.wsRoomIdleGraceMs,
-      maxBufferedAmountBytes: config.wsMaxBufferedAmountBytes,
-      name,
-      onEmpty,
-    }),
+        onEmpty,
+      });
+
+      if (name === WORKSPACE_ROOM_NAME && workspaceMutationCoordinator?.workspaceState) {
+        room.replaceWorkspaceEntries(workspaceMutationCoordinator.workspaceState.entries, {
+          generatedAt: workspaceMutationCoordinator.workspaceState.scannedAt,
+        });
+      }
+
+      return room;
+    },
+  });
+  workspaceMutationCoordinator = new WorkspaceMutationCoordinator({
+    backlinkIndex,
+    roomRegistry,
+    vaultFileStore,
+  });
+  vaultFileStore.setManagedWriteTracker(workspaceMutationCoordinator);
+  const fileSystemSyncService = new FileSystemSyncService({
+    mutationCoordinator: workspaceMutationCoordinator,
+    vaultFileStore,
   });
   const requestHandler = createRequestHandler(
     config,
@@ -66,6 +90,8 @@ export function createAppServer(config = loadConfig()) {
     roomRegistry,
     plantUmlRenderer,
     gitService,
+    workspaceMutationCoordinator,
+    fileSystemSyncService,
   );
   const httpServer = createServer((req, res) => {
     requestHandler(req, res).catch((error) => {
@@ -95,6 +121,8 @@ export function createAppServer(config = loadConfig()) {
   async function listen() {
     vaultFileCount = await vaultFileStore.countVaultFiles();
     await backlinkIndex.build();
+    await workspaceMutationCoordinator.initialize();
+    await fileSystemSyncService.start();
 
     return new Promise((resolve, reject) => {
       httpServer.once('error', reject);
@@ -118,6 +146,7 @@ export function createAppServer(config = loadConfig()) {
 
     shutdownPromise = (async () => {
       await collaborationGateway.close();
+      await fileSystemSyncService.close();
       await roomRegistry.reset();
       await Promise.all([
         closeHttpServer(httpServer),
@@ -135,7 +164,9 @@ export function createAppServer(config = loadConfig()) {
     httpServer,
     listen,
     roomRegistry,
+    workspaceMutationCoordinator,
     authService,
+    fileSystemSyncService,
     gitService,
     vaultFileStore,
     get vaultFileCount() { return vaultFileCount; },

package/src/server/domain/backlink-index.js

@@ -14,9 +14,27 @@ import { createWikiTargetIndex, resolveWikiTargetWithIndex } from '../../domain/
 
 const WIKI_LINK_RE = /\[\[([^\]|]+)(?:\|[^\]]+)?\]\]/g;
 
+function createDeferred() {
+  let resolve;
+  let reject;
+  const promise = new Promise((nextResolve, nextReject) => {
+    resolve = nextResolve;
+    reject = nextReject;
+  });
+  return { promise, reject, resolve };
+}
+
 export class BacklinkIndex {
-  constructor({ vaultFileStore }) {
+  constructor({
+    rebuildDelayMs = 150,
+    setTimeoutFn = setTimeout,
+    clearTimeoutFn = clearTimeout,
+    vaultFileStore,
+  }) {
     this.vaultFileStore = vaultFileStore;
+    this.rebuildDelayMs = rebuildDelayMs;
+    this.setTimeoutFn = setTimeoutFn;
+    this.clearTimeoutFn = clearTimeoutFn;
     /** @type {Map<string, Set<string>>} sourcePath → set of resolved target paths */
     this.forward = new Map();
     /** @type {Map<string, Set<string>>} targetPath → set of source paths */
@@ -29,6 +47,11 @@ export class BacklinkIndex {
     this._fileSet = new Set();
     this._wikiTargetIndex = createWikiTargetIndex(this._fileList);
     this._built = false;
+    this._requestedBuildVersion = 0;
+    this._completedBuildVersion = 0;
+    this._buildPromise = null;
+    this._scheduledBuildTimer = null;
+    this._scheduledBuildDeferred = null;
   }
 
   /**
@@ -36,6 +59,74 @@ export class BacklinkIndex {
    * Called once at server startup.
    */
   async build() {
+    this._requestedBuildVersion += 1;
+    return this.flushScheduledBuild();
+  }
+
+  scheduleBuild({ delayMs = this.rebuildDelayMs } = {}) {
+    this._requestedBuildVersion += 1;
+    if (!this._scheduledBuildDeferred) {
+      this._scheduledBuildDeferred = createDeferred();
+    }
+
+    if (this._scheduledBuildTimer) {
+      this.clearTimeoutFn(this._scheduledBuildTimer);
+    }
+
+    this._scheduledBuildTimer = this.setTimeoutFn(() => {
+      this._scheduledBuildTimer = null;
+      const deferred = this._scheduledBuildDeferred;
+      this._scheduledBuildDeferred = null;
+      this._ensureBuiltToRequestedVersion()
+        .then(() => deferred?.resolve())
+        .catch((error) => deferred?.reject(error));
+    }, delayMs);
+    this._scheduledBuildTimer.unref?.();
+
+    return this._scheduledBuildDeferred.promise;
+  }
+
+  async flushScheduledBuild() {
+    if (this._scheduledBuildTimer) {
+      this.clearTimeoutFn(this._scheduledBuildTimer);
+      this._scheduledBuildTimer = null;
+    }
+
+    const deferred = this._scheduledBuildDeferred;
+    this._scheduledBuildDeferred = null;
+
+    try {
+      await this._ensureBuiltToRequestedVersion();
+      deferred?.resolve();
+    } catch (error) {
+      deferred?.reject(error);
+      throw error;
+    }
+  }
+
+  async _ensureBuiltToRequestedVersion() {
+    while (this._completedBuildVersion < this._requestedBuildVersion) {
+      await this._runSingleBuild();
+    }
+  }
+
+  async _runSingleBuild() {
+    if (this._buildPromise) {
+      return this._buildPromise;
+    }
+
+    const targetVersion = this._requestedBuildVersion;
+    this._buildPromise = (async () => {
+      await this._performBuild();
+      this._completedBuildVersion = Math.max(this._completedBuildVersion, targetVersion);
+    })().finally(() => {
+      this._buildPromise = null;
+    });
+
+    return this._buildPromise;
+  }
+
+  async _performBuild() {
     this.forward.clear();
     this.reverse.clear();
     this.contextsBySource.clear();
@@ -169,6 +260,8 @@ export class BacklinkIndex {
    * Returns: [{ file: string, contexts: string[] }]
    */
   async getBacklinks(filePath) {
+    await this.flushScheduledBuild();
+
     const sources = this.reverse.get(filePath);
     if (!sources || sources.size === 0) {
       return [];