@yancyyu/openhermit 1.5.8

package/src/renderer/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,363 @@
+/**
+ * useKeyboardShortcuts - Global keyboard shortcut handler
+ * Handles app-wide keyboard shortcuts for tab management, navigation, and pane management.
+ *
+ * Pane-scoped: Tab cycling (Ctrl+Tab, Cmd+1-9, Cmd+Shift+[/]) operates within the focused pane.
+ * Pane shortcuts: Cmd+Option+1-4 (focus pane), Cmd+\ (split right), Cmd+Option+W (close pane).
+ */
+
+import { useEffect } from 'react';
+
+import { physicalKey } from '@renderer/utils/keyboardUtils';
+import { createLogger } from '@shared/utils/logger';
+import { useShallow } from 'zustand/react/shallow';
+
+import { useStore } from '../store';
+
+const logger = createLogger('Hook:KeyboardShortcuts');
+
+export function isEditableShortcutTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+
+  const editableElement = target.closest(
+    'input, textarea, select, [role="textbox"], [contenteditable]'
+  );
+  if (!editableElement) {
+    return false;
+  }
+
+  const contentEditable = editableElement.getAttribute('contenteditable');
+  return contentEditable?.toLowerCase() !== 'false';
+}
+
+export function useKeyboardShortcuts(): void {
+  const {
+    openTabs,
+    activeTabId,
+    selectedTabIds,
+    openDashboard,
+    closeTab,
+    closeAllTabs,
+    closeTabs,
+    setActiveTab,
+    showSearch,
+    getActiveTab,
+    selectedProjectId,
+    selectedSessionId,
+    fetchSessionDetail,
+    fetchSessions,
+    openCommandPalette,
+    openSettingsTab,
+    toggleSidebar,
+    paneLayout,
+    focusPane,
+    splitPane,
+    closePane,
+    availableContexts,
+    activeContextId,
+    switchContext,
+    isContextSwitching,
+    editorOpen,
+  } = useStore(
+    useShallow((s) => ({
+      openTabs: s.openTabs,
+      activeTabId: s.activeTabId,
+      selectedTabIds: s.selectedTabIds,
+      openDashboard: s.openDashboard,
+      closeTab: s.closeTab,
+      closeAllTabs: s.closeAllTabs,
+      closeTabs: s.closeTabs,
+      setActiveTab: s.setActiveTab,
+      showSearch: s.showSearch,
+      getActiveTab: s.getActiveTab,
+      selectedProjectId: s.selectedProjectId,
+      selectedSessionId: s.selectedSessionId,
+      fetchSessionDetail: s.fetchSessionDetail,
+      fetchSessions: s.fetchSessions,
+      openCommandPalette: s.openCommandPalette,
+      openSettingsTab: s.openSettingsTab,
+      toggleSidebar: s.toggleSidebar,
+      paneLayout: s.paneLayout,
+      focusPane: s.focusPane,
+      splitPane: s.splitPane,
+      closePane: s.closePane,
+      availableContexts: s.availableContexts,
+      activeContextId: s.activeContextId,
+      switchContext: s.switchContext,
+      isContextSwitching: s.isContextSwitching,
+      editorOpen: s.editorProjectPath !== null,
+    }))
+  );
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (isEditableShortcutTarget(event.target)) {
+        return;
+      }
+
+      // Check if Cmd (macOS) or Ctrl (Windows/Linux) is pressed
+      const isMod = event.metaKey || event.ctrlKey;
+      // Layout-independent key (uses event.code for letters/symbols)
+      const key = physicalKey(event);
+
+      // Editor scope guard: when the editor overlay is open, these shortcuts are
+      // handled by useEditorKeyboardShortcuts — yield control to avoid conflicts.
+      if (editorOpen) {
+        const isConflicting =
+          // Ctrl+Tab — editor tab cycling
+          (event.ctrlKey && key === 'Tab') ||
+          // Cmd+W — editor close tab
+          (isMod && key === 'w' && !event.altKey && !event.shiftKey) ||
+          // Cmd+B — editor sidebar toggle
+          (isMod && key === 'b') ||
+          // Cmd+F — editor find in file (CM6)
+          (isMod && key === 'f') ||
+          // Cmd+Shift+[ / ] — editor tab switching
+          (isMod && event.shiftKey && (key === '[' || key === ']'));
+
+        if (isConflicting) return;
+      }
+
+      // Ctrl+Tab / Ctrl+Shift+Tab: Switch tabs within focused pane (universal shortcut)
+      if (event.ctrlKey && key === 'Tab') {
+        event.preventDefault();
+        const currentIndex = openTabs.findIndex((t) => t.id === activeTabId);
+
+        if (event.shiftKey) {
+          // Ctrl+Shift+Tab: Previous tab (with wrap-around)
+          if (currentIndex > 0) {
+            setActiveTab(openTabs[currentIndex - 1].id);
+          } else if (openTabs.length > 0) {
+            // Wrap to last tab
+            setActiveTab(openTabs[openTabs.length - 1].id);
+          }
+        } else {
+          // Ctrl+Tab: Next tab (with wrap-around)
+          if (currentIndex !== -1 && currentIndex < openTabs.length - 1) {
+            setActiveTab(openTabs[currentIndex + 1].id);
+          } else if (openTabs.length > 0) {
+            // Wrap to first tab
+            setActiveTab(openTabs[0].id);
+          }
+        }
+        return;
+      }
+
+      if (!isMod) return;
+
+      // --- Pane management shortcuts (Cmd+Option) ---
+
+      // Cmd+Option+1-4: Focus pane by index
+      if (event.altKey && !event.shiftKey) {
+        const numKey = parseInt(key);
+        if (numKey >= 1 && numKey <= 4) {
+          event.preventDefault();
+          const targetPane = paneLayout.panes[numKey - 1];
+          if (targetPane) {
+            focusPane(targetPane.id);
+          }
+          return;
+        }
+
+        // Cmd+Option+W: Close current pane
+        if (key === 'w') {
+          event.preventDefault();
+          if (paneLayout.panes.length > 1) {
+            closePane(paneLayout.focusedPaneId);
+          }
+          return;
+        }
+      }
+
+      // Cmd+\: Split right with current tab
+      if (key === '\\' && !event.altKey && !event.shiftKey) {
+        event.preventDefault();
+        if (activeTabId) {
+          splitPane(paneLayout.focusedPaneId, activeTabId, 'right');
+        }
+        return;
+      }
+
+      // Cmd+T: New tab (Dashboard)
+      if (key === 't') {
+        event.preventDefault();
+        openDashboard();
+        return;
+      }
+
+      // Cmd+Shift+W: Close all tabs
+      if (key === 'w' && event.shiftKey && !event.altKey) {
+        event.preventDefault();
+        closeAllTabs();
+        return;
+      }
+
+      // Cmd+Shift+G: Toggle team graph overlay
+      if (key === 'g' && event.shiftKey && !event.altKey) {
+        event.preventDefault();
+        const activeTab = openTabs.find((t) => t.id === activeTabId);
+        if (activeTab?.type === 'team' && activeTab.teamName) {
+          window.dispatchEvent(
+            new CustomEvent('toggle-team-graph', { detail: { teamName: activeTab.teamName } })
+          );
+        }
+        return;
+      }
+
+      // Cmd+W: Close selected tabs (if multi-selected) or active tab
+      if (key === 'w' && !event.altKey) {
+        event.preventDefault();
+        if (selectedTabIds.length > 0) {
+          closeTabs(selectedTabIds);
+        } else if (activeTabId) {
+          closeTab(activeTabId);
+        }
+        return;
+      }
+
+      // Cmd+[1-9]: Switch to tab by index within focused pane
+      const numKey = parseInt(key);
+      if (numKey >= 1 && numKey <= 9 && !event.altKey) {
+        event.preventDefault();
+        const targetTab = openTabs[numKey - 1];
+        if (targetTab) {
+          setActiveTab(targetTab.id);
+        }
+        return;
+      }
+
+      // Cmd+Shift+]: Next tab within focused pane
+      if (key === ']' && event.shiftKey) {
+        event.preventDefault();
+        const currentIndex = openTabs.findIndex((t) => t.id === activeTabId);
+        if (currentIndex !== -1 && currentIndex < openTabs.length - 1) {
+          setActiveTab(openTabs[currentIndex + 1].id);
+        }
+        return;
+      }
+
+      // Cmd+Shift+[: Previous tab within focused pane
+      if (key === '[' && event.shiftKey) {
+        event.preventDefault();
+        const currentIndex = openTabs.findIndex((t) => t.id === activeTabId);
+        if (currentIndex > 0) {
+          setActiveTab(openTabs[currentIndex - 1].id);
+        }
+        return;
+      }
+
+      // Cmd+Option+Right: Next tab (browser-style) within focused pane
+      if (key === 'ArrowRight' && event.altKey) {
+        event.preventDefault();
+        const currentIndex = openTabs.findIndex((t) => t.id === activeTabId);
+        if (currentIndex !== -1 && currentIndex < openTabs.length - 1) {
+          setActiveTab(openTabs[currentIndex + 1].id);
+        }
+        return;
+      }
+
+      // Cmd+Option+Left: Previous tab (browser-style) within focused pane
+      if (key === 'ArrowLeft' && event.altKey) {
+        event.preventDefault();
+        const currentIndex = openTabs.findIndex((t) => t.id === activeTabId);
+        if (currentIndex > 0) {
+          setActiveTab(openTabs[currentIndex - 1].id);
+        }
+        return;
+      }
+
+      // Cmd+Shift+K: Cycle to next workspace context
+      if (key === 'k' && event.shiftKey) {
+        event.preventDefault();
+        if (!isContextSwitching && availableContexts.length > 1) {
+          const currentIndex = availableContexts.findIndex((c) => c.id === activeContextId);
+          const nextIndex = (currentIndex + 1) % availableContexts.length;
+          void switchContext(availableContexts[nextIndex].id);
+        }
+        return;
+      }
+
+      // Cmd+K: Open command palette for global search
+      if (key === 'k') {
+        event.preventDefault();
+        openCommandPalette();
+        return;
+      }
+
+      // Cmd+,: Open settings (standard macOS shortcut)
+      if (key === ',') {
+        event.preventDefault();
+        openSettingsTab();
+        return;
+      }
+
+      // Cmd+F: Find in session
+      if (key === 'f') {
+        event.preventDefault();
+        const activeTab = getActiveTab();
+        // Only enable search in session views, not dashboard
+        if (activeTab?.type === 'session') {
+          showSearch();
+        }
+        return;
+      }
+
+      // Cmd+O: Open project (placeholder for future implementation)
+      if (key === 'o') {
+        event.preventDefault();
+        logger.debug('Open project shortcut triggered (not yet implemented)');
+        return;
+      }
+
+      // Cmd+R: Refresh current session and sidebar session list
+      if (key === 'r') {
+        event.preventDefault();
+        if (selectedProjectId && selectedSessionId) {
+          void Promise.all([
+            fetchSessionDetail(selectedProjectId, selectedSessionId, activeTabId ?? undefined),
+            fetchSessions(selectedProjectId),
+          ]);
+        }
+        return;
+      }
+
+      // Cmd+B: Toggle sidebar
+      if (key === 'b') {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    openTabs,
+    activeTabId,
+    selectedTabIds,
+    openDashboard,
+    closeTab,
+    closeAllTabs,
+    closeTabs,
+    setActiveTab,
+    showSearch,
+    getActiveTab,
+    selectedProjectId,
+    selectedSessionId,
+    fetchSessionDetail,
+    fetchSessions,
+    openCommandPalette,
+    openSettingsTab,
+    toggleSidebar,
+    paneLayout,
+    focusPane,
+    splitPane,
+    closePane,
+    availableContexts,
+    activeContextId,
+    switchContext,
+    isContextSwitching,
+    editorOpen,
+  ]);
+}

