collabmd 0.1.40 → 0.1.41

package/src/client/bootstrap/lazy-controller-feature.js

@@ -0,0 +1,434 @@
+function getPathLeaf(filePath = '') {
+  return String(filePath ?? '').split('/').filter(Boolean).pop() || String(filePath ?? '') || 'File';
+}
+
+function createLazyControllerProxy({
+  createController,
+  fallback = {},
+  loadController,
+  onControllerReady = null,
+  shouldLoad = () => true,
+}) {
+  let controller = null;
+  let controllerPromise = null;
+
+  const ensure = async () => {
+    if (controller) {
+      return controller;
+    }
+    if (!controllerPromise) {
+      controllerPromise = loadController()
+        .then((ControllerClass) => {
+          controller = createController(ControllerClass);
+          onControllerReady?.(controller);
+          return controller;
+        })
+        .catch((error) => {
+          controllerPromise = null;
+          throw error;
+        });
+    }
+    return controllerPromise;
+  };
+
+  const proxy = new Proxy({}, {
+    get(_target, prop) {
+      if (prop === 'then' || typeof prop !== 'string') {
+        return undefined;
+      }
+      if (prop === 'ensure') {
+        return ensure;
+      }
+      if (prop === 'current') {
+        return controller;
+      }
+      if (controller && prop in controller) {
+        const value = controller[prop];
+        return typeof value === 'function' ? value.bind(controller) : value;
+      }
+      if (Object.hasOwn(fallback, prop)) {
+        const value = fallback[prop];
+        return typeof value === 'function' ? value.bind(proxy) : value;
+      }
+      return (...args) => {
+        if (!shouldLoad(prop, args)) {
+          return undefined;
+        }
+        return ensure().then((resolvedController) => {
+          const value = resolvedController[prop];
+          return typeof value === 'function' ? value.apply(resolvedController, args) : value;
+        });
+      };
+    },
+  });
+
+  return proxy;
+}
+
+function hasPreviewSelector(previewElement, selector) {
+  return Boolean(previewElement?.querySelector?.(selector));
+}
+
+export const lazyControllerFeature = {
+  reportLazyControllerError(label, error) {
+    console.error(`[lazy-controller] Failed to load ${label}.`, error);
+    this.toastController?.show?.(`Failed to load ${label}. Try again.`, {
+      dismissible: true,
+    });
+  },
+
+  loadBasesPreviewController() {
+    return import('../presentation/bases-preview-controller.js')
+      .then((module) => module.BasesPreviewController);
+  },
+
+  loadDrawioEmbedController() {
+    return import('../presentation/drawio-embed-controller.js')
+      .then((module) => module.DrawioEmbedController);
+  },
+
+  loadExcalidrawEmbedController() {
+    return import('../presentation/excalidraw-embed-controller.js')
+      .then((module) => module.ExcalidrawEmbedController);
+  },
+
+  loadGitPanelController() {
+    return import('../presentation/git-panel-controller.js')
+      .then((module) => module.GitPanelController);
+  },
+
+  loadGitDiffViewController() {
+    return import('../presentation/git-diff-view-controller.js')
+      .then((module) => module.GitDiffViewController);
+  },
+
+  loadFileHistoryViewController() {
+    return import('../presentation/file-history-view-controller.js')
+      .then((module) => module.FileHistoryViewController);
+  },
+
+  createLazyBasesPreviewController() {
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (BasesPreviewController) => new BasesPreviewController({
+        getActiveFilePath: () => this.currentFilePath,
+        getSession: () => this.session,
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        previewElement: this.elements.previewContent,
+        replaceBaseSource: ({ path, source }) => {
+          if (path && path === this.currentFilePath) {
+            this.session?.replaceText?.(source);
+          }
+        },
+        toastController: this.toastController,
+        vaultApiClient: this.vaultApiClient,
+      }),
+      fallback: {
+        destroy: () => { },
+        reconcileEmbeds: (previewElement = this.elements.previewContent) => {
+          if (!hasPreviewSelector(previewElement, '.bases-embed-placeholder[data-base-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => controller.reconcileEmbeds(previewElement))
+            .catch((error) => this.reportLazyControllerError('Bases preview', error));
+        },
+        renderStandalone: async (payload) => {
+          const controller = await proxy.ensure();
+          return controller.renderStandalone(payload);
+        },
+      },
+      loadController: () => this.loadBasesPreviewController(),
+      shouldLoad: (methodName) => methodName === 'renderStandalone',
+    });
+    return proxy;
+  },
+
+  createLazyDrawioEmbedController() {
+    const state = {
+      hydrationPaused: false,
+      theme: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (DrawioEmbedController) => new DrawioEmbedController({
+        getLocalUser: () => this.lobby.getLocalUser(),
+        getTheme: () => this.themeController.getTheme(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onOpenTextFile: (filePath) => filePath && this.navigation.navigateToFile(filePath, { drawioMode: 'text' }),
+        onToggleQuickSwitcher: () => {
+          void this.toggleQuickSwitcher();
+        },
+        previewContainer: this.elements.previewContainer,
+        previewElement: this.elements.previewContent,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        destroy: () => { },
+        detachForCommit: () => { },
+        hydrateVisibleEmbeds: () => { },
+        reconcileEmbeds: (previewElement = this.elements.previewContent) => {
+          if (!hasPreviewSelector(previewElement, '.drawio-embed-placeholder[data-drawio-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => {
+              controller.reconcileEmbeds(previewElement);
+              controller.hydrateVisibleEmbeds();
+              controller.syncLayout();
+            })
+            .catch((error) => this.reportLazyControllerError('Draw.io preview', error));
+        },
+        setHydrationPaused: (paused) => {
+          state.hydrationPaused = Boolean(paused);
+        },
+        syncLayout: () => { },
+        updateLocalUser: () => { },
+        updateTheme: (theme) => {
+          state.theme = theme;
+        },
+      },
+      loadController: () => this.loadDrawioEmbedController(),
+      onControllerReady: (controller) => {
+        controller.setHydrationPaused(state.hydrationPaused);
+        if (state.theme) {
+          controller.updateTheme(state.theme);
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyExcalidrawEmbedController() {
+    const state = {
+      hydrationPaused: false,
+      localUser: null,
+      theme: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (ExcalidrawEmbedController) => new ExcalidrawEmbedController({
+        getLocalUser: () => this.lobby.getLocalUser(),
+        getTheme: () => this.themeController.getTheme(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onToggleQuickSwitcher: () => {
+          void this.toggleQuickSwitcher();
+        },
+        previewContainer: this.elements.previewContainer,
+        previewElement: this.elements.previewContent,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        destroy: () => { },
+        detachForCommit: () => { },
+        hydrateVisibleEmbeds: () => { },
+        prepareFileDisconnect: async () => false,
+        reconcileEmbeds: (previewElement = this.elements.previewContent, options = {}) => {
+          if (!hasPreviewSelector(previewElement, '.excalidraw-embed-placeholder[data-embed-key]')) {
+            return;
+          }
+          void proxy.ensure()
+            .then((controller) => {
+              controller.reconcileEmbeds(previewElement, options);
+              controller.hydrateVisibleEmbeds();
+              controller.syncLayout();
+            })
+            .catch((error) => this.reportLazyControllerError('Excalidraw preview', error));
+        },
+        setHydrationPaused: (paused) => {
+          state.hydrationPaused = Boolean(paused);
+        },
+        syncLayout: () => { },
+        updateLocalUser: (user) => {
+          state.localUser = user;
+        },
+        updateTheme: (theme) => {
+          state.theme = theme;
+        },
+      },
+      loadController: () => this.loadExcalidrawEmbedController(),
+      onControllerReady: (controller) => {
+        controller.setHydrationPaused(state.hydrationPaused);
+        if (state.theme) {
+          controller.updateTheme(state.theme);
+        }
+        if (state.localUser) {
+          controller.updateLocalUser(state.localUser);
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyGitPanelController() {
+    const state = {
+      active: false,
+      mode: 'changes',
+      selection: {},
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (GitPanelController) => new GitPanelController({
+        enabled: this.runtimeConfig.gitEnabled !== false,
+        gitApiClient: this.gitApiClient,
+        onCommitStaged: () => this.openGitCommitDialog(),
+        onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onPullBranch: () => this.pullGitBranch(),
+        onPushBranch: () => this.pushGitBranch(),
+        onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
+        onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
+        onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
+        onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
+        onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+        onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+        onViewAllDiff: () => this.handleGitDiffSelection(null, { closeSidebarOnMobile: true, scope: 'all' }),
+        searchInput: this.elements.gitSearchInput,
+        toastController: this.toastController,
+      }),
+      fallback: {
+        initialize: () => { },
+        refresh: async (options) => {
+          const controller = await proxy.ensure();
+          return controller.refresh(options);
+        },
+        setActive: (active) => {
+          state.active = Boolean(active);
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        setMode: (mode) => {
+          state.mode = mode;
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        setSelection: (selection = {}) => {
+          state.selection = selection;
+          if (state.active) {
+            void proxy.ensure().catch((error) => this.reportLazyControllerError('Git panel', error));
+          }
+        },
+        status: null,
+      },
+      loadController: () => this.loadGitPanelController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+        void controller.setMode(state.mode);
+        controller.setSelection(state.selection);
+        controller.setActive(state.active);
+        if (state.active) {
+          void controller.refresh({ force: true });
+        }
+      },
+    });
+    return proxy;
+  },
+
+  createLazyGitDiffViewController() {
+    const state = {
+      repoStatus: null,
+    };
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (GitDiffViewController) => new GitDiffViewController({
+        gitApiClient: this.gitApiClient,
+        onBackToHistory: ({ historyFilePath } = {}) => {
+          if (historyFilePath) {
+            this.navigation.navigateToGitFileHistory({ filePath: historyFilePath });
+            return;
+          }
+          this.navigation.navigateToGitHistory();
+        },
+        onCommitStaged: () => this.openGitCommitDialog(),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+        onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+        toastController: this.toastController,
+      }),
+      fallback: {
+        getToolbarTitle: ({ commitHash = null, filePath = null, path = null, scope = 'all', source = 'workspace' } = {}) => {
+          if (source === 'commit') {
+            if (path) return getPathLeaf(path);
+            return commitHash ? `Commit ${String(commitHash).slice(0, 7)}` : 'Commit Diff';
+          }
+          if (filePath) return getPathLeaf(filePath);
+          if (scope === 'staged') return 'Staged Changes';
+          if (scope === 'working-tree') return 'Working Tree Changes';
+          return 'All Changes';
+        },
+        hide: () => { },
+        initialize: () => { },
+        setRepoStatus: (status) => {
+          state.repoStatus = status;
+        },
+      },
+      loadController: () => this.loadGitDiffViewController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+        controller.setRepoStatus(state.repoStatus);
+      },
+    });
+    return proxy;
+  },
+
+  createLazyFileHistoryViewController() {
+    let proxy;
+    proxy = createLazyControllerProxy({
+      createController: (FileHistoryViewController) => new FileHistoryViewController({
+        diffRenderer: this.gitDiffView,
+        gitApiClient: this.gitApiClient,
+        onOpenCommitDiff: (hash, { historyFilePath, path }) => this.handleGitCommitSelection(hash, {
+          closeSidebarOnMobile: false,
+          historyFilePath,
+          path,
+        }),
+        onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+        onOpenPreview: ({ hash, path, currentFilePath }) => this.handleGitFilePreviewSelection({
+          hash,
+          path,
+          currentFilePath,
+        }),
+        onOpenWorkspaceDiff: (filePath) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: false, scope: 'all' }),
+        toastController: this.toastController,
+      }),
+      fallback: {
+        hide: () => { },
+        initialize: () => { },
+      },
+      loadController: () => this.loadFileHistoryViewController(),
+      onControllerReady: (controller) => {
+        controller.initialize();
+      },
+    });
+    return proxy;
+  },
+
+  async ensureGitControllers() {
+    await Promise.all([
+      this.gitPanel.ensure(),
+      this.gitDiffView.ensure(),
+      this.fileHistoryView.ensure(),
+    ]);
+  },
+
+  scheduleGitControllerPrewarm({ timeout = 2500 } = {}) {
+    if (this.runtimeConfig.gitEnabled === false || this._gitControllerPrewarmHandle) {
+      return;
+    }
+
+    const runPrewarm = () => {
+      this._gitControllerPrewarmHandle = null;
+      void this.gitPanel.ensure()
+        .then((controller) => controller.refresh({ force: true }))
+        .catch((error) => this.reportLazyControllerError('Git tools', error));
+    };
+
+    if (typeof window.requestIdleCallback === 'function') {
+      this._gitControllerPrewarmHandle = window.requestIdleCallback(runPrewarm, { timeout });
+      return;
+    }
+
+    this._gitControllerPrewarmHandle = window.setTimeout(runPrewarm, 0);
+  },
+};

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

@@ -82,6 +82,11 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to load file tree');
   }
 
+  async readCommentOverview() {
+    const response = await fetch(resolveApiUrl('/comments/overview'));
+    return parseApiResponse(response, 'Failed to load comment overview');
+  }
+
   async readFile(path) {
     const response = await fetch(resolveApiUrl(`/file?path=${encodeURIComponent(path)}`));
     return parseApiResponse(response, 'Failed to read file');

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

@@ -52,21 +52,33 @@ export function appShellTemplate() {
             </button>
           </div>
         </div>
-        <div class="ui-nav-tabs hidden" id="sidebarTabs">
+        <div class="ui-nav-tabs" id="sidebarTabs">
           <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
-              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
-            </svg>
-            Files
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Files</span>
+          </button>
+          <button class="ui-nav-tab" id="commentsSidebarTab" type="button">
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <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>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Comments</span>
           </button>
           <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
-            <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">
-              <circle cx="18" cy="18" r="3"></circle>
-              <circle cx="6" cy="6" r="3"></circle>
-              <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
-              <path d="M6 9v12"></path>
-            </svg>
-            Git
+            <span class="ui-nav-tab-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="18" cy="18" r="3"></circle>
+                <circle cx="6" cy="6" r="3"></circle>
+                <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+                <path d="M6 9v12"></path>
+              </svg>
+            </span>
+            <span class="ui-nav-tab-label">Git</span>
           </button>
         </div>
         <div class="sidebar-search" id="fileSearch">
@@ -92,6 +104,7 @@ export function appShellTemplate() {
           >
         </div>
         <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
+        <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
         <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
       </aside>
 

package/src/client/presentation/bases-preview-controller.js

@@ -785,7 +785,7 @@ function syncFilterValueCombobox(entry, result, path, { fallbackToFullRender = t
 
   if (!input || !combobox || !rule || rule.type !== 'rule' || typeof input.insertAdjacentHTML !== 'function') {
     if (fallbackToFullRender) {
-      updateShellContent(entry, result);
+      updateShellPanel(entry, result);
     }
     return false;
   }
@@ -1080,7 +1080,14 @@ function markPlaceholderHydrated(placeholder) {
   placeholder.classList.remove('diagram-preview-shell');
 }
 
-function updateShellContent(entry, result) {
+function updateShellContent(entry, result, {
+  actions = true,
+  body = true,
+  meta = true,
+  panel = true,
+  summary = true,
+  tabs = true,
+} = {}) {
   const shell = findShellElement(entry);
   if (!shell?.querySelector) {
     entry.placeholder.innerHTML = renderShellHtml(result, entry);
@@ -1088,35 +1095,35 @@ function updateShellContent(entry, result) {
     return;
   }
 
-  const tabs = shell.querySelector('[data-base-tabs]');
-  if (tabs) {
-    tabs.innerHTML = renderViewTabs(result);
+  const tabsSlot = shell.querySelector('[data-base-tabs]');
+  if (tabs && tabsSlot) {
+    tabsSlot.innerHTML = renderViewTabs(result);
   }
 
-  const meta = shell.querySelector('[data-base-meta]');
-  if (meta) {
-    meta.textContent = `${String(result.totalRows ?? 0)} results`;
+  const metaSlot = shell.querySelector('[data-base-meta]');
+  if (meta && metaSlot) {
+    metaSlot.textContent = `${String(result.totalRows ?? 0)} results`;
   }
 
   const actionSlot = shell.querySelector('[data-base-action-slot]');
-  if (actionSlot) {
+  if (actions && actionSlot) {
     actionSlot.innerHTML = renderActionButtons(result, entry);
   }
 
   const panelSlot = shell.querySelector('[data-base-panel-slot]');
-  if (panelSlot) {
+  if (panel && panelSlot) {
     const panelState = capturePanelState(panelSlot);
     panelSlot.innerHTML = renderPanel(result, entry);
     restorePanelState(panelSlot, panelState);
   }
 
   const summarySlot = shell.querySelector('[data-base-summary-slot]');
-  if (summarySlot) {
+  if (summary && summarySlot) {
     summarySlot.innerHTML = renderSummaryBar(result.summaries);
   }
 
   const content = shell.querySelector('[data-base-content]');
-  if (content) {
+  if (body && content) {
     content.innerHTML = renderViewBody(result);
   }
 
@@ -1126,6 +1133,16 @@ function updateShellContent(entry, result) {
   }
 }
 
+function updateShellPanel(entry, result) {
+  updateShellContent(entry, result, {
+    actions: false,
+    body: false,
+    meta: false,
+    summary: false,
+    tabs: false,
+  });
+}
+
 function downloadBlob(blob, fileName = 'base.csv') {
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement('a');
@@ -1227,7 +1244,7 @@ export class BasesPreviewController {
         const panel = panelButton.dataset.basePanel || '';
         entry.ui.openPanel = entry.ui.openPanel === panel ? '' : panel;
         entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1289,7 +1306,7 @@ export class BasesPreviewController {
           entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
           entry.ui.builderFilter = null;
         }
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1363,7 +1380,7 @@ export class BasesPreviewController {
         }
 
         entry.ui.propertySearch = propertiesSearch.value || '';
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1740,7 +1757,7 @@ export class BasesPreviewController {
           }
         });
         if (!synced) {
-          updateShellContent(entry, entry.result);
+          updateShellPanel(entry, entry.result);
         }
       }
     } catch {