collabmd 0.1.30 → 0.1.32

package/src/client/infrastructure/editor-view-adapter.js

@@ -10,6 +10,7 @@ import {
   undo,
 } from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { yaml } from '@codemirror/lang-yaml';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -37,6 +38,7 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
+import { isBaseFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
@@ -296,14 +298,15 @@ function createEditorTheme(theme) {
   }, { dark: theme === 'dark' });
 }
 
-function createLanguageExtension(filePath) {
-  if (
-    typeof filePath === 'string'
-    && (filePath.toLowerCase().endsWith('.puml') || filePath.toLowerCase().endsWith('.plantuml'))
-  ) {
+export function createLanguageExtension(filePath) {
+  if (isPlantUmlFilePath(filePath)) {
     return plantUmlLanguage;
   }
 
+  if (isBaseFilePath(filePath)) {
+    return yaml();
+  }
+
   return markdown({ base: markdownLanguage, codeLanguages: markdownCodeLanguages });
 }
 

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

@@ -0,0 +1,134 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+
+function createRequestHeaders(requestId, headers = {}) {
+  const nextHeaders = { ...headers };
+  if (requestId) {
+    nextHeaders['X-CollabMD-Request-Id'] = String(requestId);
+  }
+
+  return nextHeaders;
+}
+
+async function parseJsonResponse(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;
+    if (typeof data?.code === 'string') {
+      error.code = data.code;
+    }
+    throw error;
+  }
+
+  return data;
+}
+
+function createSearchParams(values = {}) {
+  const params = new URLSearchParams();
+  Object.entries(values).forEach(([key, value]) => {
+    if (value == null || value === '') {
+      return;
+    }
+
+    params.set(key, String(value));
+  });
+  return params;
+}
+
+export class GitApiClient {
+  async readStatus({ force = false } = {}) {
+    const response = await fetch(resolveApiUrl(`/git/status${force ? '?force=true' : ''}`));
+    return parseJsonResponse(response, 'Failed to load git status');
+  }
+
+  async readPullBackups() {
+    const response = await fetch(resolveApiUrl('/git/pull-backups'));
+    return parseJsonResponse(response, 'Failed to load pull backups');
+  }
+
+  async readHistory({ limit, offset } = {}) {
+    const params = createSearchParams({ limit, offset });
+    const response = await fetch(resolveApiUrl(`/git/history?${params.toString()}`));
+    return parseJsonResponse(response, 'Failed to load git history');
+  }
+
+  async readFileHistory({ path, limit, offset } = {}) {
+    const params = createSearchParams({ limit, offset, path });
+    const response = await fetch(resolveApiUrl(`/git/file-history?${params.toString()}`));
+    return parseJsonResponse(response, 'Failed to load file history');
+  }
+
+  async readDiff({
+    allowLargePatch = false,
+    metaOnly = false,
+    path = null,
+    scope = 'all',
+  } = {}) {
+    const params = createSearchParams({
+      allowLargePatch: allowLargePatch ? 'true' : null,
+      metaOnly: metaOnly ? 'true' : null,
+      path,
+      scope,
+    });
+    const response = await fetch(resolveApiUrl(`/git/diff?${params.toString()}`));
+    return parseJsonResponse(response, 'Failed to load git diff');
+  }
+
+  async readCommit({
+    allowLargePatch = false,
+    hash,
+    metaOnly = false,
+    path = null,
+  } = {}) {
+    const params = createSearchParams({
+      allowLargePatch: allowLargePatch ? 'true' : null,
+      hash,
+      metaOnly: metaOnly ? 'true' : null,
+      path,
+    });
+    const response = await fetch(resolveApiUrl(`/git/commit?${params.toString()}`));
+    return parseJsonResponse(response, 'Failed to load git commit');
+  }
+
+  async readFileSnapshot({ hash, path } = {}) {
+    const params = createSearchParams({ hash, path });
+    const response = await fetch(resolveApiUrl(`/git/file-snapshot?${params.toString()}`));
+    return parseJsonResponse(response, 'Failed to load historical file preview');
+  }
+
+  async stageFile({ path, requestId = null } = {}) {
+    return this.#postJson('/git/stage', { path }, { requestId, fallbackError: 'Failed to stage file' });
+  }
+
+  async unstageFile({ path, requestId = null } = {}) {
+    return this.#postJson('/git/unstage', { path }, { requestId, fallbackError: 'Failed to unstage file' });
+  }
+
+  async pushBranch({ requestId = null } = {}) {
+    return this.#postJson('/git/push', {}, { requestId, fallbackError: 'Failed to push branch' });
+  }
+
+  async pullBranch({ requestId = null } = {}) {
+    return this.#postJson('/git/pull', {}, { requestId, fallbackError: 'Failed to pull branch' });
+  }
+
+  async resetFile({ path, requestId = null } = {}) {
+    return this.#postJson('/git/reset-file', { path }, { requestId, fallbackError: 'Failed to reset file' });
+  }
+
+  async commit({ message, requestId = null } = {}) {
+    return this.#postJson('/git/commit', { message }, { requestId, fallbackError: 'Failed to commit staged changes' });
+  }
+
+  async #postJson(path, payload, { fallbackError, requestId = null } = {}) {
+    const response = await fetch(resolveApiUrl(path), {
+      body: JSON.stringify(payload),
+      headers: createRequestHeaders(requestId, { 'Content-Type': 'application/json' }),
+      method: 'POST',
+    });
+    return parseJsonResponse(response, fallbackError);
+  }
+}
+
+export const gitApiClient = new GitApiClient();

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

