feat: LIVE/PAUSED toggle controls data fetching on sidebar navigation

LIVE: sidebar clicks trigger initial fetch + polling for the new route.
PAUSED: sidebar clicks navigate but queries are disabled — no fetches
until the user switches back to LIVE.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/api/queries/executions.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../client';
 import type { SearchRequest } from '../types';
-import { useRefreshInterval } from './use-refresh-interval';
+import { useLiveQuery } from './use-refresh-interval';
 
 export function useExecutionStats(
   timeFrom: string | undefined,
@@ -9,7 +9,7 @@ export function useExecutionStats(
   routeId?: string,
   application?: string,
 ) {
-  const refetchInterval = useRefreshInterval(10_000);
+  const live = useLiveQuery(10_000);
   return useQuery({
     queryKey: ['executions', 'stats', timeFrom, timeTo, routeId, application],
     queryFn: async () => {
@@ -26,14 +26,14 @@ export function useExecutionStats(
       if (error) throw new Error('Failed to load stats');
       return data!;
     },
-    enabled: !!timeFrom,
+    enabled: !!timeFrom && live.enabled,
     placeholderData: (prev) => prev,
-    refetchInterval,
+    refetchInterval: live.refetchInterval,
   });
 }
 
 export function useSearchExecutions(filters: SearchRequest, live = false) {
-  const refetchInterval = useRefreshInterval(5_000);
+  const liveQuery = useLiveQuery(5_000);
   return useQuery({
     queryKey: ['executions', 'search', filters],
     queryFn: async () => {
@@ -44,7 +44,8 @@ export function useSearchExecutions(filters: SearchRequest, live = false) {
       return data!;
     },
     placeholderData: (prev) => prev,
-    refetchInterval: live ? refetchInterval : false,
+    enabled: live ? liveQuery.enabled : true,
+    refetchInterval: live ? liveQuery.refetchInterval : false,
   });
 }
 
@@ -54,7 +55,7 @@ export function useStatsTimeseries(
   routeId?: string,
   application?: string,
 ) {
-  const refetchInterval = useRefreshInterval(30_000);
+  const live = useLiveQuery(30_000);
   return useQuery({
     queryKey: ['executions', 'timeseries', timeFrom, timeTo, routeId, application],
     queryFn: async () => {
@@ -72,9 +73,9 @@ export function useStatsTimeseries(
       if (error) throw new Error('Failed to load timeseries');
       return data!;
     },
-    enabled: !!timeFrom,
+    enabled: !!timeFrom && live.enabled,
     placeholderData: (prev) => prev,
-    refetchInterval,
+    refetchInterval: live.refetchInterval,
   });
 }