feat: add auto-refresh toggle wired to all polling queries

Upgrade @cameleer/design-system to ^0.1.3 which adds LIVE/PAUSED
toggle to TopBar backed by autoRefresh state in GlobalFilterProvider.

Add useRefreshInterval() hook that returns the polling interval when
auto-refresh is on, or false when paused. Wire it into all query
hooks that use refetchInterval (executions, catalog, agents, metrics,
admin database/opensearch).

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

ui/src/api/queries/admin/database.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { adminFetch } from './admin-api';
+import { useRefreshInterval } from '../use-refresh-interval';
 
 // ── Types ──────────────────────────────────────────────────────────────
 
@@ -38,34 +39,38 @@ export interface ActiveQuery {
 // ── Query Hooks ────────────────────────────────────────────────────────
 
 export function useDatabaseStatus() {
+  const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
     queryKey: ['admin', 'database', 'status'],
     queryFn: () => adminFetch<DatabaseStatus>('/database/status'),
-    refetchInterval: 30_000,
+    refetchInterval,
   });
 }
 
 export function useConnectionPool() {
+  const refetchInterval = useRefreshInterval(10_000);
   return useQuery({
     queryKey: ['admin', 'database', 'pool'],
     queryFn: () => adminFetch<PoolStats>('/database/pool'),
-    refetchInterval: 10_000,
+    refetchInterval,
   });
 }
 
 export function useDatabaseTables() {
+  const refetchInterval = useRefreshInterval(60_000);
   return useQuery({
     queryKey: ['admin', 'database', 'tables'],
     queryFn: () => adminFetch<TableInfo[]>('/database/tables'),
-    refetchInterval: 60_000,
+    refetchInterval,
   });
 }
 
 export function useActiveQueries() {
+  const refetchInterval = useRefreshInterval(5_000);
   return useQuery({
     queryKey: ['admin', 'database', 'queries'],
     queryFn: () => adminFetch<ActiveQuery[]>('/database/queries'),
-    refetchInterval: 5_000,
+    refetchInterval,
   });
 }
 

ui/src/api/queries/admin/opensearch.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { adminFetch } from './admin-api';
+import { useRefreshInterval } from '../use-refresh-interval';
 
 // ── Types ──────────────────────────────────────────────────────────────
 
@@ -53,18 +54,20 @@ export interface PerformanceStats {
 // ── Query Hooks ────────────────────────────────────────────────────────
 
 export function useOpenSearchStatus() {
+  const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
     queryKey: ['admin', 'opensearch', 'status'],
     queryFn: () => adminFetch<OpenSearchStatus>('/opensearch/status'),
-    refetchInterval: 30_000,
+    refetchInterval,
   });
 }
 
 export function usePipelineStats() {
+  const refetchInterval = useRefreshInterval(10_000);
   return useQuery({
     queryKey: ['admin', 'opensearch', 'pipeline'],
     queryFn: () => adminFetch<PipelineStats>('/opensearch/pipeline'),
-    refetchInterval: 10_000,
+    refetchInterval,
   });
 }
 
@@ -83,10 +86,11 @@ export function useOpenSearchIndices(page = 0, size = 20, search = '') {
 }
 
 export function useOpenSearchPerformance() {
+  const refetchInterval = useRefreshInterval(30_000);
   return useQuery({
     queryKey: ['admin', 'opensearch', 'performance'],
     queryFn: () => adminFetch<PerformanceStats>('/opensearch/performance'),
-    refetchInterval: 30_000,
+    refetchInterval,
   });
 }