diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx index c583917b..cfb2bdbd 100644 --- a/ui/src/components/LayoutShell.tsx +++ b/ui/src/components/LayoutShell.tsx @@ -16,6 +16,7 @@ import { } from '@cameleer/design-system'; import type { SearchResult, SidebarTreeNode } from '@cameleer/design-system'; import { Box, Settings, FileText, ChevronRight, Square, Pause, Star, X } from 'lucide-react'; +import { useQueryClient } from '@tanstack/react-query'; import { useRouteCatalog } from '../api/queries/catalog'; import { useAgents } from '../api/queries/agents'; import { useSearchExecutions, useAttributeKeys } from '../api/queries/executions'; @@ -270,7 +271,8 @@ const SK_COLLAPSED = 'sidebar:collapsed'; function LayoutContent() { const navigate = useNavigate(); const location = useLocation(); - const { timeRange } = useGlobalFilters(); + const queryClient = useQueryClient(); + const { timeRange, autoRefresh } = useGlobalFilters(); const { data: catalog } = useRouteCatalog(timeRange.start.toISOString(), timeRange.end.toISOString()); const { data: agents } = useAgents(); const { data: attributeKeys } = useAttributeKeys(); @@ -329,12 +331,13 @@ function LayoutContent() { } if (appsOpen) { // Already open — navigate to all applications + if (!autoRefresh) queryClient.invalidateQueries(); navigate(`/${scope.tab}`); } else { setAppsOpen(true); writeCollapsed(SK_APPS, true); } - }, [isAdminPage, appsOpen, navigate, scope.tab]); + }, [isAdminPage, appsOpen, navigate, scope.tab, autoRefresh, queryClient]); const toggleAdmin = useCallback(() => { if (!isAdminPage) { @@ -557,6 +560,11 @@ function LayoutContent() { const handleSidebarNavigate = useCallback((path: string) => { const state = { sidebarReveal: path }; + // When not auto-refreshing, treat navigation as a manual refresh + if (!autoRefresh) { + queryClient.invalidateQueries(); + } + const appMatch = path.match(/^\/apps\/([^/]+)(?:\/(.+))?$/); if (appMatch) { const [, sAppId, sRouteId] = appMatch; @@ -572,7 +580,7 @@ function LayoutContent() { } navigate(path, { state }); - }, [navigate, scope.tab]); + }, [navigate, scope.tab, autoRefresh, queryClient]); // --- Render ------------------------------------------------------- const camelLogo = (