Use selectors where possible for workspace, repo, file watcher, etc

Author: charlesvien

apps/twig/src/renderer/features/panels/hooks/usePanelLayoutHooks.tsx

@@ -1,6 +1,9 @@
 import { FileIcon } from "@components/ui/FileIcon";
 import { TabContentRenderer } from "@features/task-detail/components/TabContentRenderer";
-import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
+import {
+  selectTaskRepoPath,
+  useTaskExecutionStore,
+} from "@features/task-detail/stores/taskExecutionStore";
 import { ChatCenteredText, Terminal } from "@phosphor-icons/react";
 import type { Task } from "@shared/types";
 import { useCallback, useEffect, useMemo, useRef } from "react";
@@ -82,9 +85,7 @@ export function useTabInjection(
   closeTab: (taskId: string, panelId: string, tabId: string) => void,
 ): Tab[] {
   const worktreePath = useWorkspaceStore(selectWorktreePath(taskId));
-  const storedRepoPath = useTaskExecutionStore(
-    (state) => state.taskStates[taskId]?.repoPath ?? null,
-  );
+  const storedRepoPath = useTaskExecutionStore(selectTaskRepoPath(taskId));
   const repoPath = worktreePath || storedRepoPath || "";
 
   return useMemo(

apps/twig/src/renderer/features/right-sidebar/stores/fileTreeStore.ts

@@ -38,3 +38,8 @@ export const useFileTreeStore = create<FileTreeStore>()((set) => ({
       },
     })),
 }));
+
+// Selector factory for checking if a path is expanded
+export const selectIsPathExpanded =
+  (taskId: string, path: string) => (state: FileTreeStore) =>
+    state.expandedPaths[taskId]?.has(path) ?? false;

apps/twig/src/renderer/features/task-detail/components/FileTreePanel.tsx

@@ -1,7 +1,10 @@
 import { FileIcon } from "@components/ui/FileIcon";
 import { PanelMessage } from "@components/ui/PanelMessage";
 import { isFileTabActiveInTree, usePanelLayoutStore } from "@features/panels";
-import { useFileTreeStore } from "@features/right-sidebar/stores/fileTreeStore";
+import {
+  selectIsPathExpanded,
+  useFileTreeStore,
+} from "@features/right-sidebar/stores/fileTreeStore";
 import { useTaskData } from "@features/task-detail/hooks/useTaskData";
 import { CaretRight, FolderIcon, FolderOpenIcon } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
@@ -40,9 +43,7 @@ function LazyTreeItem({
   repoPath,
   isFileActive,
 }: LazyTreeItemProps) {
-  const isExpanded = useFileTreeStore(
-    (state) => state.expandedPaths[taskId]?.has(entry.path) ?? false,
-  );
+  const isExpanded = useFileTreeStore(selectIsPathExpanded(taskId, entry.path));
   const togglePath = useFileTreeStore((state) => state.togglePath);
   const collapseAll = useFileTreeStore((state) => state.collapseAll);
   const openFile = usePanelLayoutStore((state) => state.openFile);

apps/twig/src/renderer/features/task-detail/components/TaskDetail.tsx

@@ -12,6 +12,7 @@ import { Box, Code, Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import { useMemo } from "react";
 import {
+  selectWorkspace,
   selectWorktreePath,
   useWorkspaceStore,
 } from "@/renderer/features/workspace/stores/workspaceStore";
@@ -56,10 +57,7 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
 
   useWorkspaceEvents(taskId);
   const task = taskData.task;
-  const workspace = useWorkspaceStore(
-    (state) => state.workspaces[taskId] ?? null,
-  );
-
+  const workspace = useWorkspaceStore(selectWorkspace(taskId));
   const branchName = workspace?.branchName;
 
   const headerContent = useMemo(

apps/twig/src/renderer/features/task-detail/hooks/useTaskData.ts

@@ -1,4 +1,8 @@
-import { useTaskExecutionStore } from "@features/task-detail/stores/taskExecutionStore";
+import {
+  selectTaskRepoExists,
+  selectTaskRepoPath,
+  useTaskExecutionStore,
+} from "@features/task-detail/stores/taskExecutionStore";
 import { useTasks } from "@features/tasks/hooks/useTasks";
 import type { Task } from "@shared/types";
 import { cloneStore } from "@stores/cloneStore";
@@ -27,12 +31,8 @@ export function useTaskData({ taskId, initialTask }: UseTaskDataParams) {
   }, [initializeRepoPath, taskId, task]);
 
   // Subscribe to specific fields reactively to avoid unnecessary rerenders
-  const repoPath = useTaskExecutionStore(
-    (state) => state.taskStates[taskId]?.repoPath ?? null,
-  );
-  const repoExists = useTaskExecutionStore(
-    (state) => state.taskStates[taskId]?.repoExists ?? null,
-  );
+  const repoPath = useTaskExecutionStore(selectTaskRepoPath(taskId));
+  const repoExists = useTaskExecutionStore(selectTaskRepoExists(taskId));
 
   const repository = getTaskRepository(task);
 

apps/twig/src/renderer/features/task-detail/stores/taskExecutionStore.ts

@@ -147,3 +147,12 @@ export const useTaskExecutionStore = create<TaskExecutionStore>()(
     },
   ),
 );
+
+// Selector factories for parameterized access (taskId-based)
+export const selectTaskRepoPath =
+  (taskId: string) => (state: TaskExecutionStore) =>
+    state.taskStates[taskId]?.repoPath ?? null;
+
+export const selectTaskRepoExists =
+  (taskId: string) => (state: TaskExecutionStore) =>
+    state.taskStates[taskId]?.repoExists ?? null;