collabmd 0.1.19 → 0.1.20

package/src/client/presentation/git-panel-controller.js

@@ -87,6 +87,7 @@ export class GitPanelController {
   constructor({
     enabled = true,
     onCommitStaged = () => {},
+    onOpenPullBackup = () => {},
     onPullBranch = () => {},
     onPushBranch = () => {},
     onRepoChange = () => {},
@@ -100,6 +101,7 @@ export class GitPanelController {
   } = {}) {
     this.enabled = enabled;
     this.onCommitStaged = onCommitStaged;
+    this.onOpenPullBackup = onOpenPullBackup;
     this.onPullBranch = onPullBranch;
     this.onPushBranch = onPushBranch;
     this.onRepoChange = onRepoChange;
@@ -111,6 +113,7 @@ export class GitPanelController {
     this.searchInput = searchInput;
     this.toastController = toastController;
     this.panel = document.getElementById('gitPanel');
+    this.pullBackups = [];
     this.status = null;
     this.active = false;
     this.refreshTimer = null;
@@ -147,6 +150,18 @@ export class GitPanelController {
         return;
       }
 
+      const pullBackupButton = event.target instanceof Element
+        ? event.target.closest('[data-git-pull-backup-path]')
+        : null;
+      if (pullBackupButton) {
+        const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
+        if (!summaryPath) {
+          return;
+        }
+        this.onOpenPullBackup(summaryPath);
+        return;
+      }
+
       const actionButton = event.target instanceof Element
         ? event.target.closest('[data-git-file-action]')
         : null;
@@ -243,6 +258,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -256,6 +272,19 @@ export class GitPanelController {
       }
 
       this.status = data;
+      this.pullBackups = [];
+      if (data.isGitRepo) {
+        try {
+          const backupResponse = await fetch(resolveApiUrl('/git/pull-backups'));
+          const backupData = await backupResponse.json();
+          if (!backupResponse.ok) {
+            throw new Error(backupData.error || 'Failed to load pull backups');
+          }
+          this.pullBackups = Array.isArray(backupData.backups) ? backupData.backups : [];
+        } catch (backupError) {
+          console.error('[git-panel] Failed to load pull backups:', backupError);
+        }
+      }
       this.onRepoChange(Boolean(data.isGitRepo), data);
       this.render();
       return data;
@@ -267,6 +296,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -367,6 +397,47 @@ export class GitPanelController {
     `;
   }
 
+  renderPullBackupsSection() {
+    if (!Array.isArray(this.pullBackups) || this.pullBackups.length === 0) {
+      return '';
+    }
+
+    return `
+      <section class="git-section">
+        <button class="git-section-header" type="button" data-git-section-toggle="pull-backups">
+          ${chevronSvg(this.collapsedSections.has('pull-backups'))}
+          Pull Backups
+          <span class="git-section-count">${this.pullBackups.length}</span>
+        </button>
+        <div class="git-file-list${this.collapsedSections.has('pull-backups') ? ' hidden' : ''}">
+          ${this.pullBackups.map((backup) => this.renderPullBackup(backup)).join('')}
+        </div>
+      </section>
+    `;
+  }
+
+  renderPullBackup(backup) {
+    const createdAt = String(backup?.createdAt || '').replace('T', ' ').replace(/\.\d+Z?$/u, 'Z');
+    const fileCount = Number(backup?.fileCount || 0);
+
+    return `
+      <div class="git-file-row">
+        <button
+          class="git-file-item"
+          type="button"
+          data-git-pull-backup-path="${escapeHtml(backup.summaryPath || '')}"
+        >
+          ${fileIconSvg()}
+          <span class="git-file-copy">
+            <span class="git-file-name">Pull backup ${escapeHtml(backup.id || '')}</span>
+            <span class="git-file-path">${escapeHtml(`${createdAt} · ${backup.branch || 'HEAD'} · ${fileCount} file${fileCount === 1 ? '' : 's'}`)}</span>
+          </span>
+          <span class="git-status-badge modified">BK</span>
+        </button>
+      </div>
+    `;
+  }
+
   renderFile(file) {
     const isActive = this.selection.path === file.path && this.selection.scope === file.scope;
     const dirPath = getPathDir(file.path);
@@ -449,6 +520,7 @@ export class GitPanelController {
     }
 
     const branch = this.status.branch ?? {};
+    const pullBackupsMarkup = this.renderPullBackupsSection();
     const sectionMarkup = (this.status.sections ?? [])
       .map((section) => this.renderSection(section))
       .filter(Boolean)
@@ -492,6 +564,7 @@ export class GitPanelController {
           </button>
         </div>
       </div>
+      ${pullBackupsMarkup}
       ${sectionMarkup || '<div class="git-panel-empty">No local changes</div>'}
       ${hasChanges ? `
         <div class="git-panel-footer">

package/src/client/presentation/outline-controller.js

@@ -2,6 +2,7 @@ export class OutlineController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onNavigateToHeading,
+    onWillOpen,
   } = {}) {
     this.outlineOpen = false;
     this.activeHeadingFrame = null;
@@ -9,16 +10,36 @@ export class OutlineController {
     this.headings = [];
     this.pinnedHeadingId = null;
     this.onNavigateToHeading = onNavigateToHeading;
+    this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
     this.navigation = document.getElementById('outlineNav');
     this.previewContainer = document.getElementById('previewContainer');
     this.toggleButton = document.getElementById('outlineToggle');
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.handlePreviewScroll = () => this.scheduleActiveHeadingUpdate();
+    this.handleDocumentPointerDown = (event) => {
+      if (!this.outlineOpen) {
+        return;
+      }
+
+      const target = event.target;
+      if (
+        target instanceof Node
+        && (
+          this.panel?.contains(target)
+          || this.toggleButton?.contains(target)
+        )
+      ) {
+        return;
+      }
+
+      this.close();
+    };
   }
 
   initialize() {
     this.toggleButton?.addEventListener('click', () => this.toggle());
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown);
   }
 
   toggle() {
@@ -30,6 +51,10 @@ export class OutlineController {
   }
 
   setOpenState(nextState) {
+    if (nextState && !this.outlineOpen) {
+      this.onWillOpen?.();
+    }
+
     this.outlineOpen = nextState;
     this.panel?.classList.toggle('hidden', !this.outlineOpen);
     this.toggleButton?.classList.toggle('active', this.outlineOpen);

package/src/client/styles/style.css

@@ -2265,6 +2265,10 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
 
 /* Preview body (contains preview + outline side by side) */
 .preview-body {
+  --preview-floating-sidebar-gap: var(--space-3);
+  --preview-floating-comments-width: min(300px, 34vw);
+  --preview-floating-outline-width: 220px;
+  --preview-content-max-width: 720px;
   display: flex;
   flex: 1;
   overflow: hidden;
@@ -2298,6 +2302,12 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   color: var(--color-text-muted);
 }
 
+@media (min-width: 769px) {
+  .preview-content {
+    padding-bottom: calc(var(--space-12) + 96px);
+  }
+}
+
 .preview-content.is-excalidraw-file-preview {
   display: flex;
   width: 100%;
@@ -3670,14 +3680,45 @@ body.plantuml-maximized-open::before {
 
 /* ===== BACKLINKS PANEL ===== */
 
+.backlinks-panel.hidden,
+.backlinks-panel-layer.hidden {
+  display: none;
+}
 .backlinks-panel {
+  min-width: 0;
+}
+.backlinks-panel-layer {
+  position: absolute;
+  left: max(
+    var(--space-4),
+    calc((100% - min(var(--preview-content-max-width), 100%)) / 2)
+  );
+  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
+  z-index: 14;
+  pointer-events: none;
+}
+.backlinks-panel-dock {
+  display: flex;
+  flex-direction: column-reverse;
+  border: 1px solid var(--color-divider);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-offset) 16%);
+  box-shadow: 0 14px 34px oklch(0 0 0 / 0.18);
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  pointer-events: auto;
+  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
+}
+.backlinks-panel-dock:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 40px oklch(0 0 0 / 0.2);
+}
+.backlinks-panel-inline {
   border-top: 1px solid var(--color-divider);
   margin-top: var(--space-6);
   padding: 0 var(--space-4);
 }
-.backlinks-panel.hidden {
-  display: none;
-}
 .backlinks-header {
   display: flex;
   align-items: center;
@@ -3693,6 +3734,10 @@ body.plantuml-maximized-open::before {
 .backlinks-header:hover {
   color: var(--color-text);
 }
+.backlinks-panel-dock .backlinks-header {
+  padding: 11px 14px;
+  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-bg) 24%);
+}
 .backlinks-header-empty {
   cursor: default;
   opacity: 0.5;
@@ -3709,15 +3754,20 @@ body.plantuml-maximized-open::before {
 }
 .backlinks-toggle {
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .backlinks-count {
   font-size: var(--text-xs);
   font-weight: 600;
   color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.12);
+  background: oklch(from var(--color-primary) l c h / 0.14);
   border-radius: var(--radius-full);
-  padding: 1px 8px;
-  min-width: 0;
+  padding: 1px 7px;
+  min-width: 22px;
+  text-align: center;
 }
 .backlinks-count:empty {
   display: none;
@@ -3727,16 +3777,31 @@ body.plantuml-maximized-open::before {
   max-height: 0;
   transition: max-height 200ms ease;
 }
-.backlinks-panel.expanded .backlinks-body {
+.backlinks-panel-inline.expanded .backlinks-body {
   max-height: 600px;
   overflow-y: auto;
 }
+.backlinks-panel-dock .backlinks-body {
+  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-offset) 6%);
+}
+.backlinks-panel-dock.expanded .backlinks-body {
+  max-height: min(44vh, 400px);
+  overflow-y: auto;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 78%, var(--color-primary) 22%);
+}
+.backlinks-panel-dock.expanded {
+  border-color: color-mix(in srgb, var(--color-divider) 72%, var(--color-primary) 28%);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-offset) 10%);
+}
 .backlinks-list {
   padding-bottom: var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
+.backlinks-panel-dock .backlinks-list {
+  padding: 10px;
+}
 .backlink-item {
   display: block;
   width: 100%;
@@ -3748,6 +3813,10 @@ body.plantuml-maximized-open::before {
   cursor: pointer;
   transition: border-color var(--transition-interactive), background var(--transition-interactive);
 }
+.backlinks-panel-dock .backlink-item {
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-offset) 12%);
+}
 .backlink-item:hover {
   border-color: var(--color-primary);
   background: oklch(from var(--color-primary) l c h / 0.04);
@@ -3789,6 +3858,12 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-faint);
 }
 
+@media (min-width: 769px) {
+  .backlinks-panel-inline {
+    display: none !important;
+  }
+}
+
 .outline-panel {
   width: 220px;
   flex-shrink: 0;
@@ -3889,6 +3964,9 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-pane {
   flex: 1;
 }
+.editor-layout[data-view="preview"] .preview-body {
+  --preview-content-max-width: 1080px;
+}
 .editor-layout[data-view="preview"] .preview-content {
   max-width: 1080px;
 }
@@ -3923,6 +4001,55 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {
   max-width: none;
 }
+@media (min-width: 769px) {
+  .preview-body > .comments-drawer,
+  .preview-body > .outline-panel {
+    position: absolute;
+    top: var(--preview-floating-sidebar-gap);
+    right: var(--preview-floating-sidebar-gap);
+    bottom: var(--preview-floating-sidebar-gap);
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid var(--color-divider);
+    border-radius: calc(var(--radius-lg) + 2px);
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: blur(14px);
+  }
+
+  .preview-body > .comments-drawer {
+    width: var(--preview-floating-comments-width);
+    min-width: 240px;
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .outline-panel {
+    width: var(--preview-floating-outline-width);
+    border-left: 1px solid var(--color-divider);
+  }
+
+  .preview-body > .comments-drawer.hidden,
+  .preview-body > .outline-panel.hidden {
+    display: flex !important;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(12px);
+    visibility: hidden;
+  }
+
+  .preview-body > .comments-drawer:not(.hidden),
+  .preview-body > .outline-panel:not(.hidden) {
+    opacity: 1;
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .preview-body:has(> .outline-panel:not(.hidden)) > .comments-drawer:not(.hidden) {
+    right: calc(
+      var(--preview-floating-sidebar-gap) * 2
+      + var(--preview-floating-outline-width)
+    );
+  }
+}
 .editor-layout[data-view="editor"] .editor-pane {
   flex: 1;
 }
@@ -4022,6 +4149,10 @@ body.plantuml-maximized-open::before {
     padding: var(--space-4);
   }
 
+  .backlinks-panel-layer {
+    display: none !important;
+  }
+
   .diff-toolbar {
     flex-wrap: wrap;
     padding: var(--space-2) var(--space-3);

package/src/server/infrastructure/git/errors.js

@@ -1,5 +1,8 @@
-export function createGitRequestError(statusCode, message) {
+export function createGitRequestError(statusCode, message, requestCode = null) {
   const error = new Error(message);
   error.statusCode = statusCode;
+  if (requestCode) {
+    error.requestCode = requestCode;
+  }
   return error;
 }

package/src/server/infrastructure/git/git-service.js

@@ -6,6 +6,7 @@ import { parseNameStatusOutput } from './parsers.js';
 import { createEmptyWorkspaceChange, createWorkspaceChange } from './responses.js';
 import { GitStatusService } from './status-service.js';
 import { GitUntrackedFileService } from './untracked-files.js';
+import { PullBackupStore } from '../persistence/pull-backup-store.js';
 
 export class GitService {
   constructor({
@@ -36,6 +37,7 @@ export class GitService {
       statusService: this.statusService,
       untrackedFileService: this.untrackedFileService,
     });
+    this.pullBackupStore = new PullBackupStore({ vaultDir });
   }
 
   async isGitRepo() {
@@ -55,6 +57,14 @@ export class GitService {
     return this.statusService.getStatus(options);
   }
 
+  async listPullBackups() {
+    if (!(await this.isGitRepo())) {
+      return [];
+    }
+
+    return this.pullBackupStore.listBackups();
+  }
+
   async stageFile(path) {
     const normalizedPath = normalizeRelativeGitPath(path);
     await this.commandRunner.execGit(['add', '-A', '--', normalizedPath]);
@@ -131,7 +141,45 @@ export class GitService {
     }
 
     const beforeRef = await this.getHeadRef();
-    const output = await this.commandRunner.execGit(['pull', '--ff-only']);
+    await this.fetchUpstream(status.branch.upstream);
+
+    const targetRef = await this.resolveRef(status.branch.upstream);
+    if (!targetRef) {
+      throw createGitRequestError(409, 'Unable to resolve upstream branch for pull');
+    }
+
+    if (!(await this.canFastForwardTo(targetRef))) {
+      throw createGitRequestError(
+        409,
+        'Cannot pull because local and remote commits have diverged; fast-forward only pull is not possible.',
+        'pull_diverged_ff_only',
+      );
+    }
+
+    const dirtyEntries = this.collectDirtyEntries(status);
+    const upstreamWorkspaceChange = await this.createWorkspaceChangeFromRefs(beforeRef, targetRef);
+    const overlappingEntries = this.findOverlappingDirtyEntries({
+      dirtyEntries,
+      workspaceChange: upstreamWorkspaceChange,
+    });
+
+    let pullBackup = null;
+    if (overlappingEntries.length > 0) {
+      pullBackup = await this.backupAndClearOverlappingEntries({
+        beforeRef,
+        branchName: status.branch?.name ?? null,
+        entries: overlappingEntries,
+        targetRef,
+      });
+    }
+
+    let output;
+    try {
+      output = await this.commandRunner.execGit(['pull', '--ff-only', '--autostash']);
+    } catch (error) {
+      throw await this.classifyPullError(error);
+    }
+
     const afterRef = await this.getHeadRef();
     this.invalidateStatusCache();
     return {
@@ -139,6 +187,7 @@ export class GitService {
       beforeRef,
       ok: true,
       output: output.trim(),
+      pullBackup,
       workspaceChange: await this.createWorkspaceChangeFromRefs(beforeRef, afterRef),
     };
   }
@@ -202,6 +251,171 @@ export class GitService {
     }
   }
 
+  async resolveRef(ref) {
+    try {
+      const output = await this.commandRunner.execGit(['rev-parse', ref]);
+      return output.trim() || null;
+    } catch {
+      return null;
+    }
+  }
+
+  async fetchUpstream(upstreamRef) {
+    const remoteName = String(upstreamRef ?? '').split('/')[0] || null;
+    await this.commandRunner.execGit(remoteName
+      ? ['fetch', '--prune', remoteName]
+      : ['fetch', '--prune']);
+  }
+
+  async canFastForwardTo(targetRef) {
+    const headRef = await this.getHeadRef();
+    if (!headRef || !targetRef || headRef === targetRef) {
+      return true;
+    }
+
+    try {
+      await this.commandRunner.execGit(['merge-base', '--is-ancestor', headRef, targetRef]);
+      return true;
+    } catch (error) {
+      if (error?.code === 1) {
+        return false;
+      }
+      throw error;
+    }
+  }
+
+  collectDirtyEntries(status = {}) {
+    const entries = new Map();
+    for (const section of status.sections ?? []) {
+      for (const file of section.files ?? []) {
+        if (!file?.path) {
+          continue;
+        }
+
+        const existing = entries.get(file.path) ?? {
+          hasStagedChanges: false,
+          hasWorkingTreeChanges: false,
+          hasTrackedChanges: false,
+          isUntracked: false,
+          oldPath: null,
+          path: file.path,
+          touchPaths: new Set(),
+        };
+
+        existing.isUntracked = existing.isUntracked || file.scope === 'untracked';
+        existing.hasStagedChanges = existing.hasStagedChanges || file.scope === 'staged';
+        existing.hasWorkingTreeChanges = existing.hasWorkingTreeChanges || file.scope === 'working-tree';
+        existing.hasTrackedChanges = existing.hasTrackedChanges || file.scope === 'staged' || file.scope === 'working-tree';
+        if (!existing.oldPath && file.oldPath) {
+          existing.oldPath = file.oldPath;
+        }
+        existing.touchPaths.add(file.path);
+        if (file.oldPath) {
+          existing.touchPaths.add(file.oldPath);
+        }
+        entries.set(file.path, existing);
+      }
+    }
+
+    return Array.from(entries.values());
+  }
+
+  findOverlappingDirtyEntries({ dirtyEntries = [], workspaceChange = createEmptyWorkspaceChange() } = {}) {
+    const upstreamTouchedPaths = new Set([
+      ...(workspaceChange.changedPaths ?? []),
+      ...(workspaceChange.deletedPaths ?? []),
+      ...((workspaceChange.renamedPaths ?? []).flatMap((entry) => [entry.oldPath, entry.newPath])),
+    ].filter(Boolean));
+
+    return dirtyEntries.filter((entry) => Array.from(entry.touchPaths).some((path) => upstreamTouchedPaths.has(path)));
+  }
+
+  async createPatchForEntry(entry, { cached = false } = {}) {
+    const pathspecs = Array.from(entry?.touchPaths ?? []).filter(Boolean);
+    if (pathspecs.length === 0) {
+      return null;
+    }
+
+    const output = await this.commandRunner.execGit([
+      'diff',
+      '--binary',
+      '--find-renames',
+      ...(cached ? ['--cached'] : []),
+      '--',
+      ...pathspecs,
+    ]);
+
+    return output || null;
+  }
+
+  async backupAndClearOverlappingEntries({
+    beforeRef,
+    branchName = null,
+    entries = [],
+    targetRef = null,
+  } = {}) {
+    const backupEntries = await Promise.all(entries.map(async (entry) => ({
+      ...entry,
+      stagedPatchContent: entry.hasStagedChanges
+        ? await this.createPatchForEntry(entry, { cached: true })
+        : null,
+      worktreePatchContent: entry.hasWorkingTreeChanges
+        ? await this.createPatchForEntry(entry, { cached: false })
+        : null,
+    })));
+
+    const pullBackup = await this.pullBackupStore.createBackup({
+      branch: branchName,
+      entries: backupEntries,
+      headRef: beforeRef,
+      targetRef,
+    });
+
+    for (const entry of backupEntries) {
+      if (entry.isUntracked && !entry.hasTrackedChanges) {
+        await this.commandRunner.execGit(['clean', '-f', '--', entry.path]);
+        continue;
+      }
+
+      await this.restorePathToHead(entry.path);
+    }
+
+    return pullBackup;
+  }
+
+  async restorePathToHead(path) {
+    const normalizedPath = normalizeRelativeGitPath(path);
+    const sourceRef = 'HEAD';
+    const existsOnSource = await this.pathExistsAtRef(sourceRef, normalizedPath);
+
+    if (existsOnSource) {
+      await this.commandRunner.execGit(['restore', '--source', sourceRef, '--staged', '--worktree', '--', normalizedPath]);
+      return;
+    }
+
+    await this.commandRunner.execGit(['rm', '-f', '--ignore-unmatch', '--', normalizedPath]);
+    await this.commandRunner.execGit(['clean', '-f', '--', normalizedPath]);
+  }
+
+  async hasConflictedStatus() {
+    const status = await this.getStatus({ force: true });
+    return (status.sections ?? [])
+      .flatMap((section) => section.files ?? [])
+      .some((file) => file?.status === 'conflicted');
+  }
+
+  async classifyPullError(error) {
+    if (await this.hasConflictedStatus()) {
+      return createGitRequestError(
+        409,
+        'Pull applied remote updates, but reapplying local changes caused conflicts. Review the conflicted files and the pull backup summary.',
+        'pull_conflicted_after_autostash',
+      );
+    }
+
+    return error;
+  }
+
   async createWorkspaceChangeFromRefs(beforeRef, afterRef) {
     if (!afterRef || beforeRef === afterRef) {
       return createEmptyWorkspaceChange();