// ============================================================================
// app.jsx — shell + live data owner: header, tab bar, fetch/refresh, persistence
// Fetches /api/overview (live snapshot) on a 60s tick, /api/history
// (today's chart) every 5 min, and lazily loads /api/energy per period on demand.
// ============================================================================
const { useState, useEffect, useRef, useCallback } = React;
// Every page always shows and battery power always reads + = the house is using it; the
// old per-user switches for both are gone (SOLAR-71), so drop what they left behind.
try { localStorage.removeItem('synsynk.settings'); } catch (e) {}
// "2 min ago" for the header; ticks with useNow so it stays honest between refreshes.
function fmtAgo(d, now) {
const s = Math.max(0, Math.round((now - d.getTime()) / 1000));
if (s < 45) return 'just now';
const m = Math.round(s / 60);
if (m < 90) return m + ' min ago';
const h = Math.round(m / 60);
if (h < 36) return h + 'h ago';
return readAgo(d.getTime(), now); // older than a day and a half: the date and time
}
function useNow(ms) {
const [now, setNow] = useState(Date.now());
useEffect(() => { const t = setInterval(() => setNow(Date.now()), ms); return () => clearInterval(t); }, [ms]);
return now;
}
Object.assign(window, { fmtAgo, useNow, plantStatus }); // Equipment's reading ages; Solar and Grid's silent plant
// Header status: one word, coloured. Live = fresh data and every inverter up;
// Stale = the poller is behind (> 3 min) or an inverter is down; Offline = no data
// for 15 min or nothing reporting.
function plantStatus(snap, now) {
const online = snap.inverters.filter(i => i.status === 'online').length;
const total = snap.inverters.length;
const offline = total - online;
const last = snap.lastReading || snap.updated;
const ageS = (now - last.getTime()) / 1000;
const status = (total > 0 && offline >= total) || ageS > 900 ? 'offline' : (offline > 0 || ageS > 180) ? 'stale' : 'live';
return {
status, last, old: ageS > 180,
word: { live: 'Live', stale: 'Stale', offline: 'Offline' }[status],
detail: offline > 0 ? offline + ' of ' + total + ' inverters offline' : 'updated ' + fmtAgo(last, now),
};
}
// The same status on the fullscreen flow, which covers the header. Its own clock, so
// the tick re-renders this line and not the Live tab.
function WallStatus({ snap }) {
const s = plantStatus(snap, useNow(15000));
return (
{s.word}{s.detail}
);
}
window.WallStatus = WallStatus;
// ---- the frame (SOLAR-13) ---------------------------------------------------
// A sidebar of pages with the account at its foot, a header with the plant and its
// status, and on a phone a bottom bar instead of the sidebar. Tablet (600–1023 px)
// narrows the sidebar to an icon rail in CSS; nothing here knows the width.
const NAV_ICONS = {
live: '',
solar: '',
battery: '',
grid: '',
inverters: '',
settings: '',
more: '',
account: '',
signout: '',
chevron: '',
refresh: '',
plug: '',
};
// fixed strings from the table above, never data
const Icon = ({ id }) => ;
// An open menu closes on a click elsewhere or Escape (focus goes back to its button), and
// takes the arrow keys while focus is inside it. No keyboard shortcuts beyond that, by decision.
function usePopover() {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const away = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const key = e => { if (e.key === 'Escape') { setOpen(false); ref.current?.querySelector('button')?.focus(); } };
document.addEventListener('pointerdown', away);
document.addEventListener('keydown', key);
return () => { document.removeEventListener('pointerdown', away); document.removeEventListener('keydown', key); };
}, [open]);
return [open, setOpen, ref];
}
function MenuList({ className, label, children }) {
const ref = useRef(null);
useEffect(() => { (ref.current.querySelector('[aria-checked="true"]') || ref.current.querySelector('button'))?.focus(); }, []);
const keys = e => {
if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
const items = [...ref.current.querySelectorAll('button:not(:disabled)')], i = items.indexOf(document.activeElement);
const n = e.key === 'Home' ? 0 : e.key === 'End' ? items.length - 1 : (i + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
items[n]?.focus(); e.preventDefault();
};
return
{children}
;
}
// The plant on screen, left in the header; a menu once there is more than one.
function PlantMenu({ me, plantId, onPlant, fallback }) {
const plants = me?.plants || [];
const label = (p) => p.name || ('Plant ' + p.id);
const current = plants.find(p => p.id === plantId);
const name = current ? label(current) : (fallback || '');
const [open, setOpen, ref] = usePopover();
if (plants.length < 2 || !onPlant) return
{name}
;
return (
{open && (
{plants.map(p => (
))}
)}
);
}
// The person: avatar, name and plant count in the sidebar; the avatar alone in a phone's
// header. A dead SunSynk login puts a red dot on the avatar and on Account.
function AccountMenu({ user, plantCount, alert, onAccount, active, variant }) {
const [open, setOpen, ref] = usePopover();
const sub = alert ? 'Reconnect a login' : plantCount + (plantCount === 1 ? ' plant' : ' plants');
return (
{open && (
{user.email}
Sign out
)}
);
}
function Sidebar({ tabs, tab, onTab, account }) {
return (
);
}
// Phone: at most five slots, Settings always the last. More than four pages: the first
// three, then More, which opens a sheet with the rest.
function PhoneBar({ tabs, tab, onTab }) {
const [more, setMore] = useState(false);
const pages = tabs.filter(t => t.id !== 'settings');
const settingsTab = tabs.find(t => t.id === 'settings');
const split = pages.length > 4;
const bar = split ? pages.slice(0, 3) : pages;
const rest = split ? pages.slice(3) : [];
const go = (id) => { setMore(false); onTab && onTab(id); };
useEffect(() => {
if (!more) return;
const key = e => { if (e.key === 'Escape') { setMore(false); document.querySelector('.phonebar .more-btn')?.focus(); } };
document.addEventListener('keydown', key);
document.querySelector('.sheet button')?.focus();
return () => document.removeEventListener('keydown', key);
}, [more]);
const slot = (t) => (
);
return (
<>
{more && (
{ if (e.target === e.currentTarget) setMore(false); }}>
{rest.map(slot)}
)}
);
}
// Status word right of the plant, coloured; the age only once it is worth reading.
function HeaderStatus({ snap, onRefresh, busy, idleWord }) {
const now = useNow(15000);
if (!snap) {
return (
<>
{idleWord}
);
}
const s = plantStatus(snap, now);
return (
<>
{s.word}
{/* an old reading's date shows from tablet width up; a phone keeps the room for the plant name */}
{s.old && (() => { const p = fmtAgo(s.last, now).replace(' ago', '').split(', ');
return {p.length === 2 && {p[0]}, }{p[p.length - 1]}; })()}
{/* A freshly linked plant: the last 60 days arrive over a day or two of
six-hourly runs (0048). Quiet once every day has a chart. */}
{snap.sync && snap.sync.pending && snap.sync.days < snap.sync.window && (() => {
const pct = Math.round(100 * (snap.sync.days || 0) / (snap.sync.window || 60));
return (
Fetching history
{pct}%
);
})()}
{/* takes the status colour once something is wrong, and reads Retry when nothing reports */}
);
}
// Says on the page when its numbers are old, and why. Grid off is news, not a fault: calm purple.
function PageNotice({ snap, cutOff, onReconnect }) {
const now = useNow(15000);
const s = plantStatus(snap, now);
const at = readAgo(s.last.getTime(), now); // with the date once it is over a day old
const a = snap.aggregate || {};
if (s.status === 'offline' && cutOff) return (
SunSynk login stopped working. Readings paused at {at}.
);
if (s.status === 'offline') return (
{s.old ? 'No readings since ' + at + '.' : 'No inverter is reporting.'}
);
// stale readings still say the grid is off, so both banners can show
return (
<>
{s.status === 'stale' && (
{s.old ? <>Last reading at {at}, {fmtAgo(s.last, Date.now())}. : {s.detail}.}
Grid off. {snap.features?.hasBattery === false ? 'Running on solar.' : 'Running on solar and battery.'}
)}
);
}
const TABS = [
{ id: 'live', label: 'Live' },
{ id: 'solar', label: 'Solar' },
{ id: 'grid', label: 'Grid' },
{ id: 'inverters', label: 'Equipment' },
{ id: 'settings', label: 'Settings' },
];
// Account is a page too, reached from the account menu rather than the page list.
const pageOk = (tabs, id) => id === 'account' || tabs.some(t => t.id === id);
// A saved or linked Battery page opens Equipment, where the packs now are.
const tabAlias = (id) => (id === 'battery' ? 'inverters' : id);
// Back to the top of the page: the frame's body scrolls beside a sidebar, the document on a phone.
const toTop = () => { document.querySelector('.frame-body')?.scrollTo({ top: 0 }); window.scrollTo({ top: 0 }); };
// The frame around every page: sidebar, header, content, phone bar.
function Frame({ tabs, tab, onTab, head, account, busy, children }) {
return (
{head}
{account && }
{children}
);
}
// Shown while the session and the SunSynk link are still being checked, before App
// mounts. Same frame as App's own not-yet-loaded gate, so the hand-over does not flash.
function BootShell() {
// No remembered tab means this browser hasn't shown this account a dashboard since the
// last sign-out: most likely a new account on its way to Connect SunSynk. A skeleton
// would flash a dashboard it will never get, so show the empty sign-in backdrop.
if (!localStorage.getItem('synsynk.tab')) return ;
const saved = tabAlias(new URLSearchParams(location.search).get('tab') || localStorage.getItem('synsynk.tab'));
const tab = pageOk(TABS, saved) ? saved : 'live';
return (
}>
{tab !== 'settings' && tab !== 'account' && }
);
}
// The signed-in person, for the account menu: name, initials, email.
function useUser() {
const [user, setUser] = useState({ name: '', initials: '', email: '' });
useEffect(() => {
window.sb.auth.getSession().then(({ data }) => {
const u = data?.session?.user; if (!u) return;
const email = u.email || '';
const name = u.user_metadata?.full_name || u.user_metadata?.name || email.split('@')[0];
const initials = name.split(/[\s._-]+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join('');
setUser({ name, initials, email });
}).catch(() => {});
}, []);
return user;
}
// Settings' own outline for Setup: its three plant sections, title on the left and a card of
// fields on the right, as the real page draws them (SOLAR-96).
function SettingsSkeleton() {
const field =
;
return (
Settings
{['Plant', 'Tariff', 'Battery'].map(t => (
{t}
{field}{field}
))}
);
}
// Signed in, with no SunSynk plant yet: a new account, or every login removed. The frame
// is the real one, every page opens, and Account (with Delete account) works. Every other
// page shows its own layout as a still, faint outline, with one card centred in view saying
// what will appear there (the same card, one size, on each page). Connect inverter, there or
// in the header, opens that card into the form where it stands; Cancel or Esc folds it back
// (SOLAR-96). Once a login lists a plant the gate's refresh swaps this for App (SOLAR-93, SOLAR-94).
function Setup({ links }) {
const user = useUser();
// The remembered page too, so removing the last login on Account stays on Account.
const [tab, setTab] = useState(() => {
const t = tabAlias(new URLSearchParams(location.search).get('tab') || localStorage.getItem('synsynk.tab') || '');
return pageOk(TABS, t) ? t : 'live';
});
const [connecting, setConnecting] = useState(false);
const go = (id) => { setTab(id); setConnecting(false); toTop(); };
// Account has no card, so the header's button opens it on Live.
const connect = () => { if (tab === 'account') setTab('live'); setConnecting(true); };
useEffect(() => {
if (!connecting) return;
const key = (e) => { if (e.key === 'Escape') setConnecting(false); };
document.addEventListener('keydown', key);
return () => document.removeEventListener('keydown', key);
}, [connecting]);
const dead = links.accounts.filter(a => a.status === 'needs_relink');
const relink = dead.length > 0 && !links.accounts.some(a => a.status === 'active');
const account = { user, plantCount: 0, alert: dead.length > 0, onAccount: () => go('account'), active: tab === 'account' };
const connectBtn = (cls) => (
);
const outline = tab === 'settings' ? : ;
return (
{!connecting && connectBtn('setup-head-btn')}}>
{tab === 'account' ?
: (
) : (
// One card, the same words on every page (SOLAR-97).
Connect your inverter
Your solar, battery, grid and home show here once it’s connected.
{connectBtn('')}
)}
)}
);
}
function App({ links }) {
// plan, preferences (the last plant viewed) and plants for the signed-in user (api_me)
const [me, setMe] = useState(null);
const [plantId, setPlantId] = useState(null);
const [tab, setTab] = useState(() => tabAlias(new URLSearchParams(location.search).get('tab') || localStorage.getItem('synsynk.tab')) || 'live');
const auto = true; // refresh runs on its own; the header button forces one now
const [snap, setSnap] = useState(null);
const [today, setToday] = useState(null);
const [energy, setEnergy] = useState({});
// > 0 while a snapshot fetch is in flight; the Refresh icon spins on it. Held to a
// whole number of 800 ms turns so it never stops mid-rotation.
const [busy, setBusy] = useState(0);
const [err, setErr] = useState(null);
const [flashSection, setFlashSection] = useState(null); // a Settings section to flash once on arrival
// "Set your rate", "Set pack size", Reconnect: open the page that holds that section
// (logins are on Account) and flash it once; the section scrolls itself into view.
const openSettings = (section) => {
setFlashSection(section); setTab(section === 'connection' ? 'account' : 'settings'); toTop();
};
const user = useUser();
// Settings with unsaved plant edits holds the plant where it is; a switch asked for
// meanwhile bumps switchBlocked, and the save bar says why nothing happened.
const settingsDirty = useRef(false);
const [switchBlocked, setSwitchBlocked] = useState(0);
const [refreshKey, setRefreshKey] = useState(0); // bumped on manual refresh so the chart re-fetches its current day
const energyRef = useRef({});
const inflight = useRef({});
useEffect(() => { energyRef.current = energy; }, [energy]);
useEffect(() => { localStorage.setItem('synsynk.tab', tab); }, [tab]);
// spin = false on the 60 s auto tick, so the icon only turns for something the
// person asked for (a click, first load, a plant switch).
// A tablet waking from sleep often fails its first check while wifi reconnects, so an
// automatic check only raises the banner on the second failure in a row, and a failure
// is retried in 10 s (three times) rather than waiting for the next minute's tick.
const liveFails = useRef(0);
const liveRetry = useRef(null);
const loadLive = useCallback(async (spin = true) => {
const t0 = Date.now();
if (spin) setBusy(b => b + 1);
clearTimeout(liveRetry.current);
try { setSnap(await window.fetchSnapshot()); setErr(null); liveFails.current = 0; }
catch (e) {
liveFails.current += 1;
if (spin || liveFails.current >= 2) setErr(e.message);
if (liveFails.current <= 3) liveRetry.current = setTimeout(() => loadLive(false), 10000);
}
finally { if (spin) setTimeout(() => setBusy(b => b - 1), Math.ceil((Date.now() - t0) / 800) * 800 - (Date.now() - t0)); }
}, []);
const loadToday = useCallback(async () => {
try { setToday(await window.fetchDay()); } catch (e) { /* chart shows its own placeholder */ }
}, []);
const onNeedEnergy = useCallback((period) => {
if (energyRef.current[period] || inflight.current[period]) return;
inflight.current[period] = true;
window.fetchEnergy(period)
.then(rows => setEnergy(e => ({ ...e, [period]: rows })))
.catch(() => {})
.finally(() => { inflight.current[period] = false; });
}, []);
// Refetch every already-loaded period together so their totals stay current AND
// mutually consistent (e.g. Year and Lifetime share today's growing total rather
// than each being frozen at whenever it was first opened). Updates in place — no flicker.
const refreshEnergy = useCallback(() => {
Object.keys(energyRef.current).forEach((period) => {
window.fetchEnergy(period).then(rows => setEnergy(e => ({ ...e, [period]: rows }))).catch(() => {});
});
}, []);
const loadMe = useCallback(async () => {
try {
const m = await window.fetchMe();
setMe(m);
const ids = (m.plants || []).map(p => p.id);
const wanted = m.prefs && ids.includes(Number(m.prefs.lastPlant)) ? Number(m.prefs.lastPlant) : (ids[0] ?? null);
const cfg = (m.plants || []).find(p => p.id === wanted)?.config;
window.setCurrentPlant(wanted, cfg?.currency);
setPlantId(wanted);
// how much history this plant has — drives the "collecting your first day" copy
window.fetchTrends().then(t => { window.PLANT_DAYS = t?.stats?.days ?? null; }).catch(() => {});
} catch (e) { setErr(e.message); }
}, []);
// Name of the plant just switched to, shown in the status pill until the new
// snapshot has been on screen for a moment; null the rest of the time.
const [notice, setNotice] = useState(null);
useEffect(() => {
if (!notice) return;
// A failed load leaves snap null; the pill must not sit on "Switching" forever.
if (err) { setNotice(null); return; }
if (!snap) return;
const t = setTimeout(() => setNotice(null), 2500);
return () => clearTimeout(t);
}, [notice, snap, err]);
const switchPlant = (id) => {
if (tab === 'settings' && settingsDirty.current) { setSwitchBlocked(n => n + 1); return; }
const plant = (me?.plants || []).find(p => p.id === Number(id));
const cfg = plant?.config;
window.setCurrentPlant(id, cfg?.currency);
setPlantId(Number(id));
setNotice(plant?.name || ('Plant ' + id));
window.savePrefs({ lastPlant: Number(id) }).catch(() => {});
setEnergy({}); energyRef.current = {}; setSnap(null); setToday(null);
// how much history THIS plant has — the empty-state copy reads it
window.PLANT_DAYS = null; window.SYNC = null; syncDaysRef.current = null;
window.fetchTrends().then(t => { window.PLANT_DAYS = t?.stats?.days ?? null; }).catch(() => {});
loadLive(); loadToday(); setRefreshKey(k => k + 1);
};
// Fresh-link sync state (0048) rides on every snapshot; the empty-state copy reads
// it from window.SYNC during render, so it is assigned here in the render path,
// before any child renders (an effect would run after they had already painted
// with the previous value). When the walk lands more days, the logged-days count
// that drives "only N days so far" is refreshed too, so it does not stick at 2.
window.SYNC = snap?.sync ?? null;
const syncDaysRef = useRef(null);
useEffect(() => {
const sync = snap?.sync ?? null;
if (!sync) return;
if (syncDaysRef.current != null && sync.days !== syncDaysRef.current) {
window.fetchTrends().then(t => { window.PLANT_DAYS = t?.stats?.days ?? null; }).catch(() => {});
}
syncDaysRef.current = sync.days;
}, [snap]);
// A config save can change which plant is shown (a removed login); the data follows it.
// A reconnected login also clears the banner, so the gate's list is read again.
const reloadPlantConfig = () => {
const before = window.CURRENT_PLANT;
links.refresh();
return loadMe().then(() => {
if (window.CURRENT_PLANT !== before) setRefreshKey(k => k + 1);
loadLive();
});
};
// initial load: who am I and which plant, then the data
useEffect(() => { loadMe().then(() => { loadLive(); loadToday(); }); }, []);
// auto refresh: live every minute (matches SunSynk's cadence), today and energy every
// 5th minute. On the clock, not from page load, so devices side by side show the same
// numbers (SOLAR-33). The second past the minute is the plant's own, 12–42 s, so every
// device on one plant still asks together, after the reading has landed (by ~:06), while
// different plants ask at different moments instead of all in one second (SOLAR-70).
useEffect(() => {
if (!auto) return;
let a;
const off = 12000 + ((Number(plantId) || 0) * 7919 % 31) * 1000;
const next = () => { const ms = 60000 - (Date.now() - off) % 60000; a = setTimeout(tick, ms < 1000 ? ms + 60000 : ms); };
const tick = () => {
loadLive(false);
if (new Date().getMinutes() % 5 === 0) { loadToday(); refreshEnergy(); }
next();
};
next();
// timers sleep with a tablet's screen; catch up the moment it is back or online again
const wake = () => { if (document.visibilityState === 'visible') { loadLive(false); loadToday(); refreshEnergy(); } };
document.addEventListener('visibilitychange', wake);
window.addEventListener('online', wake);
return () => {
clearTimeout(a); clearTimeout(liveRetry.current);
document.removeEventListener('visibilitychange', wake); window.removeEventListener('online', wake);
};
}, [auto, plantId]);
const refresh = () => { if (busy) return; loadLive(); loadToday(); refreshEnergy(); setRefreshKey(k => k + 1); };
const go = (id) => { setTab(id); toTop(); };
const loginDead = links.accounts.some(a => a.status === 'needs_relink');
const account = { user, plantCount: (me?.plants || []).length, alert: loginDead, onAccount: () => go('account'), active: tab === 'account' };
const plantMenu = ;
const settingsPage = setFlashSection(null)} onDirty={d => { settingsDirty.current = d; }} switchBlocked={switchBlocked} />;
const accountPage = setFlashSection(null)} />;
// ---- not-yet-loaded gate ----
//
// The whole frame with skeletons where the data will go. Pages stay live while loading:
// there is no reason to trap someone on Live because the first snapshot hasn't landed.
if (!snap) {
return (
{(me?.plants || []).length > 0 && !err ? plantMenu : }
0} />}>
{err &&
Can't reach the server. Retrying every minute.
}
{/* Settings and Account never touch the snapshot: they draw for real. */}
{tab === 'settings' ? settingsPage
: tab === 'account' ? accountPage
: }
);
}
const plantLogins = links.accounts.filter(a => a.status !== 'disabled' && (a.plants || []).some(p => String(p.plant_id) === String(plantId)));
const plantCutOff = plantLogins.length > 0 && !plantLogins.some(a => a.status === 'active') && !!snap && plantStatus(snap, Date.now()).status === 'offline';
const dataPage = tab !== 'settings' && tab !== 'account';
const old = dataPage && plantStatus(snap, Date.now()).old;
return (
{plantMenu} 0} />}>
{/* The raw error stays in the title; on screen it was a Postgres or JWT string a
homeowner cannot act on. */}
{err &&
Couldn't refresh. Showing the last good reading.
}
{/* For the plant on screen. A plant still read through someone else's copy of the
login stays quiet; a dead login still marks the avatar and Account with a dot. */}
{dataPage && openSettings('connection')} />}