fix(den): stabilize background agent loading (#1189)

Co-authored-by: src-opn <src-opn@users.noreply.github.com>

ee/apps/den-web/app/(den)/_providers/den-flow-provider.tsx

@@ -133,7 +133,7 @@ type DenFlowContextValue = {
   selectedStatusMeta: { label: string; bucket: WorkerStatusBucket };
   isSelectedWorkerFailed: boolean;
   ownedWorkerCount: number;
-  refreshWorkers: (options?: { keepSelection?: boolean }) => Promise<void>;
+  refreshWorkers: (options?: { keepSelection?: boolean; quiet?: boolean }) => Promise<void>;
   launchWorker: (options?: { source?: "manual" | "signup_auto"; workerNameOverride?: string }) => Promise<LaunchWorkerResult>;
   checkWorkerStatus: (options?: { workerId?: string; quiet?: boolean; background?: boolean }) => Promise<void>;
   generateWorkerToken: () => Promise<void>;
@@ -229,6 +229,7 @@ export function DenFlowProvider({ children }: { children: ReactNode }) {
   const [onboardingIntent, setOnboardingIntent] = useState<OnboardingIntent | null>(() => readLocalStorage<OnboardingIntent>(ONBOARDING_INTENT_STORAGE_KEY));
   const onboardingAutoLaunchKeyRef = useRef<string | null>(null);
   const socialSignupHandledRef = useRef<string | null>(null);
+  const pendingWorkersRequestRef = useRef<Promise<{ response: Response; payload: unknown }> | null>(null);
 
   const selectedWorker = workers.find((item) => item.workerId === workerLookupId) ?? null;
   const activeWorker =
@@ -583,10 +584,14 @@ export function DenFlowProvider({ children }: { children: ReactNode }) {
     }
 
     try {
-      const { response, payload } = await requestJson("/v1/workers?limit=20", {
-        method: "GET",
-        headers: authToken ? { Authorization: `Bearer ${authToken}` } : undefined
-      });
+      if (!pendingWorkersRequestRef.current) {
+        pendingWorkersRequestRef.current = requestJson("/v1/workers?limit=20", {
+          method: "GET",
+          headers: authToken ? { Authorization: `Bearer ${authToken}` } : undefined
+        });
+      }
+
+      const { response, payload } = await pendingWorkersRequestRef.current;
 
       if (!response.ok) {
         if (!options.quiet) {
@@ -640,6 +645,7 @@ export function DenFlowProvider({ children }: { children: ReactNode }) {
       }
       setWorkersLoadedOnce(true);
     } finally {
+      pendingWorkersRequestRef.current = null;
       if (!options.quiet) {
         setWorkersBusy(false);
       }
@@ -1583,7 +1589,6 @@ export function DenFlowProvider({ children }: { children: ReactNode }) {
       setPendingRestoredWorkerId(null);
       setLaunchStatus("Worker is ready to connect.");
       appendEvent("success", "Owner token ready", `Worker ID ${id}`);
-      void refreshWorkers({ keepSelection: true });
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unknown network error";
       setLaunchError(message);

ee/apps/den-web/app/(den)/o/[orgSlug]/dashboard/_components/background-agents-screen.tsx

@@ -197,13 +197,16 @@ export function BackgroundAgentsScreen() {
 
       <div className="den-list-shell">
         <div className="px-5 py-5">
-          <p className="den-eyebrow">{workers.length > 0 ? "Current sandboxes" : "Example workflows"}</p>
+          <div className="flex items-center gap-3">
+            <p className="den-eyebrow">{workers.length > 0 ? "Current sandboxes" : "Example workflows"}</p>
+            {workersLoadedOnce && workersBusy ? <span className="text-xs text-[var(--dls-text-secondary)]">Refreshing...</span> : null}
+          </div>
           <h2 className="mt-2 text-2xl font-semibold tracking-tight text-[var(--dls-text-primary)]">
             Background workflows
           </h2>
         </div>
 
-        {!workersLoadedOnce || workersBusy ? (
+        {!workersLoadedOnce ? (
           <div className="den-list-row text-sm text-[var(--dls-text-secondary)]">Loading sandboxes...</div>
         ) : workers.length > 0 ? (
           workers.map((worker) => {

ee/apps/den-web/app/(den)/o/[orgSlug]/dashboard/_providers/org-dashboard-provider.tsx

@@ -49,7 +49,7 @@ export function OrgDashboardProvider({
   children: ReactNode;
 }) {
   const router = useRouter();
-  const { user, sessionHydrated, signOut, refreshWorkers } = useDenFlow();
+  const { user, sessionHydrated, signOut, refreshWorkers, workersLoadedOnce } = useDenFlow();
   const [orgDirectory, setOrgDirectory] = useState<DenOrgSummary[]>([]);
   const [orgContext, setOrgContext] = useState<DenOrgContext | null>(null);
   const [orgBusy, setOrgBusy] = useState(false);
@@ -103,7 +103,7 @@ export function OrgDashboardProvider({
 
       setOrgDirectory(directory.map((entry) => ({ ...entry, isActive: entry.slug === context.organization.slug })));
       setOrgContext(context);
-      await refreshWorkers({ keepSelection: false });
+      await refreshWorkers({ keepSelection: false, quiet: workersLoadedOnce });
     } catch (error) {
       setOrgError(error instanceof Error ? error.message : "Failed to load organization details.");
     } finally {