package/src/renderer/hooks/useLazyFileContent.ts

@@ -0,0 +1,150 @@
+import { type RefObject, useCallback, useEffect, useRef } from 'react';
+
+import type { FileChangeWithContent } from '@shared/types';
+
+const MAX_CONCURRENT = 3;
+const PRELOAD_COUNT = 5;
+
+interface UseLazyFileContentOptions {
+  teamName: string;
+  memberName: string | undefined;
+  filePaths: string[];
+  scrollContainerRef: RefObject<HTMLElement | null>;
+  fileContents: Record<string, FileChangeWithContent>;
+  fileContentsLoading: Record<string, boolean>;
+  fetchFileContent: (
+    teamName: string,
+    memberName: string | undefined,
+    filePath: string
+  ) => Promise<void>;
+  enabled: boolean;
+}
+
+interface UseLazyFileContentReturn {
+  registerLazyRef: (filePath: string) => (element: HTMLElement | null) => void;
+}
+
+export function useLazyFileContent(options: UseLazyFileContentOptions): UseLazyFileContentReturn {
+  const { enabled, scrollContainerRef } = options;
+
+  const activeLoads = useRef(new Set<string>());
+  const pendingQueue = useRef<string[]>([]);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const elementRefs = useRef(new Map<string, HTMLElement>());
+
+  // Stable ref to avoid stale closures in observer/processQueue callbacks
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+
+  const shouldLoad = useCallback((filePath: string): boolean => {
+    const opts = optionsRef.current;
+    if (opts.fileContents[filePath]) return false;
+    if (opts.fileContentsLoading[filePath]) return false;
+    if (activeLoads.current.has(filePath)) return false;
+    return true;
+  }, []);
+
+  // Refs for loadFile/processQueue to avoid circular useCallback deps
+  const loadFileRef = useRef<(fp: string) => Promise<void>>(undefined);
+  const processQueueRef = useRef<() => void>(undefined);
+
+  loadFileRef.current = async (filePath: string) => {
+    if (!shouldLoad(filePath)) return;
+    activeLoads.current.add(filePath);
+    try {
+      const opts = optionsRef.current;
+      await opts.fetchFileContent(opts.teamName, opts.memberName, filePath);
+    } finally {
+      activeLoads.current.delete(filePath);
+      processQueueRef.current?.();
+    }
+  };
+
+  processQueueRef.current = () => {
+    while (activeLoads.current.size < MAX_CONCURRENT && pendingQueue.current.length > 0) {
+      const nextPath = pendingQueue.current.shift()!;
+      if (shouldLoad(nextPath)) {
+        void loadFileRef.current?.(nextPath);
+      }
+    }
+  };
+
+  const enqueueLoad = useCallback(
+    (filePath: string) => {
+      if (!shouldLoad(filePath)) return;
+
+      if (activeLoads.current.size < MAX_CONCURRENT) {
+        void loadFileRef.current?.(filePath);
+      } else {
+        if (!pendingQueue.current.includes(filePath)) {
+          pendingQueue.current.push(filePath);
+        }
+      }
+    },
+    [shouldLoad]
+  );
+
+  // Preload first N files on mount
+  useEffect(() => {
+    if (!enabled) return;
+    const toPreload = optionsRef.current.filePaths.slice(0, PRELOAD_COUNT);
+    for (const fp of toPreload) {
+      enqueueLoad(fp);
+    }
+  }, [enabled, enqueueLoad]);
+
+  // IntersectionObserver for lazy loading
+  useEffect(() => {
+    if (!enabled || !scrollContainerRef.current) return;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const filePath = entry.target.getAttribute('data-lazy-file');
+          if (!filePath) continue;
+          enqueueLoad(filePath);
+        }
+      },
+      {
+        root: scrollContainerRef.current,
+        rootMargin: '200% 0px 200% 0px',
+        threshold: 0,
+      }
+    );
+
+    // Observe already mounted elements
+    for (const [, element] of elementRefs.current) {
+      observerRef.current.observe(element);
+    }
+
+    return () => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+    };
+  }, [enabled, scrollContainerRef, enqueueLoad]);
+
+  const registerLazyRef = useCallback((filePath: string) => {
+    return (element: HTMLElement | null) => {
+      const observer = observerRef.current;
+
+      const prev = elementRefs.current.get(filePath);
+      if (prev && observer) {
+        observer.unobserve(prev);
+      }
+      elementRefs.current.delete(filePath);
+
+      if (element) {
+        element.setAttribute('data-lazy-file', filePath);
+        elementRefs.current.set(filePath, element);
+        if (observer) {
+          observer.observe(element);
+        }
+      }
+    };
+  }, []);
+
+  return { registerLazyRef };
+}

