collabmd 0.1.20 → 0.1.21

package/src/client/application/app-shell/git-feature.js

@@ -1,14 +1,16 @@
+import { createWorkspaceChange } from '../../../domain/workspace-change.js';
 import { resolveApiUrl } from '../../domain/runtime-paths.js';
 
 function normalizeWorkspaceChange(workspaceChange = {}) {
-  return {
-    changedPaths: Array.isArray(workspaceChange.changedPaths) ? workspaceChange.changedPaths.filter(Boolean) : [],
-    deletedPaths: Array.isArray(workspaceChange.deletedPaths) ? workspaceChange.deletedPaths.filter(Boolean) : [],
-    refreshExplorer: workspaceChange.refreshExplorer !== false,
-    renamedPaths: Array.isArray(workspaceChange.renamedPaths)
-      ? workspaceChange.renamedPaths.filter((entry) => entry?.oldPath && entry?.newPath)
-      : [],
-  };
+  return createWorkspaceChange(workspaceChange);
+}
+
+function createWorkspaceRequestId() {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `workspace-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
 }
 
 export const gitFeature = {
@@ -94,15 +96,19 @@ export const gitFeature = {
   },
 
   async postGitAction(endpoint, payload) {
+    const requestId = createWorkspaceRequestId();
+    this.pendingWorkspaceRequestIds?.add(requestId);
     const response = await fetch(endpoint, {
       body: JSON.stringify(payload),
       headers: {
         'Content-Type': 'application/json',
+        'X-CollabMD-Request-Id': requestId,
       },
       method: 'POST',
     });
     const data = await response.json();
     if (!response.ok) {
+      this.pendingWorkspaceRequestIds?.delete(requestId);
       const error = new Error(data.error || 'Git action failed');
       if (typeof data?.code === 'string') {
         error.code = data.code;
@@ -145,11 +151,6 @@ export const gitFeature = {
     const workspaceChange = normalizeWorkspaceChange(result.workspaceChange);
     await this.refreshWorkspaceAfterGitAction({ filePath, preferredScope });
     this.handleWorkspaceChangeForCurrentFile(workspaceChange, { action, local: true, showToast: showLocalFileToast });
-    this.lobby.sendWorkspaceEvent({
-      action,
-      sourceRef: result.sourceRef ?? null,
-      workspaceChange,
-    });
     return workspaceChange;
   },
 
@@ -165,21 +166,27 @@ export const gitFeature = {
       return false;
     }
 
-    this.navigation.navigateToFile(null);
     if (!showToast) {
+      if (renameEntry) {
+        this.navigation.navigateToFile(renameEntry.newPath);
+      } else {
+        this.navigation.navigateToFile(null);
+      }
       return true;
     }
 
     const displayName = this.getDisplayName(currentFilePath);
     if (renameEntry) {
+      this.navigation.navigateToFile(renameEntry.newPath);
       this.toastController.show(
         local
-          ? `${displayName} was reset away from this branch path`
-          : `${displayName} moved after a ${action} operation`,
+          ? `${displayName} moved to ${this.getDisplayName(renameEntry.newPath)}`
+          : `${displayName} moved on disk`,
       );
       return true;
     }
 
+    this.navigation.navigateToFile(null);
     this.toastController.show(
       local
         ? `${displayName} was removed by ${action}`
@@ -193,13 +200,45 @@ export const gitFeature = {
       return;
     }
 
+    if (event.requestId && this.pendingWorkspaceRequestIds?.has(event.requestId)) {
+      this.pendingWorkspaceRequestIds.delete(event.requestId);
+      return;
+    }
+
     const workspaceChange = normalizeWorkspaceChange(event.workspaceChange);
-    await this.refreshWorkspaceAfterGitAction();
+    if (event.origin === 'git') {
+      await this.refreshGitAfterAction();
+    }
     this.handleWorkspaceChangeForCurrentFile(workspaceChange, {
-      action: event.action || 'git',
+      action: event.action || event.origin || 'workspace',
       local: false,
       showToast: true,
     });
+
+    if (
+      event.origin === 'filesystem'
+      && this.currentFilePath
+      && workspaceChange.changedPaths.includes(this.currentFilePath)
+    ) {
+      const canUseInlineCue = workspaceChange.changedPaths.length === 1;
+      const highlightRange = canUseInlineCue && Array.isArray(event.highlightRanges)
+        ? event.highlightRanges.find((entry) => entry.path === this.currentFilePath)
+        : null;
+      const didFlash = highlightRange
+        ? this.session?.flashExternalUpdate?.(highlightRange)
+        : false;
+      if (!didFlash) {
+        this.toastController.show(`${this.getDisplayName(this.currentFilePath)} updated from disk`);
+      }
+    }
+
+    if (
+      this.currentFilePath
+      && Array.isArray(event.reloadRequiredPaths)
+      && event.reloadRequiredPaths.includes(this.currentFilePath)
+    ) {
+      this.toastController.show(`${this.getDisplayName(this.currentFilePath)} needs a manual reload`);
+    }
   },
 
   async stageGitFile(filePath, { scope = 'working-tree' } = {}) {

package/src/client/application/app-shell/ui-feature.js

@@ -534,6 +534,9 @@ export const uiFeature = {
     if (!this.lobby.provider) {
       this.lobby.connect();
     }
+    if (!this.workspaceSync.provider) {
+      this.workspaceSync.connect();
+    }
 
     if (wasInactive) {
       if (this.fileExplorerReady) {
@@ -554,6 +557,7 @@ export const uiFeature = {
       this.elements.displayNameDialog.close();
     }
     this.lobby.disconnect();
+    this.workspaceSync.disconnect();
     this.globalUsers = [];
     this.chatMessages = [];
     this.chatMessageIds.clear();

package/src/client/bootstrap/collabmd-app-shell.js

@@ -18,6 +18,7 @@ import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-po
 import { getRuntimeConfig } from '../infrastructure/runtime-config.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
+import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
 import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
@@ -111,11 +112,22 @@ export class CollabMdAppShell {
     this.quickSwitcherModulePromise = null;
     this.fileExplorerReadyPromise = Promise.resolve();
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
+    this.pendingWorkspaceRequestIds = new Set();
 
     this.lobby = new LobbyPresence({
       preferredUserName: this.getStoredUserName(),
       onChange: (users) => this.updateGlobalUsers(users),
       onChatChange: (messages, meta) => this.updateChatMessages(messages, meta),
+    });
+    this.workspaceSync = new WorkspaceSyncClient({
+      onTreeChange: (tree, metadata = {}) => {
+        const wasReady = this.fileExplorerReady;
+        this.fileExplorer.setTree(tree, metadata);
+        this.fileExplorerReady = true;
+        if (!wasReady && this.isTabActive) {
+          void this.handleHashChange();
+        }
+      },
       onWorkspaceEvent: (event) => {
         void this.handleIncomingWorkspaceEvent(event);
       },

package/src/client/domain/vault-utils.js

@@ -25,8 +25,8 @@ export function escapeHtml(text) {
  *
  * Matching rules (in order):
  *   1. Exact path match (with .md appended if missing)
- *   2. Filename match at any directory depth
- *   3. Path without .md extension matches the target
+ *   2. Exact path without .md extension matches the target
+ *   3. Filename/path suffix match at any directory depth
  *
  * @param {string} target — the raw wiki-link target text
  * @param {string[]} files — list of vault file paths

package/src/client/excalidraw-editor.js

@@ -149,6 +149,7 @@ if (isTestMode) {
       && collabReady
       && roomClient.canWriteToRoom === true
       && roomClient.waitingForAuthoritativeSync === false
+      && roomClient.isApplyingSharedSnapshot() === false
     ),
     isReady: () => collabReady && Boolean(excalidrawAPI) && Boolean(getNativeHistoryButton('undo')) && Boolean(getNativeHistoryButton('redo')),
     redoShared: () => triggerNativeHistory('redo'),
@@ -506,7 +507,7 @@ window.addEventListener('message', (event) => {
 });
 
 function scheduleSyncToRoom(elements, appState, files) {
-  if (!collabReady || suppressOnChange || roomClient.isApplyingSharedSnapshot()) {
+  if (!collabReady || suppressOnChange) {
     return;
   }
 

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

@@ -229,6 +229,10 @@ export class EditorSession {
     return this.viewAdapter.insertText(text);
   }
 
+  flashExternalUpdate(range) {
+    return this.viewAdapter.flashRemoteRange(range);
+  }
+
   waitForInitialSync(timeoutMs = 1500) {
     return this.collaborationClient.waitForInitialSync(timeoutMs);
   }

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

@@ -11,11 +11,12 @@ import {
 } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
+import { Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
   Decoration,
   EditorView,
+  WidgetType,
   crosshairCursor,
   drawSelection,
   highlightActiveLine,
@@ -36,6 +37,59 @@ import { handleImagePasteEvent } from './editor-paste-utils.js';
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
+const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
+const REMOTE_UPDATE_FLASH_DURATION_MS = 1350;
+const REMOTE_UPDATE_CARET_MAX_LENGTH = 160;
+const RECENT_LOCAL_INPUT_WINDOW_MS = 900;
+
+class RemoteUpdateCaretWidget extends WidgetType {
+  toDOM() {
+    const element = document.createElement('span');
+    element.className = 'cm-remoteUpdateCaretWidget';
+    element.setAttribute('aria-hidden', 'true');
+    return element;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+const addRemoteUpdateFlashEffect = StateEffect.define();
+const clearRemoteUpdateFlashEffect = StateEffect.define();
+const remoteUpdateFlashField = StateField.define({
+  create: () => Decoration.none,
+  update(decorations, transaction) {
+    let nextDecorations = decorations.map(transaction.changes);
+
+    transaction.effects.forEach((effect) => {
+      if (effect.is(clearRemoteUpdateFlashEffect)) {
+        nextDecorations = Decoration.none;
+        return;
+      }
+
+      if (effect.is(addRemoteUpdateFlashEffect)) {
+        const { from, showCaret, to } = effect.value;
+        const nextRanges = [];
+        if (to > from) {
+          nextRanges.push(remoteUpdateMark.range(from, to));
+        }
+        if (showCaret) {
+          nextRanges.push(Decoration.widget({
+            side: -1,
+            widget: new RemoteUpdateCaretWidget(),
+          }).range(from));
+        }
+        nextDecorations = nextRanges.length > 0
+          ? Decoration.set(nextRanges, true)
+          : Decoration.none;
+      }
+    });
+
+    return nextDecorations;
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
 
 function isBracketBeforeCaret(range, state) {
   return state.selection.ranges.some((selectionRange) =>
@@ -150,6 +204,35 @@ function createEditorTheme(theme) {
     '.cm-selectionMatch': {
       backgroundColor: 'var(--color-primary-highlight)',
     },
+    '.cm-remoteUpdateFlash': {
+      animation: 'collabmd-remote-update-flash 1.35s ease-out',
+      backgroundColor: theme === 'dark'
+        ? 'oklch(from var(--color-primary) l c h / 0.22)'
+        : 'oklch(from var(--color-primary) l c h / 0.16)',
+      borderRadius: '3px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.05) c h / 0.26)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.2)'}`,
+    },
+    '.cm-remoteUpdateCaretWidget': {
+      animation: 'collabmd-remote-update-caret 1s ease-out',
+      backgroundColor: 'transparent',
+      borderLeft: `2px solid ${theme === 'dark'
+        ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+        : 'color-mix(in oklab, var(--color-primary) 84%, black)'}`,
+      borderRadius: '999px',
+      boxShadow: `0 0 0 1px ${theme === 'dark'
+        ? 'oklch(from var(--color-primary) calc(l + 0.06) c h / 0.22)'
+        : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.16)'}`,
+      display: 'inline-block',
+      height: '1.2em',
+      marginLeft: '-1px',
+      marginRight: '-1px',
+      pointerEvents: 'none',
+      transformOrigin: 'center bottom',
+      verticalAlign: 'text-bottom',
+      width: '0',
+    },
     '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
       backgroundColor: selectionBackground,
     },
