collabmd 0.1.19 → 0.1.21

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

@@ -87,6 +87,7 @@ export class GitPanelController {
   constructor({
     enabled = true,
     onCommitStaged = () => {},
+    onOpenPullBackup = () => {},
     onPullBranch = () => {},
     onPushBranch = () => {},
     onRepoChange = () => {},
@@ -100,6 +101,7 @@ export class GitPanelController {
   } = {}) {
     this.enabled = enabled;
     this.onCommitStaged = onCommitStaged;
+    this.onOpenPullBackup = onOpenPullBackup;
     this.onPullBranch = onPullBranch;
     this.onPushBranch = onPushBranch;
     this.onRepoChange = onRepoChange;
@@ -111,6 +113,7 @@ export class GitPanelController {
     this.searchInput = searchInput;
     this.toastController = toastController;
     this.panel = document.getElementById('gitPanel');
+    this.pullBackups = [];
     this.status = null;
     this.active = false;
     this.refreshTimer = null;
@@ -147,6 +150,18 @@ export class GitPanelController {
         return;
       }
 
+      const pullBackupButton = event.target instanceof Element
+        ? event.target.closest('[data-git-pull-backup-path]')
+        : null;
+      if (pullBackupButton) {
+        const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
+        if (!summaryPath) {
+          return;
+        }
+        this.onOpenPullBackup(summaryPath);
+        return;
+      }
+
       const actionButton = event.target instanceof Element
         ? event.target.closest('[data-git-file-action]')
         : null;
@@ -243,6 +258,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -256,6 +272,19 @@ export class GitPanelController {
       }
 
       this.status = data;
+      this.pullBackups = [];
+      if (data.isGitRepo) {
+        try {
+          const backupResponse = await fetch(resolveApiUrl('/git/pull-backups'));
+          const backupData = await backupResponse.json();
+          if (!backupResponse.ok) {
+            throw new Error(backupData.error || 'Failed to load pull backups');
+          }
+          this.pullBackups = Array.isArray(backupData.backups) ? backupData.backups : [];
+        } catch (backupError) {
+          console.error('[git-panel] Failed to load pull backups:', backupError);
+        }
+      }
       this.onRepoChange(Boolean(data.isGitRepo), data);
       this.render();
       return data;
@@ -267,6 +296,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -367,6 +397,47 @@ export class GitPanelController {
     `;
   }
 
+  renderPullBackupsSection() {
+    if (!Array.isArray(this.pullBackups) || this.pullBackups.length === 0) {
+      return '';
+    }
+
+    return `
+      <section class="git-section">
+        <button class="git-section-header" type="button" data-git-section-toggle="pull-backups">
+          ${chevronSvg(this.collapsedSections.has('pull-backups'))}
+          Pull Backups
+          <span class="git-section-count">${this.pullBackups.length}</span>
+        </button>
+        <div class="git-file-list${this.collapsedSections.has('pull-backups') ? ' hidden' : ''}">
+          ${this.pullBackups.map((backup) => this.renderPullBackup(backup)).join('')}
+        </div>
+      </section>
+    `;
+  }
+
+  renderPullBackup(backup) {
+    const createdAt = String(backup?.createdAt || '').replace('T', ' ').replace(/\.\d+Z?$/u, 'Z');
+    const fileCount = Number(backup?.fileCount || 0);
+
+    return `
+      <div class="git-file-row">
+        <button
+          class="git-file-item"
+          type="button"
+          data-git-pull-backup-path="${escapeHtml(backup.summaryPath || '')}"
+        >
+          ${fileIconSvg()}
+          <span class="git-file-copy">
+            <span class="git-file-name">Pull backup ${escapeHtml(backup.id || '')}</span>
+            <span class="git-file-path">${escapeHtml(`${createdAt} · ${backup.branch || 'HEAD'} · ${fileCount} file${fileCount === 1 ? '' : 's'}`)}</span>
+          </span>
+          <span class="git-status-badge modified">BK</span>
+        </button>
+      </div>
+    `;
+  }
+
   renderFile(file) {
     const isActive = this.selection.path === file.path && this.selection.scope === file.scope;
     const dirPath = getPathDir(file.path);
@@ -449,6 +520,7 @@ export class GitPanelController {
     }
 
     const branch = this.status.branch ?? {};
+    const pullBackupsMarkup = this.renderPullBackupsSection();
     const sectionMarkup = (this.status.sections ?? [])
       .map((section) => this.renderSection(section))
       .filter(Boolean)
@@ -492,6 +564,7 @@ export class GitPanelController {
           </button>
         </div>
       </div>
+      ${pullBackupsMarkup}
       ${sectionMarkup || '<div class="git-panel-empty">No local changes</div>'}
       ${hasChanges ? `
         <div class="git-panel-footer">

package/src/client/presentation/outline-controller.js

@@ -2,6 +2,7 @@ export class OutlineController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onNavigateToHeading,
+    onWillOpen,
   } = {}) {
     this.outlineOpen = false;
     this.activeHeadingFrame = null;
@@ -9,16 +10,36 @@ export class OutlineController {
     this.headings = [];
     this.pinnedHeadingId = null;
     this.onNavigateToHeading = onNavigateToHeading;
+    this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
     this.navigation = document.getElementById('outlineNav');
     this.previewContainer = document.getElementById('previewContainer');
     this.toggleButton = document.getElementById('outlineToggle');
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.handlePreviewScroll = () => this.scheduleActiveHeadingUpdate();
+    this.handleDocumentPointerDown = (event) => {
+      if (!this.outlineOpen) {
+        return;
+      }
+
+      const target = event.target;
+      if (
+        target instanceof Node
+        && (
+          this.panel?.contains(target)
+          || this.toggleButton?.contains(target)
+        )
+      ) {
+        return;
+      }
+
+      this.close();
+    };
   }
 
   initialize() {
     this.toggleButton?.addEventListener('click', () => this.toggle());
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown);
   }
 
   toggle() {
@@ -30,6 +51,10 @@ export class OutlineController {
   }
 
   setOpenState(nextState) {
+    if (nextState && !this.outlineOpen) {
+      this.onWillOpen?.();
+    }
+
     this.outlineOpen = nextState;
     this.panel?.classList.toggle('hidden', !this.outlineOpen);
     this.toggleButton?.classList.toggle('active', this.outlineOpen);

package/src/client/styles/style.css

@@ -2265,6 +2265,12 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
 
 /* Preview body (contains preview + outline side by side) */
 .preview-body {
+  --preview-floating-sidebar-gap: var(--space-3);
+  --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;
@@ -2283,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;
@@ -2298,6 +2304,16 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   color: var(--color-text-muted);
 }
 
+@media (min-width: 769px) {
+  .preview-body {
+    --preview-comment-rail-width: 52px;
+  }
+
+  .preview-content {
+    padding-bottom: calc(var(--space-12) + 96px);
+  }
+}
+
 .preview-content.is-excalidraw-file-preview {
   display: flex;
   width: 100%;
@@ -3180,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,
@@ -3190,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;
@@ -3236,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 {
@@ -3670,14 +3724,45 @@ body.plantuml-maximized-open::before {
 
 /* ===== BACKLINKS PANEL ===== */
 
+.backlinks-panel.hidden,
+.backlinks-panel-layer.hidden {
+  display: none;
+}
 .backlinks-panel {
+  min-width: 0;
+}
+.backlinks-panel-layer {
+  position: absolute;
+  left: max(
+    var(--space-4),
+    calc((100% - min(var(--preview-content-max-width), 100%)) / 2)
+  );
+  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
+  z-index: 14;
+  pointer-events: none;
+}
+.backlinks-panel-dock {
+  display: flex;
+  flex-direction: column-reverse;
+  border: 1px solid var(--color-divider);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
+  box-shadow: 0 14px 34px oklch(0 0 0 / 0.18);
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  pointer-events: auto;
+  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
+}
+.backlinks-panel-dock:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 40px oklch(0 0 0 / 0.2);
+}
+.backlinks-panel-inline {
   border-top: 1px solid var(--color-divider);
   margin-top: var(--space-6);
   padding: 0 var(--space-4);
 }
-.backlinks-panel.hidden {
-  display: none;
-}
 .backlinks-header {
   display: flex;
   align-items: center;
@@ -3693,6 +3778,10 @@ body.plantuml-maximized-open::before {
 .backlinks-header:hover {
   color: var(--color-text);
 }
+.backlinks-panel-dock .backlinks-header {
+  padding: 11px 14px;
+  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
+}
 .backlinks-header-empty {
   cursor: default;
   opacity: 0.5;
@@ -3709,15 +3798,20 @@ body.plantuml-maximized-open::before {
 }
 .backlinks-toggle {
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .backlinks-count {
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.12);
+  background: oklch(from var(--color-primary) l c h / 0.14);
   border-radius: var(--radius-full);
-  padding: 1px 8px;
-  min-width: 0;
+  padding: 1px 7px;
+  min-width: 22px;
+  text-align: center;
 }
 .backlinks-count:empty {
   display: none;
@@ -3727,16 +3821,31 @@ body.plantuml-maximized-open::before {
   max-height: 0;
   transition: max-height 200ms ease;
 }
-.backlinks-panel.expanded .backlinks-body {
+.backlinks-panel-inline.expanded .backlinks-body {
   max-height: 600px;
   overflow-y: auto;
 }
+.backlinks-panel-dock .backlinks-body {
+  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-offset) 6%);
+}
+.backlinks-panel-dock.expanded .backlinks-body {
+  max-height: min(44vh, 400px);
+  overflow-y: auto;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 78%, var(--color-primary) 22%);
+}
+.backlinks-panel-dock.expanded {
+  border-color: color-mix(in srgb, var(--color-divider) 72%, var(--color-primary) 28%);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
+}
 .backlinks-list {
   padding-bottom: var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
+.backlinks-panel-dock .backlinks-list {
+  padding: 10px;
+}
 .backlink-item {
   display: block;
   width: 100%;
@@ -3748,6 +3857,10 @@ body.plantuml-maximized-open::before {
   cursor: pointer;
   transition: border-color var(--transition-interactive), background var(--transition-interactive);
 }
+.backlinks-panel-dock .backlink-item {
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
+}
 .backlink-item:hover {
   border-color: var(--color-primary);
   background: oklch(from var(--color-primary) l c h / 0.04);
@@ -3789,6 +3902,12 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-faint);
 }
 
+@media (min-width: 769px) {
+  .backlinks-panel-inline {
+    display: none !important;
+  }
+}
+
 .outline-panel {
   width: 220px;
   flex-shrink: 0;
@@ -3889,6 +4008,9 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-pane {
   flex: 1;
 }
+.editor-layout[data-view="preview"] .preview-body {
+  --preview-content-max-width: 1080px;
+}
 .editor-layout[data-view="preview"] .preview-content {
   max-width: 1080px;
 }
@@ -3923,6 +4045,55 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {
   max-width: none;
 }
+@media (min-width: 769px) {
+  .preview-body > .comments-drawer,
+  .preview-body > .outline-panel {
+    position: absolute;
+    top: var(--preview-floating-sidebar-gap);
+    right: var(--preview-floating-sidebar-gap);
+    bottom: var(--preview-floating-sidebar-gap);
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid var(--color-divider);
+    border-radius: calc(var(--radius-lg) + 2px);
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: blur(14px);
+  }
+
+  .preview-body > .comments-drawer {
+    width: var(--preview-floating-comments-width);
+    min-width: 240px;
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .outline-panel {
+    width: var(--preview-floating-outline-width);
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .comments-drawer.hidden,
+  .preview-body > .outline-panel.hidden {
+    display: flex !important;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(12px);
+    visibility: hidden;
+  }
+
+  .preview-body > .comments-drawer:not(.hidden),
+  .preview-body > .outline-panel:not(.hidden) {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .preview-body:has(> .outline-panel:not(.hidden)) > .comments-drawer:not(.hidden) {
+    right: calc(
+      var(--preview-floating-sidebar-gap) * 2
+      + var(--preview-floating-outline-width)
+    );
+  }
+}
 .editor-layout[data-view="editor"] .editor-pane {
   flex: 1;
 }
@@ -4022,6 +4193,10 @@ body.plantuml-maximized-open::before {
     padding: var(--space-4);
   }
 
+  .backlinks-panel-layer {
+    display: none !important;
+  }
+
   .diff-toolbar {
     flex-wrap: wrap;
     padding: var(--space-2) var(--space-3);

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; },