@yancyyu/openhermit 1.5.8

package/src/renderer/hooks/useTeamSuggestions.ts

@@ -0,0 +1,78 @@
+/**
+ * Hook for providing team @-mention suggestions.
+ *
+ * Returns non-deleted teams (excluding the current one) as MentionSuggestion[]
+ * with online/offline status. Uses the alive list API to determine status.
+ *
+ * The returned list is unfiltered — query filtering is handled downstream
+ * by useMentionDetection inside MentionableTextarea.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { useStore } from '@renderer/store';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { MentionSuggestion } from '@renderer/types/mention';
+
+export interface UseTeamSuggestionsResult {
+  suggestions: MentionSuggestion[];
+  loading: boolean;
+}
+
+/**
+ * Returns team MentionSuggestion[] sorted by online status (online first).
+ *
+ * @param currentTeamName - The current team name to exclude from suggestions
+ */
+export function useTeamSuggestions(currentTeamName: string | null): UseTeamSuggestionsResult {
+  const teams = useStore(useShallow((s) => s.teams));
+  const [aliveTeams, setAliveTeams] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+
+  const fetchAlive = useCallback(async () => {
+    setLoading(true);
+    try {
+      const list = await api.teams.aliveList();
+      setAliveTeams(new Set(list));
+    } catch {
+      // best-effort — treat all as offline on error
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Fetch on mount and when teams list changes
+  useEffect(() => {
+    void fetchAlive();
+  }, [fetchAlive, teams]);
+
+  // Build suggestion list sorted: online first, then offline
+  const suggestions = useMemo<MentionSuggestion[]>(() => {
+    const nonDeleted = teams.filter((t) => !t.deletedAt && t.teamName !== currentTeamName);
+
+    const result: MentionSuggestion[] = nonDeleted.map((t) => {
+      const isOnline = aliveTeams.has(t.teamName);
+      return {
+        id: `team:${t.teamName}`,
+        name: t.displayName || t.teamName,
+        subtitle: isOnline ? 'online' : 'offline',
+        color: t.color,
+        type: 'team' as const,
+        isOnline,
+      };
+    });
+
+    // Sort: online teams first
+    result.sort((a, b) => {
+      if (a.isOnline && !b.isOnline) return -1;
+      if (!a.isOnline && b.isOnline) return 1;
+      return 0;
+    });
+
+    return result;
+  }, [teams, currentTeamName, aliveTeams]);
+
+  return { suggestions, loading };
+}

package/src/renderer/hooks/useTheme.ts

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useShallow } from 'zustand/react/shallow';
+
+import { useStore } from '../store';
+
+type Theme = 'dark' | 'light' | 'system';
+type ResolvedTheme = 'dark' | 'light';
+
+const THEME_CACHE_KEY = 'agent-teams-theme-cache';
+const LEGACY_THEME_CACHE_KEY = 'claude-devtools-theme-cache';
+
+function parseCachedTheme(value: string | null): ResolvedTheme | null {
+  return value === 'light' || value === 'dark' ? value : null;
+}
+
+export function readCachedResolvedTheme(storage: Storage = localStorage): ResolvedTheme | null {
+  try {
+    return (
+      parseCachedTheme(storage.getItem(THEME_CACHE_KEY)) ??
+      parseCachedTheme(storage.getItem(LEGACY_THEME_CACHE_KEY))
+    );
+  } catch {
+    return null;
+  }
+}
+
+export function writeCachedResolvedTheme(
+  resolvedTheme: ResolvedTheme,
+  storage: Storage = localStorage
+): void {
+  try {
+    storage.setItem(THEME_CACHE_KEY, resolvedTheme);
+  } catch {
+    // localStorage may not be available
+  }
+}
+
+/**
+ * Hook to manage theme state and application.
+ * - Fetches theme preference from config on mount
+ * - Listens to system theme changes when set to 'system'
+ * - Applies theme class to document root
+ * - Caches theme in localStorage for flash prevention
+ */
+export function useTheme(): {
+  theme: Theme;
+  resolvedTheme: ResolvedTheme;
+  isDark: boolean;
+  isLight: boolean;
+} {
+  const { appConfig, fetchConfig } = useStore(
+    useShallow((s) => ({
+      appConfig: s.appConfig,
+      fetchConfig: s.fetchConfig,
+    }))
+  );
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() => {
+    // Initialize from cache to prevent flash
+    const cached = readCachedResolvedTheme();
+    if (cached) return cached;
+
+    // No cache — detect system preference for flash-free first launch
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  // Fetch config on mount if not loaded.
+  // The centralized init chain also calls fetchConfig — configLoading guard
+  // in the store action prevents duplicate IPC calls.
+  const configLoading = useStore((s) => s.configLoading);
+  useEffect(() => {
+    if (!appConfig && !configLoading) {
+      void fetchConfig();
+    }
+  }, [appConfig, configLoading, fetchConfig]);
+
+  // Get configured theme
+  const configuredTheme: Theme = appConfig?.general?.theme ?? 'system';
+
+  // Get system theme preference
+  const getSystemTheme = useCallback((): ResolvedTheme => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }, []);
+
+  // Resolve 'system' theme and listen for changes
+  useEffect(() => {
+    const updateTheme = (): void => {
+      const resolved = configuredTheme === 'system' ? getSystemTheme() : configuredTheme;
+      setResolvedTheme(resolved);
+
+      // Cache for flash prevention
+      writeCachedResolvedTheme(resolved);
+    };
+
+    updateTheme();
+
+    // Listen to system theme changes when in 'system' mode
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (): void => {
+      if (configuredTheme === 'system') {
+        updateTheme();
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [configuredTheme, getSystemTheme]);
+
+  // Apply theme class to document root
+  useEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+
+    body.classList.add('theme-transitioning');
+
+    // Remove existing theme classes
+    root.classList.remove('dark', 'light');
+
+    // Add new theme class
+    root.classList.add(resolvedTheme);
+
+    const timer = window.setTimeout(() => {
+      body.classList.remove('theme-transitioning');
+    }, 250);
+
+    return () => {
+      window.clearTimeout(timer);
+      body.classList.remove('theme-transitioning');
+    };
+  }, [resolvedTheme]);
+
+  return {
+    theme: configuredTheme,
+    resolvedTheme,
+    isDark: resolvedTheme === 'dark',
+    isLight: resolvedTheme === 'light',
+  };
+}

package/src/renderer/hooks/useToolApprovalDiff.ts

@@ -0,0 +1,212 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { api } from '@renderer/api';
+
+import type { ToolApprovalFileContent } from '@shared/types';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface ToolApprovalDiffData {
+  /** Whether this tool type supports diff preview */
+  hasDiff: boolean;
+  /** Loading state (file read in progress) */
+  loading: boolean;
+  /** Error message */
+  error: string | null;
+  /** File name for syntax highlighting */
+  fileName: string;
+  /** Original file content */
+  oldString: string;
+  /** New file content after tool execution */
+  newString: string;
+  /** File doesn't exist yet */
+  isNewFile: boolean;
+  /** File content was truncated at size limit */
+  truncated: boolean;
+  /** File is binary */
+  isBinary: boolean;
+}
+
+const DIFF_TOOLS = new Set(['Write', 'Edit', 'NotebookEdit']);
+
+const INITIAL_STATE: ToolApprovalDiffData = {
+  hasDiff: false,
+  loading: false,
+  error: null,
+  fileName: '',
+  oldString: '',
+  newString: '',
+  isNewFile: false,
+  truncated: false,
+  isBinary: false,
+};
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function getFilePath(toolInput: Record<string, unknown>): string {
+  const fp = toolInput.file_path ?? toolInput.notebook_path;
+  return typeof fp === 'string' ? fp : '';
+}
+
+function computeEditResult(
+  currentContent: string,
+  toolInput: Record<string, unknown>
+): { newString: string; error: string | null } {
+  const oldStr = typeof toolInput.old_string === 'string' ? toolInput.old_string : '';
+  const newStr = typeof toolInput.new_string === 'string' ? toolInput.new_string : '';
+  const replaceAll = toolInput.replace_all === true;
+
+  if (!oldStr) {
+    return { newString: currentContent, error: 'Edit: old_string is empty' };
+  }
+
+  if (!currentContent.includes(oldStr)) {
+    return { newString: currentContent, error: 'Fragment not found in current file' };
+  }
+
+  const result = replaceAll
+    ? currentContent.replaceAll(oldStr, newStr)
+    : currentContent.replace(oldStr, newStr);
+
+  return { newString: result, error: null };
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * Lazy-loading hook that reads file content from disk and computes diff data
+ * for Write/Edit/NotebookEdit tool approvals.
+ *
+ * @param toolName  - The tool requesting approval
+ * @param toolInput - The tool's input parameters
+ * @param requestId - Unique approval request ID (used for cancellation)
+ * @param enabled   - Only fetch when true (lazy — user expanded the diff section)
+ */
+export function useToolApprovalDiff(
+  toolName: string,
+  toolInput: Record<string, unknown>,
+  requestId: string,
+  enabled: boolean
+): ToolApprovalDiffData {
+  const [state, setState] = useState<ToolApprovalDiffData>(INITIAL_STATE);
+  const activeRef = useRef<string | null>(null);
+
+  const hasDiff = DIFF_TOOLS.has(toolName);
+  const filePath = getFilePath(toolInput);
+
+  useEffect(() => {
+    // Reset when approval changes
+    setState(INITIAL_STATE);
+    activeRef.current = null;
+  }, [requestId]);
+
+  useEffect(() => {
+    if (!hasDiff || !enabled || !filePath) return;
+
+    // NotebookEdit: no file read needed, just show new_source
+    if (toolName === 'NotebookEdit') {
+      const newSource = typeof toolInput.new_source === 'string' ? toolInput.new_source : '';
+      setState({
+        hasDiff: true,
+        loading: false,
+        error: null,
+        fileName: filePath,
+        oldString: '',
+        newString: newSource,
+        isNewFile: false,
+        truncated: false,
+        isBinary: false,
+      });
+      return;
+    }
+
+    // Write / Edit: need to read current file from disk
+    const currentRequestId = requestId;
+    activeRef.current = currentRequestId;
+
+    setState((prev) => ({ ...prev, hasDiff: true, loading: true, error: null }));
+
+    void (async () => {
+      let result: ToolApprovalFileContent;
+      try {
+        result = await api.teams.readFileForToolApproval(filePath);
+      } catch (err) {
+        if (activeRef.current !== currentRequestId) return;
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error: err instanceof Error ? err.message : String(err),
+        }));
+        return;
+      }
+
+      if (activeRef.current !== currentRequestId) return;
+
+      if (result.error) {
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error: result.error ?? 'Unknown read error',
+          fileName: filePath,
+        }));
+        return;
+      }
+
+      if (result.isBinary) {
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          isBinary: true,
+          fileName: filePath,
+        }));
+        return;
+      }
+
+      const isNewFile = !result.exists;
+      const currentContent = result.content;
+
+      if (toolName === 'Write') {
+        const newContent = typeof toolInput.content === 'string' ? toolInput.content : '';
+        setState({
+          hasDiff: true,
+          loading: false,
+          error: null,
+          fileName: filePath,
+          oldString: currentContent,
+          newString: newContent,
+          isNewFile,
+          truncated: result.truncated,
+          isBinary: false,
+        });
+      } else if (toolName === 'Edit') {
+        const { newString, error } = computeEditResult(currentContent, toolInput);
+        setState({
+          hasDiff: true,
+          loading: false,
+          error,
+          fileName: filePath,
+          oldString: currentContent,
+          newString,
+          isNewFile: false,
+          truncated: result.truncated,
+          isBinary: false,
+        });
+      }
+    })();
+
+    return () => {
+      activeRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- toolInput is a fresh object each render, use requestId for identity
+  }, [hasDiff, enabled, filePath, requestId, toolName]);
+
+  if (!hasDiff) return INITIAL_STATE;
+
+  return { ...state, hasDiff: true };
+}

