Merge pull request #692 from nazarli-shabnam/fix/stale-query-caches-591

fix(ui): invalidate token, installation and membership caches after their mutations, share keys and the org-login threshold

Author: nazarli-shabnam

apps/ui/app/activity/page.tsx

@@ -67,7 +67,7 @@ export default function ActivityPage() {
   // Heatmap comes from the personal cockpit endpoint (no org membership needed); the same
   // resolved token works for it and the org-scoped calls below.
   const cockpitQuery = useQuery({
-    queryKey: ["analytics.cockpit-heatmap", org],
+    queryKey: ["analytics.cockpit", org],
     queryFn: () => api.analytics.cockpit(org, token),
     enabled: queriesEnabled,
     retry: false,

apps/ui/app/automation/page.tsx

@@ -10,7 +10,8 @@ import { PageHeader } from "@/components/page-header"
 import { Warning, Key, CircleNotch, Play, CheckCircle, XCircle, CircleDashed } from "@phosphor-icons/react"
 import { api } from "@/lib/api/client"
 import { useActiveScope } from "@/lib/active-scope"
-import { shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { hasOrgLogin, shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { invalidateTokens } from "@/lib/query-invalidation"
 import { BarGroupChart } from "@/components/charts/bar-group-chart"
 import { BranchProtectionCard } from "@/components/automation/branch-protection-card"
 import { DependabotTriageCard } from "@/components/automation/dependabot-triage-card"
@@ -21,8 +22,6 @@ import { relativeTime } from "@/lib/format"
 import { orgRoleFor } from "@/lib/members-href"
 import type { InstallationMeta, MyOrgMembership, RunSummary, WorkflowSummary } from "@/lib/api/types"
 
-// > 0, not > 1: valid GitHub org logins can be a single character.
-const MIN_OWNER_LEN_FOR_REPO_LOOKUP = 1
 // Pause after the last keystroke in the owner box before it drives network lookups.
 const OWNER_LOOKUP_DEBOUNCE_MS = 400
 
@@ -119,7 +118,7 @@ export default function AutomationPage() {
   useEffect(() => {
     setResolvedFor("")
     // > 0, not > 2: valid GitHub org logins can be 1-2 characters.
-    if (lookupOwner.length > 0) resolveMutation.mutate(lookupOwner)
+    if (hasOrgLogin(lookupOwner)) resolveMutation.mutate(lookupOwner)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lookupOwner])
 
@@ -128,7 +127,7 @@ export default function AutomationPage() {
     // request (and cache an entry) per keystroke. Saving a token refetches this instead.
     queryKey: ["repos.list", lookupOwner],
     queryFn: () => api.repos.list(lookupOwner, token),
-    enabled: lookupOwner.length >= MIN_OWNER_LEN_FOR_REPO_LOOKUP && resolvedFor === lookupOwner,
+    enabled: hasOrgLogin(lookupOwner) && resolvedFor === lookupOwner,
     retry: false,
   })
   const repoOptions = reposListQuery.data?.repos ?? []
@@ -138,6 +137,7 @@ export default function AutomationPage() {
     mutationFn: () => api.tokens.upsert(owner.trim(), token.trim()),
     onSuccess: () => {
       setTokenSaved(true)
+      invalidateTokens(queryClient)
       queryClient.invalidateQueries({ queryKey: ["repos.list", lookupOwner] })
     },
   })

apps/ui/app/automation/permissions/page.tsx

@@ -9,6 +9,7 @@ import { reviewUrl } from "@/components/permission-drift-notice"
 import { api } from "@/lib/api/client"
 import { useActiveScope } from "@/lib/active-scope"
 import { relativeTime } from "@/lib/format"
+import { invalidateInstallations } from "@/lib/query-invalidation"
 import type { InstallationMeta } from "@/lib/api/types"
 
 const formatPermissions = (perms: Record<string, string>) =>
@@ -32,7 +33,7 @@ export default function PermissionsPage() {
         scope?.kind === "org" ? { scope: "org", orgLogin: scope.login } : { scope: "me" },
         installationId,
       ),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: () => invalidateInstallations(queryClient),
   })
 
   const installs = (installsQuery.data ?? []).filter((i) => i.installation_id != null)

apps/ui/app/invite/[token]/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react"
 import Link from "next/link"
 import { useParams, useRouter } from "next/navigation"
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { PageHeader } from "@/components/page-header"
 import { Button } from "@/components/ui/button"
 import { Warning, CheckCircle, CircleNotch } from "@phosphor-icons/react"
@@ -13,6 +13,7 @@ import { useAuth } from "@/lib/auth-context"
 export default function InviteAcceptPage() {
   const params = useParams<{ token: string }>()
   const router = useRouter()
+  const queryClient = useQueryClient()
   const { user, isLoading: authLoading } = useAuth()
   const token = params.token
 
@@ -23,7 +24,11 @@ export default function InviteAcceptPage() {
 
   const accept = useMutation({
     mutationFn: () => api.invitations.accept(token),
-    onSuccess: () => router.push("/"),
+    onSuccess: () => {
+      // The new membership must show up in the sidebar/Overview immediately, not after the 30 s staleTime.
+      queryClient.invalidateQueries({ queryKey: ["my-orgs"] })
+      router.push("/")
+    },
   })
 
   // The backend 403s with this specific message for an unverified email -- distinct from an

apps/ui/app/pulls/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { PageHeader } from "@/components/page-header"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -17,6 +17,8 @@ import type { MyOrgMembership, PullSummary } from "@/lib/api/types"
 // No repo-count cap here; requests are fanned out in batches so large orgs don't fire
 // dozens of simultaneous requests.
 const REPO_BATCH_SIZE = 10
+// Same entries (and key) as the Repositories page rows, so visiting one warms the other.
+const REPO_PULLS_STALE_MS = 30_000
 
 interface PullRow extends PullSummary {
   repo: string
@@ -25,6 +27,7 @@ interface PullRow extends PullSummary {
 type GroupBy = "repo" | "author"
 
 export default function PullRequestsPage() {
+  const queryClient = useQueryClient()
   const { scope } = useActiveScope()
   // Pulls are listed via /orgs/{org}/repos; a personal scope has no org to list.
   const org = scope?.kind === "org" ? scope.login : ""
@@ -70,8 +73,12 @@ export default function PullRequestsPage() {
         const batch = repoNames.slice(i, i + REPO_BATCH_SIZE)
         const results = await Promise.all(
           batch.map((repo) =>
-            api.repos
-              .pulls(org, org, repo, token)
+            queryClient
+              .fetchQuery({
+                queryKey: ["repo-pulls", org, repo, token],
+                queryFn: () => api.repos.pulls(org, org, repo, token),
+                staleTime: REPO_PULLS_STALE_MS,
+              })
               .then((r) => r.pulls.map((p) => ({ ...p, repo })))
               .catch((e: unknown) => {
                 failedRepos.push(repo)

apps/ui/app/releases/page.tsx

@@ -8,6 +8,7 @@ import { SectionError } from "@/components/section-error"
 import { relativeTime } from "@/lib/format"
 import { api } from "@/lib/api/client"
 import { useActiveScope } from "@/lib/active-scope"
+import { hasOrgLogin } from "@/lib/token-resolve"
 
 const DAY_OPTIONS = [30, 90, 180] as const
 
@@ -24,12 +25,12 @@ export default function ReleasesPage() {
   const resolveQuery = useQuery({
     queryKey: ["tokens.resolve", org],
     queryFn: () => api.tokens.resolve(org),
-    enabled: org.trim().length > 2,
+    enabled: hasOrgLogin(org),
     retry: false,
   })
 
   const token = resolveQuery.data?.token ?? ""
-  const queriesEnabled = org.trim().length > 2 && !resolveQuery.isLoading
+  const queriesEnabled = hasOrgLogin(org) && !resolveQuery.isLoading
 
   const releaseTimelineQuery = useQuery({
     queryKey: ["github.release-timeline", org, days],

apps/ui/app/repos/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react"
 import Link from "next/link"
-import { useMutation, useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { PageHeader } from "@/components/page-header"
 import { EmptyStateNoAccount } from "@/components/empty-state"
 import { Input } from "@/components/ui/input"
@@ -11,7 +11,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { Warning, Key, CircleNotch, Lock, Star, GitPullRequest, ArrowSquareOut } from "@phosphor-icons/react"
 import { api } from "@/lib/api/client"
 import { useActiveScope } from "@/lib/active-scope"
-import { shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { hasOrgLogin, shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { invalidateTokens } from "@/lib/query-invalidation"
 import { MiniSparkline } from "@/components/charts/mini-sparkline"
 import { relativeTime } from "@/lib/format"
 import { useInView } from "@/lib/use-in-view"
@@ -192,6 +193,7 @@ function RepoRow({ org, repo, token }: { org: string; repo: RepoSummary; token:
 }
 
 export default function ReposPage() {
+  const queryClient = useQueryClient()
   const [owner, setOwner] = useState("")
   const [token, setToken] = useState("")
   const [tokenSaved, setTokenSaved] = useState(false)
@@ -244,13 +246,16 @@ export default function ReposPage() {
   useEffect(() => {
     setToken("")
     setTokenSaved(false)
-    if (owner.trim().length > 2) resolveMutation.mutate(owner.trim())
+    if (hasOrgLogin(owner)) resolveMutation.mutate(owner.trim())
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [owner])
 
   const saveTokenMutation = useMutation({
     mutationFn: () => api.tokens.upsert(owner.trim(), token.trim()),
-    onSuccess: () => setTokenSaved(true),
+    onSuccess: () => {
+      setTokenSaved(true)
+      invalidateTokens(queryClient)
+    },
   })
 
   // Frozen when "Load repositories" fires so later owner/token edits don't retarget rendered rows.

apps/ui/app/security/page.tsx

@@ -16,7 +16,8 @@ import { api } from "@/lib/api/client"
 import { toCsv } from "@/lib/csv"
 import { downloadTextFile } from "@/lib/download"
 import { useActiveScope } from "@/lib/active-scope"
-import { shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { hasOrgLogin, shouldApplyResolvedToken } from "@/lib/token-resolve"
+import { invalidateTokens } from "@/lib/query-invalidation"
 import { DonutChart } from "@/components/charts/donut-chart"
 import { AreaTimeChart } from "@/components/charts/area-time-chart"
 import { BarGroupChart } from "@/components/charts/bar-group-chart"
@@ -151,19 +152,22 @@ export default function SecurityPage() {
   useEffect(() => {
     setToken("")
     setTokenSaved(false)
-    if (owner.trim().length > 2) resolveMutation.mutate(owner.trim())
+    if (hasOrgLogin(owner)) resolveMutation.mutate(owner.trim())
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [owner])
 
   const saveTokenMutation = useMutation({
     mutationFn: () => api.tokens.upsert(owner.trim(), token.trim()),
-    onSuccess: () => setTokenSaved(true),
+    onSuccess: () => {
+      setTokenSaved(true)
+      invalidateTokens(queryClient)
+    },
   })
 
   const historyQuery = useQuery({
     queryKey: ["analytics.history", owner],
     queryFn: () => api.analytics.history(owner),
-    enabled: owner.trim().length > 2,
+    enabled: hasOrgLogin(owner),
   })
 
   const scan = useMutation({

apps/ui/app/settings/page.tsx

@@ -20,6 +20,7 @@ import { useAuth } from "@/lib/auth-context"
 import { THEMES, useTheme } from "@/lib/theme"
 import type { InstallationMeta, MyOrgMembership, SavedTokenMeta } from "@/lib/api/types"
 import { githubWebUrl } from "@/lib/github-web"
+import { invalidateInstallations, invalidateTokens } from "@/lib/query-invalidation"
 
 
 function ProfileSection() {
@@ -270,7 +271,7 @@ function ConnectedOrgsSection() {
   const [confirmRow, setConfirmRow] = useState<ConnectedInstallation | null>(null)
 
   const personalQuery = useQuery<InstallationMeta[]>({
-    queryKey: ["installations", "me"],
+    queryKey: ["installations"],
     queryFn: () => api.installations.list(),
   })
   const membershipsQuery = useMyOrgMemberships()
@@ -279,7 +280,7 @@ function ConnectedOrgsSection() {
   // Only orgs the caller admins -- listForOrg is 403 for a plain member.
   const orgInstallQueries = useQueries({
     queries: adminOrgLogins.map((orgLogin) => ({
-      queryKey: ["installations", "org", orgLogin],
+      queryKey: ["installations.org", orgLogin],
       queryFn: () => api.installations.listForOrg(orgLogin),
       enabled: !membershipsQuery.isLoading,
     })),
@@ -307,7 +308,7 @@ function ConnectedOrgsSection() {
       return api.installations.remove(row.scope === "me" ? { scope: "me" } : { scope: "org", orgLogin: row.orgLogin }, row.installation_id)
     },
     onSuccess: (_data, row) => {
-      queryClient.invalidateQueries({ queryKey: ["installations"] })
+      invalidateInstallations(queryClient)
       setConfirmRow(null)
       toast.success(`Disconnected ${row.account_login}.`)
     },
@@ -450,7 +451,7 @@ function SavedTokensSection() {
   const upsert = useMutation({
     mutationFn: () => api.tokens.upsert(addOrg.trim(), addToken.trim(), addLabel.trim() || undefined),
     onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ["tokens"] })
+      invalidateTokens(qc)
       setAddOrg("")
       setAddToken("")
       setAddLabel("")
@@ -476,7 +477,7 @@ function SavedTokensSection() {
         next.delete(org)
         return next
       }),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["tokens"] }),
+    onSuccess: () => invalidateTokens(qc),
   })
 
   const canAdd = addOrg.trim().length > 0 && addToken.trim().length > 0

apps/ui/components/app-sidebar.tsx

@@ -254,10 +254,21 @@ export function AppSidebar() {
   })
 
   const healthDot = healthDotColor(cockpit?.latest_score)
-  const lastSeenAt = typeof window !== "undefined" ? localStorage.getItem(ACTIVITY_LAST_SEEN_KEY) : null
-  const unreadCount = (cockpit?.recent_events ?? []).filter(
-    (e) => !lastSeenAt || e.created_at > lastSeenAt,
-  ).length
+  // Read after mount (never during render: the server render has no localStorage, and it can throw
+  // in private mode) and again on navigation, since the Activity page writes the stamp when opened.
+  const [lastSeenAt, setLastSeenAt] = useState<string | null>(null)
+  useEffect(() => {
+    try {
+      setLastSeenAt(localStorage.getItem(ACTIVITY_LAST_SEEN_KEY))
+    } catch {
+      setLastSeenAt(null)
+    }
+  }, [pathname])
+  // On the Activity page itself everything is being seen right now.
+  const unreadCount =
+    pathname === "/activity"
+      ? 0
+      : (cockpit?.recent_events ?? []).filter((e) => !lastSeenAt || e.created_at > lastSeenAt).length
 
   useEffect(() => {
     if (!open) return