collabmd 0.1.43 → 0.1.45

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

@@ -1,63 +1,12 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { getVaultPathLeaf } from '../domain/vault-paths.js';
+import { createRequestHeaders, parseApiResponse } from './api-client-utils.js';
+import { downloadBlob, parseDownloadFileName } from '../browser-utils.js';
 
 function encodeHeaderMetadata(value) {
   return encodeURIComponent(String(value ?? ''));
 }
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function downloadBlob(blob, fileName) {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = fileName;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(url), 0);
-}
-
-function parseDownloadFileName(contentDisposition = '', fallbackName = 'download') {
-  const utfMatch = String(contentDisposition).match(/filename\*=UTF-8''([^;]+)/iu);
-  if (utfMatch) {
-    try {
-      return decodeURIComponent(utfMatch[1]);
-    } catch {
-      return fallbackName;
-    }
-  }
-
-  const asciiMatch = String(contentDisposition).match(/filename="([^"]+)"/iu);
-  return asciiMatch?.[1] || fallbackName;
-}
-
-function createRequestHeaders(requestId, headers = {}) {
-  const nextHeaders = { ...headers };
-  if (requestId) {
-    nextHeaders['X-CollabMD-Request-Id'] = String(requestId);
-  }
-
-  return nextHeaders;
-}
-
-async function parseApiResponse(response, fallbackError) {
-  const data = await response.json().catch(() => ({}));
-  if (!response.ok || data.ok === false) {
-    const error = new Error(data.error || fallbackError);
-    error.status = response.status;
-    error.body = data;
-    throw error;
-  }
-
-  return data;
-}
-
 async function triggerDownload(url, {
   fallbackError,
   fallbackFileName,
@@ -72,6 +21,7 @@ async function triggerDownload(url, {
   downloadBlob(
     blob,
     parseDownloadFileName(response.headers.get('content-disposition') || '', fallbackFileName),
+    { removeDelayMs: 0, revokeDelayMs: 0 },
   );
   return response;
 }
@@ -92,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),
@@ -287,7 +262,7 @@ export class VaultApiClient {
   }
 
   async downloadFile(path) {
-    const fallbackFileName = getPathLeaf(path) || 'download';
+    const fallbackFileName = getVaultPathLeaf(path) || 'download';
     return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {
       fallbackError: 'Failed to download file',
       fallbackFileName,
@@ -295,7 +270,7 @@ export class VaultApiClient {
   }
 
   async downloadDirectory(path) {
-    const directoryName = getPathLeaf(path) || 'vault';
+    const directoryName = getVaultPathLeaf(path) || 'vault';
     return triggerDownload(resolveApiUrl(`/download/directory?path=${encodeURIComponent(path)}`), {
       fallbackError: 'Failed to download folder',
       fallbackFileName: `${directoryName}.zip`,

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/bases-preview-controller.js

@@ -2,8 +2,9 @@ import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { buttonClassNames } from './components/ui/button.js';
-import { inputClassNames } from './components/ui/input.js';
+import { inputClassNames } from './components/ui/class-names.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
+import { downloadBlob, parseDownloadFileName } from '../browser-utils.js';
 
 function createShellKey() {
   return `base-${Math.random().toString(36).slice(2, 10)}`;
@@ -1143,26 +1144,6 @@ function updateShellPanel(entry, result) {
   });
 }
 
-function downloadBlob(blob, fileName = 'base.csv') {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = fileName;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-}
-
-function parseDownloadFileName(contentDisposition = '') {
-  const utfMatch = contentDisposition.match(/filename\*=UTF-8''([^;]+)/iu);
-  if (utfMatch) {
-    return decodeURIComponent(utfMatch[1]);
-  }
-  const asciiMatch = contentDisposition.match(/filename="([^"]+)"/iu);
-  return asciiMatch?.[1] || 'base.csv';
-}
-
 export class BasesPreviewController {
   constructor({
     getActiveFilePath = () => '',
@@ -1721,7 +1702,10 @@ export class BasesPreviewController {
         activeFilePath: this.getActiveFilePath?.() ?? '',
         ...entry.payload,
       });
-      downloadBlob(response.blob, parseDownloadFileName(response.contentDisposition));
+      downloadBlob(response.blob, parseDownloadFileName(response.contentDisposition, 'base.csv'), {
+        removeDelayMs: 0,
+        revokeDelayMs: 0,
+      });
     } catch (error) {
       this.toastController?.show?.(error.message || 'Failed to export base CSV');
     }

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

@@ -1,32 +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 getPathLeaf(pathValue = '') {
-  return String(pathValue)
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue = '') {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
-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';
@@ -92,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.';
@@ -107,7 +89,7 @@ export class CommentOverviewController {
     return this.refreshPromise;
   }
 
-  setOverview(overview = {}) {
+  setOverview(overview = {}, { render = true } = {}) {
     this.errorMessage = '';
     this.overview = {
       files: asArray(overview.files),
@@ -117,7 +99,9 @@ export class CommentOverviewController {
     this.onOverviewChange?.(this.overview, {
       threadCounts: this.getThreadCounts(),
     });
-    this.render();
+    if (render) {
+      this.render();
+    }
   }
 
   render() {
@@ -177,11 +161,11 @@ export class CommentOverviewController {
 
     const title = document.createElement('h3');
     title.className = 'comment-overview-file-title';
-    title.textContent = stripVaultFileExtension(getPathLeaf(file.filePath));
+    title.textContent = stripVaultFileExtension(getVaultPathLeaf(file.filePath));
 
     const parent = document.createElement('span');
     parent.className = 'comment-overview-file-path';
-    parent.textContent = getParentPath(file.filePath) || file.filePath;
+    parent.textContent = getVaultPathParent(file.filePath) || file.filePath;
 
     const count = document.createElement('span');
     count.className = 'comment-overview-file-count';
@@ -199,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,
@@ -209,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

@@ -5,6 +5,7 @@ import {
   COMMENT_REACTION_MORE_EMOJIS,
   COMMENT_REACTION_PRESET_EMOJIS,
   clamp,
+  createRectFromRects,
   createRenderedCommentBody,
   formatAnchorLabel,
   formatReactionCount,
@@ -13,7 +14,7 @@ import {
   isReactionPickerOpen,
 } from './comment-ui-shared.js';
 import { buttonClassNames } from '../components/ui/button.js';
-import { inputClassNames } from '../components/ui/input.js';
+import { inputClassNames } from '../components/ui/class-names.js';
 
 /** @this {any} */
 function ensureCardRoot() {
@@ -29,8 +30,8 @@ function ensureCardRoot() {
 }
 
 /** @this {any} */
-function openComposerForSelection(origin = 'editor', sourceRect = null) {
-  const anchor = this.session?.getCurrentSelectionCommentAnchor?.();
+function openComposerForSelection(origin = 'editor', sourceRect = null, previewSelection = null) {
+  const anchor = previewSelection?.anchor ?? this.session?.getCurrentSelectionCommentAnchor?.();
   if (!anchor) {
     return;
   }
@@ -46,8 +47,9 @@ function openComposerForSelection(origin = 'editor', sourceRect = null) {
     composerDraft: null,
     mode: 'create',
     origin: nextOrigin,
+    previewRange: previewSelection?.range ?? null,
     replyThreadId: null,
-    sourceRect: nextSourceRect,
+    sourceRect: nextSourceRect ?? null,
   };
   this.render();
 }
@@ -71,10 +73,14 @@ function openThreadGroup(group, { anchor, origin, sourceRect }) {
 
 /** @this {any} */
 function closeCard() {
+  const wasPreviewComposer = this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview';
   this.activeCard = null;
   this.pendingCardFocusElement = null;
   this.reactionPicker = null;
   this.renderCard();
+  if (wasPreviewComposer) {
+    this.clearPreviewSelection();
+  }
   this.scheduleLayoutRefresh();
 }
 
@@ -91,6 +97,10 @@ function updateCardSourceRect() {
     return this.activeCard.sourceRect;
   }
   if (this.activeCard.origin === 'preview') {
+    const selectionRect = createRectFromRects(Array.from(this.activeCard.previewRange?.getClientRects?.() ?? []));
+    if (selectionRect) {
+      return selectionRect;
+    }
     return this.resolvePreviewTarget(this.activeCard.anchor)?.bubbleRect ?? this.activeCard.sourceRect;
   }
   if (this.activeCard.origin === 'toolbar') {
@@ -215,6 +225,13 @@ function renderCard() {
   const content = document.createElement('div');
   content.className = 'comment-card-scroll';
 
+  if (this.activeCard.mode === 'create' && this.activeCard.anchor?.fallbackToLines) {
+    const anchorNote = document.createElement('p');
+    anchorNote.className = 'comment-card-anchor-note';
+    anchorNote.textContent = `Exact preview mapping was unavailable. This comment will be anchored to ${formatAnchorLabel(this.activeCard.anchor).toLowerCase()}.`;
+    content.appendChild(anchorNote);
+  }
+
   if (this.activeCard.anchor?.quote) {
     const quote = document.createElement('p');
     quote.className = 'comment-card-quote';
@@ -343,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({
@@ -392,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, {