Fix auto-refresh on workflow details page (#671)

Author: fernandol-nvidia

src/ui/src/components/refresh/use-refresh-control-state.ts

@@ -15,6 +15,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useCallback } from "react";
+import { useInterval } from "usehooks-ts";
 import { useMounted } from "@/hooks/use-mounted";
 import { useRefreshAnimation } from "@/components/refresh/use-refresh-animation";
 import { formatInterval } from "@/lib/format-interval";
@@ -40,6 +41,10 @@ export function useRefreshControlState(props: RefreshControlProps) {
     [setInterval],
   );
 
+  // Auto-refresh timer: fires onRefresh at the selected interval.
+  // useInterval handles callback stability internally and accepts null to pause.
+  useInterval(onRefresh, mounted && isAutoRefreshActive ? interval : null);
+
   return {
     mounted,
     clickCount,

src/ui/src/components/refresh/vertical-refresh-control.tsx

@@ -134,7 +134,13 @@ export function VerticalRefreshControl(props: RefreshControlProps) {
             <span className="sr-only">Refresh workflow</span>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{isRefreshing ? "Refreshing..." : "Refresh workflow"}</TooltipContent>
+        <TooltipContent side="left">
+          {isRefreshing
+            ? "Refreshing..."
+            : isAutoRefreshActive
+              ? `Refresh workflow (auto-refresh: ${intervalLabel})`
+              : "Refresh workflow"}
+        </TooltipContent>
       </Tooltip>
 
       <DropdownMenu>

src/ui/src/features/pools/components/pools-page-content.tsx

@@ -30,7 +30,7 @@
 
 "use client";
 
-import { useMemo, useCallback } from "react";
+import { useMemo } from "react";
 import { InlineErrorBoundary } from "@/components/error/inline-error-boundary";
 import { usePage } from "@/components/chrome/page-context";
 import { useResultsCount } from "@/components/filter-bar/hooks/use-results-count";
@@ -106,7 +106,6 @@ export function PoolsPageContent() {
   } = usePoolsData({
     searchChips: effectiveChips,
     accessiblePoolNames,
-    refetchInterval: autoRefresh.effectiveInterval,
   });
 
   // ==========================================================================
@@ -125,14 +124,6 @@ export function PoolsPageContent() {
     onClosed: clearSelectedPool,
   });
 
-  // Open panel with a pool (URL-synced)
-  const handlePoolSelect = useCallback(
-    (poolName: string) => {
-      setSelectedPoolName(poolName);
-    },
-    [setSelectedPoolName],
-  );
-
   // Results count for FilterBar display (consolidated hook)
   const resultsCount = useResultsCount({ total, filteredTotal, hasActiveFilters });
 
@@ -203,7 +194,7 @@ export function PoolsPageContent() {
             isLoading={isLoading}
             error={error ?? undefined}
             onRetry={refetch}
-            onPoolSelect={handlePoolSelect}
+            onPoolSelect={setSelectedPoolName}
             selectedPoolName={selectedPoolName}
             onSearchChipsChange={handleChipsChange}
           />
@@ -236,7 +227,7 @@ export function PoolsPageContent() {
           <PanelContent
             pool={selectedPool}
             sharingGroups={sharingGroups}
-            onPoolSelect={handlePoolSelect}
+            onPoolSelect={setSelectedPoolName}
             selectedPlatform={selectedPlatform}
             onPlatformSelect={setSelectedPlatform}
           />

src/ui/src/features/workflows/detail/components/workflow-detail-content.tsx

@@ -48,7 +48,7 @@
 "use client";
 
 import { usePage } from "@/components/chrome/page-context";
-import { WorkflowDetailInnerWithProvider } from "@/features/workflows/detail/components/workflow-detail-inner";
+import { WorkflowDetailInner } from "@/features/workflows/detail/components/workflow-detail-inner";
 
 // =============================================================================
 // Direct Import for ReactFlow
@@ -115,7 +115,7 @@ export function WorkflowDetailContent({ name, initialView }: WorkflowDetailConte
   // No top-level boundary - components handle their own errors for granular failure isolation
   return (
     <div className="h-full">
-      <WorkflowDetailInnerWithProvider
+      <WorkflowDetailInner
         name={name}
         initialView={initialView}
       />

src/ui/src/features/workflows/detail/components/workflow-detail-inner.tsx

@@ -149,7 +149,6 @@ function WorkflowDetailContent({ name, initialView }: WorkflowDetailInnerProps)
 
   const { workflow, groupsWithLayout, isLoading, error, refetch, isNotFound, isTerminal } = useWorkflowDetail({
     name,
-    refetchInterval: autoRefresh.effectiveInterval,
   });
 
   // Terminal workflows force interval to 0 (display only - polling already stopped)
@@ -483,5 +482,3 @@ function WorkflowDetailContent({ name, initialView }: WorkflowDetailInnerProps)
     </ShellProvider>
   );
 }
-
-export { WorkflowDetailInner as WorkflowDetailInnerWithProvider };

src/ui/src/features/workflows/list/components/workflows-page-content.tsx

@@ -73,7 +73,6 @@ export function WorkflowsPageContent({ initialUsername }: WorkflowsPageContentPr
     searchChips: effectiveChips,
     showAllUsers: optOut,
     sortDirection,
-    refetchInterval: autoRefresh.effectiveInterval,
   });
 
   const resultsCount = useResultsCount({ total, filteredTotal, hasActiveFilters });