collabmd 0.1.18

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

@@ -0,0 +1,304 @@
+import { WebsocketProvider } from 'y-websocket';
+import * as Y from 'yjs';
+
+import { createRandomUser } from '../domain/room.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 ?? '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, LOBBY_CHAT_MESSAGE_MAX_LENGTH);
+
+  return normalized || null;
+}
+
+function createLobbyMessageId(peerId) {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `${peerId || 'user'}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function normalizeWorkspaceEvent(event) {
+  if (!event || typeof event !== 'object' || typeof event.id !== 'string') {
+    return null;
+  }
+
+  const workspaceChange = event.workspaceChange && typeof event.workspaceChange === 'object'
+    ? event.workspaceChange
+    : {};
+
+  return {
+    action: typeof event.action === 'string' ? event.action : 'git',
+    createdAt: Number.isFinite(event.createdAt) ? event.createdAt : Date.now(),
+    id: event.id,
+    peerId: typeof event.peerId === 'string' ? event.peerId : null,
+    sourceRef: typeof event.sourceRef === 'string' ? event.sourceRef : null,
+    workspaceChange: {
+      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)
+        : [],
+    },
+  };
+}
+
+/**
+ * Global presence layer.
+ *
+ * Every client joins a lightweight Yjs "lobby" room whose document is never
+ * written to.  Only the awareness channel is used — each client publishes
+ * `{ user, currentFile }` so that every other client can see who is online
+ * and which file they are editing.
+ */
+export class LobbyPresence {
+  constructor({ preferredUserName, onChange, onChatChange, onWorkspaceEvent }) {
+    this.onChange = onChange;
+    this.onChatChange = onChatChange;
+    this.onWorkspaceEvent = onWorkspaceEvent;
+    this.wsBaseUrl = resolveWsBaseUrl();
+    this.ydoc = new Y.Doc();
+    this.chatMessages = this.ydoc.getArray('chat-messages');
+    this.workspaceEvents = this.ydoc.getArray('workspace-events');
+    this.provider = null;
+    this.awareness = null;
+    this.localUser = createRandomUser(preferredUserName);
+    this.currentFile = null;
+    this._connected = false;
+    this._didInitialSync = false;
+    this.seenWorkspaceEventIds = new Set();
+    this.handleAwarenessChange = () => {
+      this._emitChange();
+    };
+    this.handleChatMessagesChange = () => {
+      this._emitChatChange();
+    };
+    this.handleWorkspaceEventsChange = () => {
+      this._emitWorkspaceEvents();
+    };
+  }
+
+  connect() {
+    if (this.provider) return;
+
+    this._didInitialSync = false;
+
+    this.provider = new WebsocketProvider(
+      this.wsBaseUrl,
+      LOBBY_ROOM_NAME,
+      this.ydoc,
+      { disableBc: true, maxBackoffTime: 5000 },
+    );
+    stopReconnectOnControlledClose(this.provider);
+
+    this.awareness = this.provider.awareness;
+    this.awareness.setLocalStateField('user', this.localUser);
+    this.awareness.setLocalStateField('currentFile', this.currentFile);
+
+    this.awareness.on('change', this.handleAwarenessChange);
+
+    this.chatMessages.observe(this.handleChatMessagesChange);
+    this.workspaceEvents.observe(this.handleWorkspaceEventsChange);
+
+    this.provider.on('status', ({ status }) => {
+      this._connected = status === 'connected';
+    });
+
+    this.provider.on('sync', (isSynced) => {
+      if (!isSynced || this._didInitialSync) {
+        return;
+      }
+
+      this._didInitialSync = true;
+      this._primeWorkspaceEventCache();
+      this._emitChange();
+      this._emitChatChange({ initial: true });
+    });
+  }
+
+  /** Update which file the local user is currently viewing. */
+  setCurrentFile(filePath) {
+    this.currentFile = filePath;
+    if (this.awareness) {
+      this.awareness.setLocalStateField('currentFile', filePath);
+    }
+  }
+
+  /** Update the local user's display name (after rename). */
+  setUserName(name) {
+    if (!name) return;
+    this.localUser = { ...this.localUser, name };
+    if (this.awareness) {
+      this.awareness.setLocalStateField('user', this.localUser);
+    }
+  }
+
+  /** Return the local user object (name + color). */
+  getLocalUser() {
+    return this.localUser;
+  }
+
+  sendChatMessage(text) {
+    const normalizedText = normalizeChatMessage(text);
+    if (!normalizedText) {
+      return null;
+    }
+
+    const message = {
+      createdAt: Date.now(),
+      filePath: this.currentFile ?? null,
+      id: createLobbyMessageId(this.localUser.peerId),
+      peerId: this.localUser.peerId,
+      text: normalizedText,
+      userColor: this.localUser.color,
+      userName: this.localUser.name,
+    };
+
+    this.ydoc.transact(() => {
+      this.chatMessages.push([message]);
+
+      const overflow = this.chatMessages.length - LOBBY_CHAT_MAX_MESSAGES;
+      if (overflow > 0) {
+        this.chatMessages.delete(0, overflow);
+      }
+    }, 'lobby-chat-message');
+
+    return message;
+  }
+
+  sendWorkspaceEvent({ action = 'git', sourceRef = null, workspaceChange = {} } = {}) {
+    const event = normalizeWorkspaceEvent({
+      action,
+      createdAt: Date.now(),
+      id: createLobbyMessageId(this.localUser.peerId),
+      peerId: this.localUser.peerId,
+      sourceRef,
+      workspaceChange,
+    });
+    if (!event) {
+      return null;
+    }
+
+    this.ydoc.transact(() => {
+      this.workspaceEvents.push([event]);
+
+      const overflow = this.workspaceEvents.length - LOBBY_CHAT_MAX_MESSAGES;
+      if (overflow > 0) {
+        this.workspaceEvents.delete(0, overflow);
+      }
+    }, 'lobby-workspace-event');
+
+    this.seenWorkspaceEventIds.add(event.id);
+    return event;
+  }
+
+  getMessages() {
+    return this.chatMessages.toArray().filter((message) => (
+      message
+      && typeof message.id === 'string'
+      && typeof message.peerId === 'string'
+      && typeof message.text === 'string'
+      && typeof message.userName === 'string'
+    ));
+  }
+
+  /**
+   * Collect all users across the lobby.
+   * Returns an array of `{ name, color, clientId, currentFile, isLocal }`.
+   */
+  getUsers() {
+    if (!this.awareness) return [];
+
+    const users = [];
+    this.awareness.getStates().forEach((state, clientId) => {
+      if (!state.user) return;
+      users.push({
+        ...state.user,
+        clientId,
+        currentFile: state.currentFile ?? null,
+        isLocal: clientId === this.awareness.clientID,
+      });
+    });
+    return users;
+  }
+
+  getConnectionState() {
+    if (this._connected) {
+      return { status: 'connected', unreachable: false };
+    }
+
+    if (this.provider) {
+      return { status: 'connecting', unreachable: false };
+    }
+
+    return { status: 'disconnected', unreachable: false };
+  }
+
+  disconnect() {
+    if (this.provider) {
+      this.awareness?.off('change', this.handleAwarenessChange);
+      this.chatMessages?.unobserve(this.handleChatMessagesChange);
+      this.workspaceEvents?.unobserve(this.handleWorkspaceEventsChange);
+    }
+    this.provider?.disconnect();
+    this.provider?.destroy();
+    this.provider = null;
+    this.awareness = null;
+    this._connected = false;
+    this._didInitialSync = false;
+    this.seenWorkspaceEventIds.clear();
+  }
+
+  destroy() {
+    this.disconnect();
+    this.ydoc?.destroy();
+    this.ydoc = null;
+  }
+
+  _emitChange() {
+    this.onChange?.(this.getUsers());
+  }
+
+  _emitChatChange(meta = {}) {
+    this.onChatChange?.(this.getMessages(), meta);
+  }
+
+  _primeWorkspaceEventCache() {
+    this.workspaceEvents.toArray().forEach((event) => {
+      const normalized = normalizeWorkspaceEvent(event);
+      if (normalized) {
+        this.seenWorkspaceEventIds.add(normalized.id);
+      }
+    });
+  }
+
+  _emitWorkspaceEvents() {
+    if (!this._didInitialSync) {
+      this._primeWorkspaceEventCache();
+      return;
+    }
+
+    this.workspaceEvents.toArray().forEach((event) => {
+      const normalized = normalizeWorkspaceEvent(event);
+      if (!normalized || this.seenWorkspaceEventIds.has(normalized.id)) {
+        return;
+      }
+
+      this.seenWorkspaceEventIds.add(normalized.id);
+      if (normalized.peerId === this.localUser.peerId) {
+        return;
+      }
+
+      this.onWorkspaceEvent?.(normalized);
+    });
+  }
+}

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

@@ -0,0 +1,65 @@
+import {
+  getClientRuntimeConfig,
+  resolveApiUrl,
+  resolveAppPath,
+  resolveAppUrl,
+  resolveWsBaseUrl,
+} from '../domain/runtime-paths.js';
+
+export function getRuntimeConfig() {
+  return getClientRuntimeConfig();
+}
+
+export { resolveApiUrl, resolveAppPath, resolveAppUrl, resolveWsBaseUrl };
+
+function getHashParams() {
+  const rawHash = window.location.hash.startsWith('#')
+    ? window.location.hash.slice(1)
+    : window.location.hash;
+  return new URLSearchParams(rawHash);
+}
+
+function normalizeDiffScope(scope) {
+  if (scope === 'staged' || scope === 'all' || scope === 'working-tree') {
+    return scope;
+  }
+
+  return 'all';
+}
+
+export function getHashRoute() {
+  const params = getHashParams();
+
+  if (params.has('git-diff')) {
+    const filePath = params.get('git-diff') || null;
+    return {
+      filePath,
+      scope: normalizeDiffScope(params.get('scope') || (filePath ? 'working-tree' : 'all')),
+      type: 'git-diff',
+    };
+  }
+
+  if (params.has('file')) {
+    return {
+      filePath: params.get('file'),
+      type: 'file',
+    };
+  }
+
+  return { type: 'empty' };
+}
+
+export function navigateToFile(filePath) {
+  const params = new URLSearchParams();
+  if (filePath) {
+    params.set('file', filePath);
+  }
+  window.location.hash = params.toString();
+}
+
+export function navigateToGitDiff({ filePath = null, scope = 'all' } = {}) {
+  const params = new URLSearchParams();
+  params.set('git-diff', filePath ?? '');
+  params.set('scope', normalizeDiffScope(scope));
+  window.location.hash = params.toString();
+}

package/src/client/infrastructure/tab-activity-lock.js

@@ -0,0 +1,193 @@
+const LOCK_KEY = 'collabmd-active-tab-lock';
+const TAB_ID_KEY = 'collabmd-tab-id';
+const CHANNEL_NAME = 'collabmd-tab-lock';
+const HEARTBEAT_INTERVAL_MS = 4000;
+
+function now() {
+  return Date.now();
+}
+
+function createTabId() {
+  if (globalThis.crypto?.randomUUID) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `tab-${now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function safeJsonParse(value) {
+  if (!value) return null;
+
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+export class TabActivityLock {
+  constructor({
+    heartbeatIntervalMs = HEARTBEAT_INTERVAL_MS,
+    onBlocked,
+    onActivated,
+    onStolen,
+  } = {}) {
+    this.heartbeatIntervalMs = heartbeatIntervalMs;
+    this.staleAfterMs = heartbeatIntervalMs * 3;
+    this.onBlocked = onBlocked;
+    this.onActivated = onActivated;
+    this.onStolen = onStolen;
+    this.tabId = this.getOrCreateTabId();
+    this.channel = null;
+    this.heartbeatTimer = null;
+    this.isOwner = false;
+    this.handleStorageEvent = this.handleStorageEvent.bind(this);
+    this.handlePageHide = this.handlePageHide.bind(this);
+  }
+
+  initialize() {
+    window.addEventListener('storage', this.handleStorageEvent);
+    window.addEventListener('pagehide', this.handlePageHide);
+
+    if ('BroadcastChannel' in globalThis) {
+      this.channel = new BroadcastChannel(CHANNEL_NAME);
+      this.channel.addEventListener('message', (event) => {
+        this.handleChannelMessage(event.data);
+      });
+    }
+  }
+
+  destroy() {
+    this.release();
+    window.removeEventListener('storage', this.handleStorageEvent);
+    window.removeEventListener('pagehide', this.handlePageHide);
+    this.channel?.close();
+    this.channel = null;
+  }
+
+  tryActivate({ takeover = false } = {}) {
+    const currentLock = this.readLock();
+    if (this.isFreshLock(currentLock) && currentLock.tabId !== this.tabId && !takeover) {
+      this.isOwner = false;
+      this.stopHeartbeat();
+      this.onBlocked?.({ reason: 'active-elsewhere', ownerTabId: currentLock.tabId });
+      return false;
+    }
+
+    this.writeLock();
+    this.startHeartbeat();
+    this.isOwner = true;
+    this.channel?.postMessage({ type: 'claimed', takeover, tabId: this.tabId });
+    this.onActivated?.({ takeover });
+    return true;
+  }
+
+  release() {
+    const currentLock = this.readLock();
+    if (currentLock?.tabId === this.tabId) {
+      localStorage.removeItem(LOCK_KEY);
+      this.channel?.postMessage({ type: 'released', tabId: this.tabId });
+    }
+
+    this.isOwner = false;
+    this.stopHeartbeat();
+  }
+
+  getOrCreateTabId() {
+    try {
+      const existing = window.sessionStorage.getItem(TAB_ID_KEY);
+      if (existing) {
+        return existing;
+      }
+
+      const tabId = createTabId();
+      window.sessionStorage.setItem(TAB_ID_KEY, tabId);
+      return tabId;
+    } catch {
+      return createTabId();
+    }
+  }
+
+  readLock() {
+    try {
+      return safeJsonParse(window.localStorage.getItem(LOCK_KEY));
+    } catch {
+      return null;
+    }
+  }
+
+  isFreshLock(lock) {
+    return Boolean(
+      lock
+      && typeof lock.tabId === 'string'
+      && Number.isFinite(lock.updatedAt)
+      && (now() - lock.updatedAt) < this.staleAfterMs
+    );
+  }
+
+  writeLock() {
+    try {
+      window.localStorage.setItem(LOCK_KEY, JSON.stringify({
+        tabId: this.tabId,
+        updatedAt: now(),
+      }));
+    } catch {
+      // Ignore storage failures and continue in best-effort mode.
+    }
+  }
+
+  startHeartbeat() {
+    this.stopHeartbeat();
+    this.writeLock();
+    this.heartbeatTimer = window.setInterval(() => {
+      if (!this.isOwner) {
+        this.stopHeartbeat();
+        return;
+      }
+
+      this.writeLock();
+    }, this.heartbeatIntervalMs);
+  }
+
+  stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      window.clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+  }
+
+  handleStorageEvent(event) {
+    if (event.key !== LOCK_KEY) {
+      return;
+    }
+
+    const nextLock = safeJsonParse(event.newValue);
+    this.handleExternalLockChange(nextLock);
+  }
+
+  handleChannelMessage(message) {
+    if (!message || typeof message !== 'object' || message.tabId === this.tabId) {
+      return;
+    }
+
+    if (message.type === 'claimed') {
+      this.handleExternalLockChange(this.readLock());
+    }
+  }
+
+  handleExternalLockChange(nextLock) {
+    if (!this.isOwner) {
+      return;
+    }
+
+    if (this.isFreshLock(nextLock) && nextLock.tabId !== this.tabId) {
+      this.isOwner = false;
+      this.stopHeartbeat();
+      this.onStolen?.({ ownerTabId: nextLock.tabId });
+    }
+  }
+
+  handlePageHide() {
+    this.release();
+  }
+}

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

@@ -0,0 +1,61 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+
+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;
+}
+
+export class VaultApiClient {
+  async readTree() {
+    const response = await fetch(resolveApiUrl('/files'));
+    return parseApiResponse(response, 'Failed to load file tree');
+  }
+
+  async readFile(path) {
+    const response = await fetch(resolveApiUrl(`/file?path=${encodeURIComponent(path)}`));
+    return parseApiResponse(response, 'Failed to read file');
+  }
+
+  async createFile({ content, path }) {
+    const response = await fetch(resolveApiUrl('/file'), {
+      body: JSON.stringify({ content, path }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to create file');
+  }
+
+  async renameFile({ oldPath, newPath }) {
+    const response = await fetch(resolveApiUrl('/file'), {
+      body: JSON.stringify({ newPath, oldPath }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'PATCH',
+    });
+    return parseApiResponse(response, 'Failed to rename file');
+  }
+
+  async deleteFile(path) {
+    const response = await fetch(resolveApiUrl(`/file?path=${encodeURIComponent(path)}`), {
+      method: 'DELETE',
+    });
+    return parseApiResponse(response, 'Failed to delete file');
+  }
+
+  async createDirectory(path) {
+    const response = await fetch(resolveApiUrl('/directory'), {
+      body: JSON.stringify({ path }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to create folder');
+  }
+}
+
+export const vaultApiClient = new VaultApiClient();

package/src/client/infrastructure/yjs-provider-reset-guard.js

@@ -0,0 +1,19 @@
+const NON_RECONNECT_CLOSE_REASONS = new Set([
+  'Room reset',
+  'Server shutting down',
+]);
+
+export function stopReconnectOnControlledClose(provider) {
+  if (!provider || typeof provider.on !== 'function' || typeof provider.disconnect !== 'function') {
+    return;
+  }
+
+  provider.on('connection-close', (event) => {
+    const reason = String(event?.reason || '');
+    if (!NON_RECONNECT_CLOSE_REASONS.has(reason)) {
+      return;
+    }
+
+    provider.disconnect();
+  });
+}

package/src/client/main.js

@@ -0,0 +1,16 @@
+import { CollabMdAppShell } from './bootstrap/collabmd-app-shell.js';
+import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
+
+async function start() {
+  await ensureClientAuthenticated();
+  const app = new CollabMdAppShell();
+  app.initialize();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    void start();
+  }, { once: true });
+} else {
+  void start();
+}

package/src/client/mermaid-runtime.js

@@ -0,0 +1,3 @@
+import mermaid from 'mermaid';
+
+export default mermaid;