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/App.tsx

@@ -20,8 +20,7 @@ import {
 } from './lib/api'
 import { DocsNavProvider } from './lib/docsNav'
 import { useSettingsPanel } from './lib/useSettingsPanel'
-
-const POLL_MS = 2000
+import { POLL_MS } from './lib/polling'
 
 // Height (px) the log viewer had before it became resizable — kept as the default so existing
 // layouts don't jump on first load after this change.

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>

webapp/src/lib/polling.ts

@@ -0,0 +1,4 @@
+/// Shared polling cadence for the whole app — the log/timeline poll in `App.tsx` and any
+/// other section that should refresh on the same rhythm (e.g. dashboard panels) import this
+/// instead of hardcoding their own interval, so they can never drift apart.
+export const POLL_MS = 2000