-
@@ -996,7 +996,7 @@ ML twins
+Forecasts
Price bars (top of the chart)
- + diff --git a/web/style.css b/web/style.css index df06f951d..4a88171ef 100644 --- a/web/style.css +++ b/web/style.css @@ -2006,7 +2006,7 @@ body.advanced #ui-mode-toggle { color: #fbbf24; } .twins-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 10px; } @@ -2029,17 +2029,34 @@ body.advanced #ui-mode-toggle { color: #fbbf24; } } .twin-card .twin-row span { color: var(--text-dim, #a0a0a0); } .twin-card .twin-row b { color: var(--text, #e8e8e8); font-weight: 500; } -.twin-quality { - height: 4px; - background: rgba(255,255,255,0.08); - border-radius: 2px; - overflow: hidden; - margin-top: 6px; -} -.twin-quality-fill { - height: 100%; - background: linear-gradient(90deg, #22c55e, #86efac); - transition: width 0.3s; +#twins-section { margin-top: 24px; } +.forecast-card { padding: 20px; align-self: start; min-width: 0; } +.forecast-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } +.forecast-card .forecast-card-heading h3 { margin: 0; font-family: var(--sans); font-size: 16px; color: var(--fg); } +.forecast-state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12px; color: var(--fg-dim); } +.forecast-state::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; } +.forecast-state[data-tone="learning"], .forecast-state[data-tone="healthy"], .forecast-state[data-tone="warning"] { color: var(--fg); } +.forecast-state[data-tone="learning"]::before { background: var(--accent-e); } +.forecast-state[data-tone="healthy"]::before { background: var(--green-e); } +.forecast-state[data-tone="warning"]::before { background: var(--amber); } +.forecast-description { margin: 18px 0 5px; color: var(--fg-dim); font-family: var(--sans); font-size: 13px; line-height: 1.5; } +.forecast-meta { margin: 0; font-family: var(--sans); font-size: 13px; color: var(--fg); } +.forecast-details-button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin-top: 12px; padding: 8px 0; background: none; border: 0; color: var(--fg-dim); font-family: var(--sans); font-size: 12px; text-align: left; cursor: pointer; } +.forecast-details-button:hover { color: var(--fg); } +.forecast-details-button:focus-visible { outline: 2px solid var(--accent-e); outline-offset: 3px; border-radius: 2px; } +.forecast-details { border-top: 1px solid var(--line); padding-top: 16px; } +.forecast-details[hidden] { display: none; } +.forecast-details h4 { margin: 22px 0 6px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg); } +.forecast-note { margin: 8px 0 14px; font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--fg-dim); } +.forecast-card .twin-row { gap: 16px; padding: 5px 0; font-size: 12px; } +.forecast-card .twin-row b { text-align: right; overflow-wrap: anywhere; min-width: 0; } +.forecast-action-status { margin-top: 8px; color: var(--fg); font-family: var(--sans); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; } +.forecast-action-status:empty { display: none; } +body.ftw-app .forecast-card .btn-reset-model { min-height: 44px; font-family: var(--sans); letter-spacing: 0; font-size: 12px; } +body.ftw-app .forecast-card .twin-profile-toggle button { min-height: 40px; font-family: var(--sans); font-size: 12px; } +@media (max-width: 420px) { + .forecast-card { padding: 16px; } + .forecast-card .twin-row { flex-wrap: wrap; gap: 4px 12px; } } .models-grid { display: grid; diff --git a/web/twins.js b/web/twins.js index 7423c46bc..dcb2e851d 100644 --- a/web/twins.js +++ b/web/twins.js @@ -1,6 +1,5 @@ -// twins.js — advanced-mode forecast-learning diagnostics. -// Polls only while advanced mode is visible. The box owns the model state; -// this view only asks it to begin a new learning period for one signal. +// Forecast status with model diagnostics behind an explicit disclosure. +// The box owns learning state; elapsed time never establishes model quality. (function () { 'use strict'; @@ -18,6 +17,7 @@ const availableActions = new Set(); const actionMessages = new Map(); const actionFocus = new Set(); + const expanded = new Set(); function apiFetch(path, opts) { return fetch(path, opts); } @@ -39,7 +39,7 @@ render(pv, load); } - function advancedVisible() { return !!(document.body && document.body.classList.contains('advanced')); } + function forecastsVisible() { return location.hash.split('/')[0] === '#more'; } function startPolling() { if (refreshTimer) return; fetchAll(); @@ -51,16 +51,17 @@ refreshTimer = null; } function syncPolling() { - if (advancedVisible() && !document.hidden) startPolling(); + if (forecastsVisible() && !document.hidden) startPolling(); else stopPolling(); } function fmtAge(ms) { if (!ms) return '—'; - const s = Math.round((Date.now() - ms) / 1000); + const s = Math.max(0, Math.round((Date.now() - ms) / 1000)); if (s < 60) return s + 's ago'; if (s < 3600) return Math.round(s / 60) + 'm ago'; - return Math.round(s / 3600) + 'h ago'; + if (s < 86400) return Math.round(s / 3600) + 'h ago'; + return Math.floor(s / 86400) + 'd ago'; } function fmtLocalTime(ms) { if (!ms || !Number.isFinite(Number(ms))) return '—'; @@ -83,7 +84,7 @@ } function engineLabel(learning) { if (!learning) return 'Unavailable'; - return learning.engine === 'energyplan' ? 'Energyplan' : learning.engine === 'legacy' ? 'Legacy' : 'Unavailable'; + return learning.engine === 'energyplan' ? 'Energyplan' : learning.engine === 'legacy' ? 'Local model' : 'Unavailable'; } function actionAvailable(d) { const learning = d && d.learning; @@ -103,54 +104,99 @@ function loadProfileControl(d) { if (!d || !d.enabled) return ''; - const active = d.profile || d.active_profile || 'home'; + const active = d.profile || d.active_profile; function btn(profile, label) { const cls = profile === active ? ' class="active"' : ''; - return ``; + return ``; } - return 'profile' +
- `
';
+ return '` + btn('home', 'Home') + btn('away', 'Away') + '
Household profile' +
+ '
';
}
+ function row(label, value) {
+ return `' + btn('home', 'Home') + btn('away', 'Away') + '
${esc(label)}${esc(value)}
`;
+ }
+ function watts(value) { return Number.isFinite(value) ? Math.round(value).toLocaleString() + ' W' : 'Not available'; }
+
function modelRows(d) {
- const learning = d.learning;
- const legacy = learning && learning.engine === 'energyplan';
- const prefix = legacy ? 'legacy ' : '';
- const rows = [];
- if (legacy) rows.push('legacy model statssecondary
');
- rows.push(`${prefix}samples${d.samples || 0}
`);
- if (d.mae_w != null) rows.push(`${prefix}MAE${d.mae_w.toFixed(0)} W
`);
- if (d.peak_w != null) rows.push(`${prefix}peak ref${(d.peak_w / 1000).toFixed(1)} kW
`);
- if (d.rated_w != null) rows.push(`${prefix}rated${(d.rated_w / 1000).toFixed(1)} kW
`);
- if (d.heating_w_per_degc != null && d.heating_w_per_degc > 0) rows.push(`${prefix}heating${d.heating_w_per_degc.toFixed(0)} W/°C
`);
- if (d.buckets_warm != null) rows.push(`${prefix}buckets warm${d.buckets_warm}/${d.buckets_total}
`);
- rows.push(`${prefix}last update${fmtAge(d.last_ms)}
`);
- if (d.quality != null) {
- const quality = Math.max(0, Math.min(1, d.quality));
- const qualityPct = (quality * 100).toFixed(0);
- const qualityColor = quality >= 0.7 ? '#22c55e' : quality >= 0.3 ? '#fbbf24' : '#ef4444';
- rows.push(`${prefix}quality${qualityPct}%
`);
- rows.push(``);
+ const older = d.learning && d.learning.engine === 'energyplan';
+ const rows = [row('Training samples', d.samples ?? 'Not available')];
+ if (d.mae_w != null) rows.push(row('Average training error', watts(d.mae_w)));
+ if (Number.isFinite(d.peak_w)) rows.push(row('Load reference', (d.peak_w / 1000).toFixed(1) + ' kW'));
+ if (Number.isFinite(d.rated_w)) rows.push(row('Solar starting estimate', (d.rated_w / 1000).toFixed(1) + ' kW'));
+ if (d.heating_w_per_degc > 0) rows.push(row('Heating estimate below 18 °C', Math.round(d.heating_w_per_degc) + ' W/°C'));
+ if (d.buckets_warm != null) rows.push(row('Weekly hours with 8+ samples', d.buckets_warm + '/' + d.buckets_total));
+ rows.push(row('Last model update', fmtLocalTime(d.last_ms)));
+ return `
${older ? 'Older local model' : 'Local model diagnostics'}
` + + `${older ? 'Kept for comparison and fallback. These figures describe the older model, not Energyplan.' : 'These figures describe the model’s training data.'} Training error is not measured forecast accuracy.
` + rows.join(''); + } + + function overview(d, signal) { + if (!d || d.unavailable) return { label: 'Unavailable', tone: 'muted', note: 'Cannot read forecast status. Trying again.' }; + if (!d.enabled) return { label: 'Off', tone: 'muted', note: 'This forecast model is turned off.' }; + const l = d.learning; + if (l && l.health === 'degraded') { + return { label: 'Needs attention', tone: 'warning', note: 'Learning has a problem. Open details for more information.' }; + } + if (l && l.health === 'waiting_for_data') { + return { label: 'Waiting for data', tone: 'warning', note: 'Waiting for usable measurements to continue learning.' }; + } + if (!l || !['cold_start', 'learning', 'ready'].includes(l.status)) { + return { label: 'Needs attention', tone: 'warning', note: 'Forecast learning is unavailable. Open details to check its status.' }; + } + // Training is normally quarter-hourly. Allow two hours for load data + // and 36 hours for solar, which does not train throughout the night. + const maxAge = (signal === 'pv' ? 36 : 2) * 3600000; + const latest = Number(l.latest_training_ms); + const started = Number(l.started_ms); + const reference = latest > 0 ? latest : started; + if (reference > 0 && Date.now() - reference > maxAge) { + return { label: 'Waiting for data', tone: 'warning', note: latest > 0 ? 'Last learned from new measurements ' + fmtAge(latest) + '.' : 'Waiting for usable measurements to begin learning.' }; } - return rows.join(''); + if (latest > Date.now() || started > Date.now() || (l.status === 'ready' && !(latest > 0))) { + return { label: 'Status unknown', tone: 'muted', note: 'The box has not provided a valid training time.' }; + } + if (l.status === 'ready' && l.health === 'healthy') return { label: 'Healthy', tone: 'healthy', note: 'Ready and continuing to learn from your home.' }; + if (l.status === 'ready') return { label: 'Ready', tone: 'muted', note: 'The model is ready. Its health has not been confirmed.' }; + return { label: 'Learning', tone: 'learning', note: l.status === 'cold_start' ? 'Getting started with your home’s measurements.' : 'Getting to know your home’s energy patterns.' }; + } + + function learningDuration(learning) { + const started = Number(learning && learning.started_ms); + if (!(started > 0) || started > Date.now()) return ''; + const days = Math.floor((Date.now() - started) / 86400000); + return days < 1 ? 'First day of learning' : days + (days === 1 ? ' day learning' : ' days learning'); } - function twinCard(title, d, endpoint, extraHtml) { + function twinCard(title, d, endpoint) { const action = actions[endpoint]; const statusID = 'twin-status-' + action.id; - if (!d || d.unavailable) return `${title}
model stateUnavailable
The box did not provide this model state.
${title}
model stateDisabled
This model is disabled on the box.
engine${engineLabel(learning)}
`,
- `learning state${learningStatus(learning)}
`,
- ];
- if (learning) {
- learningRows.push(`learning started${fmtLocalTime(learning.started_ms)}
`);
- learningRows.push(`latest training${fmtLocalTime(learning.latest_training_ms)}
`);
- }
- return `${title}
${extraHtml || ''}${learningRows.join('')}${modelRows(d)}${resetButton(endpoint, d)}${esc(message)}
${esc(learning.health_reason)}
` : '') + + row('Learning period started', learning && learning.started_ms > 0 ? fmtLocalTime(learning.started_ms) : 'Start date not recorded') + + row('Latest training data', fmtLocalTime(learning && learning.latest_training_ms)) + + 'Healthy requires a health check from the box, a ready model and recent training data. It is not a forecast accuracy score. Learning days count elapsed time, not data coverage.
' + + (action.id === 'load' ? loadProfileControl(d) : '') + + 'Forecast accuracy
Measured forecast accuracy is not available in this view yet.
' + modelRows(d) + + 'Restart learning
Use this after a lasting change to your home or solar system. It restarts this model and its fallback; measured history stays saved.
' + + resetButton(endpoint, d) + (!actionAvailable(d) ? 'Relearning is unavailable for this model.
' : '') : + '' + esc(state.note) + '
'; + return `${title}
${state.label}${esc(state.note)}
${meta ? `` : ''}` + + `` + + `${details}
` +
+ `${esc(actionMessages.get(endpoint) || '')}