// calibrate.jsx — appliance calibration (INTERNAL TOOL, not a resident screen).
//
// The goal: teach the app to recognise appliances from the whole-home clamp.
// Someone isolates one appliance, records the window it ran in, and we end up
// with labelled examples to build power signatures from. Later the app guesses
// and residents confirm with one tap.
//
// Reached only via ?calibrate=1 — there is no link to it anywhere in the app,
// so residents never land here.
//
// ── Backend status ───────────────────────────────────────────────────────────
// The endpoints this screen needs do NOT exist yet (all 404 today) — they're
// specified in docs/CALIBRATION_BACKEND_HANDOFF.md:
// GET /devices/{id}/readings?from=&to=&channel= raw samples for a window
// GET /household/calibration/runs list
// POST /household/calibration/runs save
// DELETE /household/calibration/runs/{id} remove
// Until they return 200, Save stays DISABLED and nothing is written to the
// browser. That's deliberate: calibration data must live in Supabase, not in
// one person's localStorage where switching phone or clearing the browser
// loses it. The screen detects readiness by calling the list endpoint and
// treating 404 as "not built yet"; it switches on by itself once deployed.
//
// What DOES work today: the live readout. While a run is in progress the
// screen watches the clamp so you can see the appliance's draw in real time
// and tell immediately whether it stands out from the background. That reading
// is held in memory for the session only and is never persisted.
(function () {
const { useState, useEffect, useRef } = React;
// Free text, because the backend's appliance_types are far too coarse for this
// (6 categories, no kettle / fridge / microwave). These are just quick fills.
const CAL_SUGGESTIONS = [
'Kettle', 'Fridge', 'Water heater', 'Washing machine', 'Microwave',
'Induction hob', 'Rice cooker', 'TV', 'Standing fan', 'Dryer',
];
const CAL_CHANNELS = [
{ channel: 1, label: 'Whole home' },
{ channel: 2, label: 'Circuit 1' },
{ channel: 3, label: 'Circuit 2' },
];
function fmtDuration(ms) {
const s = Math.max(0, Math.round(ms / 1000));
const m = Math.floor(s / 60);
return m > 0 ? `${m}m ${String(s % 60).padStart(2, '0')}s` : `${s}s`;
}
function fmtClock(t) {
const d = new Date(t);
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
// A run's samples → the numbers that actually matter for a signature.
function summarise(samples) {
if (!samples || samples.length === 0) return null;
const w = samples.map((s) => s.w);
const mean = w.reduce((a, b) => a + b, 0) / w.length;
return {
count: w.length,
mean: Math.round(mean),
peak: Math.round(Math.max(...w)),
min: Math.round(Math.min(...w)),
};
}
// Simple line chart of a run's samples. Irregular spacing is fine — x is index.
function TraceChart({ c, samples, height = 90, color }) {
if (!samples || samples.length < 2) return null;
const w = samples.map((s) => s.w);
const max = Math.max(...w, 1);
const min = Math.min(...w, 0);
const span = Math.max(1, max - min);
const pts = samples.map((s, i) => {
const x = (i / (samples.length - 1)) * 100;
const y = 100 - ((s.w - min) / span) * 100;
return `${x.toFixed(2)},${y.toFixed(2)}`;
}).join(' ');
return (
{Math.round(min)}Wpeak {Math.round(max)}W
);
}
function CalBanner({ c, state }) {
const cfg = {
checking: { bg: c.surfaceAlt, fg: c.textMuted, text: 'Checking whether saving is switched on…' },
missing: { bg: c.warnSoft, fg: '#7C5A1B', text: "Saving isn't available yet — the backend endpoints for calibration haven't shipped. Runs are shown live but can't be stored, so nothing is kept in this browser." },
ready: { bg: c.goodSoft, fg: '#2F6147', text: 'Saving is live — runs are stored to your household.' },
}[state];
return (
{cfg.text}
);
}
function CalibrationScreen({ c, onClose }) {
const clamp = useClamp(); // same poller the Home screen uses
const [label, setLabel] = useState('');
const [channel, setChannel] = useState(1);
const [notes, setNotes] = useState('');
// 'checking' | 'missing' | 'ready' — whether the backend can store runs.
const [backend, setBackend] = useState('checking');
const [runs, setRuns] = useState([]);
useEffect(() => {
let alive = true;
SaveHorAPI.getCalibrationRuns()
.then((r) => { if (alive) { setBackend('ready'); setRuns((r && r.runs) || r || []); } })
.catch((e) => { if (alive) setBackend(e && e.status === 404 ? 'missing' : 'missing'); });
return () => { alive = false; };
}, []);
// A run in progress: started_at + the samples seen since. Memory only.
const [run, setRun] = useState(null); // { startedAt, samples: [{ t, w }] }
const [done, setDone] = useState(null); // the finished run, awaiting save
const [tick, setTick] = useState(0); // re-render the elapsed clock
useEffect(() => {
if (!run) return undefined;
const id = setInterval(() => setTick((n) => n + 1), 1000);
return () => clearInterval(id);
}, [run]);
// Every time the clamp reports a new figure for the chosen channel, record it.
const view = clamp.channel(channel);
const watts = view ? view.watts : null;
const lastAt = clamp.updatedAgo;
useEffect(() => {
if (!run || watts == null) return;
setRun((r) => (r ? { ...r, samples: [...r.samples, { t: Date.now(), w: watts }] } : r));
}, [watts, lastAt]); // lastAt changes each poll, so a steady reading still records
const start = () => { setDone(null); setRun({ startedAt: Date.now(), samples: [] }); };
const stop = () => {
if (!run) return;
setDone({ label: label.trim() || 'Unlabelled', channel, startedAt: run.startedAt, endedAt: Date.now(), samples: run.samples, notes });
setRun(null);
};
const canStart = !!clamp.hasClamp && !run;
const summary = summarise(done ? done.samples : run ? run.samples : null);
const elapsed = run ? Date.now() - run.startedAt : done ? done.endedAt - done.startedAt : 0;
const field = (labelText, node) => (
Internal tool · teach the app what each appliance looks like
{!clamp.hasClamp ? (
{clamp.status === 'loading' ? 'Looking for a CT clamp on this household…' : 'This household has no CT clamp, so there is nothing to calibrate against.'}