package/src/renderer/hooks/useUnreadCommentCount.ts

@@ -0,0 +1,14 @@
+import { useSyncExternalStore } from 'react';
+
+import { getSnapshot, getUnreadCount, subscribe } from '@renderer/services/commentReadStorage';
+
+import type { TaskComment } from '@shared/types';
+
+export function useUnreadCommentCount(
+  teamName: string,
+  taskId: string,
+  comments: TaskComment[] | undefined
+): number {
+  const readState = useSyncExternalStore(subscribe, getSnapshot);
+  return getUnreadCount(readState, teamName, taskId, comments ?? []);
+}

package/src/renderer/hooks/useViewedFiles.ts

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import * as storage from '@renderer/utils/diffViewedStorage';
+
+interface UseViewedFilesResult {
+  viewedSet: Set<string>;
+  isViewed: (filePath: string) => boolean;
+  markViewed: (filePath: string) => void;
+  unmarkViewed: (filePath: string) => void;
+  markAllViewed: (filePaths: string[]) => void;
+  clearAll: () => void;
+  viewedCount: number;
+  totalCount: number;
+  /** Progress 0-100 */
+  progress: number;
+}
+
+export function useViewedFiles(
+  teamName: string,
+  scopeKey: string,
+  totalFiles: string[]
+): UseViewedFilesResult {
+  // version bump pattern for re-reading localStorage
+  const [version, setVersion] = useState(0);
+
+  const viewedSet = useMemo(() => {
+    // version is used to trigger re-read
+    if (version < 0) return new Set<string>();
+    return storage.getViewedFiles(teamName, scopeKey);
+  }, [teamName, scopeKey, version]);
+
+  const markViewed = useCallback(
+    (filePath: string) => {
+      storage.markFileViewed(teamName, scopeKey, filePath);
+      setVersion((v) => v + 1);
+    },
+    [teamName, scopeKey]
+  );
+
+  const unmarkViewed = useCallback(
+    (filePath: string) => {
+      storage.unmarkFileViewed(teamName, scopeKey, filePath);
+      setVersion((v) => v + 1);
+    },
+    [teamName, scopeKey]
+  );
+
+  const markAllViewedFn = useCallback(
+    (filePaths: string[]) => {
+      storage.markAllViewed(teamName, scopeKey, filePaths);
+      setVersion((v) => v + 1);
+    },
+    [teamName, scopeKey]
+  );
+
+  const clearAll = useCallback(() => {
+    storage.clearViewed(teamName, scopeKey);
+    setVersion((v) => v + 1);
+  }, [teamName, scopeKey]);
+
+  const viewedCount = totalFiles.filter((f) => viewedSet.has(f)).length;
+
+  return {
+    viewedSet,
+    isViewed: (fp: string) => viewedSet.has(fp),
+    markViewed,
+    unmarkViewed,
+    markAllViewed: markAllViewedFn,
+    clearAll,
+    viewedCount,
+    totalCount: totalFiles.length,
+    progress: totalFiles.length > 0 ? Math.round((viewedCount / totalFiles.length) * 100) : 0,
+  };
+}

