collabmd 0.1.48 → 0.1.51

package/src/client/domain/runtime-paths.js

@@ -58,8 +58,53 @@ function applyBasePath(basePath, pathValue) {
   return normalizedBasePath ? `${normalizedBasePath}/${normalizedPath}` : `/${normalizedPath}`;
 }
 
+export const ACTIVE_VAULT_STORAGE_KEY = 'collabmd.activeVault';
+
+// ponytail: agent/hosted/auth/plantuml/structurizr/test stay global; everything else is vault-scoped
+const VAULT_UNSCOPED_API_PATHS = ['/auth/', '/hosted/', '/agent/', '/test/', '/plantuml/', '/structurizr/'];
+
+function isVaultScopedApiPath(pathname) {
+  if (pathname === '/api' || pathname === '/api/' || pathname === '/api/vaults') {
+    return false;
+  }
+  const sub = pathname.startsWith('/api/') ? pathname.slice('/api'.length) : pathname;
+  return !VAULT_UNSCOPED_API_PATHS.some((prefix) => sub === prefix.slice(0, -1) || sub.startsWith(prefix));
+}
+
+export function getActiveVaultId(config = getClientRuntimeConfig()) {
+  const vaults = Array.isArray(config?.vaults) ? config.vaults.map((vault) => vault?.id).filter(Boolean) : [];
+  if (vaults.length === 0) {
+    return null;
+  }
+  try {
+    const stored = globalThis.window?.localStorage?.getItem(ACTIVE_VAULT_STORAGE_KEY);
+    if (stored && vaults.includes(stored)) {
+      return stored;
+    }
+  } catch {
+    // Ignore storage failures and fall back to the server default.
+  }
+  if (config?.activeVault && vaults.includes(config.activeVault)) {
+    return config.activeVault;
+  }
+  return vaults[0] ?? null;
+}
+
+export function setActiveVaultId(vaultId) {
+  try {
+    globalThis.window?.localStorage?.setItem(ACTIVE_VAULT_STORAGE_KEY, String(vaultId ?? ''));
+  } catch {
+    // Ignore storage failures; the server default still applies.
+  }
+}
 export function getClientRuntimeConfig() {
   const rawConfig = {
+    activeVault: '',
+    agentAccess: {
+      enabled: false,
+      endpoint: '',
+      managed: false,
+    },
     auth: {
       enabled: false,
       implemented: true,
@@ -87,6 +132,7 @@ export function getClientRuntimeConfig() {
       version: '',
     },
     structurizrEnabled: false,
+    vaults: [],
     wikiLinkAutoCreate: true,
     wsBasePath: '/ws',
     ...(window.__COLLABMD_CONFIG__ ?? {}),
@@ -137,11 +183,17 @@ export function resolveApiUrl(pathValue = '/', config = getClientRuntimeConfig()
     return resolveAppPath('/api', config);
   }
 
-  if (normalizedPath.startsWith('/api')) {
-    return resolveAppPath(normalizedPath, config);
+  const apiPath = normalizedPath.startsWith('/api')
+    ? normalizedPath
+    : `/api${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`;
+  const queryIndex = apiPath.indexOf('?');
+  const pathname = queryIndex === -1 ? apiPath : apiPath.slice(0, queryIndex);
+  const query = queryIndex === -1 ? '' : apiPath.slice(queryIndex);
+  const vaultId = getActiveVaultId(config);
+  if (vaultId && isVaultScopedApiPath(pathname)) {
+    return resolveAppPath(`/api/v/${vaultId}${pathname.slice('/api'.length)}${query}`, config);
   }
-
-  return resolveAppPath(`/api${normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`}`, config);
+  return resolveAppPath(`${pathname}${query}`, config);
 }
 
 export function resolveWsServerOverride(config = getClientRuntimeConfig()) {
@@ -167,15 +219,17 @@ export function resolveWsServerOverride(config = getClientRuntimeConfig()) {
 }
 
 export function resolveWsBaseUrl(config = getClientRuntimeConfig()) {
+  const vaultId = getActiveVaultId(config);
+  const vaultSuffix = vaultId ? `/v/${vaultId}` : '';
   const serverOverride = resolveWsServerOverride(config);
   if (serverOverride) {
-    return serverOverride;
+    return `${serverOverride}${vaultSuffix}`;
   }
 
   if (config.publicWsBaseUrl) {
-    return trimTrailingSlash(config.publicWsBaseUrl);
+    return `${trimTrailingSlash(config.publicWsBaseUrl)}${vaultSuffix}`;
   }
 
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  return `${protocol}//${window.location.host}${resolveAppPath(config.wsBasePath, config)}`;
+  return `${protocol}//${window.location.host}${resolveAppPath(`${config.wsBasePath}${vaultSuffix}`, config)}`;
 }

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

@@ -11,6 +11,7 @@ import {
 import { getElementBounds } from '@excalidraw/element';
 import '@excalidraw/excalidraw/index.css';
 
+import { createEditableContentRevision } from '../domain/editable-content-revision.js';
 import {
   buildRenderableCollaboratorsMap,
   findCollaboratorByPeerId,
@@ -45,6 +46,11 @@ import {
   summarizeExcalidrawScene,
 } from './domain/excalidraw-diagnostics.js';
 import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
+import {
+  createExcalidrawElementLink,
+  parseExcalidrawElementLink,
+} from './domain/excalidraw-element-link.js';
+import { resolveAppPath, resolveAppUrl } from './domain/runtime-paths.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import {
   EXCALIDRAW_ROOM_CONNECTION_STATE,
@@ -58,6 +64,8 @@ const diagnostics = createExcalidrawDiagnosticRing({
   enabled: params.get('excalidrawDebug') === '1',
 });
 const parentOrigin = window.location.origin;
+const appPath = resolveAppPath('/');
+const appUrl = resolveAppUrl('/');
 const syncTimeoutMs = Number.parseInt(params.get('syncTimeoutMs') || '', 10);
 
 let currentDocument = {
@@ -71,9 +79,16 @@ let localAwarenessUser = resolveLocalAwarenessUser({
   storedUserName: localStorage.getItem('collabmd-user-name'),
 });
 let appliedSceneJson = '';
+let appliedSceneRevisionPromise = createEditableContentRevision(appliedSceneJson);
+
+function setAppliedSceneJson(value) {
+  appliedSceneJson = value;
+  appliedSceneRevisionPromise = createEditableContentRevision(value);
+}
 
 let collabReady = false;
 let pendingRemoteSceneJson = '';
+let pendingRemoteSceneAuthoritative = false;
 let pendingCollaborators = null;
 let activeCollaborators = new Map();
 let followedSocketId = null;
@@ -327,17 +342,34 @@ function getDiagramCommentMarkerPosition(thread, api = getMountedExcalidrawAPI()
   );
 }
 
-function focusDiagramCommentThread(thread) {
+function getDiagramElementTargets(elementId, elementType = 'element', api = getMountedExcalidrawAPI()) {
+  const normalizedElementId = String(elementId ?? '').trim();
+  const elements = api?.getSceneElementsIncludingDeleted?.()
+    ?.filter((element) => !element.isDeleted) || [];
+  if (!normalizedElementId) {
+    return [];
+  }
+
+  if (elementType === 'group') {
+    const groupElements = elements.filter((element) => element.groupIds?.includes(normalizedElementId));
+    if (groupElements.length > 0) {
+      return groupElements;
+    }
+  }
+
+  return elements.filter((element) => element.id === normalizedElementId);
+}
+
+function focusDiagramElement(elementId, elementType = 'element') {
   const api = getMountedExcalidrawAPI();
-  const element = api?.getSceneElementsIncludingDeleted?.()
-    ?.find((candidate) => candidate.id === thread?.elementId && !candidate.isDeleted);
-  if (!api || !element) {
+  const elements = getDiagramElementTargets(elementId, elementType, api);
+  if (!api || elements.length === 0) {
     return;
   }
 
   api.updateScene({
     appState: {
-      selectedElementIds: { [element.id]: true },
+      selectedElementIds: Object.fromEntries(elements.map((element) => [element.id, true])),
     },
     captureUpdate: CaptureUpdateAction.NEVER,
   });
@@ -352,11 +384,16 @@ function focusDiagramCommentThread(thread) {
       animation: false,
       fit: 'contain',
       offsets: { ui: true },
-      target: element,
+      target: elements,
     });
   } finally {
     releaseViewportBroadcastSuppressionAfterPaint();
   }
+
+}
+
+function focusDiagramCommentThread(thread) {
+  focusDiagramElement(thread?.elementId);
 }
 
 function applyDocumentMode(mode = currentDocument.mode) {
@@ -396,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,
@@ -413,6 +450,23 @@ function createRoomClient(filePath) {
   };
 }
 
+function handleExcalidrawLinkOpen(element, event) {
+  if (window.parent === window) {
+    return;
+  }
+
+  const target = parseExcalidrawElementLink(element?.link, {
+    appPath,
+    origin: parentOrigin,
+  });
+  if (!target) {
+    return;
+  }
+
+  event?.preventDefault?.();
+  postToParent('open-element-link', { href: element.link });
+}
+
 function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled } = {}) {
   const props = {
     onMount: handleEditorMount,
@@ -431,11 +485,17 @@ function buildExcalidrawProps({ initialData, renderTopRightUI, viewModeEnabled }
       collabReady = false;
     },
     aiEnabled: false,
+    generateLinkForSelection: (elementId, elementType) => createExcalidrawElementLink(
+      currentDocument.filePath,
+      elementId,
+      { appUrl, elementType },
+    ),
     isCollaborating: true,
     onChange: (elements, appState, files) => {
       scheduleSyncToRoom(elements, appState, files);
       roomClient?.syncLocalSelectionAwareness(appState);
     },
+    onLinkOpen: handleExcalidrawLinkOpen,
     onPointerUpdate: (payload) => {
       roomClient?.scheduleLocalPointerAwareness(payload);
     },
@@ -1199,6 +1259,9 @@ if (isTestMode) {
         .map((element) => element.id)
         .sort() ?? []
     ),
+    getSelectedElementIds: () => (
+      Object.keys(getMountedExcalidrawAPI()?.getAppState?.()?.selectedElementIds || {}).sort()
+    ),
     getElementStatus: (elementId) => (
       getMountedExcalidrawAPI()?.getSceneElementsIncludingDeleted?.()
         ?.find((entry) => entry.id === elementId && !entry.isDeleted)?.status ?? null
@@ -1331,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);
@@ -1347,20 +1414,23 @@ function applySceneFromJson(rawJson, {
     return;
   }
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
   recordSceneDiagnostic('remote-scene-received', {}, normalizedJson);
 
   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() {
@@ -1378,6 +1448,7 @@ function releaseViewportBroadcastSuppressionAfterPaint() {
 function buildApiSceneUpdate(scene, {
   appStateOverrides = {},
   api = getMountedExcalidrawAPI(),
+  authoritative = false,
 } = {}) {
   if (!api) {
     return null;
@@ -1388,6 +1459,7 @@ function buildApiSceneUpdate(scene, {
 
   return buildReconciledExcalidrawSceneUpdate({
     appStateOverrides,
+    authoritative,
     currentAppState,
     currentElements,
     documentViewState: getDocumentViewState(),
@@ -1423,7 +1495,7 @@ function requestEditorRemount(scene) {
   const normalizedScene = normalizeScene(scene);
   const normalizedJson = JSON.stringify(normalizedScene);
   pendingRemoteSceneJson = normalizedJson;
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
   pendingCollaborators = activeCollaborators;
   initialViewportFitPending = true;
   clearPreviewViewportFitTimers();
@@ -1438,6 +1510,7 @@ function requestEditorRemount(scene) {
 
 function applySceneToMountedApi(scene, {
   appStateOverrides = {},
+  authoritative = false,
   captureUpdate = CaptureUpdateAction.NEVER,
   trackedSharedSnapshot = false,
 } = {}) {
@@ -1449,6 +1522,7 @@ function applySceneToMountedApi(scene, {
   const nextSceneUpdate = buildApiSceneUpdate(scene, {
     appStateOverrides,
     api,
+    authoritative,
   });
   let applyResult;
 
@@ -1483,11 +1557,13 @@ function applySceneToMountedApi(scene, {
 
 function updateApiScene(scene, {
   appStateOverrides = {},
+  authoritative = false,
   captureUpdate = CaptureUpdateAction.NEVER,
   trackedSharedSnapshot = true,
 } = {}) {
   applySceneToMountedApi(scene, {
     appStateOverrides,
+    authoritative,
     captureUpdate,
     trackedSharedSnapshot,
   });
@@ -1499,7 +1575,7 @@ function applyLocalScene(scene, {
   const normalizedScene = normalizeScene(scene);
   const normalizedJson = JSON.stringify(normalizedScene);
 
-  appliedSceneJson = normalizedJson;
+  setAppliedSceneJson(normalizedJson);
 
   if (!getMountedExcalidrawAPI() || !collabReady) {
     pendingRemoteSceneJson = normalizedJson;
@@ -1845,6 +1921,36 @@ async function waitForPendingRoomWrites({
   }
 }
 
+function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+async function waitForAppliedSceneRevision(revision, {
+  afterRevision = '',
+  maxWaitMs = 4500,
+} = {}) {
+  const startedAt = performance.now();
+  while ((performance.now() - startedAt) < maxWaitMs) {
+    const appliedRevision = await appliedSceneRevisionPromise;
+    if (
+      !pendingRemoteSceneJson
+      && (appliedRevision === revision || (afterRevision && appliedRevision !== afterRevision))
+    ) {
+      await waitForAnimationFrame();
+      await waitForAnimationFrame();
+      const paintedRevision = await appliedSceneRevisionPromise;
+      if (
+        !pendingRemoteSceneJson
+        && (paintedRevision === revision || (afterRevision && paintedRevision !== afterRevision))
+      ) {
+        return paintedRevision;
+      }
+    }
+    await new Promise((resolve) => window.setTimeout(resolve, 16));
+  }
+  return '';
+}
+
 async function prepareRealtimeRoomDisconnect() {
   if (!roomClient) {
     return true;
@@ -1942,6 +2048,11 @@ window.addEventListener('message', (event) => {
     return;
   }
 
+  if (message.type === 'focus-element') {
+    focusDiagramElement(message.elementId, message.elementType);
+    return;
+  }
+
   if (message.type === 'follow-user') {
     applyHostFollowRequest(message.peerId || null);
     return;
@@ -1952,6 +2063,34 @@ window.addEventListener('message', (event) => {
     return;
   }
 
+  if (message.type === 'flush-agent-writes') {
+    void (async () => {
+      roomClient?.flushSceneSync();
+      await waitForPendingRoomWrites({ maxWaitMs: 1000 });
+      const serverFlush = await roomClient?.waitForServerFlush?.({ timeoutMs: 1000 });
+      postToParent('agent-writes-flushed', {
+        requestId: message.requestId || '',
+        revision: await appliedSceneRevisionPromise,
+        status: serverFlush?.status || 'unavailable',
+      });
+    })();
+    return;
+  }
+
+  if (message.type === 'wait-for-agent-revision') {
+    void (async () => {
+      const revision = String(message.revision || '');
+      const paintedRevision = revision && await waitForAppliedSceneRevision(revision, {
+        afterRevision: String(message.afterRevision || ''),
+      });
+      postToParent(paintedRevision ? 'agent-revision-painted' : 'agent-revision-not-painted', {
+        requestId: message.requestId || '',
+        revision: paintedRevision || revision,
+      });
+    })();
+    return;
+  }
+
   if (message.type === 'prepare-disconnect') {
     void (async () => {
       const requestId = message.requestId || '';
@@ -2051,10 +2190,12 @@ function initializeEditor(api) {
   }));
 
   const sceneJson = pendingRemoteSceneJson || roomClient?.getLastSceneJson?.() || '';
+  const authoritative = pendingRemoteSceneAuthoritative;
   const initialScene = parseSceneJson(sceneJson);
   pendingRemoteSceneJson = '';
-  appliedSceneJson = JSON.stringify(initialScene);
-  updateApiScene(initialScene);
+  pendingRemoteSceneAuthoritative = false;
+  setAppliedSceneJson(JSON.stringify(initialScene));
+  updateApiScene(initialScene, { authoritative });
 
   if (pendingCollaborators) {
     const renderableCollaborators = buildRenderableCollaboratorsMap(pendingCollaborators);

package/src/client/export/export-host.js

@@ -8,7 +8,9 @@ const pendingJobs = new Map();
 let exportBridgeErrorHandler = null;
 
 function createJobId() {
-  return `export-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  const id = globalThis.crypto?.randomUUID?.()
+    ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  return `export-${id}`;
 }
 
 function normalizeFormat(format) {

package/src/client/export/export-pipeline.js

@@ -17,10 +17,11 @@ import { compilePreviewDocument } from '../application/preview-render-compiler.j
 import { isMarkdownFilePath, stripVaultFileExtension } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
 import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
-import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
+import { createExcalidrawExportOptions, parseSceneJson } from '../domain/excalidraw-scene.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
+import { parseApiResponse } from '../infrastructure/api-client-utils.js';
 
 const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
 const EXPORT_HOST_SOURCE = 'collabmd-export-host';
@@ -355,11 +356,7 @@ async function fetchJson(url, init = {}) {
     },
     ...init,
   });
-  const data = await response.json().catch(() => null);
-  if (!response.ok) {
-    throw new Error(data?.error || `Request failed: ${response.status}`);
-  }
-  return data;
+  return parseApiResponse(response, `Request failed: ${response.status}`);
 }
 
 async function fetchTextFile(filePath) {
@@ -820,17 +817,7 @@ async function renderPlantUmlToSvgMarkup(source) {
 async function renderExcalidrawToSvgMarkup(filePath) {
   const rawScene = await fetchTextFile(filePath);
   const scene = parseSceneJson(rawScene);
-  const initialData = sceneToInitialData(scene, { theme: 'light' });
-  const svgElement = await exportExcalidrawToSvg({
-    appState: {
-      ...initialData.appState,
-      exportBackground: true,
-      exportWithDarkMode: false,
-    },
-    elements: initialData.elements.filter((element) => !element.isDeleted),
-    exportPadding: 24,
-    files: initialData.files || null,
-  });
+  const svgElement = await exportExcalidrawToSvg(createExcalidrawExportOptions(scene));
   return normalizeExportSvgMarkup(svgElement.outerHTML, { padding: 24 });
 }
 

package/src/client/infrastructure/agent-connection-api-client.js

@@ -0,0 +1,23 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { parseApiResponse } from './api-client-utils.js';
+
+export const agentConnectionApiClient = {
+  listConnections() {
+    return fetch(resolveApiUrl('/agent/connections'))
+      .then((response) => parseApiResponse(response, 'Failed to load Agent Connections'));
+  },
+
+  createConnection(payload) {
+    return fetch(resolveApiUrl('/agent/connections'), {
+      body: JSON.stringify(payload),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    }).then((response) => parseApiResponse(response, 'Failed to create Agent Connection'));
+  },
+
+  revokeConnection(connectionId) {
+    return fetch(resolveApiUrl(`/agent/connections/${encodeURIComponent(connectionId)}`), {
+      method: 'DELETE',
+    }).then((response) => parseApiResponse(response, 'Failed to revoke Agent Connection'));
+  },
+};

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

@@ -1,6 +1,5 @@
-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';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -66,12 +65,7 @@ async function fetchAuthStatus(config) {
     },
   });
 
-  const payload = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    throw new Error(payload.error || 'Failed to read auth status');
-  }
-
-  return payload;
+  return parseApiResponse(response, 'Failed to read auth status');
 }
 
 function syncOidcIdentityToLocalState(status) {
@@ -100,13 +94,7 @@ async function submitPassword(config, password) {
     },
     body: JSON.stringify({ password }),
   });
-  const payload = await response.json().catch(() => ({}));
-
-  if (!response.ok) {
-    throw new Error(payload.error || 'Authentication failed');
-  }
-
-  return payload;
+  return parseApiResponse(response, 'Authentication failed');
 }
 
 function createOverlayShell() {
@@ -265,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-session.js

@@ -290,6 +290,13 @@ export class EditorSession {
     return this.viewAdapter.insertText(text);
   }
 
+  applyTextReplacements(replacements) {
+    if (!this.collaborationClient.initialSyncComplete) {
+      throw new Error('The collaborative document is not synchronized');
+    }
+    return this.viewAdapter.applyTextReplacements(replacements);
+  }
+
   replaceText(text) {
     return this.viewAdapter.replaceText(text);
   }
@@ -306,6 +313,10 @@ export class EditorSession {
     return this.viewAdapter.flashRemoteRange(range);
   }
 
+  isInitialSyncComplete() {
+    return this.collaborationClient.initialSyncComplete;
+  }
+
   waitForInitialSync(timeoutMs = 1500) {
     return this.collaborationClient.waitForInitialSync(timeoutMs);
   }