From 361cb06bf02015339bce7906d75df7015dfbb201 Mon Sep 17 00:00:00 2001
From: Shirone <kacperlachowiczwp.pl@wp.pl>
Date: Thu, 15 Jan 2026 19:11:25 +0100
Subject: [PATCH] fix(ui): improve React Query hooks and fix edge cases

- Update query keys to include all relevant parameters (branches, agents)
- Fix use-branches to pass includeRemote parameter to query key
- Fix use-settings to include sources in agents query key
- Update running-agents-view to use correct query key structure
- Update use-spec-loading to properly use spec query hooks
- Add missing queryClient invalidation in auto-mode mutations
- Add missing cache invalidation in spec mutations after creation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/ui/src/components/session-manager.tsx    | 12 +++++++----
 apps/ui/src/components/usage-popover.tsx      |  4 ++--
 .../worktree-panel/hooks/use-branches.ts      |  6 ++++--
 .../components/views/running-agents-view.tsx  |  6 +++---
 .../views/spec-view/hooks/use-spec-loading.ts | 10 ++++-----
 .../mutations/use-auto-mode-mutations.ts      | 21 ++++++++++++++++---
 .../hooks/mutations/use-github-mutations.ts   |  6 +++++-
 .../src/hooks/mutations/use-spec-mutations.ts |  5 +++++
 apps/ui/src/hooks/queries/use-settings.ts     |  3 ++-
 apps/ui/src/hooks/queries/use-worktrees.ts    |  3 ++-
 apps/ui/src/lib/query-keys.ts                 |  6 ++++--
 11 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/apps/ui/src/components/session-manager.tsx b/apps/ui/src/components/session-manager.tsx