@@ -157,6 +240,42 @@ function createEditorTheme(theme) {
       border: `1px solid ${selectionBorder}`,
       borderRadius: '2px',
     },
+    '@keyframes collabmd-remote-update-flash': {
+      '0%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0.34)'
+          : 'oklch(from var(--color-primary) l c h / 0.26)',
+      },
+      '100%': {
+        backgroundColor: theme === 'dark'
+          ? 'oklch(from var(--color-primary) l c h / 0)'
+          : 'oklch(from var(--color-primary) l c h / 0)',
+      },
+    },
+    '@keyframes collabmd-remote-update-caret': {
+      '0%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.34)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.24)'}`,
+        opacity: '0',
+        transform: 'translateY(0.2em) scaleY(0.7)',
+      },
+      '18%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '72%': {
+        opacity: '1',
+        transform: 'translateY(0) scaleY(1)',
+      },
+      '100%': {
+        boxShadow: `0 0 0 1px ${theme === 'dark'
+          ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0)'
+          : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0)'}`,
+        opacity: '0',
+        transform: 'translateY(-0.05em) scaleY(0.9)',
+      },
+    },
   }, { dark: theme === 'dark' });
 }
 
@@ -204,6 +323,8 @@ export class EditorViewAdapter {
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
     this.viewportFrame = 0;
+    this.remoteUpdateFlashTimer = 0;
+    this.lastLocalInputAt = 0;
     this.handleScroll = () => {
       if (this.viewportFrame) {
         return;
@@ -214,6 +335,9 @@ export class EditorViewAdapter {
         this.emitViewportChange();
       });
     };
+    this.handleLocalInputActivity = () => {
+      this.lastLocalInputAt = Date.now();
+    };
   }
 
   initialize({ awareness, filePath, undoManager, ytext }) {
@@ -276,6 +400,7 @@ export class EditorViewAdapter {
           this.themeCompartment.of(createEditorTheme(this.initialTheme)),
           this.syntaxThemeCompartment.of(this.initialTheme === 'dark' ? oneDark : []),
           this.lineWrappingCompartment.of(this.lineWrappingEnabled ? EditorView.lineWrapping : []),
+          remoteUpdateFlashField,
           yCollab(ytext, awareness, { undoManager }),
           updateListener,
         ],
@@ -283,6 +408,10 @@ export class EditorViewAdapter {
     });
 
     this.editorView.scrollDOM.addEventListener('scroll', this.handleScroll, { passive: true });
