Configurable update interval (100 ms – 2 s): drives daemon sampling and UI polling, saved with the dashboard layout

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Dashboard.tsx

@@ -22,16 +22,22 @@ const MODULES: Module[] = [
 ]
 const byId = (id: string) => MODULES.find((m) => m.id === id)
 
-interface Layout { order: string[]; hidden: Set<string>; hiddenItems: Set<string> }
+const INTERVALS = [100, 250, 500, 1000, 2000] as const
+const DEFAULT_INTERVAL = 2000
+
+interface Layout { order: string[]; hidden: Set<string>; hiddenItems: Set<string>; intervalMs: number }
 
 // Unknown ids are dropped, missing ones appended, so an old saved layout survives new modules.
 function normalize(p: DashPrefs): Layout {
   const known = new Set(MODULES.map((m) => m.id))
   const order = (p.order ?? []).filter((id) => known.has(id))
   for (const m of MODULES) if (!order.includes(m.id)) order.push(m.id)
-  return { order, hidden: new Set((p.hidden ?? []).filter((id) => known.has(id))), hiddenItems: new Set(p.hiddenItems ?? []) }
+  const iv = p.intervalMs && p.intervalMs >= 100 && p.intervalMs <= 2000 ? p.intervalMs : DEFAULT_INTERVAL
+  return { order, hidden: new Set((p.hidden ?? []).filter((id) => known.has(id))), hiddenItems: new Set(p.hiddenItems ?? []), intervalMs: iv }
 }
-const toPrefs = (l: Layout): DashPrefs => ({ order: l.order, hidden: [...l.hidden], hiddenItems: [...l.hiddenItems] })
+const toPrefs = (l: Layout): DashPrefs => ({ order: l.order, hidden: [...l.hidden], hiddenItems: [...l.hiddenItems], intervalMs: l.intervalMs })
+const fmtMs = (ms: number) => (ms >= 1000 ? `${ms / 1000} s` : `${ms} ms`)
+const fmtWindow = (ms: number) => { const s = Math.round((MAX * ms) / 1000); return s >= 60 ? `${Math.round(s / 60)} min` : `${s} s` }
 
 // ---- formatting ----
 function push(arr: number[], v: number) { arr.push(v); if (arr.length > MAX) arr.shift() }
@@ -256,6 +262,8 @@ export default function Dashboard() {
   const [editing, setEditing] = useState(false)
   const hist = useRef<Series | null>(null)
   const saveTimer = useRef<number | undefined>(undefined)
+  const intervalRef = useRef(DEFAULT_INTERVAL)
+  intervalRef.current = layout.intervalMs
 
   // Persist layout changes server-side (debounced) so every device sees the same dashboard.
   const update = useCallback((fn: (l: Layout) => Layout) => {
@@ -300,9 +308,9 @@ export default function Dashboard() {
           setLatest(s); setErr('')
         } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
       }
-      timer = window.setTimeout(tick, 2000)
+      timer = window.setTimeout(tick, intervalRef.current)
     }
-    seed().then(() => { timer = window.setTimeout(tick, 2000) })
+    seed().then(() => { timer = window.setTimeout(tick, intervalRef.current) })
     const onVis = () => { if (document.visibilityState === 'visible' && !hist.current) seed() }
     document.addEventListener('visibilitychange', onVis)
     return () => { stop = true; clearTimeout(timer); document.removeEventListener('visibilitychange', onVis) }
@@ -351,7 +359,14 @@ export default function Dashboard() {
     <div className={'dash' + (editing ? ' editing' : '')}>
       <div className="dash-bar">
         {err && <span className="error">{err}</span>}
-        {editing && <span className="hint">Reorder with ▲▼, hide modules or single rows with ✕. Layout is saved as you go.</span>}
+        {editing ? (
+          <label className="hint">Update every
+            <select className="btn" value={layout.intervalMs} onChange={(e) => update((l) => ({ ...l, intervalMs: Number(e.target.value) }))}>
+              {INTERVALS.map((ms) => <option key={ms} value={ms}>{fmtMs(ms)}</option>)}
+            </select>
+            · charts show the last {fmtWindow(layout.intervalMs)} · ▲▼ reorder, ✕ hides a module or row
+          </label>
+        ) : <span className="hint">last {fmtWindow(latest.interval_ms || layout.intervalMs)} · {fmtMs(latest.interval_ms || layout.intervalMs)}</span>}
         <span className="spacer" />
         {editing && <button className="btn" onClick={reset}>Reset</button>}
         <button className={'btn' + (editing ? ' on' : '')} onClick={() => setEditing(!editing)}>{editing ? 'Done' : 'Customize'}</button>