package/src/renderer/hooks/useViewportCommentRead.ts

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { markCommentsRead } from '@renderer/services/commentReadStorage';
+
+import { useViewportObserver } from './useViewportObserver';
+
+interface UseViewportCommentReadOptions {
+  teamName: string;
+  taskId: string;
+  /**
+   * Scrollable ancestor DOM element (e.g. DialogContent) used as IO root.
+   * Pass the actual element (not a RefObject) so that the observer is
+   * recreated when the portal mounts. Use useState + callback ref:
+   *   const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null);
+   *   <DialogContent ref={setRootEl}>
+   */
+  scrollContainer: HTMLElement | null;
+}
+
+const VISIBILITY_THRESHOLD = 0.1;
+
+export function getVisibleCommentIdsFallback(
+  scrollContainer: HTMLElement | null,
+  elementsById: ReadonlyMap<string, HTMLElement>
+): string[] {
+  if (!scrollContainer || elementsById.size === 0) return [];
+
+  const rootRect = scrollContainer.getBoundingClientRect();
+  const visibleIds: string[] = [];
+
+  for (const [commentId, element] of elementsById) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+
+    const visibleWidth = Math.min(rect.right, rootRect.right) - Math.max(rect.left, rootRect.left);
+    const visibleHeight = Math.min(rect.bottom, rootRect.bottom) - Math.max(rect.top, rootRect.top);
+
+    if (visibleWidth <= 0 || visibleHeight <= 0) continue;
+    if (visibleHeight / rect.height < VISIBILITY_THRESHOLD) continue;
+
+    visibleIds.push(commentId);
+  }
+
+  return visibleIds;
+}
+
+/**
+ * Marks task comments as read based on viewport visibility.
+ *
+ * Uses IntersectionObserver (via useViewportObserver) to detect which
+ * comment elements are visible in the scroll container and records
+ * their individual IDs as read via per-comment ID tracking.
+ *
+ * Each comment element should be registered via the returned
+ * `registerComment(commentId)` ref callback.
+ *
+ * Only comments that have actually been scrolled into view are marked
+ * as read — fixes the bug where DESC-sorted comments caused all
+ * comments to be marked read when the newest was visible at the top.
+ */
+export function useViewportCommentRead({
+  teamName,
+  taskId,
+  scrollContainer,
+}: UseViewportCommentReadOptions): {
+  /** Ref callback factory. Call with the comment's unique ID. */
+  registerComment: (commentId: string) => (el: HTMLElement | null) => void;
+  /**
+   * Flush all observed comment IDs now. Call on dialog close
+   * as a safety fallback (e.g. if IO did not fire for portal reasons).
+   */
+  flush: () => void;
+} {
+  const seenIdsRef = useRef<Set<string>>(new Set());
+  const commentElementsRef = useRef<Map<string, HTMLElement>>(new Map());
+  const teamNameRef = useRef(teamName);
+  const taskIdRef = useRef(taskId);
+
+  useEffect(() => {
+    teamNameRef.current = teamName;
+    taskIdRef.current = taskId;
+  }, [teamName, taskId]);
+
+  // Reset tracked state when team/task changes
+  useEffect(() => {
+    seenIdsRef.current = new Set();
+    commentElementsRef.current.clear();
+  }, [teamName, taskId]);
+
+  const persistSeen = useCallback(() => {
+    if (seenIdsRef.current.size > 0) {
+      markCommentsRead(teamNameRef.current, taskIdRef.current, Array.from(seenIdsRef.current));
+    }
+  }, []);
+
+  const handleVisibleChange = useCallback(
+    (visibleValues: string[]) => {
+      let changed = false;
+      for (const id of visibleValues) {
+        if (id && !seenIdsRef.current.has(id)) {
+          seenIdsRef.current.add(id);
+          changed = true;
+        }
+      }
+      if (changed) {
+        persistSeen();
+      }
+    },
+    [persistSeen]
+  );
+
+  const { registerElement } = useViewportObserver({
+    root: scrollContainer,
+    threshold: VISIBILITY_THRESHOLD,
+    onVisibleChange: handleVisibleChange,
+  });
+
+  const registerComment = useCallback(
+    (commentId: string) => {
+      const registerObservedElement = registerElement(commentId);
+
+      return (el: HTMLElement | null) => {
+        if (el) {
+          commentElementsRef.current.set(commentId, el);
+        } else {
+          commentElementsRef.current.delete(commentId);
+        }
+
+        registerObservedElement(el);
+      };
+    },
+    [registerElement]
+  );
+
+  const flush = useCallback(() => {
+    const fallbackVisibleIds = getVisibleCommentIdsFallback(
+      scrollContainer,
+      commentElementsRef.current
+    );
+    for (const commentId of fallbackVisibleIds) {
+      seenIdsRef.current.add(commentId);
+    }
+    persistSeen();
+  }, [persistSeen, scrollContainer]);
+
+  return { registerComment, flush };
+}