Refetch user budget on app load and after saving Dyad Pro key (#2632)

AGENTS.md

@@ -139,3 +139,26 @@ Content here
 ```
 
 Valid states: `"finished"`, `"in-progress"`, `"aborted"`
+
+### React Query prefetch and invalidation patterns
+
+For app-level data that should be available immediately on load (like user budget/subscription info), use `prefetchQuery` in the root `App` component:
+
+```tsx
+const queryClient = useQueryClient();
+useEffect(() => {
+  queryClient.prefetchQuery({
+    queryKey: queryKeys.userBudget.info,
+    queryFn: () => ipc.system.getUserBudget(),
+  });
+}, [queryClient]);
+```
+
+When a mutation (like saving an API key) affects data managed by a different query, invalidate that query to trigger a refetch:
+
+```tsx
+// After saving Dyad Pro key, refetch user budget since subscription status may change
+queryClient.invalidateQueries({ queryKey: queryKeys.userBudget.info });
+```
+
+This ensures related data stays in sync without tight coupling between components.

src/components/settings/ProviderSettingsPage.tsx

@@ -3,6 +3,8 @@ import { useRouter } from "@tanstack/react-router";
 import { ArrowLeft, AlertTriangle } from "lucide-react";
 import { useSettings } from "@/hooks/useSettings";
 import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
+import { useQueryClient } from "@tanstack/react-query";
+import { queryKeys } from "@/lib/queryKeys";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -62,6 +64,7 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
   const [isSaving, setIsSaving] = useState(false);
   const [saveError, setSaveError] = useState<string | null>(null);
   const router = useRouter();
+  const queryClient = useQueryClient();
 
   // Use fetched data (or defaults for Dyad)
   const providerDisplayName = isDyad
@@ -148,7 +151,11 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
       }
       await updateSettings(settingsUpdate);
       setApiKeyInput(""); // Clear input on success
-      // Optionally show a success message
+
+      // Refetch user budget when Dyad Pro key is saved
+      if (isDyad) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.userBudget.info });
+      }
     } catch (error: any) {
       console.error("Error saving API key:", error);
       setSaveError(error.message || "Failed to save API key.");

src/renderer.tsx

@@ -13,6 +13,7 @@ import {
   QueryClient,
   QueryClientProvider,
   MutationCache,
+  useQueryClient,
 } from "@tanstack/react-query";
 import { showError, showMcpConsentToast } from "./lib/toast";
 import { ipc } from "./ipc/types";
@@ -99,6 +100,16 @@ const posthogClient = posthog.init(
 );
 
 function App() {
+  const queryClient = useQueryClient();
+
+  // Fetch user budget on app load
+  useEffect(() => {
+    queryClient.prefetchQuery({
+      queryKey: queryKeys.userBudget.info,
+      queryFn: () => ipc.system.getUserBudget(),
+    });
+  }, [queryClient]);
+
   useEffect(() => {
     // Subscribe to navigation state changes
     const unsubscribe = router.subscribe("onResolved", (navigation) => {