collabmd 0.1.31 → 0.1.33

package/src/client/presentation/git-diff-view-controller.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '../domain/vault-utils.js';
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
 function getPathLeaf(pathValue) {
@@ -146,6 +145,7 @@ function renderSplitRow(leftLine, rightLine) {
 
 export class GitDiffViewController {
   constructor({
+    gitApiClient = null,
     onBackToHistory = null,
     onCommitStaged = null,
     onOpenFile = null,
@@ -153,6 +153,7 @@ export class GitDiffViewController {
     onUnstageFile = null,
     toastController = null,
   } = {}) {
+    this.gitApiClient = gitApiClient;
     this.onBackToHistory = onBackToHistory;
     this.onCommitStaged = onCommitStaged;
     this.onOpenFile = onOpenFile;
@@ -176,6 +177,7 @@ export class GitDiffViewController {
     this.layoutToggle = document.getElementById('diffLayoutToggle');
     this.modeButtons = Array.from(document.querySelectorAll('[data-diff-mode]'));
     this.layoutButtons = Array.from(document.querySelectorAll('[data-diff-layout]'));
+    this.isActive = false;
     this.mode = 'unified';
     this.layoutMode = 'focused';
     this.source = 'workspace';
@@ -196,9 +198,22 @@ export class GitDiffViewController {
   }
 
   initialize() {
-    this.prevButton?.addEventListener('click', () => this.navigateFile(-1));
-    this.nextButton?.addEventListener('click', () => this.navigateFile(1));
+    this.prevButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
+      this.navigateFile(-1);
+    });
+    this.nextButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
+      this.navigateFile(1);
+    });
     this.backToHistoryButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
       if (!this.commitMeta?.hash) {
         return;
       }
@@ -208,6 +223,9 @@ export class GitDiffViewController {
       });
     });
     this.openEditorButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
       if (this.source !== 'workspace') {
         return;
       }
