Widgets tab: every widget type and every sensor, live, one of each

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

web/src/Gallery.tsx

@@ -0,0 +1,75 @@
+// Every widget type, then every sensor on this machine, each drawn once and live. It is
+// the catalog made visible: what exists, what it's called, and what it looks like.
+import { useEffect, useMemo, useState } from 'react'
+import { Sensor, fetchCatalog, fraction, useSensorStream } from './sensors'
+import { WIDGET_TYPES, Widget, WidgetData, WidgetSpec, WidgetType } from './widgets'
+import { useRefreshMs } from './prefs'
+import { Loading, toast } from './ui'
+
+const FAMILY: Record<string, string> = {
+  cpu: 'CPU', load: 'Load', uptime: 'Uptime', mem: 'Memory', swap: 'Swap', temp: 'Temperatures', fan: 'Fans', net: 'Network', disk: 'Disks',
+  fs: 'Filesystems', ups: 'UPS', zfs: 'ZFS', smart: 'Drive health', services: 'Services', service: 'Each service', containers: 'Containers',
+  container: 'Each container', updates: 'Updates', hamlab: 'Ham Lab',
+}
+const ORDER = Object.keys(FAMILY)
+
+// The widget a sensor suits best: a gauge for a percentage, a bar for anything else with a
+// scale, a plain number or word for the rest.
+function best(s: Sensor): WidgetType {
+  if (fraction(s) === null) return 'stat'
+  return s.unit === '%' ? 'gauge' : 'bar'
+}
+
+const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); toast(`copied ${text}`) } catch { toast(text) } }
+
+function Tile({ spec, data, note }: { spec: WidgetSpec; data: WidgetData; note: string }) {
+  return (
+    <button className={'tile gallery-tile w-' + spec.type} title="copy the sensor ID" onClick={() => copy(spec.sensor)}>
+      <Widget spec={spec} data={data} />
+      <div className="gallery-id mono">{note}</div>
+    </button>
+  )
+}
+
+export default function Gallery() {
+  const [cat, setCat] = useState<Sensor[] | null>(null)
+  const [err, setErr] = useState('')
+  const rate = useRefreshMs()
+  useEffect(() => { fetchCatalog().then(setCat).catch((e) => setErr(e instanceof Error ? e.message : 'failed')) }, [])
+  // Values only, at most once a second: the catalog already holds everything that doesn't change.
+  const live = useSensorStream<[Record<string, Sensor['value']>]>(['*'], { full: false, everyMs: Math.max(1000, rate) })
+  const now = Date.now()
+  const sensors = useMemo(() => {
+    const v = live.data?.[0]
+    return (cat ?? []).map((s) => (v && v[s.id] !== undefined ? { ...s, value: v[s.id], t: now } : s))
+  }, [cat, live.data]) // eslint-disable-line react-hooks/exhaustive-deps
+  if (!cat) return <div className="dash">{err ? <div className="error">{err}</div> : <Loading label="Reading the catalog…" />}</div>
+
+  const byId = new Map(sensors.map((s) => [s.id, s]))
+  const families = new Map<string, Sensor[]>()
+  for (const s of sensors) { const f = s.id.split('.')[0]; families.set(f, [...(families.get(f) ?? []), s]) }
+  const names = [...families.keys()].sort((a, b) => (ORDER.indexOf(a) + 1 || 99) - (ORDER.indexOf(b) + 1 || 99) || a.localeCompare(b))
+  const demo = byId.get('cpu.usage')
+  const cores = Object.fromEntries(sensors.filter((s) => /^cpu\.core\.\d+\.usage$/.test(s.id)).map((s) => [s.id, s]))
+
+  return (
+    <div className="dash gallery">
+      <div className="dash-bar"><span className="hint">{sensors.length} sensors on this machine · live · tap a tile to copy its ID</span></div>
+
+      <h2 className="section">Widget types</h2>
+      <div className="kpis">
+        {demo && WIDGET_TYPES.filter((t) => !t.many).map((t) => <Tile key={t.id} spec={{ id: t.id, type: t.id, sensor: 'cpu.usage', title: t.label }} data={demo} note={`type=${t.id}`} />)}
+        <Tile spec={{ id: 'list', type: 'list', sensor: 'cpu.core.*.usage', title: 'List' }} data={cores} note="type=list · cpu.core.*.usage" />
+      </div>
+
+      {names.map((f) => (
+        <section key={f}>
+          <h2 className="section">{FAMILY[f] ?? f} <span className="muted">· {families.get(f)!.length} · <button className="link mono" onClick={() => copy(f + '.*')}>{f}.*</button></span></h2>
+          <div className="kpis">
+            {families.get(f)!.map((s) => <Tile key={s.id} spec={{ id: s.id, type: best(s), sensor: s.id }} data={s} note={s.id} />)}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}