collabmd 0.1.18

package/src/client/application/app-shell/git-feature.js

@@ -0,0 +1,394 @@
+import { resolveApiUrl } from '../../domain/runtime-paths.js';
+
+function normalizeWorkspaceChange(workspaceChange = {}) {
+  return {
+    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)
+      : [],
+  };
+}
+
+export const gitFeature = {
+  setGitOperationStatus(message = '') {
+    const badge = this.elements.gitOperationStatus;
+    if (!badge) {
+      return;
+    }
+
+    const text = String(message ?? '').trim();
+    badge.textContent = text;
+    badge.classList.toggle('hidden', !text);
+  },
+
+  async runGitActionWithStatus(message, callback) {
+    this.setGitOperationStatus(message);
+    try {
+      return await callback();
+    } finally {
+      this.setGitOperationStatus('');
+    }
+  },
+
+  handleGitDiffSelection(filePath, { closeSidebarOnMobile = false, scope = 'working-tree' } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToGitDiff({ filePath, scope });
+  },
+
+  handleGitRepoChange(isGitRepo, status = null) {
+    this.gitRepoAvailable = Boolean(isGitRepo);
+    this.elements.sidebarTabs?.classList.toggle('hidden', !this.gitRepoAvailable);
+    this.elements.gitSidebarTab?.classList.toggle('hidden', !this.gitRepoAvailable);
+    
+    const hasChanges = isGitRepo && status?.summary?.changedFiles > 0;
+    this.elements.gitSidebarTab?.classList.toggle('has-changes', hasChanges);
+    
+    this.gitDiffView.setRepoStatus(this.gitRepoAvailable ? status : null);
+
+    if (!this.gitRepoAvailable && this.activeSidebarTab === 'git') {
+      this.setSidebarTab('files');
+      return;
+    }
+
+    if (this.gitRepoAvailable && this.navigation.getHashRoute().type === 'git-diff' && this.activeSidebarTab !== 'git') {
+      this.setSidebarTab('git');
+    }
+  },
+
+  syncMainChrome({ mode, title = null } = {}) {
+    const isDiffMode = mode === 'diff';
+    this.elements.toolbarCenter?.classList.toggle('hidden', isDiffMode);
+    this.elements.mobileViewToggle?.classList.toggle('hidden', isDiffMode);
+    this.elements.userCount?.classList.toggle('hidden', isDiffMode);
+    this.elements.toolbarDiffBadge?.classList.toggle('hidden', !isDiffMode);
+
+    if (title && this.elements.activeFileName) {
+      this.elements.activeFileName.textContent = title;
+    }
+  },
+
+  async showGitDiff({ filePath = null, scope = 'all' } = {}) {
+    this.gitPanel.setSelection(filePath ? { path: filePath, scope } : {});
+    this.showDiffState();
+    this.syncMainChrome({
+      mode: 'diff',
+      title: this.gitDiffView.getToolbarTitle({ filePath, scope }),
+    });
+    await this.gitDiffView.open({ filePath, scope });
+  },
+
+  async postGitAction(endpoint, payload) {
+    const response = await fetch(endpoint, {
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || 'Git action failed');
+    }
+    return data;
+  },
+
+  async refreshWorkspaceAfterGitAction({ filePath = null, preferredScope = null } = {}) {
+    await this.fileExplorer.refresh();
+    await this.refreshGitAfterAction({ filePath, preferredScope });
+  },
+
+  async refreshGitAfterAction({ filePath = null, preferredScope = null } = {}) {
+    await this.gitPanel.refresh({ force: true });
+
+    const route = this.navigation.getHashRoute();
+    if (route.type !== 'git-diff') {
+      return;
+    }
+
+    const nextFilePath = filePath ?? route.filePath;
+    const nextScope = preferredScope ?? route.scope;
+    if (nextScope !== route.scope || nextFilePath !== route.filePath) {
+      this.navigation.navigateToGitDiff({ filePath: nextFilePath, scope: nextScope });
+      return;
+    }
+
+    await this.showGitDiff({ filePath: route.filePath, scope: route.scope });
+  },
+
+  async finalizeGitAction({
+    action,
+    filePath = null,
+    preferredScope = null,
+    result = {},
+    showLocalFileToast = false,
+  } = {}) {
+    const workspaceChange = normalizeWorkspaceChange(result.workspaceChange);
+    await this.refreshWorkspaceAfterGitAction({ filePath, preferredScope });
+    this.handleWorkspaceChangeForCurrentFile(workspaceChange, { action, local: true, showToast: showLocalFileToast });
+    this.lobby.sendWorkspaceEvent({
+      action,
+      sourceRef: result.sourceRef ?? null,
+      workspaceChange,
+    });
+    return workspaceChange;
+  },
+
+  handleWorkspaceChangeForCurrentFile(workspaceChange, { action = 'git', local = false, showToast = true } = {}) {
+    const currentFilePath = this.currentFilePath;
+    if (!currentFilePath) {
+      return false;
+    }
+
+    const wasDeleted = workspaceChange.deletedPaths.includes(currentFilePath);
+    const renameEntry = workspaceChange.renamedPaths.find((entry) => entry.oldPath === currentFilePath);
+    if (!wasDeleted && !renameEntry) {
+      return false;
+    }
+
+    this.navigation.navigateToFile(null);
+    if (!showToast) {
+      return true;
+    }
+
+    const displayName = this.getDisplayName(currentFilePath);
+    if (renameEntry) {
+      this.toastController.show(
+        local
+          ? `${displayName} was reset away from this branch path`
+          : `${displayName} moved after a ${action} operation`,
+      );
+      return true;
+    }
+
+    this.toastController.show(
+      local
+        ? `${displayName} was removed by ${action}`
+        : `${displayName} was removed after a ${action} operation`,
+    );
+    return true;
+  },
+
+  async handleIncomingWorkspaceEvent(event) {
+    if (!this.isTabActive || !event) {
+      return;
+    }
+
+    const workspaceChange = normalizeWorkspaceChange(event.workspaceChange);
+    await this.refreshWorkspaceAfterGitAction();
+    this.handleWorkspaceChangeForCurrentFile(workspaceChange, {
+      action: event.action || 'git',
+      local: false,
+      showToast: true,
+    });
+  },
+
+  async stageGitFile(filePath, { scope = 'working-tree' } = {}) {
+    if (!filePath) {
+      return;
+    }
+
+    await this.runGitActionWithStatus('Staging changes...', async () => {
+      const result = await this.postGitAction(resolveApiUrl('/git/stage'), { path: filePath });
+      await this.finalizeGitAction({
+        action: 'stage',
+        filePath,
+        preferredScope: scope === 'all' ? 'all' : 'staged',
+        result,
+      });
+    });
+  },
+
+  async unstageGitFile(filePath, { scope = 'staged' } = {}) {
+    if (!filePath) {
+      return;
+    }
+
+    await this.runGitActionWithStatus('Unstaging changes...', async () => {
+      const result = await this.postGitAction(resolveApiUrl('/git/unstage'), { path: filePath });
+      await this.finalizeGitAction({
+        action: 'unstage',
+        filePath,
+        preferredScope: scope === 'all' ? 'all' : 'working-tree',
+        result,
+      });
+    });
+  },
+
+  async pushGitBranch() {
+    await this.runGitActionWithStatus('Pushing branch...', async () => {
+      try {
+        const result = await this.postGitAction(resolveApiUrl('/git/push'), {});
+        await this.finalizeGitAction({
+          action: 'push',
+          result,
+        });
+      } catch (error) {
+        this.toastController.show(error.message || 'Failed to push branch');
+      }
+    });
+  },
+
+  async pullGitBranch() {
+    await this.runGitActionWithStatus('Pulling branch...', async () => {
+      try {
+        const result = await this.postGitAction(resolveApiUrl('/git/pull'), {});
+        await this.finalizeGitAction({
+          action: 'pull',
+          result,
+          showLocalFileToast: true,
+        });
+      } catch (error) {
+        this.toastController.show(error.message || 'Failed to pull branch');
+      }
+    });
+  },
+
+  openGitResetDialog(filePath) {
+    if (!this.isTabActive || !filePath) {
+      return;
+    }
+
+    const dialog = this.elements.gitResetDialog;
+    if (!dialog || !this.elements.gitResetFileName) {
+      return;
+    }
+
+    this.pendingGitResetPath = filePath;
+    if (this.elements.gitResetTitle) {
+      this.elements.gitResetTitle.textContent = 'Reset file to current branch';
+    }
+    if (this.elements.gitResetCopy) {
+      this.elements.gitResetCopy.textContent = 'Restore this file from the current checked-out branch. If this branch does not contain the file, the file will be deleted locally.';
+    }
+    this.elements.gitResetFileName.value = filePath;
+    if (this.elements.gitResetSubmit) {
+      this.elements.gitResetSubmit.textContent = 'Reset File';
+    }
+    this.elements.gitResetSubmit?.toggleAttribute('disabled', false);
+
+    if (dialog.open) {
+      return;
+    }
+    if (typeof dialog.showModal === 'function') {
+      dialog.showModal();
+    } else {
+      dialog.setAttribute('open', 'true');
+    }
+  },
+
+  async handleGitResetSubmit() {
+    const filePath = this.pendingGitResetPath;
+    const dialog = this.elements.gitResetDialog;
+    const submit = this.elements.gitResetSubmit;
+    if (!filePath || !dialog) {
+      return;
+    }
+
+    submit?.toggleAttribute('disabled', true);
+    if (submit) {
+      submit.textContent = 'Resetting...';
+    }
+    try {
+      await this.runGitActionWithStatus('Resetting file...', async () => {
+        const result = await this.postGitAction(resolveApiUrl('/git/reset-file'), { path: filePath });
+        await this.finalizeGitAction({
+          action: 'reset',
+          filePath,
+          result,
+          showLocalFileToast: true,
+        });
+      });
+      dialog.close();
+    } catch (error) {
+      this.toastController.show(error.message || 'Failed to reset file');
+    } finally {
+      if (submit) {
+        submit.textContent = 'Reset File';
+      }
+      submit?.toggleAttribute('disabled', false);
+    }
+  },
+
+  openGitCommitDialog() {
+    if (!this.isTabActive) {
+      return;
+    }
+
+    const dialog = this.elements.gitCommitDialog;
+    const input = this.elements.gitCommitInput;
+    if (!dialog || !input) {
+      return;
+    }
+
+    if (this.elements.gitCommitTitle) {
+      this.elements.gitCommitTitle.textContent = 'Commit staged changes';
+    }
+    if (this.elements.gitCommitCopy) {
+      const stagedCount = Number(this.gitPanel.status?.summary?.staged || 0);
+      this.elements.gitCommitCopy.textContent = stagedCount > 0
+        ? `${stagedCount} staged file${stagedCount === 1 ? '' : 's'} will be included.`
+        : 'All staged changes will be included.';
+    }
+    if (this.elements.gitCommitSubmit) {
+      this.elements.gitCommitSubmit.textContent = 'Commit staged changes';
+    }
+    input.value = '';
+
+    if (dialog.open) {
+      return;
+    }
+    if (typeof dialog.showModal === 'function') {
+      dialog.showModal();
+    } else {
+      dialog.setAttribute('open', 'true');
+    }
+    requestAnimationFrame(() => {
+      input.focus();
+      input.select();
+    });
+  },
+
+  async handleGitCommitSubmit() {
+    const dialog = this.elements.gitCommitDialog;
+    const input = this.elements.gitCommitInput;
+    const submit = this.elements.gitCommitSubmit;
+    const message = String(input?.value ?? '').trim();
+    if (!dialog || !input) {
+      return;
+    }
+    if (!message) {
+      input.focus();
+      this.toastController.show('Commit message cannot be empty');
+      return;
+    }
+
+    submit?.toggleAttribute('disabled', true);
+    if (submit) {
+      submit.textContent = 'Committing...';
+    }
+    try {
+      await this.runGitActionWithStatus('Committing changes...', async () => {
+        const result = await this.postGitAction(resolveApiUrl('/git/commit'), {
+          message,
+        });
+        await this.finalizeGitAction({
+          action: 'commit',
+          result,
+        });
+      });
+      dialog.close();
+    } catch (error) {
+      this.toastController.show(error.message || 'Failed to commit staged changes');
+    } finally {
+      if (submit) {
+        submit.textContent = 'Commit staged changes';
+      }
+      submit?.toggleAttribute('disabled', false);
+    }
+  },
+};