package/src/renderer/hooks/useMarkCommentsRead.ts

@@ -0,0 +1,27 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * Provides a stable ref callback for the comments container.
+ *
+ * Previously this hook auto-marked all comments as read on mount via
+ * a useEffect. That behavior has been replaced by viewport-based
+ * tracking (useViewportCommentRead) which only marks comments read
+ * when they are scrolled into view inside the dialog.
+ *
+ * This hook is kept for API compatibility with TaskCommentsSection
+ * (the ref callback is still attached to the container element).
+ */
+export function useMarkCommentsRead(
+  _teamName: string,
+  _taskId: string,
+  _comments: unknown[]
+): (node: HTMLElement | null) => void {
+  const nodeRef = useRef<HTMLElement | null>(null);
+
+  // Stable ref callback (no dependencies — just stores the node)
+  const refCallback = useCallback((node: HTMLElement | null) => {
+    nodeRef.current = node;
+  }, []);
+
+  return refCallback;
+}

package/src/renderer/hooks/useMarkdownScrollSync.ts

@@ -0,0 +1,158 @@
+/**
+ * Proportional scroll synchronization between CodeMirror and a preview pane.
+ *
+ * Uses the fraction-based approach: fraction = scrollTop / (scrollHeight - clientHeight).
+ * Feedback loop prevention via ref-based ignore flags reset with requestAnimationFrame.
+ *
+ * The hook auto-attaches/detaches the CodeMirror scroll listener internally:
+ * - Retry logic handles CodeMirror mount delay (up to 500ms)
+ * - `viewKey` triggers re-attachment when the EditorView changes (e.g. file switch)
+ * - Full cleanup on disable/unmount
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+
+import { editorBridge } from '@renderer/utils/editorBridge';
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/** Max attempts to find CodeMirror scrollDOM before giving up */
+const MAX_ATTACH_ATTEMPTS = 10;
+/** Interval between retry attempts (ms) */
+const ATTACH_RETRY_INTERVAL = 50;
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface UseMarkdownScrollSyncResult {
+  previewScrollRef: React.RefObject<HTMLDivElement | null>;
+  /** Attach to editor scroll container when using a local CodeMirror instance */
+  handleCodeScroll: () => void;
+  /** Attach to preview div's onScroll */
+  handlePreviewScroll: () => void;
+}
+
+interface UseMarkdownScrollSyncOptions {
+  editorScrollRef?: React.RefObject<HTMLElement | null>;
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * Bidirectional scroll sync between CodeMirror and a preview pane.
+ *
+ * @param enabled - Whether sync is active (typically `mode === 'split'`)
+ * @param viewKey - Changes when the underlying EditorView changes (e.g. `activeTabId`).
+ *                  Triggers re-attachment of the code scroll listener.
+ */
+export function useMarkdownScrollSync(
+  enabled: boolean,
+  viewKey?: string | null,
+  options?: UseMarkdownScrollSyncOptions
+): UseMarkdownScrollSyncResult {
+  const previewScrollRef = useRef<HTMLDivElement | null>(null);
+  const ignoreCodeScroll = useRef(false);
+  const ignorePreviewScroll = useRef(false);
+  const codeRafRef = useRef(0);
+  const previewRafRef = useRef(0);
+  const getEditorScrollElement = useCallback(() => {
+    return options?.editorScrollRef?.current ?? editorBridge.getView()?.scrollDOM ?? null;
+  }, [options?.editorScrollRef]);
+
+  // Code → Preview: proportional scroll
+  const handleCodeScroll = useCallback(() => {
+    if (!enabled) return;
+    if (ignoreCodeScroll.current) {
+      ignoreCodeScroll.current = false;
+      return;
+    }
+
+    const scrollDOM = getEditorScrollElement();
+    const preview = previewScrollRef.current;
+    if (!scrollDOM || !preview) return;
+
+    const maxCode = scrollDOM.scrollHeight - scrollDOM.clientHeight;
+    if (maxCode <= 0) return;
+
+    const fraction = scrollDOM.scrollTop / maxCode;
+    const maxPreview = preview.scrollHeight - preview.clientHeight;
+    if (maxPreview <= 0) return;
+
+    cancelAnimationFrame(previewRafRef.current);
+    previewRafRef.current = requestAnimationFrame(() => {
+      ignorePreviewScroll.current = true;
+      preview.scrollTop = fraction * maxPreview;
+    });
+  }, [enabled, getEditorScrollElement]);
+
+  // Preview → Code: proportional scroll
+  const handlePreviewScroll = useCallback(() => {
+    if (!enabled) return;
+    if (ignorePreviewScroll.current) {
+      ignorePreviewScroll.current = false;
+      return;
+    }
+
+    const scrollDOM = getEditorScrollElement();
+    const preview = previewScrollRef.current;
+    if (!scrollDOM || !preview) return;
+
+    const maxPreview = preview.scrollHeight - preview.clientHeight;
+    if (maxPreview <= 0) return;
+
+    const fraction = preview.scrollTop / maxPreview;
+    const maxCode = scrollDOM.scrollHeight - scrollDOM.clientHeight;
+    if (maxCode <= 0) return;
+
+    cancelAnimationFrame(codeRafRef.current);
+    codeRafRef.current = requestAnimationFrame(() => {
+      ignoreCodeScroll.current = true;
+      scrollDOM.scrollTop = fraction * maxCode;
+    });
+  }, [enabled, getEditorScrollElement]);
+
+  // Auto-attach code scroll listener with retry on mount/viewKey change
+  useEffect(() => {
+    if (!enabled) return;
+
+    let scrollCleanup: (() => void) | undefined;
+    let retryTimer: ReturnType<typeof setTimeout>;
+    let attempts = 0;
+
+    const tryAttach = (): void => {
+      const scrollDOM = getEditorScrollElement();
+      if (!scrollDOM) {
+        if (attempts < MAX_ATTACH_ATTEMPTS) {
+          attempts++;
+          retryTimer = setTimeout(tryAttach, ATTACH_RETRY_INTERVAL);
+        }
+        return;
+      }
+
+      scrollDOM.addEventListener('scroll', handleCodeScroll, { passive: true });
+      scrollCleanup = () => {
+        scrollDOM.removeEventListener('scroll', handleCodeScroll);
+      };
+    };
+
+    tryAttach();
+
+    return () => {
+      clearTimeout(retryTimer);
+      scrollCleanup?.();
+      cancelAnimationFrame(codeRafRef.current);
+      cancelAnimationFrame(previewRafRef.current);
+    };
+  }, [enabled, viewKey, handleCodeScroll, getEditorScrollElement]);
+
+  return {
+    previewScrollRef,
+    handleCodeScroll,
+    handlePreviewScroll,
+  };
+}