@@ -0,0 +1,21 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+
+export class PlantUmlApiClient {
+  async renderSvg(source) {
+    const response = await fetch(resolveApiUrl('/plantuml/render'), {
+      body: JSON.stringify({ source }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    const data = await response.json().catch(() => null);
+    if (!response.ok || !data?.ok || typeof data.svg !== 'string') {
+      throw new Error(data?.error || 'Failed to render PlantUML');
+    }
+
+    return data.svg;
+  }
+}
+
+export const plantUmlApiClient = new PlantUmlApiClient();

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

@@ -4,6 +4,39 @@ function encodeHeaderMetadata(value) {
   return encodeURIComponent(String(value ?? ''));
 }
 
+function getPathLeaf(pathValue) {
+  return String(pathValue ?? '')
+    .replace(/\/+$/u, '')
+    .split('/')
+    .filter(Boolean)
+    .pop() || '';
+}
+
+function downloadBlob(blob, fileName) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+function parseDownloadFileName(contentDisposition = '', fallbackName = 'download') {
+  const utfMatch = String(contentDisposition).match(/filename\*=UTF-8''([^;]+)/iu);
+  if (utfMatch) {
+    try {
+      return decodeURIComponent(utfMatch[1]);
+    } catch {
+      return fallbackName;
+    }
+  }
+
+  const asciiMatch = String(contentDisposition).match(/filename="([^"]+)"/iu);
+  return asciiMatch?.[1] || fallbackName;
+}
+
 function createRequestHeaders(requestId, headers = {}) {
   const nextHeaders = { ...headers };
   if (requestId) {
@@ -25,6 +58,24 @@ async function parseApiResponse(response, fallbackError) {
   return data;
 }
 
+async function triggerDownload(url, {
+  fallbackError,
+  fallbackFileName,
+} = {}) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    const payload = await response.json().catch(() => ({}));
+    throw new Error(payload.error || fallbackError);
+  }
+
+  const blob = await response.blob();
+  downloadBlob(
+    blob,
+    parseDownloadFileName(response.headers.get('content-disposition') || '', fallbackFileName),
+  );
+  return response;
+}
+
 export class VaultApiClient {
   async readTree() {
     const response = await fetch(resolveApiUrl('/files'));
@@ -36,6 +87,60 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async queryBase({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/query'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to query base');
+  }
+
+  async exportBaseCsv({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/export'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({}));
+      throw new Error(payload.error || 'Failed to export base CSV');
+    }
+
+    return {
+      blob: await response.blob(),
+      contentDisposition: response.headers.get('content-disposition') || '',
+    };
+  }
+
   async createFile({ content, path, requestId = null }) {
     const response = await fetch(resolveApiUrl('/file'), {
       body: JSON.stringify({ content, path }),
@@ -116,6 +221,22 @@ export class VaultApiClient {
     });
     return parseApiResponse(response, 'Failed to upload image');
   }
+
+  async downloadFile(path) {
+    const fallbackFileName = getPathLeaf(path) || 'download';
+    return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {
+      fallbackError: 'Failed to download file',
+      fallbackFileName,
+    });
+  }
+
+  async downloadDirectory(path) {
+    const directoryName = getPathLeaf(path) || 'vault';
+    return triggerDownload(resolveApiUrl(`/download/directory?path=${encodeURIComponent(path)}`), {
+      fallbackError: 'Failed to download folder',
+      fallbackFileName: `${directoryName}.zip`,
+    });
+  }
 }
 
 export const vaultApiClient = new VaultApiClient();

package/src/client/presentation/app-shell-template.js

@@ -378,6 +378,18 @@ export function appShellTemplate() {
               <div class="pane-header">
                 <span class="pane-label">Preview</span>
                 <div class="pane-header-actions">
+                  <div id="backlinksHeaderPanel" class="backlinks-panel backlinks-panel-header hidden" data-backlinks-variant="header">
+                    <button type="button" class="backlinks-header" aria-expanded="false">
+                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="9 18 15 12 9 6"></polyline>
+                      </svg>
+                      <span class="backlinks-toggle">0 Linked Mentions</span>
+                      <span class="backlinks-count"></span>
+                    </button>
+                    <div class="backlinks-body" aria-hidden="true" inert>
+                      <div class="backlinks-list"></div>
+                    </div>
+                  </div>
                   <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>

package/src/client/presentation/backlinks-panel.js

@@ -1,5 +1,5 @@
+import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 /**
  * BacklinksPanel — renders "Linked Mentions" for the current file.
@@ -10,25 +10,31 @@ import { resolveApiUrl } from '../domain/runtime-paths.js';
 export class BacklinksPanel {
   constructor({
     documentRef = document,
+    headerPanelElement = null,
     inlinePanelElement = null,
+    loadBacklinks = null,
     onFileSelect,
     panelElement,
   }) {
     this.documentRef = documentRef;
+    this.headerPanel = headerPanelElement;
     this.panelRoot = panelElement;
     this.inlinePanel = inlinePanelElement;
+    this.loadBacklinks = loadBacklinks;
     this.onFileSelect = onFileSelect;
 
     this._expanded = false;
     this._currentFile = null;
+    this._displayMode = 'dock';
     this._fetchController = null;
     this._backlinks = [];
     this._pendingOutsidePointer = null;
 
     const desktopPanel = this.panelRoot?.querySelector('[data-backlinks-variant="dock"]') ?? this.panelRoot;
     this.panels = [
-      this._createPanelRef(desktopPanel),
-      this._createPanelRef(this.inlinePanel),
+      this._createPanelRef(desktopPanel, this.panelRoot),
+      this._createPanelRef(this.headerPanel, this.headerPanel),
+      this._createPanelRef(this.inlinePanel, this.inlinePanel),
     ].filter(Boolean);
 
     this.handleDocumentPointerDown = (event) => {
@@ -127,15 +133,11 @@ export class BacklinksPanel {
     this._fetchController = new AbortController();
 
     try {
-      const response = await fetch(
-        resolveApiUrl(`/backlinks?file=${encodeURIComponent(filePath)}`),
-        { signal: this._fetchController.signal },
-      );
-      const data = await response.json();
-
+      const backlinks = await this.loadBacklinks(filePath, {
+        signal: this._fetchController.signal,
+      });
       if (this._currentFile !== filePath) return;
-
-      this._backlinks = data.backlinks ?? [];
+      this._backlinks = backlinks;
     } catch (error) {
       if (error.name === 'AbortError') return;
       console.warn('[backlinks] Failed to load:', error.message);
@@ -145,6 +147,18 @@ export class BacklinksPanel {
     this._render();
   }
 
+  setDisplayMode(mode = 'dock') {
+    const normalizedMode = mode === 'header' ? 'header' : 'dock';
+    if (this._displayMode === normalizedMode) {
+      return;
+    }
+
+    this._displayMode = normalizedMode;
+    this._expanded = false;
+    this._pendingOutsidePointer = null;
+    this._render();
+  }
+
   clear() {
     this._currentFile = null;
     this._backlinks = [];
@@ -162,7 +176,7 @@ export class BacklinksPanel {
     this._applyExpandState();
   }
 
-  _createPanelRef(panel) {
+  _createPanelRef(panel, root = panel) {
     if (!panel) {
       return null;
     }
@@ -174,6 +188,7 @@ export class BacklinksPanel {
       countBadge: panel.querySelector('.backlinks-count'),
       body: panel.querySelector('.backlinks-body'),
       list: panel.querySelector('.backlinks-list'),
+      root,
     };
   }
 
@@ -182,19 +197,19 @@ export class BacklinksPanel {
     const label = count === 1 ? 'Linked Mention' : 'Linked Mentions';
     const shouldShow = Boolean(this._currentFile) && count > 0;
 
-    this.panelRoot?.classList?.toggle('hidden', !shouldShow);
-    this.inlinePanel?.classList?.toggle('hidden', !shouldShow);
-
     if (!shouldShow) {
       this._expanded = false;
     }
 
     this.panels.forEach((refs) => {
+      const shouldShowPanel = shouldShow && this._shouldShowPanel(refs);
+
+      refs.root?.classList?.toggle?.('hidden', !shouldShowPanel);
       refs.countBadge.textContent = shouldShow ? String(count) : '';
       refs.toggle.textContent = label;
-      refs.header?.classList.toggle('backlinks-header-empty', !shouldShow);
+      refs.header?.classList.toggle('backlinks-header-empty', !shouldShowPanel);
 
-      if (!shouldShow) {
+      if (!shouldShowPanel) {
         refs.list.innerHTML = '';
       } else {
         this._renderList(refs.list);
@@ -204,6 +219,15 @@ export class BacklinksPanel {
     this._applyExpandState();
   }
 
+  _shouldShowPanel(refs) {
+    const variant = refs.panel?.getAttribute?.('data-backlinks-variant') ?? '';
+    return (
+      variant === 'header'
+        ? this._displayMode === 'header'
+        : (variant === 'dock' ? this._displayMode === 'dock' : true)
+    );
+  }
+
   _renderList(listElement) {
     if (!listElement) return;
     listElement.innerHTML = '';
@@ -221,7 +245,7 @@ export class BacklinksPanel {
   }
 
   _createBacklinkItem(backlink) {
-    const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
+    const fileName = stripVaultFileExtension(backlink.file.split('/').pop());
     const dirPath = backlink.file.includes('/')
       ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
       : '';
@@ -264,9 +288,8 @@ export class BacklinksPanel {
   }
 
   _applyExpandState() {
-    const expanded = this._expanded && this._backlinks.length > 0;
-
     this.panels.forEach((refs) => {
+      const expanded = this._expanded && this._backlinks.length > 0 && this._shouldShowPanel(refs);
       refs.panel.classList.toggle('expanded', expanded);
       refs.header?.setAttribute('aria-expanded', String(expanded));
       refs.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));