Merge ticket/023-dashboards-refresh-with-ui

Resolves a POLL_MS import conflict with ticket 025 in App.tsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/Dashboards.tsx

@@ -14,6 +14,7 @@ import {
   type Panel,
   type PromqlSeries,
 } from '../lib/api'
+import { POLL_MS } from '../lib/polling'
 import {
   CollapseToggle,
   handleSectionHeaderKeyDown,
@@ -44,11 +45,22 @@ function newPanelId(): string {
   return `panel-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
 }
 
-/// Fetches the panel's PromQL series on query/chart-type/range change; a malformed query must render as an inline error rather than crash the page.
+/// Fetches the panel's PromQL series on query/chart-type/range change, and also refetches on
+/// the same cadence as the rest of the app's polling (`POLL_MS`) so a panel doesn't go stale
+/// between rolling-preset ticks or under a fixed range. `tick` is the only thing that interval
+/// touches; it's folded into this single effect's dependency array (rather than driving a
+/// second, independent fetch effect) so a range change landing on the same tick still results
+/// in exactly one fetch instead of two racing ones.
 function PanelPreview({ panel, range }: { panel: Panel; range: TimeRange | null }) {
   const [series, setSeries] = useState<PromqlSeries[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
+  const [tick, setTick] = useState(0)
+
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), POLL_MS)
+    return () => clearInterval(id)
+  }, [])
 
   useEffect(() => {
     if (!panel.promql.trim()) {
@@ -75,7 +87,8 @@ function PanelPreview({ panel, range }: { panel: Panel; range: TimeRange | null
     return () => {
       cancelled = true
     }
-  }, [panel.promql, panel.chart_type, range?.startMs, range?.endMs])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [panel.promql, panel.chart_type, range?.startMs, range?.endMs, tick])
 
   if (error) {
     return <div className="rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{error}</div>