@yancyyu/openhermit 1.5.8

package/src/renderer/hooks/useTabUI.ts

@@ -0,0 +1,252 @@
+/**
+ * useTabUI - Hook for accessing per-tab UI state.
+ *
+ * This hook combines the TabUIContext (for tabId) with the tabUISlice (for state/actions).
+ * It provides a simple interface for components to access their tab-specific UI state.
+ *
+ * IMPORTANT: This hook subscribes to `tabUIStates` directly to ensure proper reactivity.
+ * Using getter functions (like isContextPanelVisibleForTab) in useMemo doesn't work
+ * because the function reference doesn't change when the underlying state changes.
+ *
+ * Usage:
+ * ```tsx
+ * const { isAIGroupExpanded, toggleAIGroupExpansion } = useTabUI();
+ *
+ * // Check if a group is expanded in THIS tab
+ * if (isAIGroupExpanded(groupId)) { ... }
+ *
+ * // Toggle expansion in THIS tab only
+ * toggleAIGroupExpansion(groupId);
+ * ```
+ */
+
+import { useCallback, useMemo } from 'react';
+
+import { useTabIdOptional } from '@renderer/contexts/useTabUIContext';
+import { useStore } from '@renderer/store';
+import { useShallow } from 'zustand/react/shallow';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface UseTabUIReturn {
+  tabId: string | null;
+  isAIGroupExpanded: (aiGroupId: string) => boolean;
+  toggleAIGroupExpansion: (aiGroupId: string) => void;
+  expandAIGroup: (aiGroupId: string) => void;
+  getExpandedDisplayItemIds: (aiGroupId: string) => Set<string>;
+  toggleDisplayItemExpansion: (aiGroupId: string, itemId: string) => void;
+  expandDisplayItem: (aiGroupId: string, itemId: string) => void;
+  isSubagentTraceExpanded: (subagentId: string) => boolean;
+  toggleSubagentTraceExpansion: (subagentId: string) => void;
+  expandSubagentTrace: (subagentId: string) => void;
+  isContextPanelVisible: boolean;
+  setContextPanelVisible: (visible: boolean) => void;
+  selectedContextPhase: number | null;
+  setSelectedContextPhase: (phase: number | null) => void;
+  savedScrollTop: number | undefined;
+  saveScrollPosition: (scrollTop: number) => void;
+  initializeTabUI: () => void;
+}
+
+// =============================================================================
+// Main Hook
+// =============================================================================
+
+/**
+ * Hook for accessing per-tab UI state and actions.
+ *
+ * @returns Object containing per-tab state getters and actions
+ */
+export function useTabUI(): UseTabUIReturn {
+  // Get tabId from context (null if not in a tab)
+  const tabId = useTabIdOptional();
+
+  // Subscribe to tabUIStates MAP directly for reactivity
+  // This ensures re-renders when any tab state changes
+  const tabUIStates = useStore(useShallow((s) => s.tabUIStates));
+
+  // Get the current tab's state (derived from subscribed state)
+  const tabState = useMemo(() => {
+    if (!tabId) return null;
+    return tabUIStates.get(tabId) ?? null;
+  }, [tabId, tabUIStates]);
+
+  // Get all tab UI actions from store (these are stable function references)
+  const {
+    toggleAIGroupExpansionForTab,
+    expandAIGroupForTab,
+    toggleDisplayItemExpansionForTab,
+    expandDisplayItemForTab,
+    toggleSubagentTraceExpansionForTab,
+    expandSubagentTraceForTab,
+    setContextPanelVisibleForTab,
+    setSelectedContextPhaseForTab,
+    saveScrollPositionForTab,
+    initTabUIState,
+  } = useStore(
+    useShallow((s) => ({
+      toggleAIGroupExpansionForTab: s.toggleAIGroupExpansionForTab,
+      expandAIGroupForTab: s.expandAIGroupForTab,
+      toggleDisplayItemExpansionForTab: s.toggleDisplayItemExpansionForTab,
+      expandDisplayItemForTab: s.expandDisplayItemForTab,
+      toggleSubagentTraceExpansionForTab: s.toggleSubagentTraceExpansionForTab,
+      expandSubagentTraceForTab: s.expandSubagentTraceForTab,
+      setContextPanelVisibleForTab: s.setContextPanelVisibleForTab,
+      setSelectedContextPhaseForTab: s.setSelectedContextPhaseForTab,
+      saveScrollPositionForTab: s.saveScrollPositionForTab,
+      initTabUIState: s.initTabUIState,
+    }))
+  );
+
+  // ==========================================================================
+  // Derived state from tabState (reactive!)
+  // ==========================================================================
+
+  // AI Group expansion - check directly from tabState
+  const isAIGroupExpanded = useCallback(
+    (aiGroupId: string): boolean => {
+      return tabState?.expandedAIGroupIds.has(aiGroupId) ?? false;
+    },
+    [tabState]
+  );
+
+  const toggleAIGroupExpansion = useCallback(
+    (aiGroupId: string): void => {
+      if (!tabId) return;
+      toggleAIGroupExpansionForTab(tabId, aiGroupId);
+    },
+    [tabId, toggleAIGroupExpansionForTab]
+  );
+
+  const expandAIGroup = useCallback(
+    (aiGroupId: string): void => {
+      if (!tabId) return;
+      expandAIGroupForTab(tabId, aiGroupId);
+    },
+    [tabId, expandAIGroupForTab]
+  );
+
+  // Display item expansion - derive from tabState
+  const getExpandedDisplayItemIds = useCallback(
+    (aiGroupId: string): Set<string> => {
+      return tabState?.expandedDisplayItemIds.get(aiGroupId) ?? new Set<string>();
+    },
+    [tabState]
+  );
+
+  const toggleDisplayItemExpansion = useCallback(
+    (aiGroupId: string, itemId: string): void => {
+      if (!tabId) return;
+      toggleDisplayItemExpansionForTab(tabId, aiGroupId, itemId);
+    },
+    [tabId, toggleDisplayItemExpansionForTab]
+  );
+
+  const expandDisplayItem = useCallback(
+    (aiGroupId: string, itemId: string): void => {
+      if (!tabId) return;
+      expandDisplayItemForTab(tabId, aiGroupId, itemId);
+    },
+    [tabId, expandDisplayItemForTab]
+  );
+
+  // Subagent trace expansion - derive from tabState
+  const isSubagentTraceExpanded = useCallback(
+    (subagentId: string): boolean => {
+      return tabState?.expandedSubagentTraceIds.has(subagentId) ?? false;
+    },
+    [tabState]
+  );
+
+  const toggleSubagentTraceExpansion = useCallback(
+    (subagentId: string): void => {
+      if (!tabId) return;
+      toggleSubagentTraceExpansionForTab(tabId, subagentId);
+    },
+    [tabId, toggleSubagentTraceExpansionForTab]
+  );
+
+  const expandSubagentTrace = useCallback(
+    (subagentId: string): void => {
+      if (!tabId) return;
+      expandSubagentTraceForTab(tabId, subagentId);
+    },
+    [tabId, expandSubagentTraceForTab]
+  );
+
+  // Context panel - derive directly from tabState (reactive!)
+  const isContextPanelVisible = tabState?.showContextPanel ?? false;
+
+  const setContextPanelVisible = useCallback(
+    (visible: boolean): void => {
+      if (!tabId) return;
+      setContextPanelVisibleForTab(tabId, visible);
+    },
+    [tabId, setContextPanelVisibleForTab]
+  );
+
+  // Context phase selection - derive from tabState
+  const selectedContextPhase = tabState?.selectedContextPhase ?? null;
+
+  const setSelectedContextPhase = useCallback(
+    (phase: number | null): void => {
+      if (!tabId) return;
+      setSelectedContextPhaseForTab(tabId, phase);
+    },
+    [tabId, setSelectedContextPhaseForTab]
+  );
+
+  // Scroll position - derive from tabState
+  const savedScrollTop = tabState?.savedScrollTop;
+
+  const saveScrollPosition = useCallback(
+    (scrollTop: number): void => {
+      if (!tabId) return;
+      saveScrollPositionForTab(tabId, scrollTop);
+    },
+    [tabId, saveScrollPositionForTab]
+  );
+
+  // Initialize tab UI state (call once when tab is mounted)
+  const initializeTabUI = useCallback((): void => {
+    if (!tabId) return;
+    initTabUIState(tabId);
+  }, [tabId, initTabUIState]);
+
+  return {
+    // Current tab ID
+    tabId,
+
+    // AI Group expansion
+    isAIGroupExpanded,
+    toggleAIGroupExpansion,
+    expandAIGroup,
+
+    // Display item expansion
+    getExpandedDisplayItemIds,
+    toggleDisplayItemExpansion,
+    expandDisplayItem,
+
+    // Subagent trace expansion
+    isSubagentTraceExpanded,
+    toggleSubagentTraceExpansion,
+    expandSubagentTrace,
+
+    // Context panel
+    isContextPanelVisible,
+    setContextPanelVisible,
+
+    // Context phase selection
+    selectedContextPhase,
+    setSelectedContextPhase,
+
+    // Scroll position
+    savedScrollTop,
+    saveScrollPosition,
+
+    // Initialization
+    initializeTabUI,
+  };
+}