@@ -220,6 +238,9 @@ export class GitDiffViewController {
       this.onOpenFile?.(currentFile.path);
     });
     this.primaryActionButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
       const action = this.getPrimaryAction();
       if (!action) {
         return;
@@ -228,9 +249,15 @@ export class GitDiffViewController {
       void this.handleFileAction(action);
     });
     this.commitButton?.addEventListener('click', () => {
+      if (!this.isActive) {
+        return;
+      }
       void this.handleFileAction('commit');
     });
     this.content?.addEventListener('click', (event) => {
+      if (!this.isActive) {
+        return;
+      }
       const loadButton = event.target instanceof Element
         ? event.target.closest('[data-load-full-diff]')
         : null;
@@ -265,6 +292,9 @@ export class GitDiffViewController {
     });
     this.modeButtons.forEach((button) => {
       button.addEventListener('click', () => {
+        if (!this.isActive) {
+          return;
+        }
         const nextMode = button.getAttribute('data-diff-mode');
         if (!nextMode || nextMode === this.mode) {
           return;
@@ -275,6 +305,9 @@ export class GitDiffViewController {
     });
     this.layoutButtons.forEach((button) => {
       button.addEventListener('click', () => {
+        if (!this.isActive) {
+          return;
+        }
         const nextLayout = button.getAttribute('data-diff-layout');
         if (!nextLayout || nextLayout === this.layoutMode) {
           return;
@@ -283,11 +316,15 @@ export class GitDiffViewController {
       });
     });
     this.scrollContainer?.addEventListener('scroll', () => {
+      if (!this.isActive) {
+        return;
+      }
       this.handleScrollSelection();
     });
   }
 
   hide() {
+    this.isActive = false;
     this.page?.classList.add('hidden');
     if (this.content) {
       this.content.innerHTML = '';
@@ -308,10 +345,10 @@ export class GitDiffViewController {
     this.historyFilePath = null;
     this.pendingAction = null;
     this.repoStatus = null;
-    this.syncToolbar();
   }
 
   async openWorkspaceDiff({ filePath = null, scope = 'all' } = {}) {
+    this.isActive = true;
     this.source = 'workspace';
     this.layoutMode = 'focused';
     this.commitHash = null;
@@ -327,19 +364,11 @@ export class GitDiffViewController {
     this.renderLoading('Loading diff summary...');
 
     try {
-      const query = new URLSearchParams();
-      query.set('scope', scope);
-      if (filePath) {
-        query.set('path', filePath);
-      }
-      query.set('metaOnly', 'true');
-
-      const response = await fetch(resolveApiUrl(`/git/diff?${query.toString()}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load git diff');
-      }
-
+      const data = await this.gitApiClient.readDiff({
+        metaOnly: true,
+        path: filePath,
+        scope,
+      });
       this.data = data;
       const initialIndex = filePath
         ? Math.max(0, data.files.findIndex((file) => file.path === filePath))
@@ -368,6 +397,7 @@ export class GitDiffViewController {
   }
 
   async openCommitDiff({ hash, path = null, historyFilePath = null } = {}) {
+    this.isActive = true;
     this.source = 'commit';
     this.layoutMode = 'stacked';
     this.commitHash = String(hash ?? '').trim() || null;
@@ -383,16 +413,10 @@ export class GitDiffViewController {
     this.renderLoading('Loading commit summary...');
 
     try {
-      const query = new URLSearchParams();
-      query.set('hash', this.commitHash || '');
-      query.set('metaOnly', 'true');
-
-      const response = await fetch(resolveApiUrl(`/git/commit?${query.toString()}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load git commit');
-      }
-
+      const data = await this.gitApiClient.readCommit({
+        hash: this.commitHash || '',
+        metaOnly: true,
+      });
       this.data = data;
       this.commitMeta = data.commit ?? null;
       const initialIndex = path
@@ -476,6 +500,9 @@ export class GitDiffViewController {
   }
 
   renderLoading(message = 'Loading git diff...') {
+    if (!this.isActive) {
+      return;
+    }
     this.page?.classList.remove('hidden');
     if (this.content) {
       this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
@@ -485,6 +512,9 @@ export class GitDiffViewController {
   }
 
   renderEmpty(message) {
+    if (!this.isActive) {
+      return;
+    }
     this.page?.classList.remove('hidden');
     if (this.content) {
       this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
@@ -1053,37 +1083,21 @@ export class GitDiffViewController {
       try {
         let detail;
         if (this.source === 'commit') {
-          const query = new URLSearchParams();
-          query.set('hash', this.commitHash || '');
-          query.set('path', filePath);
-          if (forceFullPatch) {
-            query.set('allowLargePatch', 'true');
-          }
-
-          const response = await fetch(resolveApiUrl(`/git/commit?${query.toString()}`));
-          const data = await response.json();
-          if (!response.ok) {
-            throw new Error(data.error || 'Failed to load commit file diff');
-          }
-
+          const data = await this.gitApiClient.readCommit({
+            allowLargePatch: forceFullPatch,
+            hash: this.commitHash || '',
+            path: filePath,
+          });
           detail = {
             ...file,
             ...(data.files?.[0] ?? {}),
           };
         } else {
-          const query = new URLSearchParams();
-          query.set('scope', this.requestScope);
-          query.set('path', filePath);
-          if (forceFullPatch) {
-            query.set('allowLargePatch', 'true');
-          }
-
-          const response = await fetch(resolveApiUrl(`/git/diff?${query.toString()}`));
-          const data = await response.json();
-          if (!response.ok) {
-            throw new Error(data.error || 'Failed to load file diff');
-          }
-
+          const data = await this.gitApiClient.readDiff({
+            allowLargePatch: forceFullPatch,
+            path: filePath,
+            scope: this.requestScope,
+          });
           detail = {
             ...file,
             ...(data.files?.[0] ?? {}),
@@ -1187,6 +1201,9 @@ export class GitDiffViewController {
   }
 
   render() {
+    if (!this.isActive) {
+      return;
+    }
     this.page?.classList.remove('hidden');
 
     const files = this.data?.files ?? [];

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

@@ -1,5 +1,4 @@
 import { escapeHtml } from '../domain/vault-utils.js';
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
 
@@ -94,6 +93,7 @@ function renderHistoryRowTitle(commit = {}) {
 export class GitPanelController {
   constructor({
     enabled = true,
+    gitApiClient = null,
     onCommitStaged = () => {},
     onOpenPullBackup = () => {},
     onPullBranch = () => {},
@@ -109,6 +109,7 @@ export class GitPanelController {
     toastController = null,
   } = {}) {
     this.enabled = enabled;
+    this.gitApiClient = gitApiClient;
     this.onCommitStaged = onCommitStaged;
     this.onOpenPullBackup = onOpenPullBackup;
     this.onPullBranch = onPullBranch;
@@ -404,21 +405,12 @@ export class GitPanelController {
     }
 
     try {
-      const response = await fetch(resolveApiUrl(`/git/status${force ? '?force=true' : ''}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load git status');
-      }
-
+      const data = await this.gitApiClient.readStatus({ force });
       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');
-          }
+          const backupData = await this.gitApiClient.readPullBackups();
           this.pullBackups = Array.isArray(backupData.backups) ? backupData.backups : [];
         } catch (backupError) {
           console.error('[git-panel] Failed to load pull backups:', backupError);
@@ -501,15 +493,10 @@ export class GitPanelController {
     this.render();
 
     try {
-      const query = new URLSearchParams();
-      query.set('limit', String(HISTORY_PAGE_SIZE));
-      query.set('offset', '0');
-      const response = await fetch(resolveApiUrl(`/git/history?${query.toString()}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load git history');
-      }
-
+      const data = await this.gitApiClient.readHistory({
+        limit: HISTORY_PAGE_SIZE,
+        offset: 0,
+      });
       this.history = {
         commits: Array.isArray(data.commits) ? data.commits : [],
         error: '',
@@ -553,15 +540,10 @@ export class GitPanelController {
     this.render();
 
     try {
-      const query = new URLSearchParams();
-      query.set('limit', String(HISTORY_PAGE_SIZE));
-      query.set('offset', String(this.history.offset));
-      const response = await fetch(resolveApiUrl(`/git/history?${query.toString()}`));
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to load git history');
-      }
-
+      const data = await this.gitApiClient.readHistory({
+        limit: HISTORY_PAGE_SIZE,
+        offset: this.history.offset,
+      });
       const nextCommits = Array.isArray(data.commits) ? data.commits : [];
       this.history = {
         commits: [...this.history.commits, ...nextCommits],

package/src/client/styles/components/scrollbars.css

@@ -5,6 +5,7 @@
 .file-tree,
 .git-panel,
 .diff-scroll,
+.backlinks-body,
 .comments-drawer-list,
 .comments-drawer-item-quote,
 .comment-card-quote,
@@ -26,6 +27,7 @@
 .file-tree::-webkit-scrollbar,
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
+.backlinks-body::-webkit-scrollbar,
 .comments-drawer-list::-webkit-scrollbar,
 .comments-drawer-item-quote::-webkit-scrollbar,
 .comment-card-quote::-webkit-scrollbar,
@@ -47,6 +49,7 @@
 .file-tree::-webkit-scrollbar-track,
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
+.backlinks-body::-webkit-scrollbar-track,
 .comments-drawer-list::-webkit-scrollbar-track,
 .comments-drawer-item-quote::-webkit-scrollbar-track,
 .comment-card-quote::-webkit-scrollbar-track,
@@ -67,6 +70,7 @@
 .file-tree::-webkit-scrollbar-thumb,
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
+.backlinks-body::-webkit-scrollbar-thumb,
 .comments-drawer-list::-webkit-scrollbar-thumb,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb,
 .comment-card-quote::-webkit-scrollbar-thumb,
@@ -88,6 +92,7 @@
 .file-tree::-webkit-scrollbar-thumb:hover,
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,
+.backlinks-body::-webkit-scrollbar-thumb:hover,
 .comments-drawer-list::-webkit-scrollbar-thumb:hover,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
 .comment-card-quote::-webkit-scrollbar-thumb:hover,

package/src/client/styles/export-document.css

@@ -2,17 +2,24 @@ html[data-surface='export-document'] {
   height: auto;
   min-height: 100%;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
   overscroll-behavior: auto;
+  scrollbar-width: none;
 }
 
 body[data-surface='export-document'] {
   height: auto;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
   overscroll-behavior: auto;
   background: var(--color-bg);
   color: var(--color-text);
+  scrollbar-width: none;
+}
+
+html[data-surface='export-document']::-webkit-scrollbar,
+body[data-surface='export-document']::-webkit-scrollbar {
+  display: none;
 }
 
 .export-page-shell {
@@ -78,10 +85,22 @@ body[data-surface='export-document'] {
   overflow: visible;
 }
 
+.export-content .bases-table-shell,
+.export-content pre {
+  overflow: visible;
+}
+
 .export-content table {
   white-space: normal;
 }
 
+.export-content pre code {
+  width: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
 .export-diagram {
   display: flex;
   justify-content: center;
@@ -197,8 +216,18 @@ body[data-surface='export-document'] {
 }
 
 @media print {
+  html[data-surface='export-document'],
   body[data-surface='export-document'] {
+    height: auto;
+    overflow: hidden !important;
     background: var(--color-surface);
+    scrollbar-width: none;
+  }
+
+  html[data-surface='export-document']::-webkit-scrollbar,
+  body[data-surface='export-document']::-webkit-scrollbar,
+  .export-content *::-webkit-scrollbar {
+    display: none;
   }
 
   .export-page-shell {
@@ -218,6 +247,20 @@ body[data-surface='export-document'] {
     border: 0;
     border-radius: 0;
     box-shadow: none;
+    overflow: visible;
+  }
+
+  .export-content pre,
+  .export-content .table-wrapper,
+  .export-content .bases-table-shell {
+    overflow: visible !important;
+  }
+
+  .export-content pre code {
+    width: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
   }
 
   .export-content h1,

package/src/client/styles/features/auth-gate.css

@@ -27,11 +27,12 @@
   box-shadow:
     var(--shadow-card-strong),
     var(--shadow-sheet-inset);
-  font-family: var(--font-display);
+  font-family: var(--font-body);
 }
 
 .auth-gate-card h1 {
   margin: 0 0 10px;
+  font-family: var(--font-display);
   font-size: var(--text-xl);
   line-height: 1.05;
   letter-spacing: -0.04em;
@@ -58,20 +59,14 @@
 }
 
 .auth-gate-input {
-  width: 100%;
-  padding: 14px 16px;
-  border: 1px solid var(--color-border);
+  min-height: var(--control-h-lg);
   border-radius: var(--radius-xl);
   background: var(--surface-overlay);
   color: inherit;
-  font: inherit;
-  box-sizing: border-box;
 }
 
 .auth-gate-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-focus);
+  background: var(--surface-overlay-soft);
 }
 
 .auth-gate-actions {
@@ -81,14 +76,16 @@
 
 .auth-gate-button,
 .auth-gate-secondary-button {
+  width: 100%;
+  justify-content: center;
+  min-height: var(--control-h-lg);
   border-radius: var(--radius-xl);
-  font: inherit;
-  cursor: pointer;
   transition:
     transform 160ms ease,
     box-shadow 160ms ease,
     border-color 160ms ease,
-    background-color 160ms ease;
+    background-color 160ms ease,
+    color 160ms ease;
 }
 
 .auth-gate-button:hover,
@@ -103,15 +100,6 @@
 }
 
 .auth-gate-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: 14px 18px;
-  border: 1px solid transparent;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-  color: var(--color-text-inverse);
   font-weight: 600;
   box-shadow: var(--shadow-floating-soft);
 }
@@ -121,10 +109,11 @@
 }
 
 .auth-gate-secondary-button {
-  padding: 13px 16px;
-  border: 1px solid var(--color-border);
   background: var(--surface-overlay);
-  color: var(--color-text);
+}
+
+.auth-gate-secondary-button:hover {
+  background: var(--surface-overlay-soft);
 }
 
 .auth-gate-button[disabled],

package/src/client/styles/features/comment-card.css

@@ -106,6 +106,12 @@
   justify-content: flex-end;
 }
 
+.comment-card-input,
+.comment-reply-input {
+  padding: var(--space-3) var(--space-4);
+  line-height: 1.5;
+}
+
 .comment-card-input {
   resize: vertical;
   min-height: 88px;

package/src/client/styles/features/comments-drawer.css

@@ -12,7 +12,7 @@
 }
 
 .comments-drawer-header {
-  padding: var(--space-4);
+  padding: var(--space-3);
   border-bottom: 1px solid var(--color-divider);
   background: var(--surface-comment-shell-header);
 }
@@ -34,15 +34,15 @@
 .comments-drawer-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-1);
   overflow: auto;
-  padding: var(--space-3);
+  padding: calc(var(--space-2) + 2px);
 }
 
 .comments-drawer-item {
-  --ui-record-padding: var(--space-4);
-  --ui-record-gap: var(--space-3);
-  --ui-record-radius: calc(var(--radius-lg) + 4px);
+  --ui-record-padding: calc(var(--space-2) + 2px);
+  --ui-record-gap: var(--space-1);
+  --ui-record-radius: var(--radius-lg);
   --ui-record-border: var(--border-comment-soft);
   --ui-record-bg: var(--surface-comment-record);
   --ui-record-border-hover: oklch(from var(--color-comment) l c h / 0.18);
@@ -54,16 +54,21 @@
   --ui-record-hover-transform: translateY(-1px);
 }
 
+.comments-drawer-item-header {
+  align-items: flex-start;
+}
+
 .comments-drawer-item-title {
   color: var(--color-comment);
   font-size: var(--text-meta);
   font-weight: 700;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
 .comments-drawer-item-count {
-  min-height: 20px;
+  min-height: 17px;
+  padding-inline: 6px;
   border: 1px solid oklch(from var(--color-comment) l c h / 0.18);
   background: var(--color-comment-soft);
   color: var(--color-comment);
@@ -71,44 +76,59 @@
 }
 
 .comments-drawer-item-quote {
-  max-height: 9.5rem;
-  margin: var(--space-3) 0;
+  max-height: 5.8rem;
+  margin: 0;
   overflow: auto;
   overflow-wrap: anywhere;
-  padding: var(--space-3);
-  padding-bottom: calc(var(--space-3) + 2px);
+  padding: 6px 10px;
   border: 1px solid var(--border-comment-soft);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-sm);
   background: var(--surface-comment-offset);
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
   scrollbar-width: thin;
   font-family: var(--font-mono);
-  font-size: var(--text-code-sm);
-  line-height: 1.65;
+  font-size: var(--text-meta);
+  line-height: 1.45;
 }
 
 .comments-drawer-item-preview {
   position: relative;
-  max-height: 7.8rem;
+  max-height: 3.4rem;
   overflow: hidden;
   color: var(--color-text-muted);
+  font-size: var(--text-label);
+  line-height: 1.45;
+}
+
+.comments-drawer-item-preview p,
+.comments-drawer-item-preview ul,
+.comments-drawer-item-preview ol,
+.comments-drawer-item-preview blockquote,
+.comments-drawer-item-preview pre,
+.comments-drawer-item-preview .comment-markdown-table {
+  margin: 0;
+}
+
+.comments-drawer-item-preview > * + * {
+  margin-top: var(--space-1);
 }
 
 .comments-drawer-item-preview:after {
   content: '';
   position: absolute;
   inset: auto 0 0 0;
-  height: 2.5rem;
+  height: 1.3rem;
   background: var(--surface-comment-preview-fade);
   pointer-events: none;
 }
 
 .comments-drawer-item-footer {
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
+  padding-top: 2px;
   color: var(--color-text-muted);
   font-size: var(--text-meta);
   font-weight: 600;