+    this.editorView.contentDOM.addEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('paste', this.handleLocalInputActivity);
+    this.editorView.contentDOM.addEventListener('compositionstart', this.handleLocalInputActivity);
     this.updateCursorInfo(this.editorView.state);
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
@@ -293,6 +422,14 @@ export class EditorViewAdapter {
       cancelAnimationFrame(this.viewportFrame);
       this.viewportFrame = 0;
     }
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+      this.remoteUpdateFlashTimer = 0;
+    }
+    this.editorView?.contentDOM?.removeEventListener('beforeinput', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('keydown', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('paste', this.handleLocalInputActivity);
+    this.editorView?.contentDOM?.removeEventListener('compositionstart', this.handleLocalInputActivity);
     this.editorView?.scrollDOM?.removeEventListener('scroll', this.handleScroll);
     this.editorView?.destroy();
     this.editorView = null;
@@ -355,6 +492,49 @@ export class EditorViewAdapter {
     this.editorView?.requestMeasure();
   }
 
+  flashRemoteRange({ from = 0, to = 0 } = {}, durationMs = REMOTE_UPDATE_FLASH_DURATION_MS) {
+    const state = this.editorView?.state;
+    if (!state || state.doc.length === 0) {
+      return false;
+    }
+
+    let start = Math.min(Math.max(Math.round(from), 0), state.doc.length);
+    let end = Math.min(Math.max(Math.round(to), 0), state.doc.length);
+    if (end <= start) {
+      if (start < state.doc.length) {
+        end = start + 1;
+      } else if (start > 0) {
+        start -= 1;
+        end = start + 1;
+      } else {
+        return false;
+      }
+    }
+
+    const rangeLength = Math.max(end - start, 0);
+    const showCaret = (
+      rangeLength <= REMOTE_UPDATE_CARET_MAX_LENGTH
+      && (Date.now() - this.lastLocalInputAt) > RECENT_LOCAL_INPUT_WINDOW_MS
+    );
+
+    this.editorView.dispatch({
+      effects: addRemoteUpdateFlashEffect.of({ from: start, showCaret, to: end }),
+    });
+
+    if (this.remoteUpdateFlashTimer) {
+      clearTimeout(this.remoteUpdateFlashTimer);
+    }
+
+    this.remoteUpdateFlashTimer = window.setTimeout(() => {
+      this.remoteUpdateFlashTimer = 0;
+      this.editorView?.dispatch({
+        effects: clearRemoteUpdateFlashEffect.of(null),
+      });
+    }, durationMs);
+
+    return true;
+  }
+
   getViewportState(viewportRatio = 0.35) {
     return {
       topLine: this.getTopVisibleLineNumber(viewportRatio),