package/src/renderer/hooks/useTaskLocalState.ts

@@ -0,0 +1,163 @@
+import { useCallback, useMemo, useState } from 'react';
+
+const PINNED_KEY = 'taskPinnedIds';
+const ARCHIVED_KEY = 'taskArchivedIds';
+const RENAMED_KEY = 'taskRenamedSubjects';
+
+function makeCompositeKey(teamName: string, taskId: string): string {
+  return `${teamName}:${taskId}`;
+}
+
+function loadSet(key: string): Set<string> {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return new Set();
+    const arr: unknown = JSON.parse(raw);
+    if (Array.isArray(arr)) return new Set(arr.filter((v): v is string => typeof v === 'string'));
+  } catch {
+    /* ignore */
+  }
+  return new Set();
+}
+
+function saveSet(key: string, set: Set<string>): void {
+  try {
+    localStorage.setItem(key, JSON.stringify([...set]));
+  } catch {
+    /* ignore */
+  }
+}
+
+function loadMap(key: string): Map<string, string> {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return new Map();
+    const obj: unknown = JSON.parse(raw);
+    if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+      return new Map(
+        Object.entries(obj as Record<string, unknown>).filter(
+          (entry): entry is [string, string] => typeof entry[1] === 'string'
+        )
+      );
+    }
+  } catch {
+    /* ignore */
+  }
+  return new Map();
+}
+
+function saveMap(key: string, map: Map<string, string>): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(Object.fromEntries(map)));
+  } catch {
+    /* ignore */
+  }
+}
+
+export interface TaskLocalState {
+  pinnedIds: Set<string>;
+  archivedIds: Set<string>;
+  renamedSubjects: Map<string, string>;
+
+  isPinned: (teamName: string, taskId: string) => boolean;
+  isArchived: (teamName: string, taskId: string) => boolean;
+  getRenamedSubject: (teamName: string, taskId: string) => string | undefined;
+
+  togglePin: (teamName: string, taskId: string) => void;
+  toggleArchive: (teamName: string, taskId: string) => void;
+  renameTask: (teamName: string, taskId: string, newSubject: string) => void;
+}
+
+export function useTaskLocalState(): TaskLocalState {
+  const [pinnedIds, setPinnedIds] = useState<Set<string>>(() => loadSet(PINNED_KEY));
+  const [archivedIds, setArchivedIds] = useState<Set<string>>(() => loadSet(ARCHIVED_KEY));
+  const [renamedSubjects, setRenamedSubjects] = useState<Map<string, string>>(() =>
+    loadMap(RENAMED_KEY)
+  );
+
+  const isPinned = useCallback(
+    (teamName: string, taskId: string): boolean =>
+      pinnedIds.has(makeCompositeKey(teamName, taskId)),
+    [pinnedIds]
+  );
+
+  const isArchived = useCallback(
+    (teamName: string, taskId: string): boolean =>
+      archivedIds.has(makeCompositeKey(teamName, taskId)),
+    [archivedIds]
+  );
+
+  const getRenamedSubject = useCallback(
+    (teamName: string, taskId: string): string | undefined =>
+      renamedSubjects.get(makeCompositeKey(teamName, taskId)),
+    [renamedSubjects]
+  );
+
+  const togglePin = useCallback((teamName: string, taskId: string): void => {
+    const key = makeCompositeKey(teamName, taskId);
+    setPinnedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      saveSet(PINNED_KEY, next);
+      return next;
+    });
+  }, []);
+
+  const toggleArchive = useCallback((teamName: string, taskId: string): void => {
+    const key = makeCompositeKey(teamName, taskId);
+    setArchivedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      saveSet(ARCHIVED_KEY, next);
+      return next;
+    });
+  }, []);
+
+  const renameTask = useCallback((teamName: string, taskId: string, newSubject: string): void => {
+    const key = makeCompositeKey(teamName, taskId);
+    setRenamedSubjects((prev) => {
+      const next = new Map(prev);
+      const trimmed = newSubject.trim();
+      if (trimmed) {
+        next.set(key, trimmed);
+      } else {
+        next.delete(key);
+      }
+      saveMap(RENAMED_KEY, next);
+      return next;
+    });
+  }, []);
+
+  return useMemo(
+    () => ({
+      pinnedIds,
+      archivedIds,
+      renamedSubjects,
+      isPinned,
+      isArchived,
+      getRenamedSubject,
+      togglePin,
+      toggleArchive,
+      renameTask,
+    }),
+    [
+      pinnedIds,
+      archivedIds,
+      renamedSubjects,
+      isPinned,
+      isArchived,
+      getRenamedSubject,
+      togglePin,
+      toggleArchive,
+      renameTask,
+    ]
+  );
+}