index c4b7f119..fb349a4a 100644
--- a/apps/ui/src/components/session-manager.tsx
+++ b/apps/ui/src/components/session-manager.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { createLogger } from '@automaker/utils/logger';
 import { useQueryClient } from '@tanstack/react-query';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -119,6 +119,9 @@ export function SessionManager({
   // Use React Query for sessions list - always include archived, filter client-side
   const { data: sessions = [], refetch: refetchSessions } = useSessions(true);
 
+  // Ref to track if we've done the initial running sessions check
+  const hasCheckedInitialRef = useRef(false);
+
   // Check running state for all sessions
   const checkRunningSessions = useCallback(async (sessionList: SessionListItem[]) => {
     const api = getElectronAPI();
@@ -152,12 +155,13 @@ export function SessionManager({
     }
   }, [queryClient, refetchSessions, checkRunningSessions]);
 
-  // Check running state on initial load
+  // Check running state on initial load (runs only once when sessions first load)
   useEffect(() => {
-    if (sessions.length > 0) {
+    if (sessions.length > 0 && !hasCheckedInitialRef.current) {
+      hasCheckedInitialRef.current = true;
       checkRunningSessions(sessions);
     }
-  }, [sessions.length > 0]); // Only run when sessions first load
+  }, [sessions, checkRunningSessions]);
 
   // Periodically check running state for sessions (useful for detecting when agents finish)
   useEffect(() => {
diff --git a/apps/ui/src/components/usage-popover.tsx b/apps/ui/src/components/usage-popover.tsx
index a4db928a..3032388c 100644
--- a/apps/ui/src/components/usage-popover.tsx
+++ b/apps/ui/src/components/usage-popover.tsx
@@ -304,7 +304,7 @@ export function UsagePopover() {
                   variant="ghost"
                   size="icon"
                   className={cn('h-6 w-6', claudeLoading && 'opacity-80')}
-                  onClick={() => !claudeLoading && fetchClaudeUsage(false)}
+                  onClick={() => !claudeLoading && fetchClaudeUsage()}
                 >
                   <RefreshCw className="w-3.5 h-3.5" />
                 </Button>
@@ -411,7 +411,7 @@ export function UsagePopover() {
                   variant="ghost"
                   size="icon"
                   className={cn('h-6 w-6', codexLoading && 'opacity-80')}
-                  onClick={() => !codexLoading && fetchCodexUsage(false)}
+                  onClick={() => !codexLoading && fetchCodexUsage()}
                 >
                   <RefreshCw className="w-3.5 h-3.5" />
                 </Button>
diff --git a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
index eeca9729..7b84dfe9 100644
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
@@ -22,9 +22,11 @@ export function useBranches() {
   const branches = branchData?.branches ?? [];
   const aheadCount = branchData?.aheadCount ?? 0;
   const behindCount = branchData?.behindCount ?? 0;
+  // Use conservative defaults (false) until data is confirmed
+  // This prevents the UI from assuming git capabilities before the query completes
   const gitRepoStatus: GitRepoStatus = {
-    isGitRepo: branchData?.isGitRepo ?? true,
-    hasCommits: branchData?.hasCommits ?? true,
+    isGitRepo: branchData?.isGitRepo ?? false,
+    hasCommits: branchData?.hasCommits ?? false,
   };
 
   const fetchBranches = useCallback(
diff --git a/apps/ui/src/components/views/running-agents-view.tsx b/apps/ui/src/components/views/running-agents-view.tsx
index 4575b84e..326146e1 100644
--- a/apps/ui/src/components/views/running-agents-view.tsx
+++ b/apps/ui/src/components/views/running-agents-view.tsx
@@ -34,8 +34,8 @@ export function RunningAgentsView() {
   }, [refetch]);
 
   const handleStopAgent = useCallback(
-    (featureId: string) => {
-      stopFeature.mutate(featureId);
+    (featureId: string, projectPath: string) => {
+      stopFeature.mutate({ featureId, projectPath });
     },
     [stopFeature]
   );
@@ -168,7 +168,7 @@ export function RunningAgentsView() {
                   <Button
                     variant="destructive"
                     size="sm"
-                    onClick={() => handleStopAgent(agent.featureId)}
+                    onClick={() => handleStopAgent(agent.featureId, agent.projectPath)}
                     disabled={stopFeature.isPending}
                   >
                     <Square className="h-3.5 w-3.5 mr-1.5" />
diff --git a/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts b/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts
index 4186bb72..5aff3df4 100644
--- a/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts
+++ b/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts
@@ -27,15 +27,13 @@ export function useSpecLoading() {
   const loadSpec = useCallback(async () => {
     if (!currentProject?.path) return;
 
-    // First check if generation is running
-    await queryClient.invalidateQueries({
+    // Fetch fresh status data to avoid stale cache issues
+    // Using fetchQuery ensures we get the latest data before checking
+    const statusData = await queryClient.fetchQuery<{ isRunning: boolean }>({
       queryKey: queryKeys.specRegeneration.status(currentProject.path),
+      staleTime: 0, // Force fresh fetch
     });
 
-    const statusData = queryClient.getQueryData<{ isRunning: boolean }>(
-      queryKeys.specRegeneration.status(currentProject.path)
-    );
-
     if (statusData?.isRunning) {
       return;
     }
diff --git a/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts b/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts
index b94d23ad..0eb07a1d 100644
--- a/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts
+++ b/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts
@@ -99,21 +99,36 @@ export function useResumeFeature(projectPath: string) {
  * Stop a running feature
  *
  * @returns Mutation for stopping a feature
+ *
+ * @example
+ * ```tsx
+ * const stopFeature = useStopFeature();
+ * // Simple stop
+ * stopFeature.mutate('feature-id');
+ * // Stop with project path for cache invalidation
+ * stopFeature.mutate({ featureId: 'feature-id', projectPath: '/path/to/project' });
+ * ```
  */
 export function useStopFeature() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (featureId: string) => {
+    mutationFn: async (input: string | { featureId: string; projectPath?: string }) => {
+      const featureId = typeof input === 'string' ? input : input.featureId;
       const api = getElectronAPI();
       const result = await api.autoMode.stopFeature(featureId);
       if (!result.success) {
         throw new Error(result.error || 'Failed to stop feature');
       }
-      return result;
+      // Return projectPath for use in onSuccess
+      return { ...result, projectPath: typeof input === 'string' ? undefined : input.projectPath };
     },
-    onSuccess: () => {
+    onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      // Also invalidate features cache if projectPath is provided
+      if (data.projectPath) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.features.all(data.projectPath) });
+      }
       toast.success('Feature stopped');
     },
     onError: (error: Error) => {
diff --git a/apps/ui/src/hooks/mutations/use-github-mutations.ts b/apps/ui/src/hooks/mutations/use-github-mutations.ts
index 4f4336ba..29395cb3 100644
--- a/apps/ui/src/hooks/mutations/use-github-mutations.ts
+++ b/apps/ui/src/hooks/mutations/use-github-mutations.ts
@@ -9,6 +9,7 @@ import { getElectronAPI, GitHubIssue, GitHubComment } from '@/lib/electron';
 import { queryKeys } from '@/lib/query-keys';
 import { toast } from 'sonner';
 import type { LinkedPRInfo, ModelId } from '@automaker/types';
+import { resolveModelString } from '@automaker/model-resolver';
 
 /**
  * Input for validating a GitHub issue
@@ -64,10 +65,13 @@ export function useValidateIssue(projectPath: string) {
         linkedPRs,
       };
 
+      // Resolve model alias to canonical model identifier
+      const resolvedModel = model ? resolveModelString(model) : undefined;
+
       const result = await api.github.validateIssue(
         projectPath,
         validationInput,
-        model,
+        resolvedModel,
         thinkingLevel,
         reasoningEffort
       );
diff --git a/apps/ui/src/hooks/mutations/use-spec-mutations.ts b/apps/ui/src/hooks/mutations/use-spec-mutations.ts
index 98279d65..a9e890c0 100644
--- a/apps/ui/src/hooks/mutations/use-spec-mutations.ts
+++ b/apps/ui/src/hooks/mutations/use-spec-mutations.ts
@@ -157,6 +157,11 @@ export function useSaveSpec(projectPath: string) {
 
   return useMutation({
     mutationFn: async (content: string) => {
+      // Guard against empty projectPath to prevent writing to invalid locations
+      if (!projectPath || projectPath.trim() === '') {
+        throw new Error('Invalid project path: cannot save spec without a valid project');
+      }
+
       const api = getElectronAPI();
 
       await api.writeFile(`${projectPath}/.automaker/app_spec.txt`, content);
diff --git a/apps/ui/src/hooks/queries/use-settings.ts b/apps/ui/src/hooks/queries/use-settings.ts
index e528bc63..cb77ff35 100644
--- a/apps/ui/src/hooks/queries/use-settings.ts
+++ b/apps/ui/src/hooks/queries/use-settings.ts
@@ -107,7 +107,8 @@ export function useDiscoveredAgents(
   sources?: Array<'user' | 'project'>
 ) {
   return useQuery({
-    queryKey: queryKeys.settings.agents(projectPath ?? ''),
+    // Include sources in query key so different source combinations have separate caches
+    queryKey: queryKeys.settings.agents(projectPath ?? '', sources),
     queryFn: async () => {
       const api = getElectronAPI();
       const result = await api.settings.discoverAgents(projectPath, sources);
diff --git a/apps/ui/src/hooks/queries/use-worktrees.ts b/apps/ui/src/hooks/queries/use-worktrees.ts
index 7cafbddb..9a7eefec 100644
--- a/apps/ui/src/hooks/queries/use-worktrees.ts
+++ b/apps/ui/src/hooks/queries/use-worktrees.ts
@@ -162,7 +162,8 @@ interface BranchesResult {
  */
 export function useWorktreeBranches(worktreePath: string | undefined, includeRemote = false) {
   return useQuery({
-    queryKey: queryKeys.worktrees.branches(worktreePath ?? ''),
+    // Include includeRemote in query key so different configurations have separate caches
+    queryKey: queryKeys.worktrees.branches(worktreePath ?? '', includeRemote),
     queryFn: async (): Promise<BranchesResult> => {
       if (!worktreePath) throw new Error('No worktree path');
       const api = getElectronAPI();
diff --git a/apps/ui/src/lib/query-keys.ts b/apps/ui/src/lib/query-keys.ts
index b0eb7291..feb69c65 100644
--- a/apps/ui/src/lib/query-keys.ts
+++ b/apps/ui/src/lib/query-keys.ts
@@ -40,7 +40,8 @@ export const queryKeys = {
     single: (projectPath: string, featureId: string) =>
       ['worktrees', projectPath, featureId] as const,
     /** Branches for a worktree */
-    branches: (worktreePath: string) => ['worktrees', 'branches', worktreePath] as const,
+    branches: (worktreePath: string, includeRemote = false) =>
+      ['worktrees', 'branches', worktreePath, { includeRemote }] as const,
     /** Worktree status */
     status: (projectPath: string, featureId: string) =>
       ['worktrees', projectPath, featureId, 'status'] as const,
@@ -86,7 +87,8 @@ export const queryKeys = {
     /** Credentials (API keys) */
     credentials: () => ['settings', 'credentials'] as const,
     /** Discovered agents */
-    agents: (projectPath: string) => ['settings', 'agents', projectPath] as const,
+    agents: (projectPath: string, sources?: Array<'user' | 'project'>) =>
+      ['settings', 'agents', projectPath, sources ?? []] as const,
   },
 
   // ============================================