package/src/client/application/app-shell/presence-feature.js

@@ -0,0 +1,229 @@
+export const presenceFeature = {
+  updateGlobalUsers(users) {
+    this.globalUsers = users;
+    this.syncFollowedUser();
+    this.renderAvatars();
+    this.renderChat();
+    this.renderPresence();
+    this.syncCurrentUserName();
+  },
+
+  updateFileAwareness(_users) {
+    this.syncFollowedUser();
+  },
+
+  renderPresence() {
+    const badge = this.elements.userCount;
+    if (!badge) return;
+
+    const hasEditorSession = Boolean(this.session);
+    const isExcalidrawRoute = Boolean(this.currentFilePath && this.isExcalidrawFile?.(this.currentFilePath));
+    const shouldUseLobbyState = !hasEditorSession && (!this.currentFilePath || isExcalidrawRoute);
+    const effectiveConnectionState = shouldUseLobbyState
+      ? this.lobby?.getConnectionState?.() ?? this.connectionState
+      : this.connectionState;
+
+    if (effectiveConnectionState.status === 'connected') {
+      badge.textContent = `${this.globalUsers.length} online`;
+      badge.style.opacity = '1';
+      return;
+    }
+
+    if (effectiveConnectionState.status === 'connecting') {
+      badge.textContent = effectiveConnectionState.unreachable ? 'Unreachable' : 'Connecting...';
+      badge.style.opacity = '0.6';
+      return;
+    }
+
+    badge.textContent = 'Offline';
+    badge.style.opacity = '0.6';
+  },
+
+  renderAvatars() {
+    const avatars = this.elements.userAvatars;
+    if (!avatars) return;
+
+    avatars.innerHTML = '';
+    const visibleUsers = [...this.globalUsers];
+    const localIndex = visibleUsers.findIndex((u) => u.isLocal);
+    if (localIndex > 0) {
+      const [localUser] = visibleUsers.splice(localIndex, 1);
+      visibleUsers.unshift(localUser);
+    }
+
+    const followedIndex = visibleUsers.findIndex((u) => !u.isLocal && u.clientId === this.followedUserClientId);
+    const followedInsertIndex = visibleUsers[0]?.isLocal ? 1 : 0;
+    if (followedIndex > followedInsertIndex) {
+      const [followed] = visibleUsers.splice(followedIndex, 1);
+      visibleUsers.splice(followedInsertIndex, 0, followed);
+    }
+
+    visibleUsers.slice(0, 5).forEach((user) => {
+      const avatar = document.createElement(user.isLocal ? 'div' : 'button');
+      avatar.className = 'user-avatar';
+      avatar.classList.toggle('is-local', user.isLocal);
+      avatar.style.backgroundColor = user.color;
+      avatar.classList.toggle('is-following', user.clientId === this.followedUserClientId);
+
+      const initial = document.createElement('span');
+      initial.className = 'user-avatar-initial';
+      initial.textContent = user.name.charAt(0).toUpperCase();
+      avatar.appendChild(initial);
+
+      const sameFile = user.currentFile && user.currentFile === this.currentFilePath;
+      const fileLabel = user.currentFile ? this.getDisplayName(user.currentFile) : 'No file';
+
+      if (user.isLocal) {
+        const selfLabel = document.createElement('span');
+        selfLabel.className = 'user-avatar-self-label';
+        selfLabel.textContent = 'You';
+        avatar.appendChild(selfLabel);
+        avatar.title = `${user.name} (you) — ${fileLabel}`;
+        avatar.setAttribute('role', 'img');
+        avatar.setAttribute('aria-label', `${user.name} (you) — ${fileLabel}`);
+      } else {
+        avatar.type = 'button';
+        avatar.classList.add('user-avatar-button');
+        if (!sameFile) {
+          avatar.classList.add('different-file');
+        }
+        const avatarLabel = user.clientId === this.followedUserClientId
+          ? `Stop following ${user.name}`
+          : sameFile
+            ? `Follow ${user.name}`
+            : `Follow ${user.name} — ${fileLabel}`;
+        avatar.title = avatarLabel;
+        avatar.setAttribute('aria-label', avatarLabel);
+        avatar.addEventListener('click', () => this.toggleFollowUser(user.clientId));
+      }
+
+      avatars.appendChild(avatar);
+    });
+
+    if (visibleUsers.length > 5) {
+      const overflow = document.createElement('div');
+      overflow.className = 'user-avatar';
+      overflow.style.backgroundColor = 'var(--color-surface-dynamic)';
+      overflow.style.color = 'var(--color-text-muted)';
+      const overflowLabel = document.createElement('span');
+      overflowLabel.className = 'user-avatar-initial';
+      overflowLabel.textContent = `+${visibleUsers.length - 5}`;
+      overflow.appendChild(overflowLabel);
+      avatars.appendChild(overflow);
+    }
+  },
+
+  toggleFollowUser(clientId) {
+    if (!clientId) return;
+
+    if (this.followedUserClientId === clientId) {
+      this.stopFollowingUser();
+      return;
+    }
+
+    const user = this.globalUsers.find((u) => u.clientId === clientId && !u.isLocal);
+    if (!user) return;
+
+    this.followedUserClientId = clientId;
+    this.followedCursorSignature = '';
+    this.renderAvatars();
+
+    if (user.currentFile && user.currentFile !== this.currentFilePath) {
+      this.navigation.navigateToFile(user.currentFile);
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      if (this.followedUserClientId === clientId) {
+        this.followUserCursor(user, { force: true });
+      }
+    });
+
+  },
+
+  stopFollowingUser() {
+    if (!this.followedUserClientId) return;
+    if (this.currentFilePath && this.isExcalidrawFile?.(this.currentFilePath)) {
+      void this.excalidrawEmbed?.setFollowedUser(this.currentFilePath, null);
+    }
+    this.followedUserClientId = null;
+    this.followedCursorSignature = '';
+    this.renderAvatars();
+  },
+
+  syncFollowedUser() {
+    if (!this.followedUserClientId) return;
+    const user = this.globalUsers.find((u) => u.clientId === this.followedUserClientId);
+    if (!user || user.isLocal) {
+      this.stopFollowingUser();
+      return;
+    }
+
+    if (user.currentFile && user.currentFile !== this.currentFilePath) {
+      this.navigation.navigateToFile(user.currentFile);
+      return;
+    }
+
+    this.followUserCursor(user);
+  },
+
+  followUserCursor(user, { force = false } = {}) {
+    if (this.currentFilePath && this.isExcalidrawFile?.(this.currentFilePath)) {
+      this.followExcalidrawUser(user, { force });
+      return;
+    }
+
+    const fileClientId = this.resolveFileClientId(user.peerId);
+    const liveViewport = fileClientId != null ? this.session?.getUserViewport(fileClientId) : null;
+    const liveCursor = fileClientId != null ? this.session?.getUserCursor(fileClientId) : null;
+    const cursorHead = liveCursor?.cursorHead ?? null;
+    const cursorLine = liveCursor?.cursorLine ?? null;
+    const cursorAnchor = liveCursor?.cursorAnchor ?? null;
+    const viewportTopLine = liveViewport?.topLine ?? null;
+    const viewportRatio = liveViewport?.viewportRatio ?? 0.35;
+
+    if (!user || (viewportTopLine == null && (cursorHead == null || cursorLine == null))) {
+      this.followedCursorSignature = '';
+      return;
+    }
+
+    const nextSig = `${user.clientId}:${viewportTopLine ?? 'no-viewport'}:${cursorAnchor ?? 'no-anchor'}:${cursorHead ?? 'no-head'}`;
+    if (!force && nextSig === this.followedCursorSignature) return;
+
+    const didScroll = (fileClientId != null && this.session?.scrollToUserViewport(fileClientId))
+      || (fileClientId != null && this.session?.scrollToUserCursor(fileClientId, 'center'))
+      || (cursorHead != null && this.session?.scrollToPosition(cursorHead, 'center'))
+      || (cursorLine != null && this.session?.scrollToLine(cursorLine, viewportRatio));
+    if (didScroll) this.followedCursorSignature = nextSig;
+  },
+
+  followExcalidrawUser(user, { force = false } = {}) {
+    if (!user?.peerId || !this.currentFilePath) {
+      this.followedCursorSignature = '';
+      return;
+    }
+
+    const nextSig = `excalidraw:${this.currentFilePath}:${user.peerId}`;
+    if (!force && nextSig === this.followedCursorSignature) {
+      return;
+    }
+
+    void Promise.resolve(
+      this.excalidrawEmbed?.setFollowedUser(this.currentFilePath, user.peerId),
+    ).then((didApply) => {
+      if (didApply === false || this.followedUserClientId !== user.clientId) {
+        return;
+      }
+
+      this.followedCursorSignature = nextSig;
+    }).catch(() => {});
+  },
+
+  resolveFileClientId(peerId) {
+    if (!peerId || !this.session?.awareness) return null;
+    for (const [clientId, state] of this.session.awareness.getStates()) {
+      if (state.user?.peerId === peerId) return clientId;
+    }
+    return null;
+  },
+};