feat(web): seed permission sync banner with server-side initial state

CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed text inside angle brackets (e.g., `<id>`) being hidden in chat prompt display due to HTML parsing. [#929](https://github.com/sourcebot-dev/sourcebot/pull/929) [#932](https://github.com/sourcebot-dev/sourcebot/pull/932)
+- Fixed permission sync banner flashing on initial page load. [#942](https://github.com/sourcebot-dev/sourcebot/pull/942)
+- Fixed issue where the permission sync banner would sometimes not appear until the page was refreshed. [#942](https://github.com/sourcebot-dev/sourcebot/pull/942)
 
 ## [4.11.7] - 2026-02-23
 

packages/web/src/app/[domain]/components/permissionSyncBanner.tsx

@@ -11,7 +11,11 @@ import { usePrevious } from "@uidotdev/usehooks";
 
 const POLL_INTERVAL_MS = 5000;
 
-export function PermissionSyncBanner() {
+interface PermissionSyncBannerProps {
+    initialHasPendingFirstSync: boolean;
+}
+
+export function PermissionSyncBanner({ initialHasPendingFirstSync }: PermissionSyncBannerProps) {
     const router = useRouter();
 
     const { data: hasPendingFirstSync, isError, isPending } = useQuery({
@@ -25,6 +29,9 @@ export function PermissionSyncBanner() {
             // Keep polling while sync is in progress, stop when done
             return hasPendingFirstSync ? POLL_INTERVAL_MS : false;
         },
+        initialData: {
+            hasPendingFirstSync: initialHasPendingFirstSync,
+        }
     });
 
     const previousHasPendingFirstSync = usePrevious(hasPendingFirstSync);

packages/web/src/app/[domain]/layout.tsx

@@ -26,6 +26,7 @@ import { UpgradeToast } from "./components/upgradeToast";
 import { getLinkedAccountProviderStates } from "@/ee/features/permissionSyncing/actions";
 import { LinkAccounts } from "@/ee/features/permissionSyncing/components/linkAccounts";
 import { PermissionSyncBanner } from "./components/permissionSyncBanner";
+import { getPermissionSyncStatus } from "../api/(server)/ee/permissionSyncStatus/api";
 
 interface LayoutProps {
     children: React.ReactNode,
@@ -190,12 +191,18 @@ export default async function Layout(props: LayoutProps) {
         )
     }
     const isPermissionSyncBannerVisible = session && hasEntitlement("permission-syncing");
+    const hasPendingFirstSync = isPermissionSyncBannerVisible ? (await getPermissionSyncStatus()) : null;
 
     return (
         <SyntaxGuideProvider>
             {
                 isPermissionSyncBannerVisible ? (
-                    <PermissionSyncBanner />
+                    <PermissionSyncBanner
+                        initialHasPendingFirstSync={(isServiceError(hasPendingFirstSync) || hasPendingFirstSync === null) ?
+                            false :
+                            hasPendingFirstSync.hasPendingFirstSync
+                        }
+                    />
                 ) : null
             }
             {children}

packages/web/src/app/api/(server)/ee/permissionSyncStatus/api.ts

@@ -0,0 +1,60 @@
+'use server';
+
+import { ServiceError } from "@/lib/serviceError";
+import { withAuthV2 } from "@/withAuthV2";
+import { env, getEntitlements } from "@sourcebot/shared";
+import { AccountPermissionSyncJobStatus } from "@sourcebot/db";
+import { StatusCodes } from "http-status-codes";
+import { ErrorCode } from "@/lib/errorCodes";
+import { sew } from "@/actions";
+
+export interface PermissionSyncStatusResponse {
+    hasPendingFirstSync: boolean;
+}
+
+/**
+ * Returns whether a user has a account that has it's permissions
+ * synced for the first time.
+ */
+export const getPermissionSyncStatus = async (): Promise<PermissionSyncStatusResponse | ServiceError> => sew(async () =>
+    withAuthV2(async ({ prisma, user }) => {
+        const entitlements = getEntitlements();
+        if (!entitlements.includes('permission-syncing')) {
+            return {
+                statusCode: StatusCodes.FORBIDDEN,
+                errorCode: ErrorCode.INSUFFICIENT_PERMISSIONS,
+                message: "Permission syncing is not enabled for your license",
+            } satisfies ServiceError;
+        }
+
+
+        const accounts = await prisma.account.findMany({
+            where: {
+                userId: user.id,
+                provider: { in: ['github', 'gitlab', 'bitbucket-cloud', 'bitbucket-server'] }
+            },
+            include: {
+                permissionSyncJobs: {
+                    orderBy: { createdAt: 'desc' },
+                    take: 1,
+                }
+            }
+        });
+
+        const activeStatuses: AccountPermissionSyncJobStatus[] = [
+            AccountPermissionSyncJobStatus.PENDING,
+            AccountPermissionSyncJobStatus.IN_PROGRESS
+        ];
+
+        const hasPendingFirstSync = env.EXPERIMENT_EE_PERMISSION_SYNC_ENABLED === 'true' &&
+            accounts.some(account =>
+                account.permissionSyncedAt === null &&
+                // @note: to handle the case where the permission sync job
+                // has not yet been scheduled for a new account, we consider
+                // accounts with no permission sync jobs as having a pending first sync.
+                (account.permissionSyncJobs.length === 0 || (account.permissionSyncJobs.length > 0 && activeStatuses.includes(account.permissionSyncJobs[0].status)))
+            )
+
+        return { hasPendingFirstSync } satisfies PermissionSyncStatusResponse;
+    })
+)

packages/web/src/app/api/(server)/ee/permissionSyncStatus/route.ts

@@ -1,59 +1,15 @@
-'use server';
-
 import { apiHandler } from "@/lib/apiHandler";
 import { serviceErrorResponse } from "@/lib/serviceError";
 import { isServiceError } from "@/lib/utils";
-import { withAuthV2 } from "@/withAuthV2";
-import { getEntitlements } from "@sourcebot/shared";
-import { AccountPermissionSyncJobStatus } from "@sourcebot/db";
 import { StatusCodes } from "http-status-codes";
-import { ErrorCode } from "@/lib/errorCodes";
-
-export interface PermissionSyncStatusResponse {
-    hasPendingFirstSync: boolean;
-}
+import { getPermissionSyncStatus } from "./api";
 
 /**
  * Returns whether a user has a account that has it's permissions
  * synced for the first time.
  */
 export const GET = apiHandler(async () => {
-    const entitlements = getEntitlements();
-    if (!entitlements.includes('permission-syncing')) {
-        return serviceErrorResponse({
-            statusCode: StatusCodes.FORBIDDEN,
-            errorCode: ErrorCode.INSUFFICIENT_PERMISSIONS,
-            message: "Permission syncing is not enabled for your license",
-        });
-    }
-
-    const result = await withAuthV2(async ({ prisma, user }) => {
-        const accounts = await prisma.account.findMany({
-            where: {
-                userId: user.id,
-                provider: { in: ['github', 'gitlab', 'bitbucket-cloud', 'bitbucket-server'] }
-            },
-            include: {
-                permissionSyncJobs: {
-                    orderBy: { createdAt: 'desc' },
-                    take: 1,
-                }
-            }
-        });
-
-        const activeStatuses: AccountPermissionSyncJobStatus[] = [
-            AccountPermissionSyncJobStatus.PENDING,
-            AccountPermissionSyncJobStatus.IN_PROGRESS
-        ];
-
-        const hasPendingFirstSync = accounts.some(account =>
-            account.permissionSyncedAt === null &&
-            account.permissionSyncJobs.length > 0 &&
-            activeStatuses.includes(account.permissionSyncJobs[0].status)
-        );
-
-        return { hasPendingFirstSync } satisfies PermissionSyncStatusResponse;
-    });
+    const result = await getPermissionSyncStatus();
 
     if (isServiceError(result)) {
         return serviceErrorResponse(result);