package/src/renderer/hooks/useTaskSuggestions.ts

@@ -0,0 +1,131 @@
+import { useMemo } from 'react';
+
+import { useStore } from '@renderer/store';
+import {
+  selectResolvedMembersForTeamName,
+  selectTeamDataForName,
+} from '@renderer/store/slices/teamSlice';
+import { createEncodedTaskReference } from '@renderer/utils/taskReferenceUtils';
+import { getTaskDisplayId } from '@shared/utils/taskIdentity';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { MentionSuggestion } from '@renderer/types/mention';
+import type { GlobalTask, TeamTaskWithKanban } from '@shared/types';
+
+export interface UseTaskSuggestionsResult {
+  suggestions: MentionSuggestion[];
+}
+
+interface TaskWithTeamContext {
+  task: TeamTaskWithKanban | GlobalTask;
+  teamName: string;
+  teamDisplayName: string;
+  teamColor?: string;
+  isCurrentTeamTask: boolean;
+  ownerColor?: string;
+}
+
+function getTaskTimestamp(task: TeamTaskWithKanban | GlobalTask): number {
+  const value = task.updatedAt ?? task.createdAt;
+  return value ? Date.parse(value) || 0 : 0;
+}
+
+function buildTaskSuggestion({
+  task,
+  teamName,
+  teamDisplayName,
+  teamColor,
+  isCurrentTeamTask,
+  ownerColor,
+}: TaskWithTeamContext): MentionSuggestion {
+  const displayId = getTaskDisplayId(task);
+  return {
+    id: `task:${teamName}:${task.id}`,
+    name: displayId,
+    insertText: createEncodedTaskReference(displayId, task.id, teamName),
+    subtitle: task.subject,
+    color: teamColor,
+    type: 'task',
+    taskId: task.id,
+    teamName,
+    teamDisplayName,
+    isCurrentTeamTask,
+    ownerName: task.owner,
+    ownerColor,
+    searchText: [task.subject, teamDisplayName, teamName, task.owner].filter(Boolean).join(' '),
+  };
+}
+
+function isVisibleTask(task: TeamTaskWithKanban | GlobalTask): boolean {
+  return task.status !== 'deleted' && !task.deletedAt;
+}
+
+export function useTaskSuggestions(currentTeamName: string | null): UseTaskSuggestionsResult {
+  const { globalTasks, currentTeamData, currentTeamMembers, teamByName } = useStore(
+    useShallow((s) => ({
+      globalTasks: s.globalTasks,
+      currentTeamData: currentTeamName ? selectTeamDataForName(s, currentTeamName) : null,
+      currentTeamMembers: currentTeamName
+        ? selectResolvedMembersForTeamName(s, currentTeamName)
+        : [],
+      teamByName: s.teamByName,
+    }))
+  );
+
+  const suggestions = useMemo<MentionSuggestion[]>(() => {
+    const tasks: TaskWithTeamContext[] = [];
+    const seenTaskIds = new Set<string>();
+
+    if (currentTeamName) {
+      const currentTeamSummary = teamByName[currentTeamName];
+      const currentTeamDisplayName = currentTeamSummary?.displayName || currentTeamName;
+      const currentTeamTasks =
+        currentTeamData?.tasks ?? globalTasks.filter((task) => task.teamName === currentTeamName);
+      const currentTeamMemberColors =
+        currentTeamMembers.length > 0 ? currentTeamMembers : (currentTeamSummary?.members ?? []);
+
+      for (const task of currentTeamTasks) {
+        if (!isVisibleTask(task)) continue;
+        seenTaskIds.add(task.id);
+        tasks.push({
+          task,
+          teamName: currentTeamName,
+          teamDisplayName: currentTeamDisplayName,
+          teamColor: currentTeamSummary?.color,
+          isCurrentTeamTask: true,
+          ownerColor: currentTeamMemberColors.find((member) => member.name === task.owner)?.color,
+        });
+      }
+    }
+
+    for (const task of globalTasks) {
+      if (!isVisibleTask(task)) continue;
+      if (seenTaskIds.has(task.id)) continue;
+      const teamSummary = teamByName[task.teamName];
+      tasks.push({
+        task,
+        teamName: task.teamName,
+        teamDisplayName: task.teamDisplayName,
+        teamColor: teamSummary?.color,
+        isCurrentTeamTask: task.teamName === currentTeamName,
+        ownerColor: teamSummary?.members?.find((member) => member.name === task.owner)?.color,
+      });
+    }
+
+    tasks.sort((a, b) => {
+      if (a.isCurrentTeamTask !== b.isCurrentTeamTask) {
+        return a.isCurrentTeamTask ? -1 : 1;
+      }
+
+      const timeDelta = getTaskTimestamp(b.task) - getTaskTimestamp(a.task);
+      if (timeDelta !== 0) return timeDelta;
+
+      if (a.teamName !== b.teamName) return a.teamName.localeCompare(b.teamName);
+      return getTaskDisplayId(a.task).localeCompare(getTaskDisplayId(b.task));
+    });
+
+    return tasks.map(buildTaskSuggestion);
+  }, [currentTeamData, currentTeamMembers, currentTeamName, globalTasks, teamByName]);
+
+  return { suggestions };
+}

