Global refresh rate in Settings drives every live view and each machine's sampler; per-page pickers removed

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

web/src/Settings.tsx

@@ -2,6 +2,7 @@ import { FormEvent, useCallback, useEffect, useState } from 'react'
 import { api, Me } from './api'
 import { applyTheme, currentThemeId, THEMES } from './themes'
 import { Btn, Loading, toast } from './ui'
+import { fmtMs, getRefreshMs, REFRESH_OPTIONS, setRefreshMs, LIST_FLOOR } from './prefs'
 
 const fmtUptime = (s: number) => { const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60); return d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m` }
 
@@ -29,6 +30,7 @@ function Preview({ vars }: { vars: Record<string, string> }) {
 
 export default function Settings({ me }: { me: Me }) {
   const [theme, setTheme] = useState(currentThemeId())
+  const [refresh, setRefresh] = useState(getRefreshMs())
   const [tokens, setTokens] = useState<{ name: string; created: string }[] | null>(null)
   const [cur, setCur] = useState('')
   const [pw1, setPw1] = useState('')
@@ -40,7 +42,11 @@ export default function Settings({ me }: { me: Me }) {
 
   const pick = async (id: string) => {
     applyTheme(id); setTheme(id)
-    try { await api.saveUIPrefs({ theme: id }) } catch { /* local still applied */ }
+    try { await api.saveUIPrefs({ theme: id, refreshMs: getRefreshMs() }) } catch { /* local still applied */ }
+  }
+  const pickRefresh = async (ms: number) => {
+    setRefreshMs(ms); setRefresh(ms)
+    try { await api.saveUIPrefs({ theme: currentThemeId(), refreshMs: ms }) } catch { /* local still applied */ }
   }
 
   async function changePassword(e: FormEvent) {
@@ -69,6 +75,17 @@ export default function Settings({ me }: { me: Me }) {
         ))}
       </div>
 
+      <div className="dash-bar"><h2 className="section">Refresh rate</h2><span className="spacer" /><span className="muted small">every live view, on every machine</span></div>
+      <section className="card">
+        <div className="chips">
+          {REFRESH_OPTIONS.map((ms) => <button key={ms} className={'chip' + (refresh === ms ? ' on' : '')} onClick={() => pickRefresh(ms)}>{fmtMs(ms)}</button>)}
+        </div>
+        <div className="muted small" style={{ marginTop: 8 }}>
+          Dashboard charts, the Processes tab, disk activity and the machine list all poll at this rate. The dashboard's sampler on each machine follows it too (fastest 100 ms, slowest 2 s; charts keep 300 points, so the window is 300 × rate).
+          Lists that shell out on the host — services, cron, updates — never go faster than {fmtMs(LIST_FLOOR)}.
+        </div>
+      </section>
+
       <div className="dash-bar"><h2 className="section">Account · {me.host}</h2></div>
       <form className="card addform" onSubmit={changePassword}>
         <label>Current password <input type="password" value={cur} onChange={(e) => setCur(e.target.value)} autoComplete="current-password" required /></label>