collabmd 0.1.49 → 0.1.51

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

@@ -18,6 +18,17 @@ export function escapeHtml(text) {
     .replace(/'/g, ''');
 }
 
+/**
+ * Builds a document fragment from an HTML string for a single
+ * replaceChildren() call. Escape untrusted parts before calling.
+ *
+ * @param {string} markup — trusted HTML markup
+ * @returns {DocumentFragment} parsed fragment
+ */
+export function createFragment(markup) {
+  return document.createRange().createContextualFragment(markup);
+}
+
 /**
  * Clamps a numeric value between a minimum and maximum bound.
  *

package/src/client/excalidraw-editor.js

@@ -88,6 +88,7 @@ function setAppliedSceneJson(value) {
 
 let collabReady = false;
 let pendingRemoteSceneJson = '';
+let pendingRemoteSceneAuthoritative = false;
 let pendingCollaborators = null;
 let activeCollaborators = new Map();
 let followedSocketId = null;
@@ -432,12 +433,12 @@ function createRoomClient(filePath) {
 
       handleRoomConnectionStateChange(event);
     },
-    onRemoteSceneJson: (sceneJson) => {
+    onRemoteSceneJson: (sceneJson, { authoritative = false } = {}) => {
       if (generation !== roomClientGeneration) {
         return;
       }
 
-      applySceneFromJson(sceneJson);
+      applySceneFromJson(sceneJson, { authoritative });
     },
     syncTimeoutMs: Number.isFinite(syncTimeoutMs) ? syncTimeoutMs : undefined,
     vaultClient: vaultApiClient,
@@ -1393,14 +1394,18 @@ function flushPendingRemoteScene() {
   }
 
   const sceneJson = pendingRemoteSceneJson;
+  const authoritative = pendingRemoteSceneAuthoritative;
   pendingRemoteSceneJson = '';
+  pendingRemoteSceneAuthoritative = false;
   applySceneFromJson(sceneJson, {
+    authoritative,
     force: true,
   });
   return true;
 }
 
 function applySceneFromJson(rawJson, {
+  authoritative = false,
   force = false,
 } = {}) {
   const scene = parseSceneJson(rawJson);
@@ -1414,15 +1419,18 @@ function applySceneFromJson(rawJson, {
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
     pendingRemoteSceneJson = normalizedJson;
+    pendingRemoteSceneAuthoritative ||= authoritative;
     return;
   }
 
   if (!force && isEditingTextElement()) {
     pendingRemoteSceneJson = normalizedJson;
+    pendingRemoteSceneAuthoritative ||= authoritative;
     return;
   }
 
-  updateApiScene(scene);
+  pendingRemoteSceneAuthoritative = false;
+  updateApiScene(scene, { authoritative });
 }
 
 function releaseViewportBroadcastSuppressionAfterPaint() {
@@ -1440,6 +1448,7 @@ function releaseViewportBroadcastSuppressionAfterPaint() {
 function buildApiSceneUpdate(scene, {
   appStateOverrides = {},
   api = getMountedExcalidrawAPI(),
+  authoritative = false,
 } = {}) {
   if (!api) {
     return null;
@@ -1450,6 +1459,7 @@ function buildApiSceneUpdate(scene, {
 
   return buildReconciledExcalidrawSceneUpdate({
     appStateOverrides,
+    authoritative,
     currentAppState,
     currentElements,
     documentViewState: getDocumentViewState(),
@@ -1500,6 +1510,7 @@ function requestEditorRemount(scene) {
 
 function applySceneToMountedApi(scene, {
   appStateOverrides = {},
+  authoritative = false,
   captureUpdate = CaptureUpdateAction.NEVER,
   trackedSharedSnapshot = false,
 } = {}) {
@@ -1511,6 +1522,7 @@ function applySceneToMountedApi(scene, {
   const nextSceneUpdate = buildApiSceneUpdate(scene, {
     appStateOverrides,
     api,
+    authoritative,
   });
   let applyResult;
 
@@ -1545,11 +1557,13 @@ function applySceneToMountedApi(scene, {
 
 function updateApiScene(scene, {
   appStateOverrides = {},
+  authoritative = false,
   captureUpdate = CaptureUpdateAction.NEVER,
   trackedSharedSnapshot = true,
 } = {}) {
   applySceneToMountedApi(scene, {
     appStateOverrides,
+    authoritative,
     captureUpdate,
     trackedSharedSnapshot,
   });
@@ -2176,10 +2190,12 @@ function initializeEditor(api) {
   }));
 
   const sceneJson = pendingRemoteSceneJson || roomClient?.getLastSceneJson?.() || '';
+  const authoritative = pendingRemoteSceneAuthoritative;
   const initialScene = parseSceneJson(sceneJson);
   pendingRemoteSceneJson = '';
+  pendingRemoteSceneAuthoritative = false;
   setAppliedSceneJson(JSON.stringify(initialScene));
-  updateApiScene(initialScene);
+  updateApiScene(initialScene, { authoritative });
 
   if (pendingCollaborators) {
     const renderableCollaborators = buildRenderableCollaboratorsMap(pendingCollaborators);

package/src/client/infrastructure/auth-client.js

@@ -1,5 +1,3 @@
-import '../styles/features/auth-gate.css';
-
 import { getHashParamsFromRaw } from '../domain/hash-routes.js';
 import { parseApiResponse } from './api-client-utils.js';
 import { getRuntimeConfig } from './runtime-config.js';
@@ -255,6 +253,7 @@ export async function ensureClientAuthenticated() {
     return { authenticated: true, auth: config };
   }
 
+  await import('../styles/features/auth-gate.css');
   const { card, overlay } = createOverlayShell();
   document.body.append(overlay);
   let pendingOidcError = consumeHashParam('auth_error');

package/src/client/infrastructure/browser-preferences-port.js

@@ -23,6 +23,7 @@ export class BrowserPreferencesPort {
     lineWrappingKey,
     recentFilesKey = 'collabmd-recent-files',
     vimModeKey = 'collabmd-editor-vim-mode',
+    viewModeKey = 'collabmd-editor-view-mode',
     sidebarVisibleKey,
     userNameKey,
     storage = globalThis.localStorage,
@@ -33,6 +34,7 @@ export class BrowserPreferencesPort {
     this.sidebarVisibleKey = sidebarVisibleKey;
     this.storage = storage;
     this.userNameKey = userNameKey;
+    this.viewModeKey = viewModeKey;
     this.vimModeKey = vimModeKey;
   }
 
@@ -68,6 +70,20 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.vimModeKey, String(enabled));
   }
 
+  getViewMode() {
+    const value = readStorage(this.storage, this.viewModeKey, null);
+    if (value === 'editor' || value === 'preview' || value === 'split') {
+      return value;
+    }
+    return null;
+  }
+
+  setViewMode(view) {
+    if (view === 'editor' || view === 'preview' || view === 'split') {
+      writeStorage(this.storage, this.viewModeKey, view);
+    }
+  }
+
   getRecentFiles() {
     const stored = readStorage(this.storage, this.recentFilesKey, '[]');
     try {

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

@@ -1,4 +1,3 @@
-import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -60,8 +59,20 @@ import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantum
 import { structurizrLanguage, structurizrLanguageDescription } from '../domain/structurizr-language.js';
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
+const MARKDOWN_CODE_LANGUAGE_ALIASES = new Set([
+  'bash', 'c', 'c++', 'cpp', 'css', 'diff', 'html', 'java', 'javascript', 'js',
+  'json', 'jsx', 'markdown', 'md', 'python', 'py', 'rust', 'sh', 'shell', 'sql',
+  'ts', 'tsx', 'typescript', 'xml', 'yaml', 'yml',
+]);
+
+function isMarkdownCodeLanguage(language) {
+  const names = [language.name, ...(language.alias || [])]
+    .map((value) => String(value).toLowerCase());
+  return names.some((name) => MARKDOWN_CODE_LANGUAGE_ALIASES.has(name));
+}
+
 const markdownCodeLanguages = [
-  ...languages,
+  ...languages.filter(isMarkdownCodeLanguage),
   mermaidLanguageDescription,
   plantUmlLanguageDescription,
   structurizrLanguageDescription,
@@ -501,7 +512,7 @@ export class EditorViewAdapter {
       highlightActiveLine(),
       highlightSelectionMatches(),
       createSearchNavigationListener(),
-      this.vimModeCompartment.of(!readOnly && this.vimModeEnabled ? vim({ status: true }) : []),
+      this.vimModeCompartment.of([]),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
@@ -585,6 +596,10 @@ export class EditorViewAdapter {
     this.onSelectionChanged?.(this.editorView.state);
     this.emitViewportChange();
 
+    if (this.vimModeEnabled && editorMode !== 'provisional') {
+      void this.applyVimExtension();
+    }
+
     if (preserveScrollTop > 0) {
       requestAnimationFrame(() => {
         if (this.editorView?.scrollDOM) {
@@ -676,6 +691,21 @@ export class EditorViewAdapter {
     return this.vimModeEnabled;
   }
 
+  async applyVimExtension() {
+    if (!this.vimModeEnabled || !this.editorView || this.editorView.state.readOnly) {
+      return;
+    }
+
+    const { vim } = await import('@replit/codemirror-vim');
+    if (!this.vimModeEnabled || !this.editorView || this.editorView.state.readOnly) {
+      return;
+    }
+
+    this.editorView.dispatch({
+      effects: this.vimModeCompartment.reconfigure(vim({ status: true })),
+    });
+  }
+
   setVimMode(enabled) {
     const nextEnabled = Boolean(enabled);
     if (nextEnabled === this.vimModeEnabled) {
@@ -687,12 +717,17 @@ export class EditorViewAdapter {
       return nextEnabled;
     }
 
-    this.editorView.dispatch({
-      effects: this.vimModeCompartment.reconfigure(
-        nextEnabled ? vim({ status: true }) : [],
-      ),
+    if (!nextEnabled) {
+      this.editorView.dispatch({
+        effects: this.vimModeCompartment.reconfigure([]),
+      });
+      this.editorView.focus();
+      return nextEnabled;
+    }
+
+    void this.applyVimExtension().then(() => {
+      this.editorView?.focus();
     });
-    this.editorView.focus();
     return nextEnabled;
   }
 

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

@@ -11,6 +11,7 @@ import {
   buildExcalidrawRoomScene,
   ensureExcalidrawRoomSchema,
   isExcalidrawRoomDocStructured,
+  readExcalidrawReplaceGeneration,
   readLegacyExcalidrawRoomScene,
   replaceExcalidrawRoomScene,
 } from '../../domain/excalidraw-room-codec.js';
@@ -174,6 +175,7 @@ export class ExcalidrawRoomClient {
     this.handleProviderSync = null;
     this.handleProviderStatus = null;
     this.lastSceneJson = '';
+    this.lastReplaceGeneration = null;
     this.sceneSyncTimer = null;
     this.sceneSyncDueAt = 0;
     this.lastSceneSyncAt = 0;
@@ -217,6 +219,11 @@ export class ExcalidrawRoomClient {
         return;
       }
 
+      const prevReplaceGeneration = this.lastReplaceGeneration;
+      this.lastReplaceGeneration = readExcalidrawReplaceGeneration(this.ydoc);
+      const authoritative = prevReplaceGeneration !== null
+        && this.lastReplaceGeneration > prevReplaceGeneration;
+
       const remoteJson = this.getStructuredSceneJson();
       if (!remoteJson || remoteJson === this.lastSceneJson) {
         return;
@@ -224,7 +231,7 @@ export class ExcalidrawRoomClient {
 
       this.pendingEmptySceneCandidate = null;
       this.lastSceneJson = JSON.stringify(parseSceneJson(remoteJson));
-      this.onRemoteSceneJson(this.lastSceneJson);
+      this.onRemoteSceneJson(this.lastSceneJson, { authoritative });
     };
   }
 
@@ -1071,5 +1078,6 @@ export class ExcalidrawRoomClient {
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED);
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
+    this.lastReplaceGeneration = null;
   }
 }

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

@@ -0,0 +1,60 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { parseApiResponse } from './api-client-utils.js';
+
+function request(path, { body = null, fallback = 'Request failed', method = 'GET' } = {}) {
+  return fetch(resolveApiUrl(path), {
+    ...(body === null ? {} : { body: JSON.stringify(body) }),
+    headers: { 'Content-Type': 'application/json' },
+    method,
+  }).then((response) => parseApiResponse(response, fallback));
+}
+
+export const hostedApiClient = {
+  acceptInvitation() {
+    return request('/hosted/invitations/accept', { fallback: 'Failed to accept invitation', method: 'POST' });
+  },
+
+  claimWorkspace({ teamName, token }) {
+    return request('/hosted/claim', { body: { teamName, token }, fallback: 'Failed to claim workspace', method: 'POST' });
+  },
+
+  completeSetup() {
+    return request('/hosted/setup/complete', { fallback: 'Failed to complete setup', method: 'POST' });
+  },
+
+  createInvitation({ email, role }) {
+    return request('/hosted/invitations', { body: { email, role }, fallback: 'Failed to create invitation', method: 'POST' });
+  },
+
+  getStatus() {
+    return request('/hosted/status', { fallback: 'Failed to load workspace status' });
+  },
+
+  listAuditEvents() {
+    return request('/hosted/audit', { fallback: 'Failed to load access history' });
+  },
+
+  listInvitations() {
+    return request('/hosted/invitations', { fallback: 'Failed to load invitations' });
+  },
+
+  listMemberships() {
+    return request('/hosted/memberships', { fallback: 'Failed to load collaborators' });
+  },
+
+  removeMembership(membershipId) {
+    return request(`/hosted/memberships/${encodeURIComponent(membershipId)}`, { fallback: 'Failed to remove collaborator', method: 'DELETE' });
+  },
+
+  revokeInvitation(invitationId) {
+    return request(`/hosted/invitations/${encodeURIComponent(invitationId)}`, { fallback: 'Failed to revoke invitation', method: 'DELETE' });
+  },
+
+  updateInvitationRole(invitationId, role) {
+    return request(`/hosted/invitations/${encodeURIComponent(invitationId)}`, { body: { role }, fallback: 'Failed to update invitation', method: 'PATCH' });
+  },
+
+  updateMembershipRole(membershipId, role) {
+    return request(`/hosted/memberships/${encodeURIComponent(membershipId)}`, { body: { role }, fallback: 'Failed to update role', method: 'PATCH' });
+  },
+};

package/src/client/infrastructure/lobby-presence.js

@@ -2,12 +2,12 @@ import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 
 import { createRandomUser } from '../domain/room.js';
+import { LOBBY_CHAT_MAX_MESSAGES, LOBBY_CHAT_MESSAGE_MAX_LENGTH } from '../domain/lobby-chat.js';
 import { resolveWsBaseUrl } from './runtime-config.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 
 const LOBBY_ROOM_NAME = '__lobby__';
-export const LOBBY_CHAT_MESSAGE_MAX_LENGTH = 280;
-export const LOBBY_CHAT_MAX_MESSAGES = 40;
+
 
 function normalizeChatMessage(value) {
   const normalized = String(value ?? '')

package/src/client/infrastructure/runtime-config.js

@@ -1,9 +1,11 @@
 import {
+  getActiveVaultId,
   getClientRuntimeConfig,
   resolveApiUrl,
   resolveAppPath,
   resolveAppUrl,
   resolveWsBaseUrl,
+  setActiveVaultId,
 } from '../domain/runtime-paths.js';
 import {
   createFileRouteHash,
@@ -16,7 +18,7 @@ export function getRuntimeConfig() {
   return getClientRuntimeConfig();
 }
 
-export { resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl };
+export { getActiveVaultId, resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl, setActiveVaultId };
 export { createFileRouteHash, isCollabMdHashRoute };
 
 function getHashParams() {

package/src/client/infrastructure/webmcp-tool-registry.js

@@ -213,7 +213,7 @@ export class WebMcpToolRegistry {
     try {
       const tools = listWebMcpToolDefinitions().map((definition) => ({
         annotations: {
-          readOnlyHint: definition.annotations.readOnlyHint,
+          ...definition.annotations,
           untrustedContentHint: Boolean(definition.untrustedContentHint),
         },
         description: getWebMcpDescription(definition),
@@ -228,7 +228,21 @@ export class WebMcpToolRegistry {
             });
             throwIfAborted(signal);
           }
-          const serverResult = await this.callTool(definition.name, input, { signal });
+          let serverResult;
+          try {
+            serverResult = await this.callTool(definition.name, input, { signal });
+          } catch (error) {
+            throwIfAborted(signal);
+            const body = error?.body;
+            if (
+              typeof body?.code === 'string'
+              && body.code.startsWith('AGENT_')
+              && body.code !== 'AGENT_REQUEST_FAILED'
+            ) {
+              return { ...body, isError: true };
+            }
+            throw error;
+          }
           let result = await replaceSnapshotRendering(
             serverResult,
             this.renderExcalidrawScene,

package/src/client/presentation/comment-markdown-renderer.js

@@ -1,5 +1,4 @@
 import markdownIt from 'markdown-it';
-import hljs from 'highlight.js';
 
 import { escapeHtml } from '../domain/vault-utils.js';
 
@@ -15,19 +14,8 @@ function renderPlainTextCommentHtml(text = '') {
 function createCommentMarkdownRenderer() {
   const markdown = markdownIt({
     breaks: true,
-    highlight(source, language) {
-      try {
-        if (language && hljs.getLanguage(language)) {
-          return hljs.highlight(source, {
-            ignoreIllegals: true,
-            language,
-          }).value;
-        }
-
-        return hljs.highlightAuto(source).value;
-      } catch {
-        return escapeHtml(source);
-      }
+    highlight(source) {
+      return escapeHtml(source);
     },
     html: false,
     linkify: true,

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

@@ -105,12 +105,11 @@ export class CommentOverviewController {
   }
 
   render() {
-    if (!this.panel) {
+    if (!this.panel || this.panel.classList.contains('hidden')) {
       return;
     }
 
     this.panel.replaceChildren();
-
     if (this.errorMessage) {
       const error = createOverviewState({
         copy: this.errorMessage,

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -4,7 +4,6 @@ import {
   normalizeCommentQuoteForComparison,
 } from '../../../domain/comment-threads.js';
 import { clamp } from '../../domain/vault-utils.js';
-import { renderCommentMarkdownToHtml } from '../comment-markdown-renderer.js';
 
 export { COMMENT_BODY_MAX_LENGTH, clamp };
 
@@ -112,7 +111,11 @@ export function getLatestGroupMessage(group) {
 export function createRenderedCommentBody(body, className = 'comment-markdown') {
   const container = document.createElement('div');
   container.className = className;
-  container.innerHTML = renderCommentMarkdownToHtml(body);
+  const markdownText = String(body ?? '');
+  container.textContent = markdownText;
+  void import('../comment-markdown-renderer.js').then(({ renderCommentMarkdownToHtml }) => {
+    container.innerHTML = renderCommentMarkdownToHtml(markdownText);
+  });
   return container;
 }
 

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

@@ -14,6 +14,7 @@ export class FileExplorerController {
     showFileExtensions = false,
     toastController,
     vaultClient,
+    vaultSwitcher = null,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
@@ -21,6 +22,7 @@ export class FileExplorerController {
     this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
+    this.vaultSwitcher = vaultSwitcher;
     this.state = new FileTreeState();
     this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
@@ -78,6 +80,7 @@ export class FileExplorerController {
 
   initialize() {
     this.view.initialize();
+    this.view.renderVaultSwitcher(this.vaultSwitcher);
     this.actionController.initialize();
   }