package/src/renderer/hooks/useTeamMessagesExpanded.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  addExpanded,
+  getExpandedOverrides,
+  removeExpanded,
+} from '@renderer/utils/teamMessageExpandStorage';
+
+export function useTeamMessagesExpanded(teamName: string): {
+  expandedSet: Set<string>;
+  toggle: (messageKey: string) => void;
+} {
+  const [version, setVersion] = useState(0);
+  const expandedSet = useMemo(() => {
+    if (version < 0) return new Set<string>();
+    return teamName ? getExpandedOverrides(teamName) : new Set<string>();
+  }, [teamName, version]);
+
+  const toggle = useCallback(
+    (messageKey: string) => {
+      if (!teamName) return;
+      const existing = getExpandedOverrides(teamName);
+      if (existing.has(messageKey)) {
+        removeExpanded(teamName, messageKey);
+      } else {
+        addExpanded(teamName, messageKey);
+      }
+      setVersion((v) => v + 1);
+    },
+    [teamName]
+  );
+
+  return { expandedSet, toggle };
+}

package/src/renderer/hooks/useTeamMessagesRead.ts

@@ -0,0 +1,52 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  getReadSet as getReadSetStorage,
+  markBulkRead as markBulkReadStorage,
+  markRead as markReadStorage,
+} from '@renderer/utils/teamMessageReadStorage';
+
+export function useTeamMessagesRead(teamName: string): {
+  readSet: Set<string>;
+  markRead: (messageKey: string) => void;
+  markAllRead: (messageKeys: string[]) => void;
+} {
+  const [version, setVersion] = useState(0);
+  const readSet = useMemo(() => {
+    if (version < 0) return new Set<string>();
+    return teamName ? getReadSetStorage(teamName) : new Set<string>();
+  }, [teamName, version]);
+
+  const markRead = useCallback(
+    (messageKey: string) => {
+      if (!teamName) return;
+      const existing = getReadSetStorage(teamName);
+      if (existing.has(messageKey)) return;
+      existing.add(messageKey);
+      markReadStorage(teamName, messageKey, existing);
+      setVersion((v) => v + 1);
+    },
+    [teamName]
+  );
+
+  const markAllRead = useCallback(
+    (messageKeys: string[]) => {
+      if (!teamName || messageKeys.length === 0) return;
+      const existing = getReadSetStorage(teamName);
+      let changed = false;
+      for (const key of messageKeys) {
+        if (!existing.has(key)) {
+          existing.add(key);
+          changed = true;
+        }
+      }
+      if (!changed) return;
+      markBulkReadStorage(teamName, existing);
+      setVersion((v) => v + 1);
+    },
+    [teamName]
+  );
+
+  const effectiveReadSet = !teamName ? new Set<string>() : readSet;
+  return { readSet: effectiveReadSet, markRead, markAllRead };
+}