Sensors: read-only tokens, live stream, Prometheus, status sensors, widgets, embeds

- sensors:read tokens open the sensor endpoints (here and on managed machines
  through the hub) and nothing else; full tokens are never accepted from a URL
- /api/sensors/stream: a shaped query that keeps answering, over SSE
- /metrics: Prometheus text format
- services, updates, ZFS and SMART as background status sensors
- widget library over the sensor API; custom widgets on the dashboard
- /embed/widget: one live widget in its own bundle, the only frameable path
- Dashboard tab is now Monitors

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

web/src/Dashboard.tsx

@@ -3,6 +3,9 @@ import { api, DashPrefs, Sample, Series, Temp } from './api'
 import Sparkline from './Sparkline'
 import { Loading, Spinner, toast } from './ui'
 import { fmtMs, useRefreshMs } from './prefs'
+import { useSensorStream } from './sensors'
+import { Widget, WidgetData, WidgetSpec, shapeOf } from './widgets'
+import WidgetPicker from './WidgetPicker'
 
 const MAX = 300
 const S1 = 'var(--s1)', S2 = 'var(--s2)'
@@ -27,7 +30,7 @@ const byId = (id: string) => MODULES.find((m) => m.id === id)
 const DEFAULT_INTERVAL = 2000
 const clampSampler = (ms: number) => Math.min(10000, Math.max(100, ms))
 
-interface Layout { order: string[]; hidden: Set<string>; hiddenItems: Set<string>; intervalMs: number }
+interface Layout { order: string[]; hidden: Set<string>; hiddenItems: Set<string>; intervalMs: number; widgets: WidgetSpec[] }
 
 // Unknown ids are dropped, missing ones appended, so an old saved layout survives new modules.
 function normalize(p: DashPrefs): Layout {
@@ -35,9 +38,10 @@ function normalize(p: DashPrefs): Layout {
   const order = (p.order ?? []).filter((id) => known.has(id))
   for (const m of MODULES) if (!order.includes(m.id)) order.push(m.id)
   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 }
+  return { order, hidden: new Set((p.hidden ?? []).filter((id) => known.has(id))), hiddenItems: new Set(p.hiddenItems ?? []), intervalMs: iv,
+    widgets: (p.widgets ?? []).filter((w) => w && typeof w.id === 'string' && typeof w.sensor === 'string') }
 }
-const toPrefs = (l: Layout): DashPrefs => ({ order: l.order, hidden: [...l.hidden], hiddenItems: [...l.hiddenItems], intervalMs: l.intervalMs })
+const toPrefs = (l: Layout): DashPrefs => ({ order: l.order, hidden: [...l.hidden], hiddenItems: [...l.hiddenItems], intervalMs: l.intervalMs, widgets: l.widgets })
 const fmtWindow = (ms: number) => { const s = Math.round((MAX * ms) / 1000); return s >= 60 ? `${Math.round(s / 60)} min` : `${s} s` }
 
 // ---- formatting ----
@@ -337,6 +341,10 @@ export default function Dashboard() {
     if (layout.intervalMs !== want) update((l) => ({ ...l, intervalMs: want }))
   }, [refreshMs, loaded]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Custom widgets are fed by one shaped query over the sensor stream — the same API any outside dashboard uses.
+  const [picking, setPicking] = useState(false)
+  const live = useSensorStream<Record<string, WidgetData>>(shapeOf(layout.widgets))
+
   if (!latest) return <div className="dash">{err ? <div className="error">{err}</div> : <Loading label="Collecting metrics…" />}</div>
 
   const edit: Edit = {
@@ -396,6 +404,24 @@ export default function Dashboard() {
           {visible('tile').map((id) => <div className="tile" key={id}>{tools(id, 'tile')}{body(id, ctx)}</div>)}
         </div>
       )}
+      {(layout.widgets.length > 0 || editing) && (
+        <div className="kpis widgets">
+          {layout.widgets.map((w, i) => (
+            <div className={'tile w-' + w.type} key={w.id}>
+              {editing && (
+                <div className="mod-tools">
+                  <button title="move left" disabled={i === 0} onClick={() => update((l) => { const a = [...l.widgets]; [a[i - 1], a[i]] = [a[i], a[i - 1]]; return { ...l, widgets: a } })}>◀</button>
+                  <button title="move right" disabled={i === layout.widgets.length - 1} onClick={() => update((l) => { const a = [...l.widgets]; [a[i + 1], a[i]] = [a[i], a[i + 1]]; return { ...l, widgets: a } })}>▶</button>
+                  <button title="remove widget" onClick={() => update((l) => ({ ...l, widgets: l.widgets.filter((x) => x.id !== w.id) }))}>remove</button>
+                </div>
+              )}
+              <Widget spec={w} data={live.data ? live.data[w.id] : undefined} />
+            </div>
+          ))}
+          {editing && <button className="tile add-widget" onClick={() => setPicking(true)}>+ Add widget</button>}
+        </div>
+      )}
+      {picking && <WidgetPicker onClose={() => setPicking(false)} onAdd={(w) => { update((l) => ({ ...l, widgets: [...l.widgets, w] })); setPicking(false) }} />}
       {visible('card').length > 0 && (
         <div className="cards">
           {visible('card').map((id) => <section className="card" key={id}>{tools(id, 'card')}{body(id, ctx)}</section>)}