collabmd 0.1.44 → 0.1.46

package/src/client/infrastructure/excalidraw-room-client.js

@@ -24,6 +24,10 @@ import {
   tryParseSceneJson,
 } from '../domain/excalidraw-scene.js';
 import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
+import {
+  normalizeCommentQuote,
+} from '../../domain/comment-threads.js';
+import { CommentThreadStore } from './comment-thread-store.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 
 const DEFAULT_EMPTY_SCENE_GUARD_MS = 250;
@@ -39,16 +43,21 @@ export const EXCALIDRAW_ROOM_CONNECTION_STATE = Object.freeze({
   RECONNECTING_READONLY: 'reconnecting-readonly',
 });
 
-function stableJson(value) {
-  if (Array.isArray(value)) {
-    return `[${value.map((entry) => stableJson(entry)).join(',')}]`;
+function areExcalidrawFilesEqual(left, right) {
+  if (left === right) {
+    return true;
   }
 
-  if (value && typeof value === 'object') {
-    return `{${Object.keys(value).sort().map((key) => `${JSON.stringify(key)}:${stableJson(value[key])}`).join(',')}}`;
+  if (!left || !right || typeof left !== 'object' || typeof right !== 'object') {
+    return false;
   }
 
-  return JSON.stringify(value);
+  return left.id === right.id
+    && left.mimeType === right.mimeType
+    && left.dataURL === right.dataURL
+    && left.created === right.created
+    && left.lastRetrieved === right.lastRetrieved
+    && left.version === right.version;
 }
 
 function normalizeElementVersion(value) {
@@ -81,6 +90,35 @@ function shouldSyncElementToRoom(localElement, roomElement) {
   return localVersionNonce < roomVersionNonce;
 }
 
+function createDiagramCommentAnchor(element) {
+  const elementId = typeof element?.id === 'string' ? element.id.trim() : '';
+  const x = Number(element?.x);
+  const y = Number(element?.y);
+  const width = Number(element?.width);
+  const height = Number(element?.height);
+  if (!elementId || ![x, y, width, height].every(Number.isFinite)) {
+    return null;
+  }
+
+  return {
+    anchorKind: 'diagram-element',
+    anchorPoint: {
+      x: x + (width / 2),
+      y: y + (height / 2),
+    },
+    anchorQuote: normalizeCommentQuote(element.text),
+    anchorSnapshot: {
+      height,
+      text: normalizeCommentQuote(element.text),
+      type: typeof element.type === 'string' ? element.type : 'element',
+      width,
+      x,
+      y,
+    },
+    elementId,
+  };
+}
+
 export class ExcalidrawRoomClient {
   constructor({
     cancelAnimationFrameFn = (frameId) => cancelAnimationFrame(frameId),
@@ -89,6 +127,7 @@ export class ExcalidrawRoomClient {
     filePath = '',
     now = () => Date.now(),
     onCollaboratorsChange = () => {},
+    onCommentThreadsChange = () => {},
     onConnectionStateChange = () => {},
     onRemoteSceneJson = () => {},
     requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
@@ -106,6 +145,7 @@ export class ExcalidrawRoomClient {
     this.filePath = filePath;
     this.now = now;
     this.onCollaboratorsChange = onCollaboratorsChange;
+    this.onCommentThreadsChange = onCommentThreadsChange;
     this.onConnectionStateChange = onConnectionStateChange;
     this.onRemoteSceneJson = onRemoteSceneJson;
     this.requestAnimationFrameFn = requestAnimationFrameFn;
@@ -138,12 +178,22 @@ export class ExcalidrawRoomClient {
     this.lastViewportSignature = '';
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
+    this.structuredObserversAttached = false;
     this.canWriteToRoom = false;
     this.waitingForAuthoritativeSync = false;
     this.connectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
     this.hasAuthoritativeSync = false;
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
+    this.commentThreadStore = new CommentThreadStore({
+      canWrite: () => this.canWriteToRoom,
+      createAnchor: createDiagramCommentAnchor,
+      getDoc: () => this.ydoc,
+      getEditorState: () => null,
+      getLocalUser: () => this.getLocalUser(),
+      onCommentsChange: (threads) => this.onCommentThreadsChange(threads),
+      resolveThread: (thread) => thread,
+    });
 
     this.handleAwarenessChange = () => {
       this.onCollaboratorsChange(buildCollaboratorsMap(this.awareness));
@@ -177,6 +227,25 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
 
+  getCommentThreads() {
+    return this.commentThreadStore.getCommentThreads();
+  }
+
+  createCommentThread({ body, element } = {}) {
+    return this.commentThreadStore.createCommentThread({
+      anchor: element,
+      body,
+    });
+  }
+
+  replyToCommentThread(threadId, body) {
+    return this.commentThreadStore.replyToCommentThread(threadId, body);
+  }
+
+  deleteCommentThread(threadId) {
+    return this.commentThreadStore.deleteCommentThread(threadId);
+  }
+
   getConnectionState() {
     return this.connectionState;
   }
@@ -268,7 +337,16 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
 
-  async connect({ initialUser = null } = {}) {
+  async connect(options = {}) {
+    try {
+      return await this.connectInternal(options);
+    } catch (error) {
+      this.disconnect();
+      throw error;
+    }
+  }
+
+  async connectInternal({ initialUser = null } = {}) {
     this.localUser = initialUser;
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING);
 
@@ -277,6 +355,7 @@ export class ExcalidrawRoomClient {
       this.lastSceneJson = JSON.stringify(scene);
       this.hasAuthoritativeSync = true;
       this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE);
+      this.onCommentThreadsChange([]);
       return scene;
     }
 
@@ -367,6 +446,11 @@ export class ExcalidrawRoomClient {
     this.roomElements.observeDeep(this.handleStructuredSceneUpdate);
     this.roomFiles.observeDeep(this.handleStructuredSceneUpdate);
     this.roomAppState.observe(this.handleStructuredSceneUpdate);
+    this.structuredObserversAttached = true;
+    this.commentThreadStore.bind({
+      commentThreads: this.ydoc.getArray('comments'),
+      ydoc: this.ydoc,
+    });
     if (usedApiFallback && this.canWriteToRoom) {
       this.commitSceneJson(this.lastSceneJson, {
         origin: 'excalidraw-api-fallback',
@@ -501,7 +585,7 @@ export class ExcalidrawRoomClient {
 
   mergeLocallyChangedAppState(appState, baseSceneJson) {
     const baseScene = parseSceneJson(baseSceneJson);
-    const roomScene = parseSceneJson(this.getStructuredSceneJson() || this.lastSceneJson);
+    const roomScene = parseSceneJson(this.lastSceneJson || this.getStructuredSceneJson());
     const nextAppState = {
       ...roomScene.appState,
     };
@@ -523,7 +607,7 @@ export class ExcalidrawRoomClient {
     elements,
     files,
   } = {}) {
-    const roomSceneJson = this.getStructuredSceneJson() || this.lastSceneJson || baseSceneJson;
+    const roomSceneJson = this.lastSceneJson || this.getStructuredSceneJson() || baseSceneJson;
     const roomScene = parseSceneJson(roomSceneJson);
     const nextAppState = this.mergeLocallyChangedAppState(appState, baseSceneJson);
     const roomElementsById = new Map(roomScene.elements.map((element) => [element.id, element]));
@@ -533,7 +617,7 @@ export class ExcalidrawRoomClient {
     const nextFiles = files && typeof files === 'object' ? files : {};
     const changedFiles = Object.fromEntries(
       Object.entries(nextFiles).filter(([fileId, file]) => (
-        stableJson(file) !== stableJson(roomScene.files?.[fileId])
+        !areExcalidrawFilesEqual(file, roomScene.files?.[fileId])
       )),
     );
     const appStateChanged = (
@@ -869,10 +953,15 @@ export class ExcalidrawRoomClient {
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
 
-    this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
-    this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+    if (this.structuredObserversAttached) {
+      this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
+      this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+      this.structuredObserversAttached = false;
+    }
+
+    this.commentThreadStore.unbind();
 
     if (this.awareness) {
       this.awareness.off('change', this.handleAwarenessChange);

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

@@ -74,6 +74,11 @@ export class GitApiClient {
     return parseApiResponse(response, 'Failed to load historical file preview');
   }
 
+  getFileAttachmentUrl({ hash, path } = {}) {
+    const params = createSearchParams({ hash, path });
+    return resolveApiUrl(`/git/file-attachment?${params.toString()}`);
+  }
+
   async stageFile({ path, requestId = null } = {}) {
     return this.#postJson('/git/stage', { path }, { requestId, fallbackError: 'Failed to stage file' });
   }

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,45 @@ 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 syncStructurizrWorkspace({ path, source }) {
+    const response = await fetch(resolveApiUrl('/structurizr/sync'), {
+      body: JSON.stringify({
+        path,
+        source,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to sync Structurizr workspace');
+  }
+
+  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),
@@ -236,6 +275,18 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to upload image');
   }
 
+  async uploadFile({ file, path, requestId = null }) {
+    const response = await fetch(resolveApiUrl('/file/upload'), {
+      body: file,
+      headers: createRequestHeaders(requestId, {
+        'Content-Type': file?.type || 'application/octet-stream',
+        'X-CollabMD-File-Path': encodeHeaderMetadata(path),
+      }),
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to upload file');
+  }
+
   async downloadFile(path) {
     const fallbackFileName = getVaultPathLeaf(path) || 'download';